/* ==========================================================================
   A&I Seguros — Tokens globales de marca
   Fuente de verdad: docs/kit-diseno.md
   ========================================================================== */

:root {
  /* ===== Colores OFICIALES de marca ===== */
  --aiseguros-color-primary: #075685;   /* Azul oscuro — dominante */
  --aiseguros-color-secondary: #4ab3e7; /* Azul claro — apoyo y acentos */
  --aiseguros-color-accent: #079239;    /* Verde — detalles y llamados a la acción */
  --aiseguros-color-white: #FFFFFF;

  /* ===== Neutros ===== */
  --aiseguros-color-dark: #04304a;      /* Navy derivado del primario (fondos oscuros) */
  --aiseguros-color-body: #364e52;      /* Texto de párrafo */
  --aiseguros-color-muted: #67787a;     /* Texto secundario */
  --aiseguros-color-border: #cfdde6;    /* Bordes suaves */
  --aiseguros-color-surface: #eaf4fb;   /* Fondo suave (tinte del secundario) */
  --aiseguros-color-surface-mid: #cae7f7; /* Tono medio: cierre de la home (formulario + footer) */
  /* Versión del secundario para TEXTO sobre fondos claros. El #4ab3e7 original
     es un color de trazo/relleno: como texto sobre blanco da 2.4:1 y sobre el
     tono medio 1.8:1, por debajo del mínimo accesible. Este tinte conserva la
     familia de color y sube a 5.4:1 sobre blanco. */
  --aiseguros-color-secondary-ink: #12719f;

  /* ===== Tipografías ===== */
  --aiseguros-font-heading: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --aiseguros-font-body: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ===== Formas y Proporciones ===== */
  --aiseguros-border-radius-pill: 999px;
  --aiseguros-border-radius-card: 18px;   /* cards (referencia Bexon: 16–20px) */
  --aiseguros-border-radius-lg: 28px;      /* bandas/secciones destacadas */

  /* ===== Sombras (tinte navy del primario, nunca negro plano) ===== */
  --aiseguros-shadow-sm: 0 4px 16px rgba(4, 48, 74, 0.06);
  --aiseguros-shadow-md: 0 14px 40px rgba(4, 48, 74, 0.10);
  --aiseguros-shadow-lg: 0 28px 60px rgba(4, 48, 74, 0.14);

  /* ===== Glow radial (para que los colores no queden planos) ===== */
  --aiseguros-glow-blue: radial-gradient(circle at center, rgba(74, 179, 231, 0.35) 0%, rgba(74, 179, 231, 0) 70%);
  --aiseguros-glow-green: radial-gradient(circle at center, rgba(7, 146, 57, 0.28) 0%, rgba(7, 146, 57, 0) 70%);

  /* ===== Glass (glassmorphism) ===== */
  --aiseguros-glass-light: rgba(255, 255, 255, 0.72);
  --aiseguros-glass-light-solid: rgba(255, 255, 255, 0.9);
  --aiseguros-glass-dark: rgba(4, 48, 74, 0.85);
  --aiseguros-glass-border: rgba(255, 255, 255, 0.5);
  --aiseguros-glass-blur: blur(18px) saturate(160%);

  /* ===== Sistema de Espaciados ===== */
  --aiseguros-space-xs: 4px;
  --aiseguros-space-sm: 8px;
  --aiseguros-space-md: 16px;
  --aiseguros-space-lg: 32px;
  --aiseguros-space-xl: 48px;
}


/* ==========================================================================
   Transición entre páginas

   Sin esto, cada navegación corta a blanco antes de pintar la página nueva.
   Es CSS puro: el navegador toma una instantánea de la página que se va y la
   funde con la que llega. Donde no esté soportado, no pasa nada — se navega
   como siempre.
   ========================================================================== */

/*
 * ⚠️ DESACTIVADO (06-08-2026). Cambiar `none` por `auto` lo devuelve.
 *
 * Motivo: mientras dura una transición entre documentos el navegador sustituye
 * la página por instantáneas y **no acepta scroll**. No es algo que se pueda
 * optimizar: es cómo funciona. Se probó acortarla (460ms → 300ms) y aun así el
 * cliente seguía notando el frenazo al navegar.
 *
 * La pista que lo identificó: el problema aparecía al CAMBIAR de página y no al
 * recargar con F5, donde la transición ni se dispara.
 *
 * Lo que se pierde: el fundido entre páginas; vuelve el corte seco. Lo que se
 * gana: el scroll responde desde el primer instante.
 */
@view-transition {
	navigation: none;
}

/*
 * ⚠️ MIENTRAS DURA LA TRANSICIÓN LA PÁGINA NO SE PUEDE DESPLAZAR. El navegador
 * sustituye el documento por instantáneas y no acepta scroll hasta terminar.
 * Por eso 300ms se sentían como un frenazo al cambiar de página —y no al
 * recargar con F5, donde la transición ni se dispara—.
 *
 * Dos decisiones:
 *  1. Duraciones cortas. 120 + 180ms se leen como continuidad, no como espera.
 *  2. SÓLO opacidad. Un `translateY` obliga a componer y mover la instantánea
 *     de la página entera (aquí más de 4000px de alto); el fundido es casi
 *     gratis y a esta duración se percibe igual.
 */
::view-transition-old(root) {
	animation: aiseg-page-out 120ms cubic-bezier(0.33, 0, 0.67, 1) both;
}

::view-transition-new(root) {
	animation: aiseg-page-in 180ms cubic-bezier(0.33, 0, 0.67, 1) both;
}

@keyframes aiseg-page-out {
	to {
		opacity: 0;
	}
}

@keyframes aiseg-page-in {
	from {
		opacity: 0;
	}
}

/* El header queda FUERA de la transición y no parpadea: se mantiene anclado
   mientras el contenido se releva, que es lo que hace que la navegación se
   sienta continua en vez de un salto entre dos pantallas. */
body > header:has(.aiseguros-menu) {
	view-transition-name: aiseg-header;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ==========================================================================
   Rendimiento en móvil: sin desenfoques de fondo
   ==========================================================================

   `backdrop-filter` obliga al compositor a re-desenfocar lo que hay detrás en
   CADA fotograma de scroll. En un ordenador no se nota; en un teléfono sí, y la
   barra de cabecera es `sticky`, así que paga ese coste durante todo el
   recorrido de la página. Es lo que hace que el scroll no se sienta fluido.

   Por debajo de 800px se cambia el cristal por color plano. Se pierde el
   desenfoque —que en una pantalla de 6 pulgadas apenas se percibe— y se gana un
   scroll que responde. Los fondos suben de opacidad para que el contraste no
   dependa de un efecto que ya no está.

   ⚠️ TODOS los selectores llevan `html` delante A PROPÓSITO. Esta hoja se
   encola ANTES que la de cada widget, así que a igual especificidad ganaban
   ellas. El `html` añade un elemento (0-1-1 → 0-1-2) y con eso basta, sin
   recurrir a `!important`.

   ⚠️ Si se añade un `backdrop-filter` nuevo, hay que anularlo también aquí.
   ========================================================================== */

@media (max-width: 800px) {

	html .aiseguros-menu::before,
	html.aiseg-cargado .aiseguros-menu::before,
	html .aiseguros-menu__mega,
	html .aiseg-nos__card,
	html .aiseg-blog__veil::before,
	html .aiseg-blog__pill,
	html .aiseg-hero__arrow,
	html .aiseg-idx__card-pill {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* --- Compensación: el contraste ya no puede apoyarse en el desenfoque --- */

	html .aiseguros-menu::before,
	html.aiseg-cargado .aiseguros-menu::before {
		background-color: rgba(255, 255, 255, 0.94);
	}

	/* Sobre el hero la barra es oscura. */
	html body.home .aiseguros-menu:not(.is-scrolled)::before {
		background-color: rgba(4, 48, 74, 0.82);
	}

	html .aiseg-nos__card {
		background: rgba(255, 255, 255, 0.10);
	}

	/* El velo de las tarjetas del blog pasa a degradado plano: mismo contraste
	   bajo el título, sin desenfoque ni máscara. */
	html .aiseg-blog__veil::before {
		-webkit-mask-image: none;
		mask-image: none;
		background: linear-gradient(to top,
			rgba(4, 48, 74, 0.92) 0%,
			rgba(4, 48, 74, 0.55) 45%,
			rgba(4, 48, 74, 0) 78%);
	}

	html .aiseg-blog__pill,
	html .aiseg-idx__card-pill {
		background: rgba(4, 48, 74, 0.78);
	}

	html .aiseg-hero__arrow {
		background: rgba(4, 48, 74, 0.55);
	}
}