/* ==========================================================================
   Kamala — base: fuente, valores del sistema, texto, botones y campos.
   Sistema acordado: blanco, negro de marca, gris de marca; una sola sans
   fina; rótulos pequeños en mayúsculas; botones rectangulares con curva leve.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-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 {
	/* Color: solo los tres del manual de marca (negro, gris, blanco)
	   y tonos sacados de ellos. Ningún color de acento. */
	--ink: #101820; /* Negro · Pantone Black 6 C */
	--grey: #c7c9c7; /* Gris · Pantone 420 C */
	--paper: #fff; /* Blanco */
	--line: var(--grey); /* líneas y bordes: el gris de marca */
	--surface: #f3f4f3; /* fondo de fotos de producto: gris de marca al 22 % */
	--muted: #64696e; /* texto secundario: negro de marca al 65 % */
	--ink-hover: #2a343f; /* negro de marca aclarado, al pasar el cursor */

	/* Texto */
	--font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fs-micro: 0.6875rem;
	--fs-label: 0.75rem;
	--fs-small: 0.8125rem;
	--fs-body: 0.9375rem;
	--fs-title: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--fs-display: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	--track: 0.05em;
	--track-wide: 0.18em;

	/* Medidas */
	--gutter: clamp(16px, 2.6vw, 40px);
	--header-h: 80px;
	/* Color de la segunda K del logo. El cliente la manda en naranja
	   (#ff6b35); en la web va del mismo color que la primera, en blanco y
	   negro (decisión de Andrés, 14/10). Para el naranja: --logo-k2: #ff6b35. */
	--logo-k2: currentColor;
	--radius: 5px;
	--tap: 44px;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* Para movimientos largos (acercar una foto): arranca y frena sin tirones. */
	--ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 1099px) {
	:root {
		--header-h: 52px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-weight: 300;
	line-height: 1.2;
}

p {
	margin: 0 0 1em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

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

/* Texto ----------------------------------------------------------------- */

.label {
	font-size: var(--fs-label);
	letter-spacing: var(--track);
	text-transform: uppercase;
}

.micro {
	font-size: var(--fs-micro);
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--muted);
}

.title {
	font-size: var(--fs-title);
	letter-spacing: var(--track);
	text-transform: uppercase;
}

.display {
	font-size: var(--fs-display);
	font-weight: 200;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.1;
}

.muted {
	color: var(--muted);
}

/* Enlace discreto: subrayado fino, el que va sobre fotos y en listados. */
.link {
	display: inline-block;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	font-size: var(--fs-small);
	letter-spacing: 0.15em;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.2s var(--ease);
}

.link:hover {
	opacity: 0.6;
}

/* Botones ---------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 32px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--fs-small);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

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

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

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

.btn--block {
	width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

/* Etiquetas de característica y de filtro. */
.chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--grey);
	border-radius: 3px;
	font-size: var(--fs-micro);
	letter-spacing: var(--track);
	text-decoration: none;
	text-transform: uppercase;
}

.chip[aria-pressed="true"],
.chip.is-active {
	border-color: var(--ink);
	background: var(--surface);
}

/* Campos ------------------------------------------------------------------ */

.field {
	display: block;
}

.field__label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--fs-micro);
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--muted);
}

/* 16 px en el campo: el iPhone no hace zoom al tocarlo. */
.field__input {
	width: 100%;
	min-height: var(--tap);
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
	font-size: 1rem;
	font-weight: 300;
}

.field__input::placeholder {
	color: var(--muted);
	opacity: 0.8;
}

.field__input:focus {
	outline: 0;
	border-bottom-width: 2px;
	padding-bottom: 7px;
}

.field__input--box {
	padding: 10px 14px;
	border: 1px solid var(--grey);
	border-radius: 3px;
}

.field__input--box:focus {
	border-color: var(--ink);
	border-width: 1px;
	padding-bottom: 10px;
	box-shadow: 0 0 0 1px var(--ink);
}

.check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-small);
	line-height: 1.4;
	cursor: pointer;
}

.check input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	border: 1px solid var(--ink);
	border-radius: 2px;
	background: var(--paper);
	appearance: none;
	cursor: pointer;
}

.check input:checked {
	background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Estructura ---------------------------------------------------------------- */

.container {
	width: 100%;
	padding-inline: var(--gutter);
}

.section {
	padding-block: clamp(40px, 6vw, 96px);
}

.rule {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--line);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 16px;
	border-radius: var(--radius);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--fs-label);
	letter-spacing: var(--track);
	text-decoration: none;
	text-transform: uppercase;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* Foto de producto encajada por su gafa -------------------------------------- */

/* Las fotos traen la gafa a tamaños algo distintos (entre el 78 % y el 96 %
   del ancho). kamala_photo_fit() pone en cada foto dónde está su gafa (--cx,
   --cy: el centro; --cw, --ch: el tamaño; --ar: proporción de la foto) y aquí
   se escala hasta que la gafa ocupa siempre lo mismo del recuadro (--fit-w %
   del ancho, sin pasar de --fit-h % del alto) y se centra en la gafa. El
   recuadro lleva .fit-box; cada tarjeta decide su altura con "top".
   "translate" va aparte de "transform" para no pisar los efectos al pasar el
   ratón. Sin soporte (navegadores anteriores a 2022), la foto sale como antes. */
@supports (width: 1cqw) and (translate: 0px) {
	.fit-box {
		container-type: size;
	}

	.fit-box .fit-photo.fit-photo {
		position: absolute;
		inset: auto;
		top: 50%;
		left: 50%;
		width: min(calc(var(--fit-w, 80) * 1cqw / var(--cw)), calc(var(--fit-h, 70) * 1cqh * var(--ar) / var(--ch)));
		max-width: none;
		height: auto;
		translate: calc(-100% * var(--cx)) calc(-100% * var(--cy));
		transform-origin: calc(100% * var(--cx)) calc(100% * var(--cy));
	}
}

/* Movimiento ---------------------------------------------------------------- */

/* Aparición suave al entrar en pantalla, en toda la web (header.js). Solo si
   hay JavaScript; y si el script no llega a arrancar, "no-motion" lo enseña
   todo igualmente (ver inc/assets.php). */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}

.js [data-reveal].is-in,
.no-motion [data-reveal] {
	opacity: 1;
	transform: none;
}

/* Cambio de página: la nueva se funde con la anterior en vez de aparecer de
   golpe. Lo hacen Chrome, Edge y Safari recientes; el resto cambia como siempre. */
@view-transition {
	navigation: auto;
}

::view-transition-group(root) {
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* "Reducir movimiento" activado en el dispositivo. Antes se apagaba todo y la
   web iba a saltos (el menú, el carrito y los banners cambiaban de golpe).
   Ahora se quitan solo los desplazamientos: lo que sube al aparecer, los
   paneles que entran de lado (pasan a fundirse; ver layout, cart y catalog),
   los desplegables que se deslizan y la foto que se asienta al entrar en
   pantalla. Se quedan los fundidos y el acercamiento lento al pasar el ratón. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	.js [data-reveal] {
		transform: none;
	}
}

/* Migas: "Inicio / Colecciones / Graduadas". */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
	color: var(--muted);
}

.crumbs a {
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--ink);
	text-decoration: underline;
}

/* Sin subrayados en toda la web (Luca, 17/10: los pedía página por página).
   Los enlaces de texto se subrayan solo al pasar el cursor. En los textos
   largos (políticas, preguntas frecuentes, descripciones de producto) siguen
   subrayados: ahí es lo único que dice que se pueden pulsar. Las tarjetas y
   los botones no se subrayan nunca. ---------------------------------------- */
a {
	text-decoration: none;
}

a:not([class]):hover,
.back-link:hover span,
.link:hover {
	text-decoration: underline;
}

.link,
.back-link span {
	border-bottom-color: transparent;
}

.link:hover {
	opacity: 1;
}

.prose a,
.faq-group a,
.product-more__text a {
	text-decoration: underline;
}