/* CEMENI · Centro Médico del Niño · preview
 * Color sacado de su logo (logo-CEMENI.jpg de cemeni.mx), de su letrero de la entrada y de la foto de la casa de noche:
 *   morado   #863594  las letras y el bebé del logo. Texto y botones: 7.1:1 sobre blanco.
 *   noche    #1d1430  el cielo y la sombra de la foto nocturna. Superficie oscura, 17.6:1 con blanco.
 *   lila     #c9a6db  derivado del morado: SOLO sobre noche (8.3:1).
 *   anillo   cielo #75cfea · amarillo #f9e515 · rosa #e8407b · verde #77bc45 · naranja #f7b233
 *            los cuatro cuartos del anillo y la mano. Solo sobre noche (amarillo 13.6:1, cielo 9.9:1) o como superficie.
 *   placas del letrero: el de la entrada usa vino, rojo, magenta, azul, marino, verde y naranja con letra blanca.
 *            Se oscurecieron lo justo para pasar 4.5:1 con blanco (el verde #77bc45 da 2.3:1, aquí #3f7f22 da 4.9:1).
 * Montserrat rotula (la palabra CEMENI de su logo es de esa familia). Figtree informa.
 * Radios distintos a propósito: placas 3, campos 4, botones píldora, tarjetas 18, fotos 0.
 */
:root{
  --morado:#863594; --morado-o:#6e2a7c; --noche:#1d1430; --noche-2:#2a1e44; --lila:#c9a6db;
  --cielo:#75cfea; --amarillo:#f9e515; --rosa:#e8407b; --verde:#77bc45; --naranja:#f7b233;
  --vino:#5b1a2b; --rojo:#c62a40; --magenta:#b02468; --azul:#2f68ad; --marino:#23387f; --pverde:#3f7f22; --pnaranja:#b8401c;
  --papel:#ffffff; --cal:#f5f2f7; --tinta:#1f1726; --tenue:#5c536a; --linea:#e0dbe6;
  --rotula:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --informa:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --m:clamp(16px, 4vw, 56px);
  --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.55 var(--informa);font-variant-numeric:tabular-nums}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--morado);outline-offset:3px;border-radius:3px}
.portada :focus-visible,.servicios :focus-visible,.pie :focus-visible{outline-color:var(--amarillo)}
.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(--morado);color:#fff;font-weight:700;padding:12px 16px;border-radius:4px;text-decoration:none}
.saltar:focus{top:12px}
mark{background:#f3e3f7;color:inherit;padding:0 1px;border-radius:2px}

.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:8px var(--m);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:54px;width:auto}
.cab nav{display:flex;gap:26px;font:600 15px/1 var(--informa)}
.cab nav a{text-decoration:none;color:var(--tinta);padding:12px 0}
.cab nav a:hover{color:var(--morado);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(--rojo);color:#fff;text-decoration:none;transition:background .3s}
.tel-cab:hover{background:var(--vino)}
.tel-cab .auricular{width:34px;height:34px;padding:8px;border-radius:50%;background:#fff;color:var(--rojo);flex:0 0 auto;transition:transform .4s var(--salida)}
.tel-cab:hover .auricular{transform:rotate(-14deg)}
.tel-cab small{display:block;font:700 11px/1.1 var(--informa);letter-spacing:.02em}
.tel-cab b{display:block;font:800 17px/1.15 var(--rotula);letter-spacing:.01em}

.pildora{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--informa);text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.pildora.llena{background:var(--morado);color:#fff}
.pildora.llena:hover{background:var(--morado-o)}
.pildora.linea{background:transparent;color:var(--morado);box-shadow:inset 0 0 0 1.5px var(--morado)}
.pildora.linea:hover{background:var(--morado);color:#fff}
.pildora.wa{background:#14612d;color:#fff}
.pildora.wa:hover{background:#0d4a21}

/* portada: la casa de noche y la hora de ahora */
.portada{background:var(--noche);color:#fff;overflow:hidden}
.portada .marco{overflow:hidden;height:clamp(210px,44vw,640px)}
.portada .marco img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;will-change:transform}
.portada .caja{position:relative;padding:0 var(--m) clamp(36px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,72px);align-items:end;margin-top:clamp(-150px,-9vw,-40px)}
.portada h1{font:800 clamp(40px,7.4vw,124px)/.96 var(--rotula);margin:0;letter-spacing:-.03em;background:var(--noche);padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) 0 0;justify-self:start}
.portada h1 .l{display:block}
.portada h1 .dato{color:var(--amarillo)}
.sub{margin:0 0 20px;font:500 clamp(17px,1.5vw,20px)/1.45 var(--informa);color:#ece6f3;max-width:36ch}
.llamar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--rojo);color:#fff;text-decoration:none;border-radius:999px;padding:14px 26px;min-height:64px;transition:background .3s}
.llamar:hover{background:#a8202f}
.llamar span{font:700 16px/1.2 var(--informa)}
.llamar b{font:800 clamp(22px,2.2vw,28px)/1 var(--rotula);letter-spacing:.01em}
.otras{margin:12px 0 0;font-size:15px;color:#e2dbeb}
.otras a{color:#fff;display:inline-block;padding:12px 2px;font-weight:600}

/* buscador */
.busca{background:var(--noche-2);color:#fff;padding:clamp(24px,3vw,40px) var(--m) clamp(28px,3vw,44px)}
.buscar{max-width:980px}
.buscar label{display:block;font:800 clamp(24px,2.6vw,34px)/1.1 var(--rotula);letter-spacing:-.015em;margin:0 0 12px}
.campo{display:flex;align-items:center;gap:10px;background:#fff;border-radius:4px;padding:8px 8px 8px 18px}
.campo input{flex:1;min-width:0;border:0;font:500 clamp(18px,1.7vw,22px)/1.3 var(--informa);color:var(--tinta);padding:8px 0;background:transparent}
.campo input::placeholder{color:#6f6780}
.campo input:focus{outline:none}
.campo:focus-within{outline:3px solid var(--amarillo);outline-offset:3px}
.atajos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;max-width:980px}
.atajos button{font:600 15px/1 var(--informa);color:#fff;background:transparent;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer}
.atajos button:hover{border-color:var(--amarillo);color:var(--amarillo)}

/* médicos: el letrero y la lista */
.medicos{padding:clamp(56px,7vw,104px) var(--m) clamp(48px,6vw,88px)}
.titulo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px 48px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.medicos h2,.director h2,.casa h2,.llegar h2{font:800 clamp(32px,4.4vw,64px)/1 var(--rotula);letter-spacing:-.025em;color:var(--morado);margin:0}
.lead{margin:0;max-width:44ch;color:var(--tenue)}
.tablero{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.poste{position:sticky;top:calc(var(--cab,72px) + 16px)}
.letrero{background:#fff;border-radius:6px;padding:18px 16px 16px;box-shadow:0 0 0 1px var(--linea),0 24px 48px -28px rgba(29,20,48,.45)}
.escudo{width:132px;margin:0 auto 14px}
.placas{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.placa{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 8px;border:0;border-radius:3px;color:#fff;font:800 13px/1.08 var(--rotula);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background-color .45s,color .45s,box-shadow .3s,transform .35s var(--salida)}
.placa.ancha{grid-column:1 / -1;font-size:15px}
.placa.tel{margin-top:10px;background:var(--rojo);font-size:16px}
.placa[data-c="vino"]{background:var(--vino)}.placa[data-c="rojo"]{background:var(--rojo)}.placa[data-c="magenta"]{background:var(--magenta)}
.placa[data-c="azul"]{background:var(--azul)}.placa[data-c="marino"]{background:var(--marino)}.placa[data-c="verde"]{background:var(--pverde)}.placa[data-c="naranja"]{background:var(--pnaranja)}
.placa:hover{transform:translateX(3px)}
.placa[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--tinta)}
.letrero.buscando .placa:not(.prendida):not(.tel){background:#ece9f0;color:#5c536a}
.letrero.buscando .placa.prendida{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--amarillo),0 0 22px 4px rgba(249,229,21,.55)}

.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.filtros button{font:600 14px/1 var(--informa);background:#fff;color:var(--morado);border:1.5px solid var(--morado);border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--morado);color:#fff}
.filtros .q2{flex:1 1 240px;display:flex;align-items:center;border-bottom:2px solid var(--morado);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:#6f6780}
.filtros .q2 input:focus{outline:none}
.motivo{margin:0 0 18px;font:500 18px/1.45 var(--informa)}
.motivo:empty{display:none}
.motivo p{margin:0}
.motivo b{color:var(--morado)}
.motivo .ahora{margin-top:12px;background:var(--noche);color:#fff;border-radius:18px;padding:16px 18px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;font-size:16px}
.motivo .ahora b{color:var(--amarillo)}
.motivo .ahora a{background:var(--rojo);color:#fff;text-decoration:none;font:800 17px/1 var(--rotula);border-radius:999px;padding:0 20px;min-height:48px;display:inline-flex;align-items:center}
.motivo .servicio{margin-top:12px;background:var(--cal);border-radius:18px;padding:16px 18px}
.motivo .servicio a{font-weight:700;color:var(--morado);display:inline-block;padding:4px 0}
.motivo button.limpia{font:600 15px/1 var(--informa);background:none;border:0;color:var(--morado);text-decoration:underline;text-underline-offset:3px;padding:12px 0;min-height:44px;cursor:pointer}

.gente{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.persona{display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 16px;align-items:center;background:var(--cal);border-radius:18px;padding:14px 16px 14px 10px}
.persona img{width:88px;height:110px;object-fit:cover;grid-row:1 / span 2;border-radius:10px;background:#fff}
.persona .esp{margin:0;font:700 13px/1.25 var(--informa);color:var(--morado)}
.persona h3{margin:2px 0 0;font:700 18px/1.2 var(--rotula);letter-spacing:-.01em}
.persona .det{margin:2px 0 0;font-size:14px;color:var(--tenue);line-height:1.35}
.persona .acc{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.persona .acc .pildora{font-size:14px;padding:0 14px;min-height:44px}
.persona .acc .rec{font:600 14px/1.25 var(--informa);color:var(--morado);display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.persona.entra{animation:aparece .45s ease both}
.vacio{grid-column:1 / -1;padding:12px 0;font-size:18px;margin:0}
.fuente{font:400 13px/1.5 var(--informa);color:var(--tenue);margin:28px 0 0;max-width:72ch}

/* servicios: letra de letrero, en los colores del anillo */
.servicios{background:var(--noche);color:#fff;padding:clamp(56px,7vw,104px) 0}
.cab2{padding:0 var(--m);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.servicios h2{font:800 clamp(32px,4.4vw,64px)/1 var(--rotula);letter-spacing:-.025em;margin:0}
.servicios .lead{color:#ddd3e8}
.grandes{list-style:none;margin:0;padding:0 var(--m)}
.grandes li{font:800 clamp(30px,6.2vw,96px)/1.02 var(--rotula);letter-spacing:-.03em;border-top:1px solid rgba(201,166,219,.3);padding:clamp(8px,1vw,14px) 0}
.grandes li:nth-child(4n+1){color:var(--cielo)}
.grandes li:nth-child(4n+2){color:var(--amarillo);padding-left:clamp(0px,8vw,160px)}
.grandes li:nth-child(4n+3){color:#fff}
.grandes li:nth-child(4n){color:var(--naranja);padding-left:clamp(0px,8vw,160px)}

/* la casa */
.casa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);padding:clamp(56px,7vw,104px) var(--m);align-items:start}
.casa figure{margin:0}
.casa img{width:100%;aspect-ratio:16/10;object-fit:cover}
.casa .f2{grid-column:1 / -1;max-width:62%;justify-self:end;margin-top:clamp(-120px,-6vw,-20px)}
.casa .texto p{margin:18px 0 0;max-width:46ch}
.resena{margin:28px 0 0;padding:0;border-top:2px solid var(--morado)}
.resena p{font:700 clamp(20px,1.9vw,26px)/1.3 var(--rotula);letter-spacing:-.01em;color:var(--tinta);margin:14px 0 8px;max-width:30ch}
.resena footer{font-size:14px;color:var(--tenue)}

/* director */
.director{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;padding:0 var(--m) clamp(56px,7vw,104px)}
.director img{width:100%;max-width:420px;background:#fff}
.director .esp{margin:0 0 6px;font:700 14px/1.2 var(--informa);color:var(--morado)}
.director h2{font-size:clamp(36px,5.4vw,84px)}
.director p{max-width:52ch}
.ir{display:flex;flex-wrap:wrap;gap:10px}

/* cómo llegar */
.llegar{background:var(--cal);padding:clamp(56px,7vw,104px) var(--m);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px)}
.dir{font:700 clamp(20px,2vw,26px)/1.35 var(--informa);margin:18px 0 22px}
.mapa{margin:0;border-radius:18px;overflow:hidden;background:#e4e0ea;min-height:420px}
.mapa iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
.si-no{margin:28px 0 0}
.si-no > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--linea)}
.si-no > div:first-child{border-top:2px solid var(--morado)}
.si-no dt{font-weight:700}
.si-no dd{margin:0}
.si-no dd small{display:block;font-size:14px;color:var(--tenue);line-height:1.4;margin-top:2px}
.si-no a{display:inline-block;padding:10px 0;font-weight:600}
.urgencia{margin:28px 0 0;padding:16px 18px;background:#fff;border-radius:4px;font-weight:600}
.urgencia a{color:#a8202f;display:inline-block;padding:9px 0}

/* pie: CEMENI en grande */
.pie{background:var(--noche);color:#e9e3ef;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:15px;line-height:1.55;padding-bottom:40px}
.pie h2{margin:0 0 8px;font:700 13px/1.3 var(--informa);color:var(--lila)}
.pie p{margin:0}
.pie a{color:#fff;display:inline-block;padding:10px 0}
.pie .gigante{display:block;width:100%;max-width:none;height:auto;margin:0 0 -2%}
.barra{display:none}

/* movimiento: la cortina de la foto, el titular y las placas que se prenden. 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:.06em}
.mueve .portada h1 .l > span{display:block;transform:translateY(105%);animation:sube 1s var(--salida) .5s forwards}
.mueve .portada h1 .l:nth-child(2) > span{animation-delay:.62s}
@keyframes sube{to{transform:none}}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mueve .revela{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s var(--salida)}
.mueve .revela.visto{opacity:1;transform:none}
.quieto .placa,.quieto .persona.entra{transition:none;animation:none}

@media (max-width: 960px){
  .cab nav{display:none}
  .portada .caja,.llegar,.titulo,.tablero,.director{grid-template-columns:1fr}
  .portada .caja{margin-top:-36px}
  .poste{position:static}
  .letrero{max-width:460px}
  .casa{grid-template-columns:1fr}
  .casa .f2{max-width:100%;margin-top:0}
  .director img{max-width:280px}
  .si-no > div{grid-template-columns:1fr;gap:2px}
  .pie .cols{grid-template-columns:1fr}
  .pie{padding-bottom:64px}
  .barra{display:grid;grid-template-columns:1.3fr 1fr 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;text-align:center;min-height:56px;font:700 15px/1.1 var(--informa);color:var(--morado);text-decoration:none;padding:0 6px}
  .barra a:first-child{background:var(--rojo);color:#fff}
}
@media (max-width: 480px){
  .marca img{height:44px}
  .tel-cab{padding:5px 14px 5px 6px;gap:8px}
  .tel-cab .auricular{width:30px;height:30px;padding:7px}
  .tel-cab b{font-size:15px}
  .tel-cab small{font-size:10px}
  .llamar{padding:12px 20px}
  .campo{flex-wrap:wrap;padding:10px 12px}
  .campo button{width:100%}
  .placa{font-size:12px;padding:6px 5px}
  .placa.ancha{font-size:14px}
  .persona{grid-template-columns:76px minmax(0,1fr);gap:2px 12px}
  .persona img{width:76px;height:95px}
}