/* ====================================================================
   Landing pública — Centro Bariátrico
   Estilo: azul/teal médico moderno · mobile-first
   Todo va scoped bajo #home-landing para no contaminar el resto del sitio.
   ==================================================================== */

:root{
    --cb-teal:#0d9488;
    --cb-teal-light:#2dd4bf;
    --cb-blue:#155e75;
    --cb-deep:#0a2e3b;
    --cb-ink:#0f172a;
    --cb-muted:#64748b;
    --cb-line:rgba(255,255,255,.16);
}

/* Anula el padding-top global (navbar-top-fixed.css) que dejaba una franja
   blanca sobre la landing y reservaba espacio para el navbar fijo del sitio. */
body#section_home{ margin:0; padding-top:0; background:var(--cb-deep); }

#home-landing *{ box-sizing:border-box; }
#home-landing{
    position:relative;
    font-family:'Poppins','Roboto',-apple-system,Segoe UI,sans-serif;
    color:#fff;
    line-height:1.55;
    overflow-x:hidden;
}
#home-landing a{ text-decoration:none; }
#home-landing ul{ list-style:none; margin:0; padding:0; }

/* ── Navbar ─────────────────────────────────────────────── */
.cb-nav{
    position:absolute; top:0; left:0; right:0; z-index:10;
    padding:18px 0;
}
.cb-nav__inner{
    width:min(1180px,92%); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cb-nav__logo{
    height:38px; width:auto; display:block;
    /* el logo es gris oscuro → lo volvemos blanco para el fondo oscuro */
    filter:brightness(0) invert(1);
}
.cb-nav__access{
    display:inline-flex; align-items:center; gap:8px;
    color:#e2f4f1; font-size:.82rem; font-weight:500;
    padding:8px 16px; border:1px solid var(--cb-line); border-radius:999px;
    background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
    transition:all .2s ease;
}
.cb-nav__access:hover{ background:rgba(255,255,255,.16); color:#fff; }
.cb-nav__access i{ font-size:.95rem; opacity:.85; }

/* ── Hero ───────────────────────────────────────────────── */
.cb-hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    padding:120px 0 70px;
    isolation:isolate;
}
.cb-hero__bg{
    position:absolute; inset:0; z-index:-2;
    background:
        radial-gradient(1100px 600px at 80% -10%, rgba(45,212,191,.30), transparent 60%),
        radial-gradient(900px 700px at 0% 110%, rgba(8,145,178,.28), transparent 55%),
        linear-gradient(135deg, #0f766e 0%, #155e75 52%, #0c3a52 100%);
}
.cb-hero__bg::after{
    /* patrón de puntos sutil */
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size:26px 26px;
    -webkit-mask-image:linear-gradient(to bottom, #000, transparent 80%);
    mask-image:linear-gradient(to bottom, #000, transparent 80%);
    opacity:.6;
}
.cb-hero__content{
    width:min(1180px,92%); margin:0 auto;
    max-width:860px;
    text-align:center;
}
.cb-hero__eyebrow{
    text-transform:uppercase; letter-spacing:.18em;
    font-size:.74rem; font-weight:600; color:var(--cb-teal-light);
    margin:0 0 14px;
}

/* ── Banner del cirujano ────────────────────────────────── */
.cb-banner{
    position:relative; width:100%;
    aspect-ratio:1280/330;
    margin:0 auto 40px;
    border-radius:20px; overflow:hidden;
    text-align:left;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.cb-banner__photo{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:left center;
}
.cb-banner__overlay{
    position:absolute; inset:0;
    background:
        linear-gradient(90deg, transparent 32%, rgba(10,46,59,.12) 56%, rgba(10,46,59,.80) 100%),
        linear-gradient(0deg, rgba(10,46,59,.82) 0%, transparent 44%);
}
.cb-banner__certs{
    position:absolute; top:18px; right:20px; z-index:2;
    display:flex; align-items:center; gap:14px;
}
.cb-banner__logos{
    height:42px; background:#fff; padding:7px 12px;
    border-radius:10px; box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
}
.cb-banner__seal{ height:60px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.cb-banner__id{
    position:absolute; right:24px; bottom:18px; z-index:2;
    text-align:right; color:#fff; max-width:72%;
}
.cb-banner__id h2{
    margin:0; font-weight:600; line-height:1.15;
    font-size:clamp(1.15rem,2.3vw,1.7rem);
}
.cb-banner__id p{
    margin:5px 0 0; font-size:clamp(.78rem,1.4vw,.92rem);
    color:rgba(255,255,255,.86);
}
.cb-hero__title{
    font-size:clamp(2.6rem,7vw,4.4rem);
    font-weight:700; line-height:1.04; margin:0;
    letter-spacing:-.02em;
}
.cb-hero__subtitle{
    font-size:clamp(1.05rem,2.4vw,1.35rem);
    font-weight:500; color:#cfeeea; margin:10px 0 22px;
}
.cb-hero__lead{
    font-size:clamp(1rem,1.6vw,1.12rem);
    color:rgba(255,255,255,.85); max-width:640px; margin:0 auto 26px;
}
.cb-hero__chips{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 30px;
}
.cb-hero__chips li{
    font-size:.82rem; font-weight:500;
    padding:7px 14px; border-radius:999px;
    background:rgba(255,255,255,.08); border:1px solid var(--cb-line);
    color:#e7f6f4;
}

/* ── Botones CTA ────────────────────────────────────────── */
.cb-hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:28px 0 42px; }
.cb-btn{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.98rem; font-weight:600;
    padding:14px 26px; border-radius:12px;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.cb-btn i{ font-size:1.05rem; }
.cb-btn--primary{
    background:var(--cb-teal-light); color:#04332e;
    box-shadow:0 12px 30px -10px rgba(45,212,191,.7);
}
.cb-btn--primary:hover{ transform:translateY(-2px); background:#5eead4; color:#04332e; }
.cb-btn--ghost{
    background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
}
.cb-btn--ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ── Indicadores de confianza ───────────────────────────── */
.cb-hero__trust{
    display:flex; flex-wrap:wrap; justify-content:center; gap:14px 28px;
    padding-top:28px; border-top:1px solid var(--cb-line);
}
.cb-hero__trust li{
    display:flex; align-items:center; gap:10px;
    font-size:.86rem; color:rgba(255,255,255,.82);
}
.cb-hero__trust i{ color:var(--cb-teal-light); font-size:1rem; }

/* ── Footer ─────────────────────────────────────────────── */
.cb-foot{ background:var(--cb-deep); }
.cb-foot__inner{
    width:min(1180px,92%); margin:0 auto;
    display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
    padding:56px 0 36px;
}
.cb-foot__logo{ height:34px; filter:brightness(0) invert(1); margin-bottom:14px; }
.cb-foot__brand p{ color:rgba(255,255,255,.6); font-size:.9rem; max-width:320px; }
.cb-foot__col h3{
    font-size:.8rem; text-transform:uppercase; letter-spacing:.12em;
    color:var(--cb-teal-light); margin:0 0 16px; font-weight:600;
}
.cb-foot__list li{ margin-bottom:12px; }
.cb-foot__list a, .cb-foot__list span{
    display:inline-flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.78); font-size:.9rem;
}
.cb-foot__list a:hover{ color:var(--cb-teal-light); }
.cb-foot__list i{ color:var(--cb-teal-light); width:16px; text-align:center; }
.cb-foot__social{ display:flex; gap:12px; }
.cb-foot__social a{
    width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.08); color:#fff; font-size:1rem;
    transition:background .2s ease, transform .2s ease;
}
.cb-foot__social a:hover{ background:var(--cb-teal); transform:translateY(-2px); }
.cb-foot__bar{
    border-top:1px solid rgba(255,255,255,.08);
    padding:18px 0; text-align:center;
}
.cb-foot__bar span{ color:rgba(255,255,255,.5); font-size:.82rem; }

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width:767px){
    .cb-hero{ padding:104px 0 56px; }
    .cb-nav__access span{ display:none; }
    .cb-nav__access{ padding:9px 12px; }
    .cb-hero__cta .cb-btn{ flex:1 1 auto; justify-content:center; }
    .cb-foot__inner{ grid-template-columns:1fr; gap:30px; text-align:left; }

    .cb-banner{ aspect-ratio:16/11; margin-bottom:32px; }
    .cb-banner__certs{ top:12px; right:12px; gap:9px; }
    .cb-banner__logos{ height:32px; padding:6px 9px; }
    .cb-banner__seal{ height:44px; }
    .cb-banner__id{ right:14px; bottom:13px; max-width:60%; }
}
@media screen and (max-width:556px){
    .cb-hero__trust{ gap:12px 18px; }
    .cb-hero__trust li{ font-size:.8rem; }
}