/* Sofía · diseño «Turno» (4-nov-2026): su foto de enfermera a pantalla
   completa y una tira de fotos del uniforme con candado. Clases propias: no
   repetir las de las otras webs de la casa (anti-correlación). Las de app.js
   (.cta, .age, .lock-*, .socials) son las únicas comunes, porque las pinta él. */
:root{
  --fondo:#06120e; --tarjeta:#0d1f19; --raya:#1d3a30;
  --blanco:#f4fbf8; --gris:#a7bdb4; --gris2:#6f8a80;
  --menta:#5eead4; --verde:#22c55e; --verde2:#0f9f6e;
  --ancho:480px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--fondo)}
body{
  color:var(--blanco);-webkit-font-smoothing:antialiased;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
.turno{max-width:var(--ancho);margin:0 auto;min-height:100svh;padding-bottom:150px}

/* La foto grande, de enfermera, ocupando la pantalla */
.portada-turno{position:relative;height:88svh;min-height:520px;max-height:860px;overflow:hidden}
.portada-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 25%;animation:entra 1.1s ease both}
.portada-velo{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,18,14,.35) 0%,rgba(6,18,14,0) 14%,rgba(6,18,14,0) 62%,rgba(6,18,14,.8) 86%,var(--fondo) 100%)}
@keyframes entra{from{transform:scale(1.06);opacity:.4}to{transform:none;opacity:1}}

/* La chapa del uniforme, arriba */
.chapa{
  position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:2;
  display:flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:999px;
  background:rgba(6,18,14,.55);backdrop-filter:blur(10px);border:1px solid rgba(94,234,212,.35);
}
.chapa-cara{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--menta)}
.chapa-nombre{font-weight:700;font-size:.95rem}
.chapa-verif{width:15px;height:15px;color:#3897f0}

.portada-pie{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 20px 18px}
.etiqueta-turno{
  display:inline-block;margin:0 0 10px;padding:5px 11px;border-radius:999px;
  background:rgba(94,234,212,.16);border:1px solid rgba(94,234,212,.45);
  color:var(--menta);font-size:.78rem;font-weight:700;letter-spacing:.3px;
}
.frase-grande{margin:0;font-size:2rem;line-height:1.08;font-weight:800;letter-spacing:-.6px;text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* Debajo: dos líneas y la tira con candado */
.parte{padding:6px 20px 0}
.parte-texto{margin:0 0 14px;color:var(--gris);font-size:1rem}
.tira{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}
.tira-foto{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--tarjeta)}
.tira-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:blur(7px) saturate(1.1);transform:scale(1.15)}
.lock-layer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,18,14,.25)}
.lock-ico{font-size:1.25rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.lock-tag{display:none}
.tira-pie{grid-column:1/-1;margin:2px 2px 0;color:var(--gris2);font-size:.8rem;text-align:center}
.parte-firma{margin:0 0 18px;font-size:1.05rem;font-weight:600}

/* El botón, fijo abajo */
.mostrador{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:16px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(6,18,14,0),var(--fondo) 32%);
}
.mostrador > *{max-width:calc(var(--ancho) - 36px);margin-left:auto;margin-right:auto}
.mostrador-botones{display:flex;flex-direction:column;gap:10px}
.cta{
  appearance:none;border:0;cursor:pointer;width:100%;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:17px 22px;border-radius:18px;font-family:inherit;
  font-size:1.08rem;font-weight:800;letter-spacing:.2px;color:#fff;
  background:linear-gradient(135deg,var(--verde),var(--verde2));
  box-shadow:0 12px 32px -10px rgba(34,197,94,.75);
  transition:transform .12s ease;
}
.cta:active{transform:scale(.985)}
.cta-main{display:block}
.cta-sub{font-size:.75rem;font-weight:700;opacity:.8}
.cta-badge{display:none}
.cta-alt{background:var(--tarjeta);box-shadow:none}
.mostrador-nota{margin:9px 0 0;text-align:center;color:var(--gris);font-size:.78rem}

.socials{display:flex;gap:9px;justify-content:center;margin:18px 0 10px}
.socials a{color:var(--gris);text-decoration:none;font-size:.84rem;padding:8px 15px;border:1px solid var(--raya);border-radius:999px}
.pie-legal{margin:0;padding:0 16px 24px;color:var(--gris2);font-size:.68rem;text-align:center}

/* Segundo paso (lo pinta app.js con los textos paso_* del Worker) */
.age{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);animation:fundido .2s ease both}
.age-box{
  width:100%;max-width:var(--ancho);text-align:center;background:var(--tarjeta);
  border:1px solid var(--raya);border-bottom:0;border-radius:26px 26px 0 0;
  padding:26px 22px calc(18px + env(safe-area-inset-bottom));animation:sube .28s cubic-bezier(.2,.9,.3,1) both;
}
.age-cara{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:2px solid var(--menta)}
.age-box h2{margin:0 0 6px;font-size:1.28rem;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.age-box p{color:var(--gris);margin:0 0 18px;font-size:.95rem;line-height:1.4}
.age-actions{display:flex;flex-direction:column;gap:4px}
.age-actions .ghost{border:0;padding:12px;font-size:.9rem}
.age-box .age-nota{margin:6px 0 0;color:var(--gris2);font-size:.72rem}
.ghost{appearance:none;background:transparent;color:var(--gris);font-family:inherit;border:1px solid var(--raya);border-radius:999px;padding:15px 22px;font-size:1rem;cursor:pointer}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes fundido{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){ .portada-foto,.age,.age-box{animation:none} }