/* Hospital Sierra Madre · preview
 * Color sacado de su logo (HSM-logo, 1534 px, de su sitio) y de las fotos del edificio nuevo:
 *   azul       #0082cb  "SIERRA MADRE" y el brazo bajo de la cruz. 4.15:1 sobre blanco: solo texto grande (24 px+) y superficies.
 *   azul-tinta #00609a  el mismo azul, oscurecido para texto chico y enlaces: 6.7:1 sobre blanco.
 *   magenta    #cb299a  el brazo alto de la cruz. 4.9:1 sobre blanco: texto y botón de urgencias.
 *   magenta-2  #b5038d  la cara en sombra del brazo magenta. 6.3:1. Hover.
 *   cian       #00b3e3  el brazo derecho de la cruz. SOLO sobre noche (6.0:1), nunca sobre blanco (2.5:1).
 *   gris       #5a6771  "HOSPITAL". Texto secundario: 5.8:1 sobre blanco.
 *   noche      #142233  el muro oscuro detrás de la recepción (IMG_7901). Superficie oscura.
 *   muro       #f3f4f5  los muros y el piso claro del edificio nuevo.
 * Saira rotula: tiene las esquinas redondeadas y cuadradas de las letras del logo. Hind informa: es la letra de su sitio.
 * Radios a propósito: campos y botones 6 (como las puntas de la cruz), paneles 0, fotos 0.
 */
:root{
  --azul:#0082cb; --azul-tinta:#00609a; --magenta:#cb299a; --magenta-2:#b5038d; --cian:#00b3e3; --gris:#5a6771;
  --noche:#142233; --muro:#f3f4f5; --papel:#ffffff; --tinta:#16212c; --linea:#d9dee3;
  --rotula:"Saira", "Arial Narrow", Arial, sans-serif;
  --informa:"Hind", "Helvetica Neue", Arial, sans-serif;
  --m:clamp(16px, 4vw, 56px);
  --u:27px; /* el interlineado del cuerpo: 17 x 1.6 */
  --salida:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--informa)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--azul-tinta);outline-offset:3px;border-radius:2px}
.urgencias :focus-visible,.pie :focus-visible{outline-color:var(--cian)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-80px;z-index:20;background:var(--magenta-2);color:#fff;font-weight:700;padding:12px 16px;border-radius:6px;text-decoration:none}
.saltar:focus{top:12px}
mark{background:#d7ecf8;color:inherit;padding:0 1px;border-radius:2px}
h1,h2,h3{font-family:var(--rotula)}

.propuesta{display:block;background:#1d1d1f;color:#f0f0f0;font:400 12px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;padding:8px var(--m)}
.propuesta b{font-weight:700}

/* encabezado */
.cab{position:sticky;top:0;z-index:10;background:var(--papel);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--m);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;min-height:44px;flex:0 0 auto}
.marca img{height:46px;width:auto}
.cab nav{display:flex;gap:24px;font:500 16px/1 var(--informa)}
.cab nav a{text-decoration:none;color:var(--tinta);padding:12px 0}
.cab nav a:hover{color:var(--azul-tinta);text-decoration:underline;text-underline-offset:5px}
.tel-cab{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 18px 6px 8px;border-radius:999px;background:var(--magenta);color:#fff;text-decoration:none;flex:0 0 auto;transition:background .3s}
.tel-cab:hover{background:var(--magenta-2)}
.tel-cab .auricular{width:34px;height:34px;padding:8px;border-radius:50%;background:#fff;color:var(--magenta-2);flex:0 0 auto;transition:transform .4s var(--salida)}
.tel-cab:hover .auricular{transform:rotate(-14deg)}
.tel-cab small{display:block;font:600 12px/1.1 var(--informa)}
.tel-cab b{display:block;font:700 18px/1.15 var(--rotula);letter-spacing:.01em}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:6px;font:600 16px/1 var(--informa);text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.boton.lleno{background:var(--azul-tinta);color:#fff}
.boton.lleno:hover{background:var(--noche)}
.boton.linea{background:transparent;color:var(--azul-tinta);box-shadow:inset 0 0 0 1.5px var(--azul-tinta)}
.boton.linea:hover{background:var(--azul-tinta);color:#fff}
.boton.wa{background:#14612d;color:#fff}
.boton.wa:hover{background:#0d4a21}

/* portada: la fachada al atardecer, y el titular sobre un muro blanco */
.portada{background:var(--papel);overflow:hidden}
.portada .marco{overflow:hidden;height:clamp(300px,46vw,680px);background:var(--noche)}
.portada .marco img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;will-change:transform}
.portada .caja{position:relative;padding:0 var(--m) clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:start}
.portada h1{font-weight:700;font-size:clamp(40px,5.7vw,104px);line-height:.94;white-space:nowrap;letter-spacing:-.025em;margin:0;color:var(--azul-tinta);background:var(--papel);padding:clamp(14px,1.8vw,26px) clamp(16px,2vw,30px) 0 0;display:inline-block;justify-self:start;margin-top:clamp(-150px,-9vw,-48px);position:relative}
.portada .lado{padding-top:clamp(20px,2.4vw,36px)}
.portada h1 .l{display:block}
.portada h1 .l:nth-child(2),.portada h1 .l:nth-child(3){color:var(--azul)}
.sub{margin:0 0 20px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--tinta);max-width:42ch}
.sub b{font-weight:600;white-space:nowrap}
.buscar{display:flex;align-items:center;gap:12px;background:var(--muro);border-radius:6px;padding:8px 8px 8px 16px;border:1.5px solid var(--linea)}
.buscar:focus-within{border-color:var(--azul-tinta);outline:3px solid #b9dcf2;outline-offset:0}
.buscar label{flex:1;min-width:0}
.buscar label span{display:block;font:600 13px/1.2 var(--informa);color:var(--gris)}
.buscar input{width:100%;border:0;font:500 clamp(17px,1.6vw,20px)/1.3 var(--informa);color:var(--tinta);padding:4px 0;background:transparent}
.buscar input::placeholder{color:#6b7782}
.buscar input:focus{outline:none}
.atajos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.atajos button{font:500 15px/1 var(--informa);color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:6px;padding:0 14px;min-height:44px;cursor:pointer}
.atajos button:hover{border-color:var(--azul-tinta);color:var(--azul-tinta)}
.atajos button b{font-weight:600;color:var(--magenta-2);margin-left:6px}

/* urgencias: el dato que manda en un hospital */
.urgencias{background:var(--noche);color:#e8eef3;padding:clamp(56px,7vw,104px) var(--m)}
.urg-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px}
.urgencias h2{margin:0;font-weight:700;font-size:clamp(56px,11vw,180px);line-height:.86;letter-spacing:-.035em;color:#fff}
.siempre{margin:0;font:500 clamp(18px,1.6vw,22px)/1.4 var(--informa);color:#fff;display:flex;align-items:center;gap:12px}
.punto{width:12px;height:12px;border-radius:50%;background:var(--cian);flex:0 0 auto;box-shadow:0 0 0 0 rgba(0,179,227,.55)}
.mueve .punto{animation:late 2.4s ease-out infinite}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(0,179,227,.55)}70%{box-shadow:0 0 0 12px rgba(0,179,227,0)}100%{box-shadow:0 0 0 0 rgba(0,179,227,0)}}
.urg-tel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 clamp(24px,4vw,64px);margin:clamp(28px,4vw,56px) 0 0;border-top:1px solid rgba(255,255,255,.22)}
.numero{display:block;text-decoration:none;color:#fff;font:600 clamp(40px,6.4vw,104px)/1 var(--rotula);letter-spacing:-.02em;padding:18px 0 22px;border-bottom:1px solid rgba(255,255,255,.22);transition:color .3s}
.numero small{display:block;font:600 15px/1.2 var(--informa);letter-spacing:0;color:var(--cian);margin-bottom:10px}
.numero:hover{color:var(--cian)}
.numero.wa{font-size:clamp(32px,4.2vw,68px);align-self:end}
.urg-coche{margin:22px 0 0;max-width:62ch;font-size:clamp(17px,1.4vw,20px);color:#fff}
.urg-coche a{color:var(--cian);font-weight:600}
.urg-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px)}
.urgencias h3{margin:0 0 12px;font:600 clamp(22px,2vw,28px)/1.2 var(--rotula);color:#fff}
.signos,.hay{list-style:none;margin:0;padding:0}
.signos{columns:2;column-gap:28px}
.signos li,.hay li{break-inside:avoid;padding:8px 0;border-top:1px solid rgba(255,255,255,.14);line-height:1.4}
.ninos{margin:14px 0 0;color:#fff}
.u911{margin:22px 0 0;padding:14px 16px;background:#fff;color:var(--tinta);border-radius:6px;font-weight:600}
.u911 a{color:var(--magenta-2)}

/* la pieza: las dos puertas del edificio */
.llegar{padding:clamp(64px,8vw,120px) var(--m) clamp(56px,7vw,96px);background:var(--muro)}
.llegar-cab{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:24px;align-items:end;margin-bottom:clamp(28px,3vw,44px)}
.llegar h2{margin:0;font-weight:700;font-size:clamp(34px,4.8vw,76px);line-height:1;letter-spacing:-.02em;color:var(--azul-tinta);max-width:18ch}
.lead{margin:0;max-width:40ch;color:var(--gris)}
.lead a{color:var(--azul-tinta);font-weight:600}
.puertas{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0;border-top:3px solid var(--azul-tinta);border-bottom:1px solid var(--linea)}
.puerta{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num calle" "num que";column-gap:18px;align-items:center;text-align:left;background:transparent;border:0;color:var(--gris);padding:22px 4px;cursor:pointer;font:inherit;position:relative;min-height:44px}
.puerta .num{grid-area:num;font:700 clamp(54px,8vw,128px)/.86 var(--rotula);letter-spacing:-.04em;color:#a9b3bb;transition:color .4s}
.puerta .calle{grid-area:calle;align-self:end;font:600 clamp(18px,1.7vw,24px)/1.15 var(--rotula);color:var(--tinta)}
.puerta .que{grid-area:que;align-self:start;font:500 15px/1.3 var(--informa)}
.puerta::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:6px;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--salida)}
.puerta[aria-selected="true"] .num{color:var(--azul-tinta)}
.puerta[aria-selected="true"]::after{transform:none}
.puerta:hover .num{color:var(--azul)}
.puerta[data-puerta="constitucion"]{justify-self:end}
.edificio{display:flex;align-items:center;justify-content:center;padding:0 clamp(12px,3vw,48px)}
.edificio img{width:clamp(32px,3.4vw,52px);height:auto}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding-top:clamp(24px,3vw,40px)}
.foto-puerta{margin:0}
.foto-puerta img{width:100%;aspect-ratio:4/3;object-fit:cover}
.foto-puerta figcaption{font-size:15px;color:var(--gris);margin-top:8px}
.dir{margin:0;font:600 clamp(22px,2.2vw,30px)/1.25 var(--rotula);color:var(--tinta)}
.para{margin:10px 0 18px;max-width:46ch}
.ir{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.mapa{margin:0;background:#e2e6ea;border:1px solid var(--linea);min-height:300px}
.mapa iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
.si-no{margin:clamp(36px,4vw,56px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.si-no > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px;padding:13px 0;border-top:1px solid var(--linea)}
.si-no dt{font-weight:700}
.si-no dd{margin:0}
.mueve .panel.cambia .foto-puerta img{animation:cortina-l .7s var(--salida)}
@keyframes cortina-l{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* servicios */
.servicios{padding:clamp(64px,8vw,120px) var(--m)}
.servicios h2,.medicos h2,.aseguradoras h2,.resultados h2{margin:0;font-weight:700;font-size:clamp(38px,5.4vw,84px);line-height:.98;letter-spacing:-.025em;color:var(--azul-tinta)}
.lista-serv{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;counter-reset:s}
.lista-serv li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);gap:clamp(16px,3vw,48px);align-items:start;padding:20px 0;border-top:1px solid var(--linea)}
.lista-serv li:first-child{border-top:3px solid var(--azul-tinta)}
.lista-serv h3{margin:0;font-weight:600;font-size:clamp(28px,3.6vw,56px);line-height:1;letter-spacing:-.02em;color:var(--tinta)}
.lista-serv p{margin:10px 0 0;max-width:52ch;color:var(--gris)}
.lista-serv img{width:100%;aspect-ratio:16/10;object-fit:cover}
.lista-serv li:not(:has(img)){grid-template-columns:1fr}
.lista-serv li:not(:has(img)) h3{font-size:clamp(24px,2.6vw,38px)}

/* resultados */
.resultados{background:var(--azul-tinta);color:#fff;padding:clamp(56px,7vw,104px) var(--m);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.resultados h2{color:#fff}
.resultados .lead{color:#e6f1f8;margin-top:16px}
.pedir{margin:0}
.pedir > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.3);align-items:baseline}
.pedir dt{font-weight:500;color:#e6f1f8}
.pedir dd{margin:0}
.pedir a{color:#fff;font:600 clamp(19px,1.7vw,24px)/1.2 var(--rotula);text-decoration-thickness:1px;text-underline-offset:4px;display:inline-block;padding:6px 0;overflow-wrap:anywhere}
.resultados :focus-visible{outline-color:#fff}

/* médicos */
.medicos{padding:clamp(64px,8vw,120px) var(--m) 56px}
.titulo{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cuenta{font:500 16px/1.3 var(--informa);color:var(--gris);margin:0}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.filtros button{font:600 15px/1 var(--informa);background:#fff;color:var(--azul-tinta);border:1.5px solid var(--azul-tinta);border-radius:6px;padding:0 16px;min-height:44px;cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--azul-tinta);color:#fff}
.filtros .q2{flex:1 1 280px;display:flex;align-items:center;border-bottom:2px solid var(--azul-tinta);min-height:44px}
.filtros .q2 input{border:0;font:500 18px/1.3 var(--informa);width:100%;padding:6px 0;background:transparent;color:var(--tinta)}
.filtros .q2 input::placeholder{color:#6b7782}
.filtros .q2 input:focus{outline:none}
.motivo{margin:0 0 16px;font:500 18px/1.45 var(--informa);min-height:1.45em}
.motivo b{color:var(--azul-tinta)}
.motivo .serv{display:block;margin-top:6px;color:var(--gris);font-size:16px}
.motivo .serv b{color:var(--magenta-2)}
.esp-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:0 clamp(16px,3vw,40px);border-top:1px solid var(--linea);padding:14px 0 10px}
.esp-g:first-child{border-top:3px solid var(--azul-tinta)}
.esp-g h3{margin:6px 0;font:600 clamp(20px,1.8vw,26px)/1.15 var(--rotula);color:var(--tinta)}
.esp-g h3 small{display:block;font:500 14px/1.3 var(--informa);color:var(--gris);margin-top:4px}
.esp-g ul{list-style:none;margin:0;padding:0}
.c{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) auto;gap:2px 18px;align-items:center;padding:8px 0}
.c + .c{border-top:1px dashed var(--linea)}
.c .q{font-weight:600}
.c .q span{display:block;font-weight:400;font-size:15px;color:var(--gris)}
.c .u{color:var(--gris);font-size:15px}
.c .a{display:flex;gap:8px;justify-self:end}
.c .a .boton{font-size:15px;padding:0 16px;min-height:44px}
.c .a a.rec{color:var(--azul-tinta);text-decoration:underline;text-underline-offset:3px;padding:0 4px;min-height:44px;display:inline-flex;align-items:center;font-size:15px}
.vacio{padding:24px 0;font-size:18px}
.vacio a{color:var(--azul-tinta);font-weight:600}
.tambien{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--linea);max-width:80ch}
.tambien a{color:var(--azul-tinta);font-weight:600}
.fuente{font:400 14px/1.5 var(--informa);color:var(--gris);margin:16px 0 0;max-width:80ch}

/* aseguradoras: los nombres, como en su lista */
.aseguradoras{background:var(--muro);padding:clamp(56px,7vw,104px) var(--m)}
.seguros{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,40px);border-top:3px solid var(--azul-tinta);padding-top:18px}
.seguros li{font:600 clamp(26px,3.4vw,52px)/1.25 var(--rotula);letter-spacing:-.015em;color:var(--tinta)}
.seguros li:nth-child(3n+2){color:var(--azul-tinta)}

/* pie: el logo grande */
.pie{background:var(--noche);color:#dbe3ea;padding:clamp(48px,6vw,88px) var(--m) 0;overflow:hidden}
.pie .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-size:16px;line-height:1.55;padding-bottom:28px}
.pie h2{margin:0 0 8px;font:600 15px/1.3 var(--informa);color:var(--cian)}
.pie p{margin:0}
.pie a{color:#fff;display:inline-block;padding:5px 0}
.legal{font-size:14px !important;color:#b9c6d1;border-top:1px solid rgba(255,255,255,.18);padding:16px 0 0 !important;max-width:110ch}
.letrero{display:block;width:min(92%,980px);height:auto;margin:clamp(40px,6vw,88px) 0 clamp(32px,4vw,56px)}

.barra{display:none}

/* movimiento: la fachada se descubre, el titular sube y las puertas cambian. Nada más. */
.mueve .portada .marco{clip-path:inset(0 0 100% 0);animation:cortina 1.1s cubic-bezier(.77,0,.18,1) .1s forwards}
@keyframes cortina{to{clip-path:inset(0 0 0 0)}}
.mueve .portada h1 .l{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mueve .portada h1 .l > span{display:block;transform:translateY(105%);animation:sube 1s var(--salida) .55s forwards}
.mueve .portada h1 .l:nth-child(2) > span{animation-delay:.66s}
.mueve .portada h1 .l:nth-child(3) > span{animation-delay:.77s}
@keyframes sube{to{transform:none}}
.mueve .entra{animation:aparece .45s ease both}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width: 1100px){
  .cab nav{display:none}
}
@media (max-width: 900px){
  .portada .caja,.llegar-cab,.panel,.resultados,.urg-tel,.urg-cols{grid-template-columns:1fr}
  .portada h1{font-size:clamp(34px,9.6vw,80px)}
  .puertas{grid-template-columns:1fr}
  .edificio{display:none}
  .puerta{padding:16px 0}
  .puerta + .edificio + .puerta{border-top:1px solid var(--linea)}
  .puerta[data-puerta="constitucion"]{justify-self:stretch}
  .si-no{grid-template-columns:1fr}
  .lista-serv li{grid-template-columns:1fr}
  .lista-serv img{max-width:520px}
  .signos{columns:1}
  .urg-cols > div + div{margin-top:36px}
  .esp-g{grid-template-columns:1fr}
  .c{grid-template-columns:minmax(0,1fr) auto;gap:0 10px}
  .c .q,.c .u{grid-column:1}
  .c .u{font-size:14px}
  .c .a{grid-column:2;grid-row:1 / span 2;flex-direction:column}
  .c .a a.rec{font-size:14px;white-space:normal;text-align:right;max-width:96px;line-height:1.25}
  .pie .cols{grid-template-columns:1fr}
  .pie{padding-bottom:64px}
  .barra{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:12;background:#fff;border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom,0)}
  .barra a{display:flex;align-items:center;justify-content:center;min-height:56px;font:600 16px/1 var(--informa);color:var(--azul-tinta);text-decoration:none}
  .barra a:first-child{background:var(--magenta-2);color:#fff}
}
@media (max-width: 560px){
  .marca img{height:32px}
  .tel-cab small{font-size:11px}
  .tel-cab{padding-right:14px;gap:8px}
  .tel-cab b{font-size:16px}
  .tel-cab .auricular{width:30px;height:30px;padding:7px}
  .buscar{flex-wrap:wrap;padding:10px 14px}
  .buscar button{width:100%}
  .si-no > div,.pedir > div{grid-template-columns:1fr;gap:2px}
}
@media (max-width: 380px){
  .marca img{height:30px}
  .tel-cab .auricular{display:none}
}
a[href^="tel:"]{white-space:nowrap}