/* home.css — Homepage selectora de tratamiento
   Hereda tokens, botones y footer de ../web-bariatrica/landing.css.
   Escala de espaciado del instructivo: 8 / 16 / 24 / 32 / 48 / 80 / 96. */

/* Barra superior */
.bl-top{background:var(--navy-800);position:sticky;top:0;z-index:50}
.bl-top__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.bl-top__brand img{height:44px;width:auto}
.bl-top__right{display:flex;align-items:center;gap:24px}
.bl-home a.bl-top__tel:not(.bl-btn){display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff}
.bl-home a.bl-top__tel:not(.bl-btn):hover{color:var(--blue-500)}
.bl-top__tel svg{width:19px;height:19px}
.bl-top__wa{padding:13px 20px;font-size:16px}

/* Bienvenida */
.bl-welcome{background:linear-gradient(115deg,#0A2742 0%,#143A63 100%);color:#fff;padding:80px 0 80px;text-align:center}
.bl-welcome .bl-eyebrow{color:rgba(255,255,255,.72);font-size:14px;letter-spacing:.16em}
.bl-welcome h1{margin-top:24px;font-size:clamp(42px,4vw,58px);line-height:1.06;letter-spacing:-.02em;color:#fff}
.bl-welcome h1 em{font-style:normal;color:var(--blue-500)}
.bl-welcome__sub{max-width:66ch;margin:24px auto 0;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:rgba(255,255,255,.85)}

/* Tarjetas de elección: suben sobre la bienvenida */
.bl-choose{padding:0 0 80px;background:var(--surface-2)}
.bl-choose .bl-wrap{padding-top:0}
.bl-choose__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.bl-opt{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.bl-opt:hover{box-shadow:var(--shadow-float);transform:translateY(-3px)}
.bl-opt__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.bl-opt__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.bl-opt:hover .bl-opt__media img{transform:scale(1.03)}
.bl-opt__n{position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:50%;background:rgba(10,39,66,.82);backdrop-filter:blur(4px);color:#fff;font-size:15px;font-weight:700;display:grid;place-items:center;letter-spacing:.02em}
.bl-opt__body{padding:32px 24px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
.bl-opt__body h2{font-size:25px;line-height:1.25;color:var(--navy-800);letter-spacing:-.01em;min-height:2.5em}
.bl-opt__body p{font-size:16px;line-height:1.6;color:var(--body);flex:1;text-wrap:pretty}
.bl-opt__body .bl-btn{font-size:16px;padding:15px 18px;justify-content:center;text-align:center}
.bl-opt__body .bl-btn--wa{font-size:15px}

/* Franja de respaldo */
.bl-hstrip{background:#fff;border-block:1px solid var(--line);padding:48px 0}
.bl-hstrip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.bl-hstrip__grid div{display:flex;flex-direction:column;gap:8px;padding-left:24px;border-left:1px solid var(--line)}
.bl-hstrip__grid div:first-child{border-left:0;padding-left:0}
.bl-hstrip svg{width:26px;height:26px;color:var(--teal-700)}
.bl-hstrip b{font-size:19px;color:var(--navy-800)}
.bl-hstrip span{font-size:15px;line-height:1.5;color:var(--body)}

/* Orientación */
.bl-hhelp{background:var(--teal-800);color:#fff;padding:48px 0}
.bl-hhelp__in{display:flex;align-items:center;justify-content:space-between;gap:48px}
.bl-hhelp h2{font-size:clamp(25px,2.1vw,30px);line-height:1.25;color:#fff}
.bl-hhelp h2 em{font-style:normal;color:#8FD9CE}
.bl-hhelp p{margin-top:8px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86);max-width:60ch}
.bl-hhelp .bl-btn{flex:none}

/* ── 900–1279 ──────────────────────────────────────────── */
@media (min-width:900px) and (max-width:1279px){
  .bl-home .bl-wrap{padding-inline:32px}
  .bl-welcome{padding:64px 0 80px}
  .bl-choose__grid{gap:24px;margin-top:32px}
  .bl-opt__body{padding:24px 20px}
  .bl-opt__body h2{font-size:22px;min-height:2.5em}
  .bl-opt__body .bl-btn{font-size:15px;padding:14px 12px;gap:8px}
  .bl-opt__body .bl-btn--wa{font-size:14px;white-space:nowrap}
  .bl-opt__body .bl-btn svg{width:20px;height:20px}
  .bl-hstrip__grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .bl-hstrip__grid div:nth-child(3){border-left:0;padding-left:0}
}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width:899px){
  .bl-home .bl-wrap{padding-inline:20px}
  .bl-top__in{padding-block:12px}
  .bl-top__brand img{height:36px}
  .bl-top__tel span,.bl-top__tel{font-size:15px}
  .bl-top__right{gap:12px}
  .bl-top__wa{display:none}
  /* landing.css oculta el globo bajo 900px porque su landing tiene barra inferior;
     esta homepage no la tiene, así que el globo es su único acceso fijo a WhatsApp. */
  .bl-fab{display:grid}
  .bl-welcome{padding:48px 0 80px;text-align:left}
  .bl-welcome h1{font-size:36px;margin-top:16px}
  .bl-welcome__sub{font-size:17px;margin:16px 0 0;max-width:none}
  .bl-choose{padding-bottom:48px}
  .bl-choose__grid{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .bl-opt__media{aspect-ratio:16/10}
  .bl-opt__body{padding:24px 20px}
  .bl-opt__body h2{font-size:23px;min-height:0}
  .bl-hstrip{padding:32px 0}
  .bl-hstrip__grid{grid-template-columns:1fr;gap:24px}
  .bl-hstrip__grid div{border-left:0;padding-left:0}
  .bl-hhelp{padding:32px 0}
  .bl-hhelp__in{flex-direction:column;align-items:stretch;gap:24px}
  .bl-hhelp .bl-btn{width:100%;justify-content:center;font-size:15px}
}