/* ==========================================================================
   Kamala — cabecera, menú móvil y pie.
   Escritorio desde 1100 px: por debajo no caben menú + utilidades con texto.
   ========================================================================== */

/* Cabecera ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* Sobre la portada: integrada en la foto, sin bloque blanco.
   data-tone lo fija cada portada según su imagen: texto negro o blanco. */
.site-header.is-overlay {
	position: fixed;
	inset: 0 0 auto;
}

.site-header.is-overlay:not(.is-scrolled):not(:focus-within):not(:hover) {
	border-bottom-color: transparent;
	background: transparent;
}

.site-header.is-overlay[data-tone="light"]:not(.is-scrolled):not(:focus-within):not(:hover) {
	color: var(--paper);
}

/* Automático: el texto se invierte según lo que tenga debajo (claro sobre
   oscuro, oscuro sobre claro), así se lee con cualquier foto. */
.site-header.is-overlay[data-tone="auto"]:not(.is-scrolled):not(:focus-within):not(:hover) {
	color: var(--paper);
	mix-blend-mode: difference;
}

.site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: var(--header-h);
	padding-inline: var(--gutter);
}

/* Logo de las dos K: casi cuadrado (1,79 a 1). Los anchos de abajo dan
   32 px de alto en la cabecera y 26 en la del móvil. Antes, "KAMALA" a 150
   y 100 px de ancho. */
.site-header__logo {
	display: block;
	width: 57px;
	color: inherit;
}

.site-header__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.logo-kk__k2 {
	fill: var(--logo-k2, currentColor);
}

.site-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	margin-left: -12px;
}

/* Menú principal */

.site-nav__list,
.site-nav__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Separación algo menor (segunda revisión del cliente: "ajustar el espaciado
   del menú", con "Acceso ópticas" más largo que "Profesionales"): a 1240 px
   quedaban 24 px entre el menú y el logo. */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 28px);
}

.site-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--header-h);
}

.site-nav__list a {
	font-size: var(--fs-label);
	letter-spacing: var(--track);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* 7 arriba y 6 + 1 de raya abajo: el texto queda centrado en la misma línea que
   el logo y las utilidades de la derecha (revisión del cliente: iba medio
   píxel descolocado por la raya). */
/* La raya se dibuja de izquierda a derecha al pasar el ratón y se va por la
   derecha al quitarlo (Luca, 16/10; antes aparecía de golpe). Va pintada en el
   hueco del borde transparente, así no mueve nada. */
.site-nav__list > li > a {
	padding-block: 7px 6px;
	border-bottom: 1px solid transparent;
	background: linear-gradient(currentColor, currentColor) right bottom / 0 1px no-repeat;
	background-origin: border-box;
	transition: background-size 0.4s var(--ease);
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible,
.site-nav__list > .current-menu-item > a,
.site-nav__list > .current-menu-ancestor > a {
	background-position: left bottom;
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__list > li > a {
		transition: none;
	}
}

/* "Nosotros" (clase "solo-menu-movil" en el propio menú): el cliente lo pide
   en la cabecera. Con cinco apartados a la izquierda solo cabe en pantallas
   anchas; por debajo queda en el menú móvil y en el pie. Desde 1320 px: con
   "Acceso ópticas" (13/10), entre 1240 y 1300 empujaba el logo fuera del
   centro. */
@media (max-width: 1319px) {
	.site-nav__list > .solo-menu-movil {
		display: none;
	}
}

/* Desplegable: mismo fondo blanco que la cabecera con scroll. */
.site-nav__list > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: -24px;
	min-width: 240px;
	padding: 20px 24px 24px;
	border: 1px solid var(--line);
	border-top: 0;
	background: var(--paper);
	color: var(--ink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s 0.2s;
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.site-nav__list .sub-menu li + li {
	margin-top: 12px;
}

.site-nav__list .sub-menu .sub-menu {
	margin-top: 12px;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}

.site-nav__list .sub-menu .sub-menu a {
	color: var(--muted);
}

.site-nav__list .sub-menu a:hover {
	text-decoration: underline;
	color: var(--ink);
}

/* Utilidades */

.site-header__tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(12px, 1.5vw, 22px);
}

.site-header__rule {
	width: 1px;
	height: 16px;
	background: currentColor;
	opacity: 0.35;
}

.tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tap);
	font-size: var(--fs-label);
	letter-spacing: var(--track);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.tool:hover .tool__label {
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

.tool__count {
	font-size: var(--fs-micro);
	font-weight: 400;
}

.tool__count[hidden] {
	display: none;
}

.lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-label);
	letter-spacing: var(--track);
}

.lang__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.2s var(--ease);
}

.lang__item abbr {
	text-decoration: none;
}

.lang__item:hover,
.lang__item[aria-current="true"] {
	opacity: 1;
}

.lang__sep {
	opacity: 0.4;
}

/* Idioma en cajas (pie): el actual, relleno. */
.lang--boxed {
	gap: 6px;
}

.lang--boxed .lang__sep {
	display: none;
}

.lang--boxed .lang__item {
	justify-content: center;
	min-width: 40px;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid var(--grey);
	border-radius: 3px;
	font-size: var(--fs-micro);
	opacity: 1;
}

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

@media (max-width: 1099px) {
	.site-header__burger {
		display: inline-flex;
	}

	.site-header__logo {
		width: 46px;
	}

	.site-nav,
	.site-header__tools .lang,
	.site-header__rule,
	.tool--account {
		display: none;
	}

	.site-header__tools {
		gap: 0;
		margin-right: -12px;
	}

	.site-header__tools .tool {
		justify-content: center;
		width: var(--tap);
	}

	.site-header__tools .tool__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.site-header__tools .tool__count {
		margin-left: -4px;
	}
}

/* La portada empieza debajo de la cabecera transparente. */
.has-hero .site-main > :first-child {
	margin-top: 0;
}

/* Menú móvil ------------------------------------------------------------------ */

.drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(16, 24, 32, 0);
	transition: background-color 0.3s var(--ease);
}

.drawer[hidden] {
	display: none;
}

.drawer.is-open {
	background: rgba(16, 24, 32, 0.4);
}

/* Aspecto como el menú de Kaleos (pedido del cliente, 12/10): filas pequeñas
   en mayúscula, líneas de lado a lado y los subapartados ocultos hasta que
   se toca su fila. */
.drawer__panel {
	position: relative; /* encierra los textos ocultos, ver home.css */
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper);
	transform: translateX(-100%);
	transition: transform 0.35s var(--ease);
}

.drawer.is-open .drawer__panel {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.drawer__panel {
		opacity: 0;
		transform: none;
		transition: opacity 0.25s var(--ease);
	}

	.drawer.is-open .drawer__panel {
		opacity: 1;
	}
}

.drawer__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	flex: none;
	height: var(--header-h);
	padding-inline: var(--gutter);
	border-bottom: 1px solid var(--line);
}

.drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	margin-left: -12px;
}

.drawer__logo {
	display: block;
	width: 46px;
}

.drawer__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.drawer__list,
.drawer__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer__list > li {
	border-bottom: 1px solid var(--line);
}

.drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding-inline: var(--gutter);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Fila con subapartados: se abre y se cierra al tocarla (header.js). */
.drawer__list > .menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: -4px 6px 0 0;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s var(--ease);
}

.drawer__list > .menu-item-has-children.is-open > a::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Sin JavaScript los subapartados quedan a la vista. */
.js .drawer__list > .menu-item-has-children:not(.is-open):not(.is-closing) > .sub-menu {
	display: none;
}

.drawer__list .sub-menu {
	padding-bottom: 10px;
}

.drawer__list .sub-menu a {
	min-height: var(--tap);
	padding-left: calc(var(--gutter) + 16px);
	color: var(--muted);
}

.drawer__list .sub-menu .sub-menu {
	padding-bottom: 0;
}

.drawer__list .sub-menu .sub-menu a {
	padding-left: calc(var(--gutter) + 32px);
}

.drawer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding: 24px var(--gutter);
}

.drawer-open {
	overflow: hidden;
}

/* Pie ------------------------------------------------------------------------
   Con el orden del de MUUD (Judith, 17/10: "ahora es idéntico a Kaleos"): el
   boletín en una caja blanca con el botón dentro, títulos de grupo muy
   pequeños, enlaces en minúscula y, abajo, idioma, logo grande, pagos y
   legales. El color, el de antes (gris claro y negro): se probó en negro y el
   cliente prefirió el de antes (17/10). En móvil cada grupo sigue en un
   desplegable. */

.site-footer {
	--footer-text: var(--muted);
	--footer-line: var(--line);
	padding-inline: var(--gutter);
	background: var(--surface);
	color: var(--ink);
}

.site-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 27.5fr) minmax(0, 63.7fr);
	gap: 48px 8.8%;
	padding-block: clamp(56px, 7.3vw, 105px) clamp(40px, 5.6vw, 80px);
}

.newsletter {
	align-self: start;
}

/* "Newsletter", igual que los títulos de los grupos (MUUD). */
.newsletter__lead {
	margin-bottom: 11px;
	padding-block: 5.5px;
	font-size: 0.55rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--footer-text);
}

/* El rótulo del campo sigue ahí para lectores de pantalla; a la vista queda
   el texto de ayuda dentro del campo. */
.newsletter .field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Campo y botón dentro de una caja blanca, con la curva de los botones. */
.newsletter__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 420px;
	margin-bottom: 0; /* ya no hay casilla debajo */
	padding: 0 4px 0 16px;
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
}

.newsletter__row:focus-within {
	box-shadow: 0 0 0 2px var(--grey);
}

.newsletter__row .field {
	flex: 1;
	min-width: 0;
}

.newsletter .field__input {
	width: 100%;
	min-height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.newsletter .field__input:focus {
	outline: none;
}

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

.newsletter__submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 46px;
	padding: 0 12px;
	color: var(--ink);
	font-size: var(--fs-label);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: opacity 0.2s var(--ease);
}

.newsletter__submit:hover {
	opacity: 0.6;
}

.newsletter__message {
	margin: 14px 0 0;
	font-size: var(--fs-small);
}

.site-footer__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* tres grupos, como MUUD */
	gap: 40px 24px;
}

/* Tamaños y espacios de MUUD, medidos en muudbrand.com (Luca, 17/10: "los
   tamaños y espacios de las letras también, igual"). En escritorio, títulos
   de 8,8 px muy espaciados y enlaces de 10,84 px a 23,4 px uno de otro. */
.site-footer__heading {
	margin-bottom: 11px;
	padding-block: 5.5px;
	font-size: 0.55rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--footer-text);
}

/* En escritorio el botón del título no se nota: es un título. */
.site-footer__toggle {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: default;
}

/* Enlaces del pie: en minúscula, como en MUUD. */
.site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.6776rem;
	line-height: 18.25px;
	/* En gris, no en negro (Luca, 17/10: "se ven demasiado negras"). */
	color: var(--footer-text);
}

.site-footer__links li + li,
.site-footer__links + .site-footer__links {
	margin-top: 5px;
}

.site-footer__links a {
	letter-spacing: 0.02em;
	text-decoration: none;
}

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

.site-footer__brand {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: clamp(24px, 2.6vw, 38px);
}

.site-footer .lang--boxed .lang__item {
	/* Más pequeños (Luca, 17/10). */
	min-width: 46px;
	min-height: 26px;
	border-color: rgba(16, 24, 32, 0.28);
	border-radius: var(--radius);
	font-size: 0.6875rem;
}

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

/* El logo, más grande (en MUUD es lo que cierra el pie). */
.site-footer__logo {
	display: block;
	width: clamp(76px, 6vw, 96px); /* más pequeño (Luca, 17/10) */
	margin-top: 24px;
}

.payments {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.8vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.payments li {
	display: flex;
	align-items: center;
	height: 30px;
}

.payments li + li {
	padding-left: clamp(16px, 1.8vw, 26px);
	border-left: 1px solid var(--footer-line);
}

.payments .icon {
	width: 40px;
	height: 30px;
}

/* Logos de pago en negro de marca, como en el boceto. */
.payments img {
	width: auto;
	height: 24px;
	filter: brightness(0);
	opacity: 0.88;
}

.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-block: clamp(24px, 2.8vw, 40px);
	border-top: 1px solid var(--footer-line);
	color: var(--footer-text);
	font-size: var(--fs-label);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px clamp(20px, 2.6vw, 38px);
	margin: 0;
	padding: 0;
	list-style: none;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.site-footer__legal-links a {
	text-decoration: none;
}

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

.site-footer__copy {
	margin: 0;
}

@media (max-width: 899px) {
	.site-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
		padding-block: 52px 40px;
	}

	.newsletter__row {
		max-width: none;
	}

	/* Cada grupo, un desplegable entre líneas finas. Sin JavaScript quedan
	   abiertos (la clase "js" la pone la propia página al cargar). */
	.site-footer__groups {
		display: block;
		border-top: 1px solid var(--footer-line);
	}

	.site-footer__group {
		border-bottom: 1px solid var(--footer-line);
	}

	/* En móvil, como MUUD: título de 14 px, fila de 63 px y un "+" que pasa
	   a "−" al abrir. El espaciado entre letras es el nuestro (Luca: "espacios
	   no entre letras o palabras, entre apartados"). */
	/* Títulos más pequeños, más grises y con las letras más juntas (Luca,
	   17/10: "algo más pequeñas, algo más grises y algo más cerca"). */
	.site-footer__heading {
		margin: 0;
		padding: 0;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		line-height: 1.5;
		color: rgba(16, 24, 32, 0.55); /* negro de marca al 55 % */
	}

	.site-footer__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 63px;
		cursor: pointer;
	}

	.site-footer__toggle::after {
		content: "+";
		flex: none;
		width: 14px;
		font-size: 1.125rem;
		font-weight: 300;
		line-height: 1;
		text-align: center;
	}

	.site-footer__group.is-open .site-footer__toggle::after {
		content: "\2212"; /* signo menos */
	}

	.js .site-footer__group:not(.is-open):not(.is-closing) .site-footer__panel {
		display: none;
	}

	.site-footer__panel {
		padding-bottom: 16px;
	}

	/* Enlaces a 30,5 px uno de otro, como MUUD; el relleno mantiene la
	   separación si un enlace ocupa dos líneas. */
	.site-footer__links li + li,
	.site-footer__links + .site-footer__links {
		margin-top: 0;
	}

	.site-footer__links a {
		display: inline-flex;
		align-items: center;
		min-height: 30.5px;
		padding-block: 6px;
		line-height: 18.25px;
	}

	.site-footer__brand {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.site-footer .lang--boxed .lang__item {
		min-width: 38px;
		min-height: 24px;
		font-size: 0.625rem;
	}

	.site-footer__logo {
		width: 72px;
		margin-top: 20px;
	}

	/* A la izquierda, como el resto del pie (revisión del cliente). */
	.payments {
		justify-content: flex-start;
	}

	.site-footer__legal {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-footer__legal-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		letter-spacing: 0.06em;
	}

	.site-footer__legal-links a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/* Fotos a sangre con texto encima: portada, marcas, sol y titanio ------------ */

.tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--surface);
	color: var(--paper);
	text-decoration: none;
}

/* Doble clase a propósito: WooCommerce fuerza "height: auto" en todas las
   imágenes de las páginas que marca como tienda, y debe ganar esta regla. */
.tile .tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* --tile-zoom acerca la foto a su punto de interés (ver kamala_tile_image). */
	transform: scale(var(--tile-zoom, 1));
	transition: transform 1.3s var(--ease-soft);
}

/* Al pasar el ratón la foto se acerca despacio y de forma continua. Solo con
   ratón: en pantallas táctiles el "hover" se quedaba pegado tras tocar.
   La foto va en su propia capa (will-change) para que el movimiento lo haga
   la tarjeta gráfica y no se repinte a saltos; la vuelta es algo más corta. */
@media (hover: hover) and (pointer: fine) {
	.tile .tile__img {
		will-change: transform;
		backface-visibility: hidden;
	}

	/* Todo el banner es pulsable, no solo su enlace: el enlace se estira
	   hasta cubrirlo (lo que sobra lo recorta el propio banner). */
	.tile__link::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 200vmax;
	}

	.tile .tile__link:hover {
		opacity: 1;
	}
}

@media (hover: hover) and (pointer: fine) {
	.tile:hover .tile__img,
	.tile:focus-within .tile__img {
		transform: scale(calc(var(--tile-zoom, 1) * 1.06));
		transition-duration: 1.9s;
	}
}

/* Al entrar en pantalla la foto llega un poco acercada y se asienta despacio
   en su encuadre (header.js pone .is-seen y, mientras dura, .is-settling).
   En todos los dispositivos: es el movimiento de los banners en móvil, donde
   no hay ratón. */
.js .tile:not(.is-seen) .tile__img {
	transform: scale(calc(var(--tile-zoom, 1) * 1.08));
}

.tile.is-settling .tile__img {
	transition-duration: 2.4s;
}

@media (prefers-reduced-motion: reduce) {
	.js .tile:not(.is-seen) .tile__img {
		transform: scale(var(--tile-zoom, 1));
	}
}

/* Sombra muy leve abajo para que el texto blanco se lea sobre cualquier foto.
   Texto a 50 px del borde y 60 px del pie, como en los bocetos. */
.tile__text {
	position: absolute;
	inset: auto 0 0;
	padding: 120px clamp(20px, 3.5vw, 50px) clamp(24px, 4.2vw, 60px);
	background: linear-gradient(to top, rgba(16, 24, 32, 0.42), rgba(16, 24, 32, 0));
}

.tile__kicker {
	margin-bottom: 8px;
	font-size: clamp(0.6875rem, 0.6rem + 0.3vw, 0.875rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tile__title {
	margin-bottom: clamp(16px, 2.2vw, 30px);
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.375rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.1;
}

/* Titanio: letras muy abiertas. */
.tile__kicker--wide {
	font-size: var(--fs-label);
	letter-spacing: 0.3em;
}

.tile__title--wide {
	font-size: clamp(1.5rem, 1rem + 1.75vw, 2.5rem);
	letter-spacing: 0.2em;
}

.tile__title--wide + .tile__link,
.tile__kicker--wide + .tile__link {
	letter-spacing: 0.2em;
}

/* Los enlaces de las fotos ("Ver Kayros", "Ver gafas de hombre", "Ver
   titanio"), sin subrayar (Judith, 17/10). */
.tile .tile__link {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Portada: dos fotos, cada una con su rótulo pequeño. */

.hero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 100svh;
}

.hero__half {
	min-height: 60svh;
}

/* Rótulo en blanco sobre una sombra leve, como el resto de fotos con texto.
   Antes se invertía según la foto y sobre tonos medios (una chaqueta beige)
   quedaba gris y casi no se leía. */
.hero__half::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(to top, rgba(16, 24, 32, 0.45), rgba(16, 24, 32, 0));
	pointer-events: none;
}

.hero__caption {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(20px, 2.8vw, 40px);
	z-index: 1;
	color: var(--paper);
	font-size: clamp(0.8125rem, 0.74rem + 0.25vw, 0.9375rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Portadas que van rotando (DISEÑOS WEB del cliente, 14/10). En cada mitad
   están todas sus fotos, una encima de otra: se ve la activa y el cambio es
   un fundido, en las dos mitades a la vez, cada 6 segundos (home.js). Sin
   controles a la vista: Andrés los probó encima del rótulo y antes a su
   derecha, y prefirió quitarlos. Con "reducir movimiento" no rotan: se
   queda la primera. */
.hero--rotating .hero__img {
	opacity: 0;
	transition: opacity 1.4s var(--ease-soft), transform 1.3s var(--ease-soft);
}

.hero--rotating .hero__img.is-active {
	opacity: 1;
}

.specimen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.specimen .micro {
	margin-bottom: 20px;
}

@media (max-width: 899px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__half {
		min-height: 78svh;
	}

	.specimen {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* WooCommerce: fuera el morado y el verde oliva de serie ------------------------
   Base de marca para botones, avisos y precios. El diseño completo de carrito,
   pago y ficha va en sus propias hojas. */

.woocommerce :is(a.button, button.button, input.button, #respond input#submit),
.woocommerce-page :is(a.button, button.button, input.button) {
	padding: 16px 28px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	font-size: var(--fs-label);
	font-weight: 400;
	letter-spacing: var(--track-wide);
	line-height: 1.2;
	text-transform: uppercase;
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit):hover,
.woocommerce-page :is(a.button, button.button, input.button):hover,
.woocommerce :is(a.button, button.button, input.button, #respond input#submit).alt,
.woocommerce-page :is(a.button, button.button, input.button).alt {
	background: var(--ink);
	color: var(--paper);
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit).alt:hover,
.woocommerce-page :is(a.button, button.button, input.button).alt:hover {
	border-color: var(--ink-hover);
	background: var(--ink-hover);
	color: var(--paper);
}

.woocommerce :is(.woocommerce-message, .woocommerce-info) {
	border-top-color: var(--ink);
	background: var(--surface);
	color: var(--ink);
}

.woocommerce :is(.woocommerce-message, .woocommerce-info)::before {
	color: var(--ink);
}

.woocommerce span.onsale {
	border-radius: 3px;
	background: var(--ink);
	color: var(--paper);
	font-weight: 400;
}

.woocommerce :is(div.product, ul.products li.product) :is(p.price, span.price, .price),
.woocommerce .star-rating span::before {
	color: var(--ink);
}

/* Ayuda ----------------------------------------------------------------------
   Botón "¿Te ayudamos?" y su panel (inc/help.php). Es un <details>: abre y
   cierra sin JavaScript. Va por debajo del menú, los filtros y el carrito
   lateral, que lo tapan cuando se abren. */

.help {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 85;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 10px;
}

/* Al llegar al pie se aparta para no tapar sus enlaces (header.js). */
.help.is-away:not([open]) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.help {
	transition: opacity 0.25s var(--ease), visibility 0s;
}

/* Solo el icono, en un cuadrado con la curva suave de los botones. */
.help__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
	list-style: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.help__button::-webkit-details-marker {
	display: none;
}

.help__icon {
	display: inline-flex;
}

.help__button .icon {
	width: 22px;
	height: 22px;
}

/* Cerrado enseña el bocadillo; abierto, la equis. */
.help__icon--close,
.help[open] .help__icon--open {
	display: none;
}

.help[open] .help__icon--close {
	display: inline-flex;
}

.help[open] .help__button,
.help__button:hover {
	background: var(--ink);
	color: var(--paper);
}

.help__panel {
	width: min(330px, calc(100vw - 40px));
	padding: 18px 20px 8px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
}

.help__greeting {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.help__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.help__list li + li {
	border-top: 1px solid var(--line);
}

.help__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding-block: 10px;
	text-decoration: none;
}

.help__option-text {
	display: grid;
	gap: 4px;
}

.help__option-title {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.help__option-note {
	font-size: 0.75rem;
	color: var(--muted);
}

.help__option .icon {
	flex: none;
	transition: transform 0.25s var(--ease);
}

.help__option:hover .icon {
	transform: translateX(4px);
}

@media (max-width: 899px) {
	.help {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom));
	}

	/* En la ficha, por encima de la barra fija de compra. */
	.single-product .help {
		bottom: calc(var(--product-bar-h, 0px) + 12px);
	}
}

@media print {
	.help {
		display: none;
	}
}

/* Aviso de cookies (CookieYes en modo local, tools/aviso-cookies.php): caja
   abajo a la derecha como la referencia de Andrés (17/10). Título, una frase,
   "Aceptar todo" en negro a todo el ancho y debajo "Rechazar" y "Configurar"
   con borde. El plugin pone colores en línea: hace falta !important. ------ */
.cky-consent-container.cky-box-bottom-right {
	right: 20px !important;
	bottom: 20px !important;
	left: auto !important;
	width: 460px !important;
	max-width: calc(100vw - 40px) !important;
}

.cky-consent-container .cky-consent-bar {
	padding: 20px 20px 18px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--paper) !important;
	box-shadow: 0 8px 30px rgba(16, 24, 32, 0.14) !important;
	font-family: var(--font) !important;
}

.cky-consent-container .cky-banner-btn-close {
	display: none !important;
}

.cky-consent-container .cky-title {
	margin: 0 0 10px !important;
	color: var(--ink) !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p {
	color: var(--ink) !important;
	font-size: 0.8125rem !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
}

.cky-consent-container .cky-notice-btn-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 16px !important;
	padding: 0 !important;
}

/* En móvil el plugin mete 24 px a los lados del título y el texto. */
.cky-consent-container .cky-title,
.cky-consent-container .cky-notice-des {
	padding: 0 !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
	flex: 1 1 0 !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 8px 12px !important;
	border: 1px solid var(--ink) !important;
	border-radius: var(--radius) !important;
	background: transparent !important;
	color: var(--ink) !important;
	font-family: var(--font) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
	opacity: 1 !important;
}

/* "Aceptar todo" arriba y a todo el ancho; debajo "Rechazar" y "Configurar". */
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
	order: -2;
	flex-basis: 100% !important;
	background: var(--ink) !important;
	color: var(--paper) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject {
	order: -1;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn:hover {
	background: var(--surface) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept:hover {
	background: var(--ink-hover) !important;
}

@media (max-width: 599px) {
	.cky-consent-container.cky-box-bottom-right {
		right: 10px !important;
		bottom: 10px !important;
		width: calc(100vw - 20px) !important;
		max-width: none !important;
	}
}

/* Panel "Configurar" de las cookies: botones y colores de la marca. */
.cky-preference-center {
	font-family: var(--font) !important;
}

.cky-preference-center .cky-btn {
	border: 1px solid var(--ink) !important;
	border-radius: var(--radius) !important;
	background: transparent !important;
	color: var(--ink) !important;
	font-family: var(--font) !important;
	font-weight: 400 !important;
}

.cky-preference-center .cky-btn-accept {
	background: var(--ink) !important;
	color: var(--paper) !important;
}

.cky-preference-center .cky-show-desc-btn,
.cky-preference-center .cky-always-active {
	color: var(--ink) !important;
}