/* ════════════════════════════════════════════════════════════════════
   GRUPO ANDERSON'S · web nueva · sistema de diseño (prefijo --ga-)
   Línea: la de la Anderson's Gift Card, con el azul cielo #C9DEF0.
   Medido de la Gift Card el 28 de septiembre de 2026. Mismo modelo que keybourne.css.

   Reglas que este archivo da por cerradas:
   · El mostaza/dorado de Anderson's NO existe. Ni mostaza, ni dorado, ni arena,
     ni cobre, ni amarillo. Tampoco rojo ni naranja. En ningún sitio.
     (Prohibidos por nombre: #AD997C, #B6997B, #B49A63, #D1B38B, #9B7E61, #A8763E.)
   · El fondo es claro siempre. El navy sólo va en bandas, cabecera y pie.
   · Nada de doble fondo: una caja de color no se monta sobre una banda de color.
     Sobre --ga-cielo-claro o --ga-marina el contenido va directo, sin tarjeta.
     Las tarjetas (--ga-tarjeta, blanco) sólo viven sobre --ga-fondo.
   · Ningún color de texto baja de 4,5:1 (AA) sobre el fondo donde se usa.
   · Nada de sombra interior (box-shadow inset).
   · Ninguna palabra sola en la última línea.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tipografía. Las de la Gift Card: Cinzel para titular, Inter para leer.
      Se sirven desde el propio sitio (fuentes.css). ── */

:root{
  /* ── Color ──────────────────────────────────────────────────────────
     Todo sale medido de la Gift Card (landing y correos), salvo --ga-fondo
     y --ga-linea, que sustituyen al beige #ECEAE4 de la landing (tono 45°,
     cálido) por un blanco frío que casa con el cielo.                   */
  --ga-tinta:#16202F;       /* texto principal. Navy de la landing (--text)            */
  --ga-marina:#2E374B;      /* navy de marca: botón, bandas, cabecera. Guía y correos  */
  --ga-marina-2:#3B4760;    /* su estado: hover y foco                                */
  --ga-noche:#1E2B40;       /* pie del sitio. Cabecera del mailing v3                  */
  --ga-acero:#4C5D70;       /* texto secundario y enlaces suaves. Landing (--muted)    */
  --ga-acero-2:#566E82;     /* azul medio: sólo sobre --ga-fondo o blanco (≥4,99)      */
  --ga-cielo:#C9DEF0;       /* EL AZUL CIELO. Acento: filetes, texto sobre navy,
                               botón sobre navy, banda de cielo. NUNCA texto sobre claro */
  --ga-cielo-claro:#DFEAF4; /* banda alterna de sección (sin tarjetas encima)          */
  --ga-fondo:#F5F8FB;       /* el fondo del sitio: blanco frío                          */
  --ga-tarjeta:#FFFFFF;     /* tarjetas y cajas, sólo sobre --ga-fondo                  */
  --ga-linea:#D3DEE8;       /* líneas y bordes. NUNCA texto                             */

  /* Contrastes medidos (WCAG 2.1):
     sobre --ga-fondo    tinta 15,37 · marina 11,17 · acero 6,34 · acero-2 4,99
     sobre --ga-tarjeta  tinta 16,38 · marina 11,90 · acero 6,76 · acero-2 5,32
     sobre --ga-cielo-claro  tinta 13,43 · marina 9,76 · acero 5,54 (acero-2 4,36: NO)
     sobre --ga-cielo    tinta 11,85 · marina 8,61 · acero 4,89 (acero-2 3,85: NO)
     sobre --ga-marina   blanco 11,90 · cielo 8,61
     sobre --ga-noche    blanco 14,24 · cielo 10,30
     cielo sobre fondo 1,30 y línea sobre fondo 1,28: sólo decoración.   */

  /* ── Letra ─────────────────────────────────────────────────────────── */
  --ga-titular:"Cinzel",Georgia,"Times New Roman",serif;  /* h1 y h2, nada más */
  --ga-texto:"Quicksand",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;   /* letra de contenido de todo el sitio (Carlos, 2026-09-29); antes Inter */
  --ga-base:16px;           /* la Gift Card fijó las descripciones a 16px             */
  --ga-alto:1.55;           /* interlineado del texto corrido (landing)               */
  --ga-track-titular:.02em; /* Cinzel lleva aire propio; .4px en la landing           */
  --ga-track-display:-.01em;/* el titular grande se cierra un poco (-1px a 96px)      */
  --ga-track-boton:.12em;   /* botones en mayúscula                                   */
  --ga-track-etiqueta:.18em;/* etiqueta de un dato; no antetítulo de sección          */

  /* ── Espacio. Todo múltiplo de 4. ────────────────────────────────── */
  --ga-1:4px;  --ga-2:8px;  --ga-3:12px; --ga-4:16px; --ga-5:24px;
  --ga-6:32px; --ga-7:48px; --ga-8:64px; --ga-9:96px; --ga-10:128px;

  /* ── Forma. Redondeada, como la Gift Card. ─────────────────────────── */
  --ga-radio-boton:999px;   /* píldora (40px en la landing)                           */
  --ga-radio-caja:28px;     /* tarjetas (--card-radius de la landing)                 */
  --ga-radio-foto:18px;     /* imágenes y tarjeta de regalo                           */
  --ga-radio-campo:12px;    /* campos de formulario                                   */
  --ga-borde:1px solid var(--ga-linea);

  /* Sombra difusa y teñida de navy (la landing usa negro al 18 %). Nunca inset. */
  --ga-sombra:0 18px 50px -28px rgba(22,32,47,.20);
  --ga-sombra-hover:0 30px 64px -26px rgba(22,32,47,.28);
  --ga-sombra-boton:0 8px 24px rgba(46,55,75,.22);

  /* ── Anchos ──────────────────────────────────────────────────────── */
  --ga-ancho:1240px;        /* .wrap de la landing                                    */
  --ga-lectura:68ch;
  --ga-cabecera:72px;       /* alto de la barra (70px en la landing)                  */
}

/* ════ Base ════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ga-fondo);color:var(--ga-tinta);font-family:var(--ga-texto);
  font-size:var(--ga-base);line-height:var(--ga-alto);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--ga-marina);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--ga-marina-2)}
:focus-visible{outline:2px solid var(--ga-marina);outline-offset:3px}

/* ════ Escala de texto ════ */
.ga-display{font-family:var(--ga-titular);font-weight:600;font-size:clamp(40px,6vw,80px);
  line-height:1.08;letter-spacing:var(--ga-track-display);text-wrap:balance;margin:0}
.ga-h1{font-family:var(--ga-titular);font-weight:600;font-size:clamp(32px,4.5vw,56px);
  line-height:1.14;letter-spacing:var(--ga-track-titular);text-wrap:balance;margin:0}
.ga-h2{font-family:var(--ga-titular);font-weight:600;font-size:clamp(26px,3.2vw,40px);
  line-height:1.18;letter-spacing:var(--ga-track-titular);text-wrap:balance;margin:0}
/* De h3 hacia abajo, Inter: Cinzel sólo tiene mayúsculas y a tamaño chico cansa. */
.ga-h3{font-family:var(--ga-texto);font-weight:600;font-size:clamp(19px,1.8vw,22px);
  line-height:1.35;letter-spacing:-.005em;text-wrap:balance;margin:0}
.ga-h4{font-family:var(--ga-texto);font-weight:600;font-size:17px;line-height:1.4;margin:0}
.ga-texto{font-size:var(--ga-base);max-width:var(--ga-lectura);text-wrap:pretty;margin:0}
.ga-texto--grande{font-size:clamp(17px,1.5vw,19px)}
.ga-texto--suave{color:var(--ga-acero)}
.ga-chico{font-size:14px;color:var(--ga-acero);margin:0;text-wrap:pretty}
.ga-etiqueta{font-size:12px;font-weight:600;letter-spacing:var(--ga-track-etiqueta);
  text-transform:uppercase;color:var(--ga-acero);margin:0}
.ga-cifra{font-family:var(--ga-texto);font-variant-numeric:lining-nums tabular-nums;
  font-weight:500;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.015em;color:var(--ga-marina)}

/* ════ Botones ════ */
.ga-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ga-texto);font-weight:600;font-size:13px;line-height:1;
  letter-spacing:var(--ga-track-boton);text-transform:uppercase;padding:16px 28px;
  border-radius:var(--ga-radio-boton);border:1px solid var(--ga-marina);
  background:var(--ga-marina);color:#FFFFFF;box-shadow:var(--ga-sombra-boton);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.ga-boton:hover{background:var(--ga-marina-2);border-color:var(--ga-marina-2);color:#FFFFFF;transform:translateY(-2px)}
/* Secundario sobre claro: línea navy, sin relleno. */
.ga-boton--linea{background:transparent;color:var(--ga-marina);box-shadow:none}
.ga-boton--linea:hover{background:var(--ga-marina);color:#FFFFFF}
/* Sobre banda navy: el botón cielo con texto navy (el del mailing y la tarjeta digital). */
.ga-boton--cielo{background:var(--ga-cielo);border-color:var(--ga-cielo);color:var(--ga-marina);box-shadow:none}
.ga-boton--cielo:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--ga-marina)}

/* ════ Piezas ════ */
.ga-caja{max-width:var(--ga-ancho);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.ga-tarjeta{background:var(--ga-tarjeta);border:1px solid rgba(22,32,47,.05);border-radius:var(--ga-radio-caja);
  box-shadow:var(--ga-sombra);padding:var(--ga-6);display:grid;gap:var(--ga-3);align-content:start}
.ga-banda{background:var(--ga-marina);color:#FFFFFF;padding-block:clamp(48px,8vw,112px)}
.ga-banda .ga-texto,.ga-banda .ga-chico{color:var(--ga-cielo)}
.ga-banda a{color:#FFFFFF}
.ga-banda--cielo{background:var(--ga-cielo-claro);color:var(--ga-tinta)}
.ga-banda--cielo .ga-texto,.ga-banda--cielo .ga-chico{color:var(--ga-acero)}
.ga-filete{width:56px;height:3px;border:0;margin:0;background:var(--ga-cielo)}

.ga-cabecera{position:sticky;top:0;z-index:50;height:var(--ga-cabecera);background:var(--ga-marina);color:#FFFFFF}
.ga-cabecera a{color:rgba(255,255,255,.86);text-decoration:none;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.ga-cabecera a:hover{color:var(--ga-cielo)}
.ga-pie{background:var(--ga-noche);color:#FFFFFF;padding-block:64px 40px}
.ga-pie a{color:var(--ga-cielo);text-decoration:none}

/* Cards en móvil: se deslizan, nunca se apilan. */
.ga-fila{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:var(--ga-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ga-fila::-webkit-scrollbar{display:none}
.ga-fila > *{scroll-snap-align:center}
@media (min-width:760px){
  .ga-fila{grid-auto-flow:row;grid-template-columns:repeat(var(--ga-columnas,3),1fr);grid-auto-columns:auto;overflow:visible}
}

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

/* los controles heredan la letra del sitio (el navegador les pone la suya) */
button,input,textarea,select{font-family:inherit}
body{font-weight:500}   /* Quicksand 500 = la letra de contenido elegida (Quiénes somos) */