/* ============================================================
   Base compartida de los spikes de forjadelcodigo.cl
   Paleta Vino heredado (decidida). Retícula de 12 columnas
   según docs/layouts-spec.md §3.
   Mapeo a --global-palette de Kadence comentado por token.
   ============================================================ */
:root{
  /* Escala tipográfica: razón >=1.4 entre pasos */
  --fs-small:.875rem;                                  /* 14 */
  --fs-body:1.0625rem;                                 /* 17 */
  --fs-lead:1.375rem;                                  /* 22 */
  --fs-h3:1.5rem;                                      /* 24 */
  --fs-h2:2.125rem;                                    /* 34 */
  --fs-h1:clamp(2.5rem, 1.5rem + 3.6vw, 4rem);         /* 40-64 */
  --fs-numeral:2.75rem;

  --lh-snug:1.35; --lh-body:1.62;

  /* Espaciado en múltiplos de 4 */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  --measure:34rem;        /* 63 caracteres con Atkinson a 17px (medido) */
  --container:68rem;
  --border-w:1px;

  /* Atkinson Hyperlegible: Braille Institute, distincion maxima de caracteres.
     Bitter: slab serif, registro de oficio. Ninguna en la ban list de impeccable. */
  --ff-display:'Bitter', Georgia, serif;
  --ff-body:'Atkinson Hyperlegible Next','Atkinson Hyperlegible', system-ui, sans-serif;

  --dur:180ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Vidrio de la cabecera y del mega-menú, en tokens compartidos para que no
     vuelvan a divergir. Antes cada uno tenía sus propios valores: misma opacidad
     pero distinto color base (--bg contra --surface) y desenfoque de 14px contra
     30px, así que puestos uno junto al otro no parecían el mismo material.
     La opacidad alta no es decorativa: garantiza que el contraste del texto no
     dependa de lo que pase por detrás. */
  /* Tinta de la marca. Es un valor fijo y NO un token de paleta: el color del
     monograma y del nombre pertenece a la identidad, no al tema de la página.
     Difiere a propósito de --fg (#241C22 en vino), que lleva un sesgo vinoso;
     la marca es gris neutro. */
  --brand-ink:#242424;

  /* Radio de las fotografías. Vive en un token porque hay imágenes en las 15
     páginas y el valor tiene que ser uno solo. NO se aplica al pixel-art, que
     usa la clase `.px`: redondear un dibujo de píxeles contradice su estética. */
  --radius-img:8px;

  --glass-op:86%;
  /* Se unifica en el valor ALTO, no en un punto medio: el panel necesitaba 30px
     porque a 14px se alcanzaba a leer el titular de la portada por detrás y
     competía con el texto del menú. La barra con más desenfoque no pierde nada,
     solo difumina mejor lo que pasa por debajo. */
  --glass-blur:blur(30px) saturate(1.3);
  --glass-dur:240ms;
}

/* ---------- PALETA 1 · Vino heredado (continuidad de marca) ---------- */
:root, [data-palette="vino"]{
  --bg:#FAF8F7;            /* Kadence palette3 */
  --surface:#FFFFFF;
  --surface-alt:#F3EFF1;   /* Kadence palette4 */
  --fg:#241C22;            /* Kadence palette9 */
  --muted:#5C5058;         /* Kadence palette7 */
  --border:#E2DBDE;
  --border-strong:#8E7D85; /* controles — 3.66:1 */
  --accent:#6E2440;        /* Kadence palette1 — 9,97:1, sirve para todo */
  --accent-small:#6E2440;
  --accent-hover:#571C33;
  --accent-soft:#F0E6EA;
  --ring:#6E2440;
  --on-accent:#FFFFFF;
  /* Banda oscura de contrapunto (pie de página y prueba social) */
  --band:#241C22; --on-band:#F3EFF1;
  --on-band-soft:#C9BEC5;      /* texto secundario sobre la banda */
  --band-accent:#E8B4C4;    /* encabezados de columna del pie */
  --band-border:#7A6874;
}
/* ---------- PALETA 2 · Acero templado (de la propuesta descartada) ----------
   Neutro con sesgo FRÍO deliberado: es el color del acero, y hace que el
   crimson de fragua quede como el único color cálido de la página.
   Ojo: el crimson da 4,19:1 sobre el fondo, así que NO sirve para texto
   chico. Para eso está --accent-small (#B8331C, 5,49:1). */
[data-palette="acero"]{
  --bg:#F4F6F7; --surface:#FFFFFF; --surface-alt:#EAEEF0;
  --fg:#14181B; --muted:#5A646B;            /* 5,58:1 */
  --border:#DDE3E6; --border-strong:#7E8A91; /* 3,1:1 */
  --accent:#D73F24;                          /* 4,19:1 — relleno y texto grande */
  --accent-small:#B8331C;                    /* 5,49:1 — texto de 14px */
  --accent-hover:#B8331C; --accent-soft:#FBE7E2;
  --ring:#B8331C; --on-accent:#FFFFFF;
  /* Banda oscura de contrapunto (pie de página y prueba social) */
  --band:#14181B; --on-band:#F4F6F7;
  --on-band-soft:#C3CBD0;      /* texto secundario sobre la banda */
  --band-accent:#EC753A;    /* encabezados de columna del pie */
  --band-border:#4A545A;
}
/* ---------- PALETA 3 · Fragua clara (de la propuesta descartada) ----------
   El mismo crimson sobre un neutro CÁLIDO, con bronce como color
   secundario en vez del azul de temple. */
[data-palette="fragua"]{
  --bg:#F6F3EF; --surface:#FFFFFF; --surface-alt:#EFE9E2;
  --fg:#221C1A; --muted:#6B605B;            /* 5,5:1 */
  --border:#E4DDD6; --border-strong:#8E8177; /* 3,1:1 */
  --accent:#D73F24;                          /* 4,1:1 — relleno y texto grande */
  --accent-small:#B8331C;                    /* 5,38:1 — texto de 14px */
  --accent-hover:#B8331C; --accent-soft:#FBE7E2;
  --ring:#B8331C; --on-accent:#FFFFFF;
  /* Banda oscura de contrapunto (pie de página y prueba social) */
  --band:#221C1A; --on-band:#F6F3EF;
  --on-band-soft:#CBC2BA;      /* texto secundario sobre la banda */
  --band-accent:#EC753A;    /* encabezados de columna del pie */
  --band-border:#584C46;
}
/* ---------- PALETA 4 · Grafito y dorado ---------- */
[data-palette="grafito"]{
  --bg:#F9F9F8; --surface:#FFFFFF; --surface-alt:#F0F0EE;
  --fg:#1A1A19; --muted:#52524E;
  --border:#DEDEDA; --border-strong:#86867F;  /* 3.48:1 */
  --accent:#2E2E2C; --accent-small:#2E2E2C; --accent-hover:#151514; --accent-soft:#EDEBE4;
  --ring:#8A6D2F; --on-accent:#FFFFFF;
  --gold:#8A6D2F;
  /* Banda oscura de contrapunto (pie de página y prueba social) */
  --band:#1A1A19; --on-band:#F0F0EE;
  --on-band-soft:#C5C5C0;      /* texto secundario sobre la banda */
  --band-accent:#D9B87A;    /* encabezados de columna del pie */
  --band-border:#52524B;
}
/* ---------- PALETA 5 · Borgoña y crema ---------- */
[data-palette="borgona"]{
  --bg:#FBF7F2; --surface:#FFFFFF; --surface-alt:#F4EDE4;
  --fg:#231A18; --muted:#5B4F4A;
  --border:#E6DCD0; --border-strong:#95857B;  /* 3.33:1 */
  --accent:#7A2231; --accent-small:#7A2231; --accent-hover:#5F1A26; --accent-soft:#F2E4E3;
  --ring:#7A2231; --on-accent:#FFFFFF;
  /* Banda oscura de contrapunto (pie de página y prueba social) */
  --band:#231A18; --on-band:#F4EDE4;
  --on-band-soft:#CCC0B6;      /* texto secundario sobre la banda */
  --band-accent:#E8B4A0;    /* encabezados de columna del pie */
  --band-border:#584740;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ff-body); font-size:var(--fs-body); line-height:var(--lh-body);
  font-synthesis-weight:none;
}
h1,h2,h3{font-family:var(--ff-display); font-weight:600; letter-spacing:-.01em; margin:0; text-wrap:balance}
h1{font-size:var(--fs-h1); line-height:1.15; letter-spacing:-.018em}
h2{font-size:var(--fs-h2); line-height:var(--lh-snug)}
h3{font-size:var(--fs-h3); line-height:var(--lh-snug)}
p{margin:0; text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:1px}

/* El relleno del contenedor vive en --wrap-pad y no escrito a mano, porque las
   franjas que sangran una imagen hasta el borde del viewport necesitan restarlo
   para calcular su margen negativo. Cuando el valor estaba duplicado, esa cuenta
   quedaba desincronizada y la imagen se cortaba antes del borde. */
:root{ --wrap-pad:var(--s5) }
@media(min-width:60rem){ :root{ --wrap-pad:var(--s6) } }
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--wrap-pad)}

/* Deliberadamente NO existe clase de eyebrow (label pequeño en mayúsculas
   espaciadas sobre cada encabezado): es el tell más frecuente del diseño
   generado. La jerarquía la cargan encabezado, regla de sección y espaciado. */

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:var(--s3) var(--s5);
  font:inherit; font-weight:500; text-decoration:none;
  border:var(--border-w) solid transparent; border-radius:2px; cursor:pointer;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn--ghost{background:transparent; color:var(--fg); border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-alt); border-color:var(--fg)}

/* ---------- HEADER ---------- */
/* Sticky siempre. En las páginas con imagen de portada arranca transparente
   sobre ella y se vuelve sólido al primer scroll; el cambio de color de las
   letras y del logo va con transición para que no sea un salto. */
.site-head{
  position:sticky; top:0; z-index:40;
  padding-block:var(--s5);
  background:var(--bg);
  border-bottom:var(--border-w) solid var(--border);
  transition:background-color 240ms var(--ease), border-color 240ms var(--ease);
}
/* Translúcido con desenfoque cuando ya es sólido: deja ver que hay contenido
   pasando por debajo. Se aplica solo si el navegador soporta el desenfoque; sin
   él quedaría un fondo semitransparente sobre texto, que se lee mal.
   No es glassmorphism decorativo: la opacidad es alta (86%) y el desenfoque
   moderado, para que el contraste del menú no dependa de lo que pase detrás. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-head{
    background:color-mix(in srgb, var(--bg) var(--glass-op), transparent);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
  }
  /* Sobre la portada no se desenfoca: ahí manda el degradado propio. */
  .site-head[data-over]:not(.is-solid){-webkit-backdrop-filter:none; backdrop-filter:none}
}

/* Estado sobre la imagen: sin fondo, sin borde y todo en blanco.
   El degradado propio garantiza el contraste aunque la foto sea clara: no se
   confía en que la imagen sea oscura por sí sola. */
.site-head[data-over]:not(.is-solid){
  background:transparent; border-color:transparent;
}
.site-head[data-over]::before{
  content:""; position:absolute; inset:0 0 auto; height:180%;
  background:linear-gradient(to bottom, rgba(18,12,16,.78) 0%, rgba(18,12,16,.45) 55%, rgba(18,12,16,0) 100%);
  pointer-events:none; opacity:1;
  transition:opacity 240ms var(--ease);
}
.site-head[data-over].is-solid::before{opacity:0}
/* Solo la barra se eleva sobre el degradado. Antes esto era `> *`, que con
   mayor especificidad anulaba el position:absolute del panel y lo devolvia al
   flujo, que era justo el origen de los dos sintomas. */
.site-head[data-over] > .wrap{position:relative}

.site-head[data-over]:not(.is-solid) .brand,
.site-head[data-over]:not(.is-solid) .brand__name{color:#FFFFFF}
.site-head[data-over]:not(.is-solid) .brand__desc{color:rgba(255,255,255,.82); border-left-color:rgba(255,255,255,.34)}
/* Sobre la portada, los cuatro elementos del menú comparten tratamiento: 88% de
   blanco en reposo y blanco puro al apuntarlos o cuando son la página actual.
   El enlace de contacto iba antes a blanco puro siempre, y eso lo hacía saltar
   sobre sus vecinos justo donde el contraste ya es máximo. */
.site-head[data-over]:not(.is-solid) .nav__list a,
.site-head[data-over]:not(.is-solid) .nav__trigger,
.site-head[data-over]:not(.is-solid) .head__cta{color:rgba(255,255,255,.88)}
.site-head[data-over]:not(.is-solid) .nav__list a:hover,
.site-head[data-over]:not(.is-solid) .nav__trigger:hover,
.site-head[data-over]:not(.is-solid) .head__cta:hover,
.site-head[data-over]:not(.is-solid) .nav__list a[aria-current="page"],
.site-head[data-over]:not(.is-solid) .head__cta[aria-current="page"]{color:#FFFFFF}
.site-head[data-over]:not(.is-solid) .nav__slider{background:#FFFFFF}
.site-head[data-over]:not(.is-solid) .palswitch__btn{color:rgba(255,255,255,.88)}
.site-head[data-over]:not(.is-solid) .palswitch__btn:hover{color:#FFFFFF; border-color:rgba(255,255,255,.5)}
.brand, .brand__name, .brand__desc, .nav__list a, .nav__trigger, .head__cta, .palswitch__btn{
  transition:color 240ms var(--ease), border-color 240ms var(--ease);
}

/* La portada se mete debajo del header, que flota encima. --head-h la mide
   src/scripts/sitio.js: fijarla a un número parte el layout apenas cambia el
   tamaño de letra o el ancho. */
.has-over-head .hero{margin-top:calc(-1 * var(--head-h, 88px))}
.has-over-head .hero__in{padding-top:calc(var(--s9) + var(--head-h, 88px))}

.site-head__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s4) var(--s7); flex-wrap:wrap}
/* La navegación y el enlace de contacto van juntos a la derecha: si el enlace
   queda como tercer hijo del flex, baja solo a una segunda fila. */
/* position:relative porque el indicador deslizante se posiciona respecto de
   esta caja: tiene que alcanzar tanto los elementos de la lista como el enlace
   de contacto, que es hermano de <nav>. */
.head__end{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; position:relative}
/* Aire extra entre la marca y el menú: con el gap del nav quedaban tan cerca
   que "Diseño y Desarrollo web" se leía como un elemento más de navegación. */
@media(min-width:75rem){ .head__end{margin-left:var(--s6)} }
/* El monograma va en línea y hereda `currentColor`, así que el color de la
   marca se declara una sola vez acá y el símbolo lo sigue. */
.brand{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; color:var(--brand-ink); text-decoration:none}
.brand__mark{width:40px; height:40px; flex:none; display:block}
.brand__name{font-family:var(--ff-display); font-size:1.25rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap}
.brand__desc{
  font-family:var(--ff-body); font-size:var(--fs-small);
  font-weight:400; color:var(--muted); letter-spacing:0;
  flex-basis:100%;
}
@media(min-width:48rem){ .brand__desc{flex-basis:auto} }
@media(min-width:64rem){
  .brand__desc{
    padding-left:var(--s4);
    border-left:var(--border-w) solid var(--border);
  }
}

/* El contenido del header en una fila mide ~1085px con la separación extra
   entre marca y menú, así que el nowrap recién cabe pasados los 1200px. Antes
   estaba en 64rem (1024px) y provocaba scroll horizontal: entre 1024 y 1200
   el header envuelve en dos filas, que es correcto. */
@media(min-width:75rem){
  .site-head__in{flex-wrap:nowrap}
  .brand{flex-wrap:nowrap; flex:0 1 auto}
  .head__end{flex-wrap:nowrap; flex:0 0 auto}
  /* sin esto los textos se encogen y parten palabras en dos lineas */
  .brand__name, .brand__desc{white-space:nowrap}
  .nav__list a{white-space:nowrap}
}

/* ---------- NAVEGACIÓN CON INDICADOR DESLIZANTE ----------
   Reemplaza el indicador anterior (negrita + color), que leía anticuado.
   El indicador es una barra del color de acento que se desliza al elemento
   con el puntero encima y vuelve al de la página actual al salir.
   Posición y ancho se calculan en src/scripts/sitio.js.
   Sin JS la barra no aparece y el elemento activo se marca con el subrayado
   de respaldo: la navegación nunca depende de que el script corra. */
.nav{position:relative}
.nav__list{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); list-style:none; margin:0; padding:0; font-size:var(--fs-small)}
@media(min-width:60rem){ .nav__list{gap:var(--s5)} }
/* inline-flex con min-height 44: como inline-block quedaban en 38,7px de alto,
   dos cosas fallaban a la vez. Se veian 2,7px mas arriba que el boton del panel,
   el enlace de contacto y el icono de paleta, que si son de 44; y ademas el
   area tactil quedaba bajo el minimo de 44px. */
.nav__list a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; color:var(--muted);
  padding-block:var(--s2); transition:color var(--dur) var(--ease);
}
.nav__list a:hover{color:var(--fg)}
.nav__list a[aria-current="page"]{color:var(--fg)}
/* respaldo sin JS: la marca de página activa nunca depende del script */
.head__end:not([data-slider]) .nav__list a[aria-current="page"]{
  box-shadow:inset 0 -2px 0 var(--accent);
}
.head__end:not([data-slider]) .head__cta[aria-current="page"]{
  box-shadow:inset 0 -2px 0 var(--accent);
}
/* El indicador ahora vive en .head__end y no en .nav, porque el enlace de
   contacto es hermano de la navegación y quedaba fuera de su alcance: al pasar
   por él la barra se encogía en su sitio en vez de seguirlo, y esa era la
   "transición distinta del cuarto elemento".

   Las tres propiedades comparten duración y curva a propósito. Un
   desplazamiento con tiempos distintos por propiedad, o con retardos según la
   dirección, se lee irregular: la barra parece estirarse y frenar. Mismo tiempo
   y misma curva dan un solo movimiento continuo. */
.nav__slider{
  position:absolute; bottom:-2px; left:0; height:2px; width:0;
  background:var(--accent); border-radius:2px;
  opacity:0; pointer-events:none;
  transform:translateX(0);
  transition:transform .28s var(--ease), width .28s var(--ease), opacity .28s var(--ease);
}
/* En pantallas chicas la lista se envuelve en varias filas y una barra que se
   desliza en horizontal deja de tener sentido: se apaga y vuelve el subrayado.
   El subrayado va por box-shadow y no por border-bottom: el borde suma 2px a la
   caja y descuadra el texto un pixel respecto de sus vecinos. */
@media(max-width:47.99rem){
  .nav__slider{display:none}
  .nav__list a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
  .head__cta[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
}
@media (prefers-reduced-motion: reduce){
  .nav__slider{transition:opacity .01ms}
}

/* Enlace de contacto: un elemento más del menú, con el mismo peso y el mismo
   color que sus vecinos.

   Antes iba en negrita y con el color de acento. Se quitó porque esos dos
   recursos ya significan otra cosa en una barra de navegación: peso y color
   son la convención de "está usted aquí", y desde que el enlace puede llevar
   `aria-current` el mismo recurso codificaba dos estados distintos a la vez.
   Además destacaba la vía secundaria: la conversión de este sitio es WhatsApp,
   que ya tiene botón propio en la portada, en el cierre, en el pie y en el
   mega-menú.

   Sin `border-bottom`: con box-sizing:border-box y min-height:44px, un borde de
   2px reduce la caja de contenido a 42px y el texto quedaba centrado 1px más
   arriba que el de sus tres vecinos. El subrayado lo pone el indicador. */
.head__cta{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-small); font-weight:400; color:var(--muted);
  text-decoration:none;
}
.head__cta:hover{color:var(--fg)}
.head__cta[aria-current="page"]{color:var(--fg)}

/* ---------- ENCABEZADO DE PÁGINA ---------- */
.page-head{padding-block:var(--s8) var(--s7)}
.page-head h1{max-width:20ch}
.page-head__lead{font-size:var(--fs-lead); line-height:1.45; color:var(--muted); max-width:var(--measure); margin-top:var(--s5)}
.page-head__grid{display:grid; gap:var(--s6)}
/* min-width:0 en los items: por defecto un grid item usa min-width:auto y se
   expande al ancho minimo de su contenido, lo que desbordaba el viewport a 320px */
.page-head__grid > *{min-width:0}
@media(min-width:56rem){
  .page-head__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s8); align-items:start}
}

/* ---------- SECCIÓN GENÉRICA ---------- */
.sec{padding-block:var(--s8); border-top:var(--border-w) solid var(--border)}
.sec__head{max-width:var(--measure)}
.sec__lead{color:var(--muted); margin-top:var(--s4)}

/* ---------- MARCO DE FOTOGRAFÍA PENDIENTE ----------
   En produccion se reemplaza por la imagen real. */
.photo-slot{
  aspect-ratio:3/2; width:100%;   /* las fotos reales son 1170x780 = 3:2 */
  width:100%;
  background:var(--surface-alt);
  border:var(--border-w) dashed var(--border-strong);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s4); gap:var(--s1);
}
.photo-slot--tall{aspect-ratio:4/5}
.photo-slot__label{font-size:var(--fs-small); font-weight:600; color:var(--fg)}
.photo-slot__hint{font-size:var(--fs-small); color:var(--muted)}

/* ---------- LISTA DE CARACTERÍSTICAS EN 3 COLUMNAS ---------- */
.feats{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:0}
@media(min-width:48rem){ .feats{grid-template-columns:1fr 1fr; column-gap:var(--s7)} }
@media(min-width:64rem){ .feats{grid-template-columns:repeat(3,1fr)} }
.feats li{padding-block:var(--s4); border-top:var(--border-w) solid var(--border); display:grid; gap:var(--s1)}
.feats__what{font-weight:600}
.feats__why{font-size:var(--fs-small); color:var(--muted)}
.feats__sub{font-size:var(--fs-h3); margin-top:var(--s7)}

/* ---------- BANDA OSCURA DE CONTRAPUNTO ---------- */
.band{background:var(--band); color:var(--on-band); padding-block:var(--s8)}
.band h2{color:var(--on-band)}
.band__lead{color:#C9BEC5; margin-top:var(--s4); max-width:var(--measure)}  /* 7,4:1 sobre band */

/* ---------- CIERRE ---------- */
/* Cierre sobre fotografía. Queda entre dos bandas oscuras —la de trabajos y el
   pie— así que la textura de la foto es lo que lo distingue de ellas; el color
   plano ya no alcanza. */
.closing{padding-block:var(--s8); border-top:var(--border-w) solid var(--border)}
/* El tratamiento oscuro es solo del cierre que lleva fotografía —hoy el home—.
   Aplicado a todos, las páginas sin foto quedaban con un bloque oscuro plano
   pegado al pie, que es del mismo color exacto, y los dos se fundían en uno. */
.closing:has(.closing__media){
  position:relative; isolation:isolate;
  padding-block:var(--s9); background:var(--band); color:var(--on-band);
  border-top:0;
}
.closing:has(.closing__media) h2{color:#FFFFFF}
.closing:has(.closing__media) .closing__body{color:var(--on-band-soft)}
.closing__media{position:absolute; inset:0; z-index:-1; overflow:hidden}
.closing__media img{width:100%; height:100%; object-fit:cover; display:block}
/* En móvil el texto ocupa todo el ancho, así que el velo es parejo. */
.closing__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,12,16,.88), rgba(18,12,16,.92));
}
/* Desde 56rem el texto termina cerca del 52% del ancho —medido a 1280 y a
   1680—, así que el velo se mantiene denso hasta ahí y se abre rápido después.
   Con el corte anterior en 42% seguía cubriendo la mano cuando ya no hacía
   falta, y esa mano es lo único que la fotografía aporta. */
@media(min-width:56rem){
  .closing__media::after{
    background:linear-gradient(to right,
      rgba(18,12,16,.93) 0%,
      rgba(18,12,16,.88) 40%,
      rgba(18,12,16,.80) 54%,
      rgba(18,12,16,.30) 78%,
      rgba(18,12,16,.12) 100%);
  }
}
/* El botón fantasma sobre la fotografía: su color por defecto es la tinta
   oscura del sitio, que sobre este fondo quedaba ilegible. Mismo tratamiento
   que en la portada. */
.closing:has(.closing__media) .btn--ghost{color:#FFFFFF; border-color:rgba(255,255,255,.55)}
.closing:has(.closing__media) .btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#FFFFFF}
.closing .wrap{position:relative}
.closing__grid{display:grid; gap:var(--s6)}
.closing__grid > *{min-width:0}
@media(min-width:56rem){
  .closing__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s8); align-items:start}
  /* Sin lista de datos al lado, la segunda columna quedaba como un hueco. En el
     home no molesta porque ahí va la fotografía de fondo; en el resto sí. */
  .closing__grid:not(:has(.datalist)){grid-template-columns:minmax(0,7fr)}
}
.closing h2{max-width:24ch}
.closing__body{color:var(--muted); margin-top:var(--s4); max-width:var(--measure)}
.closing__ctas{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

/* ---------- FICHA DE DATOS CON REGLAS ---------- */
.datalist{margin:0; padding:0; list-style:none; font-size:var(--fs-small)}
.datalist div{
  display:flex; justify-content:space-between; gap:var(--s4);
  padding-block:var(--s3); border-bottom:var(--border-w) solid var(--border);
}
.datalist dt{color:var(--muted)}
.datalist dd{margin:0; font-weight:500; text-align:right}
.datalist a{text-decoration:none; color:var(--accent-small)}  /* 14px: exige el token chico */
.datalist a:hover{text-decoration:underline; text-underline-offset:3px}
.datalist--strong{font-size:var(--fs-body)}
.datalist--strong div{padding-block:var(--s4)}

/* ---------- PIE DE PÁGINA ----------
   Sobre la banda oscura. Cuatro columnas: marca, servicio, trabajos y contacto,
   con la promesa de propiedad arriba y la línea legal abajo. */
/* Sin `margin-top`: ese margen dejaba ver el fondo claro del body entre el
   cierre y el pie. No se notaba mientras el cierre también era claro; con la
   fotografía de fondo aparecía como una franja blanca entre dos bloques
   oscuros. La separación la da el relleno propio del pie, que ya la tenía. */
.site-foot{background:var(--band); color:var(--on-band); padding-block:var(--s8) var(--s6)}
.site-foot__in{max-width:var(--container); margin-inline:auto; padding-inline:var(--s5)}
@media(min-width:60rem){ .site-foot__in{padding-inline:var(--s6)} }


.foot-cols{display:grid; gap:var(--s6)}
.foot-cols > *{min-width:0}
@media(min-width:36rem){ .foot-cols{grid-template-columns:1fr 1fr; gap:var(--s7) var(--s6)} }
/* La última columna va más ancha: contiene los dos canales en fila, y con el
   reparto parejo anterior no cabían y se apilaban. */
@media(min-width:60rem){ .foot-cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr); gap:var(--s7)} }
.foot-brand__link{
  display:flex; align-items:center; gap:var(--s3);
  color:var(--on-band); text-decoration:none;
  font-family:var(--ff-display); font-size:1.125rem; font-weight:600; letter-spacing:-.01em;
}
.foot-brand__link .brand__mark{width:34px; height:34px}
.foot-brand p{font-size:var(--fs-small); color:var(--on-band-soft); margin-top:var(--s4); max-width:34ch}
/* En fila y separados del bloque de enlaces de arriba por una regla: son otro
   tipo de contacto —canales— y sin la separación se leían como dos ítems más
   de la misma lista. Caben en horizontal desde que el enlace de WhatsApp dejó
   de arrastrar el número.
   El prefijo `.foot-col` no es decoración: sin él estas reglas pierden contra
   `.foot-col ul` y `.foot-col a`, que están más abajo con la misma o más
   especificidad. Su `padding:0` anulaba el aire y los canales quedaban pegados
   a la regla. */
.foot-col ul.foot-social{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  /* Este margen colapsa con el del último <li> de la lista de arriba, así que
     de los 16 mandan 16, no 16+8; sumados a los 8 que deja la caja del enlace
     dan 24 de aire sobre la regla. Debajo quedan otros 24: 12 de padding más
     los 12 que el enlace de 44px reparte alrededor del icono de 20. */
  margin-top:var(--s4); padding:var(--s3) 0 0;
  border-top:var(--border-w) solid var(--band-border);
  list-style:none;
}
.foot-col ul.foot-social li{margin-bottom:0}
.foot-col .foot-social a{
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:44px; padding-block:0;
  /* Del mismo cuerpo que los enlaces de arriba: son la misma columna. */
  font-size:var(--fs-small); color:var(--on-band); text-decoration:none;
  white-space:nowrap;
}
/* El icono no debe quedar más chico que el texto que acompaña. */
.foot-social svg{flex:none}
.foot-col .foot-social a:hover{color:var(--band-accent); text-decoration:none}
.foot-col h3{
  font-family:var(--ff-body); font-size:var(--fs-small); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--band-accent);
  margin-bottom:var(--s4);
}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:var(--s2)}
.foot-col a{
  display:inline-block; min-height:32px; padding-block:var(--s1);
  color:var(--on-band-soft); text-decoration:none; font-size:var(--fs-small);
}
.foot-col a:hover{color:var(--on-band); text-decoration:underline; text-underline-offset:3px}
/* El enlace al indice se separa de los cuatro sitios externos que tiene encima:
   es de otra naturaleza y sin la regla se leia como un quinto cliente. */

.foot-legal{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4) var(--s5); flex-wrap:wrap;
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:var(--border-w) solid var(--band-border);
}
.foot-legal p{font-size:var(--fs-small); color:var(--on-band-soft)}
.foot-legal ul{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5); list-style:none; margin:0; padding:0}
.foot-legal a{color:var(--on-band-soft); text-decoration:none; font-size:var(--fs-small); display:inline-block; min-height:32px; padding-block:var(--s1)}
.foot-legal a:hover{color:var(--on-band); text-decoration:underline; text-underline-offset:3px}

/* ---------- IMÁGENES REALES ----------
   Siempre con width/height o aspect-ratio declarados: sin eso la carga
   provoca salto de maquetación. */
.img{display:block; width:100%; height:auto; object-fit:cover; background:var(--surface-alt); border-radius:var(--radius-img)}
.img--3x2{aspect-ratio:3/2}
.img--4x3{aspect-ratio:4/3}
.img--16x9{aspect-ratio:16/9}
figure{margin:0}
figcaption{font-size:var(--fs-small); color:var(--muted); margin-top:var(--s3)}

/* ---------- PIXEL-ART ----------
   image-rendering:pixelated es obligatorio: sin eso los 64px se
   interpolan al escalar y el pixel-art se ve borroso, que es
   exactamente lo que lo hace parecer un descuido en vez de una decisión. */
.px{image-rendering:pixelated; display:block; flex:none}

/* Lista de características con icono pixel-art */
.feats--icon li{display:grid; grid-template-columns:34px 1fr; gap:var(--s2) var(--s4); align-items:start}
.feats--icon li > .px{grid-row:span 2; margin-top:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ============================================================
   CONMUTADOR DE PALETA — vive dentro del navbar, detrás de un icono.
   Instrumento del spike; en producción no va.
   ============================================================ */
.palswitch{position:relative}
.palswitch__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:none; border:var(--border-w) solid transparent; border-radius:2px;
  color:var(--muted); cursor:pointer;
}
.palswitch__btn:hover{color:var(--fg); border-color:var(--border)}
.palswitch__btn[aria-expanded="true"]{color:var(--fg); border-color:var(--border-strong)}
.palswitch__menu{
  position:absolute; right:0; top:calc(100% + var(--s2)); z-index:60;
  min-width:15rem; padding:var(--s3);
  background:var(--surface); color:var(--fg);
  border:var(--border-w) solid var(--border); border-radius:2px;
  box-shadow:0 12px 24px -16px rgba(36,28,34,.45);
}
.palswitch__menu[hidden]{display:none}
.swatches{display:grid; gap:var(--s1); list-style:none; margin:0; padding:0}
.swatch{
  display:flex; align-items:center; gap:var(--s3); width:100%;
  min-height:44px; padding:var(--s2) var(--s3);
  background:none; color:var(--fg);
  border:var(--border-w) solid transparent; border-radius:2px;
  font:inherit; font-size:var(--fs-small); text-align:left; cursor:pointer;
}
.swatch:hover{background:var(--surface-alt)}
.swatch[aria-pressed="true"]{border-color:var(--fg); font-weight:600}
.swatch__dot{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.22); flex:none}

/* ---------- AVISO DE BORRADOR ----------
   Para paginas que describen servicios que todavia no estan definidos. Se ve
   sin ambiguedad para que nadie la publique por error. */
.draft{
  background:var(--accent-soft); border-bottom:2px solid var(--accent);
  padding-block:var(--s4);
}
.draft__in{max-width:var(--container); margin-inline:auto; padding-inline:var(--s5); display:flex; gap:var(--s3); align-items:flex-start}
@media(min-width:60rem){ .draft__in{padding-inline:var(--s6)} }
.draft__tag{
  flex:none; font-size:var(--fs-small); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-accent); background:var(--accent);
  padding:var(--s1) var(--s3); border-radius:2px;
}
.draft__text{font-size:var(--fs-small); color:var(--fg)}

/* Lista de decisiones pendientes */
.todo{margin-top:var(--s6); border-top:2px solid var(--accent); padding-top:var(--s5)}
.todo h2{font-size:var(--fs-h3)}
.todo ul{list-style:none; margin:var(--s4) 0 0; padding:0}
.todo li{
  padding-block:var(--s3); border-bottom:var(--border-w) solid var(--border);
  font-size:var(--fs-small); color:var(--muted); display:grid; gap:var(--s1);
}
.todo strong{color:var(--fg); font-weight:600}

/* ============================================================
   MEGA-MENÚ
   Un elemento del menú abre un panel de ancho completo con el mapa del sitio.
   Se abre con clic (no con hover): el hover deja fuera al teclado y al táctil,
   y en táctil provoca el clásico "primer toque abre, segundo navega" que
   confunde.
   ============================================================ */
.nav__item--panel{position:relative}
.nav__trigger{
  display:inline-flex; align-items:center; gap:var(--s2);
  background:none; border:0; padding:var(--s2) 0; margin:0;
  font:inherit; font-size:var(--fs-small); color:var(--muted);
  cursor:pointer; min-height:44px;
  transition:color var(--dur) var(--ease);
}
.nav__trigger:hover{color:var(--fg)}
/* Sin `font-weight:600` acá: el cambio de peso ensanchaba el botón 3px al
   abrirse y empujaba el resto de la barra. El estado abierto ya se distingue
   por el color y por el chevron invertido. */
.nav__trigger[aria-expanded="true"]{color:var(--fg)}
.nav__chev{flex:none; transition:transform var(--dur) var(--ease)}
.nav__trigger[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}

/* El panel FLOTA: posicionado respecto de la cabecera y fuera del flujo.
   Cuando estaba dentro del flujo, al abrirse la cabecera crecía y pasaban dos
   cosas: el degradado del estado transparente se estiraba con ella y aparecía
   una banda gris, y el desplazamiento negativo de la portada (calculado con la
   cabecera cerrada) dejaba de calzar, así que el contenido de abajo se corría.
   Flotando, la altura de la cabecera no cambia y nada de eso ocurre. */
.mega{
  /* fixed y FUERA del <header>: la cabecera lleva su propio backdrop-filter, y
     eso la convierte en raiz de fondo para sus descendientes. Con el panel
     dentro, su desenfoque se aplicaba al fondo de la cabecera (vacio) en vez de
     a la pagina, asi que el titular de la portada se leia nitido detras. */
  position:fixed; top:var(--head-h, 88px); left:0; right:0; z-index:39;
  /* Sin `border-top`: el borde inferior de la cabecera ya está justo ahí, y los
     dos juntos daban una línea de 2px que se leía como una costura entre dos
     piezas en vez del límite de una sola superficie. */
  background:var(--bg);
  box-shadow:0 12px 24px -18px rgba(36,28,34,.5);
  /* Aparece y desaparece en el mismo tiempo que la cabecera cambia de estado.
     Antes el panel no tenía transición: se mostraba de golpe mientras la barra
     tardaba 240ms en volverse sólida, y ese desfase se alcanzaba a notar. */
  opacity:0;
  transition:opacity var(--glass-dur) var(--ease);
  /* Si el panel fuera más alto que la pantalla (caso móvil, donde es una lista
     larga), se desplaza dentro de sí mismo en vez de quedar inalcanzable. */
  max-height:calc(100dvh - var(--head-h, 88px));
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Mismo vidrio que la cabecera, por tokens: mismo color base, misma opacidad y
   mismo desenfoque. Antes cada uno tenía sus propios valores y, puestos uno
   junto al otro, no parecían el mismo material. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mega{
    background:color-mix(in srgb, var(--bg) var(--glass-op), transparent);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
  }
}
.mega.is-open{opacity:1}
.mega[hidden]{display:none}
@media (prefers-reduced-motion: reduce){
  .mega{transition:opacity .01ms}
}
.mega__in{
  max-width:var(--container); margin-inline:auto;
  padding:var(--s7) var(--s5) var(--s6);
  display:grid; gap:var(--s6);
}
@media(min-width:60rem){ .mega__in{padding-inline:var(--s6)} }
@media(min-width:52rem){ .mega__in{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7)} }
@media(min-width:75rem){ .mega__in{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr)} }
.mega__in > *{min-width:0}

.mega__col h3{
  font-family:var(--ff-body); font-size:var(--fs-small); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-small);
  padding-bottom:var(--s3); border-bottom:2px solid var(--fg);
}
.mega__col ul{list-style:none; margin:var(--s3) 0 0; padding:0}
.mega__col li + li{margin-top:var(--s1)}
.mega__link{
  display:block; padding-block:var(--s3); min-height:44px;
  color:var(--fg); text-decoration:none; font-size:var(--fs-body);
  border-bottom:var(--border-w) solid transparent;
}
.mega__link:hover{color:var(--accent-small); border-bottom-color:var(--border)}
.mega__link span{display:block; font-size:var(--fs-small); color:var(--muted); margin-top:2px}
.mega__link:hover span{color:var(--muted)}
.mega__draft{
  display:inline-block; margin-left:var(--s2); font-size:var(--fs-small);
  font-weight:600; color:var(--accent-small);
}

/* Tarjeta destacada de la última columna */
.mega__card{
  border:var(--border-w) solid var(--accent); border-radius:2px;
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.mega__card h3{
  font-family:var(--ff-display); font-size:var(--fs-h3); font-weight:600;
  text-transform:none; letter-spacing:-.01em; color:var(--fg);
  padding:0; border:0;
}
.mega__card p{font-size:var(--fs-small); color:var(--muted)}
.mega__card a{
  margin-top:auto; display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; font-size:var(--fs-small); font-weight:600;
  color:var(--accent-small); text-decoration:none;
  border-bottom:2px solid transparent; align-self:flex-start;
}
.mega__card a:hover{border-bottom-color:var(--accent-small)}

/* Bajo 52rem el panel es una lista plana: una rejilla de cuatro columnas no
   tiene forma móvil, así que se apila y se quita la sombra. */
@media(max-width:51.99rem){
  .mega{box-shadow:none}
  .mega__in{padding-block:var(--s5)}
  .mega__card{border-color:var(--border-strong)}
}

/* ============================================================
   FORMULARIO
   Etiquetas siempre visibles, nunca solo el texto de ejemplo dentro del campo:
   al escribir, el texto de ejemplo desaparece y el visitante deja de saber qué
   iba ahí. Tipos semánticos (email, tel) para que el teclado del celular
   aparezca correcto, y autocompletado para que el navegador ofrezca los datos.
   ============================================================ */
.form{display:grid; gap:var(--s5)}
.field{display:grid; gap:var(--s2)}
.field > label{font-weight:600; font-size:var(--fs-small)}
.field__hint{font-size:var(--fs-small); color:var(--muted)}
.field__opt{font-weight:400; color:var(--muted)}
.field input, .field select, .field textarea{
  font:inherit; font-size:var(--fs-body); color:var(--fg);
  background:var(--surface);
  border:var(--border-w) solid var(--border-strong); border-radius:2px;
  padding:var(--s3) var(--s4); min-height:48px; width:100%;
  transition:border-color var(--dur) var(--ease);
}
.field textarea{min-height:8rem; resize:vertical; line-height:var(--lh-body)}
.field input:hover, .field select:hover, .field textarea:hover{border-color:var(--fg)}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.field input::placeholder, .field textarea::placeholder{color:var(--muted); opacity:1}
/* El navegador marca el campo inválido solo después de intentar enviar, no
   mientras se escribe: corregir a mitad de palabra es hostil. */
.form:invalid .field input:user-invalid,
.form:invalid .field textarea:user-invalid{border-color:#8A1F2C}
.field__error{font-size:var(--fs-small); color:#8A1F2C; display:none}
.field input:user-invalid ~ .field__error,
.field textarea:user-invalid ~ .field__error{display:block}
.form__actions{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; margin-top:var(--s2)}
.form__legal{font-size:var(--fs-small); color:var(--muted); max-width:44ch}

/* ---------- CANALES DIRECTOS ---------- */
.channels{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:0}
.channels li{border-top:var(--border-w) solid var(--border)}
.channels a, .channels .channel--plain{
  display:grid; grid-template-columns:34px 1fr; gap:var(--s2) var(--s4);
  align-items:center; padding-block:var(--s4);
  text-decoration:none; color:var(--fg); min-height:44px;
}
.channels a:hover .channel__name{color:var(--accent-small)}
.channels .px, .channels svg{grid-row:span 2; align-self:center}
.channel__name{font-weight:600}
.channel__val{font-size:var(--fs-small); color:var(--muted); grid-column:2}

/* ---------- QUÉ PASA DESPUÉS ---------- */
.after{list-style:none; margin:var(--s6) 0 0; padding:0; counter-reset:a}
.after li{
  counter-increment:a; display:grid; gap:var(--s2) var(--s5); align-items:baseline;
  padding-block:var(--s4); border-top:var(--border-w) solid var(--border);
}
@media(min-width:44rem){
  .after li{grid-template-columns:2.5rem minmax(0,1fr)}
  /* strong y span van los dos a la segunda columna: sin esto el span caia en
     la columna del numero, de 2.5rem, y el texto se leia en vertical. */
  .after li > strong, .after li > span{grid-column:2}
}
.after li::before{
  content:counter(a); font-family:var(--ff-display); font-size:var(--fs-h3);
  font-weight:400; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.2;
}
.after strong{display:block; margin-bottom:var(--s1)}
.after span{color:var(--muted); font-size:var(--fs-small)}

/* ============================================================
   PÁGINAS LEGALES
   Texto corrido con numeración de apartados. Registro sobrio y medida de línea
   corta: son documentos para leer, no para escanear.
   ============================================================ */
.legal-doc{padding-block:var(--s7) var(--s8)}
.legal-doc__meta{
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6);
  padding-block:var(--s4); margin-bottom:var(--s7);
  border-top:var(--border-w) solid var(--border);
  border-bottom:var(--border-w) solid var(--border);
  font-size:var(--fs-small); color:var(--muted);
}
.legal-doc__meta strong{color:var(--fg); font-weight:600}
.legal-doc section{counter-increment:apartado; padding-block:var(--s6); border-bottom:var(--border-w) solid var(--border)}
.legal-doc{counter-reset:apartado}
.legal-doc section > h2{
  display:grid; gap:var(--s2) var(--s5); align-items:baseline;
  font-size:var(--fs-h3);
}
@media(min-width:44rem){ .legal-doc section > h2{grid-template-columns:2.5rem minmax(0,1fr)} }
.legal-doc section > h2::before{
  content:counter(apartado);
  font-family:var(--ff-display); font-weight:400; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.legal-doc section > *:not(h2){max-width:68ch}
@media(min-width:44rem){ .legal-doc section > *:not(h2){margin-left:calc(2.5rem + var(--s5))} }
.legal-doc p{color:var(--muted); margin-top:var(--s4)}
.legal-doc strong{color:var(--fg); font-weight:600}
.legal-doc ul{list-style:none; margin:var(--s4) 0 0; padding:0}
.legal-doc li{
  padding-block:var(--s3); border-top:var(--border-w) solid var(--border);
  color:var(--muted);
}
.legal-doc li::before{content:"— "; color:var(--accent)}

/* Aviso de revisión legal pendiente */
.legal-warn{
  background:var(--accent-soft); border-bottom:2px solid var(--accent);
  padding-block:var(--s4);
}
.legal-warn__in{max-width:var(--container); margin-inline:auto; padding-inline:var(--s5); display:flex; gap:var(--s3); align-items:flex-start}
@media(min-width:60rem){ .legal-warn__in{padding-inline:var(--s6)} }
.legal-warn__tag{
  flex:none; font-size:var(--fs-small); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-accent); background:var(--accent);
  padding:var(--s1) var(--s3); border-radius:2px;
}
.legal-warn__text{font-size:var(--fs-small); color:var(--fg)}

/* ============================================================
   PREGUNTAS FRECUENTES
   Acordeón con <details> nativo: sin JavaScript, funciona con teclado y con
   lector de pantalla sin que haya que programar nada, y el navegador puede
   encontrar texto dentro de los bloques cerrados.
   ============================================================ */
.faq{padding-block:var(--s7) var(--s8)}
.faq__group + .faq__group{margin-top:var(--s8)}
.faq__group > h2{
  font-size:var(--fs-h2); padding-bottom:var(--s4);
  border-bottom:2px solid var(--fg);
}
.faq__group > p{color:var(--muted); margin-top:var(--s4); max-width:var(--measure)}
.faq__list{margin-top:var(--s3)}
.faq__item{border-bottom:var(--border-w) solid var(--border)}
.faq__item summary{
  display:flex; align-items:flex-start; gap:var(--s4);
  padding-block:var(--s4); min-height:44px;
  /* el padding derecho absorbe la diagonal de la flecha: es un cuadrado de 10px
     rotado 45 grados, asi que ocupa ~14px de ancho real y desbordaba 2px */
  padding-right:var(--s2);
  font-weight:600; cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:""; flex:none; margin-left:auto; margin-top:.45em;
  width:10px; height:10px; border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease);
}
.faq__item[open] summary::after{transform:rotate(225deg); margin-top:.7em}
.faq__item summary:hover{color:var(--accent-small)}
.faq__answer{padding-bottom:var(--s5); max-width:66ch}
.faq__answer p{color:var(--muted)}
.faq__answer p + p{margin-top:var(--s4)}
.faq__answer strong{color:var(--fg); font-weight:600}
.faq__answer a{color:var(--accent-small)}