/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1792116219
Updated: 2026-10-15 23:03:39

*/

/* ==========================================================================
   CER – Cítricos de Entre Ríos · Animaciones y transiciones (home)
   --------------------------------------------------------------------------
   - Hero: secuencia de entrada al cargar (logo → título "escrito" → bajada → botones).
   - Resto de secciones: reveal al hacer scroll con CSS puro (scroll-driven animations).
     En navegadores sin soporte (hoy Firefox) los elementos se ven normal, sin animar.
   - Respeta "reducir movimiento" del sistema operativo.
   - Usa los IDs de sección de Elementor: si cambias un ID, actualiza aquí.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
	--cer-naranja: #EC8208;
	--cer-naranja-oscuro: #E46E0D;
	--cer-verde: #69AA2A;
	--cer-ease-out: cubic-bezier(.2, .8, .2, 1);
	--cer-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Evita el scroll horizontal ("la web baila").
   hidden = fallback para iOS < 16; clip = no rompe position: sticky */
html,
body {
	overflow-x: hidden;
}
@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* ==========================================================================
   1. Transiciones de interacción (siempre activas, son respuestas al usuario)
   ========================================================================== */

/* Botones atómicos + botón del formulario */
.e-button-base,
.elementor-form .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .25s var(--cer-ease-out), box-shadow .25s var(--cer-ease-out), filter .25s ease;
}

.e-button-base:hover,
.elementor-form .elementor-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -10px rgba(236, 130, 8, .65);
	filter: saturate(1.1);
}

.e-button-base:active,
.elementor-form .elementor-button:active {
	transform: translateY(0) scale(.97);
	box-shadow: 0 4px 10px -6px rgba(236, 130, 8, .6);
}

.e-button-base:focus-visible,
.elementor-form .elementor-button:focus-visible {
	outline: 3px solid var(--cer-naranja-oscuro);
	outline-offset: 3px;
}

/* Brillo que cruza el botón al pasar el mouse */
.e-button-base::after,
.elementor-form .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	translate: -120% 0;
	transition: translate .6s var(--cer-ease-out);
	pointer-events: none;
}

.e-button-base:hover::after,
.elementor-form .elementor-button:hover::after {
	translate: 120% 0;
}

/* Acordeón de tips */
#tips summary {
	cursor: pointer;
	transition: transform .25s var(--cer-ease-out), filter .25s ease;
}

#tips summary:hover { transform: translateX(6px); filter: brightness(1.06); }
#tips summary:focus-visible { outline: 3px solid var(--cer-naranja-oscuro); outline-offset: 3px; }

/* Guía: inclinación al pasar el mouse */
/* Usa transform (no rotate/scale) para no chocar con la animación de entrada */
#descarga img {
	transition: transform .4s var(--cer-ease-out);
}
#descarga img:hover { transform: rotate(-2deg) scale(1.03); }

/* Campos del formulario */
#contacto .elementor-field {
	transition: box-shadow .2s ease, border-color .2s ease;
}
#contacto .elementor-field:focus {
	border-color: var(--cer-naranja);
	box-shadow: 0 0 0 3px rgba(236, 130, 8, .35);
	outline: none;
}

/* Instagram */
#contacto a[href*="instagram"] .elementor-icon {
	transition: transform .35s var(--cer-ease-spring);
}
#contacto a[href*="instagram"]:hover .elementor-icon { transform: rotate(-12deg) scale(1.12); }
#contacto a[href*="instagram"]:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 8px; }

/* ==========================================================================
   2. Movimiento automático (solo si el usuario no pidió reducir movimiento)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	html { scroll-behavior: smooth; }

	/* ---------- Keyframes ---------- */
	@keyframes cer-drop {
		from { opacity: 0; translate: 0 -30px; scale: .9; }
		to   { opacity: 1; translate: 0 0; scale: 1; }
	}

	/* Título "escrito" de izquierda a derecha (no usa opacity: no retrasa el LCP) */
	@keyframes cer-ink {
		from { clip-path: inset(-40% 100% -40% -10%); }
		to   { clip-path: inset(-40% -10% -40% -10%); }
	}

	@keyframes cer-up {
		from { opacity: 0; translate: 0 40px; }
		to   { opacity: 1; translate: 0 0; }
	}

	@keyframes cer-pop {
		0%   { opacity: 0; scale: .6; }
		70%  { opacity: 1; scale: 1.06; }
		100% { opacity: 1; scale: 1; }
	}

	@keyframes cer-left {
		from { opacity: 0; translate: -60px 0; }
		to   { opacity: 1; translate: 0 0; }
	}

	@keyframes cer-right {
		from { opacity: 0; translate: 60px 0; }
		to   { opacity: 1; translate: 0 0; }
	}

	@keyframes cer-zoom {
		from { opacity: 0; scale: .85; }
		to   { opacity: 1; scale: 1; }
	}

	@keyframes cer-map {
		from { opacity: 0; scale: .8; rotate: -6deg; }
		to   { opacity: 1; scale: 1; rotate: 0deg; }
	}

	@keyframes cer-book {
		from { opacity: 0; translate: -50px 20px; rotate: -10deg; }
		to   { opacity: 1; translate: 0 0; rotate: 0deg; }
	}

	/* Flotado suave de frutas (usa transform: no choca con translate/scale de los reveals) */
	@keyframes cer-float {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-10px); }
	}

	/* Pulso de atención del botón Descargar (pausa larga entre pulsos) */
	@keyframes cer-pulse {
		0%   { box-shadow: 0 0 0 0 rgba(105, 170, 42, .55); }
		25%  { box-shadow: 0 0 0 14px rgba(105, 170, 42, 0); }
		100% { box-shadow: 0 0 0 0 rgba(105, 170, 42, 0); }
	}

	@keyframes cer-fade-in {
		from { opacity: 0; translate: 0 -6px; }
		to   { opacity: 1; translate: 0 0; }
	}

	/* ---------- 2.1 Hero: secuencia de carga ---------- */
	#bannerPrincipal img {
		animation: cer-drop .9s var(--cer-ease-out) .1s both;
	}

	#bannerPrincipal h1 {
		animation: cer-ink 1.3s cubic-bezier(.65, 0, .35, 1) .35s both;
	}

	#bannerPrincipal h2 {
		animation: cer-up .8s var(--cer-ease-out) 1.2s both;
	}

	#bannerPrincipal .e-button-base {
		animation: cer-pop .6s var(--cer-ease-out) 1.45s both;
	}

	#bannerPrincipal .e-button-base + .e-button-base {
		animation-delay: 1.6s;
	}

	/* ---------- 2.2 Flotados continuos ---------- */
	#cosecha img {
		animation: cer-float 6s ease-in-out infinite;
	}

	#entreRios img {
		animation: cer-float 7s ease-in-out 1s infinite;
	}

	#descarga button.e-button-base,
	#descarga a.e-button-base {
		animation: cer-pulse 3s ease-out 1s infinite;
	}

	/* Al pasar el mouse se corta el pulso para que se vea la sombra del hover */
	#descarga .e-button-base:hover { animation: none; }

	/* Contenido del acordeón al abrirse */
	#tips details[open] > :not(summary) {
		animation: cer-fade-in .35s var(--cer-ease-out) both;
	}

	/* ---------- 2.3 Reveal al hacer scroll (CSS puro) ---------- */
	@supports (animation-timeline: view()) {

		/* Base común: el "animation" shorthand resetea el timeline, por eso va antes */
		#cosecha h2,
		#cosecha p,
		#mandarinaNaranja > div > div:first-child,
		#mandarinaNaranja > div > div:last-child,
		#mandarinaNaranja > div > div:nth-child(2) img,
		#tips img,
		#tips h2,
		#tips details,
		#entreRios h2,
		#entreRios p,
		#descarga h2,
		#descarga li,
		#aromaRecuerdo h2,
		#aromaRecuerdo p,
		#aromaRecuerdo .e-button-base,
		#aromaRecuerdo img,
		#contacto > div > div:first-child,
		#contacto h2,
		#contacto p,
		#contacto img {
			animation-name: cer-up;
			animation-duration: auto;
			animation-timing-function: var(--cer-ease-out);
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: entry 5% cover 30%;
		}

		/* Intro: frutas aparecen con zoom y siguen flotando */
		#cosecha img {
			animation: cer-zoom auto var(--cer-ease-out) both, cer-float 6s ease-in-out infinite;
			animation-timeline: view(), auto;
			animation-range: entry 5% cover 30%, normal;
		}

		/* Mandarina entra desde la izquierda, naranja desde la derecha, frutas con zoom */
		#mandarinaNaranja > div > div:first-child { animation-name: cer-left; }
		#mandarinaNaranja > div > div:last-child  { animation-name: cer-right; }
		#mandarinaNaranja > div > div:nth-child(2) img {
			animation-name: cer-zoom;
			animation-range: entry 0% cover 40%;
		}

		/* Tips: niño desde la izquierda; los ítems escalonan solos al estar apilados */
		#tips img { animation-name: cer-left; }
		#tips details { animation-range: entry 10% cover 25%; }

		/* Entre Ríos: textos desde la izquierda, mapa gira y crece; luego flota */
		#entreRios p { animation-name: cer-left; }
		#entreRios img {
			animation: cer-map auto var(--cer-ease-out) both, cer-float 7s ease-in-out 1s infinite;
			animation-timeline: view(), auto;
			animation-range: entry 0% cover 40%, normal;
		}

		/* Guía: el libro entra girando; la lista entra desde la derecha */
		#descarga img {
			animation: cer-book auto var(--cer-ease-out) both;
			animation-timeline: view();
			animation-range: entry 0% cover 35%;
		}
		#descarga li { animation-name: cer-right; animation-range: entry 10% cover 25%; }

		/* Aromas: texto sube, foto entra desde la derecha */
		#aromaRecuerdo img { animation-name: cer-right; animation-range: entry 0% cover 35%; }

		/* Contacto: la tarjeta del formulario sube; el logo hace zoom */
		#contacto img { animation-name: cer-zoom; }
	}

	/* Acordeón: altura animada al abrir (Chrome/Edge 131+; el resto abre normal) */
	@supports selector(::details-content) {
		#tips { interpolate-size: allow-keywords; }

		#tips details::details-content {
			block-size: 0;
			overflow: clip;
			transition: block-size .4s var(--cer-ease-out), content-visibility .4s allow-discrete;
		}

		#tips details[open]::details-content { block-size: auto; }
	}
}

/* ==========================================================================
   3. Mobile: recorridos más cortos para que el movimiento se sienta más liviano
   ========================================================================== */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	@keyframes cer-left  { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }
	@keyframes cer-right { from { opacity: 0; translate: 30px 0; }  to { opacity: 1; translate: 0 0; } }
	@keyframes cer-up    { from { opacity: 0; translate: 0 24px; }  to { opacity: 1; translate: 0 0; } }
}

/* ==========================================================================
   4. FIX sección Tips (#tips)
   El contenedor raíz toma sus estilos de una clase externa que no llega al
   front: se pierde la marca de agua y el centrado. Esto los fuerza por CSS.
   ========================================================================== */
#tips {
	padding-inline: 20px;
	background-image: url("https://fruta.urlconceptsite.com/wp-content/uploads/2026/10/cer-bg-naturalmente-dulce.webp");
	background-repeat: no-repeat;
	background-position: left 8% top;
	background-size: auto 100%;
}

/* Contenedor interno: ancho máximo 1280px centrado (antes tenía 1280px fijos) */
#tips > div {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
}

@media (max-width: 1024px) {
	#tips {
		background-size: cover;
		background-position: center top;
	}
}

@media (max-width: 767px) {
	#tips { padding-inline: 16px; }
}

/* ==========================================================================
   5. Mobile/tablet: nada puede ser más ancho que la pantalla
   ========================================================================== */
@media (max-width: 1024px) {
	.e-con,
	.e-flexbox-base,
	.e-div-block-base {
		max-width: 100%;
		min-width: 0;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* Títulos largos (y la script del hero) no empujan el ancho */
	h1, h2, h3, h4 {
		overflow-wrap: break-word;
	}
}