/* =========================================================
   MUJERES LÍDERES DEL AGRO 2026
   CSS DEL HERO
   Archivo: mujeres-agro.css
   ========================================================= */

.hero-mujeres {
    position: relative;
    min-height: 680px;
    height: min(820px, 100vh);
    overflow: hidden;
    isolation: isolate;
    background: #f7f3e8;
}

.hero-mujeres::before {
    content: "";
    position: absolute;
    inset: -3%;
    z-index: -3;
    background:
        linear-gradient(
            90deg,
            rgba(247, 243, 232, 0.97) 0%,
            rgba(247, 243, 232, 0.90) 30%,
            rgba(247, 243, 232, 0.68) 52%,
            rgba(247, 243, 232, 0.40) 75%,
            rgba(247, 243, 232, 0.25) 100%
        ),
        url("https://agraria.pe/MujeresAgro/images/bg.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    animation: heroMujeresBg 14s ease-in-out infinite alternate;
}

.hero-mujeres::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -170px;
    height: 300px;
    z-index: -2;
    background: rgba(204, 229, 213, 0.45);
    border-radius: 50% 50% 0 0 / 35% 35% 0 0;
    transform: rotate(-2deg);
}

.hero-mujeres-container {
    width: min(1200px, 90%);
    min-height: 680px;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
}

.hero-mujeres-copy {
    position: relative;
    z-index: 5;
    max-width: 620px;
    padding: 60px 0;
}

.hero-mujeres-edition {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    color: #f15a35;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-mujeres-edition::before,
.hero-mujeres-edition::after {
    content: "";
    width: 34px;
    height: 3px;
    flex: 0 0 34px;
    background: #006b43;
    border-radius: 0;
}

.hero-mujeres-title {
    margin: 0 0 25px;
    display: flex;
    flex-direction: column;
    color: #006b43 !important;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(56px, 6vw, 82px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -4px;
    text-shadow: none !important;
}

.hero-mujeres-title span {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.hero-mujeres-title span:last-child {
    color: #f15a35;
}

.hero-mujeres-lead {
    max-width: 560px;
    margin: 0 0 28px;
    color: #000000 !important;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.55;
}

.hero-mujeres-event {
    display: inline-flex;
    align-items: center;
    height: 50px;
    margin-bottom: 0px;
    padding: 0 22px;
    background: rgba(255, 255, 255, 0.82);
    border-left: 4px solid #f15a35;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.hero-mujeres-event strong {
    color: #f15a35;
    font-family: inherit;
    font-weight: 800;
}

.hero-mujeres-event span {
    margin-left: 8px;
    color: #006b43;
    font-family: inherit;
    font-weight: 600;
}

.hero-mujeres-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    background: #006b43;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 30px;
    transition: 0.3s ease;
}

@media (max-width: 800px) {

    .hero-mujeres-cta {
        margin-top: 20px;
        margin-bottom: 80 !important;
    }

    .hero-mujeres-visual {
        min-height: 420px;
        margin-top: 80px;
    }

}


.hero-mujeres-cta:hover {
    background: #f15a35;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.hero-mujeres-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 768px) {
    .hero-mujeres-cta-icon {
        display: inline-flex !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        border-radius: 0 !important;
        margin-left: 8px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}
    
    
.hero-mujeres-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-mujeres-book-wrap {
    position: relative;
     width: 350px;
    max-width: 350px;
    transform: rotate(2deg);
    animation: heroMujeresFloat 6s ease-in-out infinite;
}

.hero-mujeres-book {
    position: relative;
    z-index: 3;
    width: 100% !important;
    height: auto !important;
    display: block;
    filter: drop-shadow(0 30px 35px rgba(0, 0, 0, 0.22));
}

.hero-mujeres-book-glow {
    position: absolute;
    width: 75%;
    height: 75%;
    top: 12%;
    left: 12%;
    background: rgba(255, 220, 160, 0.45);
    filter: blur(50px);
    border-radius: 50%;
    animation: heroMujeresPulse 5s ease-in-out infinite;
}

.hero-mujeres-shadow {
    position: absolute;
    left: 15%;
    bottom: -8%;
    width: 70%;
    height: 12%;
    background: rgba(0, 0, 0, 0.22);
    filter: blur(18px);
    border-radius: 50%;
    animation: heroMujeresShadow 5s ease-in-out infinite;
}

.hero-mujeres-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #006b43;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

@keyframes heroMujeresBg {
    from {
        transform: translate3d(-0.5%, 0, 0) scale(1.02);
    }
    to {
        transform: translate3d(0.5%, 0.5%, 0) scale(1.05);
    }
}

@keyframes heroMujeresFloat {
    0%, 100% {
        transform: rotate(2deg) translateY(0);
    }
    50% {
        transform: rotate(3deg) translateY(-10px);
    }
}

@keyframes heroMujeresPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.96);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.04);
    }
}

@keyframes heroMujeresShadow {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.22;
    }
    50% {
        transform: scale(0.82);
        opacity: 0.13;
    }
}

@keyframes heroMujeresLine {
    0%, 100% {
        transform: scaleY(0.45);
    }
    50% {
        transform: scaleY(1);
    }
}

/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 800px) {
    .hero-mujeres {
        height: auto;
        min-height: 850px;
    }

    .hero-mujeres-container {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 0px 0 65px;
    }

    .hero-mujeres-copy {
        text-align: center;
        padding: 0;
        max-width: 100%;
    }

    .hero-mujeres-edition {
        justify-content: center;
    }

    .hero-mujeres-title {
        font-size: clamp(48px, 14vw, 70px);
        letter-spacing: -3px;
    }

    .hero-mujeres-lead {
        margin-left: auto;
        margin-right: auto;
        font-size: 19px !important;
    }

    .hero-mujeres-event {
        font-size: 12px;
    }

    .hero-mujeres-cta {
        margin-top: 20px;
    }

    .hero-mujeres-visual {
        min-height: 420px;
        margin-top: -5px;
    }

    .hero-mujeres-book-wrap {
        width: min(310px, 70vw);
    }

    .hero-mujeres-scroll {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-mujeres {
        min-height: 800px;
    }

    .hero-mujeres-container {
        width: 90%;
    }

    .hero-mujeres-visual {
        min-height: 370px;
    }

    .hero-mujeres-book-wrap {
        width: 245px;
    }

    .hero-mujeres-title {
        font-size: clamp(44px, 14vw, 62px);
    }

    .hero-mujeres-lead {
        font-size: 18px !important;
    }

    .hero-mujeres-event {
        max-width: 100%;
        justify-content: center;
        padding: 0 14px;
    }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-mujeres *,
    .hero-mujeres *::before,
    .hero-mujeres *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   ANIMACIONES DEL HERO
   ========================================================= */

/* Movimiento suave del fondo */
.hero-mujeres::before {
    animation: heroMujeresBg 14s ease-in-out infinite alternate;
}

/* Flotación del libro */
.hero-mujeres-book-wrap {
    animation: heroMujeresFloat 6s ease-in-out infinite;
}

/* Pulso del brillo detrás del libro */
.hero-mujeres-book-glow {
    animation: heroMujeresPulse 5s ease-in-out infinite;
}

/* Respiración de la sombra */
.hero-mujeres-shadow {
    animation: heroMujeresShadow 5s ease-in-out infinite;
}


/* Fondo */
@keyframes heroMujeresBg {

    0% {
        transform: translate3d(-0.5%, 0, 0) scale(1.02);
    }

    100% {
        transform: translate3d(0.5%, 0.5%, 0) scale(1.05);
    }
}


/* Libro */
@keyframes heroMujeresFloat {

    0%, 100% {
        transform: rotate(2deg) translateY(0);
    }

    50% {
        transform: rotate(3deg) translateY(-10px);
    }
}


/* Brillo */
@keyframes heroMujeresPulse {

    0%, 100% {
        opacity: .45;
        transform: scale(.96);
    }

    50% {
        opacity: .85;
        transform: scale(1.04);
    }
}


/* Sombra */
@keyframes heroMujeresShadow {

    0%, 100% {
        transform: scale(.95);
        opacity: .22;
    }

    50% {
        transform: scale(.82);
        opacity: .13;
    }
}


/* =========================================================
   RESPETO A REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-mujeres::before,
    .hero-mujeres-book-wrap,
    .hero-mujeres-book-glow,
    .hero-mujeres-shadow {
        animation: none !important;
    }

}

/* =========================================================
   ANIMACIONES DE ENTRADA — HERO
   ========================================================= */

/* -------------------------
   ESTADO INICIAL
   ------------------------- */

.hero-mujeres-edition,
.hero-mujeres-title span,
.hero-mujeres-lead,
.hero-mujeres-event,
.hero-mujeres-cta {
    opacity: 0;
}


/* -------------------------
   ANIMACIÓN GENERAL DE ENTRADA
   ------------------------- */

@keyframes heroMujeresUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* -------------------------
   EDICIÓN
   ------------------------- */

.hero-mujeres-edition {
    transform: translateY(15px);
    animation: heroMujeresUp .7s .15s ease-out forwards;
}


/* -------------------------
   TÍTULO
   ------------------------- */

.hero-mujeres-title span {
    transform: translateY(35px);
}

.hero-mujeres-title span:first-child {
    animation: heroMujeresUp .8s .35s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero-mujeres-title span:last-child {
    animation: heroMujeresUp .8s .55s cubic-bezier(.2,.8,.2,1) forwards;
}


/* -------------------------
   DESCRIPCIÓN
   ------------------------- */

.hero-mujeres-lead {
    transform: translateY(20px);

    animation:
        heroMujeresUp
        .8s
        .8s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


/* -------------------------
   FECHA
   ------------------------- */

.hero-mujeres-event {
    transform: translateY(20px);

    animation:
        heroMujeresUp
        .8s
        1s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


/* -------------------------
   BOTÓN
   ------------------------- */

.hero-mujeres-cta {
    transform: translateY(20px);

    animation:
        heroMujeresUp
        .8s
        1.15s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


/* =========================================================
   ENTRADA DEL LIBRO
   ========================================================= */

@keyframes heroMujeresBookIn {

    from {
        opacity: 0;

        transform:
            translate3d(0, 90px, 0)
            rotate(8deg)
            scale(.9);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            rotate(2deg)
            scale(1);
    }

}


/* Flotación posterior */

@keyframes heroMujeresFloat {

    0%, 100% {
        transform:
            translateY(0)
            rotate(2deg);
    }

    50% {
        transform:
            translateY(-13px)
            rotate(3deg);
    }

}


/* Entrada + flotación */
.hero-mujeres-book-wrap {

    opacity: 0;

    animation:
        heroMujeresBookIn
        1.2s
        .45s
        cubic-bezier(.2,.8,.2,1)
        forwards,
        
        heroMujeresFloat
        5s
        1.8s
        ease-in-out
        infinite;
}


/* =========================================================
   PARTÍCULAS
   ========================================================= */

.hero-mujeres-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;
}


.hero-mujeres-particles i {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #006b43;

    opacity: .5;

    animation:
        heroMujeresParticle
        5s
        ease-in-out
        infinite;
}


/* posiciones */

.hero-mujeres-particles i:nth-child(1)  { left:13%; top:20%; animation-delay:.2s; }
.hero-mujeres-particles i:nth-child(2)  { left:26%; top:11%; animation-delay:1s; }
.hero-mujeres-particles i:nth-child(3)  { left:43%; top:17%; animation-delay:1.8s; }
.hero-mujeres-particles i:nth-child(4)  { left:67%; top:13%; animation-delay:.6s; }
.hero-mujeres-particles i:nth-child(5)  { left:82%; top:27%; animation-delay:2.1s; }
.hero-mujeres-particles i:nth-child(6)  { left:89%; top:47%; animation-delay:1.2s; }
.hero-mujeres-particles i:nth-child(7)  { left:79%; top:68%; animation-delay:2.7s; }
.hero-mujeres-particles i:nth-child(8)  { left:63%; top:80%; animation-delay:.8s; }
.hero-mujeres-particles i:nth-child(9)  { left:45%; top:88%; animation-delay:1.5s; }
.hero-mujeres-particles i:nth-child(10) { left:25%; top:78%; animation-delay:2.4s; }
.hero-mujeres-particles i:nth-child(11) { left:11%; top:61%; animation-delay:.4s; }
.hero-mujeres-particles i:nth-child(12) { left:8%;  top:38%; animation-delay:2s; }
.hero-mujeres-particles i:nth-child(13) { left:34%; top:30%; animation-delay:1.1s; }
.hero-mujeres-particles i:nth-child(14) { left:73%; top:37%; animation-delay:2.8s; }
.hero-mujeres-particles i:nth-child(15) { left:57%; top:62%; animation-delay:1.7s; }
.hero-mujeres-particles i:nth-child(16) { left:34%; top:63%; animation-delay:.9s; }
.hero-mujeres-particles i:nth-child(17) { left:18%; top:46%; animation-delay:2.5s; }
.hero-mujeres-particles i:nth-child(18) { left:91%; top:76%; animation-delay:1.4s; }
.hero-mujeres-particles i:nth-child(19) { left:52%; top:7%;  animation-delay:2.2s; }
.hero-mujeres-particles i:nth-child(20) { left:38%; top:94%; animation-delay:.5s; }
.hero-mujeres-particles i:nth-child(21) { left:6%;  top:79%; animation-delay:1.9s; }
.hero-mujeres-particles i:nth-child(22) { left:94%; top:32%; animation-delay:2.6s; }
.hero-mujeres-particles i:nth-child(23) { left:70%; top:91%; animation-delay:1.3s; }
.hero-mujeres-particles i:nth-child(24) { left:15%; top:92%; animation-delay:.7s; }
.hero-mujeres-particles i:nth-child(25) { left:86%; top:55%; animation-delay:2.9s; }


@keyframes heroMujeresParticle {

    0%, 100% {
        transform:
            translateY(0)
            scale(.8);

        opacity: .25;
    }

    50% {
        transform:
            translateY(-13px)
            scale(1);

        opacity: .65;
    }

}


/* =========================================================
   BRILLO DEL LIBRO
   ========================================================= */

@keyframes heroMujeresPulse {

    0%, 100% {
        opacity: .45;
        transform: scale(.96);
    }

    50% {
        opacity: .85;
        transform: scale(1.04);
    }

}

.hero-mujeres-book-glow {
    animation:
        heroMujeresPulse
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   SOMBRA
   ========================================================= */

@keyframes heroMujeresShadow {

    0%, 100% {
        transform: scale(.95);
        opacity: .22;
    }

    50% {
        transform: scale(.82);
        opacity: .13;
    }

}

.hero-mujeres-shadow {
    animation:
        heroMujeresShadow
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   FONDO
   ========================================================= */

@keyframes heroMujeresBg {

    from {
        transform:
            translate3d(-1%,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(1%,1%,0)
            scale(1.03);
    }

}

.hero-mujeres::before {

    animation:
        heroMujeresBg
        14s
        ease-in-out
        infinite
        alternate;

}


/* =========================================================
   "DESCUBRE MÁS"
   ========================================================= */

.hero-mujeres-scroll::after {

    content: "";

    display: block;

    width: 1px;

    height: 35px;

    margin: 8px auto 0;

    background: #006b43;

    transform-origin: top;

    animation:
        heroMujeresLine
        1.8s
        ease-in-out
        infinite;
}


@keyframes heroMujeresLine {

    0%, 100% {
        transform: scaleY(.45);
    }

    50% {
        transform: scaleY(1);
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-mujeres-edition,
    .hero-mujeres-title span,
    .hero-mujeres-lead,
    .hero-mujeres-event,
    .hero-mujeres-cta,
    .hero-mujeres-book-wrap,
    .hero-mujeres-particles i,
    .hero-mujeres-book-glow,
    .hero-mujeres-shadow,
    .hero-mujeres::before,
    .hero-mujeres-scroll::after {

        animation: none !important;

        opacity: 1 !important;

        transform: none !important;
    }

}