.boton { border: none; border-radius: var(--radio-sm); padding: var(--esp-3) var(--esp-5); font-weight: 600; }
.boton.primario { background: var(--color-primario); color: var(--color-primario-texto); }
.boton.secundario { background: transparent; color: var(--color-primario); border: 1px solid var(--color-primario); }
.boton.peligro { background: var(--color-error); color: var(--color-error-texto); }
.boton.acento { background: var(--color-acento); color: var(--color-acento-texto); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--esp-4); margin-bottom: var(--esp-3);
  box-shadow: var(--sombra-sm); }

.insignia { display: inline-block; font-size: var(--texto-xs); padding: 2px var(--esp-2);
  border-radius: var(--radio-sm); }
.insignia.exito { background: var(--color-confianza-suave); color: var(--color-confianza); }
.insignia.neutral { background: var(--color-borde); color: var(--color-texto-secundario); }
.insignia.atencion { background: var(--color-atencion-suave); color: var(--color-texto); }

/* Pastilla discreta "manejado por adultos": aparece bajo el CTA del hero y
   junto al saludo del panel. Borde en vez de relleno para no competir con las
   insignias de estado (.insignia) ni con los botones de acento. */
.insignia-adultos { display: inline-flex; align-items: center; gap: var(--esp-1);
  margin-top: var(--esp-3); padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--color-borde); border-radius: 99px;
  font-size: var(--texto-xs); font-weight: 600; color: var(--color-texto-secundario); }
.insignia-adultos svg { flex: none; }

/* Ayuda: botón "?" con popover de texto en puntos de duda. El botón mide
   24x24 (área táctil) pero el círculo visible es más pequeño (18px), dibujado
   en un span interno para no reducir el objetivo de toque. Solo un popover
   puede estar abierto a la vez (lo controla core.js). */
.ayuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: var(--esp-1); }
.ayuda-boton { width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; flex: none; }
.ayuda-boton-marca { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--color-borde);
  background: var(--color-superficie); color: var(--color-texto-secundario);
  font-size: var(--texto-xs); font-weight: 700; line-height: 1; }
.ayuda-boton:hover .ayuda-boton-marca,
.ayuda-boton[aria-expanded="true"] .ayuda-boton-marca {
  color: var(--color-primario-texto); background: var(--color-primario); border-color: var(--color-primario); }

.ayuda-popover { position: absolute; top: calc(100% + var(--esp-2)); left: 0; z-index: 20;
  width: max-content; max-width: min(280px, calc(100vw - 2 * var(--esp-4)));
  background: var(--color-superficie); color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  padding: var(--esp-3) var(--esp-4); box-shadow: var(--sombra-lg);
  font-size: var(--texto-sm); font-weight: 400; line-height: 1.5; text-align: left; }
.ayuda-popover.alinear-derecha { left: auto; right: 0; }
.ayuda-popover::before, .ayuda-popover::after {
  content: ''; position: absolute; bottom: 100%; left: var(--esp-3); border: 6px solid transparent; }
.ayuda-popover::before { border-bottom-color: var(--color-borde); }
.ayuda-popover::after { border-width: 5px; margin-bottom: -1px; border-bottom-color: var(--color-superficie); }
.ayuda-popover.alinear-derecha::before, .ayuda-popover.alinear-derecha::after { left: auto; right: var(--esp-3); }
@media (prefers-reduced-motion: no-preference) {
  .ayuda-popover { animation: ayuda-entrada .15s ease; transform-origin: top left; }
  .ayuda-popover.alinear-derecha { transform-origin: top right; }
}
@keyframes ayuda-entrada { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Tour: coach marks de primera vez (MFI.ui.Tour). El globo es position:fixed
   porque señala elementos que pueden vivir en columnas con su propio scroll
   (mapa de módulo en escritorio); el elemento señalado se resalta aparte con
   .tour-destacado, sin relación de contención con el globo. */
.tour-globo { position: fixed; z-index: 200; max-width: 300px;
  background: var(--color-superficie); color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  padding: var(--esp-4); box-shadow: var(--sombra-lg); }
.tour-globo-texto { margin: 0 0 var(--esp-3); font-size: var(--texto-sm); line-height: 1.5; }
.tour-globo-botones { display: flex; gap: var(--esp-2); justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .tour-globo { animation: ayuda-entrada .15s ease; }
}

.tour-destacado { outline: 3px solid var(--color-acento); outline-offset: 2px;
  border-radius: var(--radio-sm); }

.progreso { height: 6px; background: var(--color-borde); border-radius: 3px; overflow: hidden; }
.progreso-relleno { height: 100%; background: var(--color-primario); }

/* Banda de "no se puede guardar". Permanente (el toast se va a los 4 s) y
   pegada arriba: z-index por encima del carril lateral fijo, que en escritorio
   nace en top:0 y si no la taparía. */
.banner-memoria { position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-error) 18%, var(--color-superficie));
  color: var(--color-texto);
  border-bottom: 1px solid color-mix(in srgb, var(--color-error) 45%, var(--color-borde));
  padding: var(--esp-2) var(--esp-4); text-align: center;
  font-size: var(--texto-sm); font-weight: 600; }

#zona-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-texto); color: var(--color-fondo); padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-sm); opacity: 0; transition: opacity .3s, transform .3s; max-width: 90vw; }
#zona-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.dialogo { border: none; border-radius: var(--radio-md); padding: var(--esp-5);
  max-width: 480px; width: 90vw; box-shadow: var(--sombra-lg);
  background: var(--color-superficie); color: var(--color-texto);
  /* base.css pone margin:0 en todo; dialog:modal necesita margin:auto para
     centrarse (UA stylesheet), si no queda pegado a la esquina superior. */
  margin: auto; }
.dialogo::backdrop { background: rgba(0,0,0,.4); }
.dialogo.grande { max-width: 640px; }
.dialogo-botones { display: flex; gap: var(--esp-2); justify-content: flex-end; margin-top: var(--esp-4); }

/* Instrucciones de instalación (Ajustes): tres grupos por plataforma con
   pasos numerados; el reset global quita el padding nativo del <ol>. */
.instalar-grupo { margin-bottom: var(--esp-4); }
.instalar-grupo h3 { font-size: var(--texto-md); margin-bottom: var(--esp-2); }
.instalar-grupo ol { padding-left: 1.25em; }
.instalar-grupo li { margin-bottom: var(--esp-1); }

.acordeon details { border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
  margin-bottom: var(--esp-2); background: var(--color-superficie); }
.acordeon summary { padding: var(--esp-3) var(--esp-4); font-weight: 600; cursor: pointer; }
.acordeon-cuerpo { padding: 0 var(--esp-4) var(--esp-4); }

.nav-inferior { position: fixed; bottom: 0; left: 0; right: 0; display: flex;
  background: var(--color-superficie); border-top: 1px solid var(--color-borde); z-index: 10; }
.nav-inferior a { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; text-align: center; padding: var(--esp-2) 0;
  text-decoration: none; color: var(--color-texto-secundario); font-size: var(--texto-xs); }
.nav-inferior a svg { flex: none; }
/* El color heredado por currentColor tiñe también el icono cuando el enlace
   está activo: no hace falta reglas extra por elemento. */
.nav-inferior a[aria-current="page"] { color: var(--color-primario); font-weight: 700; }
@media (max-width: 360px) {
  .nav-inferior a { font-size: 0.65rem; padding-left: 2px; padding-right: 2px; }
}
.nav-lateral { display: none; }
@media (min-width: 900px) {
  .nav-inferior { display: none; }
  .nav-lateral { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
    width: 220px; overflow-y: auto;
    background: var(--color-superficie); border-right: 1px solid var(--color-borde); padding: var(--esp-5); }
  .nav-lateral a { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3);
    text-decoration: none; color: var(--color-texto); border-radius: var(--radio-sm); margin-bottom: var(--esp-1); }
  .nav-lateral a[aria-current="page"] { background: var(--color-fondo); color: var(--color-primario); font-weight: 700; }
  .nav-lateral a svg { flex: none; }
  /* Firma pinneada al fondo del carril: es el único lugar donde vive en
     escritorio, así que la copia que se agrega al final de #main (ver
     router.renderInto) se oculta aquí para no repetirla. El selector de hijo
     directo deja intactas las firmas ya incrustadas en el pie de la landing
     y de #serie, que no son hijas directas de #main. */
  .nav-lateral .firma-powered { margin-top: auto; padding-top: var(--esp-4); text-align: left; }
  #main > .firma-powered { display: none; }
}

/* Firma "Proudly Powered By: Gold Tech Mx": discreta, texto-xs y color
   secundario, presente en todo momento sin competir con el contenido. */
.firma-powered { font-size: var(--texto-xs); color: var(--color-texto-secundario);
  text-align: center; padding: var(--esp-4) 0 var(--esp-2); margin: 0; }
.firma-powered a { color: inherit; text-decoration: none; }
.firma-powered a:hover, .firma-powered a:focus-visible { text-decoration: underline; }

.paso-tarjeta { border: 1px solid var(--color-borde); border-radius: var(--radio-md);
  background: var(--color-superficie); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-2); }
.paso-tarjeta.actual { border: 2px solid var(--color-primario); }
.paso-tarjeta.pendiente { color: var(--color-texto-secundario); }

.opcion-sim { display: block; width: 100%; text-align: left; background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio-sm); padding: var(--esp-3);
  margin-bottom: var(--esp-2); color: var(--color-texto); }
.opcion-sim:hover, .opcion-sim:focus-visible { border-color: var(--color-primario); }
@media (min-width: 900px) {
  .opcion-sim { padding: var(--esp-4) var(--esp-5); }
}

.campo { margin-bottom: var(--esp-4); }
.campo label { display: block; font-weight: 600; margin-bottom: var(--esp-1); }
.campo input, .campo select, .campo textarea { width: 100%; padding: var(--esp-3);
  border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
  background: var(--color-superficie); color: var(--color-texto); font: inherit; }

.etiqueta-categoria { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-texto-secundario); font-weight: 700; }

/* ========== Pantalla de privacidad ========== */
/* Columna legible (hereda los 720 px de #main) con cada tema en su tarjeta:
   cómo funciona, ventajas y lo que hay que cuidar. La sección de cuidados usa
   el fondo de atención para que nadie la lea de pasada. */
.privacidad { display: flex; flex-direction: column; gap: var(--esp-4);
  max-width: 720px; margin: 0 auto; }
.privacidad h1 { margin-bottom: var(--esp-2); }
.privacidad-bloque { display: flex; flex-direction: column; gap: var(--esp-3);
  margin-bottom: 0; padding: var(--esp-5); }
.privacidad-icono { width: 46px; height: 46px; }
.privacidad-bloque-titulo { font-size: var(--texto-lg); margin-bottom: var(--esp-3); }
.privacidad-bloque p { color: var(--color-texto-secundario); }

.privacidad-lista { list-style: none; display: flex; flex-direction: column; gap: var(--esp-3); }
.privacidad-ventajas li { display: flex; align-items: flex-start; gap: var(--esp-3); }
.privacidad-ventajas li svg { flex: none; margin-top: 4px; color: var(--color-confianza); }

.privacidad-cuidado { background: var(--color-atencion-suave);
  border-color: color-mix(in srgb, var(--tono-mfi006-tinta) 35%, var(--color-borde)); }
.privacidad-cuidado .privacidad-icono { background: var(--color-superficie); }
.privacidad-cuidados li { position: relative; padding-left: var(--esp-5); }
.privacidad-cuidados li::before { content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--tono-mfi006-tinta); }

.privacidad-cierre { font-weight: 600; text-align: center; max-width: 56ch;
  margin: var(--esp-2) auto 0; }
.privacidad-acciones { display: flex; justify-content: center; margin-top: var(--esp-2); }
.privacidad-acciones .boton { width: 100%; }

@media (min-width: 720px) {
  .privacidad-bloque { flex-direction: row; align-items: flex-start; gap: var(--esp-5); }
  .privacidad-bloque-cuerpo { flex: 1; min-width: 0; }
  .privacidad-acciones .boton { width: auto; }
}

/* ========== Landing ========== */

.boton.grande { padding: var(--esp-4) var(--esp-6); font-size: var(--texto-lg);
  border-radius: var(--radio-md); line-height: 1.2; }

.landing { max-width: 1040px; margin: 0 auto; }
/* La landing ocupa el ancho completo: sin menú de app y sin el carril lateral. */
body:has(.landing) #main { max-width: none; padding: 0 var(--esp-4) var(--esp-6); }
body:has(.landing) .nav-inferior, body:has(.landing) .nav-lateral { display: none; }

/* Banda cálida de entrada: degradado de acento suave hacia el fondo, con dos
   halos (acento y primario). Ambos extremos son tokens, así que funciona en
   claro y en oscuro sin colores fijos. */
.landing-cima { border-radius: 28px; margin-top: var(--esp-3);
  padding: var(--esp-2) var(--esp-5) var(--esp-8);
  background:
    radial-gradient(65% 80% at 85% 8%,
      color-mix(in srgb, var(--color-acento) 18%, transparent) 0%, transparent 62%),
    radial-gradient(70% 90% at 2% 100%,
      color-mix(in srgb, var(--color-primario) 10%, transparent) 0%, transparent 58%),
    linear-gradient(160deg,
      var(--color-acento-suave) 0%,
      color-mix(in srgb, var(--color-acento-suave) 45%, var(--color-fondo)) 100%); }

.landing-header { display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-5) 0; color: var(--color-primario); }
.landing-marca { font-weight: 700; color: var(--color-texto); }
/* El logo vive en un disco cálido con anillo de acento: da calidez humana
   desde el primer píxel sin volverse infantil. */
.landing-logo { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--color-acento-suave); color: var(--color-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento) 18%, transparent); }

/* Banda cálida del hero: degradado de acento suave a fondo, con un halo
   superior. Funciona en claro y oscuro porque ambos extremos son tokens. */
.landing-hero { position: relative; text-align: center; margin: 0 auto;
  padding: var(--esp-6) 0 var(--esp-4); }
.landing-hero-cuerpo { max-width: 760px; margin: 0 auto; }
/* Aclara "esto lo maneja un adulto" antes de que se lea el titular, para
   familias que llegan pensando que la pantalla se la van a dar a un niño.
   Color: mezcla con --color-texto (no acento puro) porque acento sobre el
   tinte de esta banda da ~4.11:1 y no llega a AA para texto normal (mismo
   límite documentado abajo en .panel-saludo); la mezcla sube el contraste sin
   perder el tono cálido, y en oscuro el acento ya cumple de sobra. */
.hero-eyebrow { margin: 0 0 var(--esp-2); font-size: var(--texto-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--color-acento) 80%, var(--color-texto) 20%); }
.landing-titulo { font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.12;
  letter-spacing: -0.02em; text-wrap: balance; }
.landing-sub { font-size: var(--texto-lg); color: var(--color-texto-secundario);
  max-width: 620px; margin: var(--esp-5) auto 0; text-wrap: pretty; }
.landing-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3);
  justify-content: center; margin-top: var(--esp-6); }
/* Sobre la banda, el botón secundario necesita fondo propio para no perderse. */
.landing-hero .boton.secundario { background: var(--color-superficie); }

/* Ilustración del hero. La escena SVG es el estado normal; si existe
   assets/familia.jpg la foto se coloca encima con el mismo marco redondeado. */
.hero-figura { position: relative; width: 100%; max-width: 320px;
  margin: var(--esp-6) auto 0; }
.hero-figura .escena { display: block; width: 100%; height: auto; }
.hero-foto { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radio-lg); }

@media (max-width: 479px) {
  .landing-acciones { flex-direction: column; align-items: stretch; }
  .landing-acciones .boton { width: 100%; }
}
/* En tabletas todavía va apilada, pero con sitio para crecer. */
@media (min-width: 560px) and (max-width: 899px) {
  .hero-figura { max-width: 400px; }
}

/* Escritorio: hero a dos columnas, texto a la izquierda e ilustración a la
   derecha. Por debajo de 900 px la ilustración baja y se centra. */
@media (min-width: 900px) {
  .landing-hero { display: grid; align-items: center; text-align: left;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: var(--esp-5);
    padding: var(--esp-5) 0 var(--esp-4); }
  .landing-hero-cuerpo { max-width: none; margin: 0; }
  .landing-sub { margin-left: 0; margin-right: 0; }
  .landing-acciones { justify-content: flex-start; }
  .hero-figura { max-width: 460px; margin: 0; }
  /* Con la ilustración al costado la banda ya no necesita tanto respiro abajo. */
  .landing-cima { padding-bottom: var(--esp-6); }
}

.landing-seccion { padding: var(--esp-7) 0; }
.landing-seccion-titulo { font-size: var(--texto-2xl); line-height: 1.2;
  text-align: center; margin-bottom: var(--esp-6); }
.landing-seccion-intro { text-align: center; color: var(--color-texto-secundario);
  max-width: 620px; margin: calc(-1 * var(--esp-4)) auto var(--esp-6); }

.landing-icono { display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: var(--color-confianza-suave);
  background: color-mix(in srgb, var(--color-primario) 14%, transparent);
  color: var(--color-primario); }
.landing-icono-confianza { background: var(--color-confianza-suave); color: var(--color-confianza); }

/* Círculo de icono con tono propio. data-tono usa los pares de módulo
   (fondo + tinta AA en ambos temas) definidos en tokens.css. */
.icono-tono { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: none; }
.icono-tono[data-tono="001"] { background: var(--tono-mfi001-fondo); color: var(--tono-mfi001-tinta); }
.icono-tono[data-tono="002"] { background: var(--tono-mfi002-fondo); color: var(--tono-mfi002-tinta); }
.icono-tono[data-tono="003"] { background: var(--tono-mfi003-fondo); color: var(--tono-mfi003-tinta); }
.icono-tono[data-tono="004"] { background: var(--tono-mfi004-fondo); color: var(--tono-mfi004-tinta); }
.icono-tono[data-tono="005"] { background: var(--tono-mfi005-fondo); color: var(--tono-mfi005-tinta); }
.icono-tono[data-tono="006"] { background: var(--tono-mfi006-fondo); color: var(--tono-mfi006-tinta); }
.icono-tono[data-tono="007"] { background: var(--tono-mfi007-fondo); color: var(--tono-mfi007-tinta); }
.icono-tono[data-tono="008"] { background: var(--tono-mfi008-fondo); color: var(--tono-mfi008-tinta); }
.icono-tono[data-tono="009"] { background: var(--tono-mfi009-fondo); color: var(--tono-mfi009-tinta); }
.icono-tono[data-tono="010"] { background: var(--tono-mfi010-fondo); color: var(--tono-mfi010-tinta); }
.icono-tono[data-tono="011"] { background: var(--tono-mfi011-fondo); color: var(--tono-mfi011-tinta); }
.icono-tono[data-tono="012"] { background: var(--tono-mfi012-fondo); color: var(--tono-mfi012-tinta); }

.landing-como { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); }
.landing-como-tarjeta { background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--esp-5); box-shadow: var(--sombra-sm); }
/* Cada tarjeta toma un tinte suave del mismo tono que su círculo de icono
   (ver TONOS_COMO en inicio.js): la fila deja de ser tres cajas blancas. */
.landing-como-tarjeta:nth-child(1) { background: color-mix(in srgb, var(--tono-mfi003-fondo) 55%, var(--color-superficie));
  border-color: color-mix(in srgb, var(--tono-mfi003-tinta) 18%, var(--color-borde)); }
.landing-como-tarjeta:nth-child(2) { background: color-mix(in srgb, var(--tono-mfi002-fondo) 55%, var(--color-superficie));
  border-color: color-mix(in srgb, var(--tono-mfi002-tinta) 18%, var(--color-borde)); }
.landing-como-tarjeta:nth-child(3) { background: color-mix(in srgb, var(--tono-mfi001-fondo) 55%, var(--color-superficie));
  border-color: color-mix(in srgb, var(--tono-mfi001-tinta) 18%, var(--color-borde)); }
.landing-como-titulo { font-size: var(--texto-lg); margin: var(--esp-4) 0 var(--esp-2); }
.landing-como-texto { color: var(--color-texto-secundario); }

.landing-temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
.landing-tema { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--esp-3); text-align: left; width: 100%; min-height: 118px;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--esp-4); color: var(--color-texto);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.landing-tema-icono { width: 48px; height: 48px; }
.landing-tema-titulo { font-weight: 600; line-height: 1.3; }
.landing-tema:hover, .landing-tema:focus-visible {
  border-color: var(--color-primario); box-shadow: var(--sombra-md); transform: translateY(-2px); }

.landing-privacidad { display: flex; flex-direction: column; gap: var(--esp-4);
  max-width: 840px; margin: 0 auto;
  background: var(--color-confianza-suave);
  border: 1px solid color-mix(in srgb, var(--color-confianza) 28%, transparent);
  border-radius: var(--radio-lg); padding: var(--esp-6); box-shadow: none; }
.landing-privacidad .landing-icono-confianza {
  background: var(--color-superficie); color: var(--color-confianza); }
.landing-privacidad-titulo { font-size: var(--texto-xl); margin-bottom: var(--esp-3); }
.landing-privacidad-texto p { color: var(--color-texto-secundario); max-width: 68ch; }
/* Segunda mitad de la confianza: de donde salen las ideas. Va separada por una
   linea fina para que no se lea como continuacion del parrafo de privacidad. */
.landing-bases-texto { margin-top: var(--esp-4); padding-top: var(--esp-4);
  border-top: 1px solid color-mix(in srgb, var(--color-confianza) 22%, transparent);
  text-wrap: pretty; }
.landing-bases-enlace { display: inline-block; margin-top: var(--esp-2);
  font-size: var(--texto-sm); font-weight: 600; }

.landing-libros { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); }
.libro-tarjeta { display: flex; flex-direction: column; gap: var(--esp-4);
  margin-bottom: 0; border-radius: var(--radio-lg); }
.libro-marco { position: relative; aspect-ratio: 2 / 3; flex: none; overflow: hidden;
  border: 1px solid var(--color-borde); border-radius: var(--radio-md); box-shadow: var(--sombra-md);
  width: 100%; max-width: 210px; margin: 0 auto; }
.libro-portada { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; padding: var(--esp-4);
  background: linear-gradient(150deg, var(--color-primario) 0%, var(--color-texto) 100%);
  color: var(--color-primario-texto); }
.libro-portada-titulo { font-size: var(--texto-lg); font-weight: 700; line-height: 1.25;
  text-align: center; letter-spacing: .01em; }
.libro-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.libro-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
.libro-titulo { font-size: var(--texto-md); line-height: 1.3; }
.libro-enlace { display: inline-block; text-decoration: none; }
[data-tema="dark"] .libro-portada {
  background: linear-gradient(150deg, var(--color-borde) 0%, var(--color-fondo) 100%);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-primario) 55%, var(--color-fondo)) 0%,
    var(--color-fondo) 100%);
  color: var(--color-texto); }

/* ---- Marcas acompañantes ---- */
.landing-marcas { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); }
.marca-tarjeta { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--esp-3); margin-bottom: 0; padding: var(--esp-6) var(--esp-5);
  border-radius: var(--radio-lg);
  background: color-mix(in srgb, var(--color-acento-suave) 40%, var(--color-superficie));
  border-color: color-mix(in srgb, var(--color-acento) 20%, var(--color-borde)); }
.marca-inicial { display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%; flex: none;
  background: var(--color-acento-suave); color: var(--color-acento);
  font-size: var(--texto-2xl); font-weight: 700; line-height: 1; }
.marca-nombre { font-size: var(--texto-xl); line-height: 1.2; }
.marca-texto { color: var(--color-texto-secundario); max-width: 42ch; text-wrap: pretty; }
.marca-enlace { display: inline-block; text-decoration: none; margin-top: var(--esp-1); }
@media (min-width: 700px) {
  .landing-marcas { grid-template-columns: repeat(2, 1fr); gap: var(--esp-5); }
  .marca-tarjeta { padding: var(--esp-7) var(--esp-6); }
}

/* ---- Compartir ----
   Los destinos son pastillas, no botones de marca: mismo trazo, mismo color y
   mismo peso que el resto de la interfaz. Una fila de logos oficiales a todo
   color aquí se leería como publicidad pegada encima del manual. */
.compartir { background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); padding: var(--esp-6); text-align: center; }
.compartir-titulo { font-size: var(--texto-xl); line-height: 1.25;
  margin-bottom: var(--esp-2); text-wrap: balance; }
.compartir-texto { color: var(--color-texto-secundario); max-width: 58ch;
  margin: 0 auto var(--esp-5); text-wrap: pretty; }
.compartir-acciones { display: flex; flex-direction: column; gap: var(--esp-2);
  align-items: stretch; margin-bottom: var(--esp-5); }
.compartir-acciones .boton { display: inline-flex; align-items: center;
  justify-content: center; gap: var(--esp-2); }
@media (min-width: 480px) {
  .compartir-acciones { flex-direction: row; justify-content: center; }
  .compartir-acciones .boton { flex: none; }
}
.compartir-destinos { display: flex; flex-wrap: wrap; gap: var(--esp-2);
  justify-content: center; list-style: none; padding: 0; margin: 0; }
/* padding vertical de 12px para que la pastilla llegue a 44 px de alto: es el
   objetivo táctil cómodo, y estas se tocan con el pulgar en el celular. */
.compartir-destino { display: inline-flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4); border: 1px solid var(--color-borde);
  border-radius: 999px; text-decoration: none; color: var(--color-texto);
  background: var(--color-fondo); font-size: var(--texto-sm);
  transition: border-color .15s ease, background-color .15s ease; }
.compartir-destino:hover { border-color: var(--color-primario);
  background: var(--color-confianza-suave); }
.compartir-destino-icono { display: inline-flex; color: var(--color-primario); }
/* Fuera de la vista pero accesible al portapapeles: display:none impediría
   seleccionar el texto, que es justo lo que necesita el respaldo de copiado. */
.compartir-copia-oculta { position: fixed; top: -1000px; left: -1000px;
  opacity: 0; width: 1px; height: 1px; }
@media (prefers-reduced-motion: reduce) { .compartir-destino { transition: none; } }

/* ---- Puente al ecosistema ----
   Misma anatomía que la banda de mascotas (sello | texto | salida) pero en
   superficie neutra con borde, para que la de mascotas siga siendo la única
   nota cálida del cierre y no compitan entre ellas. */
.landing-seccion-eco { padding-bottom: 0; }
/* Dos bandas seguidas necesitan más aire entre ellas que una banda tras texto
   corrido, o se leen como un solo bloque partido. */
.landing-seccion-eco + .landing-seccion-pets { padding-top: var(--esp-6); }
.landing-eco-banda { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--esp-4); background: var(--color-superficie);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  padding: var(--esp-6); box-shadow: var(--sombra-sm); }
.landing-eco-icono { display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; flex: none; }
.landing-eco-cuerpo { flex: 1; }
.landing-eco-titulo { font-size: var(--texto-xl); line-height: 1.25;
  margin: var(--esp-1) 0 var(--esp-2); text-wrap: balance; }
.landing-eco-texto { color: var(--color-texto-secundario); max-width: 62ch; text-wrap: pretty; }
.landing-eco-enlace { display: inline-block; text-decoration: none; flex: none;
  white-space: nowrap; }
@media (max-width: 479px) {
  .landing-eco-enlace { display: block; width: 100%; text-align: center; white-space: normal; }
}
@media (min-width: 820px) {
  .landing-eco-banda { flex-direction: row; align-items: center; gap: var(--esp-5);
    padding: var(--esp-6) var(--esp-7); }
}

/* ---- Banda de mascotas ---- */
.landing-seccion-pets { padding-top: var(--esp-4); }
.landing-pets { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--esp-4); background: var(--color-acento-suave);
  border: 1px solid color-mix(in srgb, var(--color-acento) 30%, transparent);
  border-radius: var(--radio-lg); padding: var(--esp-6); }
/* En #serie el banner va justo después de la cuadrícula de marcas y necesita aire
   propio; en la landing lo aporta el relleno de la sección. */
.landing-marcas + .landing-pets { margin-top: var(--esp-6); }
.landing-pets-icono { display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  background: var(--color-superficie); color: var(--color-acento); }
.landing-pets-cuerpo { flex: 1; }
.landing-pets-titulo { font-size: var(--texto-xl); line-height: 1.25;
  margin-bottom: var(--esp-2); text-wrap: balance; }
.landing-pets-texto { color: var(--color-texto-secundario); max-width: 60ch; text-wrap: pretty; }
.landing-pets-enlace { display: inline-block; text-decoration: none; flex: none;
  white-space: nowrap; }
@media (max-width: 479px) {
  .landing-pets-enlace { display: block; width: 100%; text-align: center; white-space: normal; }
}
/* La fila (icono | texto | botón) solo cuando hay ancho de sobra: por debajo de
   820 px el título se partía en tres líneas contra el botón. */
@media (min-width: 820px) {
  .landing-pets { flex-direction: row; align-items: center; gap: var(--esp-5);
    padding: var(--esp-6) var(--esp-7); }
}

.landing-pie { margin-top: var(--esp-7); padding: var(--esp-6) 0 var(--esp-5);
  border-top: 1px solid var(--color-borde); text-align: center;
  color: var(--color-texto-secundario); font-size: var(--texto-sm); }
.landing-firma { font-weight: 700; color: var(--color-texto); margin-bottom: var(--esp-1); }
/* Enlaces del pie: Ecosistema y Bases, en fila cuando caben y apilados en 320. */
.landing-pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--esp-2) var(--esp-5); margin-bottom: var(--esp-4); }
.landing-pie-enlaces a { color: var(--color-primario); text-decoration: none;
  font-size: var(--texto-sm); }
.landing-pie-enlaces a:hover, .landing-pie-enlaces a:focus-visible { text-decoration: underline; }
/* Sello del pie: el mismo disco cálido de la cabecera, más pequeño, para cerrar
   la página con la misma marca con la que abre. */
.pie-sello { display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin: 0 auto var(--esp-3);
  background: var(--color-acento-suave); color: var(--color-acento); }

@media (min-width: 640px) {
  .landing-libros { grid-template-columns: repeat(2, 1fr); }
  /* En tabletas las tarjetas de "Cómo funciona" van en fila: icono + texto. */
  .landing-como-tarjeta { display: flex; align-items: flex-start; gap: var(--esp-5); }
  .landing-como-titulo { margin-top: 0; }
}
@media (min-width: 900px) {
  .landing-como { grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); }
  .landing-como-tarjeta { display: block; }
  .landing-como-titulo { margin-top: var(--esp-4); }
  .landing-temas { grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); }
  .landing-privacidad { flex-direction: row; align-items: flex-start; gap: var(--esp-5);
    padding: var(--esp-7); }
}
@media (min-width: 1000px) {
  .landing-libros { grid-template-columns: repeat(4, 1fr); gap: var(--esp-5); }
}

/* ========== Panel: siguiente paso + cuadrícula de módulos ========== */

/* Banda de saludo: degradado tenue de acento que se disuelve hacia la derecha.
   Da la bienvenida sin robarle peso al "siguiente paso", que es la acción real. */
.panel-saludo { border-radius: var(--radio-lg); padding: var(--esp-4) var(--esp-5);
  margin-bottom: var(--esp-2);
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--color-acento-suave) 90%, transparent) 0%,
    transparent 72%); }
.panel-saludo p { color: var(--color-texto-secundario); margin-top: var(--esp-2); }
/* La línea de ánimo va en --color-texto, no en acento: acento sobre el tinte de
   la banda da 4.11:1 y no llega a AA para texto normal. El peso hace el énfasis. */
.panel-saludo .panel-animo { color: var(--color-texto); font-weight: 600; }

/* Estado vacío: icono en círculo de tono sobre el texto, centrado. Una pantalla
   sin datos debe verse diseñada, no olvidada. */
.estado-vacio { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--esp-4); padding: var(--esp-7) var(--esp-4); }
.estado-vacio-icono { width: 72px; height: 72px; }
.estado-vacio-texto { color: var(--color-texto-secundario); max-width: 46ch; text-wrap: pretty; }

.siguiente-paso { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--esp-4); background: var(--color-primario);
  color: var(--color-primario-texto); border-radius: var(--radio-lg);
  padding: var(--esp-5); margin: var(--esp-4) 0 var(--esp-6); }
.siguiente-paso-etiqueta { color: var(--color-primario-texto); opacity: .8; }
.siguiente-paso-texto { font-size: var(--texto-lg); margin-top: var(--esp-1); text-wrap: pretty; }
.siguiente-paso .boton.inverso { background: var(--color-primario-texto); color: var(--color-primario);
  flex-shrink: 0; }

.grid-modulos { display: grid; grid-template-columns: 1fr; gap: var(--esp-3); }
@media (min-width: 640px) { .grid-modulos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-modulos { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-modulo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.tarjeta-modulo-icono { width: 44px; height: 44px; }
.tarjeta-modulo-estado { margin: 0; }

/* ========== Anchos de escritorio: cuadrículas y columna de lectura ========== */

.grid-2col { display: grid; grid-template-columns: 1fr; gap: var(--esp-3); align-items: start; }
@media (min-width: 900px) { .grid-2col { grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); } }

.columna-lectura { max-width: 760px; margin: 0 auto; }

/* ========== Configuración: formulario | lista de hijos ========== */

.config-layout { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); align-items: start; margin: var(--esp-4) 0; }
@media (min-width: 900px) { .config-layout { grid-template-columns: 1fr 1fr; gap: var(--esp-5); } }

/* ========== Ajustes: tarjetas de sección ========== */

.ajustes-seccion-titulo { font-size: var(--texto-md); margin-bottom: var(--esp-3); }
.tarjeta-peligro { margin-top: var(--esp-5); border-color: var(--color-error); }

/* ========== Vista de módulo: mapa de pasos + contenido ========== */
/* Móvil: el mapa es una fila de chips con scroll horizontal propio y el contenido debajo.
   Escritorio (>=1000px): dos columnas, mapa fijo a la izquierda. */

.modulo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }

.modulo-mapa { display: flex; flex-direction: row; gap: var(--esp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--esp-2); }

.paso-mapa { position: relative; display: inline-flex; align-items: center; gap: var(--esp-2); flex: 0 0 auto;
  white-space: nowrap; text-align: left; font: inherit; font-size: var(--texto-sm);
  background: var(--color-superficie); color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: 999px;
  padding: var(--esp-2) var(--esp-3); }
.paso-mapa:hover { border-color: var(--color-primario); }
.paso-mapa.actual { border-color: var(--color-primario); font-weight: 700;
  background: var(--color-fondo); box-shadow: inset 0 0 0 1px var(--color-primario); }

.paso-mapa-num { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 999px;
  background: var(--color-fondo); color: var(--color-texto-secundario);
  font-size: var(--texto-xs); font-weight: 700; }
.paso-mapa.hecho .paso-mapa-num { background: var(--color-confianza-suave); color: var(--color-confianza); }
.paso-mapa.actual .paso-mapa-num { background: var(--color-primario); color: var(--color-primario-texto); }
.paso-mapa-estado { color: var(--color-confianza); font-weight: 700; }

/* Microtexto "quién hace qué" bajo el título de cada paso en el mapa de
   escritorio. En móvil el mapa es una fila de chips compactos (solo título,
   sin espacio para una segunda línea), así que se oculta ahí. */
.paso-mapa-quien { display: none; }

@media (min-width: 1000px) {
  .modulo-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--esp-5); }
  .modulo-mapa { position: sticky; top: var(--esp-5); flex-direction: column;
    overflow: visible; padding-bottom: 0; }
  .paso-mapa { width: 100%; white-space: normal; border-radius: var(--radio-sm);
    padding: var(--esp-3); font-size: var(--texto-md); }
  .paso-mapa-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
  .paso-mapa-estado { margin-left: auto; }
  .paso-mapa-quien { display: block; font-size: var(--texto-xs); font-weight: 400;
    color: var(--color-texto-secundario); }
}

.modulo-contenido { min-width: 0; max-width: 760px; margin: 0; }
.modulo-contenido > h2 { margin-bottom: var(--esp-3); }

/* Etiqueta "quién hace qué": pastilla discreta bajo el h2 de cada paso y en
   el microtexto del mapa (ver .paso-mapa-quien arriba). */
.chip-quien { display: inline-block; font-size: var(--texto-xs); font-weight: 700;
  padding: 2px var(--esp-3); border-radius: 999px; margin: 0 0 var(--esp-3);
  background: var(--color-confianza-suave); color: var(--color-confianza); }

/* ========== Paso Detectar: tres niveles de gravedad ==========
   Cada nivel es un bloque con borde izquierdo e icono en círculo, teñido según
   su gravedad: verde de confianza para lo normal, ámbar para lo que merece
   atención, rojo suave para lo que merece acción. La intención es que se
   distingan de un vistazo sin sonar alarmistas (fondos suaves, no de alerta). */
.detect-tiers { display: flex; flex-direction: column; gap: var(--esp-3); }
.detect-tier { border-radius: var(--radio-md); padding: var(--esp-3) var(--esp-4);
  border-left: 4px solid var(--color-borde); }
.detect-tier-cabecera { display: flex; align-items: center; gap: var(--esp-2);
  margin-bottom: var(--esp-2); }
.detect-tier-cabecera h3 { margin: 0; font-size: var(--texto-md); }
.detect-tier-icono { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--color-superficie); }
.detect-tier ul { margin: 0; }

/* Cada punto se lee en dos tiempos: la señal (primera frase, en peso fuerte)
   y su razón (el resto, secundario y más chico). La jerarquía es puramente
   visual: nada se esconde tras un clic, así el bloque sigue sirviendo
   impreso y para lectores de pantalla se lee completo y seguido. */
.detect-lista { margin: 0; padding-left: 20px; }
.detect-lista li { margin: 0 0 var(--esp-3); }
.detect-lista li:last-child { margin-bottom: 0; }
.detect-senal { display: block; font-weight: 600; }
.detect-razon { display: block; margin-top: 2px;
  font-size: var(--texto-sm); color: var(--color-texto-secundario); }

.detect-tier-normal { background: var(--color-confianza-suave); border-left-color: var(--color-confianza); }
.detect-tier-normal .detect-tier-icono { color: var(--color-confianza); }

.detect-tier-atencion { background: var(--color-atencion-suave); border-left-color: var(--tono-mfi002-tinta); }
.detect-tier-atencion .detect-tier-icono { color: var(--tono-mfi002-tinta); }

.detect-tier-accion { background: color-mix(in srgb, var(--color-error) 12%, var(--color-superficie));
  border-left-color: var(--color-error); }
.detect-tier-accion .detect-tier-icono { color: var(--color-error); }

/* ========== Aviso de 0-3 años en el paso Practicar y en #practica ==========
   Fondo de atención suave (no de alarma): sirve para que una familia con un
   hijo pequeño encuentre algo suyo donde las simulaciones empiezan en 4-6. */
.tarjeta-nota03 { background: var(--color-atencion-suave); }
.nota03-encabezado { display: flex; align-items: center; gap: var(--esp-2);
  margin-bottom: var(--esp-2); }
.tarjeta-nota03 p { margin-bottom: var(--esp-2); }

.banner-nota03 { background: var(--color-atencion-suave);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); }
.banner-nota03 h2 { font-size: var(--texto-md); margin: 0 0 4px; }
.banner-nota03 p { margin: 0; color: var(--color-texto-secundario); }

/* ========== Animaciones de escena (MFI.ui.Animacion) ==========
   Rejilla de tres columnas: las flechas flanquean el escenario y la barra de
   puntos y los controles ocupan el ancho completo debajo. En móvil las flechas
   bajan a la fila de la barra (ver la media query de 480 px). */
.animacion { display: grid; gap: var(--esp-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev escena next"
    "barra barra barra"
    "controles controles controles";
  align-items: center;
  max-width: 560px; margin: 0 auto; }
/* El borde del escenario es lo que hace legible el subtítulo cuando la
   animación se abre en un diálogo (fondo = superficie): sin él, la banda blanca
   se confundía con el papel del diálogo y volvía a leerse como un pie de foto. */
.animacion-escenario { grid-area: escena;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); overflow: hidden;
  background: var(--color-acento-suave); }
.animacion-lienzo { display: block; width: 100%; height: auto; }
.animacion-fondo { fill: var(--color-acento-suave); }
/* Las coordenadas de las figuras son del viewBox: el origen del transform
   tiene que serlo también (fuera de la media query, porque también aplica en
   modo storyboard, donde las transiciones están anuladas pero el transform no). */
.animacion-escenario g[data-figura] { transform-box: view-box; transform-origin: 0 0; }

/* ---- Subtítulo integrado ----
   Banda dentro del escenario, como los subtítulos de un video: debajo del
   lienzo la gente no la leía. El margen negativo la mete unos píxeles sobre el
   lienzo (la franja de suelo vacía que queda bajo los pies, y=262 de 300) para
   que se lea como parte de la escena sin tapar a las figuras.
   La altura mínima reserva dos renglones: sin ella el escenario crecería y
   encogería en cada cuadro. */
.animacion-subtitulo { position: relative; z-index: 1; margin-top: -12px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-md);
  min-height: calc(2 * 1.4em + 2 * var(--esp-3));
  /* Translúcida sobre el escenario: deja pasar un punto del color de la escena,
     lo justo para que la banda se sienta parte del cuadro y no una tarjeta
     pegada debajo. */
  background: color-mix(in srgb, var(--color-superficie) 93%, transparent);
  border-top: 1px solid var(--color-borde); }
.animacion-subtitulo-texto { margin: 0; font-size: inherit; font-weight: 600;
  line-height: 1.4; color: var(--color-texto);
  text-align: center; text-wrap: pretty; }

/* ---- Flechas de navegación ----
   Siempre visibles y siempre operables (también en storyboard). 44 x 44 para
   cumplir el blanco táctil mínimo. En los extremos quedan enfocables pero
   anunciadas con aria-disabled: deshabilitarlas de verdad tira el foco. */
.animacion-flecha { width: 44px; height: 44px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-borde); border-radius: 50%;
  background: var(--color-superficie); color: var(--color-primario);
  cursor: pointer; }
.animacion-flecha:hover { border-color: var(--color-primario); }
.animacion-flecha-prev { grid-area: prev; }
.animacion-flecha-prev svg { transform: scaleX(-1); }
.animacion-flecha-next { grid-area: next; }
.animacion-flecha.inactiva { opacity: .35; cursor: default; }
.animacion-flecha.inactiva:hover { border-color: var(--color-borde); }

.animacion-barra { grid-area: barra; display: flex; flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3); align-items: center; justify-content: center; }
.animacion-contador { font-size: var(--texto-sm); color: var(--color-texto-secundario); }

.animacion-puntos { display: flex; flex-wrap: wrap; gap: var(--esp-1);
  justify-content: center; align-items: center; }
/* El punto se ve de 12 px pero el botón mide 24 x 24 para cumplir el tamaño
   mínimo de blanco táctil. El círculo visible vive en el ::before. */
.animacion-punto { width: 24px; height: 24px; padding: 6px; flex: none;
  border: none; border-radius: 50%; background: transparent; }
.animacion-punto::before { content: ''; display: block; width: 100%; height: 100%;
  box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--color-primario); }
.animacion-punto.actual::before { background: var(--color-primario); }

.animacion-controles { grid-area: controles;
  display: flex; gap: var(--esp-2); flex-wrap: wrap; justify-content: center; }

/* Móvil: el escenario toma el ancho completo y las flechas bajan a los costados
   de la barra, donde el pulgar las alcanza. */
@media (max-width: 480px) {
  .animacion { grid-template-areas:
      "escena escena escena"
      "prev barra next"
      "controles controles controles"; }
  .animacion-subtitulo { font-size: var(--texto-sm);
    padding: var(--esp-3);
    min-height: calc(3 * 1.4em + 2 * var(--esp-3)); }
}

/* ========== Micro-animaciones ========== */
/* La regla global de prefers-reduced-motion (base.css) ya anula animation/transition;
   esto es cinturón y tirantes: nada de lo siguiente se declara si el usuario prefiere sin movimiento. */
@media (prefers-reduced-motion: no-preference) {
  /* Hover lift solo en tarjetas interactivas (tarjeta completa es el objetivo de clic
     o representa un enlace): tarjetas de módulo y de libro. Las tarjetas de contenido
     (.tarjeta genérica, .paso-tarjeta) no son un único blanco de clic y no deben levantarse. */
  .tarjeta-modulo, .libro-tarjeta {
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .tarjeta-modulo:hover, .tarjeta-modulo:focus-visible,
  .libro-tarjeta:hover, .libro-tarjeta:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
  }

  /* Las opciones del diagnóstico son botones de clic único: un pequeño
     levantamiento ayuda a sentirlas interactivas sin distraer. */
  .opcion-sim {
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .opcion-sim:hover, .opcion-sim:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--sombra-sm);
  }

  @keyframes aparecer {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  .animar-entrada { animation: aparecer .5s ease both; }
  .animar-entrada:nth-child(2) { animation-delay: .08s; }
  .animar-entrada:nth-child(3) { animation-delay: .16s; }
  .animar-entrada:nth-child(4) { animation-delay: .24s; }
  .animar-entrada:nth-child(5) { animation-delay: .30s; }
  .animar-entrada:nth-child(6) { animation-delay: .36s; }
  .animar-entrada:nth-child(n+7) { animation-delay: .42s; }

  @keyframes latido {
    0% { transform: scale(1); }
    50% { transform: scale(1.012); }
    100% { transform: scale(1); }
  }
  .siguiente-paso { animation: latido .9s ease 1; }

  /* ---- Entrada de ruta ----
     Cada cambio de hash vacía #main y lo reconstruye, así que animar sus hijos
     directos da una transición de vista sin tocar el router. */
  #main > * { animation: aparecer .35s ease both; }

  /* La vista de módulo se repinta entera al tocar un paso del mapa: si animara
     todo, el título y el mapa lateral parpadearían en cada clic. Solo entra la
     columna de contenido, que es lo que realmente cambia. */
  body:has(.modulo-layout) #main > * { animation: none; }
  .modulo-contenido { animation: aparecer .3s ease both; }

  /* La cuadrícula de módulos entra en cascada; su contenedor no se anima para
     no sumar dos desplazamientos sobre la misma tarjeta. */
  #main > .grid-modulos { animation: none; }
  .grid-modulos > * { animation: aparecer .45s ease both; }
  .grid-modulos > *:nth-child(2) { animation-delay: .05s; }
  .grid-modulos > *:nth-child(3) { animation-delay: .10s; }
  .grid-modulos > *:nth-child(4) { animation-delay: .15s; }
  .grid-modulos > *:nth-child(5) { animation-delay: .20s; }
  .grid-modulos > *:nth-child(6) { animation-delay: .25s; }
  .grid-modulos > *:nth-child(n+7) { animation-delay: .30s; }

  /* ---- Ilustración del hero ----
     Flotación mínima (±4 px, 6 s): sugiere vida sin pedir atención. */
  @keyframes flotar {
    from { transform: translateY(-4px); }
    to { transform: translateY(4px); }
  }
  .hero-figura { animation: flotar 6s ease-in-out infinite alternate; }

  /* ---- Iconos que responden al puntero ---- */
  .landing-tema-icono svg, .tarjeta-modulo-icono svg,
  .landing-como-tarjeta .landing-icono svg { transition: transform .18s ease; }
  .landing-tema:hover .landing-tema-icono svg,
  .landing-tema:focus-visible .landing-tema-icono svg,
  .tarjeta-modulo:hover .tarjeta-modulo-icono svg,
  .tarjeta-modulo:focus-visible .tarjeta-modulo-icono svg,
  .landing-como-tarjeta:hover .landing-icono svg { transform: scale(1.08); }

  /* ---- Botones ---- */
  .boton { transition: transform 80ms ease; }
  .boton:active { transform: scale(.98); }

  /* El contenido del acordeón sí se puede animar aunque <details> no anime su
     propia apertura: se anima el cuerpo cuando el detalle ya está abierto. */
  details[open] .acordeon-cuerpo { animation: aparecer .25s ease both; }

  /* ---- Figuras de las animaciones de escena ----
     Todo el movimiento entre cuadros sale de aquí: el motor solo reescribe el
     transform y la opacidad de cada figura. transform-box/origin fijan el
     origen en el sistema del viewBox, que es lo que asumen las coordenadas. */
  .animacion-escenario g[data-figura] {
    transition: transform .6s ease, opacity .6s ease;
  }
  .animacion-punto::before { transition: background-color .2s ease, transform .2s ease; }
  .animacion-punto:hover::before { transform: scale(1.2); }

  /* Pista de descubrimiento: un solo pulso en Siguiente al abrir la animación.
     Sin él, la gente no notaba que podía avanzar los cuadros a mano. Se apaga
     en cuanto tocan cualquier control (el JS quita la clase). */
  @keyframes anim-flecha-pulso {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primario) 40%, transparent); }
    70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-primario) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primario) 0%, transparent); }
  }
  .animacion-flecha.pulso { animation: anim-flecha-pulso 1.6s ease-out .4s 1 both; }
  .animacion-flecha { transition: border-color .15s ease, opacity .2s ease; }
}

/* Detalles de libro (info oficial de la serie) */
.libro-subtitulo { font-size: var(--texto-sm); color: var(--color-texto); font-style: italic; margin-top: 2px; }
.libro-descripcion { font-size: var(--texto-sm); color: var(--color-texto-secundario); margin-top: 6px; }

/* Logos de marca: se superponen al monograma. La placa blanca solo se pinta
   cuando el logo carga (.cargada, la agrega core.js en el evento load): así un
   logo que aún no llega o que falla sin internet nunca deja un cuadro blanco
   tapando el monograma. El fondo claro se mantiene también en tema oscuro para
   que los logotipos oscuros se lean. */
.marca-identidad { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.marca-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  border-radius: var(--radio-md); padding: 8px; }
.marca-logo.cargada { background: #FFFFFF; }

/* Ajustes: tarjetas de altura uniforme. Las celdas del grid se estiran y cada
   tarjeta es columna flex; el ultimo bloque (botones) baja al fondo, asi todas
   las tarjetas alinean su base aunque tengan distinto contenido. */
.ajustes-cuadricula { align-items: stretch; }
.ajustes-cuadricula > .tarjeta { display: flex; flex-direction: column; margin-bottom: 0; }
.ajustes-cuadricula > .tarjeta > :last-child { margin-top: auto; }

/* Campo con error de validacion (confirmacion escrita de borrado) */
.campo-error { border-color: var(--color-error) !important; }

/* Descripcion de seccion en Ajustes: misma estructura en todas las tarjetas */
.ajustes-seccion-texto { color: var(--color-texto-secundario); font-size: var(--texto-sm); margin-bottom: var(--esp-3); }
/* Con un numero impar de tarjetas la ultima ocupa la fila entera: mejor una
   franja completa que un hueco a medias al final de la cuadricula. */
@media (min-width: 900px) {
  .ajustes-cuadricula > .tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ========== Bases y referencias ========== */
/* Toda la vista vive en columna de lectura: son parrafos largos y listas de
   fuentes, no una cuadricula. Las fuentes se leen como fichas apiladas. */
.bases-intro { color: var(--color-texto-secundario); text-wrap: pretty;
  margin-bottom: var(--esp-6); }
.bases-seccion-titulo { font-size: var(--texto-xl); margin-top: var(--esp-7);
  margin-bottom: var(--esp-3); }
.bases-seccion-intro { color: var(--color-texto-secundario); text-wrap: pretty;
  margin-bottom: var(--esp-4); }

.bases-categorias { list-style: none; display: flex; flex-direction: column; gap: var(--esp-4); }
.bases-categoria { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.bases-categoria-texto { color: var(--color-texto-secundario); text-wrap: pretty; }

.bases-modulos { display: flex; flex-direction: column; gap: var(--esp-4); }
.bases-modulo { margin-bottom: 0; }
.bases-modulo-titulo { font-size: var(--texto-lg); margin-bottom: var(--esp-2); }
.bases-sostiene { text-wrap: pretty; }
/* El limite declarado de un modulo (hoy solo MFI-002) no puede leerse igual que
   el resto: fondo de atencion y filo lateral, como los cuidados de privacidad. */
.bases-limite { background: var(--color-atencion-suave); border-radius: var(--radio-sm);
  border-left: 4px solid var(--tono-mfi002-tinta); padding: var(--esp-3) var(--esp-4);
  margin-top: var(--esp-3); text-wrap: pretty; }

.bases-fuentes { list-style: none; display: flex; flex-direction: column; gap: var(--esp-3);
  margin-top: var(--esp-4); border-top: 1px solid var(--color-borde); padding-top: var(--esp-4); }
.bases-fuente-titulo { text-wrap: pretty; margin: 2px 0 4px; }
.bases-fuente-enlace { font-size: var(--texto-sm); }

.bases-limites { background: var(--color-atencion-suave); margin-bottom: 0; }
.bases-limites ul { list-style: none; display: flex; flex-direction: column; gap: var(--esp-3); }
.bases-limites li { position: relative; padding-left: var(--esp-5); text-wrap: pretty; }
.bases-limites li::before { content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--tono-mfi006-tinta); }

.bases-nota { color: var(--color-texto-secundario); font-size: var(--texto-sm);
  margin-top: var(--esp-6); text-wrap: pretty; }

/* ========== Ecosistema ========== */
/* Reutiliza las cuadriculas de la landing (.landing-como, .landing-marcas,
   .landing-libros); aqui solo van los ajustes propios de la vista. */
.eco-pilares { margin-top: var(--esp-4); }
.eco-aliados-intro { color: var(--color-texto-secundario); text-wrap: pretty;
  max-width: 68ch; margin-bottom: var(--esp-4); }
.eco-pets { margin-top: var(--esp-6); }
/* Dos salidas (el sitio y el modelo completo): apiladas en movil, en fila
   cuando la banda se vuelve horizontal. */
.eco-pets-enlaces { display: flex; flex-direction: column; gap: var(--esp-2); flex: none; }
@media (min-width: 480px) { .eco-pets-enlaces { flex-direction: row; flex-wrap: wrap; } }
@media (min-width: 820px) { .eco-pets-enlaces { flex-direction: column; } }


/* Logo del aliado de mascotas dentro de su banda: sustituye a la huella
   dibujada cuando carga, sobre placa blanca para que se lea en ambos temas. */
.landing-pets-icono.con-logo svg { display: none; }
/* flex:none porque el sello es un contenedor flex: sin él la imagen se
   comprimía a lo ancho y el logo salía ovalado. */
.pets-logo { width: 56px; height: 56px; flex: none; object-fit: contain;
  background: #FFFFFF; border-radius: var(--radio-md); padding: 6px; }