/* ==========================================================================
   Kayros — marca de la web de Kayros (separar-marcas.md, "Identidad de
   Kayros"). Solo se carga con KAMALA_MARCA = 'kayros'. Cambia los valores
   del sistema de base.css; la estructura es la de Kamala.

   Primera pasada (02/11): colores y botones; Montserrat desde el 03/11;
   titulares y rótulos desde el 04/11.
   Falta, cuando lleguen y antes de la página de muestra para Judith y
   Luca: MBF Taurian en los titulares (licencia para web), logo, isotipo y
   patrón de la K.
   ========================================================================== */

/* Montserrat (Google Fonts, licencia OFL: LICENSE-Montserrat.txt), servida
   desde el tema como Inter, sin pedir nada a Google. Variable: todos los
   pesos en un archivo. Latín y latín extendido, partidos como los da Google. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-wght-normal.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;
}

:root {
	/* Los cuatro colores del documento de Judith. Predomina el blanco; el
	   azul petróleo es el principal (texto, cabecera, pie); coral y
	   amarillo, solo de acento y nunca como texto sobre blanco (contraste
	   2,77 y 1,54). */
	--ink: #165265; /* Azul petróleo: 8,65 sobre blanco */
	--ink-hover: #0f3c4a; /* petróleo oscurecido, al pasar el cursor */
	--coral: #ff6f3b;
	--coral-hover: #f25a22;
	--yellow: #fdc93b;
	--muted: #457584; /* petróleo al 80 %: 5,1 sobre blanco */
	--grey: #c5d4d9; /* petróleo al 25 %, para líneas y bordes */
	--line: var(--grey);

	/* Texto del botón principal sobre coral: blanco (decisión de Andrés,
	   02/11). Si no se lee bien, petróleo oscuro #0b2e3a (5,18). */
	--on-coral: #fff;

	/* Montserrat para todo y MBF Taurian para los titulares (Judith). Hasta
	   tener la licencia de Taurian, los titulares también en Montserrat. */
	--font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-display: "MBF Taurian", var(--font);
	--logo-k2: var(--coral);
}

::selection {
	background: var(--yellow);
	color: var(--ink);
}

/* Botón principal: coral con texto blanco, en negrita y espaciado para que
   se lea lo mejor posible. El secundario (fantasma) sigue en petróleo. */
.btn {
	border-color: var(--coral);
	background: var(--coral);
	color: var(--on-coral);
	font-weight: 600;
}

.btn:hover {
	border-color: var(--coral-hover);
	background: var(--coral-hover);
}

.btn--ghost {
	border-color: var(--ink);
	background: transparent;
	color: var(--ink);
}

.btn--ghost:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

/* Titulares y rótulos (documento de Judith, hoja 1): el H1 en la letra de
   titulares (--font-display: MBF Taurian; hasta tener la licencia, la
   Montserrat en negrita), grande y con aire; los H2, en Montserrat
   seminegrita y en minúsculas; los rótulos pequeños ("NEW COLLECTION"), en
   mayúsculas espaciadas. Kamala lleva todo fino y en mayúsculas. */
.display,
.hero-cut__title,
.home-campaign__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.headline {
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.005em;
	text-transform: none;
	line-height: 1.2;
}

.kicker {
	font-weight: 600;
	letter-spacing: 0.2em;
}

/* Una raya corta en coral delante del rótulo: el coral como punto de
   impacto, sin usarlo como color de texto (no se lee sobre blanco). */
.kicker::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-right: 12px;
	background: var(--coral);
	vertical-align: 0.3em;
}

/* El botón de la cabecera del carrusel, en segundo plano (fantasma): el coral
   queda para el de la portada. */
.section-head__action,
.home-frames__mobile-action {
	border-color: var(--ink);
	background: transparent;
	color: var(--ink);
}

.section-head__action:hover,
.home-frames__mobile-action:hover {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

/* Etiqueta ("Nuevo"): amarillo con texto petróleo (5,6, se lee bien). La
   oscura, para estados ("Agotado"). De momento solo en la página de muestra. */
.tag {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 3px;
	background: var(--yellow);
	color: var(--ink);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tag--ink {
	background: var(--ink);
	color: var(--paper);
}

/* Pie en azul petróleo con texto blanco (documento de Judith). */
.site-footer {
	--footer-text: rgba(255, 255, 255, 0.78);
	--footer-line: rgba(255, 255, 255, 0.25);
	background: var(--ink);
	color: var(--paper);
}

/* Títulos del pie (Políticas, Colecciones, Información y contacto) en
   blanco, como el resto (Luca, 04/11: "casi no se leen"). En el móvil iban
   en el negro de Kamala al 55 %, que sobre el azul no se veía. */
.site-footer .site-footer__heading,
.site-footer .newsletter__lead {
	color: var(--paper);
}

/* Al pasar el cursor, blanco y subrayado: en azul sobre azul desaparecían. */
.site-footer .site-footer__links a:hover,
.site-footer .site-footer__legal-links a:hover {
	color: var(--paper);
}

/* Recuadros del idioma en blanco: los de Kamala son negros. */
.site-footer .lang--boxed .lang__item {
	border-color: rgba(255, 255, 255, 0.35);
}

.site-footer .lang--boxed .lang__item[aria-current="true"] {
	border-color: var(--paper);
}

/* Segunda revisión de Luca y Judith (04/11) ------------------------------- */

/* Logo en naranja donde va sobre blanco (Luca: "el logo original en
   naranja"). En el pie azul sigue en blanco. Desde el 06/11, el logotipo
   oficial (separar-marcas.md). */
.site-header__logo,
.drawer__logo,
.side-cart__logo,
.access__logo {
	color: var(--coral);
}

/* Sin la cabecera que se invierte sola sobre la foto (la de la ficha en el
   móvil): invertido, el naranja sale azul. Va en petróleo sin invertir, que
   se lee sobre el gris de las fotos de la gafa. */
body.marca-kayros .site-header.is-overlay[data-tone="auto"]:not(.is-scrolled):not(:focus-within):not(:hover) {
	color: var(--ink);
	mix-blend-mode: normal;
}

/* Inicio con la portada de fotos: la cabecera, blanca y encima de las fotos,
   no sobre ellas (el logo naranja y el menú no se leerían sobre una foto de
   color), como la ficha en escritorio. La portada ocupa lo que queda. */
body.marca-kayros:has(.hero) .site-header.is-overlay {
	position: sticky;
}

body.marca-kayros:has(.hero) .site-header.is-overlay:not(.is-scrolled):not(:focus-within):not(:hover) {
	border-bottom-color: var(--line);
	background: var(--paper);
	color: var(--ink);
	mix-blend-mode: normal;
}

body.marca-kayros .hero {
	min-height: calc(100svh - var(--header-h));
}

/* Botón de la ficha ("Encontrar una óptica") en el azul del pie, como el de
   añadir al carrito de las ópticas (Luca: "el botón es mejor que sea del
   azul del footer"). */
.product-cta .btn:not(.btn--ghost) {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

.product-cta .btn:not(.btn--ghost):hover {
	border-color: var(--ink-hover);
	background: var(--ink-hover);
}