/* ============================================================
   FANESCA — fanesca.css
   Composición de las pantallas del minijuego SOBRE el sistema de
   diseño del juego grande (../design-system.css). Aquí no se
   inventan colores ni sombras: todo sale de los tokens.
   Solo se agregan los tokens propios de esta cocina de prep.
   ============================================================ */

:root {
  /* 62px es el alto de contenido; el safe-area-inset-top se SUMA
     aparte (ver .juego-hud) — si no, en un iPhone con notch o
     Dynamic Island la cabecera del nivel queda debajo de esa zona. */
  --prep-hud-h: calc(62px + env(safe-area-inset-top));
  --prep-ctrl-h: 74px;             /* la fila de botones del nivel */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
html, body { height: 100%; }

body {
  font-family: var(--font-text);
  color: var(--text);
  line-height: var(--lead);
  background: radial-gradient(120% 90% at 50% 0%, #5b7f92 0%, #3e5666 60%, #2c3d49 100%);
  min-height: 100vh;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; width: 100%; height: 100%; }
/* icons.js inyecta su bloque de <defs> como un <svg width="0" height="0">.
   La regla de arriba le ganaba a esos atributos y lo estiraba a pantalla
   completa: invisible, pero dejaba el documento del doble de alto y un
   scroll fantasma que en móvil se siente como que la página "rebota". */
svg[width="0"] { width: 0; height: 0; }

/* ---------- El marco: la misma regla que el juego grande ----------
   marco neutro, y el decorado lo pone cada pantalla. Así la escena 3D
   del nivel nunca parece un cuadro colgado encima de otra escena. */
#stage {
  position: relative;
  width: 100%; max-width: var(--frame);
  margin: 0 auto;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--pizarra-700);
  box-shadow: var(--e-4);
}

/* el mundo del puesto: zócalo de talavera, filo de madera y cal.
   Lo llevan las pantallas de papel (portada, mesa, cuaderno); el
   nivel no, porque su fondo ES el mesón 3D. Copiado del juego
   grande a propósito: es el mismo puesto, un directorio más abajo. */
.mundo-puesto {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--patron-mantel),
    linear-gradient(180deg,
      transparent 0, transparent 128px,
      var(--madera-500) 128px, var(--madera-300) 133px, var(--madera-600) 140px,
      var(--peltre-200) 140px, var(--peltre-200) 100%);
}
.mundo-puesto::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 128px;
  background: var(--patron-talavera);
  background-size: var(--patron-talavera-size);
  box-shadow: inset 0 -6px 12px -6px rgba(43,33,41,.35);
}
.mundo-puesto::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px;
  background: var(--papel-picado) repeat-x top left;
  background-size: 112px 30px;
  filter: drop-shadow(0 3px 3px rgba(20,12,18,.35));
}

.screen { display: none; position: relative; z-index: var(--z-scene); height: 100%; }
.screen.active { display: block; animation: pantalla-entra var(--dur-slow) var(--ease-pop) both; }
@keyframes pantalla-entra {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* la .hoja del sistema asume barra de navegación abajo; aquí no hay,
   pero igual hay que respetar el notch/isla arriba y la barra de
   gestos abajo — si no, "La mesa de prep" queda debajo del reloj. */
.hoja {
  padding-top: calc(env(safe-area-inset-top) + var(--sp-4));
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-4));
}

/* ============================================================
   PORTADA
   ============================================================ */
.portada {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
}
.portada-sol {
  position: absolute; top: -40px; right: -30px; width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(255,210,77,.55) 0%, rgba(255,210,77,0) 68%);
  border-radius: 50%; pointer-events: none;
}
.portada-over {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--madera-700);
}
.portada-title {
  font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 800; line-height: 1;
  color: var(--tinta-invert);
  text-shadow: 0 3px 0 var(--rosa-600), 0 5px 12px rgba(0,0,0,.32);
}
.portada-sub {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 600;
  color: var(--tinta-900); opacity: .78;
}
.portada-peek { display: flex; gap: var(--sp-3); margin: var(--sp-1) 0; }
.portada-peek .plate { width: 74px; box-shadow: var(--e-2); }
.portada-peek .plate:nth-child(2) { transform: translateY(-10px) scale(1.08); }
.portada-quote { font-size: var(--t-sm); line-height: var(--lead); }
.portada-quote p + p { margin-top: var(--sp-2); }
.portada-volver {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  color: var(--madera-700); text-decoration: none;
}
/* modo dev: discreto a propósito — es una herramienta de prueba, no
   una opción del juego. Cuando está activo, se marca claro. */
.portada-dev {
  margin-top: var(--sp-2);
  padding: .2rem .7rem;
  font-family: var(--font-text); font-size: var(--t-2xs); font-weight: 600;
  color: var(--text-muted);
  background: rgba(0,0,0,.06);
  border: 1.5px dashed var(--hairline);
  border-radius: var(--r-pill);
  opacity: .7;
}
.portada-dev.activo {
  color: #fff; opacity: 1;
  background: linear-gradient(180deg, var(--rosa-400), var(--rosa-600));
  border-style: solid; border-color: var(--rosa-700);
}

/* ============================================================
   LA MESA DE PREP (mapa de ingredientes)
   ============================================================ */
.olla-estado { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.olla-visual {
  position: relative; flex-shrink: 0;
  width: 68px; height: 56px;
  background: linear-gradient(180deg, var(--chile-400), var(--chile-600));
  border: var(--ring); border-top-width: 4px;
  border-radius: 6px 6px 22px 22px;
  box-shadow: var(--e-2);
  overflow: hidden;
}
.olla-caldo { position: absolute; inset: 5px; display: block; overflow: hidden; border-radius: 3px 3px 18px 18px; background: rgba(74,44,42,.35); }
.olla-nivel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, var(--maiz-300), var(--maiz-400));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5);
  transition: height var(--dur-slow) var(--ease-out);
}
.olla-txt { flex: 1; min-width: 0; }
.olla-frase { font-size: var(--t-sm); color: var(--text-muted); line-height: var(--lead); }

.mesa-lista { display: flex; flex-direction: column; gap: var(--sp-3); }

/* una tarjeta por ingrediente */
.ingrediente {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  padding: var(--sp-3);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: var(--ring);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ingrediente:active { transform: translateY(2px); box-shadow: var(--e-1); }
.ingrediente .plate { width: 60px; flex-shrink: 0; }
/* las tres líneas son <span> dentro de un <button>: sin `block` se
   quedarían en fila y la tarjeta se leería como un párrafo suelto */
.ing-datos { flex: 1; min-width: 0; display: block; }
.ing-tarea {
  display: block;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent);
}
.ing-nombre { display: block; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800; line-height: 1.15; color: var(--text); }
.ing-marca { display: block; font-size: var(--t-xs); line-height: 1.3; color: var(--text-muted); }
.ing-estado { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }

/* cucharas en vez de estrellas: aquí se mide en cucharadas */
.cucharas { display: flex; gap: .18rem; justify-content: center; }
.cuchara { width: 1.15rem; height: 1.15rem; filter: grayscale(1) opacity(.32); transition: filter var(--dur) var(--ease-out), transform var(--dur) var(--ease-pop); }
.cuchara.llena { filter: none; transform: scale(1.12); }
#listo-cucharas .cuchara { width: 2.3rem; height: 2.3rem; }

.ingrediente.bloqueado { filter: grayscale(.75) opacity(.72); }
.ingrediente.bloqueado .plate { opacity: .6; }
.ing-candado { font-size: var(--t-lg); }
.ing-listo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: linear-gradient(180deg, var(--nopal-400), var(--nopal-600));
  border: 2px solid var(--peltre-100);
  color: #fff; font-size: var(--t-sm); font-weight: 800;
  box-shadow: var(--e-1);
}
.mesa-volver {
  display: block; margin-top: var(--sp-5); text-align: center;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  color: var(--text-muted); text-decoration: none;
}

/* ============================================================
   EL NIVEL
   ============================================================ */
.escena { position: absolute; inset: 0; z-index: 0; }
.escena canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* el flash rojo/verde de "algo pasó" */
.destello {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(230,57,70,.5); opacity: 0;
}
.destello.activo { animation: destello-va .45s var(--ease-out) both; }
@keyframes destello-va { 0% { opacity: .85; } 100% { opacity: 0; } }

.juego-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: var(--prep-hud-h);
  display: flex; align-items: center; gap: var(--sp-2);
  /* mismo var(--sp-2) de siempre, sumado al inset del notch/isla */
  padding: calc(env(safe-area-inset-top) + var(--sp-2)) var(--sp-3) 0;
  /* la barra es casi toda aire: si capturara el dedo, se comería los
     toques sobre lo alto del ingrediente, que con el choclo de pie
     llega hasta arriba. Solo los controles reciben el dedo. */
  pointer-events: none;
}
.hud-salir, .hud-tiempo { pointer-events: auto; }
.hud-salir {
  flex-shrink: 0;
  width: 2.3rem; height: 2.3rem;
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; line-height: 1;
  color: var(--text);
  background: var(--peltre-100);
  border: 2px solid var(--hairline);
  border-radius: 50%;
  box-shadow: var(--e-1);
}
.hud-centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.hud-tarea {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; line-height: 1.1;
  color: var(--tinta-invert);
  text-shadow: 0 1px 0 rgba(74,44,42,.55), 0 2px 6px rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-tiempo { flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 4.2rem; justify-content: center; }
.hud-tiempo.apurado { color: #fff; background: linear-gradient(180deg, var(--chile-400), var(--chile-600)); border-color: var(--chile-600); }

/* el aviso grande de peligro, sobre la escena */
.hud-alerta {
  position: absolute; top: calc(var(--prep-hud-h) + var(--sp-2)); left: 50%;
  transform: translateX(-50%) translateY(-8px); z-index: 4;
  max-width: 90%;
  padding: .3rem .9rem;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--chile-400), var(--chile-600));
  border: 2px solid var(--peltre-100);
  border-radius: var(--r-pill);
  box-shadow: var(--e-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hud-alerta.visible { opacity: 1; transform: translateX(-50%) translateY(0); animation: alerta-late 1s ease-in-out infinite; }
@keyframes alerta-late { 50% { box-shadow: var(--e-2), 0 0 0 6px rgba(230,57,70,.25); } }

/* botones que cada nivel pide (girar la mazorca, etc.) */
.juego-controles {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + var(--sp-3));
  z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  pointer-events: none;
}
.ctrl {
  pointer-events: auto;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-width: 3.4rem; height: 3.4rem; padding: 0 .7rem;
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  color: var(--tinta-900);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-300));
  border: 2.5px solid var(--madera-500); border-bottom-width: 5px;
  border-radius: var(--r-pill);
  box-shadow: var(--gloss), var(--e-2);
  transition: transform var(--dur-fast) var(--ease-out), border-bottom-width var(--dur-fast) var(--ease-out);
}
.ctrl:active, .ctrl.presionado { transform: translateY(2.5px); border-bottom-width: 2.5px; box-shadow: var(--inset); }
.ctrl-tip { font-family: var(--font-text); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }

.juego-pista {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + var(--prep-ctrl-h) + var(--sp-3));
  z-index: 4; width: max-content; max-width: 88%;
  padding: .34rem 1rem;
  font-family: var(--font-text); font-size: var(--t-xs); font-weight: 600; text-align: center;
  color: var(--tinta-invert);
  background: rgba(74,44,42,.86);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  box-shadow: var(--e-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.juego-pista.visible { opacity: 1; }

/* ============================================================
   MODALES
   ============================================================ */
.brief-art { width: 88px; }
.brief-art .plate { width: 100%; }
.brief-bicho {
  font-size: var(--t-xs); font-weight: 700; line-height: var(--lead);
  color: var(--chile-600);
  background: rgba(230,57,70,.09);
  border: 2px dashed rgba(230,57,70,.32);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.brief-mejor, .listo-tiempo, .listo-mejor, .final-total {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  color: var(--text-muted);
}
.listo-tiempo { font-size: var(--t-xl); color: var(--text); }
.sheet--mal { border-color: var(--chile-400); }
.arruinado-ic { font-size: 2.6rem; line-height: 1; animation: bicho-tiembla .6s var(--ease-out) 3; }
@keyframes bicho-tiembla { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.final-art { width: 110px; }
.sheet .btn + .btn { margin-top: calc(var(--sp-2) * -.2); }

/* ============================================================
   PANTALLAS CORTAS: que nada se salga del marco
   ============================================================ */
@media (max-height: 680px) {
  .portada-peek .plate { width: 60px; }
  .portada-quote { font-size: var(--t-xs); }
  .portada-title { font-size: var(--t-2xl); }
}

/* ============================================================
   EL CUADERNO — lo que el plato cuenta
   ============================================================ */
.cuaderno-acceso {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) auto 0;
  padding: .34rem .9rem;
  font-size: var(--t-lg);
  background: linear-gradient(180deg, var(--peltre-100), var(--peltre-300));
  border: 2.5px solid var(--madera-500); border-bottom-width: 4px;
  border-radius: var(--r-pill);
  box-shadow: var(--gloss), var(--e-1);
}
.cuaderno-acceso:active { transform: translateY(1.5px); border-bottom-width: 2.5px; }
.cuaderno-acceso-txt {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted);
}
/* el punto que avisa "hay algo nuevo que leer" */
.cuaderno-nuevo {
  position: absolute; top: -3px; right: -3px;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--chile-500);
  border: 2px solid var(--peltre-100);
  animation: nuevo-late 1.6s ease-in-out infinite;
}
@keyframes nuevo-late { 50% { transform: scale(1.35); } }

.cuaderno-entradilla {
  /* cae justo sobre la franja de azulejo y madera del fondo: sin
     superficie propia, ahí no se lee */
  font-size: var(--t-sm); line-height: var(--lead); color: var(--text);
  font-style: italic; text-align: center;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: rgba(255,253,246,.92);
  border: 2px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
}
.capitulo {
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border: var(--ring); border-radius: var(--r-lg);
  box-shadow: var(--e-2);
}
.capitulo.cerrado { filter: grayscale(.9) opacity(.62); }
.capitulo-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.capitulo-head .plate { width: 46px; flex-shrink: 0; }
.capitulo-titulo {
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 800;
  line-height: 1.15; color: var(--text);
}
.capitulo p { font-size: var(--t-sm); line-height: var(--lead); color: var(--text); }
.capitulo p + p { margin-top: var(--sp-3); }
.capitulo-cerrojo { font-size: var(--t-sm); color: var(--text-muted); font-style: italic; }

/* los granos, repartidos por orilla */
.granos-mapa { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); }
.grano-chip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .16rem .6rem;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
}
.grano-chip::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; }
.grano-chip.aca  { color: var(--nopal-600); background: rgba(108,191,90,.14); border-color: rgba(108,191,90,.4); }
.grano-chip.aca::before  { background: var(--nopal-500); }
.grano-chip.alla { color: var(--rosa-700); background: rgba(217,79,114,.12); border-color: rgba(217,79,114,.36); }
.grano-chip.alla::before { background: var(--rosa-500); }
.granos-leyenda { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--t-2xs); }

/* la cita, tratada como cita */
.cita {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(242,179,31,.12);
  border-left: 4px solid var(--maiz-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cita p {
  font-size: var(--t-md); line-height: var(--lead); font-style: italic; color: var(--text);
}
.cita footer {
  margin-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  color: var(--accent-ink);
}
.cita footer span { display: block; font-family: var(--font-text); font-weight: 400; color: var(--text-muted); font-style: normal; }

.cuaderno-fuentes { margin-bottom: var(--sp-4); }
.cuaderno-fuentes ul { list-style: none; margin-top: var(--sp-2); }
.cuaderno-fuentes li { font-size: var(--t-xs); line-height: 1.5; margin-bottom: .3rem; }
.cuaderno-fuentes a { color: var(--accent-ink); }

/* ---------- la voz sobre la escena ---------- */
.voz {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -6px); z-index: 5;
  width: min(340px, 88%);
  padding: var(--sp-4);
  text-align: center;
  background: rgba(74, 44, 42, .93);
  border: 2px solid var(--maiz-400);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.voz.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
.voz-texto {
  font-family: var(--font-text); font-size: var(--t-md); font-style: italic; line-height: var(--lead);
  color: var(--tinta-invert);
}
.voz-quien {
  margin-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--maiz-300);
}

/* ---------- la tarjeta que se gana al terminar ---------- */
.tarjeta {
  width: 100%; text-align: left;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(74,44,42,.05);
  border: 2px dashed var(--hairline);
  border-radius: var(--r-md);
}
.tarjeta .label { margin-bottom: var(--sp-1); }
.tarjeta-titulo {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 800;
  line-height: 1.2; color: var(--text); margin-bottom: var(--sp-1);
}
.tarjeta-texto { font-size: var(--t-sm); line-height: var(--lead); color: var(--text-muted); }
.tarjeta-cita {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: rgba(242,179,31,.14);
  border-left: 3px solid var(--maiz-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.tarjeta-cita p { font-size: var(--t-sm); font-style: italic; line-height: var(--lead); color: var(--text); }
.tarjeta-cita footer {
  margin-top: var(--sp-1);
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700; color: var(--accent-ink);
}
.brief-nota {
  font-size: var(--t-xs); line-height: var(--lead); font-style: italic;
  color: var(--text-muted);
}
.final-cierre { font-size: var(--t-sm); line-height: var(--lead); color: var(--text-muted); }

.final-voz {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  font-size: var(--t-sm); font-style: italic; line-height: var(--lead);
  color: var(--text);
  background: rgba(245,166,35,.13);
  border-left: 3px solid var(--maiz-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  text-align: left;
}
.final-voz span {
  display: block; margin-top: var(--sp-1);
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 700;
  font-style: normal; color: var(--accent-ink);
}