/* =========================================================
   InterMédica Manuel Acuña — Landing
   Paleta: blanco / gris oscuro / gris claro + susurro salvia
   ========================================================= */


@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');



:root{
    --bg:#f5f4f1;          /* off-white cálido      */
    --surface:#ffffff;     /* tarjetas              */
    --tint:#eceae4;        /* gris claro / bloques  */
    --ink:#1f2124;         /* gris oscuro / texto   */
    --ink-soft:#5d6067;    /* texto secundario      */
    --line:#e3e1db;        /* bordes hairline       */
    --accent:#6e8c7b;      /* verde salvia (único acento) */
    --accent-tint:#edf1ee; /* fondo suave del acento */

    --radius-lg:28px;
    --radius-md:20px;
    --radius-sm:14px;
    --shadow-soft:0 24px 60px -32px rgba(31,33,36,.28);
    --shadow-card:0 2px 24px -18px rgba(31,33,36,.35);

    --font-display:"Bricolage Grotesque", sans-serif;
    --font-body:"DM Sans", sans-serif;
}

/* ---------- Base ---------- */
html,body{ overflow-x:hidden; }

body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:1.0625rem;      /* >= 1rem */
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
    font-family:var(--font-display);
    color:var(--ink);
    line-height:1.12;
    letter-spacing:-.02em;
    margin:0;
}

p{ margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

::selection{ background:var(--accent); color:#fff; }

*:focus-visible{
    outline:3px solid var(--accent);
    outline-offset:3px;
    border-radius:6px;
}

/* ---------- Espaciado de secciones ---------- */
.section{ padding:clamp(4.5rem, 9vw, 8.5rem) 0; }
.section-first{ padding:0 0 clamp(1rem, 1vw, 1rem); }
.section--tint{ background:var(--tint); }

.section-head{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }

/* ---------- Tipos utilitarios ---------- */
.eyebrow{
    display:inline-block;
    font-family:var(--font-display);
    font-weight:600;
    font-size:1rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:1.1rem;
}
.eyebrow--light{ color:#a9c1b3; }

.section-title{
    font-size:clamp(1.9rem, 3.6vw, 3rem);
    font-weight:400;
  
}
.section-head__note{
    color:var(--ink-soft);
    font-size:1.0625rem;
    max-width:34ch;
    margin-left:auto;
}

/* ---------- Botones ---------- */
.btn-pill{
    border-radius:999px;
    font-family:var(--font-display);
    font-weight:500;
    font-size:1.0625rem;
    padding:.85rem 1.6rem;
    border:1.5px solid transparent;
    transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn-pill:active{ transform:translateY(1px); }

.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#000; color:#fff; box-shadow:0 12px 28px -14px rgba(31,33,36,.6); }

.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:#5d7a6a; color:#fff; box-shadow:0 12px 28px -14px rgba(110,140,123,.7); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn-lg-cta{ padding:1.05rem 1.6rem; font-size:1.125rem; }

.link-arrow{
    display:inline-block;
    font-family:var(--font-display);
    font-weight:500;
    color:var(--ink);
    margin-top:1.5rem;
}
.link-arrow i{ transition:transform .3s ease; margin-left:.4rem; }
.link-arrow:hover i{ transform:translateX(6px); }
.link-arrow--light{ color:#fff; }

/* ---------- Navbar ---------- */
.site-nav{
    position:sticky; top:0; z-index:1030;
    padding:1rem 0;
    background:rgba(245,244,241,.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease, padding .3s ease;
}
.site-nav.scrolled{
    border-bottom-color:var(--line);
    padding:.65rem 0;
}
.navbar-brand{
    display:inline-flex; align-items:center; gap:.65rem;
    font-family:var(--font-display); font-weight:600;
    font-size:1.15rem; color:var(--ink);
}
.brand-mark{ width:120px; }
.brand-word em{ font-style:normal; font-weight:500; color:var(--ink-soft); font-size:.92em; }

.site-nav .nav-link{
    font-family:var(--font-display);
    font-weight:500; font-size:1.0625rem;
    color:var(--ink); padding:.5rem 1rem;
    border-radius:999px; transition:color .2s ease, background .2s ease;
}
.site-nav .nav-link:hover{ color:var(--accent); }
.navbar-toggler{ border:1px solid var(--line); border-radius:12px; padding:.45rem .7rem; color:var(--ink); }
.navbar-toggler:focus{ box-shadow:none; }

/* ---------- Hero (caja con imagen de fondo) ---------- */
.hero-box{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    min-height:100vh;
    padding:clamp(1.8rem, 3.4vw, 3.2rem);
    display:grid;
}
.hero-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
}
.hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(180deg, rgba(31,33,36,.35) 0%, rgba(31,33,36,.15) 32%, rgba(31,33,36,.55) 78%, rgba(31,33,36,.82) 100%),
        linear-gradient(90deg, rgba(31,33,36,.55) 0%, rgba(31,33,36,.05) 70%);
}
.hero-inner{
    position:relative; z-index:2;
    display:grid;
    grid-template-rows:1fr auto;
    height:100%;
}
.hero-inner > .row{ align-self:center; }

.hero-title{
    font-size:clamp(2.2rem, 4vw, 5rem);
    font-weight:700;
    line-height: 1!important;
    text-shadow:
  0 2px 4px rgba(0, 0, 0, 0.35),
  0 6px 18px rgba(0, 0, 0, 0.28);
    color:#fff;
    margin-bottom:1.2rem;
    max-width:20ch;
    text-wrap:balance;
}

.hero-title span{
 font-size:clamp(1.5rem, 2vw, 3rem);
 font-weight:500;
line-height: .8;


}
.hero-lead{
    font-family:var(--font-display);
    font-weight:500; font-size:clamp(1.15rem,1.6vw,1.35rem);
    color:#bcd3c7;
    margin-bottom:1rem;
}
.hero-copy{
    color:rgba(255,255,255,.86);
    font-size:1.125rem;
    max-width:54ch;
    margin-bottom:2rem;
}
.hero-actions{ margin-top:.5rem; }

/* Pills de ubicaciones */
.hero-pills{ align-self:end; margin-top:0rem; }
.pill-loc{
    display:inline-block;
    font-family:var(--font-display); font-weight:500; font-size:1rem;
    color:var(--accent);
    background:rgba(255,255,255,.12);
    border:1px solid var(--accent);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    padding:.55rem 1.15rem;
    border-radius:999px;
    margin:0 .55rem .6rem 0;
    transition:background .25s ease, border-color .25s ease;
}
.pill-loc:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); }

/* Chips */
.chip{
    display:inline-block;
    font-family:var(--font-display);
    font-weight:500; font-size:1rem;
    padding:.6rem 1.05rem;
    border-radius:999px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 10px 30px -14px rgba(31,33,36,.4);
}
.chip--float{
    position:absolute; left:1rem; bottom:1rem; right:1rem;
    text-align:center;
}
.chip--onimg{
    position:absolute; left:1.1rem; bottom:1.1rem;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(6px);
}

/* ---------- Comunidad médica (red de recomendaciones) ---------- */
.recom-mark{
    width:64px; height:64px; border-radius:18px;
    background:var(--accent-tint);
    color:var(--accent);
    display:grid; place-items:center;
    font-size:1.5rem;
    margin-bottom:1.6rem;
}
.recom-copy{
    color:var(--ink-soft);
    font-size:1.15rem; max-width:56ch;
}
.recom-image{
    margin:1rem 0 0;
    width:100%;
}
.recom-image img{
    width:100%;
    height:auto;
    
}

/* ---------- Bento beneficios ---------- */
.beneficios{
    background-image: url(images/fondo.png);
    background-color: var(--tint);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}
.card-b{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:1.9rem;
    height:100%;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-b:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:transparent; }

.card-b__icon{
    width:52px; height:52px; border-radius:14px;
    background:var(--accent-tint); color:var(--accent);
    display:grid; place-items:center;
    font-size:1.25rem; margin-bottom:1.25rem;
}
.card-b__title{
    font-size:1.3rem; font-weight:600; margin-bottom:.55rem;
}
.card-b__text{ color:var(--ink-soft); font-size:1.0625rem; }

/* Card destacada */
.card-b--feature{
    background:var(--accent-tint);
    border-color:transparent;
    padding:2.3rem;
}
.card-b--feature .card-b__icon{ background:var(--accent); color:#fff; }
.card-b--feature .card-b__title{ font-size:1.6rem; }
.card-b__foot{ margin-top:1.5rem; }
.tag{
    display:inline-block;
    font-family:var(--font-display); font-weight:500; font-size:1rem;
    background:var(--surface); color:var(--ink);
    padding:.4rem .85rem; border-radius:999px;
    margin:0 .4rem .5rem 0;
}

.card-b--wide{ background:var(--ink); border-color:transparent; }
.card-b--wide .card-b__icon{ background:rgba(255,255,255,.08); color:var(--accent); }
.card-b--wide .card-b__title{ color:#fff; }
.card-b--wide .card-b__text{ color:rgba(255,255,255,.66); }

.card-b--img{ padding:0; overflow:hidden; border:none; }
.card-b--img img{ width:100%; height:100%; object-fit:cover; min-height:220px; }

/* ---------- Galería swiper ---------- */
.gallery-nav{ display:inline-flex; gap:.6rem; }
.nav-round{
    width:52px; height:52px; border-radius:999px;
    border:1.5px solid var(--line); background:var(--surface);
    color:var(--ink); font-size:1.05rem;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-round:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.section--tint .nav-round{ background:transparent; }

.gallery-wrap{ padding-left:clamp(1rem,5vw,6rem); }
.gallery-swiper{ overflow:visible; }
.gallery-card{
    position:relative; margin:0;
    border-radius:var(--radius-md); overflow:hidden;
    box-shadow:var(--shadow-card);
}
.gallery-card img{ width:100%; aspect-ratio:7/5; object-fit:cover; }

.gallery-pagination{ position:static; margin-top:2rem; text-align:center; }
.gallery-pagination .swiper-pagination-bullet{
    width:9px; height:9px; background:var(--ink); opacity:.2; transition:width .3s ease, opacity .3s ease;
}
.gallery-pagination .swiper-pagination-bullet-active{ width:28px; border-radius:999px; opacity:1; background:var(--accent); }

/* ---------- Entorno profesional ---------- */
.entorno-grid{ margin-top:1rem; }
.feature-img{ margin:0; }
.feature-img__frame{
    border-radius:var(--radius-md); overflow:hidden; max-width: 100%;
}
.feature-img__frame img{ width:100%;  transition:transform .6s ease; }
.feature-img:hover .feature-img__frame img{ transform:scale(1.05); }
.feature-img__cap{
    font-family:var(--font-display); font-weight:500;
    font-size:1.3rem; color:var(--ink);
    margin-top:1.1rem; padding-left:.2rem;
}
@media (min-width:768px){
    .feature-img--up{ transform:translateY(-2rem); }
}

/* ---------- Testimonios ---------- */
.testi-head{ margin-bottom:clamp(2rem, 4vw, 3rem); }
.testi-head .section-title{ max-width:18ch; }

.testimonial-swiper{ padding-bottom:.5rem; overflow:visible; }
.quote-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:clamp(1.8rem,3vw,2.6rem);
    height:100%;
    margin:0;
}
.quote-mark{
    display:inline-grid; place-items:center;
    width:48px; height:48px; border-radius:14px;
    background:var(--accent-tint); color:var(--accent);
    font-size:1.2rem; margin-bottom:1.3rem;
}
.quote-text{
    font-family:var(--font-body); font-weight:400;
    font-size:1.0625rem;
    line-height:1.6; color:var(--ink); margin-bottom:1.6rem;
}
.quote-author{ display:flex; align-items:center; gap:1rem; }
.quote-avatar{
    width:52px; height:52px; border-radius:999px;
    background:var(--ink); color:#fff;
    display:grid; place-items:center;
    font-family:var(--font-display); font-weight:600; font-size:1.05rem;
    flex:0 0 auto;
}
.quote-name{ font-family:var(--font-display); font-weight:600; font-size:1.125rem; color:var(--ink); line-height:1.3; }
.quote-name em{ display:block; font-style:normal; font-weight:400; font-size:1rem; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-aside{ color:var(--ink-soft); font-size:1.0625rem; margin:1.3rem 0 1.8rem; max-width:36ch; }
.faq-accordion .accordion-item{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md)!important;
    margin-bottom:1rem;
    overflow:hidden;
}
.faq-accordion .accordion-button{
    font-family:var(--font-display); font-weight:600;
    font-size:1.15rem; color:var(--ink);
    background:transparent; padding:1.4rem 1.6rem;
    box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){ color:var(--accent); background:transparent; }
.faq-accordion .accordion-button::after{ display:none; }
.acc-icon{
    margin-left:auto;
    width:38px; height:38px; border-radius:999px;
    background:var(--tint); color:var(--ink);
    display:grid; place-items:center; flex:0 0 auto;
    transition:transform .3s ease, background .3s ease, color .3s ease;
}
.faq-accordion .accordion-button:not(.collapsed) .acc-icon{
    background:var(--accent); color:#fff; transform:rotate(135deg);
}
.faq-accordion .accordion-body{
    padding:0 1.6rem 1.5rem;
    color:var(--ink-soft); font-size:1.0625rem;
}

/* ---------- Contacto ---------- */
.contact-section{ position:relative; }
.contact-bg{
    position:absolute; inset:0; z-index:0;
    background-image:
        linear-gradient(rgba(31,33,36,.48), rgba(31,33,36,.58)),
        url('images/contacto.jpg');
    background-size:120% auto;
    background-position:center;
    filter:blur(3px);
    clip-path:inset(0);
}
.contact-section .container{ position:relative; z-index:1; }
.contact-shell{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 40px 90px -40px rgba(31,33,36,.55);
}
.contact-info{
    background:var(--ink); color:#fff;
    padding:clamp(2.2rem,4vw,3.4rem);
    height:100%;
}
.contact-title{ color:#fff; font-weight:600; font-size:clamp(1.55rem,2.4vw,2.1rem); margin-bottom:2.2rem; }

.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{ display:flex; gap:1rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.1); }
.contact-list li:first-child{ border-top:none; padding-top:0; }
.ci-ico{
    width:44px; height:44px; border-radius:12px; flex:0 0 auto;
    background:rgba(255,255,255,.08); color:var(--accent);
    display:grid; place-items:center; font-size:1.1rem;
}
.ci-text{ font-size:1.0625rem; line-height:1.45; }
.ci-text em{ display:block; font-style:normal; font-size:1rem; color:#a9c1b3; letter-spacing:.04em; margin-bottom:.1rem; }
.ci-text small{ display:block; font-size:1rem; color:rgba(255,255,255,.55); margin-top:.15rem; }

.contact-form-wrap{ padding:clamp(2.2rem,4vw,3.4rem); }
.contact-form .form-label{
    font-family:var(--font-display); font-weight:500;
    font-size:1rem; color:var(--ink); margin-bottom:.45rem;
}
.contact-form .form-control,
.contact-form .form-select{
    background:var(--bg);
    border:1.5px solid var(--line);
    border-radius:var(--radius-sm);
    padding:.85rem 1.05rem;
    font-size:1.0625rem; color:var(--ink);
    transition:border-color .2s ease, background .2s ease;
}
.contact-form .form-control::placeholder{ color:#a4a6ab; }
.contact-form .form-control:focus,
.contact-form .form-select:focus{
    border-color:var(--accent);
    background:var(--surface);
    box-shadow:0 0 0 4px var(--accent-tint);
}
.btn-lg-cta{ margin-top:.4rem; }

/* ---------- Footer ---------- */
.site-footer{
    background:var(--ink); color:#fff;
    padding:clamp(3.5rem,6vw,5rem) 0 2.5rem;
}
.footer-top{ padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand{
    display:inline-flex; align-items:center; gap:.65rem;
    font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:#fff;
}
.footer-brand img {
    filter: invert(1);
}
.footer-brand em{ font-style:normal; font-weight:400; color:rgba(255,255,255,.6); font-size:.92em; }
.footer-tag{ color:rgba(255,255,255,.6); margin-top:1rem; max-width:40ch; }

.footer-nav{ list-style:none; padding:0; margin:0; }
.footer-nav li{ display:inline-block; margin-left:1.6rem; }
.footer-nav li:first-child{ margin-left:0; }
.footer-nav a{ color:rgba(255,255,255,.72); font-family:var(--font-display); font-weight:500; font-size:1.0625rem; transition:color .2s ease; }
.footer-nav a:hover{ color:var(--accent); }

.footer-bottom{ padding-top:2rem; }
.footer-copy,.footer-credit{ color:rgba(255,255,255,.55); font-size:1rem; margin:0; }
.footer-credit a{ color:var(--accent); font-weight:500; }
.footer-credit a:hover{ color:#fff; }

/* ---------- Responsive tweaks ---------- */
@media (max-width:991.98px){
    .site-nav .navbar-collapse{
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius-md);
        padding:1rem 1.2rem;
        margin-top:.8rem;
    }
    .site-nav .nav-item{ margin:.15rem 0; }
    .site-nav .btn-ink{ width:100%; margin-top:.4rem; }
    .footer-nav li{ margin:0 1.4rem .3rem 0; }
    .footer-nav{ margin-top:1.4rem; }
    .footer-bottom{ text-align:center; }
    .footer-bottom .text-md-end{ text-align:center!important; }
    .gallery-nav{ margin-top:1.2rem; }
}

@media (max-width:575.98px){
    .hero-actions .col-sm-auto{ width:100%; }
    .card-b--feature .card-b__title{ font-size:1.4rem; }
}

/* Motion reducido */
@media (prefers-reduced-motion:reduce){
    *{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}