/* ============================================================
   David Mohedano · Portfolio — hoja de estilos
   Fase 1: sistema de diseño. Todos los valores salen de los
   tokens de abajo; para ajustar el diseño, toca primero aquí.
   ============================================================ */

/* ---------- 0. Tipografías (alojadas en la propia web, sin Google) ---------- */
/* Instrument Serif · italic · latin-ext */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Instrument Serif · italic · latin */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Instrument Serif · normal · latin-ext */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Instrument Serif · normal · latin */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/instrument-serif-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Newsreader · italic · latin-ext */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Newsreader · italic · latin */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Newsreader · normal · latin-ext */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Newsreader · normal · latin */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('../assets/fonts/newsreader-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;
  /* tipografías */
  --sf:'Instrument Serif',Georgia,serif;      /* titulares */
  --tf:'Newsreader',Georgia,serif;            /* texto */
  --dw:400; --it:italic; --ls:-.02em;

  /* escala tipográfica (de mayor a menor) */
  --t-display:clamp(56px,10.5vw,190px);       /* títulos de página: Sobre mí, Contacto… */
  --t-hero:clamp(44px,6vw,118px);             /* «Creativo publicitario» */
  --t-title:clamp(40px,6vw,84px);             /* título de cada caso */
  --t-h2:clamp(24px,2.4vw,32px);              /* Reto, Idea, siguiente proyecto… */
  --t-index:clamp(20px,1.9vw,30px);           /* índice de proyectos */
  --t-lead:clamp(18px,1.6vw,22px);            /* claim, frases, entradillas */
  --t-body:clamp(17px,1.25vw,19px);           /* texto de lectura */
  --t-s:15px;                                 /* equipo, notas */
  --t-xs:13px;                                /* etiquetas, ficha, filtros */
  --t-2xs:12px;                               /* mínimo absoluto */

  /* espacio */
  --g:24px;                                   /* margen lateral de la página */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --max:1300px;                               /* ancho máximo de los casos */

  /* formas */
  --r-tile:16px;                              /* miniaturas de la home */
  --r-media:12px;                             /* imágenes y vídeos de los casos */
  --r-s:10px;
  --r-pill:999px;

  /* movimiento */
  --ease-out:cubic-bezier(.16,.7,.2,1);       /* entradas y respuestas */
  --ease-io:cubic-bezier(.7,0,.2,1);          /* cortinillas y desplazamientos */
  --d-fast:160ms; --d-mid:300ms; --d-slow:700ms;

  /* sobre fotografía (no cambian con el tema) */
  --on-img:#fff; --scrim:rgba(0,0,0,.6);
}
/* colores del tema claro (por defecto) */
body{
  --bg:#f6f4ee;
  --tx:#0d0d14;
  --mu:#6b6964;      /* texto secundario: 5:1 sobre el fondo (AA) */
  --dim:#8a8a8f;     /* solo para texto grande (≥24 px): índice, numeración */
  --ln:#dedad0;      /* líneas y fondos de carga */
  --ac:#e9561f;      /* naranja de marca: rellenos y elementos grandes */
  --ac-tx:#c2410c;   /* naranja para texto pequeño: 4,7:1 (AA) */
}
/* colores del tema oscuro */
body[data-th=dark]{
  color-scheme:dark;
  --bg:#060606;
  --tx:#f1eee9;
  --mu:#86837d;      /* 5,4:1 */
  --dim:#6f6c67;
  --ln:#222;
  --ac-tx:#ee6230;   /* 5,8:1 sobre negro */
}
@media(max-width:900px){:root{--g:20px}}

/* ---------- 2. Base ---------- */
html{box-sizing:border-box;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.5 var(--tf);overflow-x:hidden;
  transition:background-color .4s ease,color .4s ease;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
b{font-weight:500}
h1,h2{font-weight:var(--dw)}
.lbl{display:block;color:var(--mu);font-size:var(--t-xs)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:var(--ac);color:#000}

/* foco: visible con teclado, invisible con ratón */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
.t:focus-visible{outline-offset:4px;border-radius:calc(var(--r-tile) + 2px)}
.gitem:focus-visible,.pn:focus-visible{outline-offset:-4px;border-radius:var(--r-media)}

/* pulsación: todo lo que se pulsa responde */
.chip,.tg button,#tt,.fl button,.rpcta a,.rpfs,#lb .lbx{transition:transform var(--d-fast) ease-out,background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}
.chip:active,.tg button:active,#tt:active,.fl button:active,.rpcta a:active,.rpfs:active,#lb .lbx:active{transform:scale(.97)}

/* ---------- 3. Capas: contador de carga, cortinilla, pincel ---------- */
#pre{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:var(--g);transition:transform .9s var(--ease-io)}
#pre.out{transform:translateY(-101%)}
#pre .ct{font:var(--dw) clamp(110px,26vw,360px)/.8 var(--sf);letter-spacing:var(--ls);color:var(--ac);align-self:flex-end;font-style:var(--it);font-variant-numeric:tabular-nums}
.nopre #pre{display:none}
#wp{position:fixed;inset:0;background:var(--bg);z-index:95;transform:translateY(100%);pointer-events:none;overflow:hidden}
#wp:before,#wp:after{content:"";position:absolute;left:0;right:0;height:4px;background:var(--ac);z-index:1}
#wp:before{top:0}
#wp:after{bottom:0}
#wp .wl{position:absolute;left:var(--g);bottom:calc(26px + env(safe-area-inset-bottom,0px));color:var(--ac);font:var(--dw) clamp(30px,4.6vw,76px)/1 var(--sf);letter-spacing:var(--ls);font-style:var(--it)}

/* ---------- 4. Cabecera ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:20px;
  padding:calc(17px + env(safe-area-inset-top,0px)) var(--g) 17px;font-size:16px;color:#fff;mix-blend-mode:difference;pointer-events:none}
header>*{pointer-events:auto}
header .bk{margin-left:calc(48vw - var(--g) - 130px)}
body[data-r=home] header .bk{visibility:hidden}
header nav{margin-left:auto;display:flex;gap:14px;align-items:center}
body[data-r=case] header{background:var(--bg);mix-blend-mode:normal;color:var(--tx)}

/* idioma */
.tg.lgsw{display:flex;gap:6px}
.tg button{border:1px solid rgba(255,255,255,.55);padding:4px 12px;border-radius:var(--r-pill);font-size:var(--t-xs);line-height:1.4;color:#fff;opacity:.8}
.tg button[aria-pressed=true]{background:#fff;color:#000;opacity:1}
body[data-r=case] .tg button{border-color:var(--ln);color:var(--tx);opacity:1}
body[data-r=case] .tg button[aria-pressed=true]{background:var(--tx);border-color:var(--tx);color:var(--bg)}

/* tema */
#tt{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:50%}
#tt svg{width:18px;height:18px;display:block;transition:transform .5s var(--ease-out)}
body[data-th=dark] #tt svg{transform:rotate(180deg)}

/* ---------- 5. Home ---------- */
#home{position:relative;min-height:100vh;min-height:100dvh}
.L{position:fixed;left:var(--g);top:calc(66px + env(safe-area-inset-top,0px));bottom:calc(var(--g) + env(safe-area-inset-bottom,0px));width:36vw;display:flex;flex-direction:column;justify-content:space-between;z-index:5}
.L h1{font:var(--dw) var(--t-hero)/.9 var(--sf);letter-spacing:var(--ls);margin:0 0 var(--s3)}
.L h1 em{font-style:var(--it)}
.L p{max-width:30ch;margin:0;font-size:var(--t-lead);line-height:1.4;font-style:var(--it)}
#tag{transition:opacity .75s ease}
#tag.o{opacity:0}
.ct{position:fixed;left:var(--g);bottom:calc(var(--g) + env(safe-area-inset-bottom,0px));width:36vw;display:flex;gap:30px;font-size:17px;flex-wrap:wrap;z-index:5}

/* columna de miniaturas */
#col{margin-left:48vw;width:29vw;padding:calc(20px + env(safe-area-inset-top,0px)) 0 30vh;display:flex;flex-direction:column;gap:12px}
.t{position:relative;display:block;aspect-ratio:5/3;overflow:hidden;background:var(--ln);flex:none;border-radius:var(--r-tile)}
.zm{position:absolute;inset:0;will-change:transform;transition:transform var(--d-slow) var(--ease-out)}
.t .mo{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.3) brightness(1.03);
  transition:filter var(--d-slow) ease}
/* ratón encima (.hov) o foco desde el índice (.foc): la foto pasa a color y se acerca un poco */
.t.foc .mo,.t.hov .mo{filter:none}
.t.foc .zm,.t.hov .zm{transform:scale(1.03)}
.t .gr{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.55;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* logotipo del cliente sobre la miniatura (y sobre su vídeo) */
.t .tlogo{position:absolute;top:14px;right:16px;z-index:3;width:clamp(52px,17%,84px);height:auto;pointer-events:none;filter:drop-shadow(0 1px 8px rgba(0,0,0,.35))}
.t .nb{display:none}
.t.off{display:none}
#home:not(.go) .t{opacity:0}
#home.go .t{animation:rise .9s var(--ease-out) calc(var(--k)*70ms) backwards}
@keyframes rise{from{opacity:0;transform:translateY(60px)}}
body.tc .t.live .mo{filter:none}

/* índice y filtros */
.R{position:fixed;right:var(--g);top:30vh;bottom:calc(var(--g) + env(safe-area-inset-bottom,0px));width:17vw;display:flex;flex-direction:column;align-items:flex-end;text-align:right;z-index:5}
/* filtros: pastillas pequeñas de borde fino; la activa se marca solo con el borde y el texto */
.fl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 4px;margin-top:6px;font-size:var(--t-2xs);font-style:var(--it);color:var(--mu)}
.fl button{padding:1px 9px 2px;border:1px solid var(--ln);border-radius:var(--r-pill);line-height:1.45}
.fl button[aria-pressed=true]{border-color:var(--tx);color:var(--tx)}
.R .idx{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:var(--s2)}
.R .idx a{color:var(--dim);font:var(--dw) var(--t-index)/1.06 var(--sf);letter-spacing:-.02em;text-wrap:balance;
  transition:color .25s ease,transform .35s var(--ease-out)}
.R .idx a.act{color:var(--tx);transform:translateX(-8px)}
.R .idx a.off{display:none}
.R .cp{margin-top:auto;color:var(--mu);font-size:var(--t-xs)}
.cpm{display:none}

/* ---------- 6. Casos ---------- */
.cs{padding:calc(70px + env(safe-area-inset-top,0px)) 0 60px}
.cs.bld>.eg{opacity:0;transform:translateY(26px)}
.cs.bld.go>.eg{animation:zmup 1.1s var(--ease-out) .1s forwards}
@keyframes zmup{to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.05s var(--ease-out) .12s,transform 1.05s var(--ease-out) .12s}
.rv.in{opacity:1;transform:none}

/* cabecera del caso */
.rphd{max-width:var(--max);margin:0 auto;padding:14px var(--g) 18px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.rphd .rtt{font:var(--dw) var(--t-title)/1.02 var(--sf);letter-spacing:var(--ls);margin:0;max-width:100%;white-space:nowrap}
.rphd .rtt.wr{white-space:normal;text-wrap:balance}
.rphd .rptag{font:var(--dw) var(--t-lead)/1.4 var(--sf);font-style:var(--it);color:var(--mu);margin:2px 0 0;max-width:100%}

/* imagen o vídeo principal */
.rphero{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.rphero .vwrap{position:relative}
.rphero .im1{width:100%;height:min(62vh,640px);border-radius:var(--r-media);background:var(--ln) center/cover no-repeat;position:relative;overflow:hidden}
.rphero .im1.pn{aspect-ratio:16/9;height:auto}
.rptags{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap;z-index:4;margin:0}
.rptags .chip{background:var(--scrim);color:var(--on-img);border-color:transparent;font-size:var(--t-2xs);padding:3px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rpfs{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;background:var(--scrim);border:1px solid rgba(255,255,255,.5);color:var(--on-img);display:none;align-items:center;justify-content:center;font-size:15px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rphero .vwrap.playing .rpfs{display:flex}

/* ficha y entradilla */
.rpmeta{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:56px;padding:48px var(--g) 10px}
.rpmeta .det{margin:0;flex:0 0 220px;display:flex;flex-direction:column}
.rpmeta .det .rr{display:flex;justify-content:space-between;gap:var(--s2);padding:8px 0;border-top:1px solid var(--ln);font-size:var(--t-xs)}
.rpmeta .det .rr:last-child{border-bottom:1px solid var(--ln)}
.rpmeta .det dt{color:var(--mu)}
.rpmeta .det dd{margin:0;font-weight:500;text-align:right}
.rpmeta .intro{flex:1 1 420px;display:flex;align-items:center}
.rpmeta .intro p{margin:0;font-size:var(--t-lead);line-height:1.5;max-width:36em;text-wrap:pretty}

/* bloques del caso */
.rpsec{max-width:var(--max);margin:0 auto;padding:var(--s5) var(--g) 0}   /* sin líneas de separación entre secciones */
.rpsec.nb{border-top:none}
.rpsec .row{display:flex;gap:48px;flex-wrap:wrap}
.rpsec .num{flex:0 0 130px;font:var(--dw) 84px/1 var(--sf);color:var(--dim);opacity:.5;font-variant-numeric:tabular-nums}
.rpsec .cnt{flex:1 1 420px;max-width:620px}
.rpsec .cnt h2{font:var(--dw) var(--t-h2)/1.2 var(--sf);margin:0 0 14px}
.rpsec .cnt p{margin:0;font-size:var(--t-body);line-height:1.65;text-wrap:pretty}
.rpsec .cnt p b,.rpmeta .intro p b{font-weight:500;color:var(--tx)}
.rpsec .im{width:100%;border-radius:var(--r-media);height:min(54vh,580px);background:var(--ln) center/cover no-repeat;margin:var(--s4) 0 0;overflow:hidden}
.rpsec .im.pn{aspect-ratio:16/9;height:auto}

/* galería */
.rpsec .rpgal2{margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rpsec .rpgal2 .im{margin:0;height:auto;aspect-ratio:5/7}
.gitem{cursor:zoom-in}
.car-n{display:none}
.rpsec .rpgal2.w2{grid-template-columns:repeat(2,1fr)}
.rpsec .rpgal2.w2 .im{aspect-ratio:16/9}
.rpsec .rpgal2.w4{grid-template-columns:repeat(4,1fr);gap:12px}
.rpsec .rpgal2.w4 .im{aspect-ratio:16/9;border-radius:var(--r-s)}

/* serie de vídeos (2 columnas, nombre y tema) */
.rpsec .rpvids{margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) 20px}
.rpsec .rpvids .vd{margin:0;min-width:0}
.rpsec .rpvids .im{margin:0;height:auto;aspect-ratio:16/9}
.rpsec .rpvids figcaption{display:flex;flex-direction:column;gap:2px;padding-top:14px}
.rpsec .rpvids figcaption b{font:var(--dw) var(--t-h2)/1.15 var(--sf);letter-spacing:var(--ls)}
.rpsec .rpvids figcaption span{font-size:var(--t-s);color:var(--mu);line-height:1.45}

/* publicaciones en redes (recreación con la estética de LinkedIn) */
.rpsec .rpposts{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.rpsec .post{display:flex;flex-direction:column}
.rpsec .post .ptx{flex:1 1 auto}
.rpsec .post{background:#fff;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 50px -36px rgba(0,0,0,.4);overflow:hidden;
  font:400 13px/1.42 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:rgba(0,0,0,.9);letter-spacing:0}
.rpsec .post .ph{display:flex;gap:9px;padding:12px 14px 0}
.rpsec .post .av{flex:none;width:44px;height:44px;border-radius:4px;background:#111;display:grid;place-items:center}
.rpsec .post .av img{width:72%;height:auto}
.rpsec .post .who{display:flex;flex-direction:column;min-width:0}
.rpsec .post .who b{font-weight:600;font-size:13.5px;line-height:1.3}
.rpsec .post .who span{font-size:11.5px;line-height:1.35;color:rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpsec .post .ptx{margin:10px 14px 10px;white-space:pre-line}
.rpsec .post .ht{color:#0a66c2;font-weight:600}
.rpsec .post .pim{aspect-ratio:16/9;background:#111}
.rpsec .post .pim img{width:100%;height:100%;object-fit:cover;display:block}
.rpsec .post .pf{display:flex;justify-content:space-around;padding:4px 6px;border-top:1px solid rgba(0,0,0,.08);color:rgba(0,0,0,.6);font-size:12px;font-weight:600}
.rpsec .post .pf span{display:flex;align-items:center;gap:5px;padding:8px 4px}
.rpsec .post .pf svg{width:16px;height:16px;flex:none}
.rpsec .rppn{margin:14px 0 0;font-size:var(--t-xs);font-style:var(--it);color:var(--mu);text-align:center}
body[data-th=dark] .rpsec .post{background:#1b1f23;color:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
body[data-th=dark] .rpsec .post .who span,body[data-th=dark] .rpsec .post .pf{color:rgba(255,255,255,.6)}
body[data-th=dark] .rpsec .post .pf{border-top-color:rgba(255,255,255,.1)}
body[data-th=dark] .rpsec .post .ht{color:#71b7fb}

/* cifras destacadas */
.rpsec .rpstats{margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.rpsec .rpstats .st{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:22px 0 26px;border-top:1px solid var(--ln)}
.rpsec .rpstats dd{margin:0;font:var(--dw) clamp(44px,5vw,78px)/.95 var(--sf);letter-spacing:var(--ls);font-variant-numeric:tabular-nums}
.rpsec .rpstats dd em{font-style:normal;color:var(--ac-tx)}
.rpsec .rpstats dt{font-size:var(--t-s);color:var(--mu);line-height:1.45;max-width:24em}

/* ---------- Movistar: maquetas de la convocatoria ---------- */
.mvx-note{margin:14px 0 0;font-size:var(--t-xs);font-style:var(--it);color:var(--mu);text-align:center}
.mvx-pair{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:center;margin-top:var(--s4)}
/* email en una ventana de correo */
.mvx-mail{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.08);
  font:400 13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1d1d1f;letter-spacing:0}
.mvx-mail .bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;background:linear-gradient(#f6f6f5,#ededeb);border-bottom:1px solid rgba(0,0,0,.08)}
.mvx-mail .bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.mvx-mail .bar i:nth-child(2){background:#febc2e}.mvx-mail .bar i:nth-child(3){background:#28c840}
.mvx-mail .hd{display:flex;gap:12px;align-items:center;padding:16px 22px 14px;border-bottom:1px solid rgba(0,0,0,.07)}
.mvx-mail .hd .av{flex:none;width:38px;height:38px;border-radius:50%;background:#e8eef4;color:#2a6aa0;display:grid;place-items:center;font-weight:600;font-size:15px}
.mvx-mail .hd b{display:block;font-weight:600;font-size:14px}
.mvx-mail .hd span{display:block;color:#6e6e73;font-size:12.5px}
.mvx-mail .bd{background:#eef2f5;padding:26px 22px 30px}
.mvx-mail .em{max-width:520px;margin:0 auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mvx-mail .em img{display:block;width:100%;height:auto}
.mvx-mail .em .tx{padding:20px 22px 22px;position:relative}
.mvx-mail .em h4{margin:0 0 12px;font:500 19px/1.3 var(--tf);color:#2c6e9e;letter-spacing:0}
.mvx-mail .em p{margin:0;font-size:11.5px;color:#7a8b99;line-height:1.5}
.mvx-mail .em .cta{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#2c6e9e}
.mvx-mail .em .cta i{width:18px;height:18px;border-radius:3px;background:#2c6e9e;color:#fff;display:grid;place-items:center;font-style:normal;font-size:11px}
/* SMS / MMS en un móvil */
.mvx-phone{justify-self:center;width:min(100%,300px);aspect-ratio:9/19;border-radius:46px;background:#0d0d0f;padding:11px;box-shadow:0 50px 90px -40px rgba(0,0,0,.55),inset 0 0 0 2px #2b2b2e}
.mvx-phone .sc{position:relative;height:100%;border-radius:36px;background:#fff;overflow:hidden;display:flex;flex-direction:column;
  font:400 13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000;letter-spacing:0}
.mvx-phone .isl{position:absolute;left:50%;top:9px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0d0d0f}
.mvx-phone .st{display:flex;justify-content:space-between;padding:13px 24px 0;font-size:12px;font-weight:600}
.mvx-phone .who{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0 10px;border-bottom:1px solid rgba(0,0,0,.08);background:#f7f7f7}
.mvx-phone .who .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(#a7b0bb,#8a939f);color:#fff;display:grid;place-items:center;font-weight:600;font-size:17px}
.mvx-phone .who b{font-size:11.5px;font-weight:500}
.mvx-phone .th{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 12px;justify-content:flex-start}
.mvx-phone .when{text-align:center;font-size:10.5px;color:#8e8e93;margin-bottom:4px}
.mvx-phone .bb{align-self:flex-start;max-width:80%;background:#e9e9eb;border-radius:17px;padding:8px 12px;font-size:13px}
.mvx-phone .bb.img{padding:0;overflow:hidden;width:78%}
.mvx-phone .bb.img img{display:block;width:100%;height:auto}
.mvx-phone .bb a{color:#0a64d8}
.mvx-phone .inp{margin:0 10px 22px;height:32px;border-radius:16px;border:1px solid #d1d1d6}
/* exterior: mupi grande + dos fotos de calle */
.mvx-out{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:var(--s4)}
.mvx-out figure{margin:0;border-radius:var(--r-media);overflow:hidden;background:var(--ln)}
.mvx-out figure img{display:block;width:100%;height:100%;object-fit:cover}
.mvx-out .col{display:grid;grid-template-rows:1fr 1fr;gap:16px}
/* exterior: las tres piezas a la misma altura, cada una con su proporción (sin recortes) */
.mvx-ext{display:flex;gap:14px;margin-top:var(--s4);align-items:flex-start}
.mvx-ext figure{margin:0;flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--r);border-radius:var(--r-media);overflow:hidden;background:var(--ln);position:relative}
.mvx-ext figure img{display:block;width:100%;height:100%;object-fit:cover}
.mvx-ext figcaption{position:absolute;left:12px;bottom:12px;padding:4px 11px;border-radius:var(--r-pill);background:var(--scrim);color:#fff;font-size:var(--t-2xs);font-style:var(--it);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* navegador con una página real y un banner animado encima */
.mvx-br{max-width:1100px;margin:var(--s4) auto 0;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 50px 100px -50px rgba(0,0,0,.5),0 18px 36px -24px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.1)}
.mvx-br .bar{height:44px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:0 16px;background:linear-gradient(#f6f6f5,#ededeb);border-bottom:1px solid rgba(0,0,0,.1)}
.mvx-br .bar .tl{display:flex;gap:8px}
.mvx-br .bar .tl i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.mvx-br .bar .tl i:nth-child(2){background:#febc2e}.mvx-br .bar .tl i:nth-child(3){background:#28c840}
.mvx-br .bar .url{justify-self:center;width:min(100%,420px);height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(0,0,0,.055);
  font:500 12.5px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#3c3b38;letter-spacing:0}
.mvx-br .bar .sp{width:52px}
.mvx-br .pg{position:relative}
.mvx-br .pg>img{display:block;width:100%;height:auto}
/* el banner (posición medida sobre la captura) */
.mvx-ban{position:absolute;left:21.48%;top:13.99%;width:78.52%;height:79.55%;overflow:hidden;container-type:inline-size;
  background:linear-gradient(180deg,#1e5680 0%,#2e6994 38%,#6b9bbf 100%);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:0}
.mvx-ban .gente{position:absolute;left:0;right:0;bottom:0;height:56%;width:100%;object-fit:cover;object-position:50% 0;animation:mvBanGente 9s var(--ease-out) infinite}
.mvx-ban .tx{position:absolute;left:8%;right:6%;top:7%;margin:0;color:#fff;font-weight:700;font-size:7.4cqw;line-height:1.18;white-space:nowrap}
.mvx-ban .tx span{display:block;animation:mvBanLinea 9s var(--ease-out) infinite}
.mvx-ban .tx span:nth-child(2){animation-name:mvBanLinea2}
.mvx-ban .tx span:nth-child(3){animation-name:mvBanLinea3}
.mvx-ban .tx span:nth-child(4){animation-name:mvBanLinea4}
.mvx-ban .cta{position:absolute;left:8%;bottom:7%;display:flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:999px;background:#fff;color:#1e5680;
  font-weight:700;font-size:5.4cqw;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:mvBanCta 9s var(--ease-out) infinite}
.mvx-ban .logo{position:absolute;right:6%;bottom:8.5%;width:30%;height:auto;animation:mvBanCta 9s var(--ease-out) infinite}
@keyframes mvBanLinea{0%,3%{opacity:0;transform:translateY(40%)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mvBanLinea2{0%,8%{opacity:0;transform:translateY(40%)}15%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mvBanLinea3{0%,13%{opacity:0;transform:translateY(40%)}20%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mvBanLinea4{0%,18%{opacity:0;transform:translateY(40%)}25%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mvBanGente{0%,22%{opacity:0;transform:translateY(12%) scale(1.04)}34%{opacity:1;transform:none}82%{transform:scale(1.03)}88%{opacity:1}96%,100%{opacity:0;transform:scale(1.03)}}
@keyframes mvBanCta{0%,36%{opacity:0;transform:scale(.85)}42%{opacity:1;transform:scale(1.04)}46%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.mvx-cap{margin:14px 0 0;font-size:var(--t-xs);font-style:var(--it);color:var(--mu);text-align:center}
@media(prefers-reduced-motion:reduce){.mvx-ban *{animation:none!important}}
body[data-th=dark] .mvx-br{box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.12)}

/* las cuatro piezas digitales en una fila (banner, email, SMS, web), en miniatura */
.mvx-row{display:flex;align-items:center;justify-content:space-between;gap:2.2%;margin-top:var(--s4)}
.mvx-c{min-width:0}
.mvx-c-ban{flex:0 0 23%}
.mvx-c-mail{flex:0 0 25%}
.mvx-c-sms{flex:0 0 13.5%}
.mvx-c-web{flex:0 0 31%}
.mvx-row .mvx-br,.mvx-row .mvx-web{margin:0;max-width:none}
.mvx-row .mvx-br .bar{height:30px;padding:0 10px;gap:8px}
.mvx-row .mvx-br .bar .tl{gap:5px}.mvx-row .mvx-br .bar .tl i{width:8px;height:8px}
.mvx-row .mvx-br .bar .url{height:20px;font-size:10px}.mvx-row .mvx-br .bar .sp{width:20px}
/* el email y el móvil se maquetan a tamaño real y se reducen como una miniatura */
.mvx-c .mz{zoom:var(--z)}
.mvx-c-mail{--z:.5}.mvx-c-mail .mvx-mail{width:500px}
.mvx-c-sms{--z:.6}.mvx-c-sms .mvx-phone{width:280px}
.mvx-row + .mvx-cap{margin-top:22px}

@media(max-width:1200px){.mvx-c-mail{--z:.42}.mvx-c-sms{--z:.48}}
@media(max-width:900px){
  .mvx-row{flex-wrap:wrap;gap:22px 4%;justify-content:center}
  .mvx-c-ban{flex-basis:48%}.mvx-c-web{flex-basis:100%}
  .mvx-c-mail{flex-basis:56%;--z:.44}.mvx-c-sms{flex-basis:36%;--z:.46}
}
@media(max-width:600px){.mvx-c-mail{--z:.38}.mvx-c-sms{--z:.4}}

/* web en un iMac (imagen original) */
.mvx-web{max-width:900px;margin:var(--s4) auto 0}
.mvx-web img{display:block;width:100%;height:auto}
body[data-th=dark] .mvx-mail{box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.12)}
/* la imagen del iMac tiene fondo blanco: en tema claro se funde con el fondo */
.mvx-web img{mix-blend-mode:multiply}
body[data-th=dark] .mvx-web{background:#f1eee9;border-radius:var(--r-media);padding:24px 24px 8px}
body[data-th=dark] .mvx-web img{mix-blend-mode:normal}
/* foto del evento (original de baja resolución: tamaño contenido) */
.mvx-ev{max-width:640px;margin:var(--s4) auto 0}
.mvx-ev img{display:block;width:100%;height:auto;border-radius:var(--r-media)}
.mvx-ev figcaption{margin-top:10px;font-size:var(--t-xs);font-style:var(--it);color:var(--mu);text-align:center}

/* galería de pósters en 2 × 2, con pie opcional */
.rpsec .rpgal2.p2{grid-template-columns:repeat(2,1fr);gap:20px;max-width:980px;margin-left:auto;margin-right:auto}
.rpsec .rpgal2.p2 .gfig{margin:0;min-width:0}
.rpsec .rpgal2.p2 .im{aspect-ratio:3/4;border-radius:var(--r-s);box-shadow:0 24px 50px -34px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}
.rpsec .rpgal2.p2 figcaption{margin-top:12px;font-size:var(--t-s);line-height:1.45;color:var(--mu);max-width:34em}
.rpsec .rpgal2.p2 figcaption b{color:var(--tx)}
/* visor: flechas y pie */
#lb .lbn{position:absolute;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#0d0d14;color:#fff;border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;padding-bottom:3px;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:2}
#lb .lbn[hidden]{display:none}
#lb .lbp{left:max(12px,3vw)}#lb .lbnx{right:max(12px,3vw)}
#lb .lbwrap{flex-direction:column;align-items:center}
#lb .lbcap{margin:14px 0 0;max-width:min(80vw,640px);color:#fff;font-size:var(--t-s);line-height:1.45;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.5)}
#lb .lbcap[hidden]{display:none}

/* ---------- Alphabet ---------- */
.cs[data-case=alphabet] .rphero .im1{height:auto;aspect-ratio:3385/1235}
/* maquetas (mupi y revista) a la misma altura, solo para ilustrar */
.alx-mock{display:flex;gap:16px;margin-top:var(--s4)}
.alx-mock figure{margin:0;flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--r);border-radius:var(--r-media);overflow:hidden;background:var(--ln)}
.alx-mock img{display:block;width:100%;height:100%;object-fit:cover}
.alx-det{margin:var(--s4) 0 0;border-radius:var(--r-media);overflow:hidden}
.alx-det img{display:block;width:100%;height:auto}

/* cita destacada */
.rpsec .rpq{margin:0 auto;max-width:1000px;text-align:center;padding:var(--s4) 0 var(--s2)}
.rpsec .rpq p{margin:0;font:var(--dw) clamp(34px,4.8vw,76px)/1.06 var(--sf);font-style:var(--it);letter-spacing:var(--ls);text-wrap:balance}
.rpsec .rpq p em{color:var(--ac-tx)}
.rpsec .rpq cite{display:block;margin-top:20px;font-style:normal;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}

/* web de la campaña: ventana de navegador que recorre la página sola */
.rpsec .rpweb{margin-top:var(--s4)}
.rpsec .rpweb .bw{max-width:1120px;margin:0 auto;border-radius:12px;overflow:hidden;background:#f7f8f8;
  box-shadow:0 50px 100px -50px rgba(0,0,0,.5),0 18px 36px -24px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.1)}
.rpsec .rpweb .bwbar{height:52px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:18px;padding:0 16px;
  background:linear-gradient(#f6f6f5,#ededeb);border-bottom:1px solid rgba(0,0,0,.1);color:#8a8984}
.rpsec .rpweb .tl{display:flex;gap:8px}
.rpsec .rpweb .tl i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.rpsec .rpweb .tl i:nth-child(2){background:#febc2e}
.rpsec .rpweb .tl i:nth-child(3){background:#28c840}
.rpsec .rpweb .nv{display:flex;gap:14px}
.rpsec .rpweb .nv svg{width:15px;height:15px;display:block}
.rpsec .rpweb .url{justify-self:center;width:min(100%,460px);height:30px;display:flex;align-items:center;justify-content:center;gap:6px;
  border-radius:8px;background:rgba(0,0,0,.055);color:#3c3b38;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;letter-spacing:0}
.rpsec .rpweb .url svg{width:11px;height:11px;flex:none;color:#7c7b77}
.rpsec .rpweb .url b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpsec .rpweb .bwvp{position:relative;height:min(70vh,700px);overflow:hidden;background:#f7f8f8}
.rpsec .rpweb .bwpg{will-change:transform}
.rpsec .rpweb .bwpg img{display:block;width:100%;height:auto}
.rpsec .rpweb .bwhd{position:absolute;left:0;top:0;width:100%;height:auto;display:block;pointer-events:none}
.rpsec .rpweb .bwvp.man{overflow-y:auto;overscroll-behavior:contain}
.rpsec .rpweb .bwvp.man .bwhd{display:none}
body[data-th=dark] .rpsec .rpweb .bw{box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.12)}
body[data-th=dark] .rpsec .rpweb .bwbar{background:linear-gradient(#2c2c2b,#262625);border-bottom-color:rgba(0,0,0,.6);color:#8d8b86}
body[data-th=dark] .rpsec .rpweb .url{background:rgba(255,255,255,.08);color:#d9d7d2}

/* tira de GIF */
.rpsec .rpgifgrid{margin:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:var(--r-media);overflow:hidden}
.rpsec .rpgifgrid .gf{aspect-ratio:16/9;overflow:hidden;background:var(--ln)}
.rpsec .rpgifgrid .gf img{width:100%;height:100%;object-fit:cover;display:block}
/* 4 GIF: rejilla de 2 × 2 en formato panorámico (también en móvil, sin carrusel) */
.rpsec .rpgifgrid.g4{grid-template-columns:repeat(2,1fr)}
.rpsec .rpgifgrid.g4 .gf{aspect-ratio:560/234}
/* más contenida: alineada con la columna del texto */
@media(min-width:901px){.rpsec .rpgifgrid.g4{max-width:820px;margin-left:178px}}
/* r4: los 4 GIF en una sola fila a todo el ancho (en móvil, 2 × 2) */
@media(min-width:901px){.rpsec .rpgifgrid.g4.r4{max-width:none;margin-left:0;grid-template-columns:repeat(4,1fr)}}
.rpsec .rpgifgrid.r4 .gf{aspect-ratio:16/9}

/* equipo y nota final */
.rpsec .rpteam{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.rpsec .rpteam .tmc{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--ln)}
.rpsec .rpteam .tmc b{font-size:var(--t-s);font-weight:500}
.rpsec .rpteam .tmc span{font-size:var(--t-xs);color:var(--mu)}
.rpsec .rpnote{max-width:760px;margin:0 auto;text-align:center;font-size:var(--t-lead);font-style:italic;color:var(--mu);line-height:1.6;text-wrap:balance}
.rpsec .rpnote .br{font-style:normal;color:var(--tx)}

/* siguiente proyecto (se invierte con el tema) */
.rpcta{max-width:var(--max);margin:70px auto 0;padding:var(--g)}
.rpcta a{display:flex;align-items:center;gap:20px;background:var(--tx);color:var(--bg);border-radius:var(--r-tile);padding:14px var(--g);min-height:96px}
.rpcta .rpctaimg{flex:none;width:64px;height:64px;border-radius:var(--r-s);background:var(--ln) center/cover no-repeat;filter:grayscale(1);transition:filter .35s ease}
.rpcta .rpctatxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.rpcta .rpctatxt .lbl{font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;color:inherit;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpcta h2{font:var(--dw) var(--t-h2)/1.18 var(--sf);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpcta .go{flex:none;display:inline-flex;align-items:center;gap:10px;background:var(--bg);color:var(--tx);padding:10px 18px;border-radius:var(--r-pill);font-size:var(--t-xs);white-space:nowrap;margin-left:auto;transition:background-color .2s ease,color .2s ease}

/* etiquetas */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--ln);border-radius:var(--r-pill);padding:2px 15px;font-size:var(--t-xs);font-style:var(--it);color:var(--mu)}

/* vídeo: portada con botón hasta que se pulsa */
.pn{flex:none;position:relative;overflow:hidden;display:block;background:#111 center/cover no-repeat}
.pn.vpe{cursor:pointer}
.pn i{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid rgba(255,255,255,.75);display:grid;place-items:center;font-style:normal;background:rgba(0,0,0,.32);color:var(--on-img);transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform var(--d-fast) ease-out}
.pn.vpe:active i{transform:scale(.95)}
.pn.on i,.pn.on span{display:none}
.pn span{position:absolute;left:14px;bottom:10px;font-size:var(--t-xs);color:rgba(255,255,255,.85)}

/* ---------- 7. Páginas (Sobre mí, Contacto, legales) ---------- */
.ttl{font:var(--dw) var(--t-display)/.9 var(--sf);letter-spacing:var(--ls);text-align:center;margin:0 auto var(--s4);padding:0 var(--g);max-width:1500px;overflow-wrap:anywhere}
.story{max-width:1100px;margin:0 auto;padding:20px var(--g) 0}
.pg .story p{font:var(--dw) clamp(24px,2.6vw,36px)/1.2 var(--sf);letter-spacing:-.015em;max-width:32ch;text-wrap:pretty}
.pg a.ln{color:var(--ac-tx)}
.ab-tx{display:flex;flex-direction:column;gap:18px;margin:36px 0 0;max-width:60ch;font-size:var(--t-body);line-height:1.6}
.ab-more{color:var(--mu)}
.ab-ct{display:flex;gap:28px;margin-top:var(--s4);font-size:var(--t-lead)}
.pg.legal .story h2{font:var(--dw) var(--t-h2)/1.2 var(--sf);margin:44px 0 10px}
.pg.legal .story h2:first-child{margin-top:0}
.pg.legal .story p{font:400 17px/1.65 var(--tf);letter-spacing:0;max-width:68ch;margin:0}

/* ---------- 8. Visor de imágenes ---------- */
#lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;
  background:rgba(18,16,20,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:opacity .4s var(--ease-out),background-color .4s var(--ease-out),backdrop-filter .4s var(--ease-out),visibility 0s linear .4s}
#lb::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:3px 3px}
#lb.show{visibility:visible;opacity:1;pointer-events:auto;background:rgba(18,16,20,.45);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition-delay:0s}
#lb .lbwrap{position:relative;max-width:80vw;max-height:80vh;display:flex;transform:scale(.96) translateY(10px);opacity:0;transition:transform .4s var(--ease-out),opacity .4s var(--ease-out)}
#lb.show .lbwrap{transform:none;opacity:1}
#lb img{max-width:80vw;max-height:76vh;width:auto;height:auto;object-fit:contain;display:block;border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
#lb .lbx{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;background:#0d0d14;color:#fff;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* ---------- 9. Hover, solo con ratón ---------- */
@media(hover:hover) and (pointer:fine){
  .ct a:hover,.cp a:hover,.cpm a:hover{color:var(--ac-tx)}
  .fl button:hover{color:var(--tx)}
  .tg button:hover{opacity:1}
  .chip:hover{background:var(--ac);border-color:var(--ac);color:#000}
  .rptags .chip:hover{background:var(--ac);color:#000}
  .pn.vpe:hover i{background:#fff;border-color:#fff;color:#0d0d14}   /* play: disco blanco, como un reproductor */
  .gitem{transition:opacity .25s ease}
  .gitem:hover{opacity:.88}
  .rpcta a:hover .rpctaimg{filter:none}
  .rpcta a:hover .go{background:var(--ac);color:#000}
  .pg a.ln:hover{text-decoration:underline;text-underline-offset:3px}
}

/* ---------- 10. Móvil y tableta ---------- */
@media(max-width:900px){
  header{background:var(--bg);mix-blend-mode:normal;color:var(--tx)}
  header .bk{position:absolute;left:50%;top:calc(20px + env(safe-area-inset-top,0px));transform:translateX(-50%);margin-left:0}
  .tg button{border-color:var(--ln);color:var(--tx);padding:3px 9px;font-size:var(--t-2xs);opacity:1}
  .tg button[aria-pressed=true]{background:var(--tx);border-color:var(--tx);color:var(--bg)}

  #home{display:flex;flex-direction:column;padding-top:calc(76px + env(safe-area-inset-top,0px))}
  .L,.R{position:static;width:auto;padding:0 var(--g)}
  .L{order:1}
  .L h1{margin:0 0 10px}
  .R{order:2;align-items:flex-start;text-align:left;margin:var(--s2) 0 18px}
  .R .idx,.R .cp{display:none}
  .fl{justify-content:flex-start;gap:6px 5px;font-size:var(--t-xs)}
  #col{order:3;margin:0;width:auto;padding:0 12px 60px}
  .ct{position:static;order:4;width:auto;gap:8vw;margin:28px var(--g) 0;padding-top:20px;border-top:1px solid var(--ln)}
  .cpm{display:block;order:5;margin:var(--s2) var(--g) var(--s4);font-size:var(--t-xs);color:var(--mu)}
  .t .nb{display:block;position:absolute;left:10px;bottom:10px;z-index:3;max-width:calc(100% - 20px);padding:5px 12px;border-radius:var(--r-pill);background:var(--scrim);color:var(--on-img);font:var(--dw) 17px/1.25 var(--sf);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .rphero .im1{height:42vh}
  .rptags{right:10px;bottom:10px}
  .rptags .chip{padding:2px 9px}
  .rpmeta{gap:var(--s3);padding-top:var(--s4)}
  .rpmeta .det{flex-basis:100%}
  .rpsec{padding-top:48px}
  .rpsec .row{gap:var(--s2)}
  .rpsec .num{font-size:52px;flex-basis:auto}
  .rpsec .im{height:32vh;margin-top:26px}
  .rpsec .im.pn{height:auto}
  .rpsec .rpteam{grid-template-columns:repeat(2,1fr);gap:0 20px}

  /* galerías y GIF: carrusel deslizable */
  .rpsec .rpgal2,.rpsec .rpgifgrid{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:26px calc(-1 * var(--g)) 0;padding:0 var(--g);scroll-padding:0 var(--g);scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:0}
  .rpsec .rpgal2::-webkit-scrollbar,.rpsec .rpgifgrid::-webkit-scrollbar{display:none}
  .rpsec .rpgal2 .im{flex:0 0 78%;scroll-snap-align:start;aspect-ratio:5/7}
  .rpsec .rpgal2.w2 .im{flex:0 0 88%;aspect-ratio:16/9}
  .rpsec .rpvids{grid-template-columns:1fr;gap:var(--s4)}
  .rpsec .rpgal2.p2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:26px 0 0;padding:0;overflow:visible}
  .rpsec .rpgal2.p2 .im{flex:none;aspect-ratio:3/4}
  .rpsec .rpgal2.p2 figcaption{font-size:var(--t-xs);margin-top:8px}
  .rpsec .car .rpgal2.p2 + .car-n{display:none}
  .alx-mock{flex-direction:column;gap:10px}
  .alx-mock figure{flex:none}
  .cs[data-case=alphabet] .rphero .im1{aspect-ratio:2/1}
  #lb .lbn{width:38px;height:38px;margin-top:-19px;font-size:21px}
  .rpsec .rpstats{grid-template-columns:1fr 1fr;gap:0 18px}
  .mvx-pair{grid-template-columns:1fr;gap:36px}
  .mvx-mail .bd{padding:16px 10px 18px}
  .mvx-mail .em .tx{padding:16px 16px 50px}
  .mvx-mail .em h4{font-size:16px}
  .mvx-out{grid-template-columns:1fr}
  .mvx-ext{flex-wrap:wrap;gap:8px}
  .mvx-ext figure:last-child{flex-basis:100%}
  .mvx-br .bar{height:34px;padding:0 10px;gap:10px}
  .mvx-br .bar .tl i{width:9px;height:9px}
  .mvx-br .bar .sp{width:0}
  .mvx-br .bar .url{height:22px;font-size:11px}
  .rpsec .rpposts{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:26px calc(-1 * var(--g)) 0;padding:2px var(--g) 30px;scroll-padding:0 var(--g);scrollbar-width:none}
  .rpsec .rpposts::-webkit-scrollbar{display:none}
  .rpsec .rpposts .post{flex:0 0 84%;scroll-snap-align:start}
  .rpsec .rppn{margin-top:0}
  .rpsec .rpgal2.w4 .im{flex:0 0 62%;aspect-ratio:16/9}
  .rpsec .rpweb .bw{border-radius:10px}
  .rpsec .rpweb .bwbar{height:40px;gap:10px;padding:0 10px;grid-template-columns:auto 1fr}
  .rpsec .rpweb .nv{display:none}
  .rpsec .rpweb .tl{gap:6px}
  .rpsec .rpweb .tl i{width:9px;height:9px}
  .rpsec .rpweb .url{height:26px;font-size:12px;justify-self:stretch}
  .rpsec .rpweb .bwvp{height:56vh}
  .rpsec .rpgifgrid{margin-top:0}
  .rpsec .rpgifgrid .gf{flex:0 0 88%;scroll-snap-align:start;border-radius:var(--r-media)}
  .rpsec .rpgifgrid.g4{display:grid;grid-template-columns:repeat(2,1fr);gap:0;width:100%;margin:26px 0 0;padding:0;overflow:hidden;border-radius:var(--r-s)}
  .rpsec .rpgifgrid.g4 .gf{flex:none;border-radius:0}
  .rpsec .car .rpgifgrid.g4 + .car-n{display:none}
  .car-n{display:block;margin-top:10px;font-size:var(--t-xs);color:var(--mu);font-variant-numeric:tabular-nums}

  .rpcta a{padding:10px 14px;gap:12px;min-height:76px}
  .rpcta .rpctaimg{width:48px;height:48px}
  .rpcta .rpctatxt .lbl{display:none}
  .rpcta h2{font-size:18px}
  .rpcta .go{padding:8px 14px;font-size:var(--t-2xs)}
}
@media(max-width:600px){
  #lb .lbx{top:-12px;right:-12px;width:34px;height:34px;font-size:16px}
  .rpsec .rpteam{grid-template-columns:1fr}
}

/* ---------- 11. Menos movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #home .t,.cs.bld>.eg,.rv{opacity:1!important;transform:none!important}
}

/* ---------- Coca-Cola Trophy Tour: bucles de vídeo (sustituyen a los GIF) y bloques propios ---------- */
.cs[data-case=trophy-tour] .ttv{margin:var(--s4) 0 0;border-radius:var(--r-media);overflow:hidden;background:var(--ln)}
.cs[data-case=trophy-tour] :is(.ttv,.ttconv,.ttduo) video,.cs[data-case=trophy-tour] :is(.ttev,.ttduo) img{display:block;width:100%;height:100%;object-fit:cover}
.cs[data-case=trophy-tour] .rpvids figcaption{display:none}   /* vídeos hero sin rótulo */
/* comprobantes 3 × 2 */
.cs[data-case=trophy-tour] .ttv.tt3{display:grid;grid-template-columns:repeat(3,1fr)}
.cs[data-case=trophy-tour] .ttv.tt3>div{aspect-ratio:16/9}
/* convocatoria: 4 piezas verticales + rodaje, a la misma altura */
.cs[data-case=trophy-tour] .ttconv{margin:var(--s4) 0 0;display:grid;gap:10px;grid-template-columns:repeat(4,9fr) 28.44fr;aspect-ratio:4.1/1}
.cs[data-case=trophy-tour] .ttconv>div{border-radius:var(--r-s);overflow:hidden;background:var(--ln);min-height:0}
/* fotos del evento: dos filas justificadas (cada foto con su proporción en --a) */
.cs[data-case=trophy-tour] .ttev{margin:var(--s4) 0 0;display:flex;flex-direction:column;gap:10px}
.cs[data-case=trophy-tour] .ttev .row{display:flex;gap:10px}
.cs[data-case=trophy-tour] .ttev .row>div{flex:var(--a) 1 0;min-width:0;aspect-ratio:var(--a);border-radius:var(--r-s);overflow:hidden;background:var(--ln)}
/* cierre: «History happened» y latas doradas */
.cs[data-case=trophy-tour] .ttduo{margin:var(--s4) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px}
.cs[data-case=trophy-tour] .ttduo>div{aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:var(--ln)}
@media(max-width:700px){
  .cs[data-case=trophy-tour] .ttv.tt3{grid-template-columns:repeat(2,1fr)}
  .cs[data-case=trophy-tour] .ttconv{aspect-ratio:auto;grid-template-columns:repeat(4,1fr);gap:6px}
  .cs[data-case=trophy-tour] .ttconv .v{aspect-ratio:9/16}
  .cs[data-case=trophy-tour] .ttconv .b{grid-column:1/-1;aspect-ratio:16/9}
  .cs[data-case=trophy-tour] .ttev,.cs[data-case=trophy-tour] .ttev .row{gap:6px}
  .cs[data-case=trophy-tour] .ttev .row{flex-wrap:wrap}
  .cs[data-case=trophy-tour] .ttev .row>div{flex:var(--a) 1 34%}
  .cs[data-case=trophy-tour] .ttduo{gap:8px}
}

/* Vídeo secundario a mitad de ancho (bloque video con half:true) */
.rpsec.vhalf .im{height:auto;aspect-ratio:16/9}
@media(min-width:901px){.rpsec.vhalf .im{width:min(50%,640px);margin-left:178px}}
/* Subaru: bucles pequeños, gráficas más pequeñas y maquetas a la misma altura (ilustrativas, no clicables) */
.cs[data-case=subaru] .rpgal2.p2 .im{aspect-ratio:806/1137}
.sub-mock{display:flex;gap:28px;align-items:flex-end;margin-top:var(--s4)}
.sub-mock figure{margin:0;flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--r)}
.sub-mock figure.m{border-radius:var(--r-media);overflow:hidden;background:var(--ln)}
.sub-mock img,.sub-mock video{display:block;width:100%;height:100%;object-fit:cover}
.sub-mock figure.w img{object-fit:contain}
@media(min-width:901px){
  .cs[data-case=subaru] .rpgifgrid{max-width:720px;margin-left:178px}
  .cs[data-case=subaru] .rpgal2.p2{max-width:620px;margin-left:178px;margin-right:0}
  .sub-mock{max-width:560px;margin-left:178px}
}
@media(max-width:900px){.sub-mock{gap:12px}}

/* ---------- Mondelēz · C.I.A.: recorrido por las siete salas (panel de cámaras de vigilancia; siempre oscuro) ---------- */
.rpsec .ciar{margin:var(--s4) 0 0;padding:clamp(22px,3.2vw,44px);border-radius:var(--r-media);background:#0c0c12;color:#f1eee9}
.rpsec .ciar .hd{display:flex;align-items:center;gap:10px;margin:0 0 clamp(22px,3vw,38px);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:#9a978f}
.rpsec .ciar .hd i{width:9px;height:9px;border-radius:50%;background:#e9561f;animation:ciaRec 1.6s steps(1) infinite}
.rpsec .ciar ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px) 28px}
.rpsec .ciar li{display:flex;flex-direction:column;gap:6px;min-width:0}
.rpsec .ciar .cam{font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:#ee6230;font-variant-numeric:tabular-nums}
.rpsec .ciar b{font:var(--dw) var(--t-h2)/1.1 var(--sf);letter-spacing:var(--ls)}
.rpsec .ciar .d{font-size:var(--t-s);line-height:1.45;color:#b9b6ae;text-wrap:pretty}
@keyframes ciaRec{50%{opacity:.15}}
@media (max-width:900px){.rpsec .ciar ol{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.rpsec .ciar ol{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rpsec .ciar .hd i{animation:none}}
/* Mondelēz · C.I.A.: las cuatro fotos de las salas, 2 × 2 a todo el ancho, pegadas y en 16:9 */
.cs[data-case=mondelez] .rpgifgrid.g4{max-width:none;margin-left:0;margin-top:var(--s4)}
.cs[data-case=mondelez] .rpgifgrid.g4 .gf{aspect-ratio:16/9}

/* ── Heineken (caso doble: Green House Camp + Heineken Sound) ── */
.cs[data-case=heineken] .rphero .im1{height:min(42vh,420px);background-position:center 38%}
.cs[data-case=heineken] .hkch{padding-top:var(--s4)}
.cs[data-case=heineken] .hkch .hkm{margin:0 0 8px;font-size:var(--t-s);color:var(--mu);letter-spacing:.04em}
.cs[data-case=heineken] .hkch h2{margin:0;font:var(--dw) clamp(30px,3.4vw,46px)/1.05 var(--sf);letter-spacing:var(--ls)}
.cs[data-case=heineken] .hkch .hkc{margin:8px 0 0;font:italic var(--dw) clamp(17px,1.5vw,20px)/1.3 var(--sf);color:var(--mu)}
/* videocases: carátula baja; al reproducir, el vídeo recupera su 16:9 */
.cs[data-case=heineken] .rpsec .im.pn.vpe{aspect-ratio:auto;height:min(36vh,340px)}
.cs[data-case=heineken] .rpgal2 .im{aspect-ratio:3/2}
.cs[data-case=heineken] .hkv{margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cs[data-case=heineken] .hkv>div{aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;background:#000}
.cs[data-case=heineken] .hkv video{display:block;width:100%;height:100%;object-fit:cover}
.cs[data-case=heineken] .hkv.one{grid-template-columns:1fr}
.cs[data-case=heineken] .hkv.one>div{aspect-ratio:3.2/1}
.cs[data-case=heineken] .hkv.one video{object-position:center 40%}
@media(max-width:900px){
  .cs[data-case=heineken] .hkv{grid-template-columns:1fr;gap:10px}
  .cs[data-case=heineken] .hkv.one>div{aspect-ratio:2/1}
  .cs[data-case=heineken] .rphero .im1{height:min(34vh,300px)}
  .cs[data-case=heineken] .rpsec .im.pn.vpe{height:min(30vh,240px)}
}

/* ---------- BBVA · Ventas Digitales ---------- */
.cs[data-case=bbva-varios] .rphero .im1{height:min(52vh,520px);background-color:#072146}
.cs[data-case=bbva-varios]{--bvx:0px}
@media(min-width:901px){.cs[data-case=bbva-varios]{--bvx:178px}}
/* teléfono (mockup): --w es su ancho */
.cs[data-case=bbva-varios] .bvph{--w:240px;flex:none;width:var(--w);padding:calc(var(--w)*.035);border-radius:calc(var(--w)*.15);background:#0d0d14;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 18px 40px -18px rgba(13,13,20,.45)}
.cs[data-case=bbva-varios] .bvscr{position:relative;aspect-ratio:9/16;border-radius:calc(var(--w)*.115);overflow:hidden;background:#fff;color:#0d0d14;display:flex;flex-direction:column}
.cs[data-case=bbva-varios] .bvscr video,.cs[data-case=bbva-varios] .bvscr img{display:block;width:100%}
.cs[data-case=bbva-varios] .bvscr>video{height:100%;object-fit:cover}
/* 01 · reproductor de TPV */
.cs[data-case=bbva-varios] .bvplayer{margin:var(--s4) 0 0 var(--bvx);display:flex;align-items:center;gap:clamp(28px,5vw,72px)}
.cs[data-case=bbva-varios] .bvsnd{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:inline-flex;border:0;border-radius:99px;padding:0;background:#0d0d14;color:#fff;font:inherit;font-size:var(--t-xs);white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:transform 160ms var(--ease-out)}
.cs[data-case=bbva-varios] .bvsnd:active{transform:translateX(-50%) scale(.97)}
.cs[data-case=bbva-varios] :is(.bvsnd,.bvaud button) span{display:inline-flex;align-items:center;gap:7px;padding:9px 15px 9px 12px}
.cs[data-case=bbva-varios] :is(.bvsnd,.bvaud button) svg{width:18px;height:18px;flex:none}
.cs[data-case=bbva-varios] :is(.bvsnd,.bvaud button) .s1,.cs[data-case=bbva-varios] :is(.bvsnd,.bvaud button)[aria-pressed=true] .s0{display:none}
.cs[data-case=bbva-varios] :is(.bvsnd,.bvaud button)[aria-pressed=true] .s1{display:inline-flex}
.cs[data-case=bbva-varios] .bvsnd[aria-pressed=false]{animation:bvpulse 2.4s var(--ease-io) infinite}
.cs[data-case=bbva-varios] .bvsnd[aria-pressed=true]{background:rgba(13,13,20,.55);backdrop-filter:blur(6px)}
@keyframes bvpulse{0%,100%{box-shadow:0 6px 18px -6px rgba(0,0,0,.5),0 0 0 0 rgba(233,86,31,.55)}60%{box-shadow:0 6px 18px -6px rgba(0,0,0,.5),0 0 0 10px rgba(233,86,31,0)}}
/* interfaz de Instagram (story patrocinada) sobre el vídeo de TPV; medidas relativas al ancho del teléfono (--w) */
.cs[data-case=bbva-varios] .ig{position:absolute;inset:0;pointer-events:none;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:calc(var(--w)*.046);line-height:1.2}
.cs[data-case=bbva-varios] .ig::before{content:"";position:absolute;left:0;right:0;top:0;height:20%;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 55%,transparent)}
.cs[data-case=bbva-varios] .ig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(0deg,rgba(0,0,0,.38),transparent)}
.cs[data-case=bbva-varios] .igbar{position:absolute;z-index:1;left:3.5%;right:3.5%;top:2.6%;display:flex;gap:calc(var(--w)*.009)}
.cs[data-case=bbva-varios] .igbar i{flex:1;height:calc(var(--w)*.0085);min-height:2px;border-radius:2px;background:rgba(255,255,255,.4);overflow:hidden}
.cs[data-case=bbva-varios] .igbar b{display:block;height:100%;width:0;background:#fff;transition:width .25s linear}
.cs[data-case=bbva-varios] .igbar i.done b{width:100%;transition:none}
.cs[data-case=bbva-varios] .igh{position:absolute;z-index:1;left:3.5%;right:3%;top:5.2%;display:flex;align-items:center;gap:calc(var(--w)*.03)}
.cs[data-case=bbva-varios] .iga{flex:none;width:calc(var(--w)*.13);aspect-ratio:1;border-radius:50%;background:#072146;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.cs[data-case=bbva-varios] .iga i{font:700 calc(var(--w)*.034)/1 Arial,sans-serif;font-style:normal;letter-spacing:.02em}
.cs[data-case=bbva-varios] .ign{flex:1;min-width:0;display:flex;flex-direction:column;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cs[data-case=bbva-varios] .ign b{font-weight:600}
.cs[data-case=bbva-varios] .ign span{font-size:.86em;opacity:.92}
.cs[data-case=bbva-varios] .igm{display:flex;gap:calc(var(--w)*.012);padding:0 calc(var(--w)*.02)}
.cs[data-case=bbva-varios] .igm i{width:calc(var(--w)*.014);aspect-ratio:1;border-radius:50%;background:#fff}
.cs[data-case=bbva-varios] .igx{width:calc(var(--w)*.085);height:calc(var(--w)*.085);flex:none}
.cs[data-case=bbva-varios] .igcta{position:absolute;z-index:1;left:50%;bottom:3.6%;transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--w)*.02);padding:calc(var(--w)*.022) calc(var(--w)*.055) calc(var(--w)*.022) calc(var(--w)*.04);border-radius:99px;background:#fff;color:#0d0d14;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.cs[data-case=bbva-varios] .igcta svg{width:calc(var(--w)*.05);height:calc(var(--w)*.05);flex:none}
.cs[data-case=bbva-varios] .bvplayer .bvsnd{bottom:12%;z-index:2}
/* subtítulos propios (solo con la web en inglés): dentro del teléfono de TPV y sobre las tarjetas de las cuñas */
.cs[data-case=bbva-varios] .bvcc{position:absolute;z-index:2;left:50%;transform:translateX(-50%);margin:0;width:max-content;text-align:center;color:#fff;background:rgba(13,13,20,.78);border-radius:6px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;line-height:1.3;opacity:0;transition:opacity .15s;pointer-events:none}
.cs[data-case=bbva-varios] .bvcc.on{opacity:1}
.cs[data-case=bbva-varios] .bvscr .bvcc{bottom:24%;max-width:86%;padding:calc(var(--w)*.018) calc(var(--w)*.035);font-size:calc(var(--w)*.05)}
.cs[data-case=bbva-varios] .bvaud .bvcc{bottom:78px;max-width:min(82%,520px);padding:6px 11px;font-size:var(--t-s)}
/* el contenido del vídeo baja un poco para que no lo tape la cabecera de la story (el fondo del vídeo es blanco, como la pantalla) */
.cs[data-case=bbva-varios] .bvplayer .bvscr>video{transform:translateY(6%)}
.cs[data-case=bbva-varios] .bvlist{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.cs[data-case=bbva-varios] .bvlist button{display:flex;align-items:center;gap:14px;width:100%;padding:7px 18px 7px 7px;border:0;border-radius:14px;background:none;color:var(--mu);font:inherit;font-size:var(--t-body);text-align:left;cursor:pointer;transition:background 160ms,color 160ms}
.cs[data-case=bbva-varios] .bvlist img{width:38px;height:50px;object-fit:cover;object-position:50% 38%;border-radius:7px;box-shadow:0 0 0 1px var(--ln);flex:none;filter:grayscale(1);opacity:.75;transition:filter 160ms,opacity 160ms}
.cs[data-case=bbva-varios] .bvlist button.on{color:var(--tx);background:color-mix(in srgb,var(--tx) 7%,transparent)}
.cs[data-case=bbva-varios] .bvlist button.on img{filter:none;opacity:1}
@media(hover:hover){.cs[data-case=bbva-varios] .bvlist button:hover{color:var(--tx)}.cs[data-case=bbva-varios] .bvlist button:hover img{filter:none;opacity:1}}
/* 02 · banners */
.cs[data-case=bbva-varios] .bvban{margin:var(--s4) 0 0 var(--bvx);max-width:720px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs[data-case=bbva-varios] .bvban>div{aspect-ratio:1/2;border-radius:var(--r-s);overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--ln)}
.cs[data-case=bbva-varios] .bvban video{display:block;width:100%;height:100%;object-fit:cover}
/* 03 · emails en teléfonos */
.cs[data-case=bbva-varios] .bvmails{margin:var(--s4) 0 0 var(--bvx);display:flex;flex-wrap:wrap;gap:24px}
.cs[data-case=bbva-varios] .bvph.sm{--w:236px}
.cs[data-case=bbva-varios] .bvph.sm .bvscr{aspect-ratio:9/17.5}
.cs[data-case=bbva-varios] .mh{display:flex;gap:7px;align-items:center;padding:calc(var(--w)*.1) 9px 8px;background:#f4f4f6;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.cs[data-case=bbva-varios] .mh i{flex:none;width:24px;height:24px;border-radius:50%;background:#072146;color:#fff;font:700 6.5px/24px Arial,sans-serif;font-style:normal;text-align:center;letter-spacing:.02em}
.cs[data-case=bbva-varios] .mh p{margin:0;min-width:0;font-size:9.5px;line-height:1.25;color:#0d0d14}
.cs[data-case=bbva-varios] .mh b{display:block;font-weight:600}
.cs[data-case=bbva-varios] .mh span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#55555c}
.cs[data-case=bbva-varios] .mb{flex:1;min-height:0;overflow:hidden;position:relative}
/* el email baja solo hasta el final y vuelve arriba (cada teléfono con un pequeño desfase) */
.cs[data-case=bbva-varios] .mbi{position:absolute;left:0;right:0;top:0;animation:bvscroll 16s var(--ease-io) infinite}
.cs[data-case=bbva-varios] .bvph.sm:nth-child(2) .mbi{animation-delay:-3s}
.cs[data-case=bbva-varios] .bvph.sm:nth-child(3) .mbi{animation-delay:-6s}
.cs[data-case=bbva-varios] .bvph.sm:nth-child(4) .mbi{animation-delay:-9s}
@keyframes bvscroll{0%,22%{top:0;transform:translateY(0)}50%,68%{top:100%;transform:translateY(-100%)}90%,100%{top:0;transform:translateY(0)}}
/* 04 · aerotermia: buzones dibujados + caras del envío + email */
.cs[data-case=bbva-varios] .bvaero{margin:var(--s4) 0 0;display:grid;grid-template-columns:1.55fr .8fr auto;gap:24px;align-items:stretch}
.cs[data-case=bbva-varios] .wall{position:relative;border-radius:var(--r-media);overflow:hidden;background:linear-gradient(180deg,#ece7dc,#e2dccf 70%,#d6cfc0);display:flex;align-items:flex-start;justify-content:center;gap:3.2%;padding:11% 6% 0;min-height:0}
.cs[data-case=bbva-varios] .wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(180deg,#b9b1a1,#a79f8f)}
.cs[data-case=bbva-varios] .bx{position:relative;flex:1;aspect-ratio:3/3.9;border-radius:5px;background:linear-gradient(165deg,#4a5059,#343941 55%,#2b2f36);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 22px -12px rgba(40,34,20,.55)}
.cs[data-case=bbva-varios] .bx .sl{position:absolute;left:12%;right:12%;top:11%;height:5.5%;border-radius:3px;background:#0c0d10;box-shadow:0 1px 0 rgba(255,255,255,.16)}
.cs[data-case=bbva-varios] .bx .pl{position:absolute;left:32%;right:32%;top:27%;height:7%;border-radius:2px;background:linear-gradient(180deg,#e9e6de,#cfcbc1);opacity:.9}
.cs[data-case=bbva-varios] .bx::after{content:"";position:absolute;left:50%;bottom:9%;width:7%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 30%,#aab0b8,#5d636c)}
.cs[data-case=bbva-varios] .bx .iv{position:absolute;z-index:1;left:13%;right:13%;top:13.5%;clip-path:inset(0 -40px -60px -40px);filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}
.cs[data-case=bbva-varios] .bx .iv img{display:block;width:100%;margin-top:-47%}
.cs[data-case=bbva-varios] .bx .lip{position:absolute;z-index:2;left:12%;right:12%;top:11%;height:3%;border-radius:3px 3px 0 0;background:#0c0d10}
.cs[data-case=bbva-varios] .faces{border-radius:var(--r-media);background:#fff;box-shadow:0 0 0 1px var(--ln);display:grid;place-items:center;padding:8% 10%;position:relative}
.cs[data-case=bbva-varios] .faces img{grid-area:1/1;width:74%;filter:drop-shadow(0 8px 10px rgba(13,13,20,.22))}
.cs[data-case=bbva-varios] .faces img:first-child{transform:translate(-14%,-9%) rotate(-5deg)}
.cs[data-case=bbva-varios] .faces img:last-child{transform:translate(14%,10%) rotate(4deg)}
/* 05 · cuña */
.cs[data-case=bbva-varios] .bvauds{margin:var(--s4) 0 0 var(--bvx);display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px}
.cs[data-case=bbva-varios] .bvauds figure{margin:0;min-width:0}
.cs[data-case=bbva-varios] .bvauds figcaption{padding-top:14px;font:var(--dw) var(--t-h2)/1.15 var(--sf);letter-spacing:var(--ls)}
.cs[data-case=bbva-varios] .bvaud{position:relative;border-radius:var(--r-media);overflow:hidden;background:#d6eefb}
.cs[data-case=bbva-varios] .bvaud :is(img,video){display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cs[data-case=bbva-varios] .bvaud button{position:absolute;left:16px;bottom:16px;border:0;border-radius:99px;padding:0;background:#0d0d14;color:#fff;font:inherit;font-size:var(--t-xs);cursor:pointer;transition:transform 160ms var(--ease-out)}
.cs[data-case=bbva-varios] .bvaud button:active{transform:scale(.97)}
@media(max-width:900px){
  .cs[data-case=bbva-varios] .bvplayer{flex-direction:column;align-items:center;gap:22px}
  .cs[data-case=bbva-varios] .bvph{--w:220px}
  .cs[data-case=bbva-varios] .bvlist{grid-template-columns:1fr 1fr;width:100%}
  .cs[data-case=bbva-varios] .bvlist button{font-size:var(--t-s);padding-right:8px;gap:10px}
  .cs[data-case=bbva-varios] .bvban{gap:8px}
  .cs[data-case=bbva-varios] .bvmails{gap:12px;justify-content:center}
  .cs[data-case=bbva-varios] .bvph.sm{--w:calc((100vw - 2*var(--g) - 12px)/2)}
  .cs[data-case=bbva-varios] .bvauds{grid-template-columns:1fr;gap:12px}
  .cs[data-case=bbva-varios] .bvaero{grid-template-columns:1fr 1fr;gap:12px}
  .cs[data-case=bbva-varios] .wall{grid-column:1/-1;aspect-ratio:16/11}
  .cs[data-case=bbva-varios] .bvaero .bvph.sm{justify-self:center}
}
@media(prefers-reduced-motion:reduce){.cs[data-case=bbva-varios] :is(.bvsnd,.mbi){animation:none!important}}

/* ── Magnitudo Film (cartelera de cinco estrenos) ── */
.cs[data-case=magnitudo-film] .rphero .im1{height:auto;aspect-ratio:2424/1000}
.cs[data-case=magnitudo-film] .mgp{margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cs[data-case=magnitudo-film] .mgp figure{margin:0;min-width:0}
.cs[data-case=magnitudo-film] .mgp .im{margin:0;height:auto;aspect-ratio:3/4;border-radius:var(--r-s);box-shadow:0 24px 50px -34px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}
.cs[data-case=magnitudo-film] .mgp figcaption{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.cs[data-case=magnitudo-film] .mgp figcaption b{font:var(--dw) clamp(17px,1.5vw,22px)/1.15 var(--sf);letter-spacing:var(--ls)}
.cs[data-case=magnitudo-film] .mgp figcaption span{font-size:var(--t-xs);color:var(--mu)}
.cs[data-case=magnitudo-film] .rpvids{grid-template-columns:repeat(6,1fr)}
.cs[data-case=magnitudo-film] .rpvids .vd{grid-column:span 2}
.cs[data-case=magnitudo-film] .rpvids .vd:nth-child(-n+2){grid-column:span 3}
.cs[data-case=magnitudo-film] .mgfb{margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.cs[data-case=magnitudo-film] .mgfb img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 50px -36px rgba(0,0,0,.4)}
.cs[data-case=magnitudo-film] .mgig{margin:20px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cs[data-case=magnitudo-film] .mgig img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 50px -36px rgba(0,0,0,.4)}
.cs[data-case=magnitudo-film] .rpstats{grid-template-columns:repeat(4,1fr)}
.cs[data-case=magnitudo-film] .rpstats dd{font-size:clamp(38px,4.2vw,64px)}
@media(max-width:900px){
  .cs[data-case=magnitudo-film] .rphero .im1{aspect-ratio:16/10}
  .cs[data-case=magnitudo-film] .mgp{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--g)*-1);padding-right:var(--g);scrollbar-width:none}
  .cs[data-case=magnitudo-film] .mgp figure{scroll-snap-align:start}
  .cs[data-case=magnitudo-film] .rpvids{grid-template-columns:1fr}
  .cs[data-case=magnitudo-film] .rpvids .vd,.cs[data-case=magnitudo-film] .rpvids .vd:nth-child(-n+2){grid-column:auto}
  .cs[data-case=magnitudo-film] .mgfb{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--g)*-1);padding:2px var(--g) 2px 2px;scrollbar-width:none}
  .cs[data-case=magnitudo-film] .mgfb img{scroll-snap-align:start}
  .cs[data-case=magnitudo-film] .mgig{grid-template-columns:repeat(2,1fr);gap:10px}
  .cs[data-case=magnitudo-film] .rpstats{grid-template-columns:1fr 1fr}
}

/* Prodware: seis planos del spot en bucle, cierre del lema y maqueta de la web */
.cs[data-case=prodware] .pwg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:var(--s4)}
.cs[data-case=prodware] .pwg video,.cs[data-case=prodware] .pwend video{display:block;width:100%;aspect-ratio:960/420;object-fit:cover;border-radius:var(--r-media);background:var(--ln)}
.cs[data-case=prodware] .pwend{max-width:860px;margin:var(--s4) auto 0}
.cs[data-case=prodware] .pwend video{aspect-ratio:960/442}
.cs[data-case=prodware] .pwweb{margin-top:var(--s4);border-radius:var(--r-media);overflow:hidden;background:#fff}
.cs[data-case=prodware] .pwweb img{display:block;width:100%;max-width:1040px;margin:0 auto}
@media(max-width:900px){
  .cs[data-case=prodware] .pwg{grid-template-columns:1fr;gap:8px;margin-top:26px}
  .cs[data-case=prodware] .pwend,.cs[data-case=prodware] .pwweb{margin-top:26px}
}


/* ---------- Auditoría 5 oct 2026 ---------- */
/* el título recibe el foco al cambiar de página, sin marco */
h1[tabindex="-1"]:focus{outline:none}
/* pantallas táctiles: zona de pulsación más amplia sin cambiar el tamaño visible */
@media(pointer:coarse){
  header .nm,.tg button,#tt,.fl button,#ctw a,.cpm a{position:relative}
  header .nm::after,header .bk::after,.tg button::after,#tt::after,#ctw a::after,.cpm a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
  .fl button::after{content:"";position:absolute;left:0;right:0;top:50%;height:32px;transform:translateY(-50%)}
}

/* ===== 7 oct 2026 ===== */
/* home sin filtros; las etiquetas de disciplina de cada caso son solo informativas */
.fl{display:none}
.chip{pointer-events:none}
/* visor: la imagen llega al 95 % de la pantalla (el tamaño lo calcula lbFit en js/app.js) */
#lb .lbwrap{max-width:none;max-height:none}
#lb img{max-width:none;max-height:none}
#lb .lbcap{max-width:min(90vw,640px)}
#lb.lbin .lbx{top:8px;right:8px}
/* Sobre mí: sin entradilla y con el bloque de texto centrado en la página (el texto sigue alineado a la izquierda) */
.pg.about .story{display:grid;grid-template-columns:minmax(0,max-content);justify-content:center}
.pg.about .ab-tx{margin:0}
/* Contacto: correo y LinkedIn centrados en la página */
.pg.contact .story p{max-width:none;text-align:center}

/* ===== Ritmo vertical de los casos (7 oct 2026) =====
   El espacio dice qué va con qué. Tres distancias, y solo tres:
   --sp-in   de un texto a lo que lo ilustra (lo de debajo es suyo: va cerca)
   --sp-rel  entre piezas seguidas del mismo bloque (parecido al hueco de una rejilla)
   --sp-sec  antes de empezar un bloque nuevo (el aire grande va aquí, no dentro del bloque)
   Cada bloque lleva su clase desde js/app.js: tx (texto), md (piezas), al (aparte: cifras, cita, equipo, nota).
   Las piezas ya no ponen margen propio por arriba: la distancia la decide solo esta tabla. */
.cs{--sp-in:42px;--sp-rel:20px;--sp-sec:86px}
.rpsec{padding-top:var(--sp-sec)}
.rpsec.tx+.rpsec:not(.tx){padding-top:var(--sp-in)}
.rpsec.md+.rpsec.md{padding-top:var(--sp-rel)}
.rpsec.al+.rpsec.al,.rpmeta+.rpsec{padding-top:var(--s5)}
.cs .rpsec:not(.tx)>:first-child,.cs .rpsec:not(.tx)>.car>:first-child{margin-top:0}
/* Heineken: la cabecera de capítulo abre bloque (con más aire que una sección) y su videocase va pegado a ella */
.cs[data-case=heineken] .rpsec:has(>.hkch){padding-top:var(--sp-sec)}
.cs[data-case=heineken] .rpmeta+.rpsec:has(>.hkch){padding-top:var(--s3)}
.cs[data-case=heineken] .rpsec:has(>.hkch)+.rpsec.md{padding-top:var(--sp-in)}
@media(max-width:900px){.cs{--sp-in:30px;--sp-rel:10px;--sp-sec:58px}.rpmeta+.rpsec{padding-top:48px}}
.rpsec.al+.rpsec.md{padding-top:var(--sp-in)}   /* piezas que acompañan a una nota o a unas cifras */