/*
Theme Name: CILARIA
Theme URI: https://cilaria.com
Author: CILARIA
Description: Tema propio de CILARIA. Landing de producto a scroll único, con bloques media + texto y preguntas desplegables.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: cilaria
*/

/* ============================================================
   Fuentes de marca (autoalojadas, sin llamadas a Google)

   Cormorant Garamond 600 -> SOLO el logotipo CILARIA
   Jost 300 / 400 / 500   -> descriptores, titulos, texto y botones

   Nota: el manual de marca pedia Cormorant Garamond 300 para la marca y para
   todos los titulos. El cliente eligio, viendolo en pantalla, el 600 para el
   logotipo y Jost para los titulos: a los tamanos de la web el 300 quedaba
   demasiado fino y los titulos con serif y mayusculas espaciadas se leian mal.
   ============================================================ */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');
	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: 'Jost';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/fonts/jost-300-latin.woff2') format('woff2');
	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: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/jost-400-latin.woff2') format('woff2');
	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: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/jost-500-latin.woff2') format('woff2');
	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;
}

/* ============================================================
   Tokens
   ============================================================ */

/* Paleta de marca CILARIA. La geometría se calca de deoss.co/es (medida con
   getComputedStyle); el color y la tipografía son de la marca. */
:root {
	--bg: #f5f1ea;          /* crema, fondo */
	--ink: #1b1a17;         /* tinta */
	--dorado: #b8975a;
	--dorado-claro: #c9a961;
	--gris: #8a8378;        /* gris texto del manual */
	/* El gris de marca da 3,33:1 sobre la crema y no llega al minimo de
	   accesibilidad (4,5:1). Para texto pequeno se usa esta version
	   oscurecida, que da 5,13:1 y mantiene el mismo tono. */
	--gris-texto: #6b655b;
	--blanco: #fff;

	/* Roles heredados de la maqueta, mapeados a la paleta de marca. */
	--titulo: var(--ink);
	--cuerpo: var(--ink);
	--muted: var(--gris-texto);
	--soft: var(--gris-texto);
	--accent: var(--dorado);
	/* Tinta sobre dorado: la pareja del packaging (caja dorada, logo en tinta
	   negra) y la unica que cumple contraste, 6,31:1. */
	--accent-ink: var(--ink);

	/* Espaciado entre letras: es lo que hace la marca. */
	--ls-marca: .40em;
	--ls-titulo: .34em;
	--ls-descriptor: .44em;
	--ls-boton: .20em;

	--radius: 15px;
	--header-h: 51px;
}

/* ============================================================
   Base
   ============================================================ */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	overflow-x: hidden;
}

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

a {
	color: inherit;
}

/* Accesibilidad: enlace de salto y textos sólo para lector de pantalla */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 10px 16px;
	background: var(--bg);
	border-radius: 10px;
	box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .15);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ============================================================
   Cabecera
   ============================================================ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-h);
	z-index: 100;
	pointer-events: none;
}

.site-header a,
.site-header button {
	pointer-events: auto;
}

/* La barra de administración empuja la página hacia abajo, pero no a un
   elemento fijo: sin esto, la cabecera queda debajo de la barra al estar
   con la sesión iniciada. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.site-header .brand {
	position: absolute;
	top: 12px;
	left: 25px;
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* En la portada el logo de cabecera se oculta: el único logo arriba es el
   grande del hero. Es literalmente lo que hace la referencia con
   «#index #header a.logo { display: none }». */
.home .site-header .brand {
	display: none;
}

/* Fuera de la portada, alto fijo como en la referencia (allí 50x50). */
.site-header .brand img,
.site-header .brand svg {
	height: 50px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

/* La marca: Cormorant Garamond 300, mayúsculas, letter-spacing .40em.

   letter-spacing se aplica TAMBIÉN tras la última letra, así que la caja mide
   (tinta + .40em) y al centrarla la palabra queda media letra a la izquierda.
   El margin-right negativo del mismo valor recorta ese hueco final: la caja
   pasa a medir exactamente la tinta y el centrado es exacto por construcción,
   sin depender de text-align ni del número de líneas. */
.wordmark {
	display: inline-block;
	max-width: 100%;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-marca);
	margin-right: calc(-1 * var(--ls-marca));
	line-height: 1;
	color: var(--ink);
	white-space: nowrap;
}

.wordmark--light {
	color: var(--blanco);
}

.site-header .brand .wordmark {
	font-size: 1.15rem;
}

.hero-card .centerlogoblock .wordmark {
	font-size: clamp(2rem, 7.5vw, 5.5rem);
}

.header-nav {
	position: absolute;
	top: 14px;
	right: 25px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	font-size: .85rem;
	font-weight: 500;
	color: var(--muted);
}

.header-nav a {
	text-decoration: none;
	color: var(--muted);
}

.header-nav a:hover {
	color: var(--ink);
}

@media (max-width: 600px) {
	.site-header .brand {
		left: 16px;
		top: 14px;
	}

	.site-header .brand img,
	.site-header .brand svg {
		width: 96px;
	}

	.header-nav {
		right: 16px;
		gap: 12px;
	}
}

/* ============================================================
   Hero
   ============================================================ */

/* Geometría literal de la referencia: la tarjeta la define la propia imagen,
   con height 80vh y max-width 1000. Por debajo de 1000px va a sangre y sin
   margen, y las esquinas inferiores se redondean muchísimo (con transición).
   A partir de 1000px, margen de 20px y radio de 20. */
.hero {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0;
}

.hero-card {
	position: relative;
	width: 100%;
	max-width: 1000px;
	--hero-radius: 0 0 500px 500px;
}

.hero-card .cover {
	width: 100%;
	height: 80vh;
	max-height: 1000px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--hero-radius);
	transition: border-radius 3s ease-in-out;
	background: #2b2724;
}

@media (min-width: 1000px) {

	.hero {
		padding: 20px;
	}

	.hero-card {
		--hero-radius: 20px;
	}
}

/* El velo oscuro sigue el mismo radio que la imagen. La referencia no lo
   lleva, pero su foto es otra y aquí el descriptor va en blanco: mantiene el
   contraste legible sobre cualquier zona clara de la imagen. */
.hero-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--hero-radius);
	transition: border-radius 3s ease-in-out;
	background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .22) 38%, rgba(0, 0, 0, .06) 62%, rgba(0, 0, 0, .45) 100%);
}

.hero-card .centerlogoblock {
	opacity: 0;
	animation: cilaria-fadein 2s 1s ease-in forwards;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: absolute;
	/* 12.9% del alto de la tarjeta: es donde cae el «top: 12.5vh» de la
	   referencia medido sobre su propia imagen. */
	top: 12.9%;
	left: 0;
	width: 100%;
	z-index: 20;
	padding: 0 clamp(16px, 4vw, 40px);
}

/* Composición de marca centrada: marca arriba, descriptor debajo. La
   referencia alinea su claim al borde izquierdo del logo, pero el bloqueo de
   CILARIA es una pila centrada, que es lo que pide el espaciado ancho. */
.hero-card .logoblock {
	display: block;
	width: 100%;
	text-align: center;
}

/* Solo la imagen: si esta regla alcanza al wordmark de texto, le fuerza un
   ancho menor del que necesitan los glifos y se desborda por la derecha.

   El centrado va con margin auto, NO con el text-align del padre: a un
   elemento de bloque con max-width el text-align no le afecta y se queda
   pegado a la izquierda. */
.hero-card .centerlogoblock img.logo,
.hero-card .centerlogoblock svg.logo {
	display: block;
	width: 80%;
	max-width: 700px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* Un solo archivo de logo, invertido para el hero oscuro: es lo que hace la
   referencia. Asi el cliente solo tiene que subir un logo. */
.hero-card .centerlogoblock img.logo.is-inverted {
	filter: invert(100%);
}

/* Descriptor: Jost 200, mayúsculas, letter-spacing .44em.
   inline-block + margin-right negativo: la caja pasa a medir la tinta, así el
   centrado del padre no arrastra el hueco final del espaciado. */
.hero-card .centerlogoblock p {
	display: inline-block;
	max-width: 100%;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: clamp(9px, 1.05vw, 13px);
	line-height: 1.7;
	margin: 14px calc(-1 * var(--ls-descriptor)) 0 0;
	color: var(--blanco);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--ls-descriptor);
}

/* Marquee: recortado al ancho de la tarjeta */
.autoscroll {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	overflow: hidden;
	width: 100%;
	position: absolute;
	/* 14.8% del alto de la tarjeta: equivalente al «bottom: 14vh» del original. */
	bottom: 14.8%;
	left: 0;
	z-index: 40;
	/* Sin máscara de desvanecido: en la referencia el corte de los bordes es
	   seco, sólo overflow:hidden. */
}

.autoscroll .innerscroll {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	/* La lista va duplicada y el desplazamiento es del 50%, así el bucle es
	   continuo y no da el salto que se ve en la referencia al reiniciarse.
	   Para que eso funcione NO puede haber relleno horizontal: sumaría al 100%
	   sin sumar a la copia y el salto volvería en cada vuelta. El aire lateral
	   lo da el margen de cada palabra.
	   La duración la fija cilaria.js para mantener ~84 px/s (la velocidad
	   medida en la referencia) en cualquier ancho de pantalla. */
	animation: cilaria-autoscroll 74s infinite linear;
	padding: 0;
	margin: 0;
	list-style: none;
	will-change: transform;
}

.autoscroll .innerscroll li {
	color: var(--blanco);
	margin: 0 clamp(22px, 5vw, 70px);
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: var(--ls-descriptor);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.autoscroll .innerscroll li {
		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.autoscroll .innerscroll {
		animation: none;
	}

	.hero-card .centerlogoblock,
	.priceblock {
		animation: none;
		opacity: 1;
	}
}

@keyframes cilaria-autoscroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes cilaria-fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ============================================================
   Bloque de precio pegajoso
   ============================================================ */

.priceblock {
	width: 100vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	/* La referencia SÍ le pone el mismo fundido que al logo del hero
	   (_home.styl 227): opacidad 0 y fadein de 2s con 1s de espera. */
	opacity: 0;
	animation: cilaria-fadein 2s 1s ease-in forwards;
	position: sticky;
	top: var(--header-h);
	z-index: 30;
	height: 0;
	margin-top: -30px;
	margin-bottom: 20px;
}

.priceblock .price {
	max-width: calc(100vw - 20px);
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	padding: 5px 8px;
	border-radius: 20px;
	background: var(--bg);
	box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .15);
}

/* Botones: Jost 300, mayúsculas, letter-spacing .20em. */
.priceblock .price .cta {
	order: 2;
	margin: 8px;
	text-decoration: none;
	padding: 13px 16px 13px 20px;
	border-radius: 17px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-boton);
	color: var(--accent-ink);
	background: var(--accent);
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 200ms ease;
}

.priceblock .price .cta:hover {
	background: var(--dorado-claro);
}

.priceblock .price .refund {
	order: 1;
	margin: 8px;
	max-width: 190px;
}

.priceblock .price .refund p {
	color: var(--ink);
	margin: 0;
	max-width: 80vw;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.75;
	text-transform: uppercase;
	letter-spacing: var(--ls-boton);
}

.closing p.amount {
	color: var(--muted);
	font-size: 15px;
	margin: -14px 0 26px;
}

@media (max-width: 600px) {

	.priceblock .price .refund p {
		font-size: 15px;
	}

	.priceblock .price .cta {
		font-size: 16px;
		padding: 10px 14px;
	}
}

/* ============================================================
   Bloques de contenido
   ============================================================ */

.blocks {
	position: relative;
	padding-bottom: 90px;
}

.block {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 90px 0 70px;
}

/* Interior de 960 de contenido = texto 440 + hueco 20 + imagen 500, medido en
   la referencia. El relleno va por fuera de ese ancho para que la fila no se
   rompa.
   row-reverse por defecto: en el marcado la imagen va primero, y en la
   referencia los bloques impares llevan el TEXTO a la izquierda. */
.block .inner {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: calc(960px + 2 * clamp(20px, 5vw, 40px));
	padding: 0 clamp(20px, 5vw, 40px);
	gap: 20px;
}

.block .inner > img,
.block .inner > video {
	width: clamp(240px, 40vw, 500px);
	/* height:auto es imprescindible: los atributos width/height del HTML fijan
	   una altura de presentación que anularía el aspect-ratio. */
	height: auto;
	flex: 0 0 auto;
	border-radius: 20px;
	object-fit: cover;
	aspect-ratio: 2 / 3;
	background: #efeae4;
}

/* .space existe en el marcado de referencia; aquí no separa nada, igual que
   en el original (mide 0). */
.block .inner .space {
	display: none;
}

/* flex-basis 0 + min-width 0: la columna de texto ocupa el resto sin forzar
   un salto de línea del contenedor. */
.block .inner .side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	/* 440 de contenido, sin relleno lateral: en la referencia el texto y la
	   imagen van adyacentes (su .space mide 0) y el aire lo da que el texto no
	   llena la columna. Con relleno, el contenido caía a 400 y las líneas
	   rompían en otro sitio. */
	max-width: 440px;
}

/* Títulos: Jost 400, mayúsculas, letter-spacing .34em. */
.block .inner .side h2 {
	order: 1;
	font-family: 'Jost', sans-serif;
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--ls-titulo);
	margin-right: calc(-1 * var(--ls-titulo));
	color: var(--titulo);
}

.block .inner .side .text {
	order: 2;
	margin: 10px 0 20px;
}

/* Sin separación entre párrafos: en el original van seguidos.
   Texto en Jost 300, sin espaciado extra: el espaciado ancho es para la marca,
   los títulos, los descriptores y los botones, no para leer párrafos. */
.block .inner .side .text p {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--cuerpo);
}

/* Preguntas */
.block .inner .side .questions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	order: 3;
	margin-left: -6px;
	margin-right: -6px;
}

.block .inner .side .questions button {
	order: 3;
	margin: 6px;
	font-size: 11px;
	line-height: 1.5;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-boton);
	color: var(--gris-texto);
	background: none;
	text-decoration: none;
	padding: 8px 7px 8px 9px;
	border-radius: 7px;
	border: 1px solid currentColor;
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
	text-align: left;
}

.block .inner .side .questions button:hover,
.block .inner .side .questions button[aria-expanded='true'] {
	color: var(--accent);
}

/* Desplegable */
.block .inner .side .expansion {
	order: 4;
	position: relative;
	width: 100%;
	height: 0;
	transition: height 600ms ease-in-out;
	overflow: hidden;
}

.block .inner .side .expansion .answer {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	color: var(--soft);
	opacity: 0;
	transition: opacity 600ms ease-in-out;
	z-index: 4;
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.65;
}

.block .inner .side .expansion .answer.open {
	opacity: 1;
	z-index: 5;
}

.block .inner .side .expansion .answer p {
	padding: 18px 0 0;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {

	.block .inner .side .expansion,
	.block .inner .side .expansion .answer {
		transition: none;
	}
}

/* Alternancia igual que la referencia: pares con la imagen a la izquierda. */
.block:nth-child(even) .inner {
	flex-direction: row;
}

@media (max-width: 900px) {

	.block {
		padding: 50px 0 40px;
	}

	.block .inner,
	.block:nth-child(even) .inner {
		flex-direction: column;
		align-items: center;
		gap: 26px;
	}

	.block .inner > img,
	.block .inner > video {
		width: min(100%, 440px);
	}

	.block .inner .side,
	.block:nth-child(even) .inner .side {
		max-width: 440px;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.block .inner .side h2 {
		font-size: 17px;
	}
}

/* ============================================================
   Pie
   ============================================================ */

.bottomlinks {
	width: 100vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	flex-wrap: wrap;
	gap: 4px;
}

.bottomlinks a,
.bottomlinks span {
	padding: 0 20px;
	color: #bbb;
	font-size: .85rem;
	text-decoration: none;
}

.bottomlinks a:hover {
	color: var(--ink);
}

/* ============================================================
   Páginas internas (legales, 404)
   ============================================================ */

.page-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: calc(var(--header-h) + 60px) clamp(20px, 6vw, 40px) 80px;
}

.page-wrap h1 {
	font-family: 'Jost', sans-serif;
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 30px;
	text-transform: uppercase;
	letter-spacing: var(--ls-titulo);
}

.page-wrap h2 {
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 400;
	margin: 36px 0 10px;
	text-transform: uppercase;
	letter-spacing: var(--ls-titulo);
}

.page-wrap p,
.page-wrap li {
	color: var(--ink);
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.65;
}

.page-wrap a {
	color: var(--accent);
}

.page-wrap .back {
	display: inline-block;
	margin-top: 40px;
	color: var(--muted);
	text-decoration: none;
	font-size: .9rem;
}

/* ============================================================
   Reconocimientos
   ============================================================ */

/* Sobrio a proposito: va justo antes del cierre de venta y no debe competir
   con el boton. Filete fino arriba y abajo, y la tipografia de marca. */
.premios {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: clamp(34px, 5vw, 54px) 20px;
	margin: 0 auto;
	max-width: 960px;
	border-top: 1px solid rgba(184, 151, 90, .28);
	border-bottom: 1px solid rgba(184, 151, 90, .28);
}

.premios__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.premios__entidad {
	font-family: 'Jost', sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-descriptor);
	margin-right: calc(-1 * var(--ls-descriptor));
	color: var(--accent);
}

.premios__titulo {
	font-family: 'Jost', sans-serif;
	font-size: clamp(14px, 1.25vw, 17px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-titulo);
	margin-right: calc(-1 * var(--ls-titulo));
	line-height: 1.5;
	color: var(--ink);
}

.premios__anno {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	letter-spacing: var(--ls-titulo);
	margin-right: calc(-1 * var(--ls-titulo));
	line-height: 1;
	color: var(--accent);
}

.premios__item:hover .premios__titulo {
	color: var(--accent);
}

/* ============================================================
   Cierre de venta
   ============================================================ */

.closing {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(20px, 5vw, 40px) 20px clamp(50px, 8vw, 90px);
}

.closing h2 {
	font-family: 'Jost', sans-serif;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: var(--ls-titulo);
	margin-right: calc(-1 * var(--ls-titulo));
}

.closing p {
	color: var(--soft);
	font-size: 1.02rem;
	margin: 0 0 26px;
	max-width: 460px;
}

.closing .cta {
	text-decoration: none;
	padding: 15px 28px 15px 32px;
	border-radius: 17px;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-boton);
	color: var(--accent-ink);
	background: var(--accent);
	transition: background-color 200ms ease;
}

.closing .cta:hover {
	background: var(--dorado-claro);
}

/* ============================================================
   WooCommerce: carrito, pago y confirmación
   ============================================================ */

/* 500 y no 600: de Jost solo hay 300, 400 y 500 en el servidor, y pedir un 600
   haria que el navegador lo engordase por software. */
.woo h1,
.woo h2,
.woo h3 {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-boton);
}

.woo h2 {
	font-size: 1.3rem;
	margin: 34px 0 12px;
}

.woo a {
	color: var(--accent);
}

.woo table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 26px;
}

.woo table th,
.woo table td {
	padding: 12px 10px;
	border-bottom: 1px solid #ece5dd;
	text-align: left;
	font-size: .95rem;
	vertical-align: middle;
}

.woo table th {
	font-weight: 500;
	color: var(--ink);
}

.woo table img {
	width: 64px;
	height: auto;
	border-radius: 10px;
}

.woo .quantity input {
	width: 68px;
	padding: 9px 10px;
	border: 1px solid #e4ded7;
	border-radius: 10px;
	font-family: inherit;
	background: var(--bg);
	color: var(--ink);
}

.woo input[type='text'],
.woo input[type='email'],
.woo input[type='tel'],
.woo input[type='password'],
.woo textarea,
.woo select,
.woo .select2-selection {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e4ded7;
	border-radius: 12px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--ink);
}

.woo input:focus,
.woo textarea:focus,
.woo select:focus {
	outline: none;
	border-color: var(--accent);
}

.woo label {
	display: block;
	font-size: .85rem;
	font-weight: 500;
	margin: 14px 0 6px;
	color: #4a4a4a;
}

.woo .button,
.woo button[type='submit'],
.woo input[type='submit'] {
	display: inline-block;
	padding: 14px 24px 14px 28px;
	border: 0;
	border-radius: 15px;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ls-boton);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.woo .button:hover,
.woo button[type='submit']:hover {
	background: var(--dorado-claro);
	color: var(--accent-ink);
}

.woo .woocommerce-message,
.woo .woocommerce-info,
.woo .woocommerce-error {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05);
	font-size: .93rem;
}

.woo .woocommerce-error {
	color: #b4564e;
}

.woo .cart-collaterals,
.woo .cart_totals {
	margin-top: 20px;
}

.woo .woocommerce-privacy-policy-text p,
.woo .woocommerce-terms-and-conditions-wrapper p {
	font-size: .82rem;
	color: var(--soft);
}

.woo #payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
}

.woo #payment ul.payment_methods li {
	padding: 10px 0;
	border-bottom: 1px solid #ece5dd;
}

.woo .required {
	color: #b4564e;
	text-decoration: none;
}