/* Tokens de Mygocu Web 3.0
   Valores tomados tal cual del diseño (referencia/Mygocu Web 3.1.dc.html).
   Tipografía: solo Montserrat, alojada en el propio servidor. */

:root {
  /* Fondos y superficies */
  --bg: #f7f5f0;
  --bg2: #efece6;
  --card: #fdfcf9;
  --raised: #ebe8e1;
  --raised2: #dcd8cf;
  /* Fondo del botón secundario y línea del de acento. */
  --boton2: #fdfcf9;
  --accent-line: transparent;
  --band: #03081b;
  --band15: #03081b;
  --surround: #dcd8cf;
  --nav: rgba(247, 245, 240, 0.88);

  /* Texto */
  --ink: #03081b;
  --ink2: #565b63;
  --ink3: #74787f;

  /* Líneas */
  --line: #e2ded6;
  --line2: #ebe8e2;
  --line3: #cdc8be;

  /* Destacado */
  --hl: #03081b;
  --on-hl: #f7f5f0;
  --hl-line: #03081b;
  --hl-line2: #cdc8be;
  --hl-tint: #ebe8e1;

  /* Acento: sobre fondo claro el acento es el azul oscuro, no el cian.
     El cian #00c2ff solo aparece sobre banda oscura (ver [data-band]). */
  --accent: #03081b;
  --accent-h: #1c2132;
  --on-accent: #ffffff;
  --accent-tint: rgba(3, 8, 27, 0.06);

  /* Estado */
  --ok: #03081b;
  --ok-tint: #ebe8e1;
  --bad: #b3392f;
  --bad-tint: rgba(179, 57, 47, 0.08);
  --bad-line: rgba(179, 57, 47, 0.5);
  --warn: #03081b;
  --warn-tint: #ebe8e1;

  /* Escala Azul 1 de la guía de estilo. Los tres claros son los que fija
     CLAUDE.md; los de en medio siguen la misma familia, con el azul por
     delante del rojo y el verde. Fuera de esta escala no hay azules. */
  --azul-900: #03081b;
  --azul-800: #141a30;
  --azul-700: #232b44;
  --azul-600: #343d59;
  --azul-500: #4c5570;
  --azul-400: #6b7490;
  --azul-300: #9aa2bb;
  --azul-200: #cfd4e7;
  --azul-100: #e7eaf4;
  --azul-50: #f3f4f9;

  /* Tipografía */
  --fd: "Montserrat", sans-serif;
  --fb: "Montserrat", sans-serif;

  /* ---- Escala tipográfica (CLAUDE.md · skill escala-tipografica) ----
     Ocho tamaños, los únicos de la web. Interpolan en línea recta entre
     390 px y 1440 px de ancho de pantalla; por debajo y por encima se
     quedan quietos. Ningún font-size escrito a mano en ninguna hoja. */
  --fs-h1: clamp(40px, calc(40px + 32 * (100vw - 390px) / 1050), 72px);
  --fs-h2: clamp(32px, calc(32px + 16 * (100vw - 390px) / 1050), 48px);
  --fs-h3: clamp(22px, calc(22px + 6 * (100vw - 390px) / 1050), 28px);
  --fs-h4: clamp(18px, calc(18px + 2 * (100vw - 390px) / 1050), 20px);
  --fs-cuerpo-grande: clamp(18px, calc(18px + 2 * (100vw - 390px) / 1050), 20px);
  --fs-cuerpo: clamp(16px, calc(16px + 1 * (100vw - 390px) / 1050), 17px);
  --fs-pequeno: 14px;
  --fs-etiqueta: clamp(12px, calc(12px + 1 * (100vw - 390px) / 1050), 13px);

  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-h4: 1.3;
  --lh-cuerpo-grande: 1.5;
  --lh-cuerpo: 1.55;
  --lh-pequeno: 1.5;
  --lh-etiqueta: 1.4;

  /* Radios */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-pill: 6px;

  /* Rejilla: sangría de los raíles */
  --gi: 48px;
}

/* Banda oscura. Es el único sitio donde el cian hace de acento,
   siempre con texto #03081b encima. */
[data-band] {
  background: var(--band);
  --bg: #03081b;
  --bg2: #0a1026;
  --card: #0e1530;
  --raised: #161d38;
  --raised2: #212944;
  --boton2: #1c2433;
  --accent-line: #03081b;
  --ink: #f3f4f6;
  --ink2: #b6bcc6;
  --ink3: #8d95a2;
  --line: #2a3345;
  --line2: #1f2737;
  --line3: #3a4459;
  --hl: #f3f4f6;
  --on-hl: #03081b;
  --hl-line: #f3f4f6;
  --hl-line2: #3a4459;
  --hl-tint: #1c2433;
  --ok: #f3f4f6;
  --ok-tint: #1c2433;
  --accent: #00c2ff;
  --accent-h: #00afe6;
  --on-accent: #03081b;
  --accent-tint: rgba(0, 194, 255, 0.14);
  --focus-ring: rgba(0, 194, 255, 0.35);
}

@container (max-width: 1099px) {
  :root {
    --gi: 32px;
  }
}

@container (max-width: 767px) {
  :root {
    --gi: 0px;
  }
}