/* ============================================================================
   SPICA STUDIO · HOME V6 · DESIGN TOKENS
   La constitución visual. Una sola fuente de verdad, derivada del documento
   "Estructura de negocio" (papel + tinta + violeta señal). Titulares en
   Archivo (30-ago, decisión de Cesar: la display chunky de la versión Fusion);
   cuerpo en Geist. Ninguna hoja posterior redefine tokens.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- paleta ---------------------------------------------------------- */
  --paper: #f6f5f1;          /* base editorial cálida */
  --paper-raised: #fffdf9;   /* tarjetas sobre papel */
  --mist: #e9e4dc;           /* panel plata cálida */
  --ink: #111110;            /* tinta */
  --ink-soft: #55504c;       /* tinta al 70%, texto secundario */
  --ink-faint: #6f6a64;      /* metadatos (4.7:1 sobre papel, AA) */

  --violet: #6d4acb;         /* acción, pilar 01 y marca */
  --violet-bright: #916edf;  /* señal / highlights */
  --violet-deep: #3c2f5e;    /* profundidad, fondos oscuros */
  --lavender: #e2d9f3;       /* superficie acento */
  --lavender-light: #efeaf8; /* superficie acento suave */
  --slate: #2c2734;          /* banda oscura */
  --slate-raised: #38323f;   /* tarjetas sobre slate */
  --slate-soft: #4a4453;     /* degradados sobre slate */

  /* acentos complementarios (30-ago, pedido de Cesar: más vida sin circo).
     Un acento por pilar: violeta 01 · teal 02 · ámbar 03. */
  --teal: #2e7d68;           /* pilar 02, sistemas */
  --teal-bright: #56a88f;    /* teal sobre fondos oscuros */
  --teal-light: #e3efe9;     /* superficie teal suave */
  --amber: #d97a2b;          /* pilar 03, el juego largo */
  --amber-bright: #e79a55;   /* ámbar sobre fondos oscuros */
  --amber-light: #f8ead9;    /* superficie ámbar suave */
  /* variante de CONTRASTE del ámbar (r3 U-08, aprobada por el PM): mismo
     dueño (Specialty 03), mismo hue 27°, solo para TEXTO PEQUEÑO donde el
     ámbar base no llega a AA (labels y kickers mono). Pasa 4.5:1 sobre sus
     tres fondos reales: papel 5.0, paper-raised 5.4, amber-light 4.65.
     Superficies y texto grande siguen con --amber. */
  --amber-text: #a45310;
  --teal-deep: #1e4a3d;      /* teal de profundidad (door-strip) */
  /* r14 (1-sep, pedido de Cesar: "una pizca de colores vibrantes"). Una variante
     encendida por acento dueno, MISMO hue, mas saturacion, medida en SPEC-UXUI-R14 8.
     SOLO para superficies a sangre: bandas de hero, cortinas, pildoras CTA. Nunca
     texto chico (papel sobre violet/teal-vivid, tinta sobre amber-vivid). */
  --violet-vivid: #5119e6;   /* papel encima 7.31 */
  --teal-vivid: #127d61;     /* papel encima 4.66 */
  --amber-vivid: #ec7513;    /* tinta encima 6.41 */

  --go: #3f7d5c;             /* estados "listo/sí" en escenas */

  --line: rgba(17, 17, 16, 0.14);
  --line-strong: rgba(17, 17, 16, 0.32);
  --line-on-dark: rgba(246, 245, 241, 0.2);

  /* ---- tipografía ------------------------------------------------------ */
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, monospace;

  /* escala 30-ago-r2 (gramática ManyChat): display más grande y denso,
     interlineado casi tocándose, tracking más negativo */
  --text-display: clamp(2.7rem, 1.25rem + 4.6vw, 5.55rem);
  --text-h2: clamp(2rem, 1.2rem + 2.5vw, 3.55rem);
  --text-h3: clamp(1.3rem, 1.05rem + 0.8vw, 1.8rem);
  --text-lead: clamp(1.02rem, 0.96rem + 0.28vw, 1.18rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-mono: 0.72rem;

  --ls-display: -0.028em;
  --ls-heading: -0.022em;
  --ls-mono: 0.085em;

  /* ---- layout ---------------------------------------------------------- */
  --shell: 88rem;
  --gutter: max(5vw, 1.5rem);
  --rhythm: clamp(5.5rem, 11vw, 10rem);       /* respiro entre secciones */
  --rhythm-half: clamp(2.75rem, 5.5vw, 5rem);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 18px 50px rgba(17, 17, 16, 0.08);
  --shadow-lift: 0 10px 26px rgba(17, 17, 16, 0.10);

  /* ---- motion ---------------------------------------------------------- */
  --dur-micro: 0.16s;
  --dur-state: 0.32s;
  --dur-panel: 0.52s;
  --dur-enter: 0.8s;
  --ease: cubic-bezier(0.4, 0, 0.22, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --ease-scene: cubic-bezier(0.3, 0.86, 0.28, 1); /* entradas de escena, suave con micro-asiento */
  --ease-liquid: cubic-bezier(0.45, 0.05, 0.18, 1); /* llenado líquido: arranque suave, frenada larga */

  /* ---- z --------------------------------------------------------------- */
  --z-header: 300;
  --z-overlay: 400;
}

/* ============================================================================
   ESCALA RESPONSIVE (r6 C34, 30-ago) · iPhone + iPad
   Los bloques van en orden DESCENDENTE de ancho: cada uno pisa al anterior en
   su tramo. El desktop (>=1081px) no entra en ninguno y queda intacto.
   Escalones: 1080 (iPad apaisado y ventanas medianas) · 767 (telefono grande)
   · 720 (el bloque original de movil) · 430 (iPhone).
   Ninguna hoja fuera de esta redefine tokens: todo el responsive de escala
   vive aqui y el resto de responsive.css solo usa lo que sale de este bloque.
   ========================================================================== */

/* --- iPad y ventanas medianas (<=1080) --------------------------------------
   La display de 5.55rem se calculo para 1440 y arriba: en 1024 come dos
   tercios de la pantalla y deja el titular huerfano. Se rebaja el techo de
   toda la escala y se sube el piso de la mono a 12px, el minimo legible a
   distancia de brazo en tactil (QA r6: 22 nodos caian entre 8.8 y 11.8px).
   El gutter absorbe los safe areas de iOS por si el viewport pasa a
   viewport-fit=cover: hoy env() devuelve 0 y el valor no cambia. */
@media (max-width: 1080px) {
  :root {
    --text-display: clamp(2.6rem, 1.15rem + 4.3vw, 4.35rem);
    --text-h2: clamp(1.9rem, 1.15rem + 2.2vw, 2.95rem);
    --text-h3: clamp(1.22rem, 1rem + 0.7vw, 1.62rem);
    --text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
    --text-mono: 0.75rem;
    --gutter: max(5vw, 1.5rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --rhythm: clamp(4.2rem, 8vw, 7rem);
    --rhythm-half: clamp(2.4rem, 4.5vw, 3.4rem);
  }
}

/* --- telefono grande y plegables (<=767) ------------------------------------
   Aqui muere el nav en linea y entra el menu movil; la columna es unica, asi
   que la display puede bajar otro paso sin dejar el titular corto. */
@media (max-width: 767px) {
  :root {
    --text-display: clamp(2.35rem, 1.1rem + 4.2vw, 3.1rem);
    --text-h2: clamp(1.82rem, 1.2rem + 2vw, 2.35rem);
    --text-h3: clamp(1.18rem, 1.02rem + 0.6vw, 1.4rem);
  }
}

/* en móvil el respiro entre secciones se acorta: a 390px las bandas de 10rem
   se leen como contenido sin cargar, no como aire editorial (QA 30-ago) */
@media (max-width: 720px) {
  :root {
    --rhythm: clamp(3.2rem, 9vw, 5rem);
    --rhythm-half: clamp(2rem, 5vw, 3rem);
  }
}

/* --- iPhone (<=430) ---------------------------------------------------------
   El gutter cede 4px para que la copy respire y el titular de tres lineas del
   hero no parta palabras a 375px. La escala ya no baja mas: por debajo de
   2.3rem la display pierde el peso de Archivo 800 y se lee como un h2. */
@media (max-width: 430px) {
  :root {
    --gutter: max(5vw, 1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
    --text-display: clamp(2.3rem, 1.05rem + 4.1vw, 2.7rem);
  }
}