/* ═══════════════════════════════════════════════════════════
   INICIO ORIENTADO A LA COMPRA (oct 2026)
   Portada de las manillas, botón «Comprar» siempre a la vista y
   bloque destacado del Servicio de Asistencia Inteligente.
   Va en archivo aparte para poder revertirlo sin tocar index.css.
   Solo clases: la CSP del sitio no admite estilos en línea.
═══════════════════════════════════════════════════════════ */

[hidden]{display:none !important}

/* ── Portada ─────────────────────────────────────────────── */
.hero-c{max-width:740px}
.hero h1,.hero-sub{max-width:600px}
/* La frase «Conéctate con la vida» va abajo y al centro de la foto; con
   la portada nueva el texto es más largo y se montaba encima de los
   enlaces de la portada. */
.hero-tagline{display:none}
.hero-kicker{display:block;font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1.1rem}
.hero h1{font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.12;margin-bottom:1.2rem}
.hero-sub{max-width:520px;margin-bottom:1.2rem;color:var(--soft);line-height:1.75}
.hero-precio{font-size:var(--fs-sm);color:var(--txt);margin-bottom:1.5rem;letter-spacing:.02em}
.hero-precio strong{color:var(--gold);font-weight:700;font-size:1.15em}
/* «IVA incluido · envío a toda Colombia» en su propia línea, debajo de
   las dos cifras del «Desde» (index.js, pintarPrecioDesde). */
.precio-nota{display:block;font-size:.85em;color:var(--muted);margin-top:.25rem;letter-spacing:.02em}
.hero-mas{margin-top:1.6rem;font-size:var(--fs-xs);color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center}
.hero-mas a{color:var(--soft);border-bottom:1px solid rgba(201,165,53,.35);padding-bottom:1px}
.hero-mas a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ── Servicio destacado ──────────────────────────────────── */
.sai-dest{display:grid;grid-template-columns:1.05fr 1fr;background:var(--dcard);
  border:1px solid var(--dborder);border-radius:var(--r);overflow:hidden;position:relative}
.sai-dest::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.sai-dest-img{min-height:100%}
.sai-dest-img img{width:100%;height:100%;object-fit:cover;display:block}
.sai-dest-txt{padding:clamp(2rem,4vw,3.2rem)}
.sai-dest-txt h3{font-size:clamp(1.5rem,2.4vw,2rem);color:var(--txt);margin-bottom:1.4rem;line-height:1.25}
.sai-dest-lista{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-bottom:1.6rem}
.sai-dest-lista li{font-size:var(--fs-sm);color:var(--muted);line-height:1.7;
  padding-left:1.4rem;position:relative}
.sai-dest-lista li::before{content:'';position:absolute;left:0;top:.75em;width:.6rem;height:1px;background:var(--gold)}
.sai-dest-lista strong{color:var(--txt);font-weight:600}
.sai-dest-precio{font-size:var(--fs-sm);color:var(--txt);margin-bottom:1.4rem}
.sai-dest-precio strong{color:var(--gold);font-size:1.25em;font-weight:700}
.sai-dest-acts{display:flex;gap:1rem;flex-wrap:wrap}

/* ── Los demás servicios, en pequeño ─────────────────────── */
.srv-mas{margin-top:3rem}
.srv-mas-lbl{display:block;text-align:center;font-size:var(--fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.srv-mas-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.srv-mini{background:var(--dmid);border:1px solid var(--dborder);border-radius:var(--r);
  padding:1.4rem 1.6rem;cursor:pointer;transition:background .2s}
.srv-mini:hover{background:var(--dcard)}
.srv-mini .ostatus{margin-bottom:.7rem}
.srv-mini h3{font-size:1.25rem;color:var(--txt);margin-bottom:.4rem}
.srv-mini p{font-size:var(--fs-xs);color:var(--muted);line-height:1.7;margin-bottom:.7rem}

@media(max-width:900px){
  .sai-dest{grid-template-columns:1fr}
  .sai-dest-img{max-height:260px}
}
@media(max-width:600px){
  .srv-mas-grid{grid-template-columns:1fr}
  .sai-dest-acts{flex-direction:column}
  .sai-dest-acts .btn{text-align:center}
  .hero-acts .btn{width:100%;text-align:center}
}

/* El logo pasó de ir incrustado en base64 a /img/logo-senior.jpg, con
   width/height en la etiqueta para reservar su espacio. index.css fija
   solo uno de los dos lados en cada sitio; sin esto, el otro se quedaría
   con el valor de la etiqueta y el logo saldría estirado. */
.login-logo img,.fbrand img{width:auto}
.nos-brand .big-logo{height:auto}

/* El menú, el botón «Comprar» y la barra fija del celular están en
   encabezado-sitio.css, que comparten el inicio y /manilla-adulto-mayor. */