/*==========================================================
DRA. MARCELA CULLERE
Version 3.0
==========================================================*/

/*------------------------
RESET
------------------------*/

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

html{

    scroll-behavior:smooth;

}

:root{

    --verde:#5d6a5f;
    --verde-claro:#8b9b8e;

    --lila:#b79bc8;
    --lavanda:#ede8f5;

    --rosa:#d8bcc8;

    --crema:#fbf8f4;

    --gris:#50575c;

    --gris-claro:#777;

    --blanco:#ffffff;

    --max-width:1200px;

}

body{

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

    color:var(--gris);

    background:

    radial-gradient(circle at top left,#f7f0fb 0%,transparent 30%),

    radial-gradient(circle at bottom right,#eef5ee 0%,transparent 30%),

    var(--crema);

    line-height:1.8;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

.container{

    width:min(92%,var(--max-width));

    margin:auto;

}

/*==========================================================
TIPOGRAFÍA
==========================================================*/

h1,
h2,
h3{

    font-family:'Cormorant Garamond',serif;

    font-weight:600;

    color:var(--verde);

}

h2{

    font-size:3.5rem;

    text-align:center;

    margin-bottom:60px;

}

p{

    font-size:1.08rem;

    color:var(--gris);

}

/*==========================================================
HERO
==========================================================*/

.hero{

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 40px 20px;

}

.hero-image{

    width:min(1300px,95vw);

    border-radius:28px;

    box-shadow:

    0 30px 70px rgba(0,0,0,.10);

}

/*==========================================================
INTRO
==========================================================*/

.intro{

    padding:110px 20px;

    text-align:center;

}

.line{

    width:140px;

    height:2px;

    margin:20px auto;

    background:

    linear-gradient(to right,

    transparent,

    var(--lila),

    transparent);

}

.eyebrow{

    letter-spacing:7px;

    font-size:.85rem;

    color:var(--verde);

    margin:20px 0 35px;

}

.intro h2{

    margin-bottom:35px;

}

.lead{

    max-width:820px;

    margin:auto;

    font-size:1.25rem;

    line-height:2;

}

.button{

    display:inline-block;

    margin-top:55px;

    padding:18px 46px;

    border-radius:60px;

    border:2px solid var(--verde);

    color:var(--verde);

    font-weight:600;

    transition:.35s;

}

.button:hover{

    background:var(--verde);

    color:white;

    transform:translateY(-4px);

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

}

/*==========================================================
SERVICIOS
==========================================================*/

.services{

    padding:120px 20px;

    background:white;

}

.services-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:40px;

}

.service{

    background:var(--crema);

    border-radius:26px;

    padding:45px;

    transition:.35s;

    box-shadow:

    0 12px 35px rgba(0,0,0,.05);

}

.service:hover{

    transform:translateY(-10px);

}

.service h3{

    font-size:2rem;

    color:var(--lila);

    margin-bottom:20px;

}

.service p{

    line-height:1.9;

}

/*==========================================================
DESTACADOS
==========================================================*/

.highlights{

    padding:120px 20px;

}

.numbers{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));

    gap:35px;

    text-align:center;

}

.numbers div{

    padding:30px;

}

.numbers span{

    display:block;

    font-family:'Cormorant Garamond',serif;

    font-size:4rem;

    color:var(--verde);

    margin-bottom:15px;

}

.numbers p{

    font-size:1rem;

}

/*==========================================================
TRAYECTORIA
==========================================================*/

.experience{

    padding:120px 20px;

    background:#f7f5f2;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:25px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(var(--lila),var(--verde));

}

.timeline-item{

    position:relative;

    margin-left:80px;

    margin-bottom:60px;

    padding:10px 0;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-67px;

    top:14px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:white;

    border:4px solid var(--lila);

    box-shadow:0 0 0 6px rgba(183,155,200,.12);

}

.timeline-item h3{

    font-size:2rem;

    margin-bottom:12px;

}

.timeline-item p{

    line-height:1.9;

    max-width:700px;

}

/*==========================================================
FILOSOFÍA
==========================================================*/

.quote{

    padding:150px 20px;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    rgba(183,155,200,.08),
    rgba(93,106,95,.05)
    );

}

.quote blockquote{

    max-width:900px;

    margin:auto;

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    line-height:1.45;

    color:var(--verde);

    font-style:italic;

}

/*==========================================================
CONTACTO
==========================================================*/

.contact{

    padding:120px 20px;

    background:white;

    text-align:center;

}

.contact p{

    max-width:700px;

    margin:0 auto 50px;

}

.contact-links{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.contact-links a{

    padding:16px 30px;

    border-radius:50px;

    border:2px solid var(--lila);

    color:var(--verde);

    transition:.3s;

    font-weight:500;

}

.contact-links a:hover{

    background:var(--lila);

    color:white;

}

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

footer{

    padding:80px 20px;

    text-align:center;

    background:#f5f3ef;

}

footer img{

    width:90px;

    margin:0 auto 25px;

    opacity:.95;

}

footer p{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    color:var(--verde);

    margin-bottom:8px;

}

footer span{

    display:block;

    color:var(--gris-claro);

    margin-bottom:35px;

}

footer small{

    color:#999;

    font-size:.9rem;

}

/*==========================================================
ANIMACIONES
==========================================================*/

.hero-image,
.service,
.timeline-item,
.numbers div{

    transition:.35s ease;

}

.hero-image:hover{

    transform:scale(1.01);

}

.service:hover{

    box-shadow:0 22px 50px rgba(0,0,0,.10);

}

.timeline-item:hover{

    transform:translateX(6px);

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:900px){

    h2{

        font-size:2.6rem;

    }

    .quote blockquote{

        font-size:2.2rem;

    }

    .timeline::before{

        left:14px;

    }

    .timeline-item{

        margin-left:55px;

    }

    .timeline-item::before{

        left:-44px;

    }

}

@media(max-width:600px){

    .hero{

        padding:15px;

        min-height:auto;

    }

    .hero-image{

        width:100%;

        border-radius:18px;

    }

    .intro{

        padding:80px 20px;

    }

    .lead{

        font-size:1.08rem;

    }

    .services,
    .experience,
    .contact,
    .highlights{

        padding:80px 20px;

    }

    .numbers{

        grid-template-columns:1fr 1fr;

    }

    .quote{

        padding:90px 20px;

    }

    .quote blockquote{

        font-size:1.8rem;

    }

    .contact-links{

        flex-direction:column;

        align-items:center;

    }

}

/*==========================
SERVICIOS V2
==========================*/

.service-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

margin:100px 0;

}

.reverse .service-image{

order:2;

}

.reverse .service-text{

order:1;

}

.service-image img{

width:100%;

border-radius:24px;

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

}

.service-text h3{

font-size:2.3rem;

margin-bottom:25px;

color:var(--lila);

}

.service-text p{

font-size:1.12rem;

line-height:2;

}

@media(max-width:900px){

.service-row{

grid-template-columns:1fr;

gap:30px;

margin:70px 0;

}

.reverse .service-image{

order:1;

}

.reverse .service-text{

order:2;

}

}

.footer-logo{

width:130px !important;

background:none;

padding:0;

margin-bottom:30px;

}
.footer-subtitle{

    margin-bottom:25px;

    color:var(--gris-claro);

}

.footer-quote{

    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    max-width:650px;

    margin:30px auto;

    color:var(--verde);

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:35px 0;

}

.footer-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    border:2px solid var(--lila);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--verde);

    font-size:22px;

    transition:.3s;

}

.footer-social a:hover{

    background:var(--lila);

    color:white;

}

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

transition:.4s;

.service-image:hover{
    transform:scale(1.03);
}

.social-links{

display:flex;

justify-content:center;

gap:28px;

margin:30px 0;

}

.social-links a{

color:#5f6657;

transition:.35s;

}

.social-links a:hover{

color:#c7addd;

transform:translateY(-4px);

}

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

.footer{

background:#faf0e6;

padding:80px 20px 45px;

text-align:center;

margin-top:120px;

}

.footer h3{

font-family:'Cormorant Garamond',serif;

font-size:2rem;

font-weight:500;

color:#5f6657;

margin-bottom:8px;

}

.footer p{

color:#6d6d6d;

letter-spacing:.08em;

margin-bottom:35px;

}

.footer-social{

display:flex;

justify-content:center;

gap:30px;

margin-bottom:35px;

}

.footer-social a{

color:#5f6657;

transition:.35s;

}

.footer-social a:hover{

color:#c5acd8;

transform:translateY(-4px);

}

.footer-copy{

font-size:.85rem;

letter-spacing:.08em;

color:#777;

}

/*==================================================
CONSULTA
==================================================*/

.consulta{

    padding:120px 20px;

    background:#fcf8f5;

}

.consulta .container{

    max-width:1100px;

    margin:0 auto;

}

.consulta h2{

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    color:#5f6657;

    font-size:3rem;

    margin-bottom:20px;

}

.consulta-intro{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

    color:#666;

    line-height:1.8;

}

.consulta-info{

    display:flex;

    gap:30px;

    justify-content:center;

    margin-bottom:60px;

    flex-wrap:wrap;

}

.info-card{

    width:250px;

    background:white;

    border-radius:18px;

    padding:30px;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    text-align:center;

}

.info-card h3{

    color:#5f6657;

    margin-bottom:10px;

}

.info-card p{

    color:#666;

}

.btn{

    display:inline-block;

    margin-top:40px;

    padding:16px 42px;

    background:#c5acd8;

    color:white;

    text-decoration:none;

    border-radius:40px;

    font-weight:600;

    letter-spacing:.05em;

    transition:.35s;

    box-shadow:0 10px 30px rgba(197,172,216,.35);

}

.btn:hover{

    background:#b795cb;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(197,172,216,.45);

}

/* ================= GUÍA FIV ================= */

.guia {
    padding: 90px 20px;
    text-align: center;
}

.guia-contenido {
    max-width: 850px;
    margin: 0 auto;
}

.guia-etiqueta {
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.guia h2 {
    margin-bottom: 10px;
}

.guia h3 {
    font-weight: 400;
    margin-bottom: 30px;
}

.guia p {
    max-width: 750px;
    margin: 0 auto 20px auto;
    line-height: 1.7;
}

.guia .btn {
    display: inline-block;
    margin-top: 15px;
}