/* Typography base — Fraunces (display) + Inter (body)
   ─────────────────────────────────────────────────────
   Self-host VARIABLE woff2 (latin) desde fontsource@5:
     - Inter:    1 archivo wght 100-900     ~48 KB
     - Fraunces: 2 archivos (normal + italic) ~120+147 KB
   Axes Fraunces usados en V8: opsz (9-144), SOFT (0-100). Aplicados via
   font-variation-settings en cada uso (.font-display, .cine-hero h1, etc.).
   Preload del Fraunces normal hecho desde functions.php (es el LCP del hero h1).
*/

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../fonts/inter-variable-latin-wght.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../fonts/fraunces-variable-latin-wght.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("../../fonts/fraunces-variable-latin-wght-italic.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* Headings heredan color del contexto (body en light → ink-900, .shot/.loc-card en dark → white).
   NUNCA setear color genérico aquí — rompería cards con fondo oscuro al pisar la herencia.
   Si en algún sitio hace falta forzar navy específico, override puntual con selector de contexto. */
:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ijs-font-display);
	font-weight: 600;
	letter-spacing: var(--ijs-tracking-display);
	line-height: 1.1;
	margin: 0 0 0.4em;
}

:where(h1) { font-size: clamp(2.25rem, 5vw, 3.75rem); }
:where(h2) { font-size: clamp(1.75rem, 4vw, 2.75rem); }
:where(h3) { font-size: clamp(1.375rem, 3vw, 1.875rem); }
:where(h4) { font-size: clamp(1.125rem, 2vw, 1.375rem); }

/* `p` solo margin — NO `max-width` aquí (rompería componentes que tiran ancho completo
   con `text-align:center`, ej. .loc-escape). El max-width tipográfico (70ch) es decisión
   de cada componente body/long-form, no del reset. */
:where(p) { margin: 0 0 1em; }

/* Color de links con `:where()` (especificidad 0) para que cualquier wrapper con
   `color: white` (cards .shot, .loc-card, hero) gane por herencia tanto en estado base
   como en :hover. Si no, `a:hover` (0,1,1) pisa `.shot` (0,1,0) y los nombres de los
   tours salen en turquesa al hacer hover. */
/* Reset de Hello Elementor (`reset.css`) aplica:
     a { color: #c36 }            (0,0,1)
     a:hover, a:active { color: #336 }   (0,1,1) ← GANA sobre `.shot { color: white }` (0,1,0)
   Por eso usamos especificidad real (sin `:where()`) en el reset de links: igualamos al
   user-agent + Hello, último declarado gana. Componentes con color custom (cards `.shot`,
   `.loc-card`) deben definir SUS PROPIOS :hover/:visited con doble clase o `a.X` para empatar. */
a {
	color: var(--ijs-turquoise-600);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color 0.18s ease;
}
a:hover, a:focus-visible { color: var(--ijs-turquoise-900); }
a:visited { color: var(--ijs-turquoise-600); }
a:visited:hover, a:visited:focus-visible { color: var(--ijs-turquoise-900); }

.is-style-ijsb-display {
	font-family: var(--ijs-font-display);
	font-weight: 600;
	font-style: italic;
}

.is-style-ijsb-eyebrow {
	font-family: var(--ijs-font-body);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: var(--ijs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ijs-turquoise-600);
}

.ijsb-lead {
	font-size: 1.125rem;
	color: var(--ijs-ink-500);
	max-width: 60ch;
}

:focus-visible {
	outline: 2px solid var(--ijs-coral-600);
	outline-offset: 3px;
	border-radius: 2px;
}