/*
 * kaukas.css — hoja de estilos principal del tema Kaukas.
 *
 * Tipografía: Archivo Black, Newsreader y Archivo están auto-alojadas como
 * WOFF2 (subconjunto latin) en assets/fonts/ — se descargaron directo de
 * Google Fonts (licencia SIL Open Font License) para no depender de un CDN
 * externo en cada visita: mejor para una tienda que corre desde una casa.
 */

@font-face {
	font-family: 'Archivo Black';
	src: url('../fonts/archivo-black.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('../fonts/newsreader-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('../fonts/newsreader-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Paleta real de la marca (del logo/etiqueta que trajo el cliente,
	   septiembre 2026) — reemplaza la paleta verde monte/cereza/maduro
	   original de la sección 6 del brief. Los NOMBRES de las variables se
	   dejaron igual para no tener que tocar cada regla del archivo; ahora
	   "--monte" es el marrón principal de la marca, no verde. */
	--monte: #4B1A0B;      /* marrón oscuro — antes verde monte */
	--monte-2: #5C2312;    /* superficies elevadas sobre el marrón */
	--monte-3: #7A3A20;    /* bordes y detalles sobre fondo oscuro */
	--papel: #FFFFFF;      /* blanco de la etiqueta */
	--papel-2: #F7E9DC;    /* crema cálido derivado, para secciones alternas */
	--cereza: #7E1416;     /* rojo oscuro de la etiqueta */
	--cereza-viva: #ED2024; /* rojo vivo de la etiqueta — usar solo en superficies SIN texto encima (bordes, puntos, detalles): con texto blanco da 4.35:1, por debajo del mínimo de contraste AA (4.5:1) */
	--cereza-boton: #DD1216; /* mismo rojo vivo, un poco más profundo (~5:1 con blanco) — SOLO para fondos de botón/CTA con texto, para que "Agregar al pedido" y "Realizar el pedido" cumplan accesibilidad sin perder el rojo llamativo de marca */
	--maduro: #F15E22;     /* naranja de la etiqueta — acentos, insignias */
	--tinta: #2E0F08;      /* texto — un poco más oscuro que --monte */
	--tinta-suave: #7A5142; /* texto secundario, marrón cálido */

	--fuente-titulo: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
	--fuente-cuerpo: 'Newsreader', Georgia, 'Times New Roman', serif;
	--fuente-interfaz: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--radio: 14px;
	/* rgba(46,15,8) = --tinta cálido; antes era rgba(20,37,28) (verde), resto
	   sin actualizar de la paleta "verde monte" original de antes del
	   rediseño con la marca real (sección 7 de ESTADO.md). */
	--sombra: 0 6px 24px rgba(46, 15, 8, 0.14);
	--ancho-maximo: 1180px;
	--ancho-texto: 70ch;

	color-scheme: light;
}

/* -------------------------------------------------------------------- */
/* Reinicio y base                                                       */
/* -------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--fuente-cuerpo);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--fuente-titulo);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 0.5em;
	text-transform: none; /* nunca mayúsculas sostenidas */
}
h1 { font-size: clamp(2.2rem, 5vw + 1rem, 3rem); }
h2 { font-size: clamp(1.7rem, 3vw + 1rem, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2vw + 1rem, 1.8rem); }

p { max-width: var(--ancho-texto); }

a { color: var(--cereza); }
/* --cereza-viva como color de TEXTO (no de fondo) también queda en 4.35:1
   sobre blanco, por debajo del mínimo AA — se usa --cereza-boton en su
   lugar, igual que en los botones. */
a:hover { color: var(--cereza-boton); }

:focus-visible {
	outline: 3px solid var(--maduro);
	outline-offset: 3px;
	border-radius: 4px;
}

.contenedor {
	max-width: var(--ancho-maximo);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.solo-lectores-pantalla {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--maduro);
	color: var(--tinta);
	padding: 0.75rem 1.25rem;
	z-index: 1000;
	font-family: var(--fuente-interfaz);
	font-weight: 700;
}
.saltar-al-contenido:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------------------- */
/* Botones y controles de interfaz                                      */
/* -------------------------------------------------------------------- */

.boton, button, input[type="submit"], .button, .wp-block-button__link, #place_order {
	font-family: var(--fuente-interfaz);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	border: none;
	border-radius: 999px;
	padding: 0.85rem 1.6rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: transform 0.15s ease, background-color 0.15s ease;
	background: var(--cereza-boton);
	color: var(--papel);
}
.boton:hover, button:hover, .button:hover, #place_order:hover { background: var(--cereza); color: var(--papel); }
.boton:active, button:active { transform: scale(0.97); }
.boton.boton-secundario, .button.alt {
	background: transparent;
	color: var(--monte);
	border: 2px solid var(--monte-3);
}
.boton.boton-secundario:hover { background: var(--monte-3); color: var(--papel); }
/* En la portada, este botón vive DENTRO del fondo oscuro (--monte) — con
   el texto en ese mismo color quedaba invisible (texto marrón sobre fondo
   marrón). Ahí necesita colores claros, no los del uso normal en fondo
   claro (como el de la página 404). */
.kaukas-portada-acciones .boton-secundario {
	color: var(--papel);
	border-color: rgba(255, 255, 255, 0.55);
}
.kaukas-portada-acciones .boton-secundario:hover { background: rgba(255, 255, 255, 0.12); color: var(--papel); }

.etiqueta-campo {
	font-family: var(--fuente-interfaz);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--tinta-suave);
}

select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
	font-family: var(--fuente-interfaz);
	border: 2px solid var(--papel-2);
	background: #fff;
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	font-size: 1rem;
	color: var(--tinta);
}
select:focus, input:focus, textarea:focus { border-color: var(--maduro); }

/* -------------------------------------------------------------------- */
/* Encabezado                                                            */
/* -------------------------------------------------------------------- */

.kaukas-encabezado {
	background: var(--monte);
	color: var(--papel);
	position: sticky;
	top: 0;
	z-index: 100;
}
.kaukas-encabezado .contenedor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.85rem;
	gap: 1rem;
}
.kaukas-encabezado a { color: var(--papel); text-decoration: none; }
.kaukas-marca {
	font-family: var(--fuente-titulo);
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.kaukas-marca img, .kaukas-marca svg { height: 2.7rem; width: auto; border-radius: 50%; }

.kaukas-nav-principal {
	display: none;
	font-family: var(--fuente-interfaz);
	font-weight: 600;
}
.kaukas-nav-principal ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.kaukas-nav-principal a { opacity: 0.9; }
.kaukas-nav-principal a:hover { opacity: 1; }

.kaukas-acciones-cabecera { display: flex; align-items: center; gap: 0.85rem; }
.kaukas-boton-cuenta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--papel);
	opacity: 0.9;
}
.kaukas-boton-cuenta:hover { opacity: 1; }
.kaukas-boton-cuenta svg { width: 22px; height: 22px; flex-shrink: 0; }
.kaukas-boton-cuenta__texto { font-family: var(--fuente-interfaz); font-weight: 600; font-size: 0.85rem; }
@media (max-width: 620px) {
	/* En móvil solo el ícono, para no apretar el encabezado. */
	.kaukas-boton-cuenta__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
.kaukas-boton-carrito {
	position: relative;
	background: var(--monte-3);
	border-radius: 999px;
	padding: 0.55rem 0.9rem;
	font-family: var(--fuente-interfaz);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.kaukas-boton-carrito svg { width: 19px; height: 19px; flex-shrink: 0; }
@media (max-width: 460px) {
	/* En pantallas muy angostas, solo el ícono y el número — el botón de
	   cuenta ya se reduce igual (ver .kaukas-boton-cuenta__texto). */
	.kaukas-boton-carrito__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
.kaukas-boton-carrito .cantidad {
	background: var(--maduro);
	color: var(--tinta);
	border-radius: 999px;
	min-width: 1.4rem;
	height: 1.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
}

.kaukas-boton-menu {
	background: transparent;
	border: none;
	color: var(--papel);
	padding: 0.4rem;
}
.kaukas-boton-menu svg { width: 26px; height: 26px; }

@media (min-width: 860px) {
	.kaukas-nav-principal { display: block; }
	.kaukas-boton-menu { display: none; }
}

.kaukas-menu-movil {
	display: none;
	background: var(--monte-2);
	padding: 1rem 1.25rem 1.5rem;
}
.kaukas-menu-movil.abierto { display: block; }
.kaukas-menu-movil ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.kaukas-menu-movil a { font-family: var(--fuente-interfaz); font-weight: 600; font-size: 1.1rem; }

/* -------------------------------------------------------------------- */
/* Portada                                                                */
/* -------------------------------------------------------------------- */

.kaukas-portada-hero {
	position: relative;
	/* Degradado cálido con los mismos tonos de marca (--monte / --monte-2),
	   en vez del marrón plano — le da más profundidad y vida a la portada
	   sin introducir ningún color nuevo. */
	background: radial-gradient(130% 150% at 12% -15%, var(--monte-2), var(--monte) 60%);
	color: var(--papel);
	overflow: hidden;
	padding-top: 2.5rem;
}
.kaukas-portada-hero .contenedor {
	position: relative;
	z-index: 2;
	padding-bottom: 3rem;
	display: grid;
	gap: 1.5rem;
}
.kaukas-portada-ilustracion {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
}
.kaukas-portada-hero.lista .kaukas-portada-ilustracion { opacity: 1; transition: opacity 1.1s ease; }
.kaukas-portada-ilustracion svg { width: 100%; height: 100%; display: block; }

.kaukas-portada-texto { max-width: 40rem; }
.kaukas-portada-eslogan {
	font-family: var(--fuente-interfaz);
	font-weight: 700;
	color: var(--maduro);
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
	max-width: none;
}
.kaukas-portada-texto p {
	font-size: 1.2rem;
	color: var(--papel-2);
}
.kaukas-portada-acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; }

@media (max-width: 619px) {
	/* En móvil, la portada no puede ocupar toda la pantalla antes de que
	   se vea nada más — se reduce el aire vertical al mínimo para que la
	   cinta de datos ya asome sin necesidad de bajar, incluso en un
	   celular con pantalla más corta (no solo uno alto tipo iPhone). */
	.kaukas-portada-hero { padding-top: 1rem; }
	.kaukas-portada-hero .contenedor { padding-bottom: 1rem; gap: 0.6rem; }
	.kaukas-portada-eslogan { font-size: 0.9rem; margin-bottom: 0.15rem; }
	.kaukas-portada-texto h1 { font-size: 1.55rem; }
	.kaukas-portada-texto p { font-size: 0.92rem; line-height: 1.4; }
	.kaukas-portada-acciones { margin-top: 0.3rem; gap: 0.6rem; }
	.kaukas-portada-acciones .boton { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
}

.kaukas-cinta-datos {
	background: var(--maduro);
	color: var(--tinta);
}
.kaukas-cinta-datos ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 1.5rem 0;
}
.kaukas-cinta-datos .dato-numero {
	font-family: var(--fuente-titulo);
	font-size: 2rem;
	display: block;
	line-height: 1;
}
.kaukas-cinta-datos .dato-etiqueta {
	font-family: var(--fuente-interfaz);
	font-weight: 600;
	font-size: 0.85rem;
}
@media (min-width: 720px) {
	.kaukas-cinta-datos ul { grid-template-columns: repeat(4, 1fr); }
}

.kaukas-seccion { padding-block: clamp(3rem, 6vw, 5rem); }
.kaukas-seccion h2 { max-width: 22ch; }

/* Proceso del café: imágenes y texto viven como tarjetas separadas para que
   se pueda sustituir cada fotografía en el Personalizador sin tocar el diseño. */
.kaukas-procesos { background: var(--papel-2); }
.kaukas-procesos-intro { max-width: 42rem; margin-bottom: 2rem; }
.kaukas-sobrelinea {
	font-family: var(--fuente-interfaz);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cereza-viva);
	margin: 0 0 0.5rem;
}
.kaukas-grilla-procesos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
.kaukas-tarjeta-proceso {
	background: #fff;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
}
.kaukas-tarjeta-proceso figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel); }
.kaukas-tarjeta-proceso figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaukas-tarjeta-proceso figcaption {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.3rem 0.55rem;
	border-radius: 99px;
	background: rgba(20, 8, 4, 0.72);
	color: #fff;
	font-family: var(--fuente-interfaz);
	font-size: 0.7rem;
}
.kaukas-tarjeta-proceso-cuerpo { padding: 1.35rem; }
.kaukas-paso {
	display: inline-block;
	font-family: var(--fuente-interfaz);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--cereza-viva);
	margin-bottom: 0.45rem;
}
.kaukas-tarjeta-proceso h3 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.kaukas-tarjeta-proceso p { margin: 0; font-size: 0.98rem; line-height: 1.55; }
@media (min-width: 760px) { .kaukas-grilla-procesos { grid-template-columns: repeat(3, 1fr); } }
.kaukas-variedades-accion { margin-top: 2rem; text-align: center; }

.kaukas-grilla-productos {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}
@media (min-width: 620px) { .kaukas-grilla-productos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kaukas-grilla-productos { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------------------- */
/* Tarjetas de producto (deliberadamente no idénticas: la imagen manda)  */
/* -------------------------------------------------------------------- */

.kaukas-tarjeta-producto {
	background: #fff;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--tinta);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kaukas-tarjeta-producto:hover {
	color: var(--tinta);
	transform: translateY(-6px);
	box-shadow: 0 14px 32px rgba(20, 8, 4, 0.22);
}
.kaukas-tarjeta-producto .imagen { aspect-ratio: 4/3; background: var(--papel-2); overflow: hidden; }
.kaukas-tarjeta-producto .imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.kaukas-tarjeta-producto:hover .imagen img { transform: scale(1.06); }
/* align-content:start — sin esto, una tarjeta sin el aviso de "lote
   experimental" (Bourbon Rosado, Mocca) queda más corta de contenido que
   sus vecinas (Geisha, Caja catadora, que sí lo tienen), pero la grilla
   las estira parejo a todas a la misma altura; el grid (con filas "auto"
   por defecto) reparte ese espacio extra ENTRE las filas — y como las
   etiquetas de notas de taza son flex con "align-items: stretch" por
   defecto, se estiraban hasta verse como óvalos gigantes en vez de
   pastillas normales. */
.kaukas-tarjeta-producto .cuerpo { padding: 1.25rem; display: grid; gap: 0.5rem; align-content: start; flex: 1; }
.kaukas-tarjeta-producto h3 { margin: 0; font-size: 1.35rem; }
.kaukas-tarjeta-producto .precio {
	font-family: var(--fuente-interfaz);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--cereza);
	margin-top: auto;
}
.kaukas-insignia {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--papel-2);
	color: var(--tinta-suave);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-family: var(--fuente-interfaz);
	font-size: 0.78rem;
	font-weight: 600;
	width: fit-content;
}
.kaukas-insignia.experimental { background: var(--maduro); color: var(--tinta); }
.kaukas-tarjeta-enlace { text-decoration: none; color: inherit; display: block; }
.kaukas-tarjeta-anadir { padding: 0 1.25rem 1.25rem; }

/* -------------------------------------------------------------------- */
/* Ficha de producto                                                     */
/* -------------------------------------------------------------------- */

.kaukas-ficha-producto {
	display: grid;
	gap: 2rem;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
	.kaukas-ficha-producto { grid-template-columns: 1fr 1fr; align-items: start; }
}

.kaukas-ficha-imagen { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }

.kaukas-ficha-frescura {
	font-family: var(--fuente-interfaz);
	font-weight: 700;
	/* 1.25rem (20px) en vez de 1.15rem (18.4px): con --maduro sobre --monte
	   (4.38:1) queda justo debajo del mínimo AA de texto normal (4.5:1); a
	   este tamaño/peso ya cuenta como "texto grande" (umbral 3:1), que sí
	   cumple. */
	font-size: 1.25rem;
	background: var(--monte);
	color: var(--maduro);
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
}

/* OJO: el plugin pone sus propias clases (kks-notas-taza / kks-ficha-tecnica)
   en el <ul>/<dl> real; las reglas .kaukas-notas-taza / .kaukas-ficha-tecnica
   de aquí abajo solo alcanzan al DIV/DL que las envuelve en
   inc/woocommerce.php, así que estilar esas nunca vestía nada — las notas
   de taza se veían como una lista con viñetas sin ningún estilo, en
   cualquier parte del sitio donde se usaran. Se estila la clase real. */
.kaukas-notas-taza { margin-block: 0.75rem 1.25rem; }
.kks-notas-taza {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.kks-notas-taza__etiqueta {
	background: var(--papel-2);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-family: var(--fuente-interfaz);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--monte);
}

.kaukas-ficha-precio { font-family: var(--fuente-interfaz); font-weight: 700; font-size: 2rem; color: var(--cereza); }
.kaukas-aviso-precio-pendiente, .kaukas-aviso-experimental {
	font-family: var(--fuente-interfaz);
	font-size: 0.85rem;
	color: var(--tinta-suave);
	background: var(--papel-2);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	margin-block: 0.75rem;
}

.kaukas-selector-presentacion { display: grid; gap: 1rem; margin-block: 1.5rem; }
.kaukas-selector-presentacion fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.kaukas-selector-presentacion legend { font-family: var(--fuente-interfaz); font-weight: 700; margin-bottom: 0.35rem; }

.kaukas-pregunta-molienda {
	display: none;
	background: var(--papel-2);
	border-radius: var(--radio);
	padding: 1rem;
	margin-block: 1rem;
}
.kaukas-pregunta-molienda.visible { display: block; }
.kaukas-pregunta-molienda p { font-family: var(--fuente-interfaz); font-weight: 600; margin-top: 0; }

.kaukas-ficha-tecnica { margin-top: 2rem; border-top: 1px solid var(--papel-2); padding-top: 1.5rem; }
.kks-ficha-tecnica {
	margin: 0;
	display: grid;
	gap: 0.6rem 1.5rem;
	grid-template-columns: repeat(2, 1fr);
	font-family: var(--fuente-interfaz);
	font-size: 0.92rem;
}
/* display:contents para que la fila (un <div> que envuelve cada dt/dd, ver
   kks_ficha_tecnica_html en el plugin) no cuente como su propia celda del
   grid — así dt y dd caen cada uno en su columna. */
.kks-ficha-tecnica__fila { display: contents; }
.kks-ficha-tecnica dt { color: var(--tinta-suave); font-weight: 600; }
.kks-ficha-tecnica dd { margin: 0; font-weight: 700; }
@media (max-width: 480px) {
	.kks-ficha-tecnica { grid-template-columns: 1fr; }
}

.kaukas-boton-agregar { font-size: 1.05rem; padding: 1rem 2rem; }
.kaukas-boton-agregar.agregado { background: var(--monte-3); }

/* -------------------------------------------------------------------- */
/* Tienda / archivo de productos                                        */
/* -------------------------------------------------------------------- */

.kaukas-filtro-notas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1.5rem 2rem; }
.kaukas-filtro-notas a {
	text-decoration: none;
	background: #fff;
	border: 2px solid var(--papel-2);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-family: var(--fuente-interfaz);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tinta);
}
.kaukas-filtro-notas a.activo { background: var(--monte); border-color: var(--monte); color: var(--papel); }

/* -------------------------------------------------------------------- */
/* Carrito y pago                                                        */
/* -------------------------------------------------------------------- */

.kaukas-cajon-carrito {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100%);
	background: var(--papel);
	box-shadow: -12px 0 30px rgba(0,0,0,0.2);
	transform: translateX(100%);
	transition: transform 0.35s ease;
	z-index: 200;
	overflow-y: auto;
	padding: 1.5rem;
}
.kaukas-cajon-carrito.abierto { transform: translateX(0); }
.kaukas-fondo-cajon {
	position: fixed;
	inset: 0;
	background: rgba(46,15,8,0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
	z-index: 199;
}
.kaukas-fondo-cajon.visible { opacity: 1; pointer-events: auto; }

.kaukas-metodos-pago, ul.wc_payment_methods { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.kaukas-metodo-pago {
	border: 2px solid var(--papel-2);
	border-radius: var(--radio);
	padding: 1rem 1.25rem;
	background: var(--papel-2);
}
.kaukas-metodo-pago > div:first-child { display: flex; align-items: center; gap: 0.75rem; }
.kaukas-metodo-pago.seleccionado { border-color: var(--cereza-viva); background: #fff; }
.kaukas-metodo-pago strong { font-family: var(--fuente-interfaz); }
.kaukas-metodo-pago .payment_box { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--papel-2); font-size: 0.92rem; }

.kaukas-estado-vacio {
	text-align: center;
	padding: 4rem 1.5rem;
	color: var(--tinta-suave);
}
.kaukas-estado-vacio h2 { color: var(--tinta); }

/* -------------------------------------------------------------------- */
/* Pie de página                                                          */
/* -------------------------------------------------------------------- */

.kaukas-pie {
	background: var(--monte);
	color: var(--papel-2);
	padding-block: 3rem;
	margin-top: 4rem;
}
.kaukas-pie a { color: var(--papel); }
.kaukas-pie .contenedor { display: grid; gap: 2rem; }
@media (min-width: 720px) { .kaukas-pie .contenedor { grid-template-columns: repeat(3, 1fr); } }
.kaukas-pie h3 { font-size: 1rem; color: var(--maduro); }

/* -------------------------------------------------------------------- */
/* WooCommerce genérico (tablas, avisos, cuenta) — no todas las          */
/* plantillas se sobrescriben, así que el marcado por defecto también    */
/* necesita verse acorde a la identidad visual.                          */
/* -------------------------------------------------------------------- */

.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-notice {
	/* WooCommerce coloca el icono del aviso con ::before y position:absolute.
	   Reservamos una columna fija para que nunca quede sobre el texto, también
	   en pantallas estrechas donde el mensaje puede partirse en varias líneas. */
	position: relative;
	list-style: none;
	background: var(--papel-2);
	border-left: 4px solid var(--maduro);
	border-radius: 10px;
	padding: 1rem 1.25rem 1rem 3rem;
	margin: 0 0 1.5rem;
	font-family: var(--fuente-interfaz);
	font-size: 0.95rem;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before {
	left: 1rem;
	margin: 0;
}
.woocommerce-error { border-left-color: var(--cereza-viva); }

.shop_table, table.cart, table.shop_table_responsive {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--fuente-interfaz);
	font-size: 0.95rem;
	background: #fff;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
}
.shop_table th, .shop_table td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--papel-2); }
.shop_table th { background: var(--papel-2); font-weight: 700; }

.cart_totals, .woocommerce-checkout-review-order { background: #fff; border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra); }
.wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; justify-content: center; }

.woocommerce-form-row, .form-row { margin-bottom: 1rem; }
.woocommerce-form-row label, .form-row label { display: block; margin-bottom: 0.35rem; font-family: var(--fuente-interfaz); font-weight: 600; font-size: 0.9rem; }
.woocommerce-form-row input, .woocommerce-form-row select, .form-row input, .form-row select { width: 100%; }

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: 10px;
	font-family: var(--fuente-interfaz);
	font-weight: 600;
	text-decoration: none;
	background: var(--papel-2);
	color: var(--tinta);
}
.woocommerce-MyAccount-navigation .is-active a { background: var(--monte); color: var(--papel); }
.woocommerce-MyAccount-content { margin-top: 1.5rem; }

.woocommerce-breadcrumb {
	font-family: var(--fuente-interfaz);
	font-size: 0.85rem;
	color: var(--tinta-suave);
	margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--tinta-suave); }

.quantity .qty { width: 4.5rem; text-align: center; }

.star-rating { color: var(--maduro); }

/* -------------------------------------------------------------------- */
/* Galería de fotos de la finca (kks_fotos_finca_html en el plugin)       */
/* -------------------------------------------------------------------- */

/* Sin JS (o mientras carga): todas las fotos apiladas en cuadrícula, para
   que la sección nunca se vea vacía o rota. */
.kks-galeria-finca {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
	margin-top: 1.5rem;
}
.kks-galeria-finca img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radio);
}
.kks-galeria-finca img:first-child {
	grid-column: span 2;
	aspect-ratio: 16 / 10;
}
@media (min-width: 620px) {
	.kks-galeria-finca { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
	.kks-galeria-finca img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
}

/* Con JS: carrusel de una foto a la vez, con transición suave entre ellas
   (ver iniciarCarruselFinca() en kaukas.js). */
.kks-galeria-finca.kks-carrusel {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	max-width: 46rem;
	margin-inline: auto;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
}
.kks-galeria-finca.kks-carrusel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	opacity: 0;
	transition: opacity 1s ease, transform 6s ease-out;
	transform: scale(1.04);
}
.kks-galeria-finca.kks-carrusel img.kks-activa {
	opacity: 1;
	z-index: 1;
	transform: scale(1);
}
.kks-carrusel-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: rgba(20, 8, 4, 0.4);
	color: var(--papel);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.kks-carrusel-flecha:hover { background: rgba(20, 8, 4, 0.65); transform: translateY(-50%) scale(1.08); }
.kks-carrusel-flecha svg { width: 22px; height: 22px; flex-shrink: 0; }
.kks-carrusel-flecha--anterior { left: 0.75rem; }
.kks-carrusel-flecha--siguiente { right: 0.75rem; }

.kks-carrusel-puntos {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1rem;
}
.kks-carrusel-puntos button {
	width: 0.65rem;
	height: 0.65rem;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--papel-2);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.kks-carrusel-puntos button:hover { transform: scale(1.2); }
.kks-carrusel-puntos button.kks-activo { background: var(--cereza-viva); }

/* -------------------------------------------------------------------- */
/* "Nuestra historia" — foto pequeña, no un banner gigante                */
/* -------------------------------------------------------------------- */

.kaukas-historia-cabecera { margin-bottom: 2rem; }
.kaukas-historia-foto {
	margin-top: 1.25rem;
	max-width: 22rem;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra);
}
.kaukas-historia-foto img { width: 100%; height: auto; display: block; }
@media (min-width: 720px) {
	.kaukas-historia-cabecera {
		display: grid;
		grid-template-columns: 1fr 18rem;
		align-items: center;
		gap: 2rem;
	}
	.kaukas-historia-foto { margin-top: 0; max-width: none; }
}

/* -------------------------------------------------------------------- */
/* Aparecer suave al entrar en pantalla (iniciarRevelarAlEntrar en JS).   */
/* El transform de la tarjeta de producto también lo usa el :hover — por */
/* eso .kks-revelado NO toca "transform", solo lo hace el estado "antes  */
/* de aparecer" (:not(.kks-revelado)), para no pisar el hover después.   */
/* -------------------------------------------------------------------- */
.kks-por-revelar { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
.kks-por-revelar:not(.kks-revelado) { transform: translateY(28px); }
.kks-por-revelar.kks-revelado { opacity: 1; }

/* -------------------------------------------------------------------- */
/* Filtro de notas de taza en la tienda (kks_filtro_notas_taza_html)      */
/* -------------------------------------------------------------------- */

.kks-filtro-notas { margin: 1.5rem 0 2rem; }
.kks-filtro-notas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.kks-filtro-notas__lista a {
	display: inline-block;
	font-family: var(--fuente-interfaz);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--tinta-suave);
	background: var(--papel-2);
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 0.45rem 1rem;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.kks-filtro-notas__lista a:hover { transform: translateY(-2px); }
.kks-filtro-notas__lista .kks-filtro-notas__activo {
	background: var(--monte);
	color: var(--papel);
}

/* -------------------------------------------------------------------- */
/* "Compara nuestras variedades" (portada)                                */
/* -------------------------------------------------------------------- */

.kaukas-grilla-comparar {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
}
@media (min-width: 720px) {
	.kaukas-grilla-comparar { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.kaukas-tarjeta-comparar {
	background: #fff;
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 1.5rem;
}
.kaukas-tarjeta-comparar h3 { margin-bottom: 0.75rem; }
.kaukas-tarjeta-comparar .kks-ficha-tecnica { border-top: 1px solid var(--papel-2); padding-top: 1rem; margin-top: 1rem; grid-template-columns: 1fr; gap: 0.5rem; }

/* -------------------------------------------------------------------- */
/* Rueda de notas de taza                                                 */
/* -------------------------------------------------------------------- */

.kaukas-seccion-rueda {
	display: grid;
	gap: 2rem;
	align-items: center;
}
.kaukas-rueda-imagen { max-width: 22rem; margin-inline: auto; }
.kaukas-rueda-imagen svg { width: 100%; height: auto; display: block; }
@media (min-width: 860px) {
	.kaukas-seccion-rueda { grid-template-columns: 1fr 1fr; }
	.kaukas-rueda-imagen { max-width: none; }
}

/* -------------------------------------------------------------------- */
/* Datos curiosos del café                                                */
/* -------------------------------------------------------------------- */

.kaukas-grilla-datos-curiosos {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
}
@media (min-width: 620px) {
	.kaukas-grilla-datos-curiosos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
	.kaukas-grilla-datos-curiosos { grid-template-columns: repeat(4, 1fr); }
}
.kaukas-dato-curioso {
	background: var(--papel-2);
	border-radius: var(--radio);
	padding: 1.5rem;
	display: grid;
	gap: 0.85rem;
	justify-items: start;
}
.kaukas-dato-curioso svg { width: 40px; height: 40px; flex-shrink: 0; }
.kaukas-dato-curioso p { margin: 0; font-size: 0.95rem; }