/* ==========================================================================
   Sistema de diseno Guarf & Go
   Traduccion de 01_SISTEMA_DISENO.md. Paso 32 del plan maestro.

   REGLA: este fichero es la unica fuente de verdad del color y la tipografia.
   Nada de hex escritos a mano en widgets de Elementor. Si un componente
   necesita un color, sale de una variable de aqui.

   Todo lo visual va prefijado con .guarf- para poder introducirlo pagina a
   pagina sin alterar lo que ya existe.
   ========================================================================== */

:root {
	/* --- Color de marca --- */
	--guarf-amarillo: #FFB71B;   /* color de marca. Fondos y destacados. NO para texto sobre blanco */
	--guarf-naranja:  #EE7623;   /* puente. Categorias e iconos */
	--guarf-rojo:     #E1251B;   /* accion. Un solo boton rojo por pantalla */
	--guarf-tinta:    #1D252C;   /* texto, bordes y sombras duras */
	--guarf-tinta-70: #5A6470;   /* texto secundario */
	--guarf-verde:    #AAF683;   /* ahorro, confirmaciones, en stock. Siempre con texto oscuro */
	--guarf-rosa:     #EE6055;   /* acentos puntuales: favoritos, gato */

	/* --- Superficies --- */
	--guarf-papel:    #FFFFFF;   /* fondo general */
	--guarf-papel-2:  #FFF6E0;   /* zonas alternas y chips */
	--guarf-crema:    #FFFDF7;   /* fondo de tarjeta */
	--guarf-linea:    #EFE3CC;   /* separadores y bordes suaves */

	/* --- Tipografia --- */
	--guarf-display: "Ranking", Georgia, serif;
	--guarf-texto:   "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Escala fluida: movil -> escritorio */
	--guarf-h1: clamp(38px, 7vw, 76px);
	--guarf-h2: clamp(28px, 4vw, 44px);
	--guarf-h3: 24px;
	--guarf-precio: 30px;
	--guarf-cuerpo: 16px;
	--guarf-cuerpo-sm: 14px;
	--guarf-etiqueta: 11px;

	/* --- Formas y profundidad --- */
	--guarf-radio-tarjeta: 16px;
	--guarf-radio-boton: 11px;
	--guarf-borde: 2px solid var(--guarf-tinta);
	--guarf-sombra: 5px 6px 0 rgba(29, 37, 44, .14);
	--guarf-sombra-hover: 8px 10px 0 var(--guarf-tinta);

	/* --- Ritmo --- */
	--guarf-gap: 16px;
	--guarf-seccion: clamp(48px, 8vw, 96px);
}

@media (min-width: 1025px) {
	:root { --guarf-cuerpo: 17px; }
}

/* ==========================================================================
   Tipografia base de los componentes Guarf
   ========================================================================== */

.guarf-display,
.guarf h1, .guarf h2, .guarf h3,
.guarf-precio {
	font-family: var(--guarf-display);
	font-weight: 700;
	color: var(--guarf-tinta);
}

.guarf h1 { font-size: var(--guarf-h1); line-height: .95; }
.guarf h2 { font-size: var(--guarf-h2); line-height: 1.05; }
.guarf h3 { font-size: var(--guarf-h3); line-height: 1.15; }

.guarf-precio { font-size: var(--guarf-precio); line-height: 1; }

.guarf,
.guarf p,
.guarf li {
	font-family: var(--guarf-texto);
	font-size: var(--guarf-cuerpo);
	font-weight: 400;
	line-height: 1.7;
	color: var(--guarf-tinta);
}

.guarf-sm { font-size: var(--guarf-cuerpo-sm); line-height: 1.6; }
.guarf-secundario { color: var(--guarf-tinta-70); }

/* Sustituye a la fuente monoespaciada del prototipo: no anadimos una cuarta familia. */
.guarf-etiqueta {
	font-family: var(--guarf-texto);
	font-size: var(--guarf-etiqueta);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.4;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.guarf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--guarf-texto);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	padding: 14px 26px;
	border: var(--guarf-borde);
	border-radius: var(--guarf-radio-boton);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Accion principal. Solo uno por pantalla. */
.guarf-btn--primario {
	background: var(--guarf-rojo);
	color: #FFFFFF;
	box-shadow: var(--guarf-sombra);
}

.guarf-btn--secundario {
	background: var(--guarf-amarillo);
	color: var(--guarf-tinta);
	box-shadow: var(--guarf-sombra);
}

.guarf-btn--fantasma {
	background: transparent;
	color: var(--guarf-tinta);
}

/* El levantamiento solo en escritorio: en tactil no hay hover y cuesta render. */
@media (hover: hover) and (min-width: 1025px) {
	.guarf-btn:hover {
		transform: translateY(-4px);
		box-shadow: var(--guarf-sombra-hover);
	}
}

.guarf-btn:focus-visible {
	outline: 3px solid var(--guarf-naranja);
	outline-offset: 2px;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.guarf-tarjeta {
	background: var(--guarf-crema);
	border: var(--guarf-borde);
	border-radius: var(--guarf-radio-tarjeta);
	box-shadow: var(--guarf-sombra);
	padding: 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) and (min-width: 1025px) {
	.guarf-tarjeta:hover {
		transform: translateY(-4px);
		box-shadow: var(--guarf-sombra-hover);
	}
}

/* ==========================================================================
   Etiquetas, chips y sellos
   ========================================================================== */

.guarf-chip {
	display: inline-block;
	background: var(--guarf-papel-2);
	border: 1px solid var(--guarf-linea);
	border-radius: 999px;
	padding: 6px 12px;
	font-family: var(--guarf-texto);
	font-size: var(--guarf-etiqueta);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--guarf-tinta);
}

.guarf-badge--ahorro {
	background: var(--guarf-verde);
	color: var(--guarf-tinta);
	border: var(--guarf-borde);
	border-radius: 999px;
	padding: 4px 12px;
	font-weight: 600;
}

/* Sello rotado. Para "100 % natural" o "seleccionado en Madrid".
   OJO: nunca para afirmaciones de fabricacion, Guarf no fabrica. */
.guarf-sello {
	display: inline-block;
	border: 2px solid var(--guarf-rojo);
	color: var(--guarf-rojo);
	border-radius: 8px;
	padding: 8px 14px;
	transform: rotate(-3deg);
	font-family: var(--guarf-texto);
	font-size: var(--guarf-etiqueta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* ==========================================================================
   Selector de talla P / M / G
   ========================================================================== */

.guarf-tallas {
	display: inline-flex;
	gap: 6px;
	background: var(--guarf-papel-2);
	border: var(--guarf-borde);
	border-radius: 999px;
	padding: 4px;
}

.guarf-talla {
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	font-family: var(--guarf-texto);
	font-size: var(--guarf-cuerpo-sm);
	font-weight: 600;
	color: var(--guarf-tinta);
	transition: background-color .15s ease;
}

.guarf-talla[aria-pressed="true"] {
	background: var(--guarf-tinta);
	color: #FFFFFF;
}

/* ==========================================================================
   Banda de confianza
   ========================================================================== */

.guarf-banda {
	background: var(--guarf-tinta);
	color: #FFFFFF;
	padding: 18px 0;
}

.guarf-banda .guarf-etiqueta { color: #FFFFFF; }

/* ==========================================================================
   Acordeon de FAQs
   ========================================================================== */

.guarf-acordeon {
	border-bottom: 1px solid var(--guarf-linea);
}

.guarf-acordeon > summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-family: var(--guarf-display);
	font-size: var(--guarf-h3);
	font-weight: 700;
	color: var(--guarf-tinta);
}

.guarf-acordeon > summary::-webkit-details-marker { display: none; }

.guarf-acordeon[open] > summary { color: var(--guarf-rojo); }

/* ==========================================================================
   Utilidades de seccion
   ========================================================================== */

.guarf-seccion { padding-block: var(--guarf-seccion); }
.guarf-fondo-suave { background: var(--guarf-papel-2); }
.guarf-fondo-crema { background: var(--guarf-crema); }

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.guarf-btn,
	.guarf-tarjeta,
	.guarf-talla {
		transition: none;
	}
	.guarf-btn:hover,
	.guarf-tarjeta:hover {
		transform: none;
	}
}

/* ==========================================================================
   Mi cuenta de WooCommerce
   Migrado desde el CSS adicional del personalizador el 2-ago-2026.
   Antes usaba el hex #E1251B a mano; ahora sale de la variable.
   ========================================================================== */

.woocommerce-MyAccount-navigation-link a,
.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-content a {
	color: var(--guarf-rojo);
}

/* ==========================================================================
   Caja relacionada al final de un articulo del blog (paso 43)
   ========================================================================== */

.guarf-caja-rel {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-block: var(--guarf-seccion) 0;
}

.guarf-caja-rel__foto {
	flex: 0 0 160px;
	max-width: 160px;
}

.guarf-caja-rel__foto img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.guarf-caja-rel__texto { flex: 1 1 auto; }

.guarf-caja-rel h3 {
	font-family: var(--guarf-display);
	font-size: var(--guarf-h3);
	font-weight: 700;
	margin: 4px 0 8px;
}

.guarf-caja-rel .guarf-precio { margin: 8px 0 16px; }

@media (max-width: 767px) {
	.guarf-caja-rel { flex-direction: column; align-items: flex-start; }
	.guarf-caja-rel__foto { flex-basis: auto; max-width: 100%; align-self: center; }
}

/* ==========================================================================
   Catalogo de cajas (paso 41)
   ========================================================================== */

.guarf-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.guarf-filtros .guarf-chip { text-decoration: none; transition: background-color .15s ease; }

.guarf-chip--activo {
	background: var(--guarf-tinta);
	color: #FFFFFF;
	border-color: var(--guarf-tinta);
}

.guarf-suelto {
	margin-top: var(--guarf-seccion);
	text-align: center;
}

.guarf-suelto h3 {
	font-family: var(--guarf-display);
	font-size: var(--guarf-h3);
	font-weight: 700;
	margin: 0 0 8px;
}

/* ==========================================================================
   Carrito y pago (bloque 8)
   ========================================================================== */

.guarf-envio {
	background: var(--guarf-papel-2);
	border: 1px solid var(--guarf-linea);
	border-radius: var(--guarf-radio-tarjeta);
	padding: 14px 18px;
	margin-bottom: 20px;
}

.guarf-envio__texto {
	margin: 0 0 8px;
	font-family: var(--guarf-texto);
	font-size: var(--guarf-cuerpo-sm);
}

.guarf-envio__barra {
	height: 8px;
	background: #FFFFFF;
	border: 1px solid var(--guarf-linea);
	border-radius: 999px;
	overflow: hidden;
}

.guarf-envio__barra > span {
	display: block;
	height: 100%;
	background: var(--guarf-amarillo);
	transition: width .3s ease;
}

.guarf-envio--ok { background: var(--guarf-verde); border-color: var(--guarf-tinta); }
.guarf-envio--ok .guarf-envio__barra > span { background: var(--guarf-tinta); }

.guarf-sellos {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.guarf-sellos li {
	font-family: var(--guarf-texto);
	font-size: var(--guarf-cuerpo-sm);
	color: var(--guarf-tinta-70);
	padding-left: 22px;
	position: relative;
}

.guarf-sellos li::before {
	content: '';
	position: absolute;
	left: 0; top: .55em;
	width: 12px; height: 6px;
	border-left: 2px solid var(--guarf-tinta);
	border-bottom: 2px solid var(--guarf-tinta);
	transform: rotate(-45deg);
}

.guarf-oculto { display: none !important; }

/* Order bump (paso 48) */
.guarf-bump {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
	background: var(--guarf-papel-2);
}
.guarf-bump__foto { flex: 0 0 72px; }
.guarf-bump__foto img { width: 72px; height: auto; border-radius: 10px; display: block; }
.guarf-bump__texto { flex: 1 1 auto; }
.guarf-bump h3 { font-family: var(--guarf-display); font-size: 20px; font-weight: 700; margin: 4px 0; }
.guarf-bump .guarf-precio { font-size: 22px; margin: 0; }
@media (max-width: 600px) {
	.guarf-bump { flex-wrap: wrap; }
	.guarf-bump .guarf-btn { width: 100%; }
}

/* Carrito con cantidades automaticas: el boton de actualizar sobra.
   Va aqui y no en un <style> en linea para que la optimizacion de CSS
   de WP Rocket no pueda eliminarlo. */
body.guarf-carrito-auto [name="update_cart"] {
	display: none !important;
}

body.guarf-carrito-auto .guarf-actualizando {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s ease;
}


/* Video de "quienes somos" (paso 30). Es vertical (3:4), asi que se limita el
   ancho: a pantalla completa en escritorio se veria enorme y descolocado.
   preload="none" en el HTML: los 9,7 MB no se descargan hasta que le dan al play. */
.guarf-video {
	margin: 40px auto;
	max-width: 420px;
}

.guarf-video video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
	background: #1D252C;
}

.guarf-video figcaption {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	opacity: .75;
}

/* ==========================================================================
   CORRECCIONES P0 - 27-ago-2026
   Copia de seguridad previa: design-system.css.bak-P0-2026-08-27
   Origen del diagnostico: OPTIMIZACION_WEB/ADN/delta.md (A1, A3, A4)
   ========================================================================== */

/* --- P0-1 - Banda "por que una caja": 6 de 7 textos eran invisibles -------
   .guarf-banda daba color:#FFF al contenedor y contaba con heredarlo, pero
   .guarf h3 y .guarf p aplican var(--guarf-tinta) DIRECTAMENTE sobre el hijo,
   y una regla directa gana siempre a un color heredado. Resultado: tinta
   sobre tinta, contraste 1:1, seccion entera ilegible.
   Segunda capa del mismo fallo: la banda no tenia contenedor con ancho
   maximo, asi que el contenido llegaba al borde de la pantalla y las lineas
   superaban los 120 caracteres. Se arreglan las dos cosas juntas: descubrir
   el texto sin darle medida solo cambia un fallo por otro. */
.guarf-banda h1,
.guarf-banda h2,
.guarf-banda h3,
.guarf-banda p,
.guarf-banda li {
	color: #FFFFFF;
}

.guarf-banda {
	padding-block: 40px;
}

.guarf-banda > * {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* --- P0-3 - CTA primario con el texto en verde menta ----------------------
   .elementor-kit-466 a { color:#60D394 } tiene especificidad (0,1,1) y gana a
   .guarf-btn--primario, que es (0,1,0). Las variantes secundaria y fantasma
   ya estaban parcheadas subiendo especificidad; la primaria se quedo fuera.
   Contraste medido antes del arreglo: 2.51:1 sobre el rojo (minimo AA 4.5:1).
   Se usan las dos clases que el componente siempre lleva juntas -> (0,2,0). */
.guarf-btn.guarf-btn--primario,
.guarf-btn.guarf-btn--primario:link,
.guarf-btn.guarf-btn--primario:visited,
.guarf-btn.guarf-btn--primario:hover,
.guarf-btn.guarf-btn--primario:focus,
.guarf-btn.guarf-btn--primario:active {
	color: #FFFFFF;
}

/* --- P0-4 - Boton de compra con el morado de WooCommerce (#7F54B3) --------
   El elemento que cierra la venta era el unico del sitio fuera de la paleta.
   Se le aplica el lenguaje del boton primario. Sigue siendo el unico boton
   rojo de esa pantalla, como manda la regla del sistema. */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt {
	background: var(--guarf-rojo);
	color: #FFFFFF;
	border: var(--guarf-borde);
	border-radius: var(--guarf-radio-boton);
	box-shadow: var(--guarf-sombra);
	font-family: var(--guarf-texto);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 14px 26px;
	min-height: 48px;
	transition: transform .15s ease, box-shadow .15s ease;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button.disabled,
.woocommerce .single_add_to_cart_button.button.alt.disabled,
.woocommerce .single_add_to_cart_button.button.alt:disabled {
	background: var(--guarf-tinta-70);
	color: #FFFFFF;
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

@media (hover: hover) and (min-width: 1025px) {
	.woocommerce div.product form.cart .button.single_add_to_cart_button:not(.disabled):hover {
		transform: translateY(-4px);
		box-shadow: var(--guarf-sombra-hover);
	}
}

.woocommerce div.product form.cart .button.single_add_to_cart_button:focus-visible {
	outline: 3px solid var(--guarf-naranja);
	outline-offset: 2px;
}


/* ==========================================================================
   GUARF - CAPA DE INTERACCION (DIA 3) - 27-ago-2026
   Coste: 0 KB de JavaScript. Todo CSS nativo.
   Contrato: OPTIMIZACION_WEB/MOTION/contrato-movimiento.md
   Copia previa: design-system.css.bak-dia3-2026-08-27
   ========================================================================== */

:root {
	--guarf-ease:        cubic-bezier(.34, 1.15, .64, 1);
	--guarf-ease-plana:  cubic-bezier(.20, 0, 0, 1);
	--guarf-dur-rapida:  120ms;
	--guarf-dur-normal:  200ms;
	--guarf-dur-lenta:   350ms;
	--guarf-sombra-pulsada: 2px 2px 0 rgba(29, 37, 44, .14);
}

/* --- 1. EL GESTO FIRMA ---------------------------------------------------
   La pieza baja 3 y 4 px mientras la sombra encoge de 5 y 6 a 2 y 2.
   3+2 = 5 y 4+2 = 6: el borde exterior de la sombra NO se mueve. Solo la
   pieza se hunde, como un adhesivo apretado con el dedo.
   Asimetria deliberada: presion directa sin rebote (el usuario mira ese
   instante); retorno con el rebote de marca (ahi responde el sistema). */

.guarf-btn,
.guarf-tarjeta,
.guarf-chip,
.guarf-talla,
.guarf-acordeon > summary {
	transition:
		transform  var(--guarf-dur-normal) var(--guarf-ease),
		box-shadow var(--guarf-dur-normal) var(--guarf-ease),
		background-color var(--guarf-dur-normal) var(--guarf-ease-plana),
		color var(--guarf-dur-normal) var(--guarf-ease-plana);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.guarf-btn:active,
.guarf-tarjeta:active,
.guarf-chip:active,
.guarf-talla:active,
.guarf-acordeon > summary:active {
	transition-duration: 100ms;
	transition-timing-function: var(--guarf-ease-plana);
}

.guarf-btn:active,
.guarf-chip:active,
.guarf-talla:active {
	transform: translate(3px, 4px);
	box-shadow: var(--guarf-sombra-pulsada);
}

.guarf-tarjeta:active {
	transform: translate(2px, 3px);
	box-shadow: 3px 3px 0 rgba(29, 37, 44, .14);
}

.guarf-btn--fantasma:active,
.guarf-acordeon > summary:active {
	box-shadow: none;
	transform: translate(2px, 2px);
}

/* --- 2. HOVER CORREGIDO ---------------------------------------------------
   Antes: (hover:hover) and (min-width:1025px), que dejaba fuera tablets con
   raton y ventanas estrechas. La consulta correcta pregunta por el
   dispositivo, no por el ancho. */

@media (hover: hover) and (pointer: fine) {
	.guarf-btn:hover,
	.guarf-tarjeta:hover {
		transform: translateY(-4px);
		box-shadow: var(--guarf-sombra-hover);
	}
	.guarf-btn:hover:active {
		transform: translate(3px, 4px);
		box-shadow: var(--guarf-sombra-pulsada);
	}
	.guarf-tarjeta:hover:active {
		transform: translate(2px, 3px);
		box-shadow: 3px 3px 0 rgba(29, 37, 44, .14);
	}
	.guarf-chip:hover { background: var(--guarf-linea); }
}

/* --- 3. ZONAS TACTILES (minimo 44 px) -------------------------------------
   Medido antes: filtros 33, tallas 36, botones de catalogo 37, volver a la
   tienda 34. */

.guarf-btn { min-height: 48px; }

.guarf-talla,
.guarf-chip {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.guarf-tallas { display: inline-flex; flex-wrap: wrap; }
.guarf-tallas .guarf-talla { flex: 1 1 0; min-width: 0; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .return-to-shop a.button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
}

.guarf-filtros { gap: 10px; }

/* --- 4. FOCO VISIBLE ------------------------------------------------------ */

.guarf-tarjeta:focus-visible,
.guarf-chip:focus-visible,
.guarf-talla:focus-visible,
.guarf-acordeon > summary:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 3px solid var(--guarf-naranja);
	outline-offset: 2px;
}

/* --- 5. ESTADOS DEL CARRITO ----------------------------------------------- */

body.guarf-carrito-auto .guarf-actualizando {
	opacity: .5;
	pointer-events: none;
	cursor: progress;
	transition: opacity var(--guarf-dur-rapida) var(--guarf-ease-plana);
}

.guarf-btn[aria-busy="true"] {
	pointer-events: none;
	opacity: .75;
}

@keyframes guarf-confirmado {
	0%   { transform: scale(1);    box-shadow: var(--guarf-sombra); }
	40%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(170, 246, 131, .55); }
	100% { transform: scale(1);    box-shadow: var(--guarf-sombra); }
}

.guarf-confirmado { animation: guarf-confirmado 300ms var(--guarf-ease) 1; }

@keyframes guarf-contador {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.guarf-contador-cambia {
	animation: guarf-contador 300ms var(--guarf-ease) 1;
	display: inline-block;
}

/* --- 6. BARRA DE ENVIO GRATIS -------------------------------------------- */

.guarf-envio__barra > span {
	transition: width var(--guarf-dur-lenta) var(--guarf-ease-plana),
	            background-color var(--guarf-dur-normal) var(--guarf-ease-plana);
}

/* --- 7. REVELADO AL APARECER ---------------------------------------------
   El contenido parte de VISIBLE. Solo se oculta si el navegador admite
   animation-timeline, de modo que si algo falla la pagina se ve entera.
   Animacion por scroll nativa: sin JavaScript, sin observador. */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.guarf-revela {
			animation: guarf-entrada linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}
		@keyframes guarf-entrada {
			from { opacity: 0; transform: translateY(16px); }
			to   { opacity: 1; transform: translateY(0); }
		}
		.guarf-revela--escalona > * {
			animation: guarf-entrada linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 46%;
		}
	}
}

/* --- 8. MOVIMIENTO REDUCIDO ----------------------------------------------
   Movimiento reducido no es cero retroalimentacion. Se elimina el
   desplazamiento (que es lo que causa malestar) y se conserva el cambio de
   sombra y color (que es lo que informa de que el toque llego). */

@media (prefers-reduced-motion: reduce) {
	.guarf-btn,
	.guarf-tarjeta,
	.guarf-chip,
	.guarf-talla,
	.guarf-acordeon > summary {
		transition: box-shadow 1ms linear, background-color 1ms linear, color 1ms linear;
	}
	.guarf-btn:active,
	.guarf-tarjeta:active,
	.guarf-chip:active,
	.guarf-talla:active,
	.guarf-acordeon > summary:active,
	.guarf-btn:hover,
	.guarf-tarjeta:hover {
		transform: none;
	}
	.guarf-btn:active,
	.guarf-chip:active,
	.guarf-talla:active {
		box-shadow: var(--guarf-sombra-pulsada);
	}
	.guarf-confirmado,
	.guarf-contador-cambia { animation: none; }
	.guarf-envio__barra > span { transition: none; }
}
/* --- 9. CORRECCIONES DE ESPECIFICIDAD Y COBERTURA (dia 3, segunda pasada) --
   Medido tras aplicar el bloque anterior:
   a) .guarf-filtros .guarf-chip (0,2,0) pisaba mi .guarf-chip (0,1,0), asi que
      los filtros se quedaban sin el gesto firma.
   b) El boton "Anadir al carrito" del catalogo es .elementor-button, no
      .woocommerce .button, y seguia en 39 px. */

.guarf-filtros .guarf-chip {
	transition:
		transform  var(--guarf-dur-normal) var(--guarf-ease),
		box-shadow var(--guarf-dur-normal) var(--guarf-ease),
		background-color var(--guarf-dur-normal) var(--guarf-ease-plana),
		color var(--guarf-dur-normal) var(--guarf-ease-plana);
}

.guarf-filtros .guarf-chip:active {
	transition-duration: 100ms;
	transition-timing-function: var(--guarf-ease-plana);
	transform: translate(3px, 4px);
	box-shadow: var(--guarf-sombra-pulsada);
}

/* Botones de producto de Elementor en el catalogo. */
.elementor-widget-woocommerce-product-add-to-cart .elementor-button,
.woocommerce ul.products li.product .elementor-button,
.elementor-button.elementor-button-link {
	min-height: 44px;
	touch-action: manipulation;
}

/* Enlaces de servicio de la barra superior: se les da area sin cambiar el
   ritmo visual, con padding vertical en lugar de alto fijo. */
.guarf-barra-servicio a,
.elementor-location-header .elementor-icon-list-item > a {
	padding-block: 9px;
	touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
	.guarf-filtros .guarf-chip {
		transition: box-shadow 1ms linear, background-color 1ms linear, color 1ms linear;
	}
	.guarf-filtros .guarf-chip:active { transform: none; }
}
/* --- 10. NAVEGACION DEL PIE EN TACTIL ------------------------------------
   Medido: 15 enlaces del pie a 25 px de alto, apilados sin separacion. En
   movil eso provoca toques erroneos. Se usa (pointer: coarse) en lugar de un
   ancho fijo: pregunta por el dedo, que es el problema real. */

@media (pointer: coarse) {
	.elementor-location-footer .elementor-icon-list-item > a,
	.elementor-location-header .elementor-icon-list-item > a {
		padding-block: 10px;
		touch-action: manipulation;
	}
	.elementor-location-footer .elementor-icon-list-item {
		margin-block: 2px;
	}
}
/* --- 11. CONTRASTE: LOS DOS FALLOS QUE QUEDABAN ---------------------------
   Medido tras cambiar el color de enlace del Kit global.

   a) Nombre de producto dentro de las resenas: rojo #E1251B sobre el gris
      #F4F4F4 del widget da 4,26:1 y el minimo AA es 4,5:1. Falla por poco.
      No es una accion principal sino una referencia dentro de una resena, asi
      que va en tinta (15,26:1) con subrayado para seguir leyendose como enlace.

   b) Bloque de newsletter: blanco sobre naranja #EE7623 da 2,9:1. El sistema
      ya obliga a texto oscuro sobre ambar y sobre verde; el naranja se suma a
      esa misma regla. Tinta sobre naranja da 5,22:1. */

.product-title a,
.cr-review .product-title a {
	color: var(--guarf-tinta);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.elementor-element-8c3171f .elementor-heading-title {
	color: var(--guarf-tinta);
}
/* Newsletter del pie. Elementor mantiene el blanco aunque el dato del widget
   ya dice #1D252C, asi que se fuerza aqui con especificidad (0,4,1) sobre la
   regla que genera Elementor. Contraste: de 2,90:1 a 5,22:1.
   NOTA PARA QUIEN EDITE EL PIE: si cambias este color en Elementor, esta regla
   seguira mandando. Borrala aqui primero. */
body .elementor-535 .elementor-element.elementor-element-8c3171f .elementor-heading-title {
  color: var(--guarf-tinta);
}


/* --- 12. FICHA DE CAJA: FILA DE COMPRA -----------------------------------
   Reescrito limpio el 27-ago tras el feedback en iPhone. Sustituye a cinco
   parches previos que se contradecian entre si.

   LA CAUSA DEL DESBORDAMIENTO: un track 1fr no puede encoger por debajo del
   contenido minimo de su elemento, y con white-space: nowrap ese minimo es el
   texto entero. Por eso el boton se salia de la pagina. Se corrige con
   minmax(0, 1fr) en la columna y min-width: 0 en el elemento, que es el
   arreglo canonico de este caso.

   REPARTO: fila 1 cantidad + boton. Fila 2 'Ver carrito' a ancho completo,
   siempre, tanto en movil como en escritorio. Predecible y no desborda nunca. */

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  height: 48px;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 48px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 14px;
  font-size: clamp(13px, 3.2vw, 15px);
}

/* Los campos ocultos no ocupan celda. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart input[type='hidden'] {
  display: none;
}

/* 'Ver carrito': fila propia y ancho completo. Boton secundario, nunca rojo,
   porque el rojo ya lo tiene el boton de compra y solo hay uno por pantalla. */
.woocommerce div.product a.added_to_cart.wc-forward {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 48px;
  margin: 10px 0 0;
  padding: 12px 16px;
  background: var(--guarf-papel-2);
  color: var(--guarf-tinta);
  border: var(--guarf-borde);
  border-radius: var(--guarf-radio-boton);
  box-shadow: var(--guarf-sombra);
  font-family: var(--guarf-texto);
  font-size: clamp(13px, 3.2vw, 15px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--guarf-dur-normal) var(--guarf-ease), box-shadow var(--guarf-dur-normal) var(--guarf-ease);
}

.woocommerce div.product a.added_to_cart.wc-forward::after { content: '\2192'; }

.woocommerce div.product a.added_to_cart.wc-forward:active {
  transition-duration: 100ms;
  transition-timing-function: var(--guarf-ease-plana);
  transform: translate(3px, 4px);
  box-shadow: var(--guarf-sombra-pulsada);
}

.woocommerce div.product a.added_to_cart.wc-forward:focus-visible {
  outline: 3px solid var(--guarf-naranja);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce div.product a.added_to_cart.wc-forward:hover {
    transform: translateY(-4px);
    box-shadow: var(--guarf-sombra-hover);
  }
  .woocommerce div.product a.added_to_cart.wc-forward:hover:active {
    transform: translate(3px, 4px);
    box-shadow: var(--guarf-sombra-pulsada);
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product a.added_to_cart.wc-forward { transition: box-shadow 1ms linear; }
  .woocommerce div.product a.added_to_cart.wc-forward:active,
  .woocommerce div.product a.added_to_cart.wc-forward:hover { transform: none; }
}

/* Red de seguridad: nada dentro de la ficha puede desbordar el ancho. */
.woocommerce div.product form.cart,
.woocommerce div.product form.cart * {
  max-width: 100%;
}

/* --- 12b. TRABAJAR CON EL FLEX DE ELEMENTOR --------------------------------
   El widget de Elementor impone display:flex sobre este contenedor desde su
   propia hoja, asi que las reglas de grid de arriba no llegan a aplicarse.
   En lugar de pelear por el display, se trabaja con flex: se permite el salto
   de linea y se le da a 'Ver carrito' una base del 100%, que en flex-wrap
   equivale a ocupar una fila entera. El resultado buscado es el mismo. */

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 auto;
}

.woocommerce div.product a.added_to_cart.wc-forward {
  flex: 1 0 100%;
  order: 99;
  margin-top: 0;
}

/* Elementor fija flex-wrap: nowrap en su hoja con mas peso del que se puede
   alcanzar sin ensuciar el selector. Este es el unico !important del fichero y
   esta aqui a proposito: sin salto de linea, 'Ver carrito' comprime al boton de
   compra hasta dejarlo en 32 px. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  flex-wrap: wrap !important;
}


/* ==========================================================================
   DIA 4 - AMPLIFICAR LA FIRMA Y LA JERARQUIA - 27-ago-2026
   Copia previa: design-system.css.bak-dia4-2026-08-27
   ========================================================================== */

/* --- 1. JERARQUIA DE LA FICHA DE PRODUCTO ---------------------------------
   Medido: H1 29px, H3 33px, H2 33px. El titulo del producto era el texto mas
   pequeno de su propia pagina y los subtitulos eran mayores que el. Se
   restablece el orden H1 > H2 > H3 y se controla con escala Y peso, no solo
   con tamano. */

.woocommerce div.product .elementor-widget-heading h1.elementor-heading-title,
.single-product .elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--guarf-display);
  font-size: clamp(32px, 6vw, 52px);
  line-height: .98;
  letter-spacing: -.005em;
}

.single-product .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.08;
}

.single-product .elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.18;
}

/* --- 2. EL PRECIO USA SU PROPIO TOKEN -------------------------------------
   El sistema declara --guarf-precio: 30px en la display, pero el precio se
   renderizaba en Poppins a 21px, indistinguible del cuerpo. Es el dato que
   decide la compra: merece la voz de la marca. */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price {
  font-family: var(--guarf-display);
  font-size: var(--guarf-precio);
  line-height: 1.05;
  color: var(--guarf-tinta);
}

/* El rango de precios sin talla elegida es informacion secundaria: se mantiene
   legible pero no compite con el precio real. */
.woocommerce div.product > .summary > p.price,
.woocommerce div.product .elementor-widget-woocommerce-product-price .price {
  font-size: clamp(22px, 3vw, 26px);
  color: var(--guarf-tinta-70);
}

/* --- 3. EL AMBAR NUNCA COMO TEXTO -----------------------------------------
   El total del carrito en la cabecera salia en #FFB71B sobre blanco: 1,8:1.
   Lo prohibe el propio sistema. */

.elementor-menu-cart__toggle .elementor-button-text,
.elementor-menu-cart__toggle_button .woocommerce-Price-amount,
.elementor-menu-cart__toggle .woocommerce-Price-amount {
  color: var(--guarf-tinta);
}

/* --- 4. LA FIRMA ALCANZA A LA FOTOGRAFIA ----------------------------------
   Medido: 0 de 22 imagenes con borde o sombra. La firma visual solo vivia en
   botones y tarjetas, asi que la fotografia parecia de otro sitio. Aqui es
   donde la marca gana presencia sin anadir un solo color nuevo. */

.woocommerce div.product .woocommerce-product-gallery__wrapper img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.guarf-tarjeta img,
.guarf-caja__foto img {
  border: var(--guarf-borde);
  border-radius: var(--guarf-radio-tarjeta);
  box-shadow: var(--guarf-sombra);
  background: var(--guarf-papel);
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
}

/* Las miniaturas llevan la firma mas fina para no competir con la principal. */
.woocommerce div.product .flex-control-thumbs img {
  border: 2px solid var(--guarf-linea);
  border-radius: 10px;
  box-shadow: none;
}

.woocommerce div.product .flex-control-thumbs .flex-active {
  border-color: var(--guarf-tinta);
}

/* --- 5. CABECERAS DE SECCION CON MAS PRESENCIA ----------------------------
   El H2 de seccion estaba en clamp(28,4vw,44). Frente a las referencias del
   sector se quedaba corto: son la voz de la marca y competian de tu a tu con
   el cuerpo. Se sube un escalon sin llegar al gesto de cartel, que no encaja
   con un dial de variacion de 0,35. */

:root {
  --guarf-h2: clamp(30px, 5vw, 56px);
}

/* --- 6. EL PULSO DE CONFIRMACION, EN EL LENGUAJE DEL SISTEMA --------------
   La version de ayer usaba un halo de color con desplazamiento cero, que es
   decoracion ajena al sistema. Ahora confirma con el mismo recurso que usa
   todo lo demas: la sombra solida, en verde y por un instante. */

@keyframes guarf-confirmado {
  0%   { transform: translate(0, 0);   box-shadow: var(--guarf-sombra); }
  35%  { transform: translate(-2px, -3px); box-shadow: 7px 9px 0 var(--guarf-verde); }
  100% { transform: translate(0, 0);   box-shadow: var(--guarf-sombra); }
}

/* --- 7. AJUSTES DE PUNTERIA (segunda pasada del dia 4) --------------------
   a) Los H3 de la ficha no son widgets de encabezado sino contenido dentro de
      un contenedor de Elementor, asi que el selector anterior no los alcanzaba.
   b) El total del carrito vive en .elementor-menu-cart__subtotal y el ambar lo
      llevaba el simbolo de moneda, no el importe. */

.single-product .elementor-widget-container > h3,
.single-product .elementor-widget-text-editor h3,
.single-product .e-con-inner h3 {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.18;
}

.single-product .elementor-widget-container > h2,
.single-product .e-con-inner h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.08;
}

.elementor-menu-cart__subtotal,
.elementor-menu-cart__subtotal .woocommerce-Price-amount,
.elementor-menu-cart__subtotal .woocommerce-Price-currencySymbol,
.elementor-menu-cart__subtotal bdi {
  color: var(--guarf-tinta);
}

/* --- 8. EL PANEL DEL CARRITO ---------------------------------------------
   Los nombres de producto y el enlace del panel desplegable salian en ambar
   sobre blanco: 1,74:1, el peor contraste que quedaba en el sitio. El propio
   sistema prohibe el ambar como color de texto. */

.elementor-menu-cart__product-name,
.elementor-menu-cart__product-name a,
.elementor-menu-cart__product-price,
.elementor-menu-cart__product .variation,
.elementor-menu-cart__footer-buttons .elementor-button-text,
.elementor-menu-cart__container .elementor-button-text {
  color: var(--guarf-tinta);
}

.elementor-menu-cart__product-name a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==========================================================================
   DIA 5 - MOVIMIENTO - 27-ago-2026
   GSAP NO ENTRA. Las seis referencias analizadas (Apple, Maev, Satisfy,
   Ryoken, Kismet y Butternut) no cargan ninguna libreria de animacion.
   Todo esto son transiciones CSS mas un observador de menos de 1 KB.
   ========================================================================== */

/* El bloque de animation-timeline del dia 3 se desactiva cuando hay script:
   una sola fuente de verdad para el revelado, sin dos sistemas pisandose. */
.guarf-js .guarf-revela {
  animation: none;
}

/* Estado de partida. Solo se aplica si el script esta vivo (.guarf-js), asi
   que sin JavaScript la pagina se ve entera. */
.guarf-js .guarf-revela {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--guarf-dur-lenta) var(--guarf-ease) var(--guarf-retardo, 0ms),
    transform var(--guarf-dur-lenta) var(--guarf-ease) var(--guarf-retardo, 0ms);
  will-change: opacity, transform;
}

.guarf-js .guarf-revela.guarf-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Acordeon de preguntas ----------------------------------------------- */

.guarf-acordeon > summary {
  cursor: pointer;
  list-style: none;
}

.guarf-acordeon > summary::-webkit-details-marker { display: none; }

.guarf-acordeon > summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--guarf-tinta);
  border-bottom: 2px solid var(--guarf-tinta);
  transform: rotate(45deg);
  transition: transform var(--guarf-dur-normal) var(--guarf-ease);
  margin-left: auto;
  flex: none;
}

.guarf-acordeon[open] > summary::after {
  transform: rotate(-135deg);
}

/* --- Rendimiento --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .guarf-js .guarf-revela,
  .guarf-revela {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
    will-change: auto;
  }
  .guarf-acordeon > summary::after { transition: none; }
}


/* ==========================================================================
   CORRECCIONES DE LA PRUEBA CON USUARIOS (dia 6) - 27-ago-2026
   Copia previa: design-system.css.bak-dia6-2026-08-27
   ========================================================================== */

/* --- U1. EL CARRITO CAIA A UNA SEGUNDA FILA -------------------------------
   Medido: el contenedor de la cabecera es flex con flex-wrap: wrap y 397 px de
   ancho. El menu ocupa 228 px y el carrito 148 px. Con el carrito vacio
   ('0,00 EUR') cabe todo; en cuanto el importe crece a '156,60 EUR' la suma
   supera el ancho y el carrito salta de linea.
   Se impide el salto y se evita que el carrito encoja o parta el importe. */

.elementor-location-header .elementor-widget-wrap:has(.elementor-menu-cart__wrapper) {
  flex-wrap: nowrap;
  align-items: center;
}

.elementor-location-header .elementor-widget:has(.elementor-menu-cart__wrapper) {
  flex: 0 0 auto;
}

.elementor-menu-cart__toggle,
.elementor-menu-cart__toggle_wrapper,
.elementor-menu-cart__toggle .elementor-button-text,
.elementor-menu-cart__subtotal {
  white-space: nowrap;
}

/* Respaldo por identificador, por si :has no estuviera disponible. */
.elementor-element-839de00 {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* U1b. Al impedir el salto del carrito, el que se partia era el menu: 'FAQs'
   caia a una segunda linea. Se protege tambien su lista y se le impide
   encoger. Menu 228 px + carrito 148 px = 376 px, y el contenedor mide 397,
   asi que caben sin comprimir nada. */

.elementor-location-header .elementor-widget:has(.elementor-icon-list-items) {
  flex: 0 0 auto;
}

.elementor-location-header .elementor-icon-list-items {
  flex-wrap: nowrap;
}

.elementor-location-header .elementor-icon-list-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

.elementor-element-e24c0c4 { flex: 0 0 auto; }
.elementor-element-e24c0c4 .elementor-icon-list-items { flex-wrap: nowrap; }

/* --- REGRESION DEL DIA 3: el menu superior habia quedado en rojo -----------
   Al cambiar el color de enlace del Kit global para eliminar el verde
   ilegible, los enlaces de la cabecera tambien pasaron a rojo y competian con
   el boton de accion, rompiendo la regla de un solo elemento rojo por
   pantalla. El rojo se queda para los enlaces del cuerpo; la navegacion
   vuelve a tinta. */

.elementor-location-header a,
.elementor-location-header .elementor-icon-list-item a,
.elementor-location-header .elementor-icon-list-text {
  color: var(--guarf-tinta);
}

@media (hover: hover) and (pointer: fine) {
  .elementor-location-header a:hover,
  .elementor-location-header .elementor-icon-list-item a:hover {
    color: var(--guarf-rojo);
  }
}

/* --- U3. 'una sola linea' se partia en dos lineas -------------------------
   El subtitulo del hero dejaba 'una sola' al final de una linea y 'linea.' en
   la siguiente, justo en la expresion que da sentido a la frase. Se mantiene
   unida. Son 15 caracteres: cabe incluso en las pantallas mas estrechas. */

.guarf-hero__entrada strong {
  white-space: nowrap;
}

.guarf-hero__entrada {
  text-wrap: pretty;
}

/* --- U4. El boton 'Conocenos' no parecia un boton -------------------------
   Era la variante fantasma: fondo transparente. Sobre el amarillo del hero eso
   lo dejaba del mismo color que el fondo, con solo un contorno. Y al pasar el
   raton se invertia a negro entero, que era un salto demasiado brusco.

   Ahora usa fondo crema del sistema, que contrasta con el amarillo y lo lee
   como pieza sobre el papel, con el mismo lenguaje que las tarjetas. Al pasar
   el raton se comporta igual que 'Ver las cajas': sube 4 px y la sombra se
   endurece. No cambia a negro. */

.guarf-hero .guarf-btn.guarf-btn--fantasma {
  background: var(--guarf-crema);
  color: var(--guarf-tinta);
  border: var(--guarf-borde);
  box-shadow: var(--guarf-sombra);
}

@media (hover: hover) and (pointer: fine) {
  .guarf-hero .guarf-btn.guarf-btn--fantasma:hover {
    background: var(--guarf-papel);
    color: var(--guarf-tinta);
    transform: translateY(-4px);
    box-shadow: var(--guarf-sombra-hover);
  }
  .guarf-hero .guarf-btn.guarf-btn--fantasma:hover:active {
    transform: translate(3px, 4px);
    box-shadow: var(--guarf-sombra-pulsada);
  }
}

.guarf-hero .guarf-btn.guarf-btn--fantasma:active {
  transform: translate(3px, 4px);
  box-shadow: var(--guarf-sombra-pulsada);
}

@media (prefers-reduced-motion: reduce) {
  .guarf-hero .guarf-btn.guarf-btn--fantasma:hover,
  .guarf-hero .guarf-btn.guarf-btn--fantasma:active { transform: none; }
}

/* --- U6. Las seis cajas salian en 4 + 2 -----------------------------------
   La rejilla usaba columnas automaticas segun el ancho disponible: en 1140 px
   caben cuatro de 269 px, asi que quedaban cuatro arriba y dos huerfanas
   abajo. Ahora son dos filas de tres.

   El usuario pidio conservar el tamano actual de las tarjetas, asi que las
   columnas se fijan en 269 px y el bloque se centra. Tres columnas mas dos
   separaciones suman 851 px dentro de los 1140 disponibles, de modo que queda
   aire simetrico a los lados en lugar de tarjetas mas anchas.

   Solo se aplica desde 1025 px. Por debajo sigue mandando el comportamiento
   adaptable de siempre. */

@media (min-width: 1025px) {
  .guarf-parrilla {
    grid-template-columns: repeat(3, 269px);
    justify-content: center;
  }
}

/* --- U15: la cruz de cerrar de las ventanas emergentes no se veia --------
   El popup del 10 % es blanco y su boton de cierre venia en un tono muy
   claro, asi que quedaba invisible y no habia forma evidente de salir.
   Pasa a tinta, con area tactil suficiente y foco visible. */

.dialog-widget .dialog-close-button,
.elementor-popup-modal .dialog-close-button {
  color: var(--guarf-tinta);
  opacity: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--guarf-dur-normal) var(--guarf-ease-plana), transform var(--guarf-dur-rapida) var(--guarf-ease);
}

.dialog-widget .dialog-close-button i,
.dialog-widget .dialog-close-button svg,
.elementor-popup-modal .dialog-close-button i,
.elementor-popup-modal .dialog-close-button svg {
  color: var(--guarf-tinta);
  fill: var(--guarf-tinta);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .dialog-widget .dialog-close-button:hover,
  .elementor-popup-modal .dialog-close-button:hover { color: var(--guarf-rojo); }
  .dialog-widget .dialog-close-button:hover i,
  .dialog-widget .dialog-close-button:hover svg { color: var(--guarf-rojo); fill: var(--guarf-rojo); }
}

.dialog-widget .dialog-close-button:focus-visible,
.elementor-popup-modal .dialog-close-button:focus-visible {
  outline: 3px solid var(--guarf-naranja);
  outline-offset: 2px;
}

/* U15b: el icono de cerrar es un SVG que apunta a un sprite externo y no
   llegaba a pintarse. Se dibuja la cruz con dos lineas en CSS, que no
   depende de ningun recurso y siempre se ve. */

.dialog-widget .dialog-close-button svg,
.elementor-popup-modal .dialog-close-button svg,
.dialog-widget .dialog-close-button i,
.elementor-popup-modal .dialog-close-button i { display: none; }

.dialog-widget .dialog-close-button,
.elementor-popup-modal .dialog-close-button { position: absolute; }

.dialog-widget .dialog-close-button::before,
.dialog-widget .dialog-close-button::after,
.elementor-popup-modal .dialog-close-button::before,
.elementor-popup-modal .dialog-close-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.dialog-widget .dialog-close-button::before,
.elementor-popup-modal .dialog-close-button::before { transform: translate(-50%, -50%) rotate(45deg); }

.dialog-widget .dialog-close-button::after,
.elementor-popup-modal .dialog-close-button::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ==========================================================================
   Panel lateral del carrito (U30, 28-ago-2026)
   Va aqui y no en el CSS de la portada porque el carrito sale en todo el
   sitio, no solo en las paginas que cargan aquella hoja.
   ========================================================================== */

/* La cruz de cerrar llegaba con altura CERO y su div vacio: no habia nada que
   pulsar. Mismo caso que la cruz del popup del 10 %. Se dibuja con dos lineas
   y se le da area tactil de 44 px. */
.elementor-menu-cart__close-button {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  cursor: pointer;
  flex: 0 0 auto;
}

.elementor-menu-cart__close-button::before,
.elementor-menu-cart__close-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--guarf-tinta);
}

.elementor-menu-cart__close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.elementor-menu-cart__close-button::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.elementor-menu-cart__close-button:focus-visible {
  outline: 3px solid var(--guarf-rojo);
  outline-offset: 2px;
}

/* "Finalizar compra": el enlace era blanco pero el span de dentro venia en
   tinta, el mismo color que su fondo. Texto invisible sobre boton oscuro. */
body .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout,
body .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout .elementor-button-text {
  color: var(--guarf-papel);
}

/* El aviso de cuanto falta para el envio gratis iba en una sola linea y se
   cortaba. Mejor dos o tres lineas que una frase a medias. */
.guarf-envio__texto {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

/* ==========================================================================
   Ficha de caja - Fase 1: estructura (28-ago-2026)
   Patron tomado de Kismet y Ryoken: la galeria se queda pegada mientras se
   baja por la columna derecha, que es la que lleva todo el peso.
   ========================================================================== */

@media (min-width: 1025px) {
  .guarf-galeria-pegada {
    position: sticky;
    top: 110px;
    align-self: flex-start;
  }
}

/* Las valoraciones, abajo y centradas. */
.guarf-resenas-ficha {
  max-width: 860px;
  margin: 0 auto;
}

.guarf-resenas-ficha #reviews > h2,
.guarf-resenas-ficha .woocommerce-Reviews-title {
  text-align: center;
  font-family: var(--guarf-display);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 26px;
}

/* ==========================================================================
   Ficha de caja - Fase 2 (28-ago-2026)
   Fondo crema como la pagina de Cajas, desplegables cerrados en la columna de
   compra, y relacionados al final.
   ========================================================================== */

body.single-product.guarf-ficha-caja {
  background: var(--guarf-papel-2);
}

/* La cabecera y el pie mantienen lo suyo; solo respira el cuerpo. */
body.guarf-ficha-caja .elementor-location-single > .e-con {
  background: transparent;
}

/* --- Entradilla fija, antes de los desplegables ------------------------- */

.guarf-detalle__intro {
  margin: 6px 0 22px;
}

.guarf-detalle__intro p { margin: 0 0 12px; }

.guarf-detalle__intro .guarf-resultado {
  font-size: 17px;
  line-height: 1.5;
}

/* --- Desplegables -------------------------------------------------------- */

.guarf-desplegable {
  border-top: 1px solid var(--guarf-linea);
}

.guarf-desplegable:last-of-type { border-bottom: 1px solid var(--guarf-linea); }

.guarf-desplegable__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--guarf-display);
  font-size: 18px;
  color: var(--guarf-tinta);
}

/* La flecha por defecto del navegador no encaja con el sistema. */
.guarf-desplegable__titulo::-webkit-details-marker { display: none; }
.guarf-desplegable__titulo::marker { content: ''; }

/* Signo + que se convierte en - al abrir. Dibujado, no tipografico: asi no
   depende de que cargue ninguna fuente de iconos. */
.guarf-desplegable__titulo::after {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  position: relative;
  background:
    linear-gradient(var(--guarf-tinta), var(--guarf-tinta)) center / 15px 2px no-repeat,
    linear-gradient(var(--guarf-tinta), var(--guarf-tinta)) center / 2px 15px no-repeat;
  transition: transform 200ms cubic-bezier(.34, 1.15, .64, 1);
}

.guarf-desplegable[open] .guarf-desplegable__titulo::after {
  background: linear-gradient(var(--guarf-tinta), var(--guarf-tinta)) center / 15px 2px no-repeat;
  transform: rotate(180deg);
}

.guarf-desplegable__titulo:focus-visible {
  outline: 3px solid var(--guarf-rojo);
  outline-offset: 2px;
}

.guarf-desplegable__cuerpo {
  padding: 0 2px 20px;
  font-size: 15px;
  line-height: 1.65;
}

.guarf-desplegable__cuerpo > *:first-child { margin-top: 0; }
.guarf-desplegable__cuerpo > *:last-child { margin-bottom: 0; }

.guarf-desplegable__cuerpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.guarf-desplegable__cuerpo th,
.guarf-desplegable__cuerpo td {
  border: 1px solid var(--guarf-linea);
  padding: 7px 9px;
  text-align: left;
}

.guarf-desplegable__cuerpo th { background: var(--guarf-papel-2); }

.guarf-desplegable__cuerpo ul {
  margin: 0;
  padding-left: 20px;
}

.guarf-desplegable__cuerpo li { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .guarf-desplegable__titulo::after { transition: none; }
}

/* --- Tambien te podria interesar ---------------------------------------- */

.guarf-tambien {
  padding: 50px 0 10px;
  border-top: 2px solid var(--guarf-linea);
  margin-top: 40px;
}

.guarf-tambien__titulo {
  text-align: center;
  font-family: var(--guarf-display);
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 8px;
}

.guarf-tambien__entrada {
  text-align: center;
  margin: 0 auto 34px;
  max-width: 46ch;
  color: var(--guarf-tinta);
}

.guarf-tambien__parrilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.guarf-tambien__pieza {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--guarf-papel);
}

.guarf-tambien__pieza h3 {
  font-size: 19px;
  margin: 14px 0 6px;
}

.guarf-tambien__pieza h3 a { text-decoration: none; }

.guarf-tambien__pieza p { margin: 0 0 12px; }

.guarf-tambien__foto {
  display: block;
  background: var(--guarf-amarillo);
  border-radius: 12px;
  overflow: hidden;
}

.guarf-tambien__foto img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
}

/* El precio empuja al boton al fondo: todas las tarjetas acaban alineadas. */
.guarf-tambien__precio {
  margin: auto 0 14px;
  font-family: var(--guarf-display);
}

.guarf-tambien__pieza .guarf-btn { text-align: center; }

/* ==========================================================================
   Ficha de caja - Fase 3: legibilidad de la columna de compra (28-ago-2026)
   ========================================================================== */

/* El reclamo bajo el nombre. Es la frase que decide si sigue leyendo, asi que
   deja de parecer un parrafo mas. */
body.guarf-ficha-caja .elementor-element-gfcaja07 {
  font-size: 18px;
  line-height: 1.5;
  max-width: 46ch;
}

/* La leyenda de tallas iba a 11 px, en mayusculas y con las letras separadas:
   es un dato que se consulta, no un adorno, y asi no se leia. */
body.guarf-ficha-caja .guarf-ayuda-talla {
  font-size: 14px;
  line-height: 1.55;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--guarf-texto);
  background: var(--guarf-papel);
  border: 1px solid var(--guarf-linea);
  border-radius: 12px;
  padding: 11px 14px;
  margin: 14px 0 0;
  display: block;
}

/* --- Franja de confianza -------------------------------------------------- */

/* Las cuatro promesas iban en una linea de 11 px separada por puntos. Se
   reparten en dos columnas, con su marca de verificado delante. */
body.guarf-ficha-caja .elementor-element-gfcaja10 .elementor-widget-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--guarf-linea);
  font-size: 0;
}

body.guarf-ficha-caja .elementor-element-gfcaja10 p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 767px) {
  body.guarf-ficha-caja .elementor-element-gfcaja10 .elementor-widget-container {
    grid-template-columns: 1fr;
  }
}

/* --- Galeria -------------------------------------------------------------- */

/* Con las fotos de los snacks dentro, las miniaturas pasan de 7 a 12: se
   encogen para que sigan cabiendo sin empujar la pagina. */
body.guarf-ficha-caja .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 0;
}

body.guarf-ficha-caja .flex-control-thumbs li {
  width: auto;
  margin: 0;
  list-style: none;
}

body.guarf-ficha-caja .flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 767px) {
  body.guarf-ficha-caja .flex-control-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Ficha de caja - Fase 4: bloque de valoraciones compacto (29-ago-2026)
   Referencia: Ryoken. Las resenas se ven de un vistazo y el formulario solo
   aparece si lo pides.
   ========================================================================== */

body.guarf-ficha-caja .guarf-resenas-ficha {
  max-width: 1000px;
  padding: 10px 0 0;
}

body.guarf-ficha-caja .guarf-resenas-ficha #reviews > h2,
body.guarf-ficha-caja .guarf-resenas-ficha .woocommerce-Reviews-title {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: 18px;
}

/* Las resenas, en fila y en tarjeta, no en una lista larga. */
body.guarf-ficha-caja .guarf-resenas-ficha .commentlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

body.guarf-ficha-caja .guarf-resenas-ficha .commentlist li {
  margin: 0;
  padding: 18px;
  background: var(--guarf-papel);
  border: 1px solid var(--guarf-linea);
  border-radius: 14px;
  list-style: none;
}

body.guarf-ficha-caja .guarf-resenas-ficha .commentlist .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
}

body.guarf-ficha-caja .guarf-resenas-ficha .commentlist img.avatar {
  position: static;
  float: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  border: 0;
  margin: 0 0 8px;
}

body.guarf-ficha-caja .guarf-resenas-ficha .commentlist p { font-size: 15px; }

/* Cuando no hay ninguna, que no ocupe una pantalla entera. */
body.guarf-ficha-caja .guarf-resenas-ficha .woocommerce-noreviews {
  text-align: center;
  margin: 0 0 22px;
  font-size: 16px;
}

/* --- El formulario, plegado ---------------------------------------------- */

body.guarf-ficha-caja .guarf-resenas__abrir {
  display: block;
  margin: 0 auto 10px;
  cursor: pointer;
}

body.guarf-ficha-caja .guarf-resenas__formulario {
  display: none;
  max-width: 640px;
  margin: 22px auto 0;
  padding: 22px;
  background: var(--guarf-papel);
  border: 1px solid var(--guarf-linea);
  border-radius: 14px;
}

body.guarf-ficha-caja .guarf-resenas__formulario--abierto { display: block; }

body.guarf-ficha-caja .guarf-resenas__formulario #reply-title { display: none; }

body.guarf-ficha-caja .guarf-resenas__formulario input[type="text"],
body.guarf-ficha-caja .guarf-resenas__formulario input[type="email"],
body.guarf-ficha-caja .guarf-resenas__formulario textarea {
  width: 100%;
  border: 1px solid var(--guarf-linea);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--guarf-texto);
  font-size: 15px;
}

body.guarf-ficha-caja .guarf-resenas__formulario textarea { min-height: 110px; }

/* ==========================================================================
   Ficha de caja - Fase 5: contraste de botones y alineacion (29-ago-2026)
   ========================================================================== */

/* "Ver carrito" quedaba crema sobre crema: se distinguia solo por el borde.
   Pasa a tinta, que no compite con el rojo de "Anadir al carrito" y se
   despega del fondo. */
body.guarf-ficha-caja .single_variation_wrap a.added_to_cart,
body.guarf-ficha-caja .woocommerce div.product a.added_to_cart,
body.guarf-ficha-caja a.added_to_cart.wc-forward {
  background: var(--guarf-tinta);
  color: var(--guarf-papel);
  border-color: var(--guarf-tinta);
}

body.guarf-ficha-caja .single_variation_wrap a.added_to_cart:hover,
body.guarf-ficha-caja a.added_to_cart.wc-forward:hover {
  background: #2C3A45;
  color: var(--guarf-papel);
}

/* El Kit de Elementor pinta todo boton con el color primario de fondo Y de
   texto, asi que "Escribir una resena" salia ambar sobre ambar. Mismo caso que
   los chips del catalogo. */
body.guarf-ficha-caja .guarf-resenas__abrir,
body.guarf-ficha-caja .guarf-resenas__abrir .elementor-button-text {
  color: var(--guarf-tinta);
  background: var(--guarf-amarillo);
}

body.guarf-ficha-caja .guarf-resenas__abrir:hover {
  background: #E0A118;
  color: var(--guarf-tinta);
}

/* --- Tambien te podria interesar ---------------------------------------- */

/* Los nombres iban en el rojo de enlace del Kit. En una rejilla de cuatro,
   cuatro titulos rojos compiten entre si y con el precio. Van en tinta. */
body.guarf-ficha-caja .guarf-tambien__pieza h3,
body.guarf-ficha-caja .guarf-tambien__pieza h3 a {
  color: var(--guarf-tinta);
}

body.guarf-ficha-caja .guarf-tambien__pieza h3 a:hover {
  color: var(--guarf-rojo);
}

/* Los botones acababan a distinta altura porque las descripciones no miden lo
   mismo. El precio se empuja al fondo y arrastra al boton, asi que los cuatro
   quedan alineados sea cual sea el largo del texto. */
body.guarf-ficha-caja .guarf-tambien__pieza p.guarf-tambien__precio {
  margin-top: auto;
  margin-bottom: 14px;
}

body.guarf-ficha-caja .guarf-tambien__pieza > .guarf-btn {
  margin-top: 0;
  width: 100%;
}

/* El selector anterior perdia contra la regla del dia 3 que da forma a este
   mismo boton en la ficha. Se le da el peso que hace falta. */
body.guarf-ficha-caja .woocommerce div.product a.added_to_cart.wc-forward,
body.guarf-ficha-caja form.variations_form a.added_to_cart.wc-forward,
body.guarf-ficha-caja .variations_button a.added_to_cart.wc-forward {
  background-color: var(--guarf-tinta);
  color: var(--guarf-papel);
  border-color: var(--guarf-tinta);
}

body.guarf-ficha-caja .woocommerce div.product a.added_to_cart.wc-forward:hover,
body.guarf-ficha-caja form.variations_form a.added_to_cart.wc-forward:hover,
body.guarf-ficha-caja .variations_button a.added_to_cart.wc-forward:hover {
  background-color: #2C3A45;
  color: var(--guarf-papel);
}

/* --- Ficha de caja: medidas y composicion (F6, 29 ago) ------------------ */

.guarf-medidas__titulo { margin: 18px 0 8px; }
.guarf-medidas__nota { margin: 8px 0 0; font-size: 13px; opacity: .75; }

.guarf-composicion__entrada { margin: 0 0 14px; }

.guarf-composicion__pieza {
  border-top: 1px solid var(--guarf-linea);
  padding: 12px 0 2px;
}

.guarf-composicion__nombre {
  font-family: var(--guarf-display);
  font-size: 16px;
  margin: 0 0 6px;
}

.guarf-composicion__nombre a { color: var(--guarf-tinta); text-decoration: none; }
.guarf-composicion__nombre a:hover { color: var(--guarf-rojo); }

.guarf-composicion__datos ul { margin: 0; padding-left: 18px; }
.guarf-composicion__datos li { margin-bottom: 4px; }

/* El dato que falta se ve, no se disimula. */
.guarf-composicion__pendiente {
  margin: 0;
  padding: 8px 11px;
  background: #FFF3CD;
  border-left: 3px solid var(--guarf-amarillo);
  border-radius: 6px;
  font-size: 14px;
}

/* --- Carrito (F7, 29 ago) ----------------------------------------------- */

/* El boton del complemento salia en un azul claro heredado, ilegible sobre el
   ambar. Es el mismo caso que los chips y "Finalizar compra". */
body.woocommerce-cart .guarf-bump .guarf-btn,
body.woocommerce-cart .guarf-bump .guarf-btn .elementor-button-text {
  color: var(--guarf-tinta);
}

/* Invitacion a identificarse, antes de la tabla del carrito. */
.guarf-acceso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 26px;
  padding: 20px 22px;
  background: var(--guarf-papel-2);
  border: 2px solid var(--guarf-tinta);
  border-radius: 16px;
  box-shadow: 5px 6px 0 rgba(29, 37, 44, .14);
}

.guarf-acceso__texto { flex: 1 1 320px; }

.guarf-acceso__titulo {
  margin: 0 0 4px;
  font-family: var(--guarf-display);
  font-size: 20px;
  color: var(--guarf-tinta);
}

.guarf-acceso__ayuda {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--guarf-tinta);
  max-width: 62ch;
}

.guarf-acceso__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guarf-acceso__botones .guarf-btn { color: var(--guarf-tinta); }

@media (max-width: 600px) {
  .guarf-acceso__botones { width: 100%; }
  .guarf-acceso__botones .guarf-btn { flex: 1 1 auto; text-align: center; }
}

/* El widget de carrito de Elementor pinta sus enlaces con una regla de mucho
   peso: dos clases, tres :not() y el elemento. Ganarle con selectores obliga
   a copiar esa retahila. Como el valor lo saca de una variable, basta con
   cambiarla dentro de nuestros bloques: la regla sigue mandando, pero con el
   color correcto. */
.guarf-acceso,
.guarf-bump {
  --links-normal-color: var(--guarf-tinta);
  --links-hover-color: var(--guarf-tinta);
}

/* ==========================================================================
   Preguntas frecuentes (29-ago-2026)
   Modelo: la FAQ de Ryoken. Titulo grande con una frase de ayuda, temas
   separados por rotulo y preguntas plegadas en una columna estrecha.
   El HTML de la pagina ya venia bien montado (h2 por tema y <details> por
   pregunta): esto es solo el aspecto.
   ========================================================================== */

body.page-id-1965 {
  background: var(--guarf-papel-2);
}

body.page-id-1965 .site-main,
body.page-id-1965 .entry-content {
  max-width: 920px;
  margin-inline: auto;
}

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

body.page-id-1965 .entry-title,
body.page-id-1965 h1 {
  text-align: center;
  font-size: clamp(34px, 6vw, 60px);
  margin: 10px 0 14px;
}

/* La frase de ayuda deja de parecer un parrafo suelto. */
body.page-id-1965 .guarf > p.guarf-secundario:first-of-type {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 46px;
  font-size: 17px;
  line-height: 1.6;
}

/* --- Rotulo de cada tema ------------------------------------------------- */

body.page-id-1965 .guarf h2 {
  font-family: var(--guarf-display);
  font-size: clamp(24px, 3.4vw, 34px);
  margin: 46px 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--guarf-tinta);
}

body.page-id-1965 .guarf h2:first-of-type { margin-top: 0; }

/* --- Preguntas ----------------------------------------------------------- */

body.page-id-1965 .guarf-acordeon {
  background: var(--guarf-papel);
  border: 1px solid var(--guarf-linea);
  border-radius: 14px;
  margin: 0 0 10px;
  overflow: hidden;
  transition: border-color 160ms ease;
}

body.page-id-1965 .guarf-acordeon:hover { border-color: var(--guarf-tinta); }

body.page-id-1965 .guarf-acordeon[open] {
  border-color: var(--guarf-tinta);
  box-shadow: 4px 5px 0 rgba(29, 37, 44, .10);
}

body.page-id-1965 .guarf-acordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--guarf-display);
  font-size: 18px;
  line-height: 1.35;
  color: var(--guarf-tinta);
}

body.page-id-1965 .guarf-acordeon > summary::-webkit-details-marker { display: none; }
body.page-id-1965 .guarf-acordeon > summary::marker { content: ''; }

/* Signo + que pasa a - al abrir. Dibujado con CSS, no con fuente de iconos. */
body.page-id-1965 .guarf-acordeon > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--guarf-tinta), var(--guarf-tinta)) center / 16px 2px no-repeat,
    linear-gradient(var(--guarf-tinta), var(--guarf-tinta)) center / 2px 16px no-repeat;
  transition: transform 200ms cubic-bezier(.34, 1.15, .64, 1);
}

body.page-id-1965 .guarf-acordeon[open] > summary::after {
  background: linear-gradient(var(--guarf-tinta), var(--guarf-tinta)) center / 16px 2px no-repeat;
  transform: rotate(180deg);
}

body.page-id-1965 .guarf-acordeon > summary:focus-visible {
  outline: 3px solid var(--guarf-rojo);
  outline-offset: -3px;
}

body.page-id-1965 .guarf-acordeon > *:not(summary) {
  padding-inline: 20px;
  font-size: 16px;
  line-height: 1.65;
}

body.page-id-1965 .guarf-acordeon > p:first-of-type { margin-top: 0; }
body.page-id-1965 .guarf-acordeon > *:last-child { margin-bottom: 20px; }

body.page-id-1965 .guarf-acordeon ul,
body.page-id-1965 .guarf-acordeon ol { padding-left: 40px; }

@media (prefers-reduced-motion: reduce) {
  body.page-id-1965 .guarf-acordeon > summary::after,
  body.page-id-1965 .guarf-acordeon { transition: none; }
}

@media (max-width: 600px) {
  body.page-id-1965 .guarf-acordeon > summary { font-size: 16px; padding: 15px 16px; }
  body.page-id-1965 .guarf-acordeon > *:not(summary) { padding-inline: 16px; }
}


/* ==========================================================================
   Tarjeta de producto en rejilla, fuera del catalogo (29-ago-2026)

   La misma plantilla de tarjeta (loop 663) se usa en el catalogo, en la home
   y en el bloque "Tambien te puede interesar..." de la ficha de producto.
   Las correcciones de tamano vivian en guarf-home.css, que solo se carga en
   la home, el catalogo y /cajas/: en la ficha de producto la foto salia a su
   tamano natural, desbordaba la tarjeta y descuadraba la fila entera.

   Se repiten aqui sin el prefijo de pagina, porque este fichero si se carga
   en todo el sitio. Son las mismas reglas, asi que donde ya se aplicaban no
   cambia nada.
   ========================================================================== */

.e-loop-item .elementor-element-17c7e98 { min-height: 210px; }

.e-loop-item .elementor-element-65be228 {
  width: 100%;
  max-width: 100%;
}

/* contain: la foto se ve entera dentro de su hueco, sin recortes ni deformar. */
.e-loop-item .elementor-element-65be228 img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 190px;
  object-fit: contain;
  transform: none;
}

/* Sin zoom al pasar el raton: con la altura fija, al crecer se desbordaba. */
.e-loop-item:hover .elementor-element-65be228 img,
.e-loop-item:hover .imagen-principal img,
.e-loop-item:hover .imagen-principal { transform: none; }


/* --------------------------------------------------------------------------
   Panel del carrito en movil (29-ago-2026)

   La cabecera monta DOS widgets de carrito: 839de00 en escritorio y 48a3722
   en movil. El de movil traia dos problemas propios:

   1. "Finalizar compra" tenia el fondo blanco, no oscuro como en escritorio.
   2. Los dos botones iban en dos columnas con la letra a 20 px y sin partir:
      no caben en 375 px y el segundo se salia del panel.
   -------------------------------------------------------------------------- */

/* Uno debajo del otro: cada boton se queda con todo el ancho y se ve entero
   sea cual sea el movil. En dos columnas no hay tamano de letra que salve
   "Finalizar compra" en las pantallas estrechas. */
body .elementor-element-48a3722 .elementor-menu-cart__footer-buttons {
  grid-template-columns: 1fr;
  gap: 10px;
}

body .elementor-element-48a3722 .elementor-menu-cart__footer-buttons a.elementor-button {
  width: 100%;
  white-space: normal;
  font-size: 18px;
  padding-inline: 12px;
}

/* Mismo aspecto que en escritorio: el boton que cierra la venta, oscuro. */
body .elementor-element-48a3722.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
  background-color: var(--guarf-tinta);
  border-color: var(--guarf-tinta);
}

body .elementor-element-48a3722.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout,
body .elementor-element-48a3722.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout .elementor-button-text {
  color: var(--guarf-papel);
}


/* --------------------------------------------------------------------------
   Los dos botones que cierran la compra (29-ago-2026)

   "Proceder al pago" (carrito) y "Realizar el pedido" (finalizar compra)
   seguian con el azul por defecto, en movil y en escritorio: eran los dos
   unicos botones de la tienda sin pasar por la marca. Van en tinta, igual
   que "Finalizar compra" del panel lateral.

   Los selectores repiten los de Elementor (widget de carrito y de finalizar
   compra) porque el azul viene de ahi y con menos peso no se le gana. No se
   toca .button.alt en general: esa clase la lleva tambien "Anadir al
   carrito", que va en rojo a proposito.
   -------------------------------------------------------------------------- */

body .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button,
body .woocommerce .wc-proceed-to-checkout a.checkout-button,
body .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order,
body .woocommerce-checkout #payment #place_order,
body #place_order {
  background-color: var(--guarf-tinta);
  border-color: var(--guarf-tinta);
  color: var(--guarf-papel);
}

body .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order:hover,
body .woocommerce-checkout #payment #place_order:hover,
body #place_order:hover {
  background-color: #2C3A45;
  border-color: #2C3A45;
  color: var(--guarf-papel);
}