/* ============================================================
   Tu Abogado Laboral | Carlos Ramírez & Asociados
   1. Tipografías (auto-alojadas)
   2. Tokens
   3. Base
   4. Componentes
   ============================================================ */

/* ---------- 1. Tipografías ---------- */
/* Lato, licencia OFL, subset latino. Sin CDN. */

@font-face{
  font-family:'Lato';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/lato-400-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:'Lato';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/lato-700-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;
}

/* ---------- 2. Tokens ---------- */

:root{
  /* Marca */
  --maroon-900:#1c0a1a;
  --maroon-800:#2b1129;
  --maroon-700:#3d1a3a;
  --gold-500:#c79a3f;
  --gold-600:#a97f2d;
  --gold-100:#f6ecd6;

  /* Superficies */
  --surface-base:#faf7f2;
  --surface-raised:#ffffff;
  --surface-dark:var(--maroon-900);
  --line:#e7e0da;

  /* Texto sobre claro */
  --text-strong:#211a29;
  --text-muted:#5c5266;

  /* Texto sobre oscuro. No bajar de --on-dark-muted para texto de lectura. */
  --on-dark-strong:rgba(255,255,255,0.95);
  --on-dark:rgba(255,255,255,0.82);
  --on-dark-muted:rgba(255,255,255,0.66);
  --on-dark-line:rgba(255,255,255,0.14);
  --on-dark-fill:rgba(255,255,255,0.06);

  /* Semánticos */
  --good:#2f7a4d;
  --bad:#a13d2f;
  --wa-green:#25D366;
  --wa-green-dark:#075E54;
  --white:#ffffff;

  /* Tipografía */
  --font-display:'Lato',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Lato',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono','Cascadia Code',Consolas,'Roboto Mono',monospace;

  --text-xs:0.78rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:clamp(1.6rem,3vw,2.15rem);
  --text-3xl:clamp(2.25rem,5.5vw,3.75rem);

  /* Espaciado */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-24:6rem;
  --gutter:clamp(1.25rem,4vw,2rem);
  --section-y:clamp(3.5rem,8vw,6rem);

  /* Radios */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-full:999px;

  /* Elevación */
  --elev-1:0 1px 2px rgba(28,10,26,0.06);
  --elev-2:0 6px 24px rgba(28,10,26,0.08);
  --elev-3:0 16px 48px rgba(28,10,26,0.14);

  /* Motion */
  --dur-fast:150ms;
  --dur-base:300ms;
  --dur-slow:700ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  --container:1120px;
  --header-h:84px;
}

/* ---------- 3. Base ---------- */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--text-strong);
  background:var(--surface-base);
  line-height:1.65;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  text-wrap:balance;
  margin:0 0 0.6em;
}
h1{font-size:var(--text-3xl);line-height:1.05;letter-spacing:-0.02em;}
h2{font-size:var(--text-2xl);line-height:1.12;letter-spacing:-0.015em;}
h3{font-size:var(--text-xl);line-height:1.25;letter-spacing:-0.01em;}
h4{font-size:var(--text-base);line-height:1.3;}
p{margin:0 0 1em;}
ul{margin:0 0 1em;padding-left:1.2rem;}
li{margin-bottom:0.4em;}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}

/* Skip link (accesibilidad) */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--gold-500);color:var(--maroon-900);
  padding:var(--space-2) var(--space-4);z-index:1000;border-radius:0 0 var(--radius-sm) 0;font-weight:600;
}
.skip-link:focus{left:0;}

/* Foco visible */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold-500);outline-offset:2px;
}

/* ---------- 4. Componentes ---------- */

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:0.85rem var(--space-6);border-radius:var(--radius-full);
  font-weight:600;font-size:var(--text-base);letter-spacing:-0.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--gold-500);color:var(--maroon-900);}
.btn-primary:hover{background:var(--gold-600);box-shadow:var(--elev-2);}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.5);}
.btn-outline:hover{border-color:var(--white);background:var(--on-dark-fill);}
.btn-outline-dark{background:transparent;color:var(--maroon-900);border-color:var(--maroon-900);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:var(--space-3) 1.1rem;font-size:var(--text-sm);}
/* Verde WhatsApp: en todo el sitio significa "esto abre WhatsApp", el dorado
   sigue siendo el CTA de marca. Texto en vinotinto, no blanco: blanco sobre
   wa-green da 1.98:1 (falla AA), maroon-900 da 9.56:1. */
.btn-wa{background:var(--wa-green);color:var(--maroon-900);}
.btn-wa:hover{background:#1fb85a;box-shadow:var(--elev-2);}

/* ---------- Header ---------- */
.site-header{
  background:var(--surface-dark);color:var(--white);position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--on-dark-line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.85rem var(--gutter);gap:var(--space-4);}
.brand{display:flex;align-items:center;gap:0.65rem;text-decoration:none;color:var(--white);}
.brand-mark{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--gold-500);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:1.15rem;color:var(--gold-500);flex-shrink:0;
  overflow:hidden;object-fit:cover;
}
.brand-text{line-height:1.2;}
.brand-text strong{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-base);letter-spacing:-0.01em;}
.brand-text span{display:block;font-size:0.7rem;color:var(--gold-100);letter-spacing:0.06em;text-transform:uppercase;}

.main-nav{display:flex;align-items:center;gap:var(--space-6);}
.main-nav > a,.nav-services summary{
  color:var(--white);text-decoration:none;font-size:var(--text-sm);opacity:0.85;
  padding:var(--space-1) 0;border-bottom:2px solid transparent;
  transition:opacity var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.main-nav > a:hover,.main-nav > a[aria-current="page"],
.nav-services:hover summary,.nav-services[open] summary{opacity:1;border-color:var(--gold-500);}

.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,0.4);border-radius:var(--radius-sm);
  color:var(--white);padding:var(--space-2) 0.65rem;font-size:1.1rem;cursor:pointer;
}

/* ---------- Menú desplegable de servicios ---------- */
.nav-services summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:0.35rem;
}
.nav-services summary::-webkit-details-marker{display:none;}
.nav-services summary::after{
  content:"";width:6px;height:6px;border:1.5px solid currentColor;border-top:none;border-left:none;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) var(--ease-out);flex-shrink:0;
}
.nav-services[open] summary::after{transform:rotate(-135deg) translateY(1px);}

.nav-services-panel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--surface-base);border-top:1px solid var(--line);box-shadow:var(--elev-3);
  /* Sin esto el panel se sale de pantalla en portátiles y el último servicio
     queda inalcanzable. */
  max-height:calc(100vh - var(--header-h));
  overflow-y:auto;
}
/* El agrupamiento lo hacen el aire y la tipografía, no cajas ni divisorias:
   cuatro recuadros idénticos con un chip de icono en cada renglón se leen como
   plantilla, y contradicen el "la seriedad se transmite con espacio" de
   docs/marca.md. */
.nav-services-grid{
  padding:var(--space-12) var(--gutter) var(--space-8);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-8) var(--space-12);align-items:start;
}
@media (max-width:1000px){.nav-services-grid{grid-template-columns:repeat(2,1fr);}}
.nav-services-group h4{
  font-size:var(--text-sm);color:var(--maroon-900);line-height:1.35;
  margin:0 0 var(--space-4);position:relative;padding-bottom:var(--space-3);
  /* Reserva dos líneas para que los cuatro filetes y los primeros servicios
     queden a la misma altura: si un título envuelve y los otros no, la columna
     desalineada se lee como error de maquetado, no como decisión. */
  min-height:calc(2.7em + var(--space-3));
}
/* Filete corto que subraya el título, en vez de una línea de borde a borde que
   dibuja el contorno de una caja. */
.nav-services-group h4::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;
  background:var(--gold-500);border-radius:var(--radius-full);
}
.nav-services-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:0.45rem 0;text-decoration:none;color:var(--text-strong);
  font-size:var(--text-base);line-height:1.3;
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.nav-services-item:hover{color:var(--gold-600);transform:translateX(3px);}
.nav-services-ico{
  width:18px;height:18px;flex-shrink:0;color:var(--gold-500);opacity:0.55;
  stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.nav-services-item:hover .nav-services-ico{opacity:1;}

.nav-services-foot{border-top:1px solid var(--line);background:transparent;}
.nav-services-foot-in{
  padding:var(--space-6) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);flex-wrap:wrap;
}
.nav-services-foot-in strong{
  display:block;color:var(--maroon-900);font-size:var(--text-base);line-height:1.25;
  margin-bottom:var(--space-1);
}
.nav-services-foot-in p{
  margin:0;color:var(--text-muted);font-size:var(--text-sm);
  max-width:44ch;text-wrap:balance;
}
/* La llamada a la acción del menú va en dorado, no en verde: el #25D366 es de
   WhatsApp y tenerlo aquí lo pone dos veces en pantalla junto a la burbuja
   flotante, diluyendo la paleta de la firma. */
.nav-services-foot .btn-wa{background:var(--gold-500);color:var(--maroon-900);}
.nav-services-foot .btn-wa:hover{background:var(--gold-600);}
.nav-services-foot .btn-wa svg{display:none;}

@media (max-width:980px){
  /* Apiladas ya no hay columnas que alinear, así que la reserva de dos líneas
     solo dejaría un hueco muerto bajo cada título. */
  .nav-services-group h4{min-height:0;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--surface-dark);
    flex-direction:column;align-items:flex-start;gap:0;padding:var(--space-2) var(--gutter) var(--space-4);
    display:none;border-top:1px solid var(--on-dark-line);max-height:calc(100vh - 100%);overflow-y:auto;
  }
  .main-nav.open{display:flex;}
  .main-nav > a,.nav-services summary{width:100%;padding:var(--space-3) 0;border-bottom:1px solid var(--on-dark-line);font-size:var(--text-base);}
  .nav-services{width:100%;}
  .nav-services-panel{
    position:static;margin:var(--space-2) 0;border-radius:var(--radius-md);
    box-shadow:none;border:1px solid var(--line);
    /* Scrollea el cajón de navegación, no el panel: con max-height aquí quedan
       dos áreas scrolleables anidadas y se siente roto. */
    max-height:none;overflow:visible;
  }
  .nav-services-grid{grid-template-columns:1fr;padding:var(--space-4);gap:var(--space-6);}
  .nav-services-foot-in{padding:var(--space-6) var(--space-4);flex-direction:column;align-items:flex-start;}
  .nav-toggle{display:inline-flex;}
  .header-cta{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--maroon-900),var(--maroon-700));
  color:var(--white);padding:var(--section-y) 0 var(--space-8);
}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--space-12);align-items:center;}
.hero-eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold-500);margin:0 0 var(--space-4);
}
.hero h1{color:var(--white);margin-bottom:var(--space-6);}
.hero-lede{color:var(--on-dark);font-size:var(--text-lg);line-height:1.6;max-width:52ch;margin-bottom:var(--space-8);}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.hero-credentials{
  margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--on-dark-line);
  display:flex;gap:var(--space-8);flex-wrap:wrap;
}
.hero-credentials div{display:flex;flex-direction:column;}
.hero-credentials strong{
  font-family:var(--font-display);font-weight:700;
  font-size:1.6rem;line-height:1.2;color:var(--gold-500);letter-spacing:-0.015em;
}
.hero-credentials span{font-size:var(--text-xs);color:var(--on-dark-muted);}

.hero-card{
  background:var(--surface-raised);border:1px solid var(--on-dark-line);
  border-top:3px solid var(--gold-500);border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6);box-shadow:var(--elev-3);
}
.hero-card h3{color:var(--text-strong);font-size:var(--text-lg);margin-bottom:var(--space-4);}
.hero-card ul{padding-left:0;list-style:none;margin:0;}
.hero-card li{
  display:flex;gap:0.6rem;align-items:flex-start;font-size:var(--text-sm);color:var(--text-muted);
  padding:var(--space-3) 0;border-top:1px solid var(--line);
}
.hero-card li:first-child{border-top:none;padding-top:0;}
.hero-card li::before{content:"✓";color:var(--gold-600);font-weight:700;flex-shrink:0;}

.hero-scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  width:fit-content;margin:var(--space-12) auto 0;
  color:var(--on-dark-muted);text-decoration:none;font-size:var(--text-xs);
  letter-spacing:0.08em;text-transform:uppercase;
  transition:color var(--dur-fast) var(--ease-out);
}
.hero-scroll-cue:hover{color:var(--gold-500);}
.hero-scroll-cue svg{animation:hero-scroll-bounce 1.8s var(--ease-out) infinite;}

@keyframes hero-scroll-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:var(--space-8);}
  .hero-eyebrow{letter-spacing:0.08em;}
  .hero-credentials{
    margin-top:var(--space-8);gap:var(--space-4) var(--space-6);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }
  .hero-credentials strong{font-size:1.35rem;}
  .hero-scroll-cue{display:none;}
}

/* ---------- Hero: variantes Fase 2 (docs/brief-rediseno.md §4) ---------- */
/* .hero--a/b/c reutilizan .hero, .hero-inner, .hero-eyebrow, .hero-lede,
   .hero-actions, .hero-credentials y .hero-scroll-cue tal como están arriba;
   aquí solo se agrega lo específico de cada tratamiento. */

.hero-video{width:100%;height:100%;object-fit:cover;display:block;background:var(--maroon-900);}

.hero-credentials-band{position:relative;z-index:2;margin-top:var(--space-12);border-top:1px solid var(--on-dark-line);}
.hero-credentials-band .hero-credentials{margin-top:0;padding:var(--space-6) 0;border-top:none;}

/* Capas de video a sangre, compartidas por A y C */
.hero-media{position:absolute;inset:0;overflow:hidden;}
.hero-media ~ *{position:relative;z-index:2;}

/* ----- Variante A — Cinematográfica ----- */
.hero--a{
  padding:0;position:relative;overflow:hidden;min-height:min(88vh,820px);
  display:flex;flex-direction:column;
}
.hero--a .hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(28,10,26,.94) 0%,rgba(28,10,26,.87) 55%,rgba(61,26,58,.62) 100%);
}
.hero--a .hero-content{
  max-width:760px;margin:0;
  padding:var(--space-16) var(--gutter) var(--space-8);
}
.hero--a .hero-credentials-band{margin-top:clamp(var(--space-16),10vh,var(--space-24));}
.hero--a .hero-scroll-cue{margin:0 auto var(--space-6);}

.hero--a .hero-video{animation:hero-video-drift 8s var(--ease-out) forwards;}
@keyframes hero-video-drift{from{transform:scale(1.02);}to{transform:scale(1);}}

/* ----- Variante B — Editorial dividida ----- */
.hero--b{padding:var(--section-y) 0 0;}
.hero--b .hero-media-frame{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--gold-500);box-shadow:var(--elev-3);
  aspect-ratio:4/3;
}
.hero--b .hero-video{animation:hero-kenburns 22s ease-in-out infinite alternate;}
@keyframes hero-kenburns{from{transform:scale(1);}to{transform:scale(1.08);}}

.js-motion .hero--b .hero-media-frame{
  clip-path:inset(100% 0 0 0);
  animation:hero-frame-reveal var(--dur-slow) var(--ease-out) forwards;
  animation-delay:80ms;
}
@keyframes hero-frame-reveal{
  from{clip-path:inset(100% 0 0 0);}
  to{clip-path:inset(0 0 0 0);}
}

/* ----- Variante C — Textura de firma ----- */
.hero--c{padding:0;position:relative;overflow:hidden;min-height:min(88vh,820px);display:flex;flex-direction:column;}
.hero--c .hero-video{
  filter:grayscale(1) contrast(1.15);opacity:.35;
  animation:hero-duotone-in 1.2s var(--ease-out) forwards;
}
@keyframes hero-duotone-in{from{opacity:0;}to{opacity:.35;}}
.hero--c .hero-duotone{position:absolute;inset:0;background:var(--maroon-900);mix-blend-mode:multiply;}
.hero--c .hero-lines{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(199,154,63,.14) 0 1px,transparent 1px 48px);
  animation:hero-lines-drift 40s linear infinite;
}
@keyframes hero-lines-drift{from{background-position:0 0;}to{background-position:480px 0;}}
.hero--c .hero-content{
  max-width:760px;margin:0;
  padding:var(--space-16) var(--gutter) var(--space-8);
}
.hero--c .hero-credentials-band{margin-top:clamp(var(--space-16),10vh,var(--space-24));}

/* ----- Entrada escalonada del texto (solo con JS activo) ----- */
.js-motion .hero--a .hero-eyebrow,.js-motion .hero--a .hero h1,.js-motion .hero--a .hero-lede,
.js-motion .hero--a .hero-actions,.js-motion .hero--a .hero-credentials,
.js-motion .hero--b .hero-eyebrow,.js-motion .hero--b .hero h1,.js-motion .hero--b .hero-lede,
.js-motion .hero--b .hero-actions,.js-motion .hero--b .hero-credentials,
.js-motion .hero--c .hero-eyebrow,.js-motion .hero--c .hero-lede,
.js-motion .hero--c .hero-actions,.js-motion .hero--c .hero-credentials{
  opacity:0;transform:translateY(16px);
  animation:hero-in var(--dur-base) var(--ease-out) forwards;
}
@keyframes hero-in{to{opacity:1;transform:translateY(0);}}

.js-motion .hero--a .hero-eyebrow,.js-motion .hero--b .hero-eyebrow,.js-motion .hero--c .hero-eyebrow{animation-delay:0ms;}
.js-motion .hero--a .hero h1,.js-motion .hero--b .hero h1{animation-delay:80ms;}
.js-motion .hero--a .hero-lede,.js-motion .hero--b .hero-lede,.js-motion .hero--c .hero-lede{animation-delay:160ms;}
.js-motion .hero--a .hero-actions,.js-motion .hero--b .hero-actions,.js-motion .hero--c .hero-actions{animation-delay:240ms;}
.js-motion .hero--a .hero-credentials,.js-motion .hero--b .hero-credentials,.js-motion .hero--c .hero-credentials{animation-delay:320ms;}

/* La C revela el h1 con una máscara en vez del fade+translateY estándar */
.js-motion .hero--c h1{clip-path:inset(100% 0 0 0);animation:hero-h1-mask var(--dur-slow) var(--ease-out) forwards;animation-delay:80ms;}
@keyframes hero-h1-mask{
  from{clip-path:inset(100% 0 0 0);}
  to{clip-path:inset(0 0 0 0);}
}

@media (max-width:860px){
  .hero--a,.hero--c{min-height:0;}
  .hero--a .hero-content,.hero--c .hero-content{padding:var(--space-12) var(--gutter) var(--space-6);}
}

/* ---------- Estructura de sección ---------- */
.section{padding:var(--section-y) 0;}
.section-alt{background:var(--surface-raised);}
.section-head{max-width:60ch;margin:0 auto var(--space-12);text-align:center;}
.section-eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:var(--space-3);display:block;
}
.section-head p{color:var(--text-muted);font-size:var(--text-lg);}

/* ---------- Tarjetas de servicio (grilla del home) ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
.service-card{
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-8);text-decoration:none;color:var(--text-strong);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.service-card:hover{box-shadow:var(--elev-2);transform:translateY(-2px);border-color:var(--gold-500);}
.service-card .icon{
  width:46px;height:46px;border-radius:10px;background:var(--gold-100);color:var(--gold-600);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.service-card h3{margin-bottom:0;}
.service-card p{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:0;}
.service-card .link{
  margin-top:auto;font-size:var(--text-sm);font-weight:600;color:var(--gold-600);
  display:flex;align-items:center;gap:var(--space-1);
}

/* ---------- Columnas de servicios (home, catálogo de 13, Fase 3b) ---------- */
.services-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);}
.service-branch > h3{
  font-family:var(--font-body);font-size:var(--text-base);font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--text-strong);
  padding-bottom:var(--space-3);border-bottom:2px solid var(--gold-500);margin-bottom:0;
}
.service-entry{border-bottom:1px solid var(--line);}
.service-entry > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) 0;
}
.service-entry > summary::-webkit-details-marker{display:none;}
.service-entry summary::after{
  content:"+";margin-left:auto;color:var(--gold-600);
  font-size:1.3rem;font-weight:400;line-height:1;flex-shrink:0;
}
.service-entry[open] summary::after{content:"–";}
.service-num{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--text-sm);color:var(--gold-600);
  font-variant-numeric:tabular-nums;flex-shrink:0;width:var(--space-8);
}
.service-entry summary h4{
  font-family:var(--font-body);
  font-size:var(--text-base);font-weight:600;letter-spacing:normal;
  margin:0;line-height:1.4;
}
.service-entry summary:hover h4{color:var(--gold-600);}
.service-detail{padding:0 0 var(--space-4) calc(var(--space-8) + var(--space-3));}
.service-detail p{color:var(--text-muted);font-size:var(--text-sm);margin:0 0 var(--space-2);}
.service-detail a{font-size:var(--text-sm);font-weight:600;color:var(--gold-600);text-decoration:none;}

@media (max-width:820px){
  .services-columns{grid-template-columns:1fr;gap:var(--space-8);}
}

@media (max-width:700px){
  .services-grid{grid-template-columns:1fr;}
}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);}
.step{
  position:relative;padding:var(--space-8);background:var(--surface-raised);
  border-radius:var(--radius-md);border:1px solid var(--line);
}
.step .step-num{
  font-family:var(--font-display);font-weight:700;
  font-size:1.8rem;line-height:1;color:var(--gold-500);display:block;margin-bottom:var(--space-3);
}
.step h3{font-size:var(--text-base);}
.step p{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:0;}
@media (max-width:800px){.steps{grid-template-columns:1fr;}}

/* ---------- Proceso: recorrido en fondo oscuro (home, Fase 4) ---------- */
.section-dark{background:var(--surface-dark);color:var(--white);}
.section-dark .section-eyebrow{color:var(--gold-500);}
.section-dark h2{color:var(--white);}
.section-dark .section-head p{color:var(--on-dark);}

.process-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);}
.process-track::before{
  content:"";position:absolute;left:8%;right:8%;top:27px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500) 12%,var(--gold-500) 88%,transparent);
}
.process-step{position:relative;text-align:center;}
.process-dot{
  width:54px;height:54px;border-radius:50%;margin:0 auto var(--space-6);
  background:var(--surface-dark);border:1px solid var(--gold-500);color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:700;position:relative;z-index:1;
}
.process-who{
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:0.12rem 0.5rem;border-radius:var(--radius-full);border:1px solid currentColor;
  display:inline-block;
}
.process-who--you{color:var(--gold-500);}
.process-who--us{color:var(--on-dark-muted);}
.process-step h3{color:var(--white);font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-3);}
.process-step p{color:var(--on-dark);font-size:var(--text-sm);margin:0;}
.process-cta{
  margin-top:var(--space-12);padding-top:var(--space-8);
  border-top:1px solid var(--on-dark-line);text-align:center;
}
.process-cta p{color:var(--on-dark);margin-bottom:var(--space-4);}

@media (max-width:860px){
  .process-track{grid-template-columns:1fr;gap:var(--space-8);}
  .process-track::before{display:none;}
  .process-step{text-align:left;display:grid;grid-template-columns:54px 1fr;gap:0 var(--space-4);}
  .process-dot{margin:0;}
  .process-step .process-who,.process-step h3,.process-step p{grid-column:2;justify-self:start;align-self:start;}
  .process-who{margin-top:var(--space-2);}
  .process-step h3{margin-top:0;}
}

/* ---------- Razones ---------- */
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);}
.reason{display:flex;gap:var(--space-3);align-items:flex-start;}
.reason .mark{
  width:34px;height:34px;border-radius:50%;background:var(--maroon-900);color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--text-sm);font-weight:700;
}
.reason h3{font-size:var(--text-base);margin-bottom:var(--space-1);}
.reason p{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:0;}
@media (max-width:700px){.reasons{grid-template-columns:1fr;}}

/* ---------- Testimonios ---------- */
.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;}
.reviews-rating{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3);}
.reviews-stars{color:var(--gold-500);font-size:1.1rem;letter-spacing:0.05em;line-height:1;}
.reviews-rating a{color:var(--gold-600);font-weight:600;text-decoration:none;}
.reviews-rating a:hover{text-decoration:underline;}
.testimonials-carousel{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  padding:0 clamp(var(--space-6),6vw,var(--space-16));
}
/* Sin JS el riel es un scroll horizontal normal: las 5 reseñas siguen siendo
   accesibles. Con JS, main.js le pone .is-enhanced y pasa a controlar la
   posición de cada tarjeta por transform, con recorrido modular (infinito
   real, sin bordes contra los que topar). */
.testimonials-grid{
  position:relative;
  display:flex;gap:var(--space-6);align-items:stretch;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:var(--space-2) var(--space-1) var(--space-4);margin:0 calc(var(--space-1) * -1);
  scrollbar-width:none;
}
.testimonials-grid::-webkit-scrollbar{display:none;}
.testimonials-grid.is-enhanced{
  overflow:hidden;touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.testimonials-grid.is-enhanced.is-dragging{cursor:grabbing;}
.testimonials-grid.is-enhanced .testimonial-card{will-change:transform,opacity;}
.testimonial-card{
  position:relative;overflow:hidden;flex:0 0 calc(29% - var(--space-4));min-width:260px;
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);
  border-top:3px solid var(--gold-500);
  padding:var(--space-6);
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.testimonial-card:hover{box-shadow:var(--elev-2);border-color:var(--gold-500);}
.testimonials-arrow{display:none;
  position:absolute;top:45%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface-raised);color:var(--maroon-900);font-size:1.5rem;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--elev-2);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
/* Las flechas solo tienen sentido con JS: sin él, el riel se desplaza solo. */
.js-motion .testimonials-arrow{display:flex;}
.testimonials-arrow--prev{left:clamp(var(--space-2),3vw,var(--space-8));}
.testimonials-arrow--next{right:clamp(var(--space-2),3vw,var(--space-8));}
.testimonials-arrow:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--maroon-900);}
.testimonials-arrow:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px;}
@media (max-width:800px){
  .testimonial-card{flex-basis:80%;min-width:0;}
  .testimonials-arrow{width:38px;height:38px;font-size:1.2rem;}
}
.testimonial-card::before{
  content:"\201C";position:absolute;top:-0.4rem;right:var(--space-4);
  font-size:4.5rem;line-height:1;font-weight:700;color:var(--gold-100);
  pointer-events:none;
}
.testimonial-head{position:relative;display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);}
.testimonial-avatar{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:var(--maroon-900);color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--text-sm);
}
.testimonial-who{display:flex;flex-direction:column;gap:2px;}
.testimonial-card p{position:relative;color:var(--text-muted);font-size:var(--text-sm);margin-bottom:0;}
.testimonial-card .author{font-weight:700;font-size:var(--text-sm);color:var(--text-strong);}
.testimonial-stars{color:var(--gold-500);font-size:0.8rem;letter-spacing:0.05em;}
.testimonials-soon{
  background:var(--surface-raised);border:1px dashed var(--line);border-radius:var(--radius-md);
  padding:var(--space-12);text-align:center;color:var(--text-muted);
}

/* ---------- Migas de pan ---------- */
.breadcrumb{font-size:var(--text-sm);color:var(--text-muted);padding:var(--space-4) 0 0;}
.breadcrumb a{color:var(--text-muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--gold-600);text-decoration:underline;}
.breadcrumb .sep{margin:0 var(--space-1);color:var(--line);}

/* ---------- Hero de página interna ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--maroon-900),var(--maroon-700));
  color:var(--white);padding:var(--space-12) 0 var(--space-16);
}
.page-hero h1{color:var(--white);margin-bottom:var(--space-4);font-size:clamp(2rem,4.5vw,2.9rem);}
.page-hero p{color:var(--on-dark);max-width:60ch;font-size:var(--text-lg);margin-bottom:var(--space-6);}
.page-hero .page-hero-claim{
  color:var(--gold-500);font-weight:700;font-size:var(--text-xl);
  margin-bottom:var(--space-3);
}

/* ---------- Contenido legal (política de privacidad) ---------- */
.legal-content{max-width:72ch;margin:0 auto;}
.legal-content h2{font-size:var(--text-xl);margin:var(--space-10) 0 var(--space-3);}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content p{color:var(--text-muted);line-height:1.7;margin:0 0 var(--space-3);}
.legal-content ul{padding-left:1.2rem;margin:0 0 var(--space-3);}
.legal-content li{color:var(--text-muted);line-height:1.7;margin-bottom:var(--space-2);}
.legal-content strong{color:var(--text-strong);}
.legal-updated{
  margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--line);
  font-size:var(--text-sm);color:var(--text-muted);
}

/* ---------- Banner de consentimiento ---------- */
/* Inyectado por JS: sin JavaScript no aparece y tampoco carga analítica (Fase 8a/8b). */
.consent-banner{
  position:fixed;left:1.2rem;bottom:1.2rem;z-index:210;
  width:min(380px,calc(100vw - 2.4rem));
  background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--elev-3);
  padding:var(--space-5);
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.consent-banner.is-visible{opacity:1;transform:none;}
.consent-banner p{margin:0 0 var(--space-4);font-size:var(--text-sm);color:var(--text-muted);line-height:1.5;}
.consent-banner a{color:var(--gold-600);}
.consent-actions{display:flex;gap:var(--space-3);}
.consent-actions .btn{flex:1;}
@media (max-width:600px){
  .consent-banner{left:1rem;right:1rem;bottom:5.5rem;width:auto;}
}

/* ---------- Bloques de información ---------- */
.info-card{
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-6) var(--space-8);margin-bottom:var(--space-6);
}
.info-card h2{font-size:var(--text-xl);}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:0.55rem 0;border-top:1px solid var(--line);font-size:var(--text-base);
}
.check-list li:first-child{border-top:none;}
.check-list li::before{content:"✓";color:var(--good);font-weight:700;flex-shrink:0;}

.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
@media (max-width:800px){.two-col{grid-template-columns:1fr;}}

/* ---------- Video + contenido, en un solo bloque (páginas de servicio) ----------
   El material es vertical (9:16, grabado para redes), así que va contenido en una
   columna estrecha junto al contenido de la sección, no como tarjeta aparte: en
   escritorio se leen como una sola pieza. */
.video-split{
  display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:var(--space-8);
  align-items:start;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:var(--space-8);margin:0 0 var(--space-6);
}
.video-split-media{width:100%;max-width:300px;margin:0 auto;position:sticky;top:96px;}
.video-split video{
  /* height:auto es imprescindible: el atributo height del HTML (que evita el
     salto de layout al cargar) se aplica como alto fijo y anularía el
     aspect-ratio. */
  display:block;width:100%;height:auto;aspect-ratio:9/16;
  border-radius:var(--radius-md);background:var(--maroon-900);
  box-shadow:var(--elev-2);
}
.video-split-note{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--gold-600);
  margin:var(--space-3) 0 0;text-align:center;text-wrap:balance;
}
.video-split-body > h2{font-size:var(--text-xl);margin-top:0;}
.video-split-body > h3{font-size:var(--text-base);margin:var(--space-6) 0 var(--space-2);}
.video-split-body .btn{margin-top:var(--space-6);}
@media (max-width:860px){
  .video-split{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-6);}
  .video-split-media{max-width:min(260px,68vw);position:static;}
}

/* ---------- Banner CTA ---------- */
.cta-banner{
  background:var(--gold-100);border:1px solid var(--gold-500);border-radius:var(--radius-lg);
  padding:var(--space-12) var(--space-8);text-align:center;margin:var(--space-12) 0;
}
.cta-banner h2{margin-bottom:var(--space-3);}
.cta-banner p{color:var(--text-muted);font-size:var(--text-lg);margin-bottom:var(--space-6);}

/* ---------- FAQ (details/summary nativo) ---------- */
.faq-item{border-bottom:1px solid var(--line);padding:var(--space-4) 0;}
.faq-item summary{
  cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-4);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--gold-600);flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:var(--space-3);color:var(--text-muted);}

/* ---------- Servicios relacionados ---------- */
.related-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.related-list a{
  display:block;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1.1rem var(--space-4);text-decoration:none;color:var(--text-strong);
  font-size:var(--text-sm);font-weight:600;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.related-list a:hover{border-color:var(--gold-500);}
@media (max-width:800px){.related-list{grid-template-columns:1fr;}}

/* ---------- Página "Sobre mí" ---------- */
.about-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--space-12);align-items:start;}
.about-photo{
  aspect-ratio:4/5;background:var(--maroon-900);border-radius:var(--radius-lg);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--elev-2);
}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;}
@media (max-width:800px){.about-grid{grid-template-columns:1fr;}.about-photo{aspect-ratio:16/10;max-width:340px;}}

/* Columna de lectura: los textos largos de "Sobre nosotros" necesitan un ancho
   de línea cómodo, no los 1120px del contenedor. */
.narrow-col{max-width:72ch;margin-inline:auto;}

/* Credenciales y método, uno junto al otro: son dos lecturas distintas del
   mismo perfil, no una secuencia. */
.about-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12);align-items:start;}
.about-cols h2{font-size:var(--text-xl);margin-bottom:var(--space-4);}
@media (max-width:800px){.about-cols{grid-template-columns:1fr;gap:var(--space-8);}}

.about-role{color:var(--gold-600);font-weight:600;margin-bottom:var(--space-6);}
.about-close{text-align:center;}

/* Insignia del logo. El archivo es el lockup completo sobre fondo vinotinto y a
   este tamaño su texto sería ilegible, así que se amplía para dejar a la vista
   solo el monograma CR, como manda docs/marca.md. */
.about-logo{
  width:112px;height:112px;border-radius:50%;
  border:2px solid var(--gold-500);
  background-color:var(--maroon-900);
  background-image:url("../images/logo.png");
  /* Encuadre calculado sobre el archivo de 960x958: muestra el 2%-72% de la
     altura, así el monograma entra completo y con aire, y el texto del lockup
     (que empieza al 73%) queda fuera. */
  background-size:143%;
  background-position:76% 7%;
  background-repeat:no-repeat;
  display:inline-block;margin-bottom:var(--space-6);
}
@media (max-width:800px){.about-logo{width:88px;height:88px;}}

.founder-quote{
  margin:var(--space-12) 0;padding:var(--space-8);
  background:var(--gold-100);border-left:4px solid var(--gold-500);
  border-radius:var(--radius-md);
}
.founder-quote p{
  font-size:var(--text-lg);font-style:italic;color:var(--text-strong);
  margin-bottom:var(--space-3);
}
.founder-quote cite{
  font-style:normal;font-weight:700;font-size:var(--text-sm);color:var(--gold-600);
}

.credentials-list{list-style:none;padding:0;margin:var(--space-4) 0 0;}
.credentials-list li{
  display:flex;gap:var(--space-3);align-items:flex-start;padding:0.7rem 0;border-top:1px solid var(--line);font-size:var(--text-sm);
}
.credentials-list li:first-child{border-top:none;}
.credentials-list .mark{
  width:34px;height:34px;border-radius:50%;background:var(--maroon-900);color:var(--gold-500);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;
}

/* ---------- Página de contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
.contact-list{list-style:none;padding:0;margin:0 0 var(--space-6);}
.contact-list li{display:flex;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line);}
.contact-list li:first-child{border-top:none;}
.contact-list .ic{
  width:38px;height:38px;border-radius:50%;background:var(--gold-100);color:var(--gold-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-list strong{display:block;font-size:var(--text-sm);}
.contact-list span{display:block;color:var(--text-muted);font-size:var(--text-sm);}
.contact-list a{color:var(--text-strong);text-decoration:none;}
.contact-list a:hover{color:var(--gold-600);}

.map-frame{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-6);}
.map-frame iframe{display:block;width:100%;height:260px;border:0;}

form.contact-form{
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:var(--space-8);
}
.form-row{margin-bottom:1.1rem;}
.form-row label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-1);}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:0.7rem 0.85rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--text-base);background:var(--surface-base);color:var(--text-strong);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--gold-500);}
.form-row textarea{resize:vertical;min-height:110px;}
/* ---------- Selector de tipo de caso ----------
   Botones de opción disfrazados de pastillas. El <select> quedaba fuera de la
   paleta porque su lista desplegable la pinta el sistema operativo y ningún
   CSS la alcanza. */
.case-picker{border:none;padding:0;margin:0 0 1.1rem;}
.case-picker legend{
  padding:0;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-3);
}
.case-group-title{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold-600);
  margin:var(--space-4) 0 var(--space-2);
}
.case-group-title:first-of-type{margin-top:0;}
.case-options{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.case-options--suelto{margin-top:var(--space-4);}

.case-chip{display:inline-flex;cursor:pointer;}
/* El input sigue en el flujo y enfocable: ocultarlo con display:none lo sacaría
   del orden de tabulación y del alcance del teclado. */
.case-chip input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
}
.case-chip span{
  display:inline-block;padding:0.5rem 0.9rem;
  border:1px solid var(--line);border-radius:var(--radius-full);
  background:var(--surface-raised);color:var(--text-strong);
  font-size:var(--text-sm);line-height:1.3;
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.case-chip:hover span{border-color:var(--gold-500);}
.case-chip input:checked + span{
  background:var(--maroon-900);border-color:var(--maroon-900);color:var(--gold-500);
  font-weight:600;
}
.case-chip input:focus-visible + span{outline:3px solid var(--gold-500);outline-offset:2px;}

/* Selección en dos pasos (solo cuando main.js la activa). */
.case-cats{margin-bottom:var(--space-4);}
.case-cats .case-chip span{border-color:var(--gold-500);}
.is-enhanced .case-group{
  border-top:1px solid var(--line);padding-top:var(--space-4);
}
.is-enhanced .case-group-title{margin-top:0;}

/* La entrada de los servicios es lo único animado: opacidad y 8px de
   desplazamiento, escalonados, dentro de lo que fija el brief (nada de
   rebotes ni giros). Sin JavaScript no hay nada que revelar, por eso cuelga
   de .js-motion. */
@keyframes caso-entra{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}
}
.js-motion .is-enhanced .case-group:not([hidden]) .case-group-title,
.js-motion .is-enhanced .case-group:not([hidden]) .case-chip{
  animation:caso-entra var(--dur-base) var(--ease-out) both;
}
.js-motion .is-enhanced .case-group:not([hidden]) .case-chip:nth-child(1){animation-delay:40ms;}
.js-motion .is-enhanced .case-group:not([hidden]) .case-chip:nth-child(2){animation-delay:80ms;}
.js-motion .is-enhanced .case-group:not([hidden]) .case-chip:nth-child(3){animation-delay:120ms;}
.js-motion .is-enhanced .case-group:not([hidden]) .case-chip:nth-child(4){animation-delay:160ms;}

/* La pastilla marcada se distingue por una palomita, no solo por el color:
   quien no percibe bien el contraste igual ve cuál eligió. */
.case-chip input:checked + span::before{
  content:"✓";margin-right:var(--space-2);font-weight:700;
}
.case-chip:hover span{transform:translateY(-1px);}
.case-chip span{will-change:transform;}

/* Confirmación de lo elegido, para que no haya que volver a mirar arriba. */
.case-elegido{
  margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--text-muted);
}
.case-elegido strong{color:var(--maroon-900);}
.case-elegido[hidden]{display:none;}

@media (prefers-reduced-motion:reduce){
  .js-motion .is-enhanced .case-group:not([hidden]) .case-group-title,
  .js-motion .is-enhanced .case-group:not([hidden]) .case-chip{animation:none;}
  .case-chip:hover span{transform:none;}
}
.case-picker.falta-caso .case-cats .case-chip span{border-color:var(--bad);}
.case-picker.falta-caso::after{
  content:"Selecciona el tipo de caso para continuar.";
  display:block;margin-top:var(--space-2);
  font-size:var(--text-sm);color:var(--bad);
}

.form-note{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-3);}
.form-note a{color:var(--gold-600);}
.form-success{border:1px solid var(--good);border-radius:var(--radius-md);background:var(--surface-base);padding:var(--space-6);color:var(--text-strong);}
.form-success strong{color:var(--good);display:block;margin-bottom:var(--space-1);}
.form-error{border:1px solid var(--bad);border-radius:var(--radius-md);background:var(--surface-base);padding:var(--space-6);color:var(--text-strong);margin-top:var(--space-4);}
.form-error strong{color:var(--bad);display:block;margin-bottom:var(--space-1);}
.form-error a{color:var(--bad);}
.hp-field{position:absolute;left:-9999px;top:-9999px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-dark);color:var(--on-dark);padding:var(--space-12) 0 var(--space-6);margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-8);}
.footer-grid h4{
  color:var(--white);font-family:var(--font-body);font-size:var(--text-xs);
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-4);
}
.footer-grid ul{list-style:none;padding:0;margin:0;}
.footer-grid li{margin-bottom:0.55rem;font-size:var(--text-sm);}
.footer-grid a{color:var(--on-dark);text-decoration:none;transition:color var(--dur-fast) var(--ease-out);}
.footer-grid a:hover{color:var(--gold-500);}
.footer-brand-kicker{
  display:block;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-500);
  font-weight:400;margin-bottom:var(--space-1);
}
.footer-brand p{color:var(--on-dark-muted);font-size:var(--text-sm);max-width:34ch;}
.footer-bottom{
  border-top:1px solid var(--on-dark-line);padding-top:var(--space-6);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2) var(--space-6);
  font-size:var(--text-xs);color:var(--on-dark-muted);
}
.footer-bottom a{color:var(--on-dark-muted);transition:color var(--dur-fast) var(--ease-out);}
.footer-bottom a:hover{color:var(--gold-500);}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}.footer-grid .footer-brand{grid-column:1/-1;}}

/* ---------- Widget de WhatsApp ---------- */
.wa-widget{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:200;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);
}

/* Estado cerrado */
/* Verde real de WhatsApp con texto/icono en vinotinto, no blanco: blanco sobre
   #25D366 da 1.98:1 (falla AA); --maroon-900 sobre #25D366 da 9.56:1. */
.wa-widget-pill{
  display:inline-flex;align-items:center;gap:var(--space-3);
  background:var(--wa-green);color:var(--maroon-900);border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:var(--text-lg);letter-spacing:-0.01em;
  padding:1.15rem 2rem;border-radius:var(--radius-full);
  box-shadow:0 14px 34px rgba(0,0,0,0.32);
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
.wa-widget-pill:hover{background:#1fb85a;transform:translateY(-1px);}

/* Panel */
.wa-widget-panel{
  width:min(320px,calc(100vw - 2.4rem));
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 24px 60px rgba(28,10,26,0.42);
  background:var(--surface-raised);
}
.wa-widget-panel[hidden]{display:none;}

.wa-widget-head{
  background:var(--maroon-700);padding:var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
  border-bottom:2px solid var(--gold-500);
}
/* Sin marco: ni anillo dorado ni borde. */
.wa-widget-badge{
  width:52px;height:52px;border-radius:10px;flex-shrink:0;position:relative;
  overflow:hidden;background:var(--maroon-900);
}
.wa-widget-badge img{
  position:absolute;max-width:none;
  width:150%;height:150%;left:-36.5%;top:-9.6%;
}
.wa-widget-who{min-width:0;}
.wa-widget-who strong{display:block;color:var(--white);font-size:var(--text-sm);line-height:1.3;}
.wa-widget-who > span{display:block;color:var(--gold-500);font-size:var(--text-xs);line-height:1.4;}
.wa-widget-live{
  display:flex;align-items:center;gap:0.35rem;
  color:var(--on-dark-muted);font-size:0.64rem;margin-top:0.15rem;white-space:nowrap;
}
.wa-widget-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wa-green);}
.wa-widget-close{
  margin-left:auto;align-self:flex-start;background:transparent;border:none;
  color:var(--on-dark-muted);font-size:1.35rem;line-height:1;cursor:pointer;
  padding:var(--space-1);border-radius:var(--radius-sm);
}
.wa-widget-close:hover{color:var(--white);background:var(--on-dark-fill);}

.wa-widget-body{padding:var(--space-4);background:var(--surface-base);}
.wa-widget-bubble{
  background:var(--surface-raised);border-radius:var(--radius-md);
  border-top-left-radius:var(--radius-sm);
  padding:var(--space-4);font-size:var(--text-sm);color:var(--text-strong);
  margin:0 0 var(--space-3);box-shadow:var(--elev-1);
}
.wa-widget-free{
  display:flex;align-items:flex-start;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--text-muted);margin:0 0 var(--space-4);
}
.wa-widget-free::before{content:"✓";color:var(--good);font-weight:700;flex-shrink:0;}
.wa-widget-go{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--wa-green);color:var(--maroon-900);text-decoration:none;font-weight:700;
  font-size:var(--text-sm);padding:0.8rem var(--space-4);border-radius:var(--radius-full);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.wa-widget-go:hover{background:#1fb85a;}

/* ---------- Aparición al hacer scroll ---------- */
.js-motion .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.js-motion .reveal.is-visible{opacity:1;transform:none;}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .btn:hover,.service-card:hover,.wa-widget-pill:hover{transform:none;}
}