/* ============================================================
   base.css — Palm · Crema v2 (prototipo descartable)
   Tokens + clases de componentes, con medidas reales leídas de
   los bloques del nodo 186:32. NINGÚN VALOR A MANO.
   Desvíos del sistema documentados en docs/desvios-figma.md.
   Componentes agregados (faltaban en v2, usados en varias páginas, con tokens):
   `.avatar-banco` (círculo con inicial — bancos en Subir·06, comercios en Gastos),
   `.num-paso` (número de paso en listas «cómo hacer», Subir·08),
   `.burbuja` (globo de diálogo navy de las lecciones de Aprender) y
   `.barra-progreso` (+ `__fill`: barra de progreso de lección/nivel).
   ============================================================ */

/* ---- Host Grotesk self-hosted (woff2 local en fonts/). Es fuente VARIABLE:
   un archivo por subset cubre 400–700 (font-weight: 400 700). Sin <link> a
   Google. font-display:swap + <link rel=preload> en index.html evitan el FOUT. */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/host-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/host-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Color (colección «Palm · Crema», 186:37) ---- */
  --accion-azul:        #26428b;
  --texto-primario:     #101b3b;
  --texto-etiqueta:     #101b3bb8; /* 72% */
  --texto-secundario:   #101b3b9e; /* 62% */
  --texto-terciario:    #101b3b80; /* 50% */
  --fondo-crema:        #fffcf5;
  --fondo-navy:         #101b3b;
  --superficie-arena:   #f6f3ed;
  --borde-divisor:      #e6e2da;
  --acento-lila:        #bac3ea;
  --acento-tinte:       #7b8bd42e; /* 18% */
  --logro-dorado:       #f0c14d;
  --logro-dorado-texto: #b8860b;
  --estado-positivo:        #1f7a4d;
  --estado-positivo-tinte:  #7fd1a647; /* 28% */
  --estado-exigente:        #d9784a;
  --estado-negativo:        #c2462b;
  --estado-negativo-tinte:  #e8836f38; /* 22% */
  --racha-fuego:        #ff8a1f;
  --racha-fuego-texto:  #d9560b;
  --racha-tinte:        #ff8a1f24; /* 14% */

  /* categorías de gasto */
  --cat-supermercado: #26428b;
  --cat-restaurantes: #7b8bd4;
  --cat-transporte:   #d9784a;
  --cat-cafe:         #2f8c7a;
  --cat-suscripciones:#b4659e;
  --cat-salud:        #c2462b;
  --cat-hogar:        #8a6d3b;
  --cat-otros:        #8a90a6;

  /* ---- Tokens locales: colores que los componentes usan pero
     NO están en las variables de Figma (ver desvios-figma.md C) ---- */
  --navy-06: #101b3b0f; /* 6%  */
  --navy-08: #101b3b14; /* 8%  */
  --navy-12: #101b3b1f; /* 12% */
  --navy-14: #101b3b24; /* 14% */
  --crema-10: #fffcf51a; /* 10% */
  --crema-12: #fffcf51f; /* 12% */
  --azul-10:  #26428b1a; /* 10% — etiqueta RECOMENDADO */
  --racha-brasa:       #ffd23f;
  --racha-brasa-tinte: #ffd23f59; /* 35% */

  /* ---- Tipografía (Host Grotesk) ---- */
  /* letter-spacing = valor Figma / 100 en em (−4 → −0.04em) */
  --fuente: "Host Grotesk", system-ui, -apple-system, sans-serif;
  --escala-texto: 1; /* lo pisa .telefono según el selector */

  --fs-hero:       calc(44px * var(--escala-texto));
  --fs-grande:     calc(32px * var(--escala-texto));
  --fs-titulo-28:  calc(28px * var(--escala-texto));
  --fs-titulo-24:  calc(24px * var(--escala-texto));
  --fs-titulo-20:  calc(20px * var(--escala-texto));
  --fs-cuerpo-16:  calc(16px * var(--escala-texto));
  --fs-cuerpo-14:  calc(14px * var(--escala-texto));
  --fs-etiqueta-14:calc(14px * var(--escala-texto));
  --fs-etiqueta-12:calc(12px * var(--escala-texto));
  --fs-micro-10:   calc(10px * var(--escala-texto));

  --ls-hero:    -0.04em;
  --ls-grande:  -0.04em;
  --ls-titulo2: -0.02em;
  --ls-titulo1: -0.01em;
  --ls-mayus:    0.06em;
  --ls-micro:    0.02em;

  --peso-regular:  400;
  --peso-medium:   500;
  --peso-semibold: 600;
  --peso-bold:     700;

  /* line-height: display tenso (100%), texto corrido respirable */
  --lh-display: 1.0;
  --lh-texto:   1.35;

  /* ---- Espaciado (4·8·12·16·24·32) y gutter 20 ---- */
  --esp-2:  2px;  /* medio-paso, solo detalles (cursor, pads de racha) */
  --esp-4:  4px;
  --esp-6:  6px;
  --esp-8:  8px;
  --esp-10: 10px; /* gap entre opciones del alta (frame) */
  --esp-12: 12px;
  --esp-14: 14px;
  --esp-16: 16px;
  --esp-18: 18px; /* padding vertical del botón */
  --esp-24: 24px;
  --esp-28: 28px; /* padding superior de pantalla (frame de alta) */
  --esp-32: 32px;
  --gutter: 20px;

  /* ---- Radios ---- */
  --radio-chip:    12px;
  --radio-campo:   16px; /* componente Campo v2 */
  --radio-tarjeta: 20px; /* tarjetas / opciones / grupos de lista */
  --radio-hoja:    28px;
  --radio-casilla: 7px;
  --radio-pill:    999px;

  /* ---- Íconos Lucide ---- */
  --icono-trazo: 1.9;

  /* ---- Motion (spec docs/motion.md) ----
     Dos duraciones y dos curvas, igual que el proto viejo, adaptadas a Crema v2.
     --t-move: algo entra o sale de pantalla · --t-state: un color/estado cambia. */
  --t-move:  260ms;
  --t-state: 150ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);   /* entra y frena (navegación, hojas) */
  --ease-pop: cubic-bezier(.3, 1.5, .4, 1);  /* rebote corto (tildes, confeti, toast) */
}

/* ============================================================
   Reset mínimo
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente);
  color: var(--texto-primario);
  background: var(--superficie-arena);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
p { margin: 0; }

/* íconos Lucide inyectados por app.js */
.icono {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: var(--icono-trazo);
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============================================================
   Motor de transiciones (h · spec docs/motion.md)
   El router desliza DOS capas: #pantalla (la que entra) y #pantalla-ghost
   (copia de la que sale). Modos: push/pop (horizontal), modal/dismiss
   (vertical), tab (fade corto), fade. 260 ms, curva ease-out.
   ============================================================ */
#pantalla       { z-index: 1; }
#pantalla-ghost { z-index: 0; overflow: hidden; pointer-events: none; }
#pantalla-ghost[hidden] { display: none; }
#pantalla-ghost.ghost-encima { z-index: 2; }   /* pop / dismiss: la que sale va arriba */

.nav-in-right     { animation: nav-in-right     var(--t-move)  var(--ease-out) both; }
.nav-in-left      { animation: nav-in-left      var(--t-move)  var(--ease-out) both; }
.nav-in-up        { animation: nav-in-up        var(--t-move)  var(--ease-out) both; }
.nav-in-fade      { animation: nav-in-fade      var(--t-move)  var(--ease-out) both; }
.nav-in-fade-corto{ animation: nav-in-fade      var(--t-state) var(--ease-out) both; }
.nav-out-left     { animation: nav-out-left     var(--t-move)  var(--ease-out) both; }
.nav-out-right    { animation: nav-out-right    var(--t-move)  var(--ease-out) both; }
.nav-out-down     { animation: nav-out-down     var(--t-move)  var(--ease-out) both; }
.nav-out-fade     { animation: nav-out-fade     var(--t-move)  var(--ease-out) both; }
.nav-out-fade-corto{ animation: nav-out-fade    var(--t-state) var(--ease-out) both; }

@keyframes nav-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nav-in-left  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes nav-in-up    { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes nav-in-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes nav-out-right{ from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes nav-out-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes nav-out-fade { from { opacity: 1; } to { opacity: 0; } }

/* Menos movimiento: sin deslizados, solo un fade corto del entrante. */
@media (prefers-reduced-motion: reduce) {
  .nav-in-right, .nav-in-left, .nav-in-up, .nav-in-fade, .nav-in-fade-corto {
    animation: nav-in-fade var(--t-state) var(--ease-out) both;
  }
  .nav-out-left, .nav-out-right, .nav-out-down, .nav-out-fade, .nav-out-fade-corto { animation: none; }
}

/* ============================================================
   Tipografía (escala de v2). Display con lh tenso; texto a 1.35.
   ============================================================ */
.t-hero    { font-size: var(--fs-hero);      font-weight: var(--peso-bold);     letter-spacing: var(--ls-hero);    line-height: var(--lh-display); }
.t-grande  { font-size: var(--fs-grande);    font-weight: var(--peso-bold);     letter-spacing: var(--ls-grande);  line-height: var(--lh-display); }
.t-titulo28{ font-size: var(--fs-titulo-28); font-weight: var(--peso-regular);  letter-spacing: var(--ls-titulo2); line-height: var(--lh-display); }
.t-titulo24{ font-size: var(--fs-titulo-24); font-weight: var(--peso-regular);  letter-spacing: var(--ls-titulo2); line-height: var(--lh-display); }
.t-titulo20{ font-size: var(--fs-titulo-20); font-weight: var(--peso-semibold); letter-spacing: var(--ls-titulo1); line-height: var(--lh-display); }
.t-cuerpo  { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-regular);  line-height: var(--lh-texto); }
.t-cuerpo-fuerte { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-semibold); line-height: var(--lh-texto); }
.t-cuerpo14{ font-size: var(--fs-cuerpo-14); font-weight: var(--peso-regular);  line-height: var(--lh-texto); }
.t-etiqueta14 { font-size: var(--fs-etiqueta-14); font-weight: var(--peso-medium); line-height: var(--lh-texto); }
.t-etiqueta12 { font-size: var(--fs-etiqueta-12); font-weight: var(--peso-medium); line-height: var(--lh-texto); }
.t-mayus  { font-size: var(--fs-etiqueta-12); font-weight: var(--peso-semibold); letter-spacing: var(--ls-mayus); text-transform: uppercase; line-height: var(--lh-display); }
.t-micro  { font-size: var(--fs-micro-10);  font-weight: var(--peso-semibold); letter-spacing: var(--ls-micro); line-height: var(--lh-display); }

/* título de alta: frame 36 Regular → normalizado a 32 (ver desvios A#1) */
.t-alta-titulo { font-size: var(--fs-grande); font-weight: var(--peso-regular); letter-spacing: var(--ls-titulo2); line-height: var(--lh-display); }
/* marca «Palm» en encabezados de alta: 24 Bold azul */
.t-marca  { font-size: var(--fs-titulo-24); font-weight: var(--peso-bold); letter-spacing: var(--ls-titulo2); color: var(--accion-azul); line-height: var(--lh-display); }

.c-secundario { color: var(--texto-secundario); }
.c-terciario  { color: var(--texto-terciario); }
.c-etiqueta   { color: var(--texto-etiqueta); }

/* ============================================================
   Botón (188:32) — pastilla, 16 SemiBold, padding 18/24.
   Una sola acción primaria por pantalla. Texto debajo, a 12.
   ============================================================ */
.boton {
  display: flex; align-items: center; justify-content: center;
  gap: var(--esp-8); width: 100%;
  padding: var(--esp-18) var(--esp-24);
  border-radius: var(--radio-pill);
  background: var(--accion-azul); color: var(--fondo-crema);
  font-size: var(--fs-cuerpo-16); font-weight: var(--peso-semibold); line-height: 1;
}
.boton .icono { width: 18px; height: 18px; }
.boton--texto       { background: none; color: var(--accion-azul); }
.boton--sobrenavy   { background: var(--fondo-crema); color: var(--texto-primario); }
.boton--destructivo { background: var(--estado-negativo); color: var(--fondo-crema); }
.boton--deshab      { opacity: 0.4; pointer-events: none; } /* frame se ve lila claro — ver desvios D#22 */

/* Botón de acceso (220:206) — misma caja; Apple navy, Google borde navy.
   Decisión: NO se renderiza hasta tener su slice. Queda la clase lista. */
.boton-acceso        { display:flex; align-items:center; justify-content:center; width:100%;
  padding: var(--esp-18) var(--esp-24); border-radius: var(--radio-pill);
  font-size: var(--fs-cuerpo-16); font-weight: var(--peso-semibold); line-height:1; }
.boton-acceso--apple { background: var(--fondo-navy); color: var(--fondo-crema); }
.boton-acceso--google{ border: 1px solid var(--texto-primario); color: var(--texto-primario); }

/* Botón de ícono (219:209) — círculo 40. Crema: navy 6%. Sobre navy: crema 12%. */
.boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radio-pill);
  background: var(--navy-06); color: var(--texto-primario);
}
.boton-icono--sobrenavy { background: var(--crema-12); color: var(--fondo-crema); }

/* Botón flotante (220:193) — 56, azul, ícono crema 24, sombra. */
.boton-flotante {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radio-pill);
  background: var(--accion-azul); color: var(--fondo-crema);
  box-shadow: 0 6px 8px rgba(16,27,59,0.18);
}
.boton-flotante .icono { width: 24px; height: 24px; }

/* ============================================================
   Campo (188:112) — rótulo 12 Medium; caja arena radio 16, pad 16,
   valor 17→16. Foco borde azul 2; error rojo 2 + ayuda rojo.
   ============================================================ */
.campo { display: flex; flex-direction: column; gap: var(--esp-8); width: 100%; }
.campo__label { font-size: var(--fs-etiqueta-12); font-weight: var(--peso-medium); color: var(--texto-etiqueta); line-height: var(--lh-display); }
.campo__caja {
  display: flex; align-items: center; gap: var(--esp-8); width: 100%;
  padding: var(--esp-16); border-radius: var(--radio-campo);
  background: var(--superficie-arena); border: 2px solid transparent;
}
.campo__caja input {
  flex: 1; border: none; background: none; outline: none;
  font-family: inherit; font-size: var(--fs-cuerpo-16);
  font-weight: var(--peso-regular); color: var(--texto-primario);
}
.campo__caja input::placeholder { color: var(--texto-terciario); }
.campo__caja:focus-within { border-color: var(--accion-azul); }
.campo--error .campo__caja { border-color: var(--estado-negativo); }
.campo__error { font-size: var(--fs-etiqueta-12); font-weight: var(--peso-medium); color: var(--estado-negativo); line-height: var(--lh-display); }

/* ============================================================
   Ícono en círculo (187:196): suave = lila + navy («lo tuyo»),
   lleno = azul + crema («lo que hace Palm»). 32 por defecto, 40 en
   listas/opciones. Ícono interno a ~50% del círculo.
   ============================================================ */
.icono-circulo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radio-pill); flex-shrink: 0;
}
.icono-circulo--suave { background: var(--acento-lila); color: var(--texto-primario); }
.icono-circulo--lleno { background: var(--accion-azul);  color: var(--fondo-crema); }
.icono-circulo .icono { width: 16px; height: 16px; }
.icono-circulo--40 { width: 40px; height: 40px; }
.icono-circulo--40 .icono { width: 20px; height: 20px; }

/* Avatar de letra (banco / perfil): círculo lila con inicial(es) */
.avatar-banco {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radio-pill);
  background: var(--acento-lila); color: var(--texto-primario);
  font-size: var(--fs-etiqueta-12); font-weight: var(--peso-semibold);
}
/* Número de paso (listas «cómo hacer»): círculo azul con el número */
.num-paso {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: var(--radio-pill);
  background: var(--accion-azul); color: var(--fondo-crema);
  font-size: var(--fs-etiqueta-12); font-weight: var(--peso-semibold);
}
/* Burbuja de diálogo (lecciones de Aprender) — navy, texto crema */
.burbuja {
  padding: var(--esp-16) var(--esp-18); border-radius: var(--radio-hoja);
  background: var(--accion-azul); color: var(--fondo-crema);
  font-size: var(--fs-titulo-20); font-weight: var(--peso-semibold); line-height: var(--lh-texto);
}
/* Barra de progreso (lección, nivel, objetivo…) — pista navy 12, relleno azul */
.barra-progreso { height: 8px; border-radius: var(--radio-pill); background: var(--navy-12); overflow: hidden; width: 100%; }
.barra-progreso__fill { height: 100%; background: var(--accion-azul); border-radius: var(--radio-pill); }

/* ============================================================
   Opción (188:72) — arena radio 20, pad 12/16, gap 12. Texto 15→16.
   Elegida: borde azul 2 + control azul con check.
   ============================================================ */
.opcion {
  display: flex; align-items: center; gap: var(--esp-12); width: 100%;
  padding: var(--esp-12) var(--esp-16) var(--esp-12) var(--esp-12);
  border-radius: var(--radio-tarjeta); background: var(--superficie-arena);
  border: 2px solid transparent; text-align: left;
}
.opcion--elegida { border-color: var(--accion-azul); }
.opcion__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.opcion__titulo { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-regular); line-height: var(--lh-display); }
.opcion__bajada { font-size: var(--fs-cuerpo-14); color: var(--texto-secundario); line-height: var(--lh-texto); margin-top: var(--esp-2); }
.opcion__control {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 1.5px solid var(--texto-primario);
  display: inline-flex; align-items: center; justify-content: center;
}
.opcion__control--unica   { border-radius: var(--radio-pill); }
.opcion__control--multiple{ border-radius: 6px; }
.opcion--elegida .opcion__control { background: var(--accion-azul); border-color: var(--accion-azul); color: var(--fondo-crema); }
.opcion__control .icono { width: 14px; height: 14px; display: none; }
.opcion--elegida .opcion__control .icono { display: block; }

/* ============================================================
   Fila y grupo de lista (188:130) — la fila NO tiene fondo; vive en
   un grupo arena (radio 20) con divisores y sangría 64. Nunca blancas.
   ============================================================ */
.grupo-lista { display: flex; flex-direction: column; width: 100%;
  background: var(--superficie-arena); border-radius: var(--radio-tarjeta); overflow: hidden; }
.fila {
  display: flex; align-items: center; gap: var(--esp-12); width: 100%;
  padding: var(--esp-12) var(--esp-16) var(--esp-12) var(--esp-12); text-align: left;
}
.fila + .fila { border-top: 1px solid var(--borde-divisor); }
.fila__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.fila__titulo { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-medium); line-height: var(--lh-display); }
.fila__bajada { font-size: var(--fs-cuerpo-14); color: var(--texto-secundario); line-height: var(--lh-texto); margin-top: var(--esp-2); }
.fila__valor  { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-semibold); }
.fila__chevron { width: 18px; height: 18px; color: var(--texto-terciario); }
/* divisor alineado al texto (sangría 64 = 40 ícono + 12 gap + 12 pad) */
.grupo-lista--sangria .fila + .fila { border-top: none; position: relative; }
.grupo-lista--sangria .fila + .fila::before {
  content: ""; position: absolute; top: 0; left: 64px; right: 0;
  border-top: 1px solid var(--borde-divisor);
}

/* ============================================================
   Nota (188:197) — caja radio 16, pad 16/14, gap 12. Texto 14.
   Consejo = lila + lamparita · Aviso = tinte rojo + alerta · Enlace = tinte + flecha.
   ============================================================ */
.nota {
  display: flex; gap: var(--esp-12); align-items: flex-start; width: 100%;
  padding: var(--esp-14) var(--esp-16); border-radius: var(--radio-campo);
  font-size: var(--fs-cuerpo-14); color: var(--texto-primario); line-height: var(--lh-texto);
}
.nota .icono { width: 20px; height: 20px; }
.nota--consejo { background: var(--acento-lila); }
.nota--aviso   { background: var(--estado-negativo-tinte); }
.nota--enlace  { background: var(--acento-tinte); align-items: center; }

/* ============================================================
   Aviso (220:158) — pastilla plena, pad 12/6, gap 6, texto 13→14 SemiBold crema.
   Negativo (rojo) · Exigente (naranja) · Azul (dato de Palm).
   ============================================================ */
.aviso {
  display: inline-flex; align-items: center; gap: var(--esp-6);
  padding: var(--esp-6) var(--esp-12); border-radius: var(--radio-pill);
  font-size: var(--fs-cuerpo-14); font-weight: var(--peso-semibold);
  color: var(--fondo-crema); line-height: 1;
}
.aviso .icono { width: 14px; height: 14px; }
.aviso--negativo { background: var(--estado-negativo); }
.aviso--exigente { background: var(--estado-exigente); }
.aviso--azul     { background: var(--accion-azul); }

/* ============================================================
   Chip / atajo (187:283) — pill, pad 14/8, texto 13→14 Medium.
   Normal arena · elegido azul.
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: var(--esp-8);
  padding: var(--esp-8) var(--esp-14); border-radius: var(--radio-pill);
  background: var(--superficie-arena); color: var(--texto-primario);
  font-size: var(--fs-etiqueta-14); font-weight: var(--peso-medium); line-height: 1;
}
.chip--elegido { background: var(--accion-azul); color: var(--fondo-crema); }

/* ============================================================
   Selector segmentado (187:253) — riel arena h44 p4 pill; pastilla azul.
   Sobre navy: riel crema 10% + pastilla crema.
   ============================================================ */
.segmentado { display: inline-flex; padding: var(--esp-4); border-radius: var(--radio-pill); background: var(--superficie-arena); height: 44px; }
.segmentado button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--esp-16); border-radius: var(--radio-pill);
  font-size: var(--fs-cuerpo-14); font-weight: var(--peso-medium); color: var(--texto-secundario);
}
.segmentado button[aria-selected="true"] { background: var(--accion-azul); color: var(--fondo-crema); font-weight: var(--peso-semibold); }
.segmentado--navy { background: var(--crema-10); }
.segmentado--navy button { color: var(--crema-10); }
.segmentado--navy button[aria-selected="true"] { background: var(--fondo-crema); color: var(--texto-primario); }

/* ============================================================
   Barra de pestañas (187:35) — pastilla FLOTANTE icon-only, arena + borde,
   h60, pad 10/8, ítems 56×44. Activa: pastilla lila + ícono navy; resto navy 55%.
   ============================================================ */
.tabbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: var(--esp-8) var(--esp-12);
  background: var(--superficie-arena); border: 1px solid var(--borde-divisor);
  border-radius: var(--radio-pill);
  /* safe-area: despega la barra del indicador de inicio (iOS standalone) */
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 44px; border-radius: var(--radio-pill);
  color: color-mix(in srgb, var(--texto-primario) 55%, transparent);
}
.tabbar button .icono { width: 22px; height: 22px; }
.tabbar button[aria-selected="true"] { background: var(--acento-lila); color: var(--texto-primario); }

/* ============================================================
   Estados de interacción (i · spec docs/motion.md)
   Al tocar: escala .98 + oscurecido sutil (overlay navy translúcido, sirve sobre
   crema, arena o azul). Transición --t-state. Foco visible solo por teclado.
   ============================================================ */
.boton, .boton-icono, .boton-flotante, .boton-acceso,
.opcion, .fila, .chip, .segmentado button, .tabbar button {
  transition: transform var(--t-state) var(--ease-out), background-color var(--t-state) ease;
}
.boton:active, .boton-icono:active, .boton-flotante:active, .boton-acceso:active,
.opcion:active, .fila:active, .chip:active, .segmentado button:active, .tabbar button:active {
  transform: scale(.98);
  background-image: linear-gradient(var(--navy-08), var(--navy-08));   /* oscurece el fondo que haya */
}
.boton--deshab:active { transform: none; background-image: none; }     /* deshabilitado no reacciona */

/* Foco accesible: anillo azul, solo con teclado (no en click/tap). */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex="0"]:focus-visible, .opcion:focus-visible, .fila:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--accion-azul);
  outline-offset: 2px;
}
/* el título recibe foco por programa (accesibilidad, o): no es tabulable, sin anillo visible */
[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .boton:active, .boton-icono:active, .boton-flotante:active, .boton-acceso:active,
  .opcion:active, .fila:active, .chip:active, .segmentado button:active, .tabbar button:active {
    transform: none;   /* sin movimiento; queda el oscurecido */
  }
}

/* ============================================================
   Círculo de estado (187:164) — pleno + ícono crema. 24 o 40.
   Acierto positivo · Error negativo · Logro dorado (ícono navy) · Pendiente arena+borde.
   ============================================================ */
.circulo-estado {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radio-pill); color: var(--fondo-crema);
}
.circulo-estado .icono { width: 13px; height: 13px; }
.circulo-estado--40 { width: 40px; height: 40px; }
.circulo-estado--40 .icono { width: 22px; height: 22px; }
.circulo-estado--acierto   { background: var(--estado-positivo); }
.circulo-estado--error     { background: var(--estado-negativo); }
.circulo-estado--logro     { background: var(--logro-dorado); color: var(--fondo-navy); }
.circulo-estado--pendiente { background: var(--superficie-arena); border: 1px solid var(--borde-divisor); color: var(--texto-terciario); }

/* ============================================================
   Casilla (220:180) — 22, radio 7. Marcada azul+check crema; vacía borde navy 1,5.
   ============================================================ */
.casilla {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radio-casilla);
  border: 1.5px solid var(--texto-primario); flex-shrink: 0;
}
.casilla--marcada { background: var(--accion-azul); border-color: var(--accion-azul); color: var(--fondo-crema); }
.casilla .icono { width: 14px; height: 14px; }
.casilla:not(.casilla--marcada) .icono { display: none; }

/* ============================================================
   Interruptor (187:245) — 51×31. Encendido azul, perilla a la derecha.
   ============================================================ */
.interruptor {
  position: relative; width: 51px; height: 31px; border-radius: var(--radio-pill);
  background: var(--navy-12); flex-shrink: 0; transition: background .15s;
}
.interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: var(--radio-pill);
  background: var(--fondo-crema); box-shadow: 0 1px 2px rgba(16,27,59,0.25); transition: left .15s;
}
.interruptor--on { background: var(--accion-azul); }
.interruptor--on::after { left: 22px; }

/* ============================================================
   Pasos (188:213) — segmentos h4 gap6 radio2. Hecho azul; resto navy 12% (desvios D#21).
   ============================================================ */
.pasos { display: flex; gap: var(--esp-6); width: 100%; }
.pasos span { flex: 1; height: 4px; border-radius: 2px; background: var(--navy-12); }
.pasos span.hecho { background: var(--accion-azul); }

/* Puntos (219:192) — activo azul 24×8; resto navy 12% 8×8. */
.puntos { display: flex; gap: var(--esp-6); align-items: center; }
.puntos span { width: 8px; height: 8px; border-radius: 4px; background: var(--navy-12); }
.puntos span.activo { width: 24px; background: var(--accion-azul); }

/* ============================================================
   Etiqueta (188:237) — pastilla, pad 10/5, 11→12 SemiBold mayúsculas.
   Neutra · Azul · Lila · Logro · Positivo · Exigente · Negativo.
   ============================================================ */
.etiqueta {
  display: inline-flex; align-items: center;
  padding: var(--esp-4) var(--esp-8); border-radius: var(--radio-pill);
  font-size: var(--fs-etiqueta-12); font-weight: var(--peso-semibold);
  letter-spacing: var(--ls-mayus); text-transform: uppercase; line-height: 1;
  background: var(--superficie-arena); color: var(--texto-primario);
}
.etiqueta--azul     { background: var(--accion-azul); color: var(--fondo-crema); }
.etiqueta--lila     { background: var(--acento-lila); color: var(--texto-primario); }
.etiqueta--logro    { background: var(--logro-dorado); color: var(--logro-dorado-texto); }
.etiqueta--positivo { background: var(--estado-positivo-tinte); color: var(--estado-positivo); }
.etiqueta--exigente { background: var(--estado-exigente); color: var(--fondo-crema); }
.etiqueta--negativo { background: var(--estado-negativo-tinte); color: var(--estado-negativo); }
.etiqueta--azultinte{ background: var(--azul-10); color: var(--accion-azul); }

/* ============================================================
   Racha (259:244) — pastilla tinte naranja, llama + número 13→14 Bold.
   Activa tinte · En riesgo tinte+borde fuego · Apagada navy 6% + número gris.
   ============================================================ */
.racha {
  display: inline-flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-8); border-radius: var(--radio-pill);
  background: var(--racha-tinte); color: var(--racha-fuego-texto);
  font-size: var(--fs-cuerpo-14); font-weight: var(--peso-bold); line-height: 1;
}
.racha .icono { width: 14px; height: 14px; color: var(--racha-fuego); }
.racha--riesgo  { border: 1.5px solid var(--racha-fuego); }
.racha--apagada { background: var(--navy-06); color: #8b8f9c; }

/* Racha fuego (262:369) — sobre navy: brasa 35% + número brasa. */
.racha-fuego {
  display: inline-flex; align-items: center; gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-8); border-radius: var(--radio-pill); height: 24px;
  background: var(--racha-brasa-tinte); color: var(--racha-brasa);
  font-size: var(--fs-cuerpo-14); font-weight: var(--peso-bold); line-height: 1;
}
.racha-fuego .icono { width: 14px; height: 14px; }

/* ============================================================
   Layout de pantalla dentro del teléfono
   ============================================================ */
.pantalla {
  display: flex; flex-direction: column; min-height: 100%;
  background: var(--fondo-crema);
  padding: var(--pantalla-pt, var(--esp-28)) var(--gutter) var(--esp-24);
  gap: var(--pantalla-gap, var(--gutter));
}
.pantalla--compacta { --pantalla-pt: var(--esp-16); } /* pantallas de pregunta del alta */
.pantalla__espacio { flex: 1 0 0; min-height: 0; }

/* ============================================================
   Hoja (sheet) + Scrim (j · spec docs/motion.md)
   Tarjeta crema anclada abajo (radio 28) sobre un scrim navy translúcido.
   Entra subiendo (modal), sale bajando (dismiss). Cierra por tap en el scrim
   y por arrastre hacia abajo (lo maneja conectarHoja en app.js).
   La pantalla raíz usa .pantalla--hoja para que scrim y hoja se anclen a ella.
   ============================================================ */
.pantalla--hoja { position: absolute; inset: 0; padding: 0; background: none; }
.scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--fondo-navy) 80%, transparent);
  animation: scrim-in var(--t-move) var(--ease-out) both;
}
.hoja {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: var(--esp-16);
  max-height: 92%; overflow-y: auto;
  background: var(--fondo-crema);
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
  padding: var(--esp-16) var(--gutter) max(var(--esp-24), env(safe-area-inset-bottom, 0px));
  animation: hoja-in var(--t-move) var(--ease-out) both;
  touch-action: pan-y; will-change: transform;
}
.hoja--completa { max-height: 100%; top: 0; border-radius: 0; padding: 0; gap: 0; } /* resultado a pantalla completa (Subir·05) */
.hoja__asa {       /* tirador: arrastrá para cerrar */
  width: 36px; height: 4px; flex: none; align-self: center;
  background: var(--navy-12); border-radius: var(--radio-pill); cursor: grab;
}
.hoja--arrastrando { animation: none; transition: none; }           /* sigue al dedo, sin animación */
.hoja--cerrando  { animation: hoja-out  var(--t-move) var(--ease-out) both; }
.scrim--cerrando { animation: scrim-out var(--t-move) var(--ease-out) both; }

@keyframes scrim-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrim-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hoja-in   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes hoja-out  { from { transform: translateY(0); } to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .scrim, .hoja { animation: none; }
  .hoja--cerrando, .scrim--cerrando { animation: none; opacity: 0; }   /* se van sin deslizar */
}

/* ============================================================
   Leyendo el resumen (k · Subir·04) — 4 pasos que se tildan uno por uno.
   El dot pasa de pendiente → en curso (borde azul) → hecho (verde, tilde pop-in).
   ============================================================ */
.lectura { display: flex; flex-direction: column; align-self: flex-start; }
.lectura__paso { display: flex; align-items: center; gap: var(--esp-12); }
.lectura__txt { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-semibold); color: var(--texto-terciario); transition: color var(--t-state) ease; }
.lectura__paso.activo .lectura__txt, .lectura__paso.hecho .lectura__txt { color: var(--texto-primario); }
.lectura__dot {
  width: 24px; height: 24px; flex: none; border-radius: var(--radio-pill);
  display: grid; place-items: center; color: transparent;
  border: 2px solid var(--borde-divisor); background: var(--superficie-arena);
  transition: background-color var(--t-state) ease, border-color var(--t-state) ease;
}
.lectura__dot .icono { width: 14px; height: 14px; transform: scale(0); }
.lectura__paso.activo .lectura__dot { border-color: var(--accion-azul); }
.lectura__paso.hecho .lectura__dot { background: var(--estado-positivo); border-color: var(--estado-positivo); color: var(--fondo-crema); }
.lectura__paso.hecho .lectura__dot .icono { animation: tilde-pop var(--t-move) var(--ease-pop) both; }
.lectura__linea { width: 2px; height: 18px; margin-left: 11px; background: var(--navy-12); transition: background-color var(--t-state) ease; }
.lectura__linea.on { background: var(--accion-azul); }
@keyframes tilde-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Diagnóstico (k · Subir·05) — tarjetas que entran escalonadas (80 ms entre cada una). */
.diag-cat { animation: diag-in var(--t-move) var(--ease-out) both; }
.diag-cat:nth-child(1) { animation-delay: 60ms; }
.diag-cat:nth-child(2) { animation-delay: 140ms; }
.diag-cat:nth-child(3) { animation-delay: 220ms; }
.diag-cat:nth-child(4) { animation-delay: 300ms; }
@keyframes diag-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lectura__paso.hecho .lectura__dot .icono { animation: none; transform: scale(1); }
  .diag-cat { animation: none; }
}

/* ============================================================
   Palmi vivo (l · spec docs/motion.md)
   Idle: parpadeo (squash corto) + hop sutil cada ~4s, sobre cualquier <img> de Palmi.
   .pparty: festejo al entrar (Objetivos 07/07b/14). .pshake: error (OTP/login mal).
   Confeti: estalla y gira desde arriba (inyectado por conectarConfeti).
   ============================================================ */
img[src*="palmi"] { transform-origin: 50% 100%; }
img[src*="palmi"]:not(.pparty):not(.pshake) { animation: palmi-vive 4s var(--ease-out) infinite; }
.pparty { animation: palmi-party 900ms var(--ease-pop) both; }
.pshake { animation: palmi-shake 400ms ease; }

@keyframes palmi-vive {
  0%, 100% { transform: translateY(0) scaleY(1); }
  8%  { transform: translateY(-6px) scaleY(1.02); }   /* hop */
  16% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(0) scaleY(1); }
  53% { transform: translateY(0) scaleY(.9); }         /* parpadeo */
  56% { transform: translateY(0) scaleY(1); }
}
@keyframes palmi-party {
  0%   { transform: scale(.6) rotate(-8deg); opacity: .4; }
  45%  { transform: scale(1.12) rotate(7deg); opacity: 1; }
  70%  { transform: scale(.98) rotate(-4deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes palmi-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-6px) rotate(-4deg); }
  75% { transform: translateX(6px) rotate(4deg); }
}

.confeti-capa { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confeti {
  position: absolute; top: 26%; left: 50%; width: 9px; height: 12px; border-radius: 2px; opacity: 0;
  animation: confeti-burst 1100ms var(--ease-out) forwards;
}
@keyframes confeti-burst {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  img[src*="palmi"], .pparty, .pshake { animation: none; }
  .confeti-capa { display: none; }
}

/* ============================================================
   Coach mark (m · Objetivos·01) — scrim + globo anclado a la pestaña Objetivos,
   que queda destacada por encima del scrim. Se cierra con «Entendido» o tap en el scrim.
   ============================================================ */
.coach-scrim {
  position: absolute; inset: 0; z-index: 5;
  background: color-mix(in srgb, var(--fondo-navy) 72%, transparent);
  animation: scrim-in var(--t-move) var(--ease-out) both;
}
.coach-globo {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 84px; z-index: 7;
  display: flex; flex-direction: column; gap: var(--esp-12);
  background: var(--fondo-navy); color: var(--fondo-crema);
  border-radius: var(--radio-hoja); padding: var(--esp-18);
  animation: coach-in var(--t-move) var(--ease-pop) both;
}
.coach-globo::after {           /* puntero hacia la pestaña Objetivos (última, a la derecha) */
  content: ""; position: absolute; bottom: -7px; right: 36px;
  width: 16px; height: 16px; background: var(--fondo-navy); transform: rotate(45deg);
}
.coach-globo .boton { align-self: flex-start; width: auto; }
/* pestaña destacada: por encima del scrim */
[data-coach] .tabbar button[aria-selected="true"] { position: relative; z-index: 6; }
@keyframes coach-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
/* ya visto: sin overlay */
.coach--cerrado .coach-scrim, .coach--cerrado .coach-globo { display: none; }
.coach--cerrado .tabbar button[aria-selected="true"] { z-index: auto; }
@media (prefers-reduced-motion: reduce) { .coach-scrim, .coach-globo { animation: none; } }

/* ============================================================
   Gráficos que se animan al entrar (n · Gastos 06/07) — solo animación, no tocables.
   Dona: SVG con circunferencia 100 (r=15.915); cada gajo se dibuja (stroke-dashoffset, .4s).
   Barras horizontales (top categorías) y columnas del gráfico diario crecen (.35s).
   ============================================================ */
.dona-seg {
  fill: none; stroke-width: 8; stroke-linecap: butt;
  stroke-dasharray: var(--pct) calc(100 - var(--pct));
  stroke-dashoffset: calc(25 - var(--start));
  animation: dona-draw 400ms var(--ease-out) both;
}
@keyframes dona-draw { from { stroke-dashoffset: calc(25 - var(--start) + var(--pct)); } }

.barra-fill { display: block; height: 100%; width: var(--w); border-radius: var(--radio-pill); animation: barra-crece 350ms var(--ease-out) both; }
@keyframes barra-crece { from { width: 0; } }

.barra-dia { transform-origin: bottom; animation: barra-sube 350ms var(--ease-out) both; }
@keyframes barra-sube { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .dona-seg { animation: none; }
  .barra-fill, .barra-dia { animation: none; }
}

/* ============================================================
   Toast (o · spec docs/motion.md) — pastilla navy flotante, 2,8 s, sobre la tabbar.
   «Guardado», «Código reenviado», «Copiado». aria-live para lectores de pantalla.
   ============================================================ */
.toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 40; max-width: 80%;
  transform: translateX(-50%) translateY(12px);
  padding: var(--esp-12) var(--esp-18); border-radius: var(--radio-pill);
  background: var(--fondo-navy); color: var(--fondo-crema);
  font-size: var(--fs-cuerpo-14); font-weight: var(--peso-semibold); white-space: nowrap;
  box-shadow: 0 8px 24px rgba(16, 27, 59, .25);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-state) var(--ease-out), transform var(--t-state) var(--ease-out);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity var(--t-state) linear; } }

/* ---- Patrones del alta (encabezado, pregunta, opciones) ---- */
.encabezado { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.encabezado__contador { font-size: var(--fs-etiqueta-14); font-weight: var(--peso-medium); color: var(--texto-secundario); }
.pregunta { display: flex; flex-direction: column; gap: var(--esp-8); width: 100%; }
.pregunta__titulo { font-size: var(--fs-titulo-28); font-weight: var(--peso-regular); letter-spacing: var(--ls-titulo2); line-height: var(--lh-display); }
.pregunta__bajada { font-size: var(--fs-cuerpo-14); color: var(--texto-secundario); line-height: var(--lh-texto); }
.opciones { display: flex; flex-direction: column; gap: var(--esp-10); width: 100%; }

/* Checklist de contraseña (diseñado por Claude a partir de v2) */
.checklist { display: flex; flex-direction: column; gap: var(--esp-8); width: 100%; }
.checklist__item { display: flex; align-items: center; gap: var(--esp-8); font-size: var(--fs-cuerpo-14); color: var(--texto-secundario); }
.checklist__item .icono { width: 18px; height: 18px; color: var(--texto-terciario); }
.checklist__item.ok { color: var(--estado-positivo); }
.checklist__item.ok .icono { color: var(--estado-positivo); }

/* OTP · 6 dígitos (frame 09) — caja arena radio 14, 60 alto, 26 Bold */
.otp { display: flex; gap: var(--esp-8); width: 100%; }
.otp input {
  flex: 1 0 0; min-width: 0; height: 60px; text-align: center;
  /* centrado real del dígito: sin padding propio; line-height = alto centra en vertical */
  padding: 0; line-height: 60px;
  border: 2px solid transparent; border-radius: var(--radio-campo);
  background: var(--superficie-arena); color: var(--texto-primario);
  /* Host Grotesk con cifras forradas tabulares: evita que el 8/9 caigan a otra fuente */
  font-family: var(--fuente); font-size: var(--fs-grande); font-weight: var(--peso-bold);
  font-variant-numeric: lining-nums tabular-nums; outline: none;
}
.otp input:focus { border-color: var(--accion-azul); }
/* error: borde negativo + sacudida sutil (±4px, 300ms) */
.otp--error input { border-color: var(--estado-negativo); }
.otp--error { animation: otp-shake 300ms ease; }
@keyframes otp-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.otp__error { font-size: var(--fs-etiqueta-14); color: var(--estado-negativo); font-weight: var(--peso-medium); }
/* Reenviar código: mientras corre el contador se ve como nota terciaria (no clickable);
   al llegar a 0 queda como enlace azul. 60 s bloqueado (handoff 4d.3). */
.reenviar {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--fuente); font-size: var(--fs-etiqueta-14); font-weight: var(--peso-medium); line-height: 1;
}
.reenviar:disabled { color: var(--texto-terciario); cursor: default; }
.reenviar:enabled  { color: var(--accion-azul); }

/* Resumen editable (frame 07) — tarjeta arena radio 28, filas con divisor y lápiz */
.resumen { display: flex; flex-direction: column; width: 100%; padding: 0 var(--esp-16);
  background: var(--superficie-arena); border-radius: var(--radio-hoja); }
.resumen__fila { display: flex; align-items: center; gap: var(--esp-12); padding: var(--esp-12) 0; }
.resumen__fila + .resumen__fila { border-top: 1px solid var(--navy-08); }
.resumen__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2); }
.resumen__label { font-size: var(--fs-etiqueta-12); color: var(--texto-secundario); }
.resumen__valor { font-size: var(--fs-cuerpo-16); font-weight: var(--peso-semibold); }
.resumen__fila .icono { width: 16px; height: 16px; color: var(--texto-terciario); }