/* =========================================================================
   DON RICO — HOJA DE ESTILOS DEL TEMA
   Todo el CSS del sitio vive en este archivo. Los valores de color,
   tipografía y espaciado provienen de theme.json (variables --wp--preset--*)
   para mantener una sola fuente de verdad entre el editor y el front-end.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BASE Y AJUSTES GENERALES
   ------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	height: auto;
	display: block;
}

/* Ancla los saltos de sección justo debajo del header fijo. */
.site-header + * [id],
main [id] {
	scroll-margin-top: 96px;
}

/* -------------------------------------------------------------------------
   2. ENCABEZADO / NAVEGACIÓN
   ------------------------------------------------------------------------- */

.site-header {
	z-index: 100;
}

.site-header__logo img {
	object-fit: contain;
	transition: transform 0.25s ease, filter 0.25s ease;
}

.site-header__logo:hover img,
.site-header__logo a:focus-visible img {
	transform: translateY(-2px) scale(1.06);
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
}

/* Enlaces del menú: rectángulo amarillo con texto negro y ligero zoom al
   pasar el cursor (mismo lenguaje visual que los botones y el logo). */
.site-header .wp-block-navigation-item__content {
	font-weight: 500;
	padding: 0.6rem 1rem !important;
	border-radius: 8px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
	transform: scale(1.06);
}

/* Menú desplegable (tablet y móvil): mismo tratamiento dentro del panel.
   Se repiten aquí sin el ancestro ".site-header" por si el navegador monta
   el panel abierto como un diálogo aparte en el DOM. */
.site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	padding: 0.9rem 1.25rem !important;
}

/* El icono de "tres rayas" hereda el color de texto (blanco) del bloque. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--surface);
}

/*
 * El bloque Navegación solo activa su propio menú desplegable por debajo de
 * ~600px. Ampliamos ese punto de quiebre para que también se despliegue en
 * tablets (hasta 782px), tal como se pidió. Si una futura versión de
 * WordPress cambia los nombres de estas clases internas, este bloque es el
 * primer lugar a revisar.
 */
@media (min-width: 600px) and (max-width: 782px) {
	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Estado explícito de "abierto", para que nunca queden ambos visibles a la vez. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}

/* Fuera del rango anterior (pantallas ≥783px) siempre se oculta el botón de
   hamburguesa: el propio bloque de WordPress ya muestra el menú en línea. */
@media (min-width: 783px) {
	.site-header .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   3. BOTONES
   ------------------------------------------------------------------------- */

.wp-block-button__link {
	white-space: nowrap;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease,
		opacity 0.25s ease;
}

/* Todos los botones "rellenos" (menos los de WhatsApp, que conservan su
   verde de marca) cambian a amarillo con texto negro al pasar el cursor —
   mismo lenguaje visual que el menú principal. */
.wp-block-button.is-style-fill:not(.donrico-btn-whatsapp) .wp-block-button__link:hover,
.wp-block-button.is-style-fill:not(.donrico-btn-whatsapp) .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast) !important;
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 10px 24px rgba(43, 36, 32, 0.18);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
	transform: translateY(-2px) scale(1.03);
}

.donrico-btn-whatsapp .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 0.5em;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.6c0 2.4.6 4.6 1.8 6.6L3 29l7-1.8c1.9 1 4 1.6 6 1.6 7 0 12.7-5.6 12.7-12.6C28.7 8.6 23 3 16 3zm0 23c-1.9 0-3.7-.5-5.3-1.4l-.4-.2-4.2 1.1 1.1-4-.3-.4c-1-1.6-1.6-3.5-1.6-5.5C5.3 9.8 10.1 5 16 5s10.7 4.8 10.7 10.6C26.7 21.4 21.9 26 16 26zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2s-.8 1-1 1.2c-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-2-1.8-2.3-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.3.2-1.5-.1-.1-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.6 3.3 15.6c0 2.4.6 4.6 1.8 6.6L3 29l7-1.8c1.9 1 4 1.6 6 1.6 7 0 12.7-5.6 12.7-12.6C28.7 8.6 23 3 16 3zm0 23c-1.9 0-3.7-.5-5.3-1.4l-.4-.2-4.2 1.1 1.1-4-.3-.4c-1-1.6-1.6-3.5-1.6-5.5C5.3 9.8 10.1 5 16 5s10.7 4.8 10.7 10.6C26.7 21.4 21.9 26 16 26zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2s-.8 1-1 1.2c-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.6-1.6-1-.9-1.6-2-1.8-2.3-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.3.2-1.5-.1-.1-.3-.2-.6-.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.donrico-btn-large .wp-block-button__link {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

/* Todos los botones de WhatsApp (encabezado, hero, CTA final) son siempre
   verdes con texto/ícono blanco — su hover se queda en verde (más oscuro),
   nunca amarillo, para conservar el reconocimiento de marca de WhatsApp. */
.donrico-btn-whatsapp .wp-block-button__link {
	background-color: #25d366 !important;
	color: var(--wp--preset--color--surface) !important;
}

.donrico-btn-whatsapp .wp-block-button__link:hover,
.donrico-btn-whatsapp .wp-block-button__link:focus-visible {
	background-color: #1fb959 !important;
	color: var(--wp--preset--color--surface) !important;
}

/* Botón de WhatsApp circular, solo ícono (permanente en el encabezado). */
.donrico-btn-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border-radius: 50%;
}

.donrico-btn-icon .wp-block-button__link::before {
	width: 22px;
	height: 22px;
	margin-right: 0;
	background-color: var(--wp--preset--color--surface);
}

/* En tablet y celular, los botones "Agendar por WhatsApp" con texto
   (Hero, CTA final) se reducen al mismo formato circular solo-ícono que ya
   usa el del encabezado, y el texto se oculta (sigue en el HTML, solo no
   se muestra) para no romper el diseño. */
@media (max-width: 782px) {
	.donrico-btn-whatsapp:not(.donrico-btn-icon) .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		border-radius: 50%;
	}

	.donrico-btn-whatsapp:not(.donrico-btn-icon) .donrico-btn-label {
		display: none;
	}

	.donrico-btn-whatsapp:not(.donrico-btn-icon) .wp-block-button__link::before {
		width: 22px;
		height: 22px;
		margin-right: 0;
	}
}

/* -------------------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------------------- */

/* Contenido centrado (hasta 1280px) y centrado verticalmente sobre la foto. */
.donrico-hero-cover .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	display: flex;
	align-items: center;
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

.donrico-hero-cover .wp-block-cover__inner-container > * {
	width: 100%;
}

/* Tarjeta de texto: fondo blanco semitransparente para separarla de la foto. */
.donrico-hero-card {
	background-color: rgba(255, 255, 255, 0.5);
}

/* Foto del collage de productos: sombra propia para distinguirla del fondo.
   Va en la columna (no en el .donrico-zoom-frame) porque ese elemento usa
   overflow:hidden para recortar el zoom, lo que también recortaría su
   propia sombra si la lleváramos ahí. */
.donrico-hero-collage figure {
	border-radius: 5px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

/* La imagen de fondo hace un ligero zoom cuando el visitante empieza a
   desplazarse hacia abajo (clase "is-zoomed" añadida por animations.js). */
.donrico-hero-cover .wp-block-cover__image-background {
	transition: transform 0.6s ease;
	transform: scale(1);
}

.donrico-hero-cover.is-zoomed .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* -------------------------------------------------------------------------
   5. TARJETAS DE ESTADÍSTICA (SECCIÓN HISTORIA)
   ------------------------------------------------------------------------- */

.wp-block-group.has-surface-alt-background-color {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* -------------------------------------------------------------------------
   6. TARJETAS DE PRODUCTO
   ------------------------------------------------------------------------- */

.donrico-product-card {
	height: 100%;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.donrico-product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(43, 36, 32, 0.14);
}

.donrico-product-card__image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.donrico-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Acordeón nativo (bloque Detalles) para "ver presentaciones y sabores". */
.wp-block-details {
	margin-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 0.9rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: color 0.25s ease;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-size: 1.3em;
	line-height: 1;
	margin-left: 0.75rem;
	transition: transform 0.25s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-details > :not(summary) {
	animation: donricoFadeIn 0.35s ease both;
}

/* -------------------------------------------------------------------------
   7. PANEL COMPARTIDO DE DETALLE DE PRODUCTOS
   ------------------------------------------------------------------------- */

/* Botón "Ver más": más compacto que los botones grandes del sitio. */
.donrico-btn-vermas .wp-block-button__link {
	padding: 0.55rem 1.25rem;
}

/*
 * El panel completo se mantiene siempre en el flujo del documento (nunca
 * "display:none") para poder animarlo con una transición fluida al abrirlo:
 * usa el truco de CSS Grid "0fr → 1fr", que permite animar hacia una altura
 * automática sin necesidad de JavaScript midiendo píxeles.
 */
.donrico-product-detail {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.5s ease, opacity 0.4s ease;
}

.donrico-product-detail__inner {
	overflow: hidden;
	min-height: 0;
}

.donrico-product-detail.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.donrico-product-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.donrico-product-tab {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-bottom: none;
	cursor: pointer;
	padding: 1rem 1.75rem;
	border-radius: 12px 12px 0 0;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.donrico-product-tab:hover,
.donrico-product-tab:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.donrico-product-tab.is-active {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--surface);
}

.donrico-product-panels {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.donrico-product-detail__close {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--contrast);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.donrico-product-detail__close:hover,
.donrico-product-detail__close:focus-visible {
	background-color: var(--wp--preset--color--accent);
	transform: scale(1.08);
}

.donrico-product-panel {
	display: none;
	animation: donricoFadeIn 0.4s ease both;
}

.donrico-product-panel.is-active {
	display: block;
}

.donrico-product-panel__title {
	color: var(--wp--preset--color--secondary);
}

/* Algunas líneas (Extra Fina, Empacados) muestran varios productos: cada
   uno en su propia fila, con foto, título, sabores y presentaciones. */
.donrico-product-row {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.donrico-product-row:first-child {
	padding-top: 0;
	border-top: none;
	margin-top: 0 !important;
}

/* Empacados tiene 10 productos: se limita la altura del panel para que no
   estire demasiado la página, con scroll interno si hace falta. */
.donrico-product-panel__body {
	max-height: 70vh;
	overflow-y: auto;
	padding-right: var(--wp--preset--spacing--10);
}

/* -------------------------------------------------------------------------
   8. BENEFICIOS
   ------------------------------------------------------------------------- */

.donrico-benefit-icon img {
	border-radius: 50%;
	padding: 14px;
	transition: transform 0.3s ease;
}

.wp-block-column:hover .donrico-benefit-icon img {
	transform: scale(1.08) rotate(-4deg);
}

/* -------------------------------------------------------------------------
   9. PIE DE PÁGINA
   ------------------------------------------------------------------------- */

.footer-logo img {
	border-radius: 10px;
}

.wp-block-social-links .wp-social-link {
	transition: transform 0.25s ease;
}

.wp-block-social-links .wp-social-link:hover {
	transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
   10. IMÁGENES CON ZOOM AL PASAR EL CURSOR
   ------------------------------------------------------------------------- */

.donrico-zoom-frame {
	overflow: hidden;
	border-radius: inherit;
}

.donrico-zoom-frame img {
	transition: transform 0.6s ease;
	will-change: transform;
}

.donrico-zoom-frame:hover img {
	transform: scale(1.06);
}

/* Efecto de acercamiento lento y continuo en la imagen del hero. */
.donrico-hero-image {
	overflow: hidden;
}

.donrico-hero-image img {
	animation: donricoKenburns 16s ease-in-out infinite alternate;
}

/* -------------------------------------------------------------------------
   11. ANIMACIONES DE ENTRADA AL HACER SCROLL (FADE IN / FADE IN UP)
   ------------------------------------------------------------------------- */

/*
 * Progressive enhancement: por defecto (sin JS, o si algo falla) todo el
 * contenido es visible. assets/js/animations.js añade la clase
 * "donrico-js" al <body> y observa estos elementos con IntersectionObserver;
 * solo entonces se ocultan hasta que entran en el viewport y reciben
 * "is-visible", momento en el que corre la animación.
 */

.donrico-fade-in,
.donrico-fade-in-up {
	opacity: 1;
}

body.donrico-js .donrico-fade-in,
body.donrico-js .donrico-fade-in-up {
	opacity: 0;
}

body.donrico-js .donrico-fade-in.is-visible,
body.donrico-js .donrico-fade-in-up.is-visible {
	animation-duration: 0.8s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

body.donrico-js .donrico-fade-in.is-visible {
	animation-name: donricoFadeIn;
}

body.donrico-js .donrico-fade-in-up.is-visible {
	animation-name: donricoFadeInUp;
}

.donrico-fade-in-delay-1.is-visible {
	animation-delay: 0.15s;
}

.donrico-fade-in-delay-2.is-visible {
	animation-delay: 0.3s;
}

/* Efecto escalonado automático para tarjetas hermanas dentro de la misma fila. */
.wp-block-columns > .donrico-fade-in-up.is-visible:nth-child(1) {
	animation-delay: 0s;
}

.wp-block-columns > .donrico-fade-in-up.is-visible:nth-child(2) {
	animation-delay: 0.15s;
}

.wp-block-columns > .donrico-fade-in-up.is-visible:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes donricoFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes donricoFadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes donricoKenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.donrico-fade-in,
	.donrico-fade-in-up,
	.donrico-hero-image img,
	.donrico-zoom-frame img,
	.wp-block-button__link,
	.donrico-product-card,
	.site-header__logo img,
	.site-header .wp-block-navigation-item__content,
	.donrico-hero-cover .wp-block-cover__image-background,
	.donrico-product-detail,
	.donrico-product-panel,
	.donrico-product-tab,
	.donrico-product-detail__close {
		animation: none !important;
		transition: none !important;
	}

	/* Aunque el JS haya observado el elemento, nunca lo dejamos oculto. */
	body.donrico-js .donrico-fade-in,
	body.donrico-js .donrico-fade-in-up {
		opacity: 1 !important;
	}
}

/* -------------------------------------------------------------------------
   12. ACCESIBILIDAD
   ------------------------------------------------------------------------- */

/* Texto solo para lectores de pantalla (ej. nombre accesible del botón
   circular de WhatsApp, que no muestra texto visible). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.site-header .wp-block-group {
		row-gap: var(--wp--preset--spacing--10);
	}

	.donrico-btn-large .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.wp-block-columns {
		gap: var(--wp--preset--spacing--30) !important;
	}

	.donrico-product-card__image {
		aspect-ratio: 16 / 10;
	}

	/* Pestañas del panel de productos: se deslizan horizontalmente en vez
	   de amontonarse cuando no caben todas en una fila. */
	.donrico-product-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.donrico-product-tab {
		flex: none;
		padding: 0.85rem 1.25rem;
		font-size: var(--wp--preset--font-size--small);
	}

	.donrico-product-panels {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}
}