/* ==========================================================================
   Base: reset, tipografía global, layout y componentes compartidos
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* clip, no hidden: hidden convertiria al elemento en contenedor de scroll
	   y romperia el header retractil (window.scrollY se quedaria en 0). */
	overflow-x: clip;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; padding: 0; }

ul[class],
ol[class] { list-style: none; }

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

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

button { cursor: pointer; }

/* --- Tipografía base ----------------------------------------------------- */
body {
	font-family: var(--f-texto);
	font-size: var(--fz-texto);
	font-weight: 400;
	line-height: var(--lh-texto);
	color: var(--c-texto);
	background-color: var(--c-blanco);
	overflow-x: clip;
}

/* La portada y las categorias van sobre un gris muy leve; el resto del sitio
   sigue en blanco. La clase la pone chogus_body_class() en inc/setup.php. */
body.chogus-fondo-gris { background-color: var(--bg-gris); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-titulo);
	color: var(--c-negro);
}

h1 { font-size: var(--fz-display); font-weight: 800; line-height: var(--lh-display); }
h2 { font-size: var(--fz-h2);      font-weight: 400; line-height: var(--lh-h2); }
h3 { font-size: var(--fz-h3);      font-weight: 800; line-height: var(--lh-h3); }
h4 { font-size: var(--fz-h4);      font-weight: 700; line-height: var(--lh-h4); }
h5 { font-size: var(--fz-parrafo-l); font-weight: 700; line-height: var(--lh-parrafo-l); }
h6 { font-size: var(--fz-texto);   font-weight: 700; line-height: var(--lh-texto); }

a {
	color: var(--c-negro);
	text-decoration: none;
	transition: color var(--transicion);
}
a:hover { color: var(--c-terracota); }

strong, b { font-weight: 700; }

/* --- Layout: section > .wrapper ------------------------------------------ */
.wrapper {
	width: 100%;
	max-width: var(--wrapper-max);
	margin-inline: auto;
	padding-inline: var(--wrapper-pad);
}

/* Variante a sangre completa dentro de una sección */
.wrapper--ancho { max-width: none; }

section { position: relative; }

/* --- Botones ------------------------------------------------------------- */
/* Boton primario: verde de marca. Es el estilo de todos los botones
   principales que van sobre fondo claro. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--f-titulo);
	font-size: var(--fz-boton);
	font-weight: 700;
	line-height: var(--lh-boton);
	text-align: center;
	padding: 15px 30px;
	border: 2px solid var(--c-terracota);
	border-radius: var(--radio-boton);
	background-color: var(--c-terracota);
	color: var(--c-blanco);
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn:hover,
.btn:focus-visible {
	background-color: var(--c-terracota-oscuro);
	border-color: var(--c-terracota-oscuro);
	color: var(--c-blanco);
}

/* Amarillo: sobre el amarillo el texto va en negro, que en blanco no se lee. */
.btn--amarillo {
	border-color: var(--c-amarillo);
	background-color: var(--c-amarillo);
	color: var(--c-negro);
}
.btn--amarillo:hover,
.btn--amarillo:focus-visible {
	border-color: #E0A200;
	background-color: #E0A200;
	color: var(--c-negro);
}

/* Terracota: el primario cuando el verde no pega con la seccion. */
.btn--terracota {
	border-color: var(--c-terracota);
	background-color: var(--c-terracota);
	color: var(--c-blanco);
}
.btn--terracota:hover,
.btn--terracota:focus-visible {
	border-color: var(--c-terracota-oscuro);
	background-color: var(--c-terracota-oscuro);
	color: var(--c-blanco);
}

.btn--outline {
	background-color: transparent;
	color: var(--c-terracota);
}
.btn--outline:hover {
	background-color: var(--c-terracota);
	color: var(--c-blanco);
}

/* Toma el color de la seccion en la que esta; al pasar el raton se aclara. */
.btn--tema {
	background-color: var(--tema-acento, var(--c-terracota));
	border-color: var(--tema-acento, var(--c-terracota));
	color: var(--c-blanco);
}
.btn--tema:hover,
.btn--tema:focus-visible {
	background-color: var(--tema-fondo, var(--bg-verde));
	border-color: var(--tema-fondo, var(--bg-verde));
	color: var(--tema-acento, var(--c-terracota));
}

@media (max-width: 767px) {
	.btn { padding: 10px 20px; }
}

/* --- Utilidades de texto ------------------------------------------------- */
.txt-center { text-align: center; }
.txt-right  { text-align: right; }

.t-display   { font-family: var(--f-titulo); font-size: var(--fz-display);   font-weight: 800; line-height: var(--lh-display); }
.t-display-2 { font-family: var(--f-titulo); font-size: var(--fz-display-2); font-weight: 800; line-height: var(--lh-display-2); }
.t-parrafo-l { font-size: var(--fz-parrafo-l); line-height: var(--lh-parrafo-l); }
.t-parrafo-xs{ font-size: var(--fz-parrafo-xs); line-height: var(--lh-parrafo-xs); }
.t-tag {
	font-family: var(--f-titulo);
	font-size: var(--fz-tag);
	font-weight: 800;
	line-height: var(--lh-tag);
	letter-spacing: var(--ls-tag);
	text-transform: uppercase;
}
.t-numero { font-family: var(--f-titulo); font-size: var(--fz-numero); font-weight: 800; }

/* --- Accesibilidad ------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 10px; left: 10px;
	z-index: 10000;
	padding: 10px 20px;
	background: var(--c-blanco);
	color: var(--c-negro);
	clip: auto;
	clip-path: none;
	width: auto; height: auto;
}

/* --- Popups ---------------------------------------------------------------- */
/* Los pinta footer.php en todas las pantallas, de ahi que vivan en base. */
body.popup-abierto { overflow: hidden; }

.popup {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-header) + 20);
	display: flex;
	/* flex-start + margin auto: centra la tarjeta pero deja llegar a su parte
	   de arriba cuando no cabe y hay que desplazarse. */
	align-items: flex-start;
	justify-content: center;
	padding: 20px;
	/* Solo se desplaza en vertical: el aro que asoma por la esquina no debe
	   sacar una barra horizontal, se recorta y ya. */
	overflow: hidden auto;
}
.popup[hidden] { display: none; }

.popup__fondo {
	position: absolute;
	inset: 0;
	background-color: rgba(36, 36, 36, .6);
}

.popup__caja {
	position: relative;
	width: min(420px, 100%);
	margin: auto;
	padding: 40px 32px 32px;
	border-radius: 28px;
	background-color: var(--c-blanco);
	text-align: center;
}

/* Aro de puntos que asoma por detras, arriba a la derecha. */
.popup__caja::before {
	content: "";
	position: absolute;
	top: -34px;
	right: -34px;
	z-index: -1;
	width: 150px;
	height: 150px;
	border: 2px dashed var(--c-terracota);
	border-radius: 50%;
}

.popup__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 22px;
	color: var(--c-negro);
	cursor: pointer;
	transition: background-color var(--transicion);
}
.popup__cerrar:hover { background-color: var(--c-borde); }

.popup__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-h3);
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-negro);
}

.popup__texto {
	margin-top: 12px;
	font-size: var(--fz-parrafo-xs);
	line-height: 1.4;
	color: var(--c-negro);
}

/* --- Animacion de la explicacion ------------------------------------------- */
/* Ocho fotogramas apilados; cada uno se enciende durante un octavo del ciclo. */
.popup__anim {
	position: relative;
	width: 100%;
	margin: 18px 0;
	aspect-ratio: 1163 / 1232;
}

.popup__cuadro {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	animation: popup-cuadros 9.6s steps(1, end) infinite;
	animation-delay: calc(var(--cuadro) * 1.2s);
}

@keyframes popup-cuadros {
	0%      { opacity: 1; }
	12.5%   { opacity: 0; }
	100%    { opacity: 0; }
}

/* Quien pida menos movimiento se queda con el primer fotograma. */
@media (prefers-reduced-motion: reduce) {
	.popup__cuadro { animation: none; }
	.popup__cuadro[style*="--cuadro: 0"] { opacity: 1; }
}

.popup__nota {
	margin-top: 14px;
	font-size: var(--fz-parrafo-xs);
	line-height: 1.35;
	color: var(--c-texto);
}

@media (max-width: 767px) {
	.popup { padding: 14px; }
	.popup__caja { padding: 34px 20px 24px; }
	.popup__titulo { font-size: var(--fz-h4); }
}

/* --- Migas de pan ---------------------------------------------------------- */
/* Aqui y no en shop.css: las migas salen tambien en el cotizador y en las
   pantallas de mensaje, que no cargan la hoja de la tienda. */
.breadcrumb { background-color: var(--bg-gris); }

.breadcrumb__wrapper {
	padding-block: 20px;
	font-size: var(--fz-parrafo-xs);
	color: var(--c-texto);
}
.breadcrumb a { color: var(--c-texto); }
.breadcrumb a:hover { color: var(--c-terracota); }
.breadcrumb__sep { margin-inline: 8px; opacity: .6; }

/* --- Tarjeta de producto (tienda, portada, relacionados y favoritos) ------ */
/* Dos pisos: arriba la foto sobre el fondo de color; abajo el panel blanco
   con el texto, el precio y el "Ver mas". El panel se empuja al fondo para
   que, en una fila de tarjetas de distinta altura, todos los titulos
   arranquen a la misma. */
.card-producto {
	/* Dentro de una fila de categoria la tarjeta toma su color; suelta (tienda,
	   favoritos, relacionados) se queda con el verde. */
	--card-acento: var(--tema-acento, var(--c-terracota));
	--card-fondo:  var(--tema-fondo,  var(--bg-verde));
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--c-borde-card);
	border-radius: var(--radio-card);
	background-color: var(--card-fondo);
	overflow: hidden;
	transition: transform var(--transicion);
}
.card-producto:hover {
	transform: translateY(-3px);
}

/* El enlace del titulo se estira sobre toda la tarjeta: un solo enlace real,
   toda la superficie clicable y el corazon sigue siendo pulsable aparte. */
.card-producto__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.card-producto:hover .card-producto__enlace { color: var(--card-acento); }

.card-producto__media {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
}

.card-producto__foto {
	display: block;
}
.card-producto__foto img {
	/* Sin recorte: la foto se ve entera, con su proporcion. */
	width: 100%;
	height: auto;
	display: block;
}

/* Etiqueta y corazon comparten fila en la esquina superior derecha. */
.card-producto__superior {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
}

.card-producto__termino {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Mismo reparto que la etiqueta de oferta: 2px mas arriba que abajo. */
	padding: 9px 12px 5px;
	border-radius: 999px;
	background-color: var(--c-blanco);
	font-family: var(--f-texto);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-negro);
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* Dentro de la fila, el corazon deja de posicionarse solo. */
.card-producto__superior .favorito {
	position: static;
	width: 32px;
	height: 32px;
}

/* Panel blanco del texto. */
.card-producto__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	/* Separacion minima entre piezas; el pie la respeta aunque el resumen
	   llene sus tres lineas y no quede hueco sobrante que repartir. */
	gap: 14px;
	padding: 18px;
	background-color: var(--c-blanco);
}

.card-producto__titulo {
	/* Dos lineas como mucho: los nombres largos no descuadran la fila. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--f-titulo);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.15em;
	color: var(--c-negro);
}
.card-producto__titulo a:hover { color: var(--card-acento); }

.card-producto__resumen {
	/* Maximo tres lineas; lo que sobra se corta con puntos suspensivos. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Pegado al titulo: recorta el gap de 14px del panel. */
	margin-top: -8px;
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 400;
	line-height: 1.35;
	color: var(--c-texto);
}

/* Precio a la izquierda y "Ver mas" a la derecha, al pie del panel. */
.card-producto__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 12px;
	/* Al fondo del panel: las tarjetas sin parrafo no dejan el precio a media altura. */
	margin-top: auto;
	/* La linea va pegada al pie, asi que baja con el. */
	padding-top: 14px;
	border-top: 1px solid var(--c-borde-card);
}

/* Todo en una linea: el rango de los productos variables (dos importes y el
   guion) y tambien el par tachado + rebajado de las ofertas. */
.card-producto__precio {
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
	font-family: var(--f-texto);
	font-size: var(--fz-texto);
	font-weight: 700;
	color: var(--c-negro);
}
.card-producto__precio .price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.card-producto__precio del {
	font-weight: 400;
	color: var(--c-texto);
}
.card-producto__precio ins { text-decoration: none; }

/* No es un boton de verdad: la tarjeta entera ya es el enlace. */
.card-producto__ver {
	flex: 0 0 auto;
	/* 2px mas arriba que abajo, como el resto de pastillas: la Varta deja
	   hueco de sobra bajo la linea base. */
	padding: 10px 18px 6px;
	border-radius: 999px;
	background-color: var(--card-fondo);
	font-family: var(--f-texto);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--card-acento);
	transition: background-color var(--transicion), color var(--transicion);
}
.card-producto:hover .card-producto__ver {
	background-color: var(--card-acento);
	color: var(--c-blanco);
}

@media (max-width: 767px) {
	.card-producto__titulo { font-size: 21px; }
	.card-producto__cuerpo { gap: 12px; padding: 14px; }
	.card-producto__pie { padding-top: 12px; }
	.card-producto__resumen { margin-top: -6px; }
}

/* --- Botón de favorito ----------------------------------------------------- */
.favorito {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--c-blanco);
	color: var(--c-texto);
	transition: color var(--transicion), transform var(--transicion);
}
.favorito:hover { transform: scale(1.1); color: var(--c-terracota); }
.favorito[disabled] { opacity: .6; cursor: wait; }

/* Sin guardar: solo el contorno. */
.favorito__icono {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill var(--transicion);
}

/* Guardado: corazon solido en el color de marca. */
.favorito.is-activo { color: var(--c-terracota); }
.favorito.is-activo .favorito__icono { fill: currentColor; }

/* Dentro de una tarjeta sigue el color de esta. */
.card-producto .favorito:hover,
.card-producto .favorito.is-activo { color: var(--card-acento); }