/**
 * greencrops — estilos propios (no utilidades de Tailwind)
 *
 * Aquí van: @keyframes, overrides puntuales, fixes de terceros.
 * Las utilidades del día a día se resuelven con clases Tailwind
 * directamente en el HTML/PHP.
 */

/* Scroll reveal (activado por IntersectionObserver en assets/js/app.js) */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Tarjetas del equipo: foto en B/N hasta hacer hover */
.team-card img {
	filter: grayscale(20%);
	transition: filter 0.4s ease, transform 0.4s ease;
}
.team-card:hover img {
	filter: grayscale(0%);
	transform: scale(1.03);
}

/* Logos de certificaciones: ligera elevación al pasar el ratón */
.cert-logo {
	transition: transform 0.25s ease;
}
.cert-logo:hover {
	transform: scale(1.08);
}

/* CTA flotante (controlado por scroll en assets/js/app.js) */
#cta-float {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
#cta-float.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/*HERO: Palabra en amarillo */
.text-partner-glow {
	display: inline-block;
	animation: partner-color-shift 3s ease-in-out infinite;
}

@keyframes partner-color-shift {
	0%, 100% { color: #fff; }
	50% { color: #C9A227; } /* ajusta al hex exacto de tu --gold */
}

/*EQUIPO: CARROUSEL*/
.team-carousel {
	position: relative;
	aspect-ratio: 4 / 3;
	max-width: auto;
	margin: 0 auto;
}

.team-carousel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: team-carousel-fade 28s infinite;
}

.team-carousel img:nth-child(1) { animation-delay: 0s; }
.team-carousel img:nth-child(2) { animation-delay: 4s; }
.team-carousel img:nth-child(3) { animation-delay: 8s; }
.team-carousel img:nth-child(4) { animation-delay: 12s; }
.team-carousel img:nth-child(5) { animation-delay: 16s; }
.team-carousel img:nth-child(6) { animation-delay: 20s; }
.team-carousel img:nth-child(7) { animation-delay: 24s; }

@keyframes team-carousel-fade {
	0%, 100% { opacity: 0; }
	5%, 10%  { opacity: 1; }
	15%      { opacity: 0; }
}

/* FORMULARIO PROVEEDORES */
.wpcf7-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	width: 100%;
}

@media (min-width: 640px) {
	.wpcf7-form {
		grid-template-columns: 1fr 1fr;
	}
}

.wpcf7-form label,
.wpcf7-form .cf7-col,
.wpcf7-form .cf7-full {
	min-width: 0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-size: 0.95rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: #1a1a1a;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.75rem;
	background: #fff;
	transition: border-color 0.3s ease;
}

.cf7-province-wrap {
	display: none;
}

.cf7-province-wrap.is-visible {
	display: flex;
}

.cf7-acceptance-row {
	margin-top: 0.5rem;
}

.cf7-full + .cf7-full {
	margin-top: 1rem;
}

.wpcf7-form input[type="submit"].btn {
	position: static;
	margin: 0;
	transform: none;
}

/* Formulario de contacto */
.cf7-cv-wrap {
	display: none;
}
.cf7-cv-wrap.is-visible {
	display: block;
}

.cf7-full {
	grid-column: 1 / -1;
}

.cf7-subject-wrap.is-full {
	grid-column: 1 / -1;
}

.wpcf7-form .cf7-col {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wpcf7-form label,
.wpcf7-form .cf7-col > label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.5);
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: #32563c;
}

.wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: rgba(0, 0, 0, 0.6);
}

.wpcf7-form .wpcf7-acceptance a {
	color: #32563c;
	text-decoration: underline;
}

.wpcf7-not-valid-tip {
	font-size: 0.75rem;
	color: #c0392b;
	font-weight: 400;
	text-transform: none;
	margin-top: 0.25rem;
}

.wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.85rem;
}

/*CARD PRODUCTOS IMAGENES*/
.photo-stack {
	position: relative;
	aspect-ratio: 2 / 3;
	min-height: 460px;
}

.photo-stack img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1.5rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
	border: 6px solid #fff;
	transform-origin: center center;
	animation-duration: 9s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.photo-stack img:nth-child(1) {
	animation-name: photo-stack-a;
	animation-delay: 0s;
}
.photo-stack img:nth-child(2) {
	animation-name: photo-stack-b;
	animation-delay: 3s;
}
.photo-stack img:nth-child(3) {
	animation-name: photo-stack-c;
	animation-delay: 6s;
}

@keyframes photo-stack-a {
	0%, 30% { transform: rotate(0deg) translate(0, 0) scale(1); z-index: 3; }
	40%, 100% { transform: rotate(-9deg) translate(-30px, 16px) scale(0.9); z-index: 1; }
}
@keyframes photo-stack-b {
	0%, 30% { transform: rotate(0deg) translate(0, 0) scale(1); z-index: 3; }
	40%, 100% { transform: rotate(7deg) translate(24px, 24px) scale(0.92); z-index: 1; }
}
@keyframes photo-stack-c {
	0%, 30% { transform: rotate(0deg) translate(0, 0) scale(1); z-index: 3; }
	40%, 100% { transform: rotate(-3deg) translate(-10px, 34px) scale(0.88); z-index: 0; }
}

/* 404*/

.search-404 .search-form {
	display: flex;
	max-width: 28rem;
	margin: 0 auto;
	border-radius: 9999px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.search-404 .search-field {
	flex: 1;
	border: none;
	padding: 0.85rem 1.25rem;
	font-size: 0.95rem;
	color: #111111;
	outline: none;
}

.search-404 .search-submit {
	background: #f5d93f;
	color: #1a1a1a;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0 1.5rem;
	border: none;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.search-404 .search-submit:hover {
	opacity: 0.85;
}

/* ------------------------------------------------------------------
 * Tipografía fluida (titulares H1 de hero y cifras destacadas)
 *
 * Sustituye a los `style="font-size: clamp(...)"` que se repetían
 * inline en cada página. El color de los H1 de hero ya lo aporta la
 * clase `text-white` de Tailwind (era redundante fijarlo también por
 * inline style), así que aquí solo se define el tamaño.
 * ------------------------------------------------------------------ */

/* H1 de hero: variantes según la longitud del titular de cada página. */
.h1-fluid-xl        { font-size: clamp(2.5rem, 6vw, 6rem); }    /* frontpage, equipo, catalogo */
.h1-fluid-xl-tight  { font-size: clamp(2.25rem, 6vw, 6rem); }   /* proveedores */
.h1-fluid-lg        { font-size: clamp(2.5rem, 6vw, 5.5rem); }  /* aceites, productos, proteinas */
.h1-fluid-lg-tight  { font-size: clamp(2.25rem, 6vw, 5.5rem); } /* alimentario, cosmetica, farmaceutica, sectores */
.h1-fluid-md        { font-size: clamp(2.25rem, 6vw, 5rem); }   /* contacto */
.h1-fluid-sm        { font-size: clamp(2.5rem, 6vw, 4.5rem); }  /* prensados-en-frio, refinados */
.h1-fluid-sm-tight  { font-size: clamp(2.25rem, 6vw, 4.5rem); } /* feed, food */
.h1-fluid-compact   { font-size: clamp(2rem, 4vw, 3rem); }      /* legal */

/* Cifras destacadas (contadores / estadísticas). */
.stat-fluid-lg { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }     /* frontpage: stats principales */
.stat-fluid-md { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; }   /* equipo: fundación / socios / años */
.stat-fluid-sm { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; } /* equipo: m² / Tm / capacidad */