/* HSJM Citas 2026 · sistema visual ligero, centrado en accesibilidad y claridad. */
:root {
 --azul:#102b46; --azul-2:#163c58; --azul-3:#147a92;
 --cian:#18a4ad; --glow:rgba(21,156,169,.14);
 --tinta:#223a50; --tinta-2:#5d7386; --linea:#dce7ed;
 --fondo-claro:#eff6f8; --radio:16px;
 --sombra:0 10px 30px rgba(18,46,72,.075);
 --sombra-alta:0 24px 60px rgba(18,46,72,.12);
}
body { background:#f2f7fa; color:#24394d; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
body::before,body::after { display:none !important; }
.aurora,.tilt::before { display:none !important; }
.encabezado { min-height:90px; background:linear-gradient(110deg,#102c46,#15435a); border-bottom:1px solid rgba(255,255,255,.12); padding:13px clamp(16px,3.5vw,56px); gap:17px; box-shadow:0 4px 28px rgba(7,36,54,.13); }
.encabezado .logos { gap:8px; }
.encabezado .logo-enlace { display:grid; place-items:center; width:54px; height:54px; padding:4px; border-radius:13px; background:#fff; }
.encabezado img.logo { width:44px; height:44px; box-shadow:none; object-fit:contain; border-radius:8px; }
.encabezado .titulos small { color:#7ed3d7; font-size:9px; letter-spacing:.105em; font-weight:800; }
.encabezado .titulos strong { font-size:16px; font-weight:760; letter-spacing:-.025em; }
.encabezado .titulos span { font-size:11px; color:#bfd7e2; }
.nav { gap:4px; }
.nav a,.nav button.nav-btn { font-size:12px; font-weight:650; padding:10px 12px; min-height:40px; border-radius:9px; }
.nav a[aria-current="page"] { background:rgba(255,255,255,.14); }
.nav a::after { display:none; }
.nav a:hover { background:rgba(255,255,255,.08); }
#contenido { width:min(100% - 36px,1140px); margin:0 auto; padding:40px 0 72px; }
.hero { color:#16364f; text-align:left; padding:0 0 26px; }
.hero h1 { color:#102f49; text-shadow:none; letter-spacing:-.05em; font-weight:830; line-height:1.1; }
.hero p { color:#667d90; max-width:680px; margin:0; }
.publico-hero { background:linear-gradient(104deg,#e4f5f4 0%,#edf7f8 58%,#dceef4 100%); border:1px solid #d1e9e8; border-radius:24px; min-height:296px; padding:clamp(28px,4.2vw,52px); margin-bottom:26px; position:relative; overflow:hidden; }
.publico-hero::after { content:""; position:absolute; inset:0 0 0 auto; width:40%; background:linear-gradient(90deg,rgba(234,246,247,0.2),rgba(19,64,85,.22)),url('/static/images/fachada_hsjm_limpia.jpg') center / cover; mask-image:linear-gradient(90deg,transparent,#000 65%); opacity:.38; pointer-events:none; }
.hero-contenido { position:relative; z-index:1; max-width:730px; }
.hero-kicker,.sobretitulo { color:#0b8391; font-size:10px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.hero-kicker { display:inline-flex; gap:9px; align-items:center; padding:9px 12px; background:rgba(255,255,255,.72); border:1px solid #c7e5e4; border-radius:999px; }
.punto-vivo { display:inline-block; width:8px; height:8px; border-radius:50%; background:#129f91; box-shadow:0 0 0 4px rgba(18,159,145,.13); }
.publico-hero h1 { font-size:clamp(33px,4.1vw,52px); max-width:630px; margin:23px 0 16px; }
.publico-hero h1 em { font-style:normal; color:#0a8c96; }
.publico-hero p { max-width:590px; line-height:1.65; font-size:15px; color:#567386; }
.hero-beneficios { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.hero-beneficios span { display:inline-flex; padding:8px 12px; color:#1c6e73; border:1px solid #c3e8e2; border-radius:999px; background:rgba(255,255,255,.62); font-size:11px; font-weight:750; }
.hero-compacta { padding:36px 4px 30px; }
.hero-compacta h1 { font-size:clamp(28px,3.5vw,42px); margin:9px 0 12px; }
.hero-compacta p { font-size:15px; }
.superficie { background:#fff; box-shadow:0 15px 50px rgba(18,46,72,.07); border:1px solid #e1e9ee; border-radius:20px; padding:clamp(20px,3.2vw,38px); }
.formulario-cita { padding-top:26px; }
.formulario-intro { border-bottom:1px solid #e5edf2; padding-bottom:20px; margin-bottom:24px; }
.formulario-intro h2 { font-size:clamp(21px,2.6vw,28px); color:#123650; letter-spacing:-.035em; margin:6px 0; }
.formulario-intro p { font-size:13px; color:#708597; margin:0; }
.pasos::before { height:3px; background:#dbe7eb; }
.pasos::after { height:3px; background:#0d99a4; box-shadow:none; }
.pasos .bolita { width:43px; height:43px; border:2px solid #d4e3e9; background:#f9fbfc; box-shadow:none; }
.pasos li.hecho .bolita { background:#117f8d; border-color:#117f8d; }
.pasos li.actual .bolita { background:#eaf8f7; border-color:#178fa0; color:#107c88; box-shadow:0 0 0 3px rgba(31,163,171,.1); transform:none; }
.pasos li.actual .bolita::after { display:none; }
.tarjeta,.hoy-card { background:#fff; border:1px solid #dfebf0; border-radius:14px; padding:18px; box-shadow:0 4px 12px rgba(18,46,72,.035); transform:none !important; }
.tarjeta.tilt,.tilt { transform:none !important; }
.tarjeta:hover { border-color:#9dcfd8; box-shadow:0 12px 25px rgba(18,46,72,.09); }
.tarjeta[aria-pressed="true"] { background:#ecf8f8; border-color:#198fa0; box-shadow:0 0 0 2px rgba(25,143,160,.12); }
.btn { border-radius:11px; min-height:46px; font-size:14px; background:#134a67; box-shadow:none; transition:background .16s ease,box-shadow .16s ease; transform:none !important; }
.btn:hover { background:#185b78; transform:none !important; box-shadow:0 8px 20px rgba(21,73,103,.16); }
.btn::before,.btn::after { display:none; }
.btn-sec { background:white; color:#17516e; border:1px solid #cedfe8; }
.btn-sec:hover { background:#f0f8fa; }
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=search],input[type=date],select,textarea { min-height:48px; border:1.5px solid #d6e4ea; border-radius:10px; font-size:15px; }
input:focus,select:focus,textarea:focus { box-shadow:0 0 0 3px rgba(21,156,169,.14); border-color:#178fa0; }
.pie { color:#627a8c; border-top:1px solid #dce9ef; background:#edf4f7; padding:30px 20px; font-size:12px; line-height:1.7; }
.pie strong { color:#143e59; }
.pie a { color:#0a7385; font-weight:750; }
.acciones { gap:12px; }
/* Preserve dark contrast for TV cartelera, which uses its own fullscreen layout. */
body.cartelera-body { background:#102b46; }
body.cartelera-body::before,body.cartelera-body::after { display:none; }
@media (max-width:850px) {
  .encabezado { min-height:76px; padding:12px 16px; }
  .encabezado .titulos strong { font-size:13px; }
  .encabezado .titulos small { font-size:8px; }
  .encabezado .logo-enlace { width:44px; height:44px; }
  .encabezado img.logo { width:36px; height:36px; }
  .nav { width:100%; justify-content:space-between; gap:5px; border-top:1px solid rgba(255,255,255,.1); padding-top:8px; }
  .nav a,.nav button.nav-btn { font-size:11px; padding:9px 7px; }
  #contenido { width:min(100% - 24px,1140px); padding:20px 0 48px; }
  .publico-hero { min-height:0; padding:27px 22px; }
  .publico-hero::after { opacity:.13; width:100%; }
  .publico-hero h1 { font-size:clamp(28px,7vw,40px); }
  .hero-beneficios { margin-top:17px; }
}
@media (max-width:500px) {
 .encabezado .logo-enlace:nth-child(2) { display:none; }
 .encabezado .titulos { max-width:210px; }
 .publico-hero h1 { font-size:30px; }
 .hero-beneficios { gap:6px; }
 .hero-beneficios span { font-size:10px; padding:6px 9px; }
 .formulario-cita { padding:20px 16px; }
 .superficie { border-radius:15px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print { body {background:white;} .encabezado,.pie,.no-imprimir {display:none !important;} .superficie{box-shadow:none;border:0;} }

@media(max-width:500px) {
  .nav {display:grid;grid-template-columns: .88fr 1.25fr 1.4fr auto;gap:3px;width:100%;align-items:stretch;justify-content:stretch;}
  .nav a,.nav button.nav-btn {display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;line-height:1.25;font-size:10px;padding:7px 4px;white-space:normal;}
}