/* ============================================================
   AKORA — The Guide (índice tipo revista)
   Reproduce el diseño entregado (masthead, pestañas por topic,
   mosaico focal, tira compacta, "Start here" + sidebar).
   El sistema compartido (.btn, .eyebrow, .narrow, header/footer)
   vive en akora.css. Se carga DESPUÉS de akora.css.
   ============================================================ */

html{scroll-behavior:smooth;}
body{background:var(--cream);}
.narrow{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
.gd-nav-active{color:var(--teal) !important;position:relative;}
.gd-nav-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);}

/* ---------- Masthead ---------- */
.mast{padding:clamp(56px,6.2vw,96px) 0 clamp(26px,3vw,38px);}
.mast__top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:4px;}
.mast__title{font-family:var(--font-display);font-weight:400;color:var(--navy);line-height:.9;letter-spacing:-.01em;
  font-size:clamp(40px,7.4vw,104px);margin:0;display:flex;align-items:baseline;gap:.22em;flex-wrap:nowrap;white-space:nowrap;}
.mast__title .scr{font-family:var(--font-script);color:var(--navy);font-size:.5em;line-height:1;transform:translateY(.2em);white-space:nowrap;display:inline-flex;align-items:baseline;gap:.18em;}
.mast__sig{height:.92em;width:auto;display:inline-block;transform:translateY(.2em);}

/* ---------- Topic toggle (outlined pill nav) ---------- */
.topictabs{position:relative;display:inline-flex;align-items:stretch;gap:0;
  border:1.5px solid var(--navy);border-radius:999px;padding:4px;background:transparent;
  margin:clamp(40px,4.6vw,66px) 0 clamp(40px,4.4vw,62px);max-width:100%;}
.topictabs__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:var(--gold);
  border-radius:999px;z-index:0;transition:left .4s cubic-bezier(.22,.72,.16,1),width .4s cubic-bezier(.22,.72,.16,1);}
.topictabs button{position:relative;z-index:1;appearance:none;background:transparent;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);padding:8px 16px;border-radius:999px;white-space:nowrap;transition:color .28s ease;}
.topictabs button:hover{color:var(--teal);}
.topictabs button[aria-pressed="true"]{color:var(--navy);}
.topictabs button[aria-pressed="true"]:hover{color:var(--navy);}
@media(max-width:720px){.topictabs{flex-wrap:wrap;border-radius:20px;justify-content:center;}.topictabs__thumb{display:none;}
  .topictabs button[aria-pressed="true"]{background:var(--gold);}
  /* Píldoras compactas para que los 5 temas quepan en DOS filas (cliente, 23 jul) */
  .topictabs button{font-size:9px;letter-spacing:.05em;padding:6px 9px;}}
#mosaic{transition:opacity .22s ease;}
#mosaic.is-swapping{opacity:0;}

/* ---------- Mosaic hero (focal composition) ---------- */
a.story{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.story__im{position:relative;overflow:hidden;border-radius:3px;background:var(--cream-3);}
.story__im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.story:hover .story__im img{transform:scale(1.045);}
.cat{display:inline-block;background:var(--navy);color:var(--cream);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:4px 9px;border-radius:2px;}
.story__b{padding-top:14px;}
.story__b .cat{margin-bottom:10px;}
.story__b h3{font-family:var(--font-display);font-weight:400;color:var(--navy);line-height:1.1;margin:0;text-transform:uppercase;letter-spacing:.012em;}
.story__b p{color:var(--ink-soft);margin:9px 0 0;line-height:1.55;}

.mosaic-wrap{display:block;}
.foc{display:grid;gap:clamp(16px,1.9vw,26px);}
.foc .story{min-height:0;}
.foc .story__im{flex:1 1 auto;min-height:0;height:auto;aspect-ratio:auto;}
.foc .story__b{flex:none;padding-top:11px;}
.foc .story__b h3{font-size:16px;}
.foc .story__b p{font-size:12.5px;margin-top:6px;}
.foc .foc-lead .story__b{padding-top:16px;}
.foc .foc-lead .story__b h3{font-size:clamp(23px,2.4vw,36px);}
.foc .foc-lead .story__b p{font-size:15px;margin-top:9px;max-width:44ch;}
.foc .foc-sm .story__b p{display:none;}
.foc-1{grid-template-columns:1fr;max-width:840px;margin:0 auto;height:clamp(340px,38vw,520px);}
.foc-2{grid-template-columns:1.55fr 1fr;grid-template-areas:"c r";height:clamp(360px,34vw,470px);}
.foc-3{grid-template-columns:1fr 1.6fr 1fr;grid-template-areas:"l c r";height:clamp(360px,34vw,470px);}
.foc-4{grid-template-columns:1fr 1.6fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"l1 c r1" "l2 c r1";height:clamp(480px,44vw,620px);}
.foc-5{grid-template-columns:1fr 1.6fr 1fr;grid-template-rows:1.12fr .88fr;grid-template-areas:"l1 c r1" "l2 c r2";height:clamp(500px,46vw,660px);}
@media(max-width:820px){
  .foc{display:flex!important;flex-direction:column;height:auto!important;gap:26px;}
  .foc .story__im{flex:none;aspect-ratio:4/3;}
  .foc .foc-lead .story__im{aspect-ratio:4/3.2;}
}
#guideStripSection[hidden]{display:none;}

/* ---------- Compact strip (overflow articles, paginado de 8 en 8) ---------- */
.strip-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(20px,2vw,28px);}
.strip-row .narrow{position:relative;}
.strip-row__grid{display:grid;grid-template-columns:repeat(4,1fr);transition:opacity .22s ease;}
.strip-row.is-swapping .strip-row__grid{opacity:0;}
/* Flechas "ver más artículos" (cliente, 16 jul): al pie de la tira, con el
   mismo lenguaje que las píldoras del topictabs (borde navy, hover navy). */
.strip-nav{display:flex;justify-content:flex-end;gap:8px;padding:0 0 20px;}
.strip-nav[hidden]{display:none;}
.strip-nav__btn{width:38px;height:38px;border-radius:999px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s ease,color .18s ease,opacity .18s ease;}
.strip-nav__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.strip-nav__btn:hover:not(:disabled){background:var(--navy);color:var(--cream);}
.strip-nav__btn:disabled{opacity:.32;cursor:default;}
.scard{display:flex;gap:16px;align-items:flex-start;text-decoration:none;color:inherit;padding:30px 26px;position:relative;}
.scard + .scard::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--line);}
.scard__im{flex:none;width:78px;height:78px;border-radius:3px;overflow:hidden;background:var(--cream-3);}
.scard__im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.scard:hover .scard__im img{transform:scale(1.07);}
.scard .cat{font-size:10px;margin-bottom:7px;}
.scard__tx{min-width:0;}
.scard h4{font-family:var(--font-display);font-weight:400;color:var(--navy);font-size:16px;line-height:1.18;margin:0;text-transform:uppercase;letter-spacing:.012em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.36em;}
.scard p{color:var(--ink-soft);font-size:12.5px;line-height:1.4;margin:8px 0 0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
@media(max-width:900px){.strip-row__grid{grid-template-columns:1fr 1fr;}.scard:nth-child(odd)::before{display:none;}}

/* ---------- Móvil (cliente, 27 jul) ---------- */
@media(max-width:720px){
  /* "por Madrileños" pasa a su propia línea, más grande */
  .mast__title{flex-wrap:wrap;white-space:normal;row-gap:12px;}
  .mast__title .scr{flex-basis:100%;font-size:.72em;transform:none;}
  .mast__sig{height:1em;}
  /* Tira compacta: tarjeta en columna (foto arriba) para que las 2 columnas
     queden alineadas; los separadores laterales sobran en este formato */
  .scard{flex-direction:column;gap:12px;padding:16px 12px;}
  .scard + .scard::before{display:none;}
  .scard__im{width:100%;height:auto;aspect-ratio:16/10;}
  .scard p{font-size:12px;}
  /* Flechas de paginación centradas bajo las tarjetas, siempre a la vista */
  .strip-nav{justify-content:center;padding:4px 0 20px;}
}

/* ---------- Body: "Start here" a todo el ancho (sin sidebar; cliente 16 jul) ---------- */
.layout{padding:clamp(22px,2.4vw,34px) 0 clamp(44px,4.8vw,70px);}
.feed__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:38px;}
.gd-feed-eyebrow{margin-bottom:11px;}
.feed__head h2{font-family:var(--font-display);font-weight:400;color:var(--navy);font-size:clamp(26px,2.8vw,36px);line-height:1.04;margin:0;text-transform:uppercase;letter-spacing:.012em;}

/* big horizontal feature */
.bigfeat{display:grid;grid-template-columns:1.06fr 1fr;align-items:stretch;text-decoration:none;color:inherit;border-radius:3px;overflow:hidden;}
.bigfeat__im{position:relative;overflow:hidden;background:var(--cream-3);}
.bigfeat__im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.bigfeat:hover .bigfeat__im img{transform:scale(1.045);}
.bigfeat__b{background:var(--cream-3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(40px,4.6vw,72px) clamp(28px,4vw,64px);}
.bigfeat__b .cat{margin-bottom:24px;}
.bigfeat__b h3{font-family:var(--font-display);font-weight:400;color:var(--navy);font-size:clamp(26px,2.6vw,40px);line-height:1.05;margin:0 0 20px;letter-spacing:.01em;text-transform:uppercase;max-width:13ch;}
.bigfeat__b p{color:var(--ink);font-size:15.5px;line-height:1.66;margin:0 auto 32px;max-width:34ch;}
.btn-readmore{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--navy);color:var(--navy);padding:15px 40px;border-radius:2px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:background .18s ease,color .18s ease;}
.bigfeat:hover .btn-readmore{background:var(--navy);color:var(--cream);}
@media(max-width:680px){.bigfeat{grid-template-columns:1fr;}.bigfeat__im{aspect-ratio:16/10;}.bigfeat__b{padding:26px 28px 30px;}}

.gd-empty{text-align:center;color:var(--ink-soft);font-size:16px;padding:clamp(30px,5vw,60px) 0;line-height:1.6;}