:root{
    --rosa:#ec4fa3;
    --rosa-fuerte:#d91d87;
    --lila:#8d45d7;
    --morado:#5b259f;
    --azul:#24a9e8;
    --blanco:#fff;
    --texto:#34213f;
    --suave:#fff2fb;
    --borde:rgba(164,72,190,.22);
    --sombra:0 18px 55px rgba(91,37,159,.16);
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:'Poppins', Arial, sans-serif;
    color:var(--texto);
    background:
      radial-gradient(circle at 10% 10%, rgba(236,79,163,.18), transparent 25%),
      radial-gradient(circle at 90% 20%, rgba(36,169,232,.14), transparent 25%),
      linear-gradient(135deg,#fff7fc,#f5ecff 45%,#eff9ff);
    min-height:100vh;
    overflow-x:hidden;
}

a{text-decoration:none;color:inherit}

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(236,79,163,.16);
}

.nav{
    width:min(1180px,92%);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:78px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Great Vibes', cursive;
    font-size:34px;
    color:var(--morado);
    font-weight:500;
}

.logo .mini-butterfly{font-size:28px;filter:drop-shadow(0 4px 8px rgba(236,79,163,.25));}

.menu{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.menu a{
    padding:12px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    color:#40214b;
    transition:.25s ease;
}

.menu a:hover,
.menu a.active{
    color:white;
    background:linear-gradient(135deg,var(--rosa),var(--lila));
    box-shadow:0 10px 24px rgba(217,29,135,.20);
}

.hero{
    min-height:calc(100vh - 78px);
    position:relative;
    display:grid;
    place-items:center;
    padding:70px 20px 40px;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 18% 68%, rgba(36,169,232,.20), transparent 25%),
      radial-gradient(circle at 78% 28%, rgba(236,79,163,.20), transparent 28%),
      linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,232,248,.72));
    z-index:-2;
}

.hero-card{
    width:min(1120px,96%);
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:32px;
    align-items:center;
}

.hero-copy{
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.85);
    border-radius:42px;
    padding:58px;
    box-shadow:var(--sombra);
    position:relative;
    overflow:hidden;
}

.hero-copy::after{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(236,79,163,.20),transparent 67%);
    right:-80px;
    top:-80px;
}

.kicker{
    font-weight:700;
    color:var(--rosa-fuerte);
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:13px;
}

h1,h2,h3{margin:0}

.hero h1{
    font-family:'Great Vibes', cursive;
    font-size:clamp(76px,12vw,150px);
    line-height:.86;
    background:linear-gradient(135deg,var(--morado),var(--rosa-fuerte),var(--azul));
    -webkit-background-clip:text;
    color:transparent;
    margin:24px 0 24px;
}

.hero .subtitle{
    font-size:clamp(22px,3vw,34px);
    line-height:1.25;
    font-weight:600;
    color:#382243;
}

.quote{
    margin:28px 0;
    font-size:20px;
    font-style:italic;
    color:var(--morado);
    line-height:1.65;
}

.btn-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:999px;
    padding:15px 24px;
    font-weight:800;
    border:0;
    cursor:pointer;
    transition:.25s ease;
}

.btn-primary{
    color:white;
    background:linear-gradient(135deg,var(--rosa),var(--lila));
    box-shadow:0 16px 35px rgba(217,29,135,.25);
}

.btn-outline{
    color:var(--morado);
    background:white;
    border:1px solid var(--borde);
}

.btn:hover{transform:translateY(-3px)}

.hero-art{
    min-height:560px;
    border-radius:48px;
    background:
      radial-gradient(circle at 40% 15%, rgba(255,255,255,.85), transparent 18%),
      linear-gradient(160deg,#ffe0f2,#efe1ff 50%,#dff7ff);
    box-shadow:var(--sombra);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.85);
    display:grid;
    place-items:center;
}

.hero-art .portrait{
    width:50%;
            max-height:300px;
    aspect-ratio:1/1.22;
    border-radius:48% 48% 16% 16%;
    background:
      linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),
      url('../img/laxmi-placeholder.png') center/cover no-repeat;
    box-shadow:0 24px 55px rgba(91,37,159,.18);
    border:10px solid rgba(255,255,255,.62);
}

.stats{
    width:min(1120px,92%);
    margin:-30px auto 45px;
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.stat{
    background:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.75);
    border-radius:26px;
    padding:22px;
    text-align:center;
    box-shadow:0 14px 34px rgba(91,37,159,.10);
}

.stat .icon{font-size:28px}
.stat strong{display:block;color:var(--morado);font-size:24px;margin:8px 0 2px}
.stat span{font-size:13px;color:#664b75}

.page-hero{
    padding:74px 20px 36px;
    text-align:center;
    position:relative;
}

.page-title{
    font-family:'Great Vibes', cursive;
    font-size:clamp(56px,8vw,96px);
    color:var(--morado);
    font-weight:500;
}

.page-title span{color:var(--rosa-fuerte)}
.decor-line{
    color:var(--rosa);
    font-size:26px;
    margin-top:4px;
}

.container{
    width:min(1120px,92%);
    margin:0 auto 70px;
}

.card{
    background:rgba(255,255,255,.84);
    border:1px solid rgba(255,255,255,.86);
    border-radius:32px;
    padding:34px;
    box-shadow:var(--sombra);
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.feature{
    text-align:center;
    padding:28px;
    border-radius:26px;
    background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,240,250,.72));
    border:1px solid var(--borde);
}

.feature .big-icon{font-size:42px;margin-bottom:12px}

.text-lg{
    font-size:18px;
    line-height:1.8;
}

.highlight{
    color:var(--rosa-fuerte);
    font-weight:800;
}

.math-table-wrap{
    overflow:auto;
    border-radius:24px;
    border:1px solid var(--borde);
    background:white;
}

.math-table{
    width:100%;
    border-collapse:collapse;
    min-width:880px;
}

.math-table th{
    background:linear-gradient(135deg,var(--morado),var(--rosa));
    color:white;
    padding:15px 12px;
    font-size:13px;
    text-align:left;
}

.math-table td{
    border-bottom:1px solid rgba(236,79,163,.16);
    padding:11px;
    background:rgba(255,255,255,.82);
}

.math-table input,
.math-table select{
    width:100%;
    border:1px solid rgba(141,69,215,.20);
    border-radius:12px;
    padding:10px;
    background:#fffaff;
    font-family:inherit;
}

.note{
    margin-top:18px;
    padding:18px 22px;
    border-radius:20px;
    background:rgba(236,79,163,.08);
    border:1px solid rgba(236,79,163,.16);
    color:#5d3c67;
}

.guardian-gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin:28px 0;
}

.guardian-img{
    min-height:280px;
    border-radius:30px;
    background:white;
    border:1px dashed rgba(141,69,215,.32);
    display:grid;
    place-items:center;
    padding:20px;
    overflow:hidden;
}

.guardian-img img{
    max-width:100%;
    max-height:310px;
    object-fit:contain;
    border-radius:22px;
}

.placeholder{
    text-align:center;
    color:#795989;
    font-weight:700;
}

.donor-box{
    text-align:center;
    padding:34px;
    border-radius:30px;
    background:linear-gradient(135deg,#fff,#fff0fa);
    border:1px solid var(--borde);
}

.socials{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
}

.social{
    width:56px;height:56px;
    display:grid;place-items:center;
    border-radius:18px;
    color:white;
    font-weight:900;
    font-size:22px;
    box-shadow:0 12px 25px rgba(91,37,159,.18);
}

.ig{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)}
.fb{background:#1877f2}
.yt{background:#ff0000}
.tt{background:#111}
.wa{background:#25d366}

.footer{
    text-align:center;
    padding:34px 20px;
    color:#684878;
    background:rgba(255,255,255,.58);
    border-top:1px solid rgba(236,79,163,.14);
}

/* Mariposas animadas */
.butterfly-layer{
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:4;
    overflow:hidden;
}

.butterfly{
    position:absolute;
    font-size:30px;
    opacity:.82;
    animation:
      fly var(--duration,18s) linear infinite,
      flutter .72s ease-in-out infinite alternate;
    filter:drop-shadow(0 7px 8px rgba(91,37,159,.16));
}

.butterfly.pink{color:#ec4fa3}
.butterfly.purple{color:#8d45d7}
.butterfly.white{color:white;text-shadow:0 0 10px rgba(141,69,215,.38)}
.butterfly.blue{color:#24a9e8}

.butterfly.b1{left:-8%;top:18%;--duration:20s;font-size:54px;animation-delay:-2s}
.butterfly.b2{left:-12%;top:62%;--duration:24s;font-size:36px;animation-delay:-9s}
.butterfly.b3{left:7%;top:78%;--duration:22s;font-size:28px;animation-delay:-5s}
.butterfly.b4{left:82%;top:18%;--duration:21s;font-size:48px;animation-delay:-12s}
.butterfly.b5{left:70%;top:72%;--duration:27s;font-size:32px;animation-delay:-16s}
.butterfly.b6{left:32%;top:12%;--duration:19s;font-size:26px;animation-delay:-4s}
.butterfly.b7{left:46%;top:82%;--duration:25s;font-size:44px;animation-delay:-13s}
.butterfly.b8{left:96%;top:52%;--duration:23s;font-size:38px;animation-delay:-7s}
.butterfly.b9{left:18%;top:36%;--duration:28s;font-size:24px;animation-delay:-20s}
.butterfly.b10{left:58%;top:34%;--duration:18s;font-size:30px;animation-delay:-8s}
.butterfly.b11{left:74%;top:44%;--duration:30s;font-size:58px;animation-delay:-21s}
.butterfly.b12{left:5%;top:8%;--duration:26s;font-size:42px;animation-delay:-11s}

@keyframes fly{
    0%{transform:translateX(-14vw) translateY(0) rotate(0deg)}
    25%{transform:translateX(24vw) translateY(-38px) rotate(9deg)}
    50%{transform:translateX(52vw) translateY(42px) rotate(-8deg)}
    75%{transform:translateX(80vw) translateY(-24px) rotate(7deg)}
    100%{transform:translateX(116vw) translateY(18px) rotate(0deg)}
}

@keyframes flutter{
    from{scale:.96; rotate:-3deg}
    to{scale:1.07; rotate:3deg}
}

@media (max-width:900px){
    .hero-card,.grid-2,.grid-3,.guardian-gallery{grid-template-columns:1fr}
    .hero-copy{padding:36px}
    .hero-art{min-height:380px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .nav{align-items:flex-start;flex-direction:column;padding:15px 0}
    .menu{justify-content:flex-start}
}

@media (max-width:560px){
    .stats{grid-template-columns:1fr}
    .menu a{font-size:12px;padding:9px 10px}
    .hero h1{font-size:78px}
    .card{padding:24px}
}