/* Fuentes locales (OFL/licencia propia): no dependen de CDN externo. */
@font-face {
  font-family: 'BDSans';
  src: url('../assets/fonts/beauti/BDSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CodecPro';
  src: url('../assets/fonts/Codec/CodecPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CodecPro';
  src: url('../assets/fonts/Codec/CodecPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #35e0c6;
  --accent-dark: #0f6b5e;
  --success: #4cff7a;
  --error: #ff5a5a;
  --panel-bg: rgba(10, 30, 28, 0.72);
  --text: #f2fdfb;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  /* iOS Safari: el viewport dinámico (barra URL) dejaba huecos con 100%. */
  height: 100dvh;
  overflow: hidden;
  background: #061412;
  color: var(--text);
  overscroll-behavior: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
}

#canvas-container {
  position: absolute;
  inset: 0;
}

#canvas-container canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

#ui-top {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

#step-title {
  /* Banda translúcida al ancho del texto (referencia): vidrio blanco
     translúcido, esquinas apenas redondeadas. Justificada a la
     izquierda (margen = padding de #ui). */
  margin-left: 0;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 10px;
  padding: 17px 50px;
  font-family: "BDSans", "CodecPro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(25px, 4vw, 36px); /* ×1.2 */
  /* Fake bold: BDSans solo existe en 400. */
  font-weight: 700;
  -webkit-text-stroke: 0.2px;
  letter-spacing: 0.06em;
  text-align: center;
  color: #007b37;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#step-title.fade-in {
  opacity: 1;
  transform: none;
}

#step-title:empty {
  display: none;
}

/* ===== HUD superior derecho (INJECT_SOLUTION) =====
   Cronómetro de la hemorragia + barra de volumen del balón,
   anclados a la esquina superior derecha — estilo referencia clínica. */
#hud-tr {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(42%, 392px);
  pointer-events: none;
}

#timer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: clamp(12px, 2vw, 20px) clamp(20px, 2.8vw, 32px);
  /* Blanco SEMITRANSPARENTE + blur: se lee sin tapar la escena. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 4px solid var(--error);
  border-radius: 20px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
}

#timer-box .timer-label {
  font-size: clamp(15px, 2.1vw, 22px);
  font-weight: 700;
  -webkit-text-stroke: 0.3px currentColor; /* BDSans solo tiene 400 */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1a2a33;
}

#timer {
  /* Solo los números 1.2× — la pleca y el label no cambian. */
  font-size: clamp(50px, 9.24vw, 91px);
  font-weight: 700;
  -webkit-text-stroke: 0.5px currentColor;
  line-height: 1.1;
  color: #ffd24a;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* ≤10s o falla: números en rojo. 'done' = parpadeo 4× al finalizar
   (NO cambia el color — éxito queda amarillo, falla lleva urgent). */
#timer.urgent {
  color: #e03333;
}

#timer.done {
  animation: timer-blink 0.28s ease-in-out 4;
}

@keyframes timer-blink {
  50% { opacity: 0.1; }
}

#instruction {
  /* Pleca oscura eliminada: la instrucción ya la muestra la burbuja
     del puntero (StepPointer). Se mantiene oculta aunque JS quite
     la clase .hidden. */
  display: none;
  align-self: center;
  margin-top: 12px;
  background: var(--panel-bg);
  border: 1px solid rgba(53, 224, 198, 0.4);
  border-radius: 12px;
  padding: 10px 18px;
  font-size: clamp(14px, 2vw, 18px);
  text-align: center;
  max-width: min(90%, 520px);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#message {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 10px;
  /* Mismo tamaño que las plecas guía del StepPointer (~0.52): más chico
     que antes — la pleca 'Llave correctamente posicionada' se veía grande. */
  font-size: clamp(12px, 1.6vw, 15px);
  font-weight: 600;
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid transparent;
  transition: opacity 0.25s ease;
}

#message.success {
  color: var(--success);
  border-color: var(--success);
}

#message.error {
  color: var(--error);
  border-color: var(--error);
}

#message.info {
  color: var(--accent);
  border-color: var(--accent);
}

#progress {
  /* Dentro de #hud-tr: llena su columna (el ancho lo manda el contenedor). */
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(10, 30, 28, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-label {
  font-size: 18px;
  font-weight: 600; /* semibold: punto medio entre regular y bold */
  opacity: 0.85;
  text-align: center;
}

.progress-bar {
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd24a, var(--success));
  transition: width 0.2s ease;
}

.progress-range {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 600;
  opacity: 0.8;
}

/* Extremos del rango con el color del gradiente de la barra:
   0 mL amarillo (#ffd24a), 300 mL verde (--success). */
#progress-min {
  color: #ffd24a;
}

#progress-max {
  color: var(--success);
}

/* Pleca de instrucción en UI: la burbuja de texto deja el espacio 3D
   (halo/piquito siguen anclados al objeto). Anclada a la ESQUINA
   INFERIOR IZQUIERDA — las de éxito/falla ('correctamente',
   'hemorragia …') son excepción y conservan su centrado en .success/
   .fail — vidrio teal igual que la burbuja 3D, tamaño de texto
   HOMOGÉNEO (×1.5) y MÁXIMO 2 líneas (nunca 3). */
#pleca-ui {
  position: absolute;
  /* Esquina inferior izquierda con margen fijo. Sin translate: la
     animación pleca-in usa transform y no debe pelear el centrado
     (que ya no existe aquí; success/fail lo restauran abajo). */
  left: 24px;
  bottom: 44px;
  translate: none;
  max-width: min(645px, 56%);
  padding: 20px 33px;
  border-radius: 27px;
  background: rgba(149, 248, 255, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 9px 33px rgba(0, 0, 0, 0.28);
  color: #004e6b;
  font-family: "CodecPro", "Segoe UI", sans-serif;
  font-size: clamp(26px, 3.2vw, 33px);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: pleca-in 0.47s ease-out;
  /* Swap entre instrucciones: fade-out suave y luego ~380ms de hueco
     (.pleca-gap la pone StepPointer) — antes el texto se reemplazaba en
     seco y se leía como "la instrucción no cambió". */
  transition: opacity 0.14s ease-out;
}

#pleca-ui.pleca-gap {
  opacity: 0;
}

/* Entrada: desliza de izquierda a derecha (arranca 340px a la izquierda
   — casi fuera de la esquina — y llega a su posición) tras el hueco ~380ms. */
@keyframes pleca-in {
  from { opacity: 0; transform: translateX(-340px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Pleca de ÉXITO ('Balón/Llave correctamente posicionado/a'): 1.5× las
   demás (texto, padding, radio, ancho), vidrio VERDE claro
   semitransparente y entrada pop-up con overshoot (easeOutBack). Una
   sola línea: el ancho crece con el texto. */
#pleca-ui.success,
#pleca-ui.fail {
  /* Centrada horizontal; vertical en el PRIMER CUARTO desde abajo
     (centro de la caja en y=75%) — EXCEPCIÓN al anclaje inferior-
     izquierdo de la pleca base: restaura top/translate centrados. */
  left: 50%;
  top: 75%;
  bottom: auto;
  translate: -50% -50%;
  /* nowrap abajo: el único tope real es el viewport (92vw) — una sola
     línea nunca queda cortada por el overflow:hidden. */
  max-width: min(968px, 92vw);
  padding: 30px 50px;
  border-radius: 40px;
  background: rgba(190, 255, 214, 0.78);
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 44px rgba(0, 123, 55, 0.3);
  font-size: clamp(39px, 4.8vw, 50px);
  -webkit-line-clamp: 1;
  line-clamp: 1;
  /* Una sola línea SIEMPRE, en todos los dispositivos: el texto nunca
     se parte y la caja crece con él (el max-width sigue acotando). */
  white-space: nowrap;
  animation: pleca-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 'Hemorragia todavía activa': mismo formato, vidrio rojizo, en el
   PRIMER TERCIO del encuadre (centro en y=22%) — deja sitio debajo al
   recuadro #fail-causes. */
#pleca-ui.fail {
  top: 22%;
  background: rgba(255, 205, 205, 0.8);
  box-shadow: 0 12px 44px rgba(176, 48, 48, 0.3);
}

/* 'Posibles causas' bajo la pleca fail. top = centro de la pleca +
   media altura (~67px) + separación. */
#fail-causes {
  position: absolute;
  left: 50%;
  top: calc(22% + 67px + 18px);
  translate: -50% 0;
  padding: 14px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 9px 33px rgba(0, 0, 0, 0.2);
  color: #b03030;
  font-family: "CodecPro", "Segoe UI", sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  animation: fail-causes-in 0.4s ease-out 0.35s both; /* tras el pop */
}

#fail-causes b {
  font-weight: 700;
}

@keyframes fail-causes-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Advertencia de tamaño normal (pleca de reemplazo de jeringa):
   misma geometría/posición que la pleca base, vidrio ROJO claro
   semitransparente + texto rojo. Se activa con tone:'fail' sin pop. */
#pleca-ui.danger {
  background: rgba(255, 205, 205, 0.8);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 9px 33px rgba(176, 48, 48, 0.35);
  color: #b03030;
}

@keyframes pleca-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Pantalla de resultados ===== */
/* Mismo fondo del case-intro (fondo.jpg teal LUXEON), contenido
   directo sobre la imagen — sin tarjeta — como el diseño aprobado. */
#result-panel,
#contact-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #003125 url("../assets/images/fondo.jpg") center center / cover no-repeat;
  text-align: center;
  overflow-y: auto;
  font-family: "CodecPro", "Segoe UI", system-ui, sans-serif;
}

.result-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.2vh, 22px);
  width: min(94%, 760px);
  padding: clamp(14px, 3vh, 28px) 16px;
}

.result-logo {
  height: clamp(162px, 33vh, 288px); /* ×3 — logo protagonista */
  width: auto;
  margin-bottom: clamp(2px, 1vh, 8px);
}

.result-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 6vw, 64px);
  text-align: left;
}

.result-col {
  min-width: min(260px, 88vw);
}

.result-h {
  margin: 0 0 clamp(6px, 1.2vh, 10px);
  color: #eaf6f2;
  font-size: clamp(15px, 2.6vh, 21px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

#result-clinical {
  margin: 0;
  font-size: clamp(15px, 2.6vh, 20px);
  font-weight: 700;
}

#result-clinical.ok,
#result-msg.ok,
#result-title.ok,
#result-steps li.ok .box {
  color: var(--success);
}

#result-clinical.fail,
#result-msg.fail,
#result-title.fail,
#result-steps li.fail .box {
  color: #ff4d4d;
}

#result-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: clamp(14px, 2.4vh, 19px);
  color: #eaf6f2;
}

#result-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

#result-steps .box {
  font-size: 1.05em;
  line-height: 1;
}

#result-time {
  margin: clamp(4px, 1vh, 8px) 0 0;
  color: #ffd24a;
  font-size: clamp(20px, 4vh, 30px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

#result-msg {
  margin: 0;
  font-size: clamp(14px, 2.6vh, 19px);
}

#result-title {
  margin: 0;
  font-family: "BDSans", "CodecPro", "Segoe UI", sans-serif;
  font-size: clamp(20.8px, 4.8vh, 35.2px); /* ×0.8 */
  font-weight: 700;
  -webkit-text-stroke: 0.5px currentColor; /* BDSans solo tiene 400 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap; /* siempre una sola línea */
}

#restart-btn,
#contact-next-btn {
  margin-top: clamp(6px, 1.4vh, 14px);
  scale: 1.44; /* 1.2 × 1.2 acumulado — no choca con el hover */
  min-height: 44px; /* touch target mínimo (Apple HIG) */
  min-width: min(320px, 74vw);
  padding: 12px 34px;
  border: 2px solid #2fbfab;
  border-radius: 12px;
  background: #a8ece2;
  color: #005b41;
  font-family: "BDSans", "CodecPro", "Segoe UI", sans-serif;
  font-size: clamp(15px, 2.8vh, 19px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(53, 224, 198, 0.55), inset 0 0 10px rgba(53, 224, 198, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

#restart-btn:hover,
#contact-next-btn:hover {
  background: #ffffff;
  border-color: #35e0c6;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 28px rgba(53, 224, 198, 1), inset 0 0 10px rgba(53, 224, 198, 0.2);
}

#restart-btn:active,
#contact-next-btn:active {
  transform: translateY(0);
}

/* ===== Pantalla de contacto (tras resultados) ===== */
.contact-title {
  margin: 0;
  color: #eaf6f2;
  font-family: "BDSans", "CodecPro", "Segoe UI", sans-serif;
  font-size: clamp(20.8px, 4.8vh, 35.2px);
  font-weight: 700;
  -webkit-text-stroke: 0.5px currentColor; /* BDSans solo tiene 400 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 14px);
  width: min(100%, 460px);
}

.contact-list > li > a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: clamp(8px, 1.4vh, 12px) 18px;
  border-radius: 12px;
  border: 1px solid rgba(120, 255, 235, 0.25);
  background: rgba(0, 49, 37, 0.45);
  color: #eaf6f2;
  text-align: left;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.contact-list > li > a:hover,
.contact-mail[aria-expanded="true"] {
  background: rgba(0, 77, 59, 0.7);
  border-color: #35e0c6;
  transform: translateY(-1px);
}

/* Menú del correo: flota bajo la fila (no empuja el layout). */
.contact-mail-item {
  position: relative;
}

.contact-mail-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #35e0c6;
  background: rgba(0, 49, 37, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.contact-mail-menu a,
.contact-mail-menu button {
  min-height: 40px;
  padding: 8px 10px;
  border: 2px solid #2fbfab;
  border-radius: 8px;
  background: #a8ece2;
  color: #005b41;
  font: 700 clamp(13px, 2.2vh, 16px) "CodecPro", "Segoe UI", system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.contact-mail-menu a:hover,
.contact-mail-menu button:hover {
  background: #ffffff;
  border-color: #35e0c6;
}

/* Teléfono: solo marca en móvil — en PC (mouse) la fila queda inerte. */
@media (hover: hover) and (pointer: fine) {
  .contact-list a.contact-tel {
    pointer-events: none;
    cursor: default;
  }
}

.contact-ico {
  grid-row: 1 / span 2;
  width: clamp(26px, 4.4vh, 34px);
  height: clamp(26px, 4.4vh, 34px);
  color: #35e0c6;
}

.contact-ico.wa {
  color: #25d366; /* verde oficial WhatsApp */
}

.contact-val {
  font-size: clamp(16px, 3vh, 22px);
  font-weight: 700;
  letter-spacing: 0.03em;
  word-break: break-all;
}

.contact-lbl {
  font-size: clamp(12px, 2vh, 15px);
  color: rgba(234, 246, 242, 0.7);
}

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #003125;
  z-index: 20;
  transition: opacity 0.45s ease;
}

#loading.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loading-logo {
  position: relative;
  overflow: hidden;
  max-width: min(90%, 390px);
  margin-bottom: 12px;
}

#loading-logo img {
  display: block;
  width: 100%;
  max-height: 37.5vh;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.loading-bar {
  width: min(70%, 320px);
  height: 12px;
  border-radius: 999px;
  background: rgba(53, 224, 198, 0.18);
  overflow: hidden;
}

#loading-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  /* Sin transition: el rAF de UIManager anima width+texto con el mismo
     valor — un ease CSS dejaba la barra atrás del % en ráfagas. */
}

#loading-text {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 16px);
  font-family: "BDSans", "CodecPro", "Segoe UI", system-ui, sans-serif;
  animation: loading-pulse 1.6s ease-in-out infinite;
}

#loading-pct {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

#rotate-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #061412;
  z-index: 30;
  text-align: center;
  padding: 24px;
  font-size: 18px;
}

@media (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay {
    display: flex;
  }
}

/* ===== Fundido a negros INJECT → RESULT =====
   Negro pleno cubriendo TODO (z-index por encima del overlay de
   rotación): .on lo sube a opaco ~0.7s antes del cambio de paso;
   al entrar RESULT se quita y la tabla se revela desde negro. */
#fade-black {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 40;
}

#fade-black.on {
  opacity: 1;
}

/* ===== Pantalla "Caso Clínico" (pre-experiencia) ===== */
#case-intro {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* cover: la imagen siempre llena la pantalla, anclada al centro. */
  background: #003125 url("../assets/images/fondo.jpg") center center / cover no-repeat;
  /* Al elegir una vía, todo el overlay se desvanece → la escena 3D
     de abajo "aparece" en fade-in. */
  transition: opacity 0.5s ease;
}

#case-intro.fading {
  opacity: 0;
  pointer-events: none;
}

/* En móvil la tarjeta se justifica arriba: centrada vertical queda
   recortada o flotando raro en pantallas chicas. En escritorio se
   mantiene centrada. */
@media (max-width: 900px) {
  #case-intro {
    align-items: flex-start;
    padding-top: max(16px, env(safe-area-inset-top));
  }
}

/* Teléfono en horizontal (viewport bajo): la tarjeta se compacta con
   tamaños ligados a vh para que todo quepa sin scroll. */
@media (orientation: landscape) and (max-height: 560px) {
  .case-card {
    max-height: 96vh;
    padding: clamp(8px, 2vh, 14px) clamp(7px, 1.5vw, 14px);
  }
  .case-title {
    font-size: clamp(13px, 4.4vh, 21px);
    margin-bottom: clamp(4px, 1vh, 8px);
    min-height: 0;
  }
  .case-lines p {
    font-size: clamp(12px, 2.9vh, 15px);
    margin: 1px 0;
    line-height: 1.25;
  }
  .case-obj {
    font-size: clamp(14px, 3.4vh, 18px);
    margin-top: clamp(4px, 1vh, 8px);
    white-space: nowrap;
  }
  .case-actions {
    gap: clamp(12px, 4vw, 24px);
    margin: clamp(8px, 1.8vh, 14px) 0;
  }
  .case-btn {
    min-width: clamp(140px, 20vw, 180px);
    min-height: 44px; /* touch target mínimo también en landscape bajo */
    font-size: clamp(14px, 3.6vh, 19px);
    padding: clamp(4px, 1vh, 8px) clamp(12px, 2vw, 20px);
  }
  .case-notes {
    font-size: clamp(10px, 2.4vh, 12px);
    line-height: 1.25;
  }
}

.case-card {
  width: min(94vw, 880px);
  /* Ítem flex de #case-intro: sin min-width:0 la tarjeta no baja del
     ancho de su contenido mínimo (la línea 'Objetivo:' en nowrap) y
     desborda el viewport en pantallas angostas. */
  min-width: 0;
  max-height: 94vh;
  overflow-y: auto;
  /* Laterales a 3/4 del original (clamp(18px,4vw,60px)): algo de margen
     para el objetivo sin volver a forzar shrink agresivo — fitToWidth
     garantiza una línea igualmente. */
  padding: clamp(18px, 3.5vh, 40px) clamp(13px, 3vw, 44px);
  border-radius: 14px;
  background: rgba(195, 255, 245, 0.76);
  border: 2px solid #005b41;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
  color: #13252b;
  font-family: "CodecPro", "Segoe UI", system-ui, sans-serif;
}

.case-title {
  text-align: center;
  margin: 0 0 clamp(12px, 2.5vh, 24px);
  font-family: "BDSans", "CodecPro", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  -webkit-text-stroke: 0.2px; /* fake bold: BDSans solo existe en 400 */
  font-size: clamp(24px, 4.4vw, 45px);
  letter-spacing: 0.14em;
  color: #005b41;
}

.case-lines p {
  margin: 3px 0;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 400;
  line-height: 1.35;
}

.case-lines {
  text-align: center;
}

.case-lines .dim {
  color: rgba(19, 37, 43, 0.62);
}

.case-obj {
  text-align: center;
  margin: clamp(10px, 2vh, 18px) auto 0;
  /* Ítem flex (column) con nowrap: sin min-width:0 crece al ancho del
     texto, scrollWidth == clientWidth y makeCaseObjFit nunca detecta
     el desborde para encoger la fuente → se cortaba en móvil. */
  min-width: 0;
  max-width: 100%;
  /* nowrap + fit-to-width en main.js (makeCaseObjFit): el objetivo SIEMPRE
     va en una línea — el JS encoge la fuente desde este techo hasta que
     cabe en el ancho útil de la tarjeta. */
  white-space: nowrap;
  font-size: clamp(16px, 2.6vw, 24px);
  font-weight: 400;
  color: #b8341f;
}

.case-actions {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 12vw, 140px);
  flex-wrap: wrap;
  margin: clamp(16px, 3.5vh, 34px) 0;
}

.case-btn {
  min-width: clamp(170px, 24vw, 250px);
  min-height: 44px; /* touch target mínimo (Apple HIG) */
  padding: clamp(8px, 1.4vh, 14px) clamp(18px, 3vw, 34px);
  border-radius: 10px;
  border: 2px solid #2fbfab;
  background: #a8ece2;
  color: #005b41;
  font-family: "BDSans", "CodecPro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(17px, 2.5vw, 25px);
  /* Fake bold: BDSans solo existe en 400 — el navegador sintetiza el
     bold y el text-stroke engrosa un poco más los trazos. */
  font-weight: 700;
  -webkit-text-stroke: 0.18px;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(53, 224, 198, 0.55), inset 0 0 10px rgba(53, 224, 198, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.case-btn:hover {
  background: #ffffff;
  border-color: #35e0c6;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 28px rgba(53, 224, 198, 1), inset 0 0 10px rgba(53, 224, 198, 0.2);
}

.case-btn:active {
  transform: translateY(0);
}

.case-notes {
  text-align: center;
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(19, 37, 43, 0.72);
}

.case-notes p {
  margin: 6px 0 0;
}

/* ===== Revelado escalonado (playCaseIntro en main.js, ~3s) ===== */
.case-lines,
.case-obj,
.case-actions,
.case-notes {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Los botones entran con pop y no son clicables hasta aparecer. */
.case-actions {
  transform: scale(0.65);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.case-lines.revealed,
.case-obj.revealed,
.case-actions.revealed,
.case-notes.revealed {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* El título queda vacío al inicio del typewriter: reserva su altura
   para que la tarjeta no salte mientras "se escribe". */
.case-title {
  min-height: 1.1em;
}

/* Botón de silencio: esquina inferior derecha, mismo lenguaje visual
   que el resto de la UI (vidrio oscuro + accent). .muted muestra la
   cruz en vez de las ondas. */
#mute-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(53, 224, 198, 0.4);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--accent);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

#mute-btn:hover {
  background: rgba(53, 224, 198, 0.25);
  transform: scale(1.06);
}

#mute-btn svg {
  width: 24px;
  height: 24px;
}

#mute-btn .snd-off {
  display: none;
}

#mute-btn.muted {
  color: var(--error);
  border-color: rgba(255, 90, 90, 0.5);
}

#mute-btn.muted .snd-on {
  display: none;
}

#mute-btn.muted .snd-off {
  display: block;
}

/* ===== Teléfonos / ventanas chicas (iPhone landscape ~390px alto,
   portrait chica cualquier lado) =====
   Los tamaños de la UI DOM estaban pensados en vw — en landscape de
   teléfono el ancho es GRANDE y la referencia inflaba todo. Aquí el
   tier chico reescala con VMIN (manda la dimensión corta: el alto en
   landscape). Solo capas DOM: halo/piquito/sprites 3D no tocan CSS.
   Tablets (iPad ≥600px de alto) conservan los tamaños de escritorio. */
@media (max-height: 540px), (max-width: 760px) {
  #ui {
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  /* Pleca de título (superior izquierda): ×1.1 sobre el tier base
     (15/4.5/22 → ~16.5/5/24). */
  #step-title {
    padding: 9px 22px;
    border-radius: 8px;
    font-size: clamp(16px, 5vmin, 24px);
  }

  /* HUD derecho: cronómetro + barra de volumen — 0.6× del ancho del
     tier (46%/250px → 28%/150px): quedaban más anchos de lo necesario. */
  #hud-tr {
    width: min(28%, 150px);
    gap: 8px;
  }
  #timer-box {
    padding: 6px 14px;
    border-width: 2.5px;
    border-radius: 12px;
    gap: 1px;
  }
  #timer-box .timer-label {
    font-size: clamp(10px, 2.4vmin, 13px);
  }
  #timer {
    font-size: clamp(26px, 8vmin, 44px);
  }
  #progress {
    padding: 6px 10px;
    border-radius: 10px;
    gap: 2px;
  }
  .progress-label {
    font-size: clamp(10px, 2.4vmin, 13px);
  }
  .progress-bar {
    height: 10px;
  }
  .progress-range {
    font-size: clamp(9px, 2.2vmin, 12px);
  }

  /* Pleca de instrucción (burbuja DOM inferior-izquierda): ~0.7× del
     ancho anterior (62%/430px → 44%/300px) — quedaban demasiado
     anchas en landscape de teléfono. */
  #pleca-ui {
    /* Más esquinada que el tier base (24/44px): pegada a la esquina
       inferior izquierda pero sin tocar la orilla — safe-area empuja
       si hay notch/barra de gestos. */
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: min(300px, 44%);
    padding: 8px 14px;
    border-radius: 14px;
    border-width: 2px;
    /* Texto ×1.1 sobre el tier (13/3.6/17 → 14/4/19). */
    font-size: clamp(14px, 4vmin, 19px);
    line-height: 1.25;
  }
  /* Éxito/falla (pleca grande centrada): mismo factor de escala. */
  #pleca-ui.success,
  #pleca-ui.fail {
    /* nowrap (heredado): el único tope real es el viewport — así una
       sola línea nunca queda cortada por el overflow:hidden. */
    max-width: min(460px, 92vw);
    padding: 10px 20px;
    border-radius: 20px;
    border-width: 3px;
    font-size: clamp(17px, 5vmin, 23px);
  }
  /* Pleca fail ~56px de alto aquí → media altura ~28px. */
  #fail-causes {
    top: calc(22% + 28px + 10px);
    padding: 7px 14px;
    border-radius: 10px;
    font-size: clamp(12px, 3.6vmin, 16px);
  }

  /* Mensaje inferior (info/error/success). */
  #message {
    font-size: clamp(10px, 2.6vmin, 13px);
    padding: 5px 10px;
  }

  /* Botón de silencio: algo más discreto pero ≥40px táctil. */
  #mute-btn {
    width: 40px;
    height: 40px;
  }
  #mute-btn svg {
    width: 20px;
    height: 20px;
  }

  /* ===== Caso Clínico: JUSTIFICADO EN ALTURA =====
     La tarjeta SIEMPRE ocupa toda la altura útil (100dvh menos
     safe-area) y reparte sus secciones en columna (space-between):
     no importa el alto del teléfono, el cuadro llena y todo cabe
     sin scroll. Todos los tamaños verticales van en vh — nunca en
     vmin/vw — porque la referencia es la ALTURA, no el ancho. */
  #case-intro {
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .case-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px);
    max-height: calc(100dvh - 16px);
    padding: clamp(8px, 2.4vh, 16px) clamp(10px, 2.5vw, 20px);
    border-radius: 12px;
  }
  .case-title {
    /* ×1.5 móvil y luego ×0.8 global (22/8.4/36 → ~18/6.7/29). */
    font-size: clamp(18px, 6.7vh, 29px);
    margin-bottom: clamp(2px, 1vh, 8px);
    min-height: 1.05em;
  }
  .case-lines p {
    font-size: clamp(11px, 3vh, 14px);
    margin: 1px 0;
    line-height: 1.25;
  }
  .case-obj {
    font-size: clamp(12px, 3.6vh, 17px);
    margin-top: clamp(2px, 1vh, 8px);
    white-space: nowrap; /* makeCaseObjFit encoge la fuente si no cabe */
  }
  .case-actions {
    gap: clamp(10px, 3vw, 20px);
    margin: clamp(4px, 1.6vh, 12px) 0;
  }
  .case-btn {
    min-width: clamp(130px, 20vw, 170px);
    min-height: 40px; /* táctil pero compacto */
    padding: 4px 14px;
    font-size: clamp(12px, 3.6vh, 17px);
    border-radius: 8px;
  }
  .case-notes {
    font-size: clamp(9px, 2.6vh, 12px);
    line-height: 1.3;
  }
  .case-notes p {
    margin: 3px 0 0;
  }

  /* Pantalla de resultados: logo y textos caben en 390px de alto. */
  .result-stage {
    gap: clamp(5px, 1.6vh, 12px);
    padding: clamp(8px, 2vh, 16px) 10px;
  }
  .result-logo {
    height: clamp(84px, 30vh, 160px);
  }
  .result-cols {
    gap: clamp(10px, 4vw, 28px);
  }
  #result-title {
    font-size: clamp(14px, 4.4vh, 26px);
  }
  #result-time {
    font-size: clamp(13px, 3.6vh, 22px);
  }
  #contact-panel .result-logo {
    height: clamp(60px, 20vh, 120px); /* deja sitio a las 3 filas */
  }
  .contact-title {
    font-size: clamp(14px, 4.4vh, 26px);
  }
  .contact-list {
    gap: clamp(4px, 1.2vh, 10px);
  }
  .contact-list > li > a {
    padding: clamp(4px, 1vh, 8px) 14px;
  }
  /* Teléfono horizontal: poco alto bajo la última fila → menú arriba. */
  .contact-mail-menu {
    top: auto;
    bottom: calc(100% + 6px);
  }
  #restart-btn,
  #contact-next-btn {
    scale: 1.1; /* el 1.44 de escritorio quedaba enorme en teléfono */
    min-width: min(240px, 62vw);
    padding: 8px 22px;
  }
}

.hidden {
  display: none !important;
}