/* Archivo: homepage.css
   Funcion: Estilo especifico de la portada (index.php), direccion "natural/organico":
   tonos tierra, formas organicas suaves y acentos botanicos. Se carga UNICAMENTE en
   index.php (ver includes/header.php) y todas las reglas van prefijadas con
   body.page-home para dejar claro que es intencionalmente exclusivo de esta pagina y
   no afecta al resto del sitio. Los tonos tierra (--color-earth-*) viven en el :root
   de style.css, compartidos con about.css (misma direccion visual, otra pagina). */

/* ---------- Hero: gradiente mas calido y formas organicas en vez de circulos ---------- */
body.page-home .hero {
    background: linear-gradient(150deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-earth-moss) 100%);
}

body.page-home .hero::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    background: rgba(246, 241, 226, 0.10);
}

body.page-home .hero::after {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    background: rgba(246, 241, 226, 0.08);
}

body.page-home .hero-media::before {
    border-radius: 48% 52% 61% 39% / 44% 41% 59% 56%;
}

/* ---------- Movimiento ambiental sutil: la web se siente "viva" incluso sin interaccion ---------- */
@keyframes organic-drift {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.06) rotate(4deg); }
}

@keyframes gentle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes gentle-sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg); }
}

body.page-home .hero::before {
    animation: organic-drift 14s ease-in-out infinite;
}

body.page-home .hero::after {
    animation: organic-drift 18s ease-in-out infinite reverse;
}

/* Se combina con la animacion de entrada que ya trae hero.css (hero-image-pop): esa
   hace el "pop" al cambiar de slide, esta mantiene la foto flotando despues. */
body.page-home .hero-slide.is-active .hero-media img {
    animation:
        hero-image-pop var(--hero-transition) var(--ease-smooth) both,
        gentle-float 5s ease-in-out 0.9s infinite;
}

body.page-home .leaf-icon {
    animation: gentle-sway 4s ease-in-out infinite;
    transform-origin: 70% 70%;
}

/* ---------- Icono de hoja junto a los "eyebrow" de la portada ---------- */
body.page-home .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.page-home .leaf-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-earth-clay);
}

body.page-home .hero-content .leaf-icon {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Secciones "soft": fondo calido en vez de gris frio ---------- */
body.page-home .section-soft {
    background:
        radial-gradient(circle at 10% 15%, rgba(185, 118, 79, 0.07), transparent 42%),
        radial-gradient(circle at 90% 85%, rgba(74, 103, 65, 0.08), transparent 42%),
        var(--color-earth-cream);
}

/* ---------- Subrayado de titulo de seccion: verde a tierra ---------- */
body.page-home .section-title h2::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-earth-clay));
}

/* ---------- CTA band: degradado tierra + formas organicas ---------- */
body.page-home .cta-band {
    background: linear-gradient(120deg, var(--color-earth-moss), var(--color-primary-dark));
}

body.page-home .cta-band::before {
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    background: rgba(185, 118, 79, 0.18);
    animation: organic-drift 16s ease-in-out infinite;
}

body.page-home .cta-band::after {
    border-radius: 58% 42% 35% 65% / 55% 65% 35% 45%;
    background: rgba(246, 241, 226, 0.08);
    animation: organic-drift 20s ease-in-out infinite reverse;
}

/* ---------- Tarjetas: acento superior color tierra al pasar el raton ---------- */
@media (hover: hover) {
    body.page-home .card:hover {
        border-top-color: var(--color-earth-clay);
    }
}

/* ---------- Titulos mas grandes y con mas caracter en la portada ---------- */
body.page-home .section-title h2 {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    letter-spacing: -0.01em;
}

body.page-home .section-title-lg h2 {
    font-size: clamp(2.1rem, 3.6vw, 3.4rem);
}

/* ---------- Textura organica sutil (puntos dispersos) en las secciones "soft" ---------- */
body.page-home .section-soft {
    background-image:
        radial-gradient(circle at 10% 15%, rgba(185, 118, 79, 0.07), transparent 42%),
        radial-gradient(circle at 90% 85%, rgba(74, 103, 65, 0.08), transparent 42%),
        radial-gradient(circle, rgba(74, 103, 65, 0.06) 1.4px, transparent 1.4px);
    background-size: auto, auto, 26px 26px;
}

/* ---------- Rotador de productos destacados: pasa entre grupos de 4 en toda la
   catalogo, con un fundido suave. El alto lo ajusta initFeaturedRotator() en app.js
   para que no salte al cambiar de grupo. ---------- */
body.page-home .featured-rotator {
    position: relative;
    overflow: hidden;
    transition: height 0.5s var(--ease-smooth);
}

body.page-home .featured-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Ojo: a proposito NO se usa "inset: 0" (que tambien fija bottom:0). Si se fijara
       bottom, cada pagina se estiraria para ocupar exactamente el alto que ya tuviera
       el contenedor en ese momento, y offsetHeight dejaria de reflejar su alto real:
       initFeaturedRotator() nunca podria medir el alto autentico de cada pagina. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.9s var(--ease-smooth), visibility 0s linear 0.9s;
}

/* La primera pagina se queda en flujo normal (no absoluta): asi el contenedor tiene
   una altura valida desde el primer render, sin depender de que el JS llegue a
   ejecutarse. JS ajusta la altura exacta con initFeaturedRotator() en cuanto carga. */
body.page-home .featured-page:first-child {
    position: relative;
}

body.page-home .featured-page.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.9s var(--ease-smooth);
}