/* ==========================================================================
   PICHURROS — hoja de estilos única del tema
   Orden: 1 variables · 2 base · 3 contenedores · 4 botones · 5 cabecera
   6 hero · 7 barra de confianza · 8 tarjetas · 9 pasos · 10 comparación
   11 galería · 12 servicios · 13 cifras · 14 testimonios · 15 FAQ
   16 formulario · 17 CTA · 18 pie de página · 19 WhatsApp flotante
   20 responsive · 21 accesibilidad
   ========================================================================== */

/* 1. VARIABLES ============================================================ */
:root {
	--pich-menta: #00c9a7;
	--pich-menta-oscuro: #0e9c85;
	--pich-coral: #ff6b35;
	--pich-coral-oscuro: #e8571f;
	--pich-amarillo: #ffd60a;
	--pich-purpura: #d946ef;
	--pich-purpura-oscuro: #b12fc9;
	--pich-marron: #3e2817;
	--pich-crema: #fffbf4;
	--pich-crema-2: #f7f1e6;
	--pich-texto: #5a4636;
	--pich-texto-claro: #8a7461;
	--pich-radio: 26px;
	--pich-sombra: 0 14px 34px rgba(62, 40, 23, 0.09);
	--pich-sombra-suave: 0 10px 26px rgba(62, 40, 23, 0.07);
}

/* 2. BASE ================================================================= */
body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

.pich-titulo-seccion {
	font-size: clamp(1.8rem, 3vw, 2.35rem);
	margin-bottom: 0.4em;
}

.pich-etiqueta {
	color: var(--pich-purpura-oscuro);
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 600;
	font-size: 0.84rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 0.5em;
}

.pich-lead {
	font-size: 1.15rem;
	color: var(--pich-texto);
}

.pich-nota {
	font-size: 0.96rem;
	color: var(--pich-texto-claro);
}

.pich-destacado {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 500;
	font-size: 1.1rem;
	text-align: center;
}

.pich-centrado {
	text-align: center;
}

/* 3. CONTENEDORES Y SECCIONES ============================================ */
.pich-sec {
	padding-top: 88px;
	padding-bottom: 88px;
}

.pich-sec--corta {
	padding-top: 60px;
	padding-bottom: 56px;
}

.pich-sec--crema {
	background-color: var(--pich-crema-2);
}

.pich-sec--marron {
	background-color: var(--pich-marron);
	color: var(--pich-crema);
}

.pich-sec--marron :is(h1, h2, h3, p) {
	color: var(--pich-crema);
}

.pich-sec--menta {
	background: linear-gradient(135deg, var(--pich-menta), var(--pich-menta-oscuro));
	color: #fff;
}

.pich-sec--menta :is(h1, h2, h3, p) {
	color: #fff;
}

.pich-cabecera-bloque {
	max-width: 680px;
	margin-inline: auto;
	margin-bottom: 52px;
	text-align: center;
}

/* 4. BOTONES ============================================================== */
.wp-block-button__link {
	box-shadow: 0 6px 0 var(--pich-coral-oscuro);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 0 var(--pich-coral-oscuro);
}

.pich-btn--menta .wp-block-button__link {
	background-color: var(--pich-menta);
	color: #fff;
	box-shadow: 0 6px 0 var(--pich-menta-oscuro);
}

.pich-btn--menta .wp-block-button__link:hover {
	background-color: var(--pich-menta-oscuro);
	box-shadow: 0 8px 0 var(--pich-menta-oscuro);
}

.pich-btn--blanco .wp-block-button__link {
	background-color: #fff;
	color: var(--pich-marron);
	box-shadow: 0 6px 0 rgba(62, 40, 23, 0.18);
}

.pich-btn--borde .wp-block-button__link {
	background-color: transparent;
	color: var(--pich-marron);
	border: 2.5px solid var(--pich-menta);
	box-shadow: none;
}

.pich-btn--borde .wp-block-button__link:hover {
	background-color: var(--pich-menta);
	color: #fff;
	box-shadow: none;
}

/* 5. CABECERA Y NAVEGACIÓN =============================================== */
.pich-cabecera {
	position: sticky;
	top: 0;
	z-index: 60;
	background-color: rgba(255, 251, 244, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 2px solid rgba(0, 201, 167, 0.18);
	padding-top: 12px;
	padding-bottom: 12px;
}

.pich-cabecera .wp-block-image img,
.pich-cabecera .wp-block-site-logo img {
	height: 52px;
	width: auto;
}

.pich-nav a {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--pich-marron);
}

.pich-nav a:hover {
	color: var(--pich-menta-oscuro);
	text-decoration: none;
}

.pich-nav .current-menu-item a {
	border-bottom: 2px solid var(--pich-menta);
}

/* 6. HERO ================================================================= */
.pich-hero {
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 214, 10, 0.2), transparent 42%),
		radial-gradient(circle at 88% 76%, rgba(217, 70, 239, 0.14), transparent 44%),
		var(--pich-crema);
	padding-top: 64px;
	padding-bottom: 84px;
}

.pich-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-bottom: 0.35em;
}

.pich-hero .pich-lead {
	font-size: 1.2rem;
	max-width: 470px;
}

.pich-eyebrow {
	display: inline-block;
	background-color: var(--pich-amarillo);
	color: var(--pich-marron);
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 16px;
	border-radius: 30px;
}

.pich-subrayado {
	background: linear-gradient(transparent 62%, rgba(255, 214, 10, 0.75) 62%);
}

.pich-hero-img {
	background-color: #fff;
	border-radius: 30px;
	padding: 18px;
	box-shadow: 0 26px 54px rgba(62, 40, 23, 0.16);
	transform: rotate(-2deg);
}

.pich-hero-img img {
	border-radius: 20px;
	display: block;
	width: 100%;
	height: auto;
}

/* 7. BARRA DE CONFIANZA ================================================== */
.pich-confianza {
	background-color: var(--pich-menta);
	padding-top: 18px;
	padding-bottom: 18px;
}

.pich-confianza p {
	color: #fff;
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 500;
	font-size: 1rem;
	margin: 0;
}

/* 8. TARJETAS ============================================================ */
.pich-tarjeta {
	background-color: #fff;
	border-radius: var(--pich-radio);
	padding: 28px;
	box-shadow: var(--pich-sombra);
	border: 2px solid rgba(0, 201, 167, 0.14);
	height: 100%;
}

.pich-tarjeta h3 {
	font-size: 1.25rem;
	margin-bottom: 0.4em;
}

.pich-tarjeta p {
	color: var(--pich-texto);
	margin: 0;
}

.pich-tarjeta--foto {
	padding: 0;
	overflow: hidden;
}

.pich-tarjeta--foto .wp-block-image {
	margin: 0;
}

.pich-tarjeta--foto .wp-block-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.pich-tarjeta--foto .pich-tarjeta-texto {
	padding: 24px 24px 28px;
}

.pich-tarjeta--menta {
	border-top: 8px solid var(--pich-menta);
}

.pich-tarjeta--purpura {
	border-top: 8px solid var(--pich-purpura);
}

.pich-tarjeta--amarilla {
	background-color: var(--pich-amarillo);
	border: none;
}

.pich-tarjeta--valor {
	border: none;
	border-left: 8px solid var(--pich-menta);
	box-shadow: var(--pich-sombra-suave);
}

.pich-tarjeta--valor.pich-borde-amarillo {
	border-left-color: var(--pich-amarillo);
}

.pich-tarjeta--valor.pich-borde-purpura {
	border-left-color: var(--pich-purpura);
}

/* 9. PASOS =============================================================== */
.pich-paso {
	background-color: #fff;
	border-radius: 24px;
	padding: 30px 24px;
	text-align: center;
	box-shadow: var(--pich-sombra-suave);
	height: 100%;
}

.pich-paso .pich-numero {
	width: 56px;
	height: 56px;
	line-height: 56px;
	border-radius: 50%;
	margin: 0 auto 18px;
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff;
	background-color: var(--pich-menta);
}

.pich-paso:nth-child(2n) .pich-numero {
	background-color: var(--pich-purpura);
}

.pich-paso:nth-child(3n) .pich-numero {
	background-color: var(--pich-coral);
}

.pich-paso h3 {
	font-size: 1.15rem;
	margin-bottom: 0.4em;
}

.pich-paso p {
	color: var(--pich-texto);
	margin: 0;
	font-size: 0.98rem;
}

.pich-paso-fila {
	background-color: #fff;
	border-radius: 24px;
	padding: 26px 28px;
	box-shadow: var(--pich-sombra-suave);
}

.pich-paso-fila h3 {
	font-size: 1.25rem;
	margin-bottom: 0.4em;
}

.pich-paso-fila p {
	color: var(--pich-texto);
	margin: 0;
}

/* 10. COMPARACIÓN AZÚCAR / ARROZ ========================================= */
.pich-comparacion .wp-block-column {
	background-color: #fff;
	border-radius: var(--pich-radio);
	padding: 32px;
	box-shadow: var(--pich-sombra);
}

.pich-comparacion .wp-block-column:first-child {
	border-top: 8px solid var(--pich-menta);
}

.pich-comparacion .wp-block-column:last-child {
	border-top: 8px solid var(--pich-purpura);
}

.pich-comparacion h3 {
	font-size: 1.4rem;
	margin-bottom: 0.3em;
}

.pich-lista li {
	color: var(--pich-texto);
	margin-bottom: 8px;
}

/* 11. GALERÍA ============================================================ */
.pich-galeria img {
	border-radius: 20px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* 12. SERVICIOS ========================================================== */
.pich-servicio {
	background-color: #fff;
	border-radius: 24px;
	padding: 28px;
	box-shadow: var(--pich-sombra-suave);
	border: 2px solid rgba(217, 70, 239, 0.1);
	height: 100%;
}

.pich-servicio .pich-icono {
	width: 52px;
	height: 52px;
	line-height: 52px;
	text-align: center;
	border-radius: 16px;
	font-size: 1.5rem;
	background-color: rgba(0, 201, 167, 0.14);
	margin-bottom: 12px;
}

.pich-servicio:nth-child(2n) .pich-icono {
	background-color: rgba(255, 214, 10, 0.28);
}

.pich-servicio:nth-child(3n) .pich-icono {
	background-color: rgba(217, 70, 239, 0.14);
}

.pich-servicio h3 {
	font-size: 1.2rem;
	margin-bottom: 0.35em;
}

.pich-servicio p {
	color: var(--pich-texto);
	font-size: 0.98rem;
}

.pich-servicio a {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
}

/* 13. CIFRAS ============================================================= */
.pich-cifras {
	background-color: #fff;
	border-radius: var(--pich-radio);
	padding: 34px 24px;
	box-shadow: var(--pich-sombra);
}

.pich-cifras--marron {
	background-color: var(--pich-marron);
}

.pich-cifra {
	text-align: center;
}

.pich-cifra .pich-dato {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1.1;
	color: var(--pich-menta-oscuro);
	margin-bottom: 0.2em;
}

.pich-cifras--marron .pich-dato {
	color: var(--pich-amarillo);
}

.pich-cifra p:last-child {
	color: var(--pich-texto);
	font-size: 0.96rem;
	margin: 0;
}

.pich-cifras--marron .pich-cifra p:last-child {
	color: rgba(255, 251, 244, 0.78);
}

/* 14. TESTIMONIOS ======================================================== */
.pich-testimonio {
	background-color: #fff;
	border-radius: 24px;
	padding: 30px;
	border: 2px dashed rgba(255, 107, 53, 0.35);
	height: 100%;
}

.pich-testimonio .pich-estrellas {
	color: var(--pich-amarillo);
	letter-spacing: 2px;
	margin-bottom: 12px;
}

.pich-testimonio p {
	color: var(--pich-texto);
}

.pich-testimonio cite {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 600;
	font-style: normal;
}

/* 15. FAQ (bloque Detalles) ============================================== */
.pich-faq {
	background-color: #fff;
	border-radius: 20px;
	padding: 22px 26px;
	box-shadow: 0 8px 22px rgba(62, 40, 23, 0.06);
	border: 2px solid rgba(0, 201, 167, 0.14);
	margin-bottom: 14px;
}

.pich-faq summary {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
}

.pich-faq p {
	color: var(--pich-texto);
	margin-top: 12px;
	margin-bottom: 0;
}

/* 16. FORMULARIO (WPForms u otro) ======================================== */
.pich-formulario {
	background-color: #fff;
	border-radius: var(--pich-radio);
	padding: 34px;
	box-shadow: var(--pich-sombra);
}

.pich-formulario input[type="text"],
.pich-formulario input[type="email"],
.pich-formulario input[type="tel"],
.pich-formulario textarea {
	font-family: Nunito, system-ui, sans-serif;
	font-size: 1rem;
	padding: 14px 16px;
	border-radius: 14px;
	border: 2px solid rgba(62, 40, 23, 0.14);
	background-color: var(--pich-crema);
	color: var(--pich-marron);
	width: 100%;
}

.pich-formulario label {
	font-family: Fredoka, "Trebuchet MS", sans-serif;
	font-weight: 500;
}

.pich-contacto-menta {
	background-color: var(--pich-menta);
	border-radius: var(--pich-radio);
	padding: 30px;
}

.pich-contacto-menta :is(h2, h3, p) {
	color: #fff;
}

.pich-contacto-datos {
	background-color: #fff;
	border-radius: var(--pich-radio);
	padding: 30px;
	box-shadow: var(--pich-sombra-suave);
}

.pich-contacto-datos h3 {
	font-size: 1.1rem;
	margin-bottom: 0.25em;
}

.pich-contacto-datos p {
	color: var(--pich-texto);
	margin-bottom: 14px;
}

/* 17. CTA FINAL ========================================================== */
.pich-cta-final h2 {
	font-size: clamp(2rem, 4vw, 2.6rem);
	margin-bottom: 0.3em;
}

.pich-cta-final .wp-block-buttons {
	justify-content: center;
}

/* 18. PIE DE PÁGINA ====================================================== */
.pich-pie {
	background-color: var(--pich-marron);
	color: var(--pich-crema);
	padding-top: 64px;
	padding-bottom: 34px;
}

.pich-pie :is(p, li, a) {
	color: rgba(255, 251, 244, 0.8);
}

.pich-pie h3 {
	color: var(--pich-amarillo);
	font-size: 1.05rem;
	margin-bottom: 14px;
}

.pich-pie a:hover {
	color: var(--pich-amarillo);
	text-decoration: none;
}

.pich-pie .wp-block-page-list {
	list-style: none;
	padding-left: 0;
}

.pich-pie .wp-block-page-list li {
	margin-bottom: 8px;
}

.pich-pie-logo img {
	height: 56px;
	width: auto;
	background-color: var(--pich-crema);
	border-radius: 14px;
	padding: 8px;
}

.pich-sello img {
	height: 64px;
	width: auto;
	background-color: var(--pich-crema);
	border-radius: 50%;
	padding: 4px;
}

.pich-pie-legal {
	border-top: 2px solid rgba(0, 201, 167, 0.35);
	margin-top: 44px;
	padding-top: 22px;
}

.pich-pie-legal p {
	color: rgba(255, 251, 244, 0.55);
	font-size: 0.9rem;
	margin: 0;
}

.pich-redes .wp-block-social-link {
	background-color: rgba(255, 251, 244, 0.12);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.pich-redes .wp-block-social-link:hover {
	background-color: var(--pich-amarillo);
}

.pich-redes .wp-block-social-link:hover svg {
	fill: var(--pich-marron);
}

.pich-pie .wp-block-social-links {
	margin-bottom: 20px;
}

/* 19. WHATSAPP FLOTANTE ================================================== */
.pich-wa-flotante {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	margin: 0;
}

.pich-wa-flotante .wp-block-button__link {
	background-color: #25d366;
	color: #fff;
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.42);
	padding: 15px 24px;
}

.pich-wa-flotante .wp-block-button__link:hover {
	background-color: #1eb855;
	box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}

/* 20. RESPONSIVE ========================================================= */
@media (max-width: 900px) {
	.pich-hero {
		padding-top: 44px;
		padding-bottom: 56px;
	}

	.pich-hero-img {
		transform: none;
	}
}

@media (max-width: 781px) {
	.pich-sec {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.pich-cabecera-bloque {
		margin-bottom: 34px;
	}

	.pich-hero .pich-lead {
		max-width: none;
	}

	.pich-cifras .wp-block-column {
		flex-basis: 50% !important;
	}

	.pich-wa-flotante {
		right: 14px;
		bottom: 14px;
	}

	.pich-wa-flotante .wp-block-button__link {
		font-size: 0.95rem;
		padding: 13px 20px;
	}
}

/* 21. ACCESIBILIDAD ====================================================== */
:where(a, button, summary, input, textarea):focus-visible {
	outline: 3px solid var(--pich-purpura);
	outline-offset: 3px;
}

.skip-link:focus {
	background-color: #fff;
	color: var(--pich-marron);
	padding: 12px 20px;
	z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-block-button__link:hover {
		transform: none;
		transition: none;
	}
}