/* Glosa · sistema visual «Sello · Porcelana» (ver DESIGN.md).
   Porcelana fría y tinta grafito. Cada tinta tiene un solo papel: inglés en azul
   tinta, español en granate, jade para el avance y «Correcto», azul de foco para
   «dónde estás», metales solo para la racha y una tinta propia por sello.
   «Incorrecto» va en tinta neutra: no hay rojo en el sistema.
   El claro es el predeterminado; el oscuro se elige a mano (data-tema). */

:root {
  color-scheme: light;
  --papel: #f2f3f5;
  --hoja: #fcfcfd;
  --filete: #dfe2e7;
  --filete-fuerte: #b7bec8;
  --tinta: #1a1e24;
  --suave: #5c6570;
  --neutra: #3e4652;
  --en: #1d3a5e;
  --es: #8a2b49;
  --jade: #2b7764;
  --correcto-tinta: #ffffff;
  --activo: #3456d1;
  --trama: #5e6f84;
  --trama-fuerza: 0.16;
  --bloqueado: #9aa2ad;
  --primario: #1a1e24;
  --primario-tinta: #fcfcfd;

  /* Tintas de los sellos: metales solo para la racha. */
  --sello-bronce: #8a5a34;
  --sello-plata: #646e7a;
  --sello-oro: #94702a;
  --sello-pizarra: #34557e;
  --sello-ciruela: #5e3d78;
  --sello-petroleo: #1d5f6e;
  --sello-musgo: #5c6b2e;
  --sello-indigo: #262b6a;
  --oro: var(--sello-oro);

  /* Vueltas de la roseta pasada la meta: jade, azul tinta, plata. */
  --vuelta-1: var(--jade);
  --vuelta-2: var(--en);
  --vuelta-3: var(--sello-plata);

  --sombra: 0 1px 2px rgba(26, 30, 36, 0.06), 0 30px 60px -34px rgba(26, 30, 36, 0.38);
  --sombra-baja: 0 1px 2px rgba(26, 30, 36, 0.05), 0 12px 28px -20px rgba(26, 30, 36, 0.3);
  --sombra-hoja: 0 -18px 40px -24px rgba(26, 30, 36, 0.35);
  --velo-capa: rgba(20, 24, 31, 0.32);

  --serif: 'Literata', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ipa: 'Charis SIL', 'Doulos SIL', 'Gentium Plus', serif;

  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --radio: 10px;
  --radio-hoja: 14px;
  --radio-tecla: 5px;
  --alto-control: 52px;
}

:root[data-tema='oscuro'] {
  color-scheme: dark;
  --papel: #14181f;
  --hoja: #1b2029;
  --filete: #2c333e;
  --filete-fuerte: #464f5c;
  --tinta: #e8ebef;
  --suave: #9aa3ae;
  --neutra: #c3cad4;
  --en: #a9c4ea;
  --es: #efa6bd;
  --jade: #6fcfb2;
  --correcto-tinta: #0b2a22;
  --activo: #93abff;
  --trama: #8796ab;
  --trama-fuerza: 0.15;
  --bloqueado: #5a626e;
  --primario: #e8ebef;
  --primario-tinta: #14181f;

  --sello-bronce: #d39a6c;
  --sello-plata: #b4bdc8;
  --sello-oro: #e2bf75;
  --sello-pizarra: #9db8e0;
  --sello-ciruela: #c3a2e0;
  --sello-petroleo: #7cc3d1;
  --sello-musgo: #b7c77a;
  --sello-indigo: #a9adf0;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --sombra-baja: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 28px -18px rgba(0, 0, 0, 0.6);
  --sombra-hoja: 0 -18px 40px -20px rgba(0, 0, 0, 0.7);
  --velo-capa: rgba(5, 7, 10, 0.5);
}

/* --- Papel ---------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; background: var(--papel); }
body.g-papel {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  caret-color: var(--activo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* El cambio de tema elegido a mano: toda la pantalla se funde de un modo al otro
   (View Transition). Nada se mueve ni cambia por partes. */
:root.g-cambia-tema::view-transition-old(root),
:root.g-cambia-tema::view-transition-old(seccion) { display: block; animation: 520ms var(--salida) both g-funde-tema; }
:root.g-cambia-tema::view-transition-new(seccion) { animation: none; }
@keyframes g-funde-tema { to { opacity: 0; } }

/* Fondo vivo: un lienzo detrás de todo (fondo.js) y un velo del color del papel
   detrás del contenido, para que las líneas se aparten de la tarjeta. */
.g-fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.g-velo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 56% at 50% 48%, var(--papel) 34%, color-mix(in srgb, var(--papel) 0%, transparent) 100%);
}
/* En la app, el velo se centra en la columna de la tarjeta (entre el riel y el panel). */
body:has(.marco) .g-velo { --velo-x: calc(232px + (100vw - 232px) / 2); background: radial-gradient(ellipse 40% 56% at var(--velo-x) 48%, var(--papel) 34%, color-mix(in srgb, var(--papel) 0%, transparent) 100%); }
@media (min-width: 1181px) { body:has(.marco--panel) .g-velo { --velo-x: calc(232px + (100vw - 536px) / 2); } }
@media (max-width: 1023px) { body:has(.marco) .g-velo { --velo-x: calc(76px + (100vw - 76px) / 2); } }
@media (max-width: 767px) {
  body .g-velo, body:has(.marco) .g-velo { background: radial-gradient(ellipse 78% 46% at 50% 46%, var(--papel) 40%, color-mix(in srgb, var(--papel) 0%, transparent) 100%); }
}

/* Avatar: la foto o las iniciales, en un círculo con filete. */
.g-avatar {
  --lado: 30px;
  display: inline-grid;
  place-items: center;
  width: var(--lado);
  height: var(--lado);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hoja);
  box-shadow: 0 0 0 1px var(--filete-fuerte), 0 0 0 3px var(--papel), 0 0 0 4px var(--filete);
  font: 620 calc(var(--lado) * 0.4)/1 var(--serif);
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.g-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-avatar--iniciales { background: color-mix(in srgb, var(--tinta) 5%, var(--hoja)); }
.g-avatar--grande { --lado: 88px; }
.g-avatar--entra { animation: g-asoma 420ms var(--salida) both; }

/* Lo que el navegador dibuja también lleva el sistema. */
::selection { background: color-mix(in srgb, var(--activo) 20%, transparent); color: inherit; }
:focus-visible { outline: 2px solid var(--activo); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--filete-fuerte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--filete-fuerte); border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Tipografía ----------------------------------------------------------- */

.g-marca { display: inline-flex; align-items: center; gap: 10px; font: 620 22px/1 var(--serif); letter-spacing: -0.01em; color: var(--tinta); text-decoration: none; }
.g-marca__sello {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--jade);
  -webkit-mask: url(sello.png) center / contain no-repeat;
  mask: url(sello.png) center / contain no-repeat;
}
.g-titulo { font: 600 26px/1.15 var(--serif); letter-spacing: -0.015em; margin: 0; text-wrap: balance; color: var(--tinta); }
.g-texto { font: 400 16px/1.5 var(--sans); color: var(--tinta); margin: 0; text-wrap: pretty; }
.g-nota { font: 400 14px/1.45 var(--sans); color: var(--suave); margin: 0; text-wrap: pretty; }
.g-etiqueta {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--suave);
}
.g-cifra { font: 620 34px/1 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.g-enlace {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--filete-fuerte);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.g-enlace:hover { text-decoration-color: currentColor; }

/* --- Íconos --------------------------------------------------------------- */

.g-icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Botones -------------------------------------------------------------- */

.g-boton {
  box-sizing: border-box;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--alto-control);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radio);
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms var(--salida), background-color 200ms var(--salida), box-shadow 200ms var(--salida), color 200ms var(--salida);
  -webkit-tap-highlight-color: transparent;
}
.g-boton:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.g-boton .g-icono { width: 18px; height: 18px; }
.g-boton--ancho { width: 100%; }

.g-boton--primario { background: var(--primario); color: var(--primario-tinta); }
.g-boton--primario:hover:not(:disabled) { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--primario) 75%, transparent); }

.g-boton--secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--filete-fuerte); }
.g-boton--secundario:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--tinta); background: color-mix(in srgb, var(--tinta) 4%, transparent); }

.g-boton--correcto { background: var(--jade); color: var(--correcto-tinta); }
.g-boton--correcto:hover:not(:disabled) { box-shadow: 0 10px 22px -12px var(--jade); }

/* «Incorrecto» y toda elección no recomendada: tinta neutra, contorno fino y ×. Nunca rojo. */
.g-boton--incorrecto {
  background: var(--hoja);
  color: var(--neutra);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neutra) 45%, transparent);
}
.g-boton--incorrecto:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--neutra); }

.g-boton--texto { background: none; color: var(--tinta); min-height: 40px; padding: 0 8px; font-weight: 500; }
.g-boton--texto:hover:not(:disabled) { text-decoration: underline; text-decoration-color: var(--filete-fuerte); text-underline-offset: 4px; }

.g-boton:disabled { opacity: 0.42; cursor: default; }

.g-respuestas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* Atajos de teclado: solo con teclado y puntero fino. */
.g-atajos { display: none; justify-content: center; flex-wrap: wrap; gap: 6px 20px; font: 400 12.5px/1 var(--sans); color: var(--suave); }
.g-atajos span { display: inline-flex; align-items: center; gap: 7px; }
.g-tecla {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio-tecla);
  background: var(--hoja);
  color: var(--tinta);
  font: 600 11.5px/1 var(--sans);
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { .g-atajos { display: flex; } }

/* --- Campos --------------------------------------------------------------- */

.g-campo { display: grid; gap: 8px; }
.g-entrada {
  appearance: none;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--hoja);
  color: var(--tinta);
  font: 400 16px/1 var(--sans);
  transition: border-color 160ms var(--salida), box-shadow 160ms var(--salida);
}
.g-entrada::placeholder { color: var(--suave); opacity: 0.85; }
.g-entrada:focus { outline: none; border-color: var(--activo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--activo) 18%, transparent); }
.g-entrada[aria-invalid] { border-color: var(--neutra); box-shadow: inset 0 0 0 1px var(--neutra); }
.g-campo__error { font: 400 14px/1.4 var(--sans); color: var(--neutra); margin: 0; }

/* Código del correo: seis casillas. */
.g-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 48px)); gap: 8px; }
.g-codigo input {
  appearance: none;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--hoja);
  color: var(--tinta);
  font: 600 22px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color 160ms var(--salida), box-shadow 160ms var(--salida);
}
.g-codigo input:focus { outline: none; border-color: var(--activo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--activo) 18%, transparent); }

/* Selector de meta: 10 / 20 / 30 / 40 / Otra. */
.g-segmento {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--filete);
  border-radius: calc(var(--radio) + 4px);
  background: color-mix(in srgb, var(--hoja) 70%, transparent);
}
.g-segmento label { position: relative; }
.g-segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.g-segmento span {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: var(--radio);
  font: 600 15px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--suave);
  transition: background-color 200ms var(--salida), color 200ms var(--salida), box-shadow 200ms var(--salida);
}
.g-segmento label:hover span { color: var(--tinta); }
.g-segmento input:checked + span { background: var(--primario); color: var(--primario-tinta); box-shadow: var(--sombra-baja); }
.g-segmento input:focus-visible + span { outline: 2px solid var(--activo); outline-offset: 2px; }
.g-meta-otra { display: flex; align-items: center; gap: 12px; margin-top: 10px; animation: g-asoma 320ms var(--salida) both; }
.g-meta-otra[hidden] { display: none; }
.g-meta-numero { width: 104px; flex: none; text-align: center; font: 600 18px/1 var(--sans); font-variant-numeric: tabular-nums; }
.g-meta-ayuda { margin: 0; }
.g-meta-otra--mal .g-meta-numero { border-color: var(--neutra); box-shadow: inset 0 0 0 1px var(--neutra); }
.g-meta-otra--mal .g-meta-ayuda { color: var(--neutra); }
@keyframes g-asoma { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- Tarjeta -------------------------------------------------------------- */

/* Hoja con doble filete, como el marco de un certificado. */
.g-tarjeta {
  position: relative;
  box-sizing: border-box;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
  box-shadow: var(--sombra);
  padding: 44px 40px 36px;
  text-align: center;
}
.g-tarjeta::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--filete) 70%, transparent);
  border-radius: 10px;
  pointer-events: none;
}
@media (max-width: 767px) { .g-tarjeta { padding: 34px 22px 28px; } }
.g-termino {
  margin: 0;
  font: 620 clamp(30px, 4.2vw, 50px)/1.05 var(--serif);
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
@media (max-width: 767px) { .g-termino { font-size: clamp(30px, 9vw, 40px); } }
.g-termino--en { color: var(--en); }
.g-termino--es { color: var(--es); }
.g-pron { margin: 12px 0 0; font: 600 14px/1.3 var(--sans); letter-spacing: 0.12em; }
.g-ipa { margin: 3px 0 0; font: 400 16px/1.3 var(--ipa); letter-spacing: 0.02em; opacity: 0.85; }
.g-par--en .g-pron, .g-par--en .g-ipa { color: var(--en); }
.g-par--es .g-pron, .g-par--es .g-ipa { color: var(--es); }
.g-consigna { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--suave); text-align: center; }

/* Separador: filete que se desvanece en las puntas, con un rombo de jade al centro. */
.g-separador {
  position: relative;
  height: 1px;
  margin: 26px auto 22px;
  width: min(80%, 320px);
  background: linear-gradient(90deg, transparent, var(--filete-fuerte) 22%, var(--filete-fuerte) 78%, transparent);
}
.g-separador::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  background: var(--hoja);
  border: 1px solid var(--jade);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Botón de escuchar: círculo fino. */
.g-escuchar {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 16px;
  border: 1px solid var(--filete-fuerte);
  border-radius: 50%;
  background: var(--hoja);
  color: var(--en);
  cursor: pointer;
  transition: border-color 160ms var(--salida), color 160ms var(--salida), transform 120ms var(--salida);
}
.g-escuchar .g-icono { width: 19px; height: 19px; }
.g-escuchar:hover { border-color: var(--en); }
.g-escuchar:active { transform: scale(0.96); }
.g-escuchar[aria-pressed='true'] { color: var(--jade); border-color: var(--jade); }

/* --- Barra inferior (teléfono) -------------------------------------------- */

.g-barra {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--hoja) 80%, transparent);
  border-top: 1px solid var(--filete);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}
.g-barra a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 6px 0 9px;
  color: var(--suave);
  text-decoration: none;
  font: 500 11.5px/1 var(--sans);
  letter-spacing: 0.01em;
  transition: color 200ms var(--salida);
  -webkit-tap-highlight-color: transparent;
}
.g-barra .g-icono { width: 22px; height: 22px; stroke-width: 1.4; }
.g-barra a::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--activo);
  transform: translateX(-50%) scaleX(0);
  transition: transform 320ms var(--salida);
}
.g-barra a[aria-current='page'] { color: var(--activo); }
.g-barra a[aria-current='page']::after { transform: translateX(-50%) scaleX(1); }

/* --- Hoja inferior y aviso ------------------------------------------------ */

.g-hoja {
  background: var(--hoja);
  border-top: 1px solid var(--filete);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--sombra-hoja);
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
}
.g-hoja::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: var(--filete-fuerte);
}

.g-aviso {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 12px 14px;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
  box-shadow: var(--sombra);
}
.g-aviso__sello { width: 48px; height: 48px; }
.g-aviso--texto { grid-template-columns: 1fr auto; padding-left: 18px; }
.g-aviso__texto { display: grid; gap: 4px; }
.g-aviso__titulo { font: 600 18px/1.2 var(--serif); color: var(--tinta); text-wrap: balance; }
.g-aviso--entra { animation: g-aviso-entra 620ms var(--salida) both; }
@keyframes g-aviso-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* --- Roseta --------------------------------------------------------------- */

.roseta-caja { position: relative; width: var(--tam, 172px); aspect-ratio: 1; flex: none; }
.roseta-caja > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Cada vuelta tiene su tinta; la vuelta anterior queda completa debajo. */
.roseta, .roseta__centro { --tinta-v: var(--vuelta-1); --tinta-debajo: var(--vuelta-1); }
.roseta[data-vuelta='2'], .roseta__centro[data-vuelta='2'] { --tinta-v: var(--vuelta-2); }
.roseta[data-vuelta='3'], .roseta__centro[data-vuelta='3'] { --tinta-v: var(--vuelta-3); }
.roseta[data-debajo='2'] { --tinta-debajo: var(--vuelta-2); }
.roseta[data-debajo='3'] { --tinta-debajo: var(--vuelta-3); }
.roseta { transform-box: fill-box; transform-origin: 50% 50%; }
.roseta .roseta__linea { fill: none; stroke: var(--tinta-v); stroke-width: var(--trazo, 0.85); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.roseta .roseta__tinta--fondo .roseta__linea { stroke: var(--tinta-debajo); }
.roseta:not([data-debajo]) .roseta__tinta--fondo { display: none; }
.roseta[data-debajo] .roseta__tinta--fondo .roseta__linea { opacity: 0.55; }
.roseta .roseta__plancha .roseta__linea { stroke: var(--vuelta-1); opacity: 0.13; }
.roseta[data-debajo] .roseta__plancha { display: none; }
.roseta .roseta__filete { fill: none; stroke: var(--vuelta-1); stroke-width: 0.5; opacity: 0.55; vector-effect: non-scaling-stroke; transition: opacity 600ms var(--salida); }
.roseta--llena .roseta__filete { opacity: 0.9; }
.roseta--marca .roseta__filete { opacity: 0.75; }

.roseta__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--tinta);
  pointer-events: none;
}
.roseta__titulo { font: 600 calc(var(--tam, 172px) * 0.05)/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-v); transition: color 400ms var(--salida); }
.roseta__cuenta { font: 620 calc(var(--tam, 172px) * 0.136)/1.1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.roseta__sobre { display: none; align-items: center; gap: 3px; font: 600 calc(var(--tam, 172px) * 0.05)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-v); }
.roseta__sobre svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.roseta__centro--pasada .roseta__de { display: none; }
.roseta__centro--pasada .roseta__n { color: var(--tinta-v); }
.roseta__centro--pasada .roseta__sobre { display: inline-flex; }
.roseta__centro--pasada .roseta__cuenta { font-size: calc(var(--tam, 172px) * 0.17); }
.roseta__centro--pasada[data-cifras='3'] .roseta__cuenta { font-size: calc(var(--tam, 172px) * 0.15); }
.roseta__centro--pasada[data-cifras='4'] .roseta__cuenta { font-size: calc(var(--tam, 172px) * 0.12); }
.roseta__centro--pasada[data-cifras='5'] .roseta__cuenta { font-size: calc(var(--tam, 172px) * 0.096); }
.roseta__de { color: var(--suave); font-size: 0.62em; font-weight: 500; }
.roseta__marca { font: 620 calc(var(--tam, 172px) * 0.15)/1 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -0.015em; color: var(--tinta); }
/* Mini roseta (cabecera del teléfono): sin título; la cifra va al lado. */
.roseta--compacta + .roseta__centro { display: none; }

/* --- Sellos de logro ------------------------------------------------------ */

.sello { display: block; width: 100%; height: auto; overflow: visible; --tinta-sello: var(--jade); }
.sello--racha-7 { --tinta-sello: var(--sello-bronce); }
.sello--racha-14 { --tinta-sello: var(--sello-plata); }
.sello--racha-30 { --tinta-sello: var(--sello-oro); }
.sello--dominadas-100 { --tinta-sello: var(--sello-pizarra); }
.sello--dominadas-500 { --tinta-sello: var(--sello-ciruela); }
.sello--dominadas-1000 { --tinta-sello: var(--sello-petroleo); }
.sello--primer-tema { --tinta-sello: var(--jade); }
.sello--ronda-perfecta { --tinta-sello: var(--sello-musgo); }
.sello--todo-glosario { --tinta-sello: var(--sello-indigo); }
.sello--bloqueado { --tinta-sello: var(--bloqueado); }
.sello__linea { fill: none; stroke: var(--tinta-sello); stroke-width: 0.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; }
.sello__filete { fill: none; stroke: var(--tinta-sello); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sello__filete--fino { stroke-width: 0.6; }
.sello__leyenda { font: 600 9.6px var(--sans); letter-spacing: 0.2em; fill: var(--tinta-sello); }
.sello__cifra { font: 620 42px var(--serif); letter-spacing: -0.02em; fill: var(--tinta-sello); font-variant-numeric: lining-nums; }
.sello__cifra--larga { font-size: 30px; }
.sello--bloqueado .sello__linea { opacity: 0.4; }
.sello--bloqueado .sello__leyenda, .sello--bloqueado .sello__cifra { opacity: 0.8; }
.sello--compacto .sello__linea { stroke-width: 1; }
.sello--compacto .sello__filete { stroke-width: 1.3; }
.sello--compacto .sello__cifra { font-size: 70px; }
.sello--compacto .sello__cifra--larga { font-size: 46px; }

/* --- Movimientos ---------------------------------------------------------- */

.cascada__letra { display: inline-block; }

/* Lo repasado se tacha y se queda en su lugar. */
.tachado { position: relative; color: var(--suave); transition: color 400ms var(--salida); }
.tachado::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 55%;
  height: 1.5px;
  background: currentColor;
  transform-origin: left center;
  animation: g-tachar 460ms var(--salida) both;
}
@keyframes g-tachar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- Áreas táctiles (hallazgo 21) -----------------------------------------
   Todo blanco táctil mide al menos 44×44 aunque el dibujo sea menor: un área
   invisible centrada sobre el control, sin cambiar lo que se ve. */
.g-boton--texto, .g-escuchar, .e-mini, .e-icono-boton, .e-volver, .riel__item { position: relative; }
.g-boton--texto::after, .g-escuchar::after, .e-mini::after, .e-icono-boton::after, .e-volver::after, .riel__item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}