*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Montserrat',sans-serif;
    background:#ffffff;
}

header{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 80px;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;
}

header img{

    height:120px;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    text-decoration:none;

    color:#ffffff;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:#F39A1E;

}

.hero{

    height:100vh;

    background-image:
        linear-gradient(rgba(10,20,40,.55), rgba(10,20,40,.55)),
        url("../img/fondo.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero-overlay{

    position:absolute;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.60);

}

.hero-content{

    position:relative;

    margin-top:80px;

    color:white;

    text-align:center;

    max-width:850px;

    z-index:2;

}

.hero h1{

    font-size:64px;

    font-weight:700;

    margin-bottom:25px;

}

.hero p{

    font-size:22px;

    line-height:1.7;

    margin-bottom:40px;

}

.btn-principal{

    display:inline-block;

    padding:18px 48px;

    background:linear-gradient(135deg,#14345A,#7A2D91);

    color:white;

    text-decoration:none;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

    font-size:18px;

    cursor:pointer;

}

.btn-principal:hover{

    background:linear-gradient(135deg,#F39A1E,#7A2D91);

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}


.hero-content{

    animation: aparecer 1.2s ease;
}

@keyframes aparecer{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

header{

    transition:.4s;

}

header.scroll{

    background:white;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

header.scroll nav a{

    color:#14345A;

}

header.scroll .menu-btn{

    color:#14345A;

}

header.scroll nav a:hover{

    color:#F39A1E;

}

html{

    scroll-behavior:smooth;
    scroll-padding-top:120px;

}

#esencia{

    min-height:100vh;

    padding:140px 80px;

    background:#f4f8fc;

    position:relative;

    z-index:1;

}

.contenedor{

    max-width:1200px;

    margin:auto;

    position:relative;

    z-index:2;

}

#esencia h2{

    font-size:48px;

    color:#14345A;

    font-weight:700;

    text-align:center;

    margin-bottom:25px;

}

#esencia p{

    font-size:20px;

    color:#555;

    line-height:1.8;

}

.frase{

    font-size:28px;

    text-align:center;

    max-width:900px;

    margin:35px auto;

    line-height:1.7;

    color:#444;

}

.ideas-clave{

    display:flex;

    justify-content:center;

    gap:60px;

    flex-wrap:wrap;

    margin:55px 0;

}

.idea-simple{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:15px;

    font-size:20px;

    font-weight:700;

    color:#14345a;

    width:300px;

}

.idea-simple i{

    font-size:42px;

    color:#7a2d91;

    margin-bottom:5px;

}

.descripcion-esencia{

    max-width:950px;

    margin:60px auto 80px;

    text-align:center;

    font-size:21px;

    line-height:1.9;

    color:#555;

}

.pilares{

    display:flex;

    justify-content:space-between;

    gap:30px;

    margin-top:80px;

    flex-wrap:wrap;

}

.pilar{

    flex:1;

    min-width:280px;

    background:white;

    border:1px solid rgba(20,52,90,.08);

    box-shadow:0 12px 30px rgba(20,52,90,.08);

    padding:35px;

    border-radius:20px;

    position:relative;

    overflow:hidden;

    transition:.4s;

}

/* Línea superior de las tarjetas */

.pilar::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:55px;

    height:6px;

    transform:translateX(-50%);

    transition:width .55s cubic-bezier(.22,1,.36,1);

}

.pilar-azul::before{

    background:#14345A;

}

.pilar-verde::before{

    background:#39A9B9;

}

.pilar-naranja::before{

    background:#F39A1E;

}

.pilar:hover{

    transform:translateY(-10px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.pilar:hover::before{

    width:100%;

}

.pilar:hover i{

    transform:translateY(-4px) scale(1.12);

}

.pilar h3{

    color:#14345A;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    gap:12px;

}

.pilar h3 i{

    font-size:28px;

    transition:
    transform .35s ease,
    color .35s ease;

}

/* Azul */

.pilar h3 i.azul{

    color:#14345A;

}

/* Verde */

.pilar h3 i.verde{

    color:#39A9B9;

}

/* Naranja */

.pilar h3 i.naranja{

    color:#F39A1E;

}

.pilar p{

    line-height:1.8;

    color:#666;

}

#servicios{

    min-height:100vh;

    padding:130px 80px 140px;

    background:#ffffff;

    position:relative;

    overflow:hidden;

    --patron-seccion:url("../img/patrones/gestion.png");

    margin-top:-70px;

    border-radius:50px 50px 0 0;

    box-shadow:0 -12px 40px rgba(20,52,90,.08);

    z-index:3;

}

#servicios::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(255,255,255,.75),

        rgba(255,255,255,.15),

        rgba(255,255,255,.75)

    );

    z-index:1;

    pointer-events:none;

}

.servicios-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;

}

.servicio{

    background:#ffffff;

    padding:40px;

    border-radius:24px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.servicio:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.servicio h3{

    color:#14345A;

    font-size:26px;

    margin-bottom:20px;

}

.servicio p{

    color:#666;

    line-height:1.8;

}

.servicio::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#39A9B9,#7A2D91,#F39A1E);

}

#huellas{

    position:relative;

    z-index:4;

    margin-top:-70px;

    padding:200px 80px 140px;

    background:#fefcff;

    border-radius:50px 50px 0 0;

    box-shadow:0 -12px 40px rgba(20,52,90,.08);

}

#huellas .contenedor{
    max-width: 1720px;
}

.proyecto-destacado{
    display:grid;

    grid-template-columns:1.15fr 1fr;

    grid-template-areas:
        "foto contenido"
        "impacto contenido";

    gap:35px;
    align-items:start;

    background:white;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(20,52,90,.10);

    margin-top:70px;
    padding:0 22px 22px;
}

/* SOLO la foto principal del proyecto */
/* SOLO la foto principal del proyecto */
.proyecto-destacado > img{
    grid-area: foto;
    align-self: start;

    width: calc(100% + 44px);
    margin-left: -22px;

    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    display: block;

    border-radius: 22px;

    /* NUEVO */
    transform: scale(1);
    transition: transform .65s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

.proyecto-destacado > img{
    grid-area: foto;
    align-self: start;

    border-radius: 22px;
    overflow: hidden;
}

.proyecto-destacado{

    cursor:pointer;

}

.proyecto-destacado:hover > img{
    transform: scale(1.035);
}

.contenido-proyecto{

    grid-area:contenido;

    padding:55px;

}

.frase-huella{

    font-size:18px;
    font-style:italic;
    color:#7A2D91;
    font-weight:600;
    margin:-10px 0 22px;
    line-height:1.6;

}

.impacto-huella{
    grid-area:impacto;

    display:flex;
    flex-direction:column;

    align-self:stretch;
    height:100%;

    gap:18px;

    margin-top:-55px;
}

.item-impacto{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:12px 20px;

    align-items:start;

    background:#F8FBFD;
    border:1px solid rgba(20,52,90,.08);
    border-radius:16px;

    padding:38px 30px;
    flex:1;

    min-height:165px;

    transition:.35s;
}

.item-impacto:hover{

    transform:translateY(-6px);
    box-shadow:0 14px 30px rgba(20,52,90,.10);

}

.item-impacto i{

    grid-row:1 / span 2;

    font-size:34px;
    color:#39A9B9;

    display:flex;
    justify-content:center;

    margin-top:2px;

}

.item-impacto h4{

    color:#14345A;
    font-size:26px;
    font-weight:700;
    line-height:1.2;
    margin:0;
    line-height:1.25;

}

.item-impacto p{

    margin:0;
    font-size:18px;
    line-height:1.75;
    color:#666;

}

/*.item-impacto i{

    font-size:30px;
    color:#39A9B9;
    margin-bottom:14px;

}

.item-impacto h4{

    color:#14345A;
    font-size:17px;
    margin-bottom:10px;

}

.item-impacto p{

    font-size:14px;
    line-height:1.6;
    color:#666;
    margin:0;

}*/

.etiqueta{

    display:inline-block;

    padding:10px 20px;

    background:rgba(57,169,185,.12);

    color:#39A9B9;

    font-size:15px;

    font-weight:700;

    border-radius:50px;

    margin-bottom:20px;

    letter-spacing:.5px;

}

.contenido-proyecto h3{

    font-size:40px;

    color:#14345A;

    margin-bottom:25px;

    line-height:1.2;

}

.contenido-proyecto p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

.datos-proyecto{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:35px;

}

.datos-proyecto div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#666;

    font-weight:600;

}

.datos-proyecto i{

    color:#39A9B9;

    font-size:18px;

}

.titulo-galeria{

    grid-column:1/-1;

    font-size:24px;

    color:#14345A;

    margin-bottom:10px;

    padding-bottom:15px;

    border-bottom:2px solid rgba(20,52,90,.08);

}

.preview-galeria{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:35px;

}

.preview{

    position:relative;

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    box-shadow:0 12px 30px rgba(20,52,90,.12);

    background:#fff;

}

.preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .4s ease;
}

.preview video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.play-preview{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.25);

    transition:.3s;

}

.play-preview i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    color:#14345A;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    transition:.3s;

}

.preview-video:hover .play-preview{

    background:rgba(0,0,0,.45);

}

.preview-video:hover .play-preview i{

    transform:scale(1.15);

}

.preview:hover img{

    transform:scale(1.08);

}

.preview-mas span{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    font-weight:700;

    backdrop-filter:blur(2px);

}

.imagenes-lightbox{

    display:none;

}

.subtitulo{

    text-align:center;

    max-width:800px;

    margin:30px auto 70px;

    color:#666;

    line-height:1.8;

    font-size:20px;

}

.galeria{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.foto{

    height:320px;

    border-radius:25px;

    background:#e9ecef;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    color:#999;

    transition:.35s;

}

.foto:hover{

    transform:scale(1.03);

}

#crear{

    position:relative;

    z-index:5;

    margin-top:0;

    min-height:100vh;

    padding:195px 80px 140px;

    background:
    linear-gradient(
        rgba(255,255,255,.79),
        rgba(255,255,255,.79)
    ),
    url("../img/fondo-crear.png");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    border-radius:35px 35px 0 0;

    box-shadow:0 -12px 40px rgba(20,52,90,.08);

    overflow:hidden;

}

#crear::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:350px;

    background:linear-gradient(

        to bottom,

        rgba(255,255,255,0),

        rgba(255,255,255,.25),

        rgba(255,255,255,.60),

        rgba(255,255,255,.90),

        #ffffff

    );

    pointer-events:none;

    z-index:1;

}

.crear-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.crear-texto h2{

    font-size:48px;

    color:#14345a;

    margin-bottom:25px;

}

.crear-texto p{

    font-size:20px;

    color:#14344f;

    line-height:1.8;

}

.frase-crear{

    font-size:28px;

    font-weight:600;

    color:#14345A;

    line-height:1.6;

    margin-bottom:35px;

}

.valores-crear{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:45px;

}

.valores-crear div{

    display:flex;

    align-items:center;

    gap:18px;

    font-size:20px;

    font-weight:600;

    color:#14345a;

    transition:.35s;

}

.valores-crear div:hover{

    transform:translateX(12px);

}

.valores-crear i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#7A2D91,#39A9B9);

    color:white;

    font-size:22px;

    box-shadow:0 10px 25px rgba(20,52,90,.18);

}

.formulario{

    display:flex;

    flex-direction:column;

    gap:20px;

    background:white;

    padding:45px;

    border-radius:28px;

    box-shadow:0 18px 45px rgba(20,52,90,.12);

    border-top:6px solid #7a2d91;

    transition:.35s;

}

.formulario:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(20,52,90,.18);

}

.formulario input,
.formulario textarea{

    padding:18px;

    border:2px solid transparent;

    border-radius:15px;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    background:white;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

    transition:.3s;

}

.formulario input:focus,
.formulario textarea:focus{

    outline:none;

    border-color:#7A2D91;

    box-shadow:0 12px 30px rgba(122,45,145,.20);

    transform:translateY(-2px);

}

.formulario textarea{

    min-height:160px;

    resize:vertical;

}

.formulario button{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px;

    background:linear-gradient(135deg,#7A2D91,#F39A1E);

    color:white;

    border:none;

    border-radius:15px;

    box-shadow:0 10px 30px rgba(122,45,145,.25);

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.formulario button i{

    transition:.35s;

}

.formulario button:hover{

    background:linear-gradient(135deg,#F39A1E,#7A2D91);

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 18px 40px rgba(122,45,145,.35);

}

.formulario button:hover i{

    transform:translateX(6px);

}

#impulsar{

    min-height:100vh;

    padding:140px 80px;

    background:white;

    text-align:center;

    position: relative;

    overflow: hidden;

    z-index:5;

}

#impulsar::before{

    content:"";

    position:absolute;

    left:0;

    top:-300px;

    width:100%;

    height:300px;

    background:linear-gradient(

        to bottom,

        rgba(255,255,255,0),

        #ffffff

    );

    pointer-events:none;

    z-index:1;

}

#impulsar .contenedor{

    position:relative;

    z-index:2;

}

.aportes{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:45px;

    margin:60px 0;

}

.aporte{

    background:#ffffff;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 18px 40px rgba(20,52,90,.08);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.aporte{

    opacity:0;

    transition:
    opacity .7s ease,
    transform .7s ease;

}

.aporte:nth-child(1){

    transform:translateX(-45px);

}

.aporte:nth-child(2){

    transform:translateY(45px);

}

.aporte:nth-child(3){

    transform:translateX(45px);

}

.aporte.animar{

    opacity:1;

    transform:translate(0,0);

}

.aporte:nth-child(1){

    transition-delay:.10s;

}

.aporte:nth-child(2){

    transition-delay:.28s;

}

.aporte:nth-child(3){

    transition-delay:.46s;

}

.aporte::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:65px;

    height:6px;

    transform:translateX(-50%);

    border-radius:0 0 10px 10px;

    transition:width .45s ease;

}

.aporte:nth-child(1)::before{

    background:#7A2D91;

}

.aporte:nth-child(2)::before{

    background:#14345A;

}

.aporte:nth-child(3)::before{

    background:#39A9B9;

}

.aporte:hover::before{

    width:100%;

}

.aporte:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 55px rgba(20,52,90,.16);

}

.subir{

    margin-top:-25px;

}

.bajar{

    margin-top:25px;

}

.icono-aporte{

    width:95px;

    height:95px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 28px;

    color:white;

    font-size:38px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transition:transform .4s ease, box-shadow .4s ease;

}

.icono-aporte.morado{

    background:linear-gradient(135deg,#7A2D91,#A94AC0);

}

.icono-aporte.azul{

    background:linear-gradient(135deg,#14345A,#2C5E96);

}

.icono-aporte.verde{

    background:linear-gradient(135deg,#39A9B9,#62D5C6);

}

.aporte:hover .icono-aporte{

    transform:translateY(-8px) rotate(-8deg) scale(1.08);

    box-shadow:0 22px 45px rgba(20,52,90,.25);

}

.aporte h3{

    color:#14345A;

    font-size:24px;

    margin-bottom:18px;

}

.aporte p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}

.btn-donar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-top:20px;

    padding:22px 55px;

    background:linear-gradient(135deg,#14345A,#7A2D91);

    color:white;

    text-decoration:none;

    font-size:19px;

    font-weight:700;

    border-radius:55px;

    box-shadow:0 18px 45px rgba(20,52,90,.25);

    transition:all .35s ease;

    position:relative;

    z-index:1;

    overflow:hidden;

    border: none;

    outline: none;

    cursor: pointer;

}

.btn-donar i{

    transition:all .35s ease;

}

.btn-donar:hover .fa-hand-holding-heart{

    transform:scale(1.20);

}

.btn-donar:hover .flecha{

    opacity:1;

    transform:translateX(0);

}

.btn-donar:hover{

    background:linear-gradient(135deg,#7A2D91,#14345A);

    transform:translateY(-6px) scale(1.03);

    box-shadow:0 28px 55px rgba(122,45,145,.35);

}

.btn-donar:hover i{

    transform:scale(1.25);

}

.cta-aporte{

    max-width:760px;

    margin:80px auto 0;

    padding:55px;

    background:linear-gradient(145deg,#ffffff,#f7f9fc);

    border-radius:28px;

    text-align:center;

    box-shadow:0 20px 50px rgba(20,52,90,.10);

    border:1px solid rgba(20,52,90,.08);

}

.cta-aporte::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:90px;

    height:6px;

    /*background:linear-gradient(90deg,#7A2D91,#39A9B9);*/

    border-radius:0 0 12px 12px;

}

.cta-aporte h3{

    color:#14345A;

    font-size:34px;

    margin-bottom:22px;

}

.cta-aporte p{

    max-width:600px;

    margin:0 auto 35px;

    color:#666;

    line-height:1.8;

    font-size:18px;

}

#contacto{

    padding:140px 80px 125px;

    background:#14345A;

    text-align:center;

    color:white;

}

#contacto h2{

    font-size:48px;

    margin-bottom:30px;

}

.contacto-info{

    display:flex;

    justify-content:center;

    gap:100px;

    margin:60px 0;

    flex-wrap:wrap;

}

.contacto-info h3{

    margin-bottom:15px;

}

.btn-contacto{

    display:inline-block;

    padding:18px 45px;

    background:white;

    color:#14345A;

    text-decoration:none;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

}

.btn-contacto:hover{

    background:#7A2D91;

    color:white;

}

footer{

    background:linear-gradient(135deg,#14345A,#0c213c);

    color:white;

    padding:70px 80px 30px;

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #14345A,
        #7A2D91,
        #39A9B9
    );

}

.footer-contenido{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:70px;

    margin-top:70px;

}

.footer-contenido h3{

    margin-bottom:20px;

    font-size:24px;

}

.footer-contenido p{

    margin-bottom:12px;

    color:#ddd;

    line-height:1.7;

}

.redes-sociales{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:25px;

}

.red-social{

    width:55px;

    height:55px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:all .35s ease;

    line-height:1;

    padding:0;

    position:relative;

}

.red-social i{

    width:22px;

    height:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:22px;

    line-height:1;

    margin:auto;

    transition:all .35s ease;

}

.tooltip{

    position:absolute;

    bottom:70px;

    left:50%;

    transform:translateX(-50%) translateY(8px);

    background:#14345A;

    color:white;

    font-size:13px;

    font-weight:600;

    padding:7px 14px;

    border-radius:10px;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:all .25s ease;

    pointer-events:none;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.tooltip::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:100%;

    border:6px solid transparent;

    border-top-color:#14345A;

}

.red-social:hover .tooltip{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.facebook i{

    color:#ffffff;

    position:relative;

    left:-6px;

}

.instagram i{

    color:#ffffff;

    position:relative;

    left:-6px;

}

.red-social:hover{

    transform:translateY(-6px) scale(1.08);

}

.facebook:hover{

    background:#1877F2;

    box-shadow:0 15px 35px rgba(24,119,242,.35);

}

.instagram:hover{

    background:linear-gradient(
        135deg,
        #833AB4,
        #E1306C,
        #FCAF45
    );

    box-shadow:0 15px 35px rgba(225,48,108,.35);

}

.red-social:hover i{

    color:#ffffff;

    transform:scale(1.18);

}

.copyright{

    text-align:center;

    margin-top:50px;

    border-top:1px solid rgba(255,255,255,.2);

    padding-top:25px;

    color:#bbb;

}

.footer-contenido div{

    transition:.3s;

}

.footer-contenido div:hover{

    transform:translateY(-6px);

}

.menu-btn{

    display:none;

}

/* ===== CELULARES ===== */

@media (max-width:768px){

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

*{
    max-width:100%;
}

header{
    padding: 15px 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header img{
    height:55px;
    width:auto;
}

nav{
    display:none;
    width:100%;
    margin-top:18px;
    flex-direction:column;
    align-items:center;
    gap:18px;
    background:#ffffff;
    padding:22px;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(20,52,90,.12);
}

nav.activo{
    display:flex;
}

nav a{
    color:#14345A;
    font-size:17px;
    font-weight:600;
}

nav a:hover{
    color:#F39A1E;
}

.hero{
    width:100%;
    min-height:100vh;
    padding:120px 20px 80px;
    overflow:hidden;
}

.hero{
    min-height:100vh;
    padding:120px 22px 80px;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.60);
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
}

.hero h1{
    font-size:26px;
    line-height:1.18;
    text-align:center;
    max-width:320px;
    margin:0 auto;
}

.hero p{
    font-size:15px;
    line-height:1.7;
    text-align:center;
    max-width:300px;
    margin:18px auto 0;
}

.btn-principal{
    margin-top:32px;
    padding:16px 32px;
    font-size:18px;
}


/* Nuestra Esencia - móvil */
/* Nuestra Esencia - móvil */
/* Nuestra Esencia - móvil */
/* Nuestra Esencia - móvil */
#esencia h2{
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% - 2px));

    width: fit-content;
    white-space: nowrap;

    font-size: 30px !important;
    line-height: 1.1;
    font-weight: 700;
    text-align: center;
    margin-bottom: 18px;
    margin-left: -10px;
}

#esencia .descripcion-esencia{
    max-width: 320px;
    margin: 30px auto 45px;

    font-size: 15px !important;
    line-height: 1.8;

    text-align: center;
    text-align-last: center;
}

#esencia h2::after{
    margin: 18px auto 0;
    position: relative;
    left: 12px;   /* ajuste fino */
}

/* ===== Nuestra Esencia - ideas en horizontal ===== */

.ideas-clave{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin:35px 0;
}

.idea-simple{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:16px;

    padding:14px 18px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 8px 18px rgba(20,52,90,.06);

    font-size:15px;
    font-weight:700;
    color:#14345A;
}

.idea-simple i{
    font-size:28px;
    color:#7A2D91;
    margin:0;
    min-width:32px;
}

.idea-simple p{
    margin:0;
    font-size:15px;
    line-height:1.4;
    color:#14345A;
}

.descripcion-esencia{
    max-width: 300px;
    margin: 35px auto 55px;

    font-size: 16px;
    line-height: 1.7;
    text-align: center;
}

#esencia .pilar p{
    font-size: 12px !important;
    line-height: 1.55;
    text-align: left;
}

/* ===== Pilares - celular ===== */

.pilares{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:28px;
}

.pilar{
    flex:none;
    min-width:0;          /* ← esta línea mata el 280px */
    width:240px;
    padding:16px;
    border-radius:16px;
}

.pilar h3{
    font-size:15px;
    gap:8px;
    margin-bottom:8px;
}

.pilar h3 i{
    font-size:18px;
}

.pilar p{
    font-size:12px;
    line-height:1.55;
    text-align:left;
}

/* Lo que Hacemos - móvil */

#servicios{
    padding: 110px 10px 80px;
}

.patron-servicios{
    position: absolute;
    top: 60px;
    right: -30px;

    width: 180px;
    opacity: 0.08;

    z-index: 0;
    pointer-events: none;
}

#servicios .contenedor{
    position: relative;
    z-index: 1;
}

#servicios .categorias-servicios .categoria h3{
    font-size: 13px !important;
    line-height: 1.2 !important;
    max-width: 90px;
    margin: 6px auto 0;
}

#servicios h2{
    position:relative;
    left:50%;
    transform:translateX(calc(-50% - 2px));

    width:fit-content;
    white-space:nowrap;

    font-size:30px !important;
    line-height:1.1;
    text-align:center;
    margin-bottom:18px;
    margin-left: 0px;
}

#servicios h2::after{
    margin:18px auto 0;
    position:relative;
    left:12px;
}

/* Tarjeta inicial - CELULAR */

#servicios .detalle-servicio{
    width: 85%;
    max-width: 85%;
    margin: 20px auto 0;
    padding: 20px 18px;
}

#servicios .estado-inicial{
    width: 100%;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
}

#servicios .estado-inicial h3{
    width:100%;
    max-width:270px;

    font-size:17px;
    line-height:1.25;

    text-align:center;
    margin:0 auto 12px;
}

#servicios .estado-inicial p{
    width:100%;
    max-width:270px;

    font-size:12px;
    line-height:1.65;

    text-align:justify;
    text-align-last:center;

    margin:0 auto 16px;
}

#servicios .estado-inicial .indicacion{
    width:100%;
    max-width:270px;

    font-size:11px;
    line-height:1.6;

    text-align:justify;
    text-align-last:center;

    margin:0 auto;
}

#servicios .etiqueta-servicio{
    font-size:10px;
    padding:7px 14px;
    margin-bottom:14px;
}

#servicios .modulo-servicios{
    width:100%;
    margin:0 auto;

    padding:18px 12px;
    border-radius:24px;
    box-sizing:border-box;
}

/* Las 4 bolitas en 2 columnas */
.categorias-servicios{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px 8px;
    justify-items:center;
    align-items:start;
    margin-top:25px;
}

/* Cada bolita */
.categoria{
    width:120px;
    text-align:center;
}

/* Círculo */
.categoria .icono{
    width:60px;
    height:60px;
    margin:0 auto 8px;
}

.categoria .icono i{
    font-size:24px;
}

/* Texto */
.categoria h3{
    font-size:7px;
    line-height:1.2;
    margin:0;
}

/* Título de la tarjeta abierta */
#titulo-servicio{
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 12px;
}

/* Descripción */
#descripcion-servicio{
    font-size: 12px;
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 16px;
}

/* Lista */
#lista-servicios{
    padding-left: 18px;
}

#lista-servicios li{
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 8px;
}

#lista-servicios li::marker{
    font-size: 11px;
}


/* ===== HUELLAS ===== */

/* Huellas - móvil */
#huellas h2{
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% - 2px));

    width: fit-content;
    white-space: nowrap;

    font-size: 30px !important;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 18px;
    margin-left: 2px;
}

#huellas h2::after{
    margin: 18px auto 0;
    position: relative;
    left: 0px;
}

#huellas{
    padding:120px 20px 80px;
    margin-top:-35px;
    border-radius:30px 30px 0 0;
}

.subtitulo{
    max-width: 320px;
    margin: 22px auto 40px;

    font-size: 15px;
    line-height: 1.8;

    text-align: justify;
    text-align-last: center;
}

/* ===== HUELLAS - CELULAR ===== */

.contenido-proyecto{
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.etiqueta{
    margin: 0 auto 16px;
}

.contenido-proyecto h3{
    font-size: 25px;
    line-height: 1.25;
    text-align: center;
    margin-bottom: 16px;
    max-width: 290px;
}

.frase-huella{
    font-size: 16px;
    text-align: center;
    max-width: 270px;
    margin: 0 auto 20px;
}

.contenido-proyecto p{
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    max-width: 290px;
}

.datos-proyecto{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin:25px 0;
}

.datos-proyecto div{
    justify-content:center;
    text-align:center;
    width:100%;
}

.datos-proyecto i{
    margin-right:8px;
}

.proyecto-destacado{
    grid-template-columns:1fr;
    grid-template-areas:
        "foto"
        "contenido"
        "impacto";

    gap:25px;
    padding:0 16px 16px;
}

.proyecto-destacado > img{
    width:100%;
    margin:0 auto;
    display:block;
    border-radius:18px;
}

.contenido-proyecto{
    padding:0;
}

.contenido-proyecto h3{
    font-size:28px;
}

.contenido-proyecto p{
    font-size:16px;
    line-height:1.8;
}

.datos-proyecto{
    gap:15px;
}

.impacto-huella{
    margin-top:0;
}

.item-impacto{
    min-height:auto;
    padding:16px;
    grid-template-columns:36px 1fr;
    gap:8px 12px;
    border-radius:14px;
}

.item-impacto i{
    font-size:20px;
}

.item-impacto h4{
    font-size:16px;
    line-height:1.2;
}

.item-impacto p{
    font-size:12px;
    line-height:1.5;
}

/* GALERÍA ABIERTA - CELULAR */
.lightbox{
    flex-direction:column;
    justify-content:center;
    padding:20px;
}

.lightbox img{
    max-width:100%;
    max-height:68vh;
    margin-bottom:80px; /* espacio para las flechas */
}

.anterior-lightbox,
.siguiente-lightbox{
    position:fixed;
    top:auto !important;
    bottom:20px;
    transform:none !important;

    width:52px;
    height:52px;
}

.anterior-lightbox{
    left:calc(50% - 65px);
}

.siguiente-lightbox{
    left:calc(50% + 100px);
}

/* ===== CREAR JUNTOS ===== */

#crear{
    padding: 110px 20px 80px;
}

.crear-texto h2{
    font-size:30px !important;
    text-align:center;
    margin:0 auto 18px;
    width:100%;
}

.crear-texto h2::after{
    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#F39A1E;
    margin:18px auto 0;
    border-radius:20px;
}

#huellas h2{
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% - 2px));

    width: fit-content;
    white-space: nowrap;

    font-size: 30px !important;
    line-height: 1.1;
    text-align: center;
    margin-bottom: 18px;
    margin-left: 2px;
}

#huellas h2::after{
    margin: 18px auto 0;
    position: relative;
    left: 0px;
}

.etiqueta{
    padding: 8px 16px;
    font-size: 11px;
    margin-bottom: 14px;
}

#huellas .contenido-proyecto h3{
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 14px;
    text-align: center;
}

#huellas .frase-huella{
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 18px;
}

#huellas .contenido-proyecto p{
    font-size: 14px;
    line-height: 1.8;
    text-align: justify;
    text-align-last: center;
}

#huellas .datos-proyecto{
    gap:10px;
    margin-bottom:20px;
}

#huellas .datos-proyecto div{
    font-size:12px;
    gap:8px;
    font-weight:600;
    justify-content:center;
}

#huellas .datos-proyecto i{
    font-size:13px;
}

.crear-texto p{
    width:100%;
    max-width:280px;

    margin:0 auto;

    font-size:13px;
    line-height:1.9;

    color:#14344F;

    text-align:justify;
    text-align-last:center;
}

.valores-crear div{
    display:flex;
    align-items:center;
    justify-content:flex-start;  /* izquierda */

    gap:12px;

    width:100%;
    max-width:220px;
    margin:0 auto;

    font-size:15px;
    font-weight:600;
    color:#14345A;

    text-align:left;
}

.valores-crear i{
    width:44px;
    height:44px;

    font-size:17px;

    flex-shrink:0;
}

.formulario{
    width:100%;
    max-width:315px;   /* antes era como 280-300 */
    margin:0 auto;

    padding:22px 18px;
    border-radius:20px;
}

.formulario input,
.formulario textarea{
    font-size:13px;      /* lo que escribe el usuario */
    padding:14px 16px;
    border-radius:14px;
}

.formulario input::placeholder,
.formulario textarea::placeholder{
    font-size:12px;
    color:#7A7A7A;
}


.formulario textarea[rows="2"]{
    min-height: 68px;
    resize: none;
}

#crear .contenedor{
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 0;
}

.crear-grid{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
}

.crear-texto{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    padding:0;
}


.frase-crear{
    width: 100%;
    max-width: 290px;
    margin: 0 auto 28px;

    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;

    text-align: center;
    color: #14345A;
}

.formulario{
    padding:24px 20px;
    border-radius:20px;
}

.formulario input,
.formulario textarea{
    font-size:16px;
    padding:15px;
}

.formulario button{
    width:100%;
    padding:16px;
    font-size:16px;
}


/* ===== IMPULSAR EL ARTE ===== */

#impulsar{
    padding:110px 20px 80px;
}

#impulsar h2{
    width:100%;

    font-size:30px !important;
    line-height:1.1;
    font-weight:700;

    text-align:center;

    margin:0 auto 18px;
}

#impulsar h2::after{
    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#7A2D91;
    margin:18px auto 0;
    border-radius:20px;
}

.aportes{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin:35px 0;
}

.aporte{
    width:100%;
    max-width:280px;

    padding:22px 18px;

    border-radius:18px;
    margin:0;
}

.icono-aporte{
    width:58px;
    height:58px;

    font-size:24px;

    margin:0 auto 16px;
}

.aporte h3{
    font-size:19px;
    margin-bottom:10px;
    text-align:center;
}

.aporte p{
    font-size:13px;
    line-height:1.7;
    text-align:center;
}

.cta-aporte{
    max-width: 280px;
    padding: 22px 18px;
    border-radius: 20px;
}

.cta-aporte h3{
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 12px;
}

.cta-aporte p{
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.btn-donar{
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 14px;
    gap: 8px;
}

/* ===== FOOTER ===== */

footer{
    padding:60px 22px 35px;
}

#contacto h2{
    width: 100%;

    font-size: 30px !important;
    line-height: 1.1;
    font-weight: 700;

    text-align: center;

    margin: 0 auto 18px;
}

#contacto h2::after{
    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#39A9B9;
    margin:18px auto 0;
    border-radius:20px;
}

#contacto .footer-top p{
    max-width: 270px;

    font-size: 14px;
    line-height: 1.7;

    text-align: center;
    text-align-last: center;

    margin: 0 auto 22px;
}

.btn-whatsapp{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    padding:10px 18px;
    border-radius:14px;

    font-size:13px;
    font-weight:600;
}

.btn-whatsapp i{
    font-size:15px;
}

.footer-contenido h3{
    font-size:22px;
    line-height:1.2;
    margin-bottom:12px;
    text-align:center;
}

.footer-contenido p{
    max-width:240px;
    margin:0 auto;

    font-size:13px;
    line-height:1.7;

    text-align:center;
    text-align-last:center;

    color:#ddd;
}

.copyright{
    text-align:center;

    margin-top:30px;
    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.15);

    font-size:11px;
    line-height:1.5;

    color:#bbb;
}

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

.footer-copy{
    margin-top:30px;
    font-size:14px;
    text-align:center;
    line-height:1.6;
}

.footer-contenido{

    grid-template-columns:1fr;

    text-align:center;

}

.contacto-info{

    flex-direction:column;

    gap:35px;

}

.menu-btn{
    display:block;
    position:absolute;

    right:20px;
    top:50%;
    transform:translateY(-50%);

    background:none;
    border:none;
    font-size:32px;
    color:#ffffff;
    cursor:pointer;
    padding:0;
    line-height:1;
}



#contacto h2{
    color:#fff;
}

/* ===== INTRO SOLO CELULAR ===== */
@media (max-width:768px){

  #logo-color,
  #logo-blanco{
      width:120px !important;
      left:50% !important;
      top:50% !important;
      transform:translate(-50%,-50%) !important;
  }

  #intro img{
      width:120px !important;
  }

  /* Destino exacto del header móvil */
 

}

.subir,
.bajar{
    margin-top:0;
}


}

@media (max-width:768px){
    #volver-arriba{
        right: 12px !important;
        bottom: 14px !important;

        width: 44px !important;
        height: 44px !important;

        font-size: 16px !important;
    }
}

.oculto{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.mostrar{

    opacity:1;

    transform:translateY(0);

}

.footer-top{

    text-align:center;

    margin-bottom:70px;

}

.footer-top h2{

    font-size:52px;

    margin-bottom:20px;

}

.footer-top p{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    color:#ddd;

    margin-bottom:35px;

}

.btn-whatsapp{

    display:inline-block;

    background:linear-gradient(135deg,#39A9B9,#14345A);

    color:white;

    text-decoration:none;

    padding:18px 45px;

    border-radius:50px;

    box-shadow:0 10px 30px rgba(122,45,145,.25);

    font-weight:700;

    transition:.3s;

}

.btn-whatsapp:hover{

    background:linear-gradient(135deg,#14345A,#39A9B9);

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 18px 40px rgba(122,45,145,.35);

}

.footer-contenido a{

    color:#d9d9d9;

    text-decoration:none;

    transition:.3s;

}

.footer-contenido > div:not(:last-child) a:hover{

    color:#7A2D91;

}

.footer-contenido i{

    color:#39a9b9;

    margin-right:10px;

}

/* ===== PANTALLA DE INTRO ===== */

#intro{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:
    transform 1.2s ease-in-out,
    opacity .8s ease;

}

#intro img{

    width:230px;

    opacity:1;

    transform:scale(1);

    filter:blur(0);

    transition:
    transform .9s ease,
    opacity .9s ease,
    filter .9s ease;

}



#intro.animar img{

    animation:respirar .8s ease-in-out 2;

}

#intro.ocultar{

    opacity:0;

    pointer-events:none;

}

.pantalla-carga svg{
    width: 180px;
    animation: aparecerLogo 1.2s ease;
}

@keyframes aparecerLogo{

    0%{
        opacity:0;
        transform:scale(.5);
    }

    70%{
        opacity:1;
        transform:scale(1.08);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

#intro.ocultar{

    opacity:0;
    visibility:hidden;
    transition:1s;

}

@keyframes respirar{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


.mancha{

    position:absolute;

    width:530px;

    height:530px;

    border-radius:50%;

    filter:blur(115px);

    transform:scale(0);

    transition:transform 1.6s ease;

    opacity:.99;

}

/*.morada{

    background:#742C7B;

    top:-250px;

    left:-250px;

}

.azul{

    background:#14345A;

    bottom:-250px;

    right:-250px;

}

.verde{

    background:#39A9B9;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(0);

}*/

/* MORADAS */

/* MORADAS */

.m1{
background:#742C7B;
top:-180px;
left:-180px;
}

.m2{
background:#742C7B;
top:18%;
right:15%;
}

.m3{
background:#742C7B;
bottom:-120px;
left:22%;
}

.m4{
background:#742C7B;
top:62%;
right:28%;
}

/* AZULES */

.a1{
background:#14345A;
top:-120px;
right:-180px;
}

.a2{
background:#14345A;
top:42%;
left:-120px;
}

.a3{
background:#14345A;
bottom:-160px;
right:12%;
}

.a4{
background:#14345A;
top:10%;
left:42%;
}

/* VERDES */

.v1{
background:#39A9B9;
top:50%;
left:50%;
}

.v2{
background:#39A9B9;
top:-140px;
left:65%;
}

.v3{
background:#39A9B9;
bottom:12%;
left:55%;
}

.v4{
background:#39A9B9;
top:28%;
right:-120px;
}


#intro.animar .mancha{

    transform:scale(2);

}

#intro.animar .verde{

    transform:translate(-50%,-50%) scale(2);

}

#logo-color,
#logo-blanco{

    position:absolute;

    width:240px;

    left:44%;

    top:35%;

    transform:translate(-50%,-50%);
}

#logo-color{
    opacity:1;
    z-index:2;
}

#logo-blanco{
    opacity:0;
    z-index:3;
}

/* ===== TÍTULOS DE LAS SECCIONES ===== */

#esencia h2,
#servicios h2,
#huellas h2,
#crear h2,
#impulsar h2{

    font-size:48px;
    color:#14345A;
    font-weight:700;
    text-align:center;
    margin-bottom:20px;

}

#contacto h2{

    font-size:48px;
    color:#ffffff;
    font-weight:700;
    text-align:center;
    margin-bottom:20px;

}

/* ===== Rayitas de los títulos ===== */

#esencia h2::after{

    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#7A2D91;
    margin:18px auto 0;
    border-radius:20px;

}

#servicios h2::after{

    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#14345A;
    margin:18px auto 0;
    border-radius:20px;

}

#huellas h2::after{

    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#39A9B9;
    margin:18px auto 0;
    border-radius:20px;

}

#crear h2::after{

    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#F39A1E;
    margin:18px auto 0;
    border-radius:20px;

}

#impulsar h2::after{

    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#7A2D91;
    margin:18px auto 0;
    border-radius:20px;

}

#contacto h2::after{

    content:"";
    display:block;
    width:80px;
    height:5px;
    background:#39a9b9;
    margin:18px auto 0;
    border-radius:20px;

}

/* ===== LO QUE HACEMOS ===== */

.categorias-servicios{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:60px;

    flex-wrap:wrap;

    margin-top:75px;

}

.categoria{

    display:flex;

    flex-direction:column;

    align-items:center;

    cursor:pointer;

    position: relative;

    transition:.35s;

}

.categoria:hover{

    transform:translateY(-8px);

}

.categoria.activa{

    transform:translateY(-20px) scale(1.08);

}

.categoria.activa .icono{

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.categorias-servicios:hover .categoria{

    opacity:.65;

}

.categorias-servicios:hover .categoria.activa{

    opacity:1;

}

.icono{

    width:95px;

    height:95px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:38px;

    margin-bottom:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.icono.azul{
    background: #7A2D91;
}

.icono.morado{
    background: #F39A1E;
}

.icono.verde{
    background: #39a9b9;
}

.icono.naranja{
    background: #E91E63;
}

.categoria h3{

    font-size:20px;

    color:#14345A;

    text-align:center;

    max-width:170px;

    line-height:1.4;

}

.detalle-servicio{

    position: relative;

    overflow: hidden;

    --patron:url("../img/patrones/gestion.png");

    margin:70px auto 0;

    max-width: 980px;

    min-height:250px;

    background: white;

    border-radius:25px;

    padding:25px 45px 12px;

    box-shadow:0 15px 40px rgba(20,52,90,.08);

    border-top:6px solid #14345A;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    /*transition: all .3s ease;*/

    transition: opacity .3s ease, transform .3s ease;

}

/* ===== Estado inicial de Lo que Hacemos ===== */

.estado-inicial{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;

    gap:0;
    padding:28px 70px 18px;
    min-height:auto;
}

.etiqueta-servicio{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:#F3E8FF;
    color:#7A2D91;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:12px;
}

.estado-inicial h3{
    display:block !important;
    font-size:32px;
    line-height:1.18;
    font-weight:700;
    color:#14345A;
    width:100%;
    max-width:640px;
    margin:0 0 18px;
}

.estado-inicial p{
    width:100%;
    max-width:720px;
    font-size:17px;
    line-height:1.95;
    color:#6A6A6A;
    text-align:center;

    margin:18px 0 30px;   /* ← baja el texto gris */
}

.estado-inicial .indicacion{
    max-width:700px;
    font-size:18px;
    line-height:1.9;
    color:#7A2D91;
    font-weight:600;
    margin: 26px 0 0 0;
    margin-top:34px;
}

.contenido-servicio{
    display:none;
    animation: aparecerContenido .35s ease;
}

.contenido-servicio.activo{
    display:block;
}

@keyframes aparecerContenido{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.detalle-servicio h3{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:34px;

    color:#14345A;

    margin-bottom:20px;

}

.icono-titulo{

    font-size:34px;

}

.icono-titulo.azul{

    color:#14345A;

}

.icono-titulo.morado{

    color:#7A2D91;

}

.icono-titulo.verde{

    color:#39A9B9;

}

.icono-titulo.naranja{

    color:#F39A1E;

}

.descripcion-servicio{

    font-size:18px;

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.detalle-servicio ul{

    list-style:none;

    padding:0;

}

.detalle-servicio li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    font-size:18px;

    color:#444;

    line-height:1.7;

}

.detalle-servicio li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#39A9B9;

    font-weight:700;

    font-size:20px;

}

.detalle-servicio.morado{

    border-top:6px solid #7A2D91;

}

.detalle-servicio.morado h3{

    color:#7A2D91;

}



.detalle-servicio.naranja{

    border-top:6px solid #F39A1E;

}

.detalle-servicio.naranja h3{

    color:#F39A1E;

}



.detalle-servicio.verde{

    border-top:6px solid #39a9b9;

}

.detalle-servicio.verde h3{

    color:#39a9b9;

}



.detalle-servicio.fucsia{

    border-top:6px solid #E91E63;

}

.detalle-servicio.fucsia h3{

    color:#E91E63;

}

.detalle-servicio.mostrar{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.intro-servicios{

    max-width:750px;

    margin:55px auto 55px;

    text-align:center;

    font-size:18px;

    line-height:1.8;

    color:#666;

}

/* ===== Tarjeta principal ===== */

.modulo-servicios{

    background:#ffffff;

    border:1px solid rgba(20,52,90,.08);

    border-radius:32px;

    padding:50px;

    margin-top:30px;

    box-shadow:0 20px 50px rgba(20,52,90,.08);

    position:relative;

    overflow:hidden;

}

.modulo-servicios::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(
        90deg,
        #7A2D91,
        #f39a1e,
        #39a9b9,
        #E91E63
    );

}

.detalle-servicio::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--patron) center center/cover no-repeat;

    opacity:0;

    pointer-events:none;

    z-index:0;

}

.detalle-servicio > *{

    position:relative;

    z-index:1;

}

#volver-arriba{

    position:fixed;

    right:35px;

    bottom:35px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#14345A,#7A2D91);

    color:white;

    font-size:22px;

    cursor:pointer;

    box-shadow:0 18px 40px rgba(20,52,90,.30);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px) scale(.8);

    transition:all .35s ease;

    z-index:999;

}

#volver-arriba:hover{

    transform:translateY(-6px);

    background:linear-gradient(135deg,#7A2D91,#14345A);

    box-shadow:0 25px 55px rgba(122,45,145,.35);

}

#volver-arriba.mostrar{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

    animation:popBoton .35s ease;

}

@keyframes popBoton{

    0%{

        transform:translateY(20px) scale(.8);

    }

    60%{

        transform:translateY(-3px) scale(1.08);

    }

    100%{

        transform:translateY(0) scale(1);

    }

}

.lightbox{

    position:fixed;

    inset:0;

    background:
linear-gradient(
    135deg,
    rgba(20,52,90,.96),
    rgba(12,28,52,.95),
    rgba(57,169,185,.12)
);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.lightbox img{

    max-width:90%;

    max-height:85vh;

    border-radius:20px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

    opacity:1;

    transform:scale(.95);

    transition:
    opacity .22s ease,
    transform .28s ease;

}

.lightbox.activo{

    opacity:1;

    visibility:visible;

}

.cerrar-lightbox{

    position:absolute;

    top:35px;

    right:45px;

    color:white;

    font-size:55px;

    cursor:pointer;

    transition:.3s;

}

.cerrar-lightbox:hover{

    transform:scale(1.15);

    color:#39A9B9;

}

.anterior-lightbox,
.siguiente-lightbox{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:white;

    font-size:22px;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:.30s;

}

.anterior-lightbox{

    left:35px;

}

.siguiente-lightbox{

    right:35px;

}

.anterior-lightbox:hover,
.siguiente-lightbox:hover{

    background:#39A9B9;

    transform:translateY(-50%) scale(1.12);

}

.video-lightbox{

    position:fixed;

    inset:0;

    background:
linear-gradient(
    135deg,
    rgba(20,52,90,.96),
    rgba(12,28,52,.95),
    rgba(57,169,185,.12)
);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.video-lightbox.activo{

    opacity:1;

    visibility:visible;

}

#video-lightbox{

    width:min(1100px,90vw);

    max-height:85vh;

    border-radius:20px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

    outline:none;

    opacity:0;

    transform:scale(.95);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.cerrar-video{

    position:absolute;

    top:35px;

    right:45px;

    color:white;

    font-size:55px;

    cursor:pointer;

    transition:.3s;

}

.cerrar-video:hover{

    color:#39A9B9;

    transform:scale(1.15);

}

.patron-servicios{

    position:absolute;

    left:50%;

    top:-260px;

    transform:translateX(-50%);

    width:2600px;

    height:auto;

    opacity:.12;

    pointer-events:none;

    z-index:0;

}

.opciones-donacion{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin:25px 0;
}

.monto-btn{
    padding:14px 22px;
    border:2px solid #36A8BD;
    background:white;
    color:#14345A;
    border-radius:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.monto-btn:hover,
.monto-btn.activo{
    background:#36A8BD;
    color:white;
}

.otro-monto{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:10px;
}

#monto-personalizado{
    padding:14px 18px;
    border:1px solid #d6d6d6;
    border-radius:12px;
    width:180px;
    font-size:16px;
}