@font-face{font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/fuentes/fraunces-latin-ext-italic.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;}
@font-face{font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(/fuentes/fraunces-latin-italic.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;}
@font-face{font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fuentes/fraunces-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;}
@font-face{font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fuentes/fraunces-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;}
@font-face{font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fuentes/manrope-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;}
@font-face{font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fuentes/manrope-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;}
:root{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Cada dirección es una página de verdad. La transición entre ellas la anima
   el propio navegador, sin JavaScript y sin duplicar el contenido del sitio
   dentro de cada archivo. */
@view-transition{navigation:auto}

/* ============================================================
   VEREDUM · Legal & Investment
   Marino y oro del logotipo, lenguaje editorial de gran formato:
   serif de alto contraste en mayúsculas, sans pequeña al costado,
   bandas oscuras a sangre y placas abstractas generadas.
   Fraunces (display) · Manrope (texto y rótulos)
   ============================================================ */

:root{
  color-scheme: light;
  /* Base tipográfica de la web. Todo lo que se mide en «rem» cuelga de aquí. */
  font-size:clamp(16.5px, .2vw + 15.8px, 18.4px);
  /* REDISEÑO: la paleta de la web publicada (hueso y marino, con el oro de la
     marca). El cine va en la cabecera y en franjas marino, no en toda la web. */
  --ground:#F2EFEC;
  --surface:#FBFAF8;
  --ink:#16243D;
  --ink-2:#45536C;
  --ink-3:#57637B;
  --line:#DDD7D0;
  --line-strong:#BFB7AC;
  --accent:#16243D;
  --accent-soft:#25375C;
  --on-accent:#F5F2EE;
  --gold:#7A5C33;
  --gold-line:#B69A66;
  --glow:#B69A66;

  --band:#1E2E4C;
  --band-deep:#17253E;
  --band-ink:#F2EFEC;
  --band-ink-2:#B9C3D2;
  --band-gold:#CFAF77;
  --band-line:#33456A;

  /* La cabecera ahora es cine: tinta clara sobre la escena */
  --hero-ink:#F2EFEC;
  --hero-ink-2:#D0D7E2;
  --hero-gold:#CFAF77;
  --hero-line:#5A6B8C;
  --hero-veil:#111C31;
  --plate-a:#F6F3EF;
  --plate-b:#E8E2D8;
  --plate-line:#AF9260;
  --plate-veil:#DED6C8;
  --cian:#59C8F0;

  --f-display:"Fraunces","Hoefler Text",Georgia,"Times New Roman",serif;
  --f-body:"Manrope","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(20px,4.5vw,64px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,.7,.28,1);
  --verde-wa:#1F8E4A;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:clamp(84px,10vh,112px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;
  font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
p{margin:0}
a{color:inherit}

/* ---------- Grano ----------
   Una capa fija de ruido muy tenue sobre toda la página. Rompe la planitud
   de las superficies grandes —las bandas oscuras sobre todo— igual que el
   papel rompe la planitud de la tinta. Va en un SVG dentro del propio CSS,
   así que no añade ninguna descarga, y no intercepta el ratón. Se retira al
   imprimir, donde solo ensuciaría el papel. */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media print{body::after{display:none}}

/* Los titulares reparten sus líneas para que ninguna palabra quede sola al
   final; el texto corrido solo evita la última línea huérfana. */
h1,h2,h3,h4,h5,h6,.claim,figcaption,.lede{text-wrap:balance}
p,li,dd,blockquote{text-wrap:pretty}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Tipografía de gran formato ---------- */
.display{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;
  text-transform:uppercase;letter-spacing:.014em;line-height:1.04;
  margin:0;text-wrap:balance;
}
.display em{font-style:italic;font-weight:400}
.eyebrow-serif{
  font-family:var(--f-body);font-weight:300;text-transform:none;
  letter-spacing:-.01em;display:block;
}

.label{font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-family:var(--f-body)}
.num{font-variant-numeric:tabular-nums}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Movimiento ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:95;background:var(--gold-line);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}
.js .reveal.oculto{opacity:0;transform:translateY(14px);will-change:opacity,transform}
.js .reveal.in{opacity:1;transform:none;transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);will-change:auto}
.js .stagger.oculto > *{opacity:0;transform:translateY(12px);will-change:opacity,transform}
.js .stagger.in > *{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);will-change:auto}
.js .stagger.in > *:nth-child(2){transition-delay:.05s}
.js .stagger.in > *:nth-child(3){transition-delay:.10s}
.js .stagger.in > *:nth-child(4){transition-delay:.15s}
.js .stagger.in > *:nth-child(5){transition-delay:.20s}
.js .stagger.in > *:nth-child(6){transition-delay:.25s}
@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
  .js .oculto,.js .oculto > *{opacity:1 !important;transform:none !important}
  .js .split-head .display,.js .stagger .area-figure,
  .js .statement-inner .display{clip-path:none !important;transition:none !important}
  .js .statement-inner .glyph{transform:none !important}
  .hero-inner > *,.scroll-cue{animation:entraSuave 200ms ease both !important}
  .hero canvas{animation:none !important;transform:scale(1.07) !important;opacity:1 !important}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  #progress{transition:none}
  .hero canvas{animation:none !important;transform:none !important}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--f-body);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 1.5rem;border:1px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
/* «btn-primary» venía del diseño anterior y el rediseño lo dejó sin estilo:
   es el mismo botón marino que «btn-solid». */
.btn-solid,.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:0 10px 24px rgba(22,36,61,.18)}
.btn-solid:hover,.btn-primary:hover{background:var(--accent-soft);border-color:var(--accent-soft);
  box-shadow:0 14px 32px rgba(22,36,61,.26)}
.btn:disabled{opacity:.6;cursor:default}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--accent);background:var(--accent);color:var(--on-accent);
  box-shadow:0 12px 26px rgba(22,36,61,.2)}
.btn-gold{background:var(--band-gold);color:#141F35;border-color:var(--band-gold);
  box-shadow:0 10px 24px rgba(122,92,51,.24)}
.btn-gold:hover{background:#E0C596;border-color:#E0C596;
  box-shadow:0 14px 32px rgba(122,92,51,.32)}
.btn-onband{background:transparent;color:var(--hero-ink);border-color:var(--hero-line)}
.btn-onband:hover{border-color:var(--hero-gold);color:var(--hero-gold)}

/* ---------- Cabecera ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  padding-block:clamp(14px,1.6vw,22px);
  transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background:color-mix(in srgb,var(--ground) 97%,transparent);
  border-bottom-color:var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:1.5rem}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Logotipo oficial ---------- */
.logo{
  display:inline-block;aspect-ratio:773/209;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.ink-dark{background-image:url("/img/imagen-01-3f887e.png")}
.ink-light{background-image:url("/img/imagen-02-3728de.png");display:none}

/* El tema decide la tinta en cabecera y héroe */
/* Superficies siempre marino: tinta hueso pase lo que pase */
.foot .ink-dark,.contact-card .ink-dark,.topbar.menu-open .ink-dark{display:none}
.foot .ink-light,.contact-card .ink-light,.topbar.menu-open .ink-light{display:inline-block}

.topbar .mark .logo{height:clamp(34px,3.5vw,50px)}
.nav a{white-space:nowrap}
@media (max-width:1340px){.nav{gap:1.25rem}.nav a,.nav-desplegar{font-size:.7rem;letter-spacing:.08em}}
@media (max-width:1150px){.topbar .mark .logo{height:34px}.nav{gap:1rem}}
.foot .mark .logo{height:56px}
.contact-card .lock .logo{height:46px}
.hero-lockup .logo{width:min(620px,82vw);height:auto}

.mark{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;flex:0 0 auto}
.mark .frame{
  width:34px;height:34px;flex:0 0 auto;border:1px solid var(--gold-line);
  display:grid;place-items:center;transition:border-color .3s var(--ease)
}
.mark .frame span{font-family:var(--f-display);font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 0;font-weight:500;font-size:21px;line-height:1;color:var(--ink)}
.mark .type{display:flex;flex-direction:column;gap:.28rem}
.mark .type b{
  font-family:var(--f-display);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:1.06rem;line-height:1;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
}
.mark .type small{font-size:.5rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);line-height:1}
.mark .rule{width:1px;align-self:stretch;background:var(--gold-line);opacity:.85;margin-inline:.2rem}
.mark .type small{display:flex;align-items:center;justify-content:center;gap:.42rem;white-space:nowrap}
.mark .type small::before,.mark .type small::after{content:"";height:1px;flex:1 1 10px;min-width:9px;background:currentColor;opacity:.8}
.mark:hover .frame{border-color:var(--gold)}

/* Ranura para el logotipo oficial: al colocar el archivo, se muestra la imagen
   y se oculta el lockup tipográfico sin tocar nada más del maquetado. */
.mark img.logo-file{display:none;height:38px;width:auto}
.mark.has-file img.logo-file{display:block}
.mark.has-file .frame,.mark.has-file .rule,.mark.has-file .type{display:none}
.foot .mark img.logo-file,.contact-card .lock img.logo-file{height:46px}

.topbar.menu-open{background:transparent !important;border-bottom-color:transparent !important}
.topbar.over .mark .frame{border-color:var(--gold-line)}
.topbar.menu-open .mark .frame{border-color:var(--band-gold)}
.topbar.over .mark .frame span,.topbar.over .mark .type b{color:var(--hero-ink)}
.topbar.menu-open .mark .frame span,.topbar.menu-open .mark .type b{color:var(--band-ink)}
.topbar.over .mark .type small{color:var(--hero-gold)}
.topbar.menu-open .mark .type small{color:var(--band-gold)}
.topbar.over .nav a{color:var(--hero-ink-2)}
.topbar.menu-open .nav a{color:var(--band-ink-2)}
.topbar.over .nav a:hover,.topbar.over .nav a[aria-current="true"]{color:var(--hero-ink)}
.topbar.over .menu-toggle{border-color:var(--hero-line);color:var(--hero-ink)}
.topbar.menu-open .menu-toggle{border-color:var(--band-line);color:var(--band-ink)}

.nav{display:flex;align-items:center;gap:1.7rem;margin-left:auto}
.nav a{
  text-decoration:none;color:var(--ink-2);font-size:.74rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:.35rem 0;position:relative;
  transition:color .3s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}

/* Submenú «Firma»: el botón se lee como una pestaña más del menú; el panel,
   como las tarjetas flotantes del blog. */
.nav-grupo{position:relative;display:flex;align-items:center}
.nav-desplegar{
  appearance:none;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem 0;font-family:var(--f-body);color:var(--ink-2);font-size:.74rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:color .3s var(--ease);
}
.nav-desplegar svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.nav-grupo.abierto .nav-desplegar svg{transform:rotate(180deg)}
.nav-desplegar:hover,.nav-grupo.abierto .nav-desplegar,.nav-grupo:has(a[aria-current="true"]) .nav-desplegar{color:var(--ink)}
.topbar.over .nav-desplegar{color:var(--hero-ink-2)}
.topbar.over .nav-desplegar:hover,.topbar.over .nav-grupo.abierto .nav-desplegar,.topbar.over .nav-grupo:has(a[aria-current="true"]) .nav-desplegar{color:var(--hero-ink)}
.nav-desplegar:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.nav-sub{
  position:absolute;top:calc(100% + 14px);left:50%;z-index:5;min-width:230px;
  display:flex;flex-direction:column;padding:8px;
  /* Cristal: deja ver, desenfocado, lo que queda detrás */
  background:rgba(251,250,248,.76);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.55);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(22,36,61,.06),0 12px 28px -10px rgba(22,36,61,.22);
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-grupo.abierto .nav-sub,html:not(.js) .nav-grupo:hover .nav-sub,html:not(.js) .nav-grupo:focus-within .nav-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav .nav-sub a,.topbar.over .nav .nav-sub a,.topbar.menu-open .nav .nav-sub a{
  display:block;padding:.75rem .95rem;border-radius:8px;color:var(--ink-2);font-size:.7rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav .nav-sub a::after{display:none}
/* Sobre el vídeo de la cabecera, cristal oscuro con tinta clara */
.topbar.over .nav-sub{background:rgba(17,28,49,.42);border-color:rgba(242,239,236,.16);
  box-shadow:inset 0 1px 0 rgba(242,239,236,.1),0 2px 6px rgba(0,0,0,.12),0 12px 28px -10px rgba(0,0,0,.38)}
.topbar.over .nav .nav-sub a{color:var(--hero-ink-2)}
.topbar.over .nav .nav-sub a:hover,.topbar.over .nav .nav-sub a:focus-visible,.topbar.over .nav .nav-sub a[aria-current="true"]{background:rgba(242,239,236,.1);color:var(--hero-ink)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-sub{background:var(--surface)}
  .topbar.over .nav-sub{background:rgba(17,28,49,.9)}
}
.nav .nav-sub a:hover,.nav .nav-sub a:focus-visible,.nav .nav-sub a[aria-current="true"]{background:rgba(22,36,61,.06);color:var(--ink);outline:none}

.lang{display:inline-flex;align-items:center;gap:.15rem;flex:0 0 auto;margin-left:.6rem}
/* En la web publicada el idioma no es un botón que reescribe la página, sino
   un enlace a la dirección equivalente en el otro idioma: por eso aquí valen
   tanto el botón del archivo de diseño como el enlace de la web real. */
.lang button,.lang a{
  background:none;border:0;cursor:pointer;min-height:44px;padding:0 .5rem;
  display:inline-flex;align-items:center;text-decoration:none;
  font-family:var(--f-body);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  color:var(--ink-3);transition:color .3s var(--ease);
}
.lang button[aria-pressed="true"],.lang a[aria-current]{color:var(--gold)}
.lang button:hover,.lang a:hover{color:var(--ink)}
.lang .sep{color:var(--line-strong);font-size:.66rem;user-select:none}
.topbar.over .lang button,.topbar.over .lang a{color:var(--hero-ink-2)}
.topbar.over .lang button[aria-pressed="true"],.topbar.over .lang a[aria-current]{color:var(--hero-gold)}
.topbar.over .lang button:hover,.topbar.over .lang a:hover{color:var(--hero-ink)}
.topbar.over .lang .sep{color:var(--hero-line)}
.topbar.menu-open .lang button,.topbar.menu-open .lang a{color:var(--band-ink-2)}
.topbar.menu-open .lang button[aria-pressed="true"],.topbar.menu-open .lang a[aria-current]{color:var(--band-gold)}
.topbar.menu-open .lang .sep{color:var(--band-line)}
@media (max-width:1400px){.lang{margin-left:auto}}

/* Acceso al área privada de clientes: un enlace normal a /clientes/, fuera
   del enrutador de la web. Con marco, como el botón del menú, para que se
   distinga de las secciones sin competir con «Reservar consulta». */
.acceso{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  height:42px;padding:0 .9rem;margin-left:.4rem;
  border:1px solid var(--line-strong);color:var(--ink-2);text-decoration:none;
  font-family:var(--f-body);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.acceso:hover{border-color:var(--gold);color:var(--ink)}
.acceso:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.acceso-icono{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.topbar.over .acceso{border-color:var(--hero-line);color:var(--hero-ink-2)}
.topbar.over .acceso:hover{border-color:var(--hero-gold);color:var(--hero-ink)}
.topbar.menu-open .acceso{border-color:var(--band-line);color:var(--band-ink-2)}
@media (max-width:1400px){.acceso{margin-left:auto}.acceso + .lang{margin-left:.2rem}}
/* Donde no cabe el texto queda el candado, con el nombre en el título y para
   los lectores de pantalla: con el menú de secciones a la vista (hasta 1680 px)
   y en pantallas estrechas. */
@media (max-width:1679px) and (min-width:1401px),(max-width:680px){
  .acceso{width:42px;padding:0;justify-content:center}
  .acceso-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* En el móvil no cabe junto al logotipo, el idioma y el menú: allí el acceso
   está dentro del menú, destacado. */
@media (max-width:520px){.acceso{display:none}.acceso + .lang{margin-left:auto}}
.overlay nav .overlay-acceso{margin-top:1rem;font-size:clamp(1.35rem,3.8vw,2.3rem);white-space:nowrap;color:var(--band-gold);opacity:.9}
.overlay-acceso .acceso-icono{width:.62em;height:.62em;margin-right:.35em;vertical-align:.02em}

.menu-toggle{
  margin-left:1rem;width:42px;height:42px;flex:0 0 auto;
  background:none;border:1px solid var(--line-strong);color:var(--ink);
  cursor:pointer;display:grid;place-items:center;gap:0;padding:0;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.menu-toggle span{display:block;width:16px;height:1px;background:currentColor;transition:transform .35s var(--ease),opacity .25s var(--ease)}
.menu-toggle span:first-child{transform:translateY(-3px)}
.menu-toggle span:last-child{transform:translateY(3px)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.menu-toggle:hover{border-color:var(--gold)}
/* Con el acceso de clientes, el menú de secciones cabe entero a partir de
   1400 px; por debajo se recoge en el botón de menú. */
@media (max-width:1400px){.nav{display:none}}

/* Panel de menú a pantalla completa */
.overlay{
  position:fixed;inset:0;z-index:85;padding:clamp(96px,14vh,150px) var(--gutter);background:var(--band-deep);color:var(--band-ink);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.overlay.open{opacity:1;visibility:visible}
.overlay nav{display:flex;flex-direction:column;gap:clamp(.4rem,1.4vw,1rem);text-align:center}
.overlay nav a{
  font-family:var(--f-display);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(1.9rem,5.5vw,3.6rem);text-transform:uppercase;letter-spacing:.02em;
  line-height:1.1;text-decoration:none;color:var(--band-ink);opacity:.55;
  transition:opacity .3s var(--ease),color .3s var(--ease);
}
.overlay nav a:hover{opacity:1;color:var(--band-gold)}
/* En el menú completo, «Firma» agrupa sus dos secciones debajo, en pequeño */
.overlay-grupo{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.overlay-grupo-titulo{font-family:var(--f-display);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(1.9rem,5.5vw,3.6rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.1;color:var(--band-ink);opacity:.55}
.overlay-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem}
.overlay nav .overlay-sub a{font-family:var(--f-body);font-weight:500;font-size:clamp(.8rem,1.6vw,.98rem);letter-spacing:.18em;opacity:.8;color:var(--band-gold)}
.overlay nav .overlay-sub a:hover{opacity:1;color:var(--band-ink)}
.overlay .close-hint{position:absolute;bottom:clamp(24px,5vw,48px);left:0;right:0;text-align:center;color:var(--band-ink-2)}

/* ---------- Héroe a pantalla completa ---------- */
.hero{
  position:relative;min-height:100svh;background:var(--plate-a);color:var(--hero-ink);
  display:grid;place-items:center;overflow:hidden;text-align:center;
  contain:layout paint;
}
/* La trama se dibuja UNA vez; el movimiento es un transform compuesto en GPU,
   no un repintado por fotograma. */
/* La trama entra asentándose y sólo después empieza la deriva lenta.
   Animación CSS: no depende de JavaScript ni pierde fotogramas mientras carga. */
.hero canvas{
  will-change:transform;
  animation:plateEntra 1500ms var(--ease-out) both,
            drift 48s ease-in-out 1500ms infinite alternate;
}
@keyframes plateEntra{
  from{transform:scale(1.16);opacity:0}
  to{transform:scale(1.07);opacity:1}
}
@keyframes drift{
  from{transform:scale(1.07) translate3d(-1.1%,.5%,0)}
  to{transform:scale(1.07) translate3d(1.1%,-.5%,0)}
}

/* Secuencia de la portada. `both` deja el estado final fijado: si la animación
   no llegara a ejecutarse, el contenido queda visible igualmente. */
.hero-inner > *{animation:entraPortada 720ms var(--ease-out) both}
.hero-inner > *:nth-child(1){animation-delay:180ms}
.hero-inner > *:nth-child(2){animation-delay:290ms}
.hero-inner > *:nth-child(3){animation-delay:400ms}
@keyframes entraPortada{
  from{opacity:0;transform:translateY(20px) scale(.94)}
  to{opacity:1;transform:none}
}
.scroll-cue{animation:entraSuave 600ms var(--ease-out) 900ms both}
@keyframes entraSuave{from{opacity:0}to{opacity:1}}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 34%,color-mix(in srgb,var(--hero-veil) 62%,transparent) 100%);
}
.hero-inner{position:relative;z-index:3;padding:clamp(96px,12vh,140px) var(--gutter) clamp(80px,10vh,120px)}
.hero .frame-xl{
  width:clamp(78px,8vw,104px);aspect-ratio:1;margin:0 auto clamp(28px,3.4vw,40px);
  border:1px solid var(--gold-line);display:grid;place-items:center;
}
.hero .frame-xl span{
  font-family:var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;font-weight:400;
  font-size:clamp(52px,5.4vw,70px);line-height:1;color:var(--hero-ink);
}
.hero h1{margin:0 0 clamp(6px,1vw,12px);line-height:0}
.hero .tag{
  color:var(--hero-gold);font-size:clamp(.62rem,1.1vw,.78rem);font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
}
.hero .tag::before,.hero .tag::after{content:"";height:1px;width:clamp(24px,5vw,64px);background:currentColor;opacity:.8}
.hero .claim{
  margin:clamp(30px,4vw,46px) auto 0;max-width:44ch;color:var(--hero-ink-2);
  font-size:clamp(.95rem,1.1vw,1.08rem);line-height:1.75;
}
.hero .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:clamp(30px,3.6vw,42px)}
.scroll-cue{
  position:absolute;left:0;right:0;bottom:clamp(24px,4vh,40px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  color:var(--hero-ink-2);text-decoration:none;
}
.scroll-cue span{font-size:.6rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}
.scroll-cue i{display:block;width:1px;height:30px;background:linear-gradient(var(--gold-line),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- Declaración con placas laterales ---------- */
.statement{position:relative;padding-block:clamp(80px,10vw,150px);overflow:hidden}
/* Los laterales no son un recuadro: son dos texturas que entran desde el
   borde y se disuelven en el papel antes de llegar al texto. */
.statement .side{
  position:absolute;top:0;bottom:0;margin:0;
  width:clamp(140px,19vw,320px);overflow:hidden;pointer-events:none;z-index:1;
}
.statement .side img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);opacity:.5}
.statement .side::before,.statement .side::after{content:"";position:absolute;inset:0;z-index:2}
.statement .side::before{background:linear-gradient(to bottom,var(--ground) 0%,transparent 32%,transparent 68%,var(--ground) 100%)}
.statement .side.left::after{background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--ground) 60%,transparent) 52%,var(--ground) 100%)}
.statement .side.right::after{background:linear-gradient(to left,transparent 0%,color-mix(in srgb,var(--ground) 60%,transparent) 52%,var(--ground) 100%)}
.statement .side.left{left:0}
.statement .side.right{right:0}
.statement-inner{
  position:relative;z-index:2;text-align:center;
  max-width:min(720px,62vw);margin-inline:auto;padding-inline:var(--gutter);
}
.statement .glyph{width:64px;height:auto;margin:0 auto clamp(24px,3vw,34px);display:block;color:var(--gold)}
.statement .display{
  font-size:clamp(1.9rem,5.4vw,67px);color:var(--ink);
}
/* Persiana sobre el titular grande: el gesto propio de la casa */
.js .statement-inner.oculto .display{clip-path:inset(-22% -12% 100% -12%)}
.js .statement-inner.in .display{
  clip-path:inset(-22% -12% -16% -12%);
  transition:clip-path 900ms var(--ease-out) 140ms;
}
.js .statement-inner.oculto .glyph{transform:scale(.86)}
.js .statement-inner.in .glyph{transform:none;transition:transform 700ms var(--ease-out)}
.statement .display .eyebrow-serif{
  font-size:clamp(1.05rem,2.1vw,1.7rem);color:var(--ink-2);
  margin-bottom:.22em;letter-spacing:0;
}
.statement .display .gold{color:var(--gold)}
.statement p.sub{margin:clamp(22px,2.6vw,30px) auto 0;max-width:46ch;color:var(--ink-2);font-size:.95rem}
@media (max-width:1000px){
  .statement .side{display:none}
  .statement-inner{max-width:none}
}

/* ---------- Secciones asimétricas ---------- */
.split{padding-block:clamp(74px,9vw,132px)}
.split-head{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,72px);align-items:end;
  margin-bottom:clamp(40px,5vw,72px);
}
@media (max-width:1180px){
  .split-head{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .split-head .display{font-size:clamp(2.05rem,5.6vw,70px)}
}
/* El titular se mide contra el ancho de SU columna, no contra el de la
   ventana: a tamaños intermedios una palabra larga como «Honorarios» se
   salía de la caja y la máscara de entrada la cortaba. */
.split-head .display{font-size:clamp(2.05rem,6.1vw,94px);color:var(--ink);hyphens:none}
.split-head .bleed{margin-left:calc(var(--gutter) * -.5)}
.split-head .aside{padding-bottom:.6rem}
.split-head .aside .label{
  color:var(--gold);display:inline-flex;align-items:center;gap:.55rem;
  margin-bottom:1.1rem;padding:.42rem 1rem .42rem .78rem;
  background:rgba(182,154,102,.13);
  border:1px solid rgba(182,154,102,.36);
  border-radius:999px;
}
.split-head .aside .label::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--gold-line);box-shadow:0 0 10px rgba(182,154,102,.85);
}
.split-head .aside p{color:var(--ink-2);max-width:46ch}
.split-head .aside .btn{margin-top:1.6rem}
@media (max-width:900px){
  .split-head{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .split-head .bleed{margin-left:0}
}

/* ---------- Áreas ---------- */
.family + .family{margin-top:clamp(40px,4.6vw,64px)}
.family-head{display:flex;align-items:baseline;gap:1rem;padding-bottom:.95rem;border-bottom:1px solid var(--ink)}
.family-head h3{font-family:var(--f-display);font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:600;font-size:clamp(1.3rem,2vw,1.7rem);text-transform:uppercase;letter-spacing:.06em;margin:0}
.family-head .count{color:var(--gold);margin-left:auto;white-space:nowrap}
.areas{display:grid;grid-template-columns:repeat(3,1fr)}
.area{
  --pad-y:clamp(28px,2.8vw,40px);--pad-x:clamp(20px,2.2vw,34px);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:var(--pad-y) var(--pad-x);
  display:flex;flex-direction:column;gap:.9rem;position:relative;
  transition:background .4s var(--ease);
}
.area:nth-child(3n){border-right:0}
.area::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.area:hover{background:var(--surface)}
.area:hover::before{transform:scaleX(1)}
.area h3{font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.42rem;margin:0;letter-spacing:.005em}
.area p{color:var(--ink-2);font-size:.92rem}

/* Servicios con página propia: píldoras de contorno fino, pequeñas, que
   acompañan a las áreas sin competir con ellas. */
.servicios{margin-top:clamp(36px,4.4vw,60px)}
.servicios > .label{display:block;color:var(--ink-3);margin-bottom:clamp(.8rem,1.2vw,1.1rem)}
.servicios-lista{display:flex;flex-wrap:wrap;gap:.55rem .5rem}
.servicios-lista a{
  display:inline-flex;align-items:center;
  padding:.5rem 1.05rem;border:1px solid var(--line-strong);border-radius:999px;
  color:var(--ink-2);text-decoration:none;background:transparent;
  font-family:var(--f-body);font-size:.8rem;font-weight:400;line-height:1.3;letter-spacing:.01em;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.servicios-lista a:hover{border-color:var(--gold);color:var(--ink);background:var(--surface)}
.servicios-lista a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Áreas en pestañas. Sin JavaScript no hay pestañas: se ven las dos
   familias seguidas, con su título, como siempre. */
.familias-pestanas{display:none}
/* Dos tarjetas de elección, bajas: la elegida en marino, con una muesca
   hacia su contenido; la otra, clara y con borde, invita a pulsarla. */
.js .familias-pestanas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.3vw,16px);margin-bottom:clamp(18px,2.2vw,26px)}
.familias-pestanas button{
  appearance:none;font:inherit;text-align:left;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.6rem,.9vw,.8rem) clamp(1rem,1.7vw,1.4rem);
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:3px;
  box-shadow:0 1px 2px rgba(22,36,61,.04);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .15s;
}
.fp-texto{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;min-width:0;width:100%}
.fp-titulo{font-family:var(--f-display);font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(.9rem,1.15vw,1.04rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.fp-areas{font-size:.68rem;line-height:1.3;letter-spacing:.03em;color:var(--ink-3);transition:color .35s var(--ease)}
.familias-pestanas button[aria-selected="false"]:hover{border-color:var(--gold-line);box-shadow:0 6px 22px rgba(22,36,61,.08)}
.familias-pestanas button:active{transform:translateY(1px)}
.familias-pestanas button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-accent);cursor:default;box-shadow:0 10px 28px rgba(22,36,61,.16)}
.familias-pestanas button[aria-selected="true"] .fp-areas{color:var(--band-gold)}
/* Pequeña muesca que une la tarjeta elegida con su contenido */
.familias-pestanas button[aria-selected="true"]::after{content:"";position:absolute;left:clamp(1.4rem,2.6vw,2rem);bottom:-6px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.familias-pestanas button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.js .familias .family-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js .familias .family + .family{margin-top:0}
.familias [hidden]{display:none}
@media (max-width:560px){
  .familias-pestanas button{padding:.7rem .85rem}
  .fp-titulo{font-size:.84rem;letter-spacing:.05em}
  .fp-areas{display:none}
}
.familias .family:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.area .tags{margin-top:auto;padding-top:.85rem;color:var(--ink-3);font-size:.71rem;letter-spacing:.04em;line-height:1.85}

/* Imagen de área: sangra a los bordes de la celda, como los paneles de la referencia */
.area-figure{
  margin:calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) .45rem;
  aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--band);
}
.area-figure .inner{position:absolute;inset:-7% 0;display:block}
.area-figure canvas,.area-figure img{display:block;width:100%;height:100%;object-fit:cover}
/* Por defecto la foto va virada al marino de la marca; al acercarse recupera
   color y se acerca. El contraste entre los dos estados es el golpe de efecto. */
.area-figure img{
  filter:grayscale(.92) contrast(1.06) brightness(.82);
  transform:scale(1.02);
  transition:filter 1.1s var(--ease),transform 1.5s var(--ease);
}
.area-figure::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--band);mix-blend-mode:multiply;opacity:.55;
  transition:opacity 1.1s var(--ease);
}
.area:hover .area-figure img,.area:focus-within .area-figure img{
  filter:grayscale(.15) contrast(1.02) brightness(1);
  transform:scale(1.09);
}
.area:hover .area-figure::after,.area:focus-within .area-figure::after{opacity:.12}
.area:hover .area-figure canvas{transform:scale(1.05)}
@media (prefers-reduced-motion: reduce){
  .area-figure img{transition:filter .3s ease;transform:none}
  .area:hover .area-figure img{transform:none}
}
.js .stagger.oculto .area-figure{clip-path:inset(0 0 100% 0)}
.js .stagger.in .area-figure{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--ease)}
.js .stagger.in > *:nth-child(2) .area-figure{transition-delay:.07s}
.js .stagger.in > *:nth-child(3) .area-figure{transition-delay:.14s}

/* Paralaje ligado al scroll: sin JavaScript y sin coste por fotograma */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .area-figure .inner{
      animation:areaParallax linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes areaParallax{
      from{transform:translate3d(0,-4.5%,0)}
      to{transform:translate3d(0,4.5%,0)}
    }
  }
}

/* Los titulares grandes se descubren de abajo arriba */
/* El recorte deja aire por arriba: con line-height ajustado los acentos de las
   mayúsculas (Á, Ó) sobresalen de la caja y quedaban cercenados. */
.js .split-head.oculto .display{clip-path:inset(-22% -12% 100% -12%)}
.js .split-head.in .display{clip-path:inset(-22% -12% -16% -12%);transition:clip-path .9s var(--ease)}
@media (max-width:1000px){.areas{grid-template-columns:repeat(2,1fr)}.area:nth-child(3n){border-right:1px solid var(--line)}.area:nth-child(2n){border-right:0}}
@media (max-width:680px){.areas{grid-template-columns:1fr}.area{border-right:0 !important}}

/* ---------- Banda oscura: cifras ---------- */
.band{position:relative;background:var(--band);color:var(--band-ink);overflow:hidden}
.band canvas{position:absolute;inset:0;width:100%;height:100%}
.band .wrap,.band .wrap-narrow{position:relative;z-index:3}
.band-figures{padding-block:clamp(76px,9vw,132px)}
.band-figures .top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,5vw,72px);
}
.band-figures .display{font-size:clamp(2.5rem,7vw,5.8rem);color:var(--band-ink)}
.band-figures .top p{color:var(--band-ink-2);max-width:46ch;padding-bottom:.5rem}
/* Cajones semitranslúcidos sobre la banda oscura: el vidrio deja ver la
   trama del fondo y la sombra los separa de ella. Es el recurso de la
   presentación, con los colores de la web. */
.band-figures ul{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);
}
.band-figures li{
  padding:clamp(24px,2.6vw,34px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(6,12,24,.35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.band-figures li:hover{background:rgba(255,255,255,.09);border-color:rgba(207,175,119,.38)}
.band-figures b{
  display:block;font-family:var(--f-display);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(2.4rem,4.4vw,4rem);line-height:1;font-variant-numeric:tabular-nums;
  margin-bottom:.8rem;color:var(--band-ink);
}
.band-figures small{display:block;color:var(--band-ink-2);font-size:.78rem;line-height:1.55;max-width:24ch}
@media (max-width:900px){
  .band-figures .top{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .band-figures ul{grid-template-columns:repeat(2,1fr)}
  .band-figures li:nth-child(odd){border-left:0;padding-left:0}
  .band-figures li:nth-child(n+3){margin-top:1.4rem;border-top:1px solid var(--band-line)}
}

/* ---------- Método ---------- */
.method{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);counter-reset:fase}
.step{padding:clamp(26px,2.6vw,36px) clamp(20px,2.4vw,40px) 0 0;position:relative;counter-increment:fase;overflow:hidden}
/* El número de la fase, calado y recortado por el borde de la celda: da
   profundidad sin añadir ni una palabra. Es decorativo puro, así que el
   rótulo «Fase 01» sigue siendo quien lo dice de verdad. */
.step::after{
  content:counter(fase,decimal-leading-zero);
  position:absolute;right:-.1em;top:-.08em;pointer-events:none;
  font-family:var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:clamp(82px,7.6vw,126px);line-height:.78;
  color:transparent;-webkit-text-stroke:1px var(--gold-line);
  opacity:.3;
}
@supports not (-webkit-text-stroke:1px red){.step::after{display:none}}
.step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--gold-line);transform:scaleX(0);transform-origin:left}
.step.drawn::before{transform:scaleX(1);transition:transform 1.1s var(--ease)}
.step:nth-child(2).drawn::before{transition-delay:.14s}
.step:nth-child(3).drawn::before{transition-delay:.28s}
.step:nth-child(4).drawn::before{transition-delay:.42s}
/* El número de fase deja de ser una línea de texto y pasa a ser una pastilla
   con relieve, como los cajones numerados de la presentación. */
.step .idx{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:78px;min-height:38px;padding:0 .9rem;margin-bottom:1.3rem;
  border-radius:14px;
  background:linear-gradient(135deg,#22355C 0%,#16243D 100%);
  color:var(--on-accent);
  box-shadow:0 8px 20px rgba(22,36,61,.18);
  font-variant-numeric:tabular-nums;
}
.step h3{font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.44rem;margin:0 0 .7rem;letter-spacing:.005em}
.step p{color:var(--ink-2);font-size:.9rem}
.step .when{display:block;margin-top:1.1rem;color:var(--ink-3);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
@media (max-width:960px){.method{grid-template-columns:repeat(2,1fr)}.step{padding-bottom:1.6rem}}
@media (max-width:560px){.method{grid-template-columns:1fr}}

/* ---------- Manifiesto ---------- */
.manifesto{padding-block:clamp(84px,10vw,150px)}
.manifesto .inner{max-width:min(860px,74%)}
.manifesto .label{color:var(--band-gold);display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(24px,3vw,34px)}
.manifesto .label::before{content:"";height:1px;width:30px;background:currentColor}
.manifesto blockquote{
  margin:0;font-family:var(--f-display);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.14;letter-spacing:-.005em;color:var(--band-ink);
}
.manifesto blockquote em{font-style:italic;color:var(--band-gold)}
.manifesto .attrib{margin-top:clamp(26px,3.2vw,38px);color:var(--band-ink-2);font-size:.94rem;max-width:56ch;line-height:1.8}
.manifesto .btn{margin-top:clamp(28px,3.2vw,40px)}
@media (max-width:900px){.manifesto .inner{max-width:none}}

/* ---------- Equipo ----------
   Dos columnas. El desnivel entre ambas no es decorativo:
   marca el orden de lectura (primero el retrato alto, luego el bajo) y se
   refuerza con una deriva opuesta al hacer scroll, de modo que el
   escalonado se lee como ritmo y no como un error de alineación. */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.8vw,44px) clamp(20px,2.4vw,40px);align-items:start}
.person{display:flex;flex-direction:column;gap:1rem;min-width:0}
.plate{display:block;aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--band);contain:layout paint}
.plate canvas{position:absolute;inset:0;width:100%;height:100%}
.plate .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--band-deep) 78%,transparent) 100%)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* El retrato no se recorta contra un rectángulo: el fondo de la toma se
   funde con el de la web (multiply sobre el mismo color) y la parte baja se
   desvanece, de modo que la figura sale del papel en lugar de un recuadro. */
.plate.retrato{background:var(--ground)}
.plate.retrato img{mix-blend-mode:multiply}
.plate.retrato .veil{background:linear-gradient(180deg,transparent 72%,color-mix(in srgb,var(--ground) 62%,transparent) 88%,var(--ground) 100%);z-index:2}
.plate.retrato .cap{color:var(--gold)}
.plate .frame{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:62px;height:62px;border:1px solid var(--band-gold);display:grid;place-items:center}
.plate .frame span{font-family:var(--f-display);font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 0;font-weight:400;font-size:27px;line-height:1;color:var(--band-ink);letter-spacing:.03em;padding-left:.03em}
.plate .cap{position:absolute;left:0;right:0;bottom:clamp(10px,1.4vw,16px);text-align:center;color:var(--band-gold);font-size:.56rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;z-index:3}

/* Retratos: mismo tratamiento para los dos (mismo encuadre, misma
   desaturación, misma temperatura) y color al pasar el cursor. */
.person-foto{display:block;position:relative;text-decoration:none;color:inherit}
.person .plate img{
  filter:grayscale(1) contrast(1.03);
  transform:scale(1.015);
  transition:filter .9s var(--ease),transform 1.4s var(--ease);
}
.person:hover .plate img,.person-foto:focus-visible .plate img{
  filter:none;transform:scale(1.05);
}
.person-foto:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.person-foto .ver{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:block;text-align:center;padding:1.05rem .6rem;
  font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--band-ink);background:color-mix(in srgb,var(--band-deep) 86%,transparent);
  opacity:0;transform:translate3d(0,100%,0);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.person-foto:hover .ver,.person-foto:focus-visible .ver{opacity:1;transform:translate3d(0,0,0)}
.person h3{font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.5rem;margin:0;letter-spacing:.005em}
.person h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s var(--ease)}
.person h3 a:hover{background-size:100% 1px}
.person .role{display:block;margin-top:.45rem;color:var(--gold)}
.person p{color:var(--ink-2);font-size:.9rem}
.person .enlace{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);
  border-top:1px solid var(--line);padding-top:.9rem;margin-top:.1rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.person .enlace:hover{color:var(--gold)}
.person .enlace svg{width:13px;height:13px;flex:0 0 auto;fill:currentColor}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Misma deriva para todos los retratos: el movimiento da vida al bloque
       sin romper la alineación de la rejilla. */
    .person .plate img{animation:deriva linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes deriva{from{transform:scale(1.09) translate3d(0,-3%,0)}to{transform:scale(1.09) translate3d(0,3%,0)}}
  }
}

/* Colaboradores: misma placa y mismo formato que los demás. Sin retrato,
   la placa lleva el monograma sobre el marino de la casa. */
/* Sin retrato, la placa es la misma superficie clara con el monograma:
   así la fila entera respira igual y no aparece un bloque macizo. */
.plate.monograma{background:linear-gradient(180deg,var(--plate-b) 0%,var(--plate-a) 52%,var(--ground) 100%)}
.plate.monograma .frame{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:78px;height:78px;border:1px solid var(--gold-line);display:grid;place-items:center}
.plate.monograma .frame span{font-family:var(--f-display);font-variation-settings:"opsz" 80,"SOFT" 0,"WONK" 0;font-weight:400;font-size:1.5rem;line-height:1;color:var(--gold);letter-spacing:.06em}
.plate.monograma .cap{color:var(--gold)}
.person .plaza{color:var(--ink-3);font-size:.74rem;border-top:1px solid var(--line);padding-top:.9rem;margin-top:.1rem}

@media (max-width:1040px){.team{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}}
@media (max-width:760px){.team{grid-template-columns:1fr;max-width:420px}}

/* ---------- Resultados ---------- */
.cases{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.case{
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,200px);
  gap:clamp(14px,4vw,56px);align-items:baseline;
  padding-block:clamp(28px,3vw,40px);border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.case:hover{background:var(--surface)}
.case .ref{color:var(--gold)}
.case h3{font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:500;font-size:clamp(1.28rem,2vw,1.62rem);margin:0 0 .6rem;letter-spacing:.005em}
.case p{color:var(--ink-2);font-size:.92rem;max-width:64ch}
.case .metric{text-align:right;font-variant-numeric:tabular-nums}
.case .metric b{font-family:var(--f-display);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.55rem;display:block;line-height:1.15}
.case .metric span{display:block;color:var(--ink-3);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.45rem;font-weight:600}
@media (max-width:900px){.case{grid-template-columns:1fr;gap:.8rem}.case .metric{text-align:left}}
.disclaimer{margin-top:2rem;color:var(--ink-3);font-size:.79rem;max-width:74ch;padding-left:1.2rem;border-left:1px solid var(--gold-line)}

/* ---------- Honorarios ---------- */
.fees{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);gap:clamp(30px,5vw,86px);align-items:start}
.fees-claim{
  font-family:var(--f-display);font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.24;letter-spacing:-.008em;
  border-left:1px solid var(--gold-line);padding-left:clamp(20px,2.6vw,34px);
}
.fees-claim small{display:block;font-family:var(--f-body);font-size:.92rem;font-weight:300;line-height:1.75;color:var(--ink-2);margin-top:1.5rem;letter-spacing:0}
.fee-list{list-style:none;margin:0;padding:0}
.fee-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:baseline;padding-block:1.35rem;border-top:1px solid var(--line)}
.fee-list li:last-child{border-bottom:1px solid var(--line)}
.fee-list strong{font-family:var(--f-display);font-variation-settings:"opsz" 14,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.14rem;display:block;margin-bottom:.35rem;letter-spacing:.005em}
.fee-list p{color:var(--ink-2);font-size:.88rem}
.fee-list .price{color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
@media (max-width:880px){.fees{grid-template-columns:1fr}}

/* ---------- Contacto ---------- */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(34px,5vw,88px);align-items:start}
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.field label{color:var(--ink-3);font-size:.63rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:.95rem;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;
  padding:.62rem 0;width:100%;transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold);outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}
/* Código de descuento: el campo y su aviso. El botón comprueba contra el
   servidor antes de que el visitante rellene nada más, para que sepa si va a
   pagar o no antes de escribir el asunto. */
/* Anillo de duración: media vuelta para treinta minutos, vuelta entera para
   sesenta. Es el mismo recurso del dosier, y aquí además informa: se mueve al
   cambiar de duración. */
@property --vuelta{syntax:"<number>";inherits:false;initial-value:50}
.cita-duracion-anillo{display:flex;align-items:center;gap:clamp(14px,2vw,24px)}
.cita-reloj{
  --vuelta:50;
  position:relative;flex:0 0 auto;width:clamp(92px,10vw,118px);aspect-ratio:1;
  border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--vuelta) * 1%), var(--line) 0);
  transition:--vuelta .7s var(--ease);
}
.cita-reloj::after{
  content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ground);
}
.cita-reloj-cifra{
  position:relative;z-index:1;
  font-family:var(--f-display);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:clamp(1.45rem,2.3vw,1.9rem);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:center;
}
.cita-reloj-cifra small{display:block;font-family:var(--f-body);font-size:.55rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}
@media (prefers-reduced-motion:reduce){.cita-reloj{transition:none}}
.campo-codigo .codigo-fila{display:flex;gap:.6rem;align-items:stretch}
.campo-codigo .codigo-fila input{flex:1 1 auto;min-width:0;text-transform:uppercase;letter-spacing:.08em}
.campo-codigo .codigo-fila input::placeholder{text-transform:none;letter-spacing:0}
.campo-codigo .codigo-fila .btn{flex:0 0 auto;margin:0;padding-block:.55rem}
.codigo-aviso{margin:.5rem 0 0;font-size:.82rem;color:var(--ink-3);min-height:1.2em;letter-spacing:0;text-transform:none}
.codigo-aviso.bien{color:var(--gold)}
.codigo-aviso.mal{color:#8A3324}
@media (max-width:480px){.campo-codigo .codigo-fila{flex-direction:column}}
.consent{display:flex;gap:.8rem;align-items:flex-start;margin:1rem 0 1.7rem}
.consent input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--accent);flex:0 0 auto}
.consent label{font-size:.8rem;color:var(--ink-3);line-height:1.6;letter-spacing:0;text-transform:none;font-weight:300}
.consent a{color:var(--ink-2)}
.form-dirigido{margin:0 0 .6rem;color:var(--gold);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.form-error{color:var(--gold);font-size:.82rem;margin-top:1rem;min-height:1.2em}

.sent{border:1px solid var(--gold-line);padding:clamp(24px,3vw,34px)}
.sent .ok{color:var(--gold);display:block;margin-bottom:.8rem}
.sent h2{font-family:var(--f-display);font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:600;font-size:1.6rem;margin:0 0 .8rem}
.sent p{color:var(--ink-2);font-size:.9rem;margin-bottom:1.2rem}
.sent textarea{width:100%;min-height:150px;font-family:var(--f-body);font-size:.79rem;font-weight:300;line-height:1.8;background:var(--ground);color:var(--ink-2);border:1px solid var(--line);padding:1rem}
.sent .row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.1rem;align-items:center}

.contact-card{background:var(--band);color:var(--band-ink);position:relative;overflow:hidden}
.contact-card canvas{position:absolute;inset:0;width:100%;height:100%}
.contact-card .inner{position:relative;z-index:3;padding:clamp(30px,3.4vw,44px)}
.contact-card .lock{display:flex;align-items:center;gap:1rem;padding-bottom:clamp(22px,2.6vw,30px)}
.contact-card .lock .frame{width:52px;height:52px;border:1px solid var(--band-gold);display:grid;place-items:center;flex:0 0 auto}
.contact-card .lock .frame span{font-family:var(--f-display);font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 0;font-weight:400;font-size:32px;line-height:1;color:var(--band-ink)}
.contact-card .lock b{display:block;font-family:var(--f-display);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.1rem;letter-spacing:.32em;text-transform:uppercase;color:var(--band-ink)}
.contact-card .lock small{display:flex;align-items:center;gap:.42rem;margin-top:.45rem;color:var(--band-gold);font-size:.54rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
.contact-card .lock small::before,.contact-card .lock small::after{content:"";height:1px;flex:1 1 10px;min-width:9px;background:currentColor;opacity:.8}
.contact-card dl{margin:0}
.contact-card dt{color:var(--band-gold);font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding-top:1.2rem;border-top:1px solid var(--band-line)}
.contact-card dd{margin:.5rem 0 1.2rem;font-size:.94rem;line-height:1.6;color:var(--band-ink)}
.contact-card dd a{color:var(--band-ink);text-decoration:none;border-bottom:1px solid var(--band-line);padding-bottom:1px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.contact-card dd a:hover{border-bottom-color:var(--band-gold);color:var(--band-gold)}
.contact-card dd span{display:block;color:var(--band-ink-2);font-size:.8rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.foot{background:var(--band-deep);color:var(--band-ink)}
/* Cuatro columnas en una sola fila: la marca y las tres listas. Con tres, la
   información legal caía a una segunda fila y dejaba el pie con un hueco
   enorme a la derecha. */
.foot-top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,54px);padding-block:clamp(56px,6vw,86px)}
.foot .mark .frame{border-color:var(--band-gold)}
.foot .mark .frame span,.foot .mark .type b{color:var(--band-ink)}
.foot .mark .type small{color:var(--band-gold)}
.foot .claim{font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:400;font-size:1.2rem;line-height:1.6;color:var(--band-ink-2);max-width:36ch;margin-top:1.6rem}
.foot .claim em{color:var(--band-gold)}
.foot h4{color:var(--band-gold);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin:0 0 1.2rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.foot ul a{color:var(--band-ink-2);text-decoration:none;font-size:.87rem;transition:color .3s var(--ease)}
.foot ul a:hover{color:var(--band-gold)}
.foot-bottom{border-top:1px solid var(--band-line);padding-block:1.8rem;display:flex;flex-wrap:wrap;gap:.7rem 2rem;align-items:center;color:var(--band-ink-2);font-size:.74rem}
.foot-bottom .spacer{margin-left:auto}
@media (max-width:1080px){.foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-top > :first-child{grid-column:1 / -1}}
@media (max-width:800px){.foot-top{grid-template-columns:1fr}.foot-top > :first-child{grid-column:auto}.foot-bottom .spacer{margin-left:0}}

.testimonio-firmado{
  margin:0 0 clamp(22px,2.6vw,34px);
  display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);
  gap:clamp(16px,2vw,30px);align-items:center;
  padding:clamp(15px,1.6vw,20px) clamp(18px,1.9vw,24px);
  background:color-mix(in srgb,var(--band-ink) 6%,var(--band));
  border-top:1px solid var(--band-gold);
}
/* El logotipo del cliente se lleva a la tinta de la casa: acompaña a la banda
   en lugar de pegarse encima con su propio recuadro blanco. */
.testimonio-firmado .marca{display:block;opacity:.82;transition:opacity .4s var(--ease)}
.testimonio-firmado .marca:hover{opacity:1}
.testimonio-firmado .marca:focus-visible{outline:2px solid var(--band-gold);outline-offset:6px}
.testimonio-firmado img{width:100%;height:auto;display:block}
.testimonio-firmado blockquote{
  margin:0;font-family:var(--f-body);font-weight:300;
  font-size:.86rem;line-height:1.68;color:var(--band-ink-2);
}
.testimonio-firmado figcaption{
  grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--band-line);
}
.testimonio-firmado figcaption b{font-weight:600;font-size:.78rem;color:var(--band-ink);letter-spacing:.02em}
.testimonio-firmado figcaption span{font-size:.68rem;color:var(--band-ink-2);letter-spacing:.06em}
@media (max-width:760px){
  .testimonio-firmado{grid-template-columns:1fr;gap:1rem}
  .testimonio-firmado .marca{max-width:150px}
  .testimonio-firmado figcaption{grid-column:1}
}

/* ---------- Testimonios: banda oscura ----------
   Entre el equipo y los honorarios hay un tramo muy largo de página clara.
   Esta banda le devuelve el pulso al recorrido y da a las citas de cliente el
   contraste que necesitan para leerse como lo que son. */
.testimonios{
  background:var(--band);color:var(--band-ink);
  padding-block:clamp(34px,3.6vw,52px);
}
.testimonios .split-head{margin-bottom:clamp(16px,1.8vw,24px);align-items:center}
.testimonios .split-head .display{color:var(--band-ink)}
.testimonios .aside .label{color:var(--band-gold)}
.testimonios .aside p{color:var(--band-ink-2)}
.testimonios .marquesina .velo.izq{background:linear-gradient(to right,var(--band),transparent)}
.testimonios .marquesina .velo.der{background:linear-gradient(to left,var(--band),transparent)}
.testimonios .testimonio{
  background:color-mix(in srgb,var(--band-ink) 7%,var(--band));
  border-top:1px solid var(--band-gold);
}
.testimonios .marquesina:hover .testimonio{background:color-mix(in srgb,var(--band-ink) 7%,var(--band))}
.testimonios .testimonio blockquote{color:var(--band-ink)}
.testimonios .testimonio .placa{background:var(--band-deep);outline:1px solid var(--band-line);outline-offset:-1px}
.testimonios .testimonio .quien b{color:var(--band-ink)}
.testimonios .testimonio .quien span{color:var(--band-ink-2)}
.testimonios .disclaimer{color:var(--band-ink-2)}
.testimonios .tm-toggle{border-color:var(--band-line);color:var(--band-ink-2)}
.testimonios .tm-toggle:hover{color:var(--band-gold);border-color:var(--band-gold)}
.marquesina{
  --tm-gap:clamp(14px,1.6vw,22px);
  --tm-dur:70s;
  position:relative;overflow:hidden;
  margin-top:clamp(16px,2vw,26px);
  padding-block:clamp(6px,.8vw,12px);
}
.marquesina-pista{display:flex;gap:var(--tm-gap);width:max-content}
.marquesina-grupo{
  display:flex;gap:var(--tm-gap);list-style:none;margin:0;padding:0;flex:0 0 auto;
  animation:marquesina var(--tm-dur) linear infinite;
}
.marquesina:hover .marquesina-grupo,
.marquesina:focus-within .marquesina-grupo{animation-play-state:paused}
@keyframes marquesina{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% - var(--tm-gap)))}
}
/* Sin movimiento: se convierte en una tira desplazable a mano */
@media (prefers-reduced-motion: reduce){
  .marquesina{overflow-x:auto;scrollbar-width:thin}
  .marquesina-grupo{animation:none}
  .marquesina-grupo[aria-hidden="true"]{display:none}
}
.marquesina .velo{position:absolute;inset-block:0;width:min(22%,220px);pointer-events:none;z-index:2}
.marquesina .velo.izq{left:0;background:linear-gradient(to right,var(--ground),transparent)}
.marquesina .velo.der{right:0;background:linear-gradient(to left,var(--ground),transparent)}
@media (max-width:640px){.marquesina .velo{width:64px}}

.testimonio{
  flex:0 0 auto;width:min(252px,72vw);
  display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(16px,1.7vw,21px);
  background:var(--surface);border-top:1px solid var(--gold-line);
  transition:background .4s var(--ease);
}
.marquesina:hover .testimonio{background:var(--surface)}
.testimonio blockquote{
  margin:0;font-family:var(--f-display);
  /* Eje óptico de texto: engrosa los trazos finos para que aguante a 16 px */
  font-variation-settings:"opsz" 12,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:.88rem;line-height:1.46;letter-spacing:.004em;color:var(--ink);
}
.testimonio figcaption{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.7rem}
.testimonio .placa{
  width:36px;height:36px;flex:0 0 auto;background:var(--band);
  display:grid;place-items:center;
}
.testimonio .placa span{
  font-family:var(--f-display);font-variation-settings:"opsz" 100,"SOFT" 0,"WONK" 0;font-weight:400;
  font-size:22px;line-height:1;color:var(--band-gold);padding-top:.22em;
}
.testimonio .quien{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.testimonio .quien b{font-weight:600;font-size:.84rem;color:var(--ink)}
.testimonio .quien span{font-size:.74rem;color:var(--ink-3);letter-spacing:.04em}

/* Control de pausa: sin él, quien no usa ratón no puede detener el movimiento */
.marquesina.parada .marquesina-grupo{animation-play-state:paused}
.tm-pie{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:flex-start;justify-content:space-between}
.tm-pie .disclaimer{margin-top:0;flex:1 1 30ch}
.tm-toggle{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--ink-2);
  padding:.6rem 1.15rem;min-height:44px;font-family:var(--f-body);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tm-toggle:hover{color:var(--gold);border-color:var(--gold)}
.tm-toggle .ico{width:9px;height:11px;flex:0 0 auto;position:relative}
.tm-toggle .ico::before,.tm-toggle .ico::after{
  content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor;
}
.tm-toggle .ico::before{left:0}
.tm-toggle .ico::after{right:0}
/* Al estar pausada, el icono pasa a un triángulo de reproducción */
.tm-toggle[aria-pressed="true"] .ico::before{
  left:1px;width:0;height:0;background:transparent;top:0;bottom:auto;
  border-left:8px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}
.tm-toggle[aria-pressed="true"] .ico::after{display:none}
@media (prefers-reduced-motion: reduce){.tm-toggle{display:none}}

/* ---------- Reserva de cita (página propia) ---------- */
.doc-cita .doc-inner{max-width:1120px}
.cita-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:clamp(34px,4.5vw,56px)}
.cita-intro p:first-child{color:var(--ink-2);font-size:.95rem;line-height:1.8;max-width:52ch}
.cita-intro .cita-precio{margin-top:0;padding-top:0;border-top:0}
@media (max-width:820px){.cita-intro{grid-template-columns:1fr;gap:1.6rem}}

/* Botón de acceso desde la tabla de honorarios */
.fee-cta{margin-top:1.1rem;padding:.72rem 1.15rem;font-size:.68rem}


.cita-precio{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
  /* en la página propia el filete lo pone .cita-intro */
  font-family:var(--f-display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:1.7rem;color:var(--ink);line-height:1.2;
}
.cita-precio span{
  display:block;margin-top:.45rem;font-family:var(--f-body);font-size:.78rem;
  font-weight:400;color:var(--ink-3);letter-spacing:.02em;
}
.cita-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,4.5vw,72px);align-items:start}
/* min-width:0 en los hijos: sin esto la tira de días, que es desplazable,
   estira la columna hasta desbordar la página en móvil. */
.cita-grid > *{min-width:0}
@media (max-width:900px){.cita-grid{grid-template-columns:minmax(0,1fr)}}

.cita-cab{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;justify-content:space-between;margin-bottom:1.1rem}
.cita-cab .label{color:var(--gold)}
.cita-cab .sello{color:var(--ink-3);font-size:.7rem;letter-spacing:.04em}

/* Duración: dos opciones, la segunda con su precio, solo en esta página */
.cita-duracion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:clamp(22px,2.6vw,32px)}
.cita-opcion{
  display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;
  padding:.95rem 1.05rem;background:transparent;color:var(--ink);
  border:1px solid var(--line);cursor:pointer;text-align:left;min-height:44px;
  font-family:var(--f-body);transition:border-color .3s var(--ease),background .3s var(--ease);
}
.cita-opcion:hover{border-color:var(--line-strong)}
.cita-opcion[aria-checked="true"]{border-color:var(--gold);background:var(--plate-a)}
.cita-opcion b{font-size:.98rem;font-weight:600;letter-spacing:.01em}
.cita-opcion span{color:var(--ink-3);font-size:.74rem;letter-spacing:.06em}
.cita-opcion[aria-checked="true"] span{color:var(--gold)}
.cita-cab-2{margin-top:.2rem}
.cita-vacio{color:var(--ink-3);font-size:.85rem;line-height:1.7;margin:.4rem 0 0;max-width:46ch}
@media (max-width:420px){.cita-duracion{grid-template-columns:1fr}}
.cita-dias{display:flex;gap:.55rem;overflow-x:auto;max-width:100%;padding-bottom:.7rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cita-dia{
  flex:0 0 auto;min-width:78px;min-height:78px;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  padding:.6rem .5rem;color:var(--ink-2);font-family:var(--f-body);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.cita-dia b{font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.5rem;line-height:1;color:var(--ink)}
.cita-dia i{font-style:normal;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cita-dia small{font-size:.58rem;color:var(--ink-3);letter-spacing:.06em}
.cita-dia:hover{border-color:var(--gold)}
.cita-dia[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cita-dia[aria-selected="true"] b,.cita-dia[aria-selected="true"] small{color:var(--on-accent)}

.cita-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.5rem;margin-top:1.3rem}
.cita-hora{
  min-height:44px;cursor:pointer;background:transparent;border:1px solid var(--line);
  color:var(--ink);font-family:var(--f-body);font-size:.82rem;font-weight:500;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.cita-hora:hover{border-color:var(--gold)}
.cita-hora[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cita-vacio{color:var(--ink-3);font-size:.88rem;padding:1.4rem 0}
/* El aviso de que la hora está guardada para quien la ha elegido. */
.cita-aviso-modo{margin:0 0 .9rem;color:var(--ink-3);font-size:.8rem;line-height:1.6;max-width:52ch}
.cita-guarda{
  margin:.7rem 0 0;font-size:.78rem;letter-spacing:.04em;color:var(--gold);
  display:flex;align-items:center;gap:.5rem;font-variant-numeric:tabular-nums;
}
.cita-guarda::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);
  flex:0 0 auto;animation:latido 2s var(--ease) infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.cita-guarda::before{animation:none}}

.cita-form .field{margin-bottom:1.1rem}
.cita-resumen{
  border-top:1px solid var(--line);margin-top:1.2rem;padding-top:1.1rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.cita-resumen dt{color:var(--ink-3);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cita-resumen dd{margin:0;font-size:.95rem;text-align:right;font-variant-numeric:tabular-nums}
.cita-aviso{color:var(--ink-3);font-size:.78rem;line-height:1.7;margin-top:1.1rem;padding-left:1rem;border-left:1px solid var(--gold-line)}

/* ---------- Aviso breve (copiado al portapapeles) ---------- */
.toast{
  position:fixed;left:50%;bottom:clamp(20px,4vh,36px);z-index:99;
  transform:translate(-50%,12px);opacity:0;visibility:hidden;pointer-events:none;
  background:var(--accent);color:var(--on-accent);padding:.8rem 1.2rem;
  font-size:.8rem;letter-spacing:.02em;max-width:calc(100vw - 32px);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s;
}
.toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}

/* ---------- Documentos legales: página independiente ---------- */
.doc{background:var(--ground);min-height:100svh;padding-block:clamp(112px,15vh,168px) clamp(64px,8vw,110px)}
.doc-inner{max-width:940px}
.doc-back{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink-2);
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.doc-back:hover{color:var(--gold)}
.doc-back i{font-style:normal;transition:transform .3s var(--ease)}
.doc-back:hover i{transform:translateX(-4px)}
.doc-kicker{color:var(--gold);margin-top:clamp(34px,5vw,58px)}
.doc-title{
  font-family:var(--f-display);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(2.15rem,5.6vw,70px);line-height:1.06;letter-spacing:.005em;
  text-transform:uppercase;margin:.45rem 0 0;outline:none;
}
.doc-rule{height:1px;background:var(--ink);margin:clamp(26px,4vw,42px) 0 clamp(22px,3vw,34px)}

/* ---------- Página no encontrada ----------
   El número va perfilado, sin relleno, como los de las fases: ocupa sitio y
   explica el error sin gritarlo. */
.doc-error .doc-inner{max-width:1060px}
.err-num{
  font-family:var(--f-display);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:clamp(5.5rem,16vw,11rem);line-height:.85;
  letter-spacing:.01em;margin:0;color:transparent;
  -webkit-text-stroke:1.5px var(--gold-line);
  font-variant-numeric:tabular-nums;
}
.doc-error .situ-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(30px,4vw,46px)}
.err-pie{
  margin-top:clamp(30px,3.6vw,46px);padding-top:1.2rem;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.86rem;line-height:1.75;max-width:62ch;
}
@media (max-width:560px){.doc-error .situ-grid{grid-template-columns:1fr}}
.doc-body{max-width:68ch;overflow-wrap:anywhere}
.doc-body p{color:var(--ink-2);font-size:.92rem;line-height:1.82}
.doc-body p + p{margin-top:1rem}
.doc-body h2{
  font-family:var(--f-body);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:2.3rem 0 .7rem;
}
.doc-body h2:first-child{margin-top:0}
.doc-body ul{margin:.7rem 0 0;padding-left:1.15rem;color:var(--ink-2);font-size:.92rem;line-height:1.82}
.doc-body li + li{margin-top:.45rem}
.doc-body a{color:var(--ink)}
.cita-sin-agenda{grid-column:1/-1;display:grid;gap:1rem;max-width:46ch}
.cita-sin-agenda-botones{display:flex;flex-wrap:wrap;gap:.6rem}
.doc-faq{margin-top:clamp(40px,5vw,64px);padding-top:clamp(20px,3vw,30px);border-top:1px solid var(--line)}
.doc-faq h3{font-family:var(--f-display);font-weight:500;font-size:1.08rem;line-height:1.35;color:var(--ink);margin:1.6rem 0 .45rem;text-wrap:balance}
.doc-faq h2 + h3{margin-top:.4rem}
.doc-more a.doc-more-servicio{color:var(--gold);border-bottom-color:currentColor}
/* ---------- Blog ---------- */
.post-destacado{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(20px,2.8vw,44px);align-items:center;
  text-decoration:none;color:inherit;margin-top:clamp(8px,1.4vw,18px);
  padding:clamp(18px,2vw,26px);background:var(--plate-a);border:1px solid var(--line);
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.post-texto{display:block;min-width:0}
.post-foto{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--ground)}
.post-foto img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transform:scale(1.01);transition:filter .9s var(--ease),transform 1.4s var(--ease)}
.post-destacado:hover .post-foto img{filter:none;transform:scale(1.05)}
@media (max-width:820px){.post-destacado{grid-template-columns:1fr}}
.post-destacado:hover{background:var(--surface);border-color:var(--gold)}
.post-destacado .post-cat{color:var(--gold)}
.post-destacado h3{
  font-family:var(--f-display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.16;margin:.7rem 0 0;letter-spacing:-.01em;max-width:24ch;
}
.post-destacado p{margin:.85rem 0 0;color:var(--ink-2);font-size:.93rem;line-height:1.72;max-width:52ch}
.post-autor{display:block;margin-top:1.2rem;color:var(--ink-3);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.post-lista{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--line)}
/* Lista compacta: las entradas que no son la última ocupan una línea */
.post-fila{
  display:grid;grid-template-columns:84px minmax(0,140px) minmax(0,1fr);
  gap:clamp(14px,1.6vw,26px);align-items:center;
  padding:.9rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .45s var(--ease)
}
.post-fila:hover{padding-left:.5rem}
.post-mini{display:block;width:84px;aspect-ratio:4/3;overflow:hidden;background:var(--ground)}
.post-mini img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease)}
.post-fila:hover .post-mini img{filter:none}
.post-fecha{color:var(--ink-3);font-size:.6rem}
.post-fila .post-cuerpo{display:block;min-width:0}
.post-fila .post-cat{display:none}
.post-fila .post-h{
  display:block;
  font-family:var(--f-display);font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(.98rem,1.15vw,1.14rem);line-height:1.28;letter-spacing:-.004em;max-width:52ch;
  background-image:linear-gradient(var(--gold),var(--gold));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease);
}
.post-fila:hover .post-h{background-size:100% 1px}
.post-fila .post-autor{margin-top:.3rem;font-size:.6rem;letter-spacing:.14em}
/* ---------- Blog: pestañas por tema y carrusel ----------
   Con más de una docena de artículos la lista vertical ocupaba varias
   pantallas. El destacado se queda; el resto va en un carrusel horizontal
   que se filtra por tema. Todos los enlaces siguen en el HTML, así que el
   buscador los rastrea igual. La última tarjeta invita a consultar. */
.post-carrusel{margin-top:clamp(28px,3.4vw,50px)}
.post-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;margin-bottom:clamp(16px,1.8vw,24px)}
.post-filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.post-filtro{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font:600 .66rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  padding:.72rem 1rem;border-radius:999px;cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.post-filtro span{font-variant-numeric:tabular-nums;color:var(--ink-3);letter-spacing:.04em}
.post-filtro:hover{border-color:var(--gold);color:var(--ink)}
.post-filtro[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.post-filtro[aria-pressed="true"] span{color:var(--gold-line)}
.post-filtro:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.post-flechas{display:flex;gap:.5rem}
.post-flecha{
  appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink);font-size:1rem;cursor:pointer;
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.post-flecha:hover:not(:disabled){border-color:var(--gold);background:var(--plate-a)}
.post-flecha:active:not(:disabled){transform:translateY(1px)}
.post-flecha:disabled{opacity:.3;cursor:default}
.post-pista{
  list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * clamp(14px,1.6vw,24px)) / 3);
  gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;
  /* Holgura para que la sombra de las tarjetas no se corte en los bordes */
  padding:12px 14px 34px;margin:-12px -14px -22px;scroll-padding-inline:14px;
}
.post-pista::-webkit-scrollbar{display:none}
.post-pista:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.post-tarjeta{scroll-snap-align:start;min-width:0;display:flex}
.post-tarjeta[hidden]{display:none}
/* Tarjetas flotantes: fondo claro, esquinas redondeadas y una sombra
   teñida de marino, que crece cuando la tarjeta se levanta al pasar. */
.post-tarjeta > a{
  display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid rgba(22,36,61,.06);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,36,61,.05),0 14px 30px -16px rgba(22,36,61,.24);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.post-tarjeta > a:hover{transform:translateY(-4px);border-color:rgba(182,154,102,.45);
  box-shadow:0 2px 4px rgba(22,36,61,.05),0 24px 44px -18px rgba(22,36,61,.32)}
.post-tarjeta > a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.post-tarjeta .post-mini{width:100%;aspect-ratio:3/2;border-bottom:2px solid var(--gold-line)}
.post-tarjeta > a:hover .post-mini img{filter:none}
.post-tarjeta .post-info{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.6vw,22px)}
.post-tarjeta .post-cat{color:var(--gold);font-size:.6rem}
.post-tarjeta .post-h{
  display:block;margin-top:.6rem;
  font-family:var(--f-display);font-variation-settings:"opsz" 24,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.3;letter-spacing:-.004em;
}
.post-tarjeta .post-autor{margin-top:auto;padding-top:1rem;font-size:.6rem;letter-spacing:.14em}
.post-tarjeta-cta > a{background:var(--accent);border-color:var(--accent);color:var(--on-accent);justify-content:space-between;padding:clamp(20px,2vw,28px)}
.post-tarjeta-cta > a:hover{background:var(--accent-soft);border-color:var(--gold-line)}
.post-tarjeta-cta .label{color:var(--gold-line)}
.post-tarjeta-cta strong{
  display:block;margin-top:.8rem;font-family:var(--f-display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;
  font-weight:600;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.16;
}
.post-tarjeta-cta p{margin:.8rem 0 0;font-size:.88rem;line-height:1.7;opacity:.82}
.post-tarjeta-cta .post-ir{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-line)
}
.post-tarjeta-cta .post-ir::after{content:"";width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.post-tarjeta-cta > a:hover .post-ir::after{width:34px}
/* Boletín del blog: la misma tarjeta flotante que las fichas del blog. */
.boletin{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,44px);align-items:center;
  padding:clamp(22px,3vw,36px) clamp(20px,3.2vw,44px);background:var(--surface);border:1px solid rgba(22,36,61,.06);border-radius:14px;
  box-shadow:0 1px 2px rgba(22,36,61,.05),0 14px 30px -16px rgba(22,36,61,.24)}
.boletin .label{color:var(--gold)}
.boletin-titulo{margin:.5rem 0 .4rem;font-family:var(--f-display);font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.22;color:var(--ink);text-wrap:balance}
.boletin-sub{margin:0;color:var(--ink-3);font-size:.86rem;line-height:1.6}
.boletin-fila{display:flex;gap:.6rem}
.boletin-fila input{flex:1;min-width:0;min-height:48px;padding:0 1.15rem;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--ground);font:inherit;font-size:.92rem;color:var(--ink);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.boletin-fila input::placeholder{color:var(--ink-3);opacity:.7}
.boletin-fila input:focus{outline:none;border-color:var(--gold-line);box-shadow:0 0 0 3px rgba(182,154,102,.22)}
.boletin-fila .btn{flex:none}
.boletin-rgpd{display:flex;gap:.55rem;align-items:flex-start;margin-top:.85rem;font-size:.74rem;line-height:1.5;color:var(--ink-3);cursor:pointer}
.boletin-rgpd input{margin:.18rem 0 0;accent-color:var(--ink);flex:none}
.boletin-rgpd a{color:var(--gold)}
.boletin-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.boletin-estado{margin:.6rem 0 0;font-size:.82rem;line-height:1.5}
.boletin-estado:empty{display:none}
.boletin-estado.ok{color:#2F6B4F}
.boletin-estado.mal{color:#9B2C2C}
.boletin.enviado .boletin-fila,.boletin.enviado .boletin-rgpd{display:none}
.boletin.enviado .boletin-estado{margin:0;font-size:.92rem}
.doc .boletin{grid-template-columns:1fr;margin-block:clamp(28px,3vw,40px)}
@media (max-width:760px){.boletin{grid-template-columns:1fr}}
@media (max-width:460px){.boletin-fila{flex-direction:column}.boletin-fila .btn{width:100%}}
.post-progreso{margin-top:clamp(14px,1.6vw,20px);height:2px;background:var(--line);overflow:hidden}
.post-progreso span{display:block;height:100%;width:var(--avance,30%);background:var(--gold);transform:translateX(var(--posicion,0%));transition:transform .25s linear,width .25s linear}
@media (max-width:980px){.post-pista{grid-auto-columns:calc((100% - clamp(14px,1.6vw,24px)) / 2)}}
@media (max-width:640px){
  .post-pista{grid-auto-columns:84%}
  .post-flechas{display:none}
}
@media (prefers-reduced-motion:reduce){.post-pista{scroll-behavior:auto}.post-progreso span{transition:none}.post-tarjeta > a:hover{transform:none}}

@media (max-width:760px){
  .post-fila{grid-template-columns:64px minmax(0,1fr);gap:.9rem;row-gap:.2rem}
  .post-mini{width:64px;grid-row:span 2}
  .post-fecha{align-self:end}
  .post-fila .post-autor{display:none}
}

/* ---------- Artículo ---------- */
.doc-post .doc-inner{max-width:880px}
.post-portada{margin:clamp(20px,2.4vw,30px) 0 0;overflow:hidden;aspect-ratio:16/7;background:var(--plate-a)}
.post-portada img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) contrast(1.03)}
.post-title{
  font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0;
  font-size:clamp(1.75rem,3.4vw,2.85rem);line-height:1.12;letter-spacing:-.004em;
  text-transform:none;max-width:26ch;
}
.post-lede{margin:clamp(16px,2vw,24px) 0 0;color:var(--ink);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.62;max-width:52ch}
.post-meta{margin-top:clamp(16px,2vw,22px);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;color:var(--ink-3);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.post-meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s var(--ease),border-color .3s var(--ease)}
.post-meta a:hover{color:var(--gold);border-color:var(--gold)}
/* Firma del artículo: retrato y nombre dentro de una píldora, para que se vea
   de un vistazo quién lo escribe. El retrato va en gris, como los del equipo. */
.post-firma{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.3rem .95rem .3rem .3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  transition:border-color .3s var(--ease)}
.post-firma:hover{border-color:var(--gold-line)}
.post-y{margin:0 .1rem;color:var(--ink-3);font-size:.8rem}
.post-firma a{border-bottom:0}
.post-avatar{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  object-position:50% 18%;filter:grayscale(1);background:var(--plate-a)}
.post-body{max-width:70ch}
.post-body > p:first-child{font-size:.98rem}
.post-nota{margin-top:clamp(30px,3.4vw,44px);padding-top:1.1rem;border-top:1px solid var(--line);color:var(--ink-3);font-size:.8rem;line-height:1.7}
.post-cta{
  margin-top:clamp(36px,4.2vw,58px);padding:clamp(24px,2.8vw,34px);background:var(--plate-a);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
}
.post-cta p{margin:0;color:var(--ink-2);font-size:.92rem;max-width:52ch;line-height:1.75}
.doc-post .doc-more-links{display:grid;gap:.7rem}

/* ---------- Situaciones: puertas de entrada del cliente ---------- */
.situ-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.situ{
  /* «--ground», no «--bg»: esa variable no existe y la declaración se caía
     entera, así que las tarjetas se quedaban sin fondo, enseñaban el gris de
     la rejilla y el texto pequeño bajaba de la relación de contraste mínima. */
  background:var(--ground);padding:clamp(24px,2.8vw,38px);display:flex;flex-direction:column;gap:.9rem;
  min-width:0;text-decoration:none;color:inherit;
  transition:background .4s var(--ease);
}
.situ:hover,.situ:focus-visible{background:var(--plate-a)}
.situ:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.situ-ir{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.85rem;
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translate3d(-6px,0,0);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.situ-ir::after{content:"";width:18px;height:1px;background:currentColor}
.situ:hover .situ-ir,.situ:focus-visible .situ-ir{opacity:1;transform:none}
@media (hover:none){.situ-ir{opacity:1;transform:none}}
.situ .ref{color:var(--gold)}
.situ h3{
  font-family:var(--f-display);font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(1.12rem,1.55vw,1.32rem);line-height:1.3;margin:0;letter-spacing:-.004em;
}
.situ > p{color:var(--ink-2);font-size:.88rem;margin:0;line-height:1.75}
.situ .paso{display:block;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.85rem;line-height:1.7}
.situ .paso .label{display:block;color:var(--ink-3);margin-bottom:.4rem}
.situ-pie{margin-top:clamp(34px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.situ-pie p{color:var(--ink-2);font-size:.92rem;max-width:62ch;line-height:1.8;margin:0}
@media (max-width:1000px){.situ-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.situ-grid{grid-template-columns:1fr}}

/* Situaciones: la lista a la izquierda y, a la derecha, la elegida en
   detalle. Sin JavaScript se ven todas, una debajo de otra. En el móvil la
   lista pasa a ser una fila de etiquetas encima del detalle. */
.situ-lista{display:none}
.js .situ-selector{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,84px);align-items:start}
.js .situ-lista{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.situ-lista button{
  appearance:none;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;
  display:flex;flex-direction:column;gap:.35rem;text-align:left;position:relative;
  padding:1.05rem .5rem 1.1rem 1.15rem;font:inherit;color:inherit;
}
.situ-lista button::before{content:"";position:absolute;left:0;top:1.05rem;bottom:1.1rem;width:1px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.situ-lista .ref{color:var(--ink-3);transition:color .3s var(--ease)}
.situ-frase{
  font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;
  font-weight:400;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.42;color:var(--ink-2);
  transition:color .3s var(--ease);
}
.situ-lista button:hover .situ-frase{color:var(--ink)}
.situ-lista button[aria-selected="true"]::before{transform:scaleY(1)}
.situ-lista button[aria-selected="true"] .ref{color:var(--gold)}
.situ-lista button[aria-selected="true"] .situ-frase{color:var(--ink)}
.situ-lista button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.situ-panel{background:var(--surface);border:1px solid var(--line);padding:clamp(26px,3.4vw,48px)}
.situ-panel + .situ-panel{margin-top:16px}
.situ-paneles [hidden]{display:none}
.js .situ-panel{animation:situ-entra .45s var(--ease-out)}
@keyframes situ-entra{from{opacity:0;transform:translateY(6px)}}
.situ-panel .ref{color:var(--gold);margin:0}
.situ-panel h3{
  font-family:var(--f-display);font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.25;letter-spacing:-.004em;margin:.8rem 0 1rem;text-wrap:balance;
}
.situ-panel > p:not(.ref){color:var(--ink-2);font-size:.95rem;line-height:1.8;max-width:60ch;margin:0}
.situ-paso{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--line);max-width:60ch}
.situ-paso .label{display:block;color:var(--ink-3);margin-bottom:.5rem}
.situ-paso p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.75}
.situ-panel .btn{margin-top:1.8rem}
.situ-panel:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:760px){
  .js .situ-selector{grid-template-columns:1fr;gap:18px}
  .js .situ-lista{flex-direction:row;gap:.45rem;border-top:0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .js .situ-lista::-webkit-scrollbar{display:none}
  .situ-lista button{flex:0 0 auto;border:1px solid var(--line-strong);border-radius:999px;padding:.55rem 1rem;white-space:nowrap}
  .situ-lista button::before,.situ-frase{display:none}
  .situ-lista button[aria-selected="true"]{border-color:var(--gold);background:var(--surface)}
  .situ-lista button[aria-selected="true"] .ref{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.js .situ-panel{animation:none}}

/* ---------- Aviso de almacenamiento ----------
   No es un muro de consentimiento: la web no instala cookies de análisis ni
   de publicidad, así que no hay nada que consentir. Informa de lo único que
   se guarda, el idioma, y permite impedirlo. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(12px,2vw,32px);align-items:center;
  padding:clamp(10px,1.1vw,14px) clamp(16px,3.4vw,44px);
  background:var(--band);color:var(--band-ink);
  border-top:1px solid var(--band-gold);
  box-shadow:0 -14px 34px color-mix(in srgb,var(--band-deep) 20%,transparent);
}
.cookies-texto p{margin:0;color:var(--band-ink-2);font-size:.78rem;line-height:1.5;max-width:86ch}
.cookies-texto p strong{color:var(--band-ink);font-weight:600}
.cookies-botones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.cookies-botones .btn{white-space:nowrap;padding:.62rem 1rem;font-size:.67rem}
.cookies-botones .cookies-mas{min-height:auto;padding:.3rem 0 2px}
.cookies-botones .btn-line{border-color:var(--band-line);color:var(--band-ink)}
.cookies-botones .btn-line:hover{border-color:var(--band-gold);color:var(--band-gold)}
.cookies-mas{
  color:var(--band-ink-2);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:0;border-bottom:1px solid var(--band-line);padding:0 0 2px;
  background:transparent;cursor:pointer;font-family:var(--f-body);min-height:44px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cookies-mas:hover{color:var(--band-gold);border-color:var(--band-gold)}
.cookies.entra{animation:avisoEntra .6s var(--ease) both}
@keyframes avisoEntra{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cookies.entra{animation:none}}
.cookies.fuera{transform:translateY(110%);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
@media (max-width:900px){
  .cookies{grid-template-columns:1fr;gap:.7rem;padding-bottom:calc(clamp(10px,1.1vw,14px) + env(safe-area-inset-bottom))}
  .cookies-texto p{font-size:.75rem}
  .cookies-botones .btn{flex:1 1 auto;justify-content:center}
}
@media print{.cookies{display:none}}

/* ---------- Sin cursor: todo lo que se revelaba al pasar por encima ----------
   En un móvil no existe el estado «hover». Si las pistas de que algo es
   pulsable solo aparecen al pasar el ratón, en el teléfono no aparecen nunca.
   Aquí se dejan visibles de entrada. */
@media (hover:none){
  /* Enlaces de una línea que en el móvil hay que poder tocar sin puntería */
  .doc-back{min-height:44px;align-items:center}
  .cita-resumen + .cita-resumen{margin-top:.2rem}

  /* Retratos del equipo: a color y con su etiqueta a la vista */
  .person .plate img{filter:none;transform:scale(1.02)}
  .person-foto .ver{opacity:1;transform:none}
  .person-foto .plate::after{content:none}

  /* Áreas de práctica: la fotografía ya en color, sin esperar al cursor */
  .area .area-figure img{filter:grayscale(.12) contrast(1.02) brightness(1);transform:scale(1.03)}
  .area .area-figure::after{opacity:.14}
  .area::before{transform:scaleX(1)}

  /* Blog: miniaturas en color y el titular con su subrayado */
  .post-destacado .post-foto img,.post-fila .post-mini img{filter:none}
  .post-fila .post-h{background-size:100% 1px}

  /* Enlaces y marcas que solo se encendían al pasar por encima */
  .person h3 a{background-size:100% 1px}
  .testimonio-firmado .marca{opacity:1}
}

/* ---------- Preferencias de privacidad ---------- */
.prefs{
  position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:clamp(16px,4vw,40px);
  background:color-mix(in srgb,var(--band-deep) 62%,transparent);
}
.prefs-caja{
  width:min(620px,100%);max-height:88vh;overflow:auto;
  background:var(--surface);border-top:2px solid var(--gold);
  padding:clamp(24px,3.2vw,40px);
  box-shadow:0 30px 70px color-mix(in srgb,var(--band-deep) 34%,transparent);
}
.prefs-caja h2{
  font-family:var(--f-display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;margin:.5rem 0 clamp(18px,2.2vw,26px);
}
.prefs-fila{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:start;
  padding:clamp(14px,1.8vw,20px) 0;border-top:1px solid var(--line);
}
.prefs-fila b{display:block;font-weight:600;font-size:.92rem;color:var(--ink)}
.prefs-fila p{margin:.35rem 0 0;color:var(--ink-2);font-size:.84rem;line-height:1.65;max-width:52ch}
.prefs-fijo{color:var(--ink-3);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;padding-top:.2rem}
.prefs-int{display:inline-flex;align-items:center;cursor:pointer;padding:.2rem}
.prefs-int input{position:absolute;opacity:0;width:0;height:0}
.prefs-palanca{
  width:50px;height:28px;border:1px solid var(--line-strong);background:var(--ground);
  position:relative;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.prefs-palanca::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  background:var(--ink-3);transition:transform .3s var(--ease),background .3s var(--ease);
}
.prefs-int input:checked + .prefs-palanca{background:var(--accent);border-color:var(--accent)}
.prefs-int input:checked + .prefs-palanca::after{transform:translateX(22px);background:var(--band-gold)}
.prefs-int input:focus-visible + .prefs-palanca{outline:2px solid var(--gold);outline-offset:3px}
.prefs-pie{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:clamp(16px,2vw,22px);margin-top:clamp(6px,1vw,10px);
}
.prefs-pie > a{color:var(--ink-2);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.prefs-pie > a:hover{color:var(--gold);border-color:var(--gold)}
.prefs-acciones{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:560px){
  .prefs-fila{grid-template-columns:1fr}
  .prefs-pie{justify-content:flex-start}
}

/* ---------- WhatsApp ---------- */
.wa{
  position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:60;
  display:inline-flex;align-items:center;gap:.65rem;height:48px;padding:0 1.15rem;
  background:var(--surface);color:var(--ink);text-decoration:none;
  border:1px solid var(--line);
  font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 16px 38px color-mix(in srgb,var(--band-deep) 16%,transparent);
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.wa svg{width:17px;height:17px;fill:var(--verde-wa);flex:0 0 auto;transition:fill .35s var(--ease)}
.wa:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.wa:hover svg{fill:var(--gold)}
.wa:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.con-aviso .wa{transform:translateY(-100%)}
@media (max-width:620px){
  .wa{width:48px;padding:0;justify-content:center;gap:0}
  .wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wa svg{width:20px;height:20px}
}
@media print{.wa{display:none}}

/* ---------- Contacto directo con quien lleva el asunto ---------- */
.enlace-li.contacto-directo svg{fill:currentColor}

/* ---------- Ficha de trayectoria (CV) ---------- */
.doc-cv .doc-inner{max-width:1060px}
.cv-head{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(18px,2.4vw,30px)}
.cv-retrato{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--plate-a)}
.cv-retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25) contrast(1.03)}
.cv-retrato::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.cv-id .doc-kicker{margin:0}
.cv-id .cv-nombre{
  font-family:var(--f-display);font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 0;font-weight:600;
  font-size:clamp(2rem,4.6vw,54px);line-height:1.04;margin:.5rem 0 0;letter-spacing:-.012em;
}
.cv-id .cv-area{display:block;margin-top:.8rem;color:var(--gold)}
.cv-lede{margin-top:clamp(18px,2.2vw,26px);color:var(--ink);font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.72;max-width:52ch}
.cv-datos{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));column-gap:clamp(18px,2.4vw,34px)}
.cv-datos div{padding:.95rem 0;border-bottom:1px solid var(--line)}
.cv-datos dt{font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0}
.cv-datos dd{margin:.4rem 0 0;color:var(--ink-2);font-size:.88rem}
.cv-acciones{margin-top:clamp(20px,2.4vw,28px);display:flex;flex-wrap:wrap;gap:.8rem}
.cv-acciones .enlace-li{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);
  border:1px solid var(--line);padding:0 1.15rem;height:44px;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.cv-acciones .enlace-li:hover{color:var(--gold);border-color:var(--gold)}
.cv-acciones .enlace-li svg{width:13px;height:13px;fill:currentColor}
.cv-body{margin-top:clamp(44px,5.4vw,76px);max-width:72ch}
.cv-cita{
  margin:clamp(30px,3.6vw,46px) 0;padding-left:clamp(18px,2vw,26px);border-left:2px solid var(--gold);
  font-family:var(--f-display);font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;font-weight:500;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;color:var(--ink);
}
.cv-hitos{list-style:none;margin:1.1rem 0 0;padding:0}
.cv-hitos li{padding:1rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:1.2rem}
.cv-hitos li:first-child{border-top:1px solid var(--line)}
.cv-hitos .cuando{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding-top:.24rem}
.cv-hitos .que{color:var(--ink-2);font-size:.92rem;line-height:1.75}
.cv-hitos .que b{color:var(--ink);font-weight:600}
@media (max-width:820px){
  .cv-head{grid-template-columns:1fr}
  .cv-retrato{max-width:280px}
  .cv-hitos li{grid-template-columns:1fr;gap:.35rem}
}
.doc-more{margin-top:clamp(46px,6vw,82px);padding-top:clamp(20px,3vw,30px);border-top:1px solid var(--line)}
.doc-more .label{color:var(--ink-3);display:block;margin-bottom:1.1rem}
.doc-more-links{display:flex;flex-wrap:wrap;gap:.9rem 2.4rem}
.doc-more a{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-variation-settings:"opsz" 22,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.14rem;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.doc-more a:hover{color:var(--gold);border-bottom-color:var(--gold)}

[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);padding:.8rem 1.2rem}
.skip:focus{left:0}

/* ============================================================
   REDISEÑO CINEMATOGRÁFICO
   Escenas en tiempo real (WebGL) en lugar de vídeo: pesan unos kilobytes,
   el bucle no tiene corte y el texto se carga antes que nada.
   ============================================================ */

/* Logotipo: sobre la cabecera de cine (y en su pantalla final), la versión clara */
.topbar.over .ink-dark,.hero-cine .ink-dark{display:none}
.topbar.over .ink-light,.hero-cine .ink-light{display:inline-block}

/* ---------- Cabecera: metraje real y el logotipo al final ----------
   Nueva York de noche, graduada hacia los marinos y el oro de la marca.
   Durante la introducción solo se ve el vídeo; hacia el segundo 8 entra el
   logotipo con un barrido de luz, y la cabecera queda como la de siempre:
   logotipo, frase y botones. */
.hero.hero-cine{background:var(--band-deep) url(/video/cabecera-inicio.jpg?v=2) center/cover no-repeat;text-align:center;place-items:center;min-height:100svh}
.intro-vista .hero.hero-cine{background-image:url(/video/cabecera-final.jpg?v=2)}
.intro-vista .hero-video{display:none}
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01)}
/* Velo: suave durante el vídeo; cuando entra el logotipo, el fondo se
   apaga y se enfría para que el logotipo mande (más contraste, sin tapar la
   ciudad del todo). */
.hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.42;transition:opacity 2.2s var(--ease-out);
  background:
    radial-gradient(60% 55% at 50% 48%,color-mix(in srgb,var(--band-deep) 72%,transparent) 0%,color-mix(in srgb,var(--band-deep) 42%,transparent) 62%,color-mix(in srgb,var(--band-deep) 58%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--band-deep) 65%,transparent) 0%,transparent 22%,transparent 72%,color-mix(in srgb,var(--band-deep) 75%,transparent) 100%),
    linear-gradient(color-mix(in srgb,var(--band-deep) 22%,transparent),color-mix(in srgb,var(--band-deep) 22%,transparent))}
.hero-cine.final .hero-velo{opacity:1}
.hero-video{transition:filter 2.2s var(--ease-out)}
.hero-cine.final .hero-video{filter:brightness(.78) saturate(.8)}
.hero.hero-cine::after{display:none}
/* El barrido de luz dorada que acompaña la entrada del logotipo */
.hero-barrido{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 30%,rgba(255,226,170,.0) 38%,rgba(255,226,170,.28) 50%,rgba(255,226,170,0) 62%,transparent 70%);
  mix-blend-mode:screen;transform:translateX(-70%)}
.hero-cine.final .hero-barrido{animation:barrido 2.6s .15s cubic-bezier(.45,0,.2,1) both}
@keyframes barrido{0%{opacity:0;transform:translateX(-70%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
/* Antes del final, el contenido espera (solo con JavaScript: sin él se ve siempre) */
.js .hero-cine .hero-inner > *{animation:none;opacity:0}
.hero-cine.final .hero-lockup{animation:logoEntra 2.4s cubic-bezier(.2,.7,.2,1) both !important}
.hero-cine.final .claim{animation:subeSuave 1.2s var(--ease-out) 1.3s both !important}
.hero-cine.final .hero-actions{animation:subeSuave 1.2s var(--ease-out) 1.6s both !important}
@keyframes logoEntra{
  0%{opacity:0;transform:scale(1.08);filter:blur(16px) brightness(1.7)}
  55%{opacity:1;filter:blur(0) brightness(1.25)}
  100%{opacity:1;transform:none;filter:none}}
@keyframes subeSuave{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-cine .hero-inner{position:relative;z-index:3}
.hero-cine .claim{color:var(--hero-ink-2);text-shadow:0 1px 18px color-mix(in srgb,var(--band-deep) 70%,transparent)}
.hero-cine .hero-lockup{filter:drop-shadow(0 4px 30px color-mix(in srgb,var(--band-deep) 55%,transparent))}
/* Durante la introducción, ni menú ni WhatsApp: la apertura manda */
.intro-cine .topbar,.intro-cine .wa,.intro-cine .scroll-cue{opacity:0;pointer-events:none}
.intro-cine .scroll-cue{animation:none}
.topbar,.wa{transition:opacity 1.2s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .hero-cine .hero-inner > *{opacity:1 !important;animation:none !important}
  .hero-barrido{display:none}
}

@media (prefers-reduced-motion:reduce){
}