/* CardioPausa-TEO — hoja de estilo principal
   Lenguaje de color por zonas de frecuencia cardíaca:
     · Verde / azul  -> zona segura / reposo   (estado por defecto, acciones)
     · Ámbar         -> esfuerzo moderado / atención (avisos)
     · Naranja-rojo   -> frecuencia elevada / bajar el ritmo (alarma, detener)
   Marca (del logo): vino + oro, reservados al lockup de identidad.
   Prioridad: legibilidad, alto contraste y objetivos táctiles grandes. */

:root {
    /* Neutros / base */
    --fondo: #cfe3de;          /* verde-azulado suave: hace contraste con las tarjetas blancas */
    --fondo-seccion: #eef4f2;  /* bloques internos dentro de una tarjeta blanca */
    --superficie: #ffffff;
    --tinta: #1e2d33;
    --tinta-suave: #55636b;
    --linea: #dde6e4;

    /* Zona segura / reposo */
    --segura: #1c8a7a;
    --segura-fuerte: #14675b;
    --segura-tenue: #e3f1ee;
    --azul-reposo: #3f86ac;
    --azul-reposo-tenue: #e4eef4;

    /* Zona moderada / atención */
    --atencion: #c1841c;
    --atencion-fuerte: #8a5c11;
    --atencion-tenue: #faedd2;

    /* Zona elevada / bajar el ritmo */
    --alerta: #d95a3c;
    --alerta-fuerte: #b23f28;
    --alerta-tenue: #fbe6df;

    /* Marca */
    --marca-vino: #7c2740;
    --marca-oro: #b9863a;

    /* Semántica heredada (compatibilidad de nombres) */
    --azul: #17313a;
    --verde-ok: #1c8a7a;
    --ambar: #c1841c;
    --rojo: #c0453a;
    --foco: #3f86ac;

    --radio-s: 10px;
    --radio-m: 16px;
    --radio-l: 24px;
    --sombra: 0 10px 30px rgba(23, 49, 58, 0.09);
    --sombra-suave: 0 4px 14px rgba(23, 49, 58, 0.06);
    --ancho: 760px;
    --ancho-estrecho: 560px;

    --fuente: "Nunito Sans", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulo: "Nunito", "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body.pagina {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3,
.titulo-xl, .titulo-l, .titulo-m,
.eyebrow, .marca__texto {
    font-family: var(--fuente-titulo);
}
.titulo-xl, .titulo-l, .titulo-m { font-weight: 800; letter-spacing: -0.01em; }

img { max-width: 100%; display: block; }
a { color: var(--segura-fuerte); }

:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
    border-radius: 4px;
}

.salto-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--azul);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    z-index: 10;
}
.salto-contenido:focus { left: 0; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(14px, 4vw, 20px); }
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.contenido { padding: clamp(20px, 5vw, 34px) 0 44px; }
.contenido--centrado { display: flex; align-items: flex-start; }

.pie { padding: 26px 0 34px; color: var(--tinta-suave); font-size: 14px; text-align: center; }
.pie__marca { display: inline-block; margin-bottom: 12px; }
.pie__marca img { height: 30px; width: auto; opacity: 0.85; }
.pie__aviso { margin: 0 auto 10px; max-width: 640px; }
.pie__enlaces a { margin: 0 6px; }

/* ---------- Tipografía ---------- */
.titulo-xl { font-size: clamp(23px, 4.4vw, 32px); line-height: 1.18; color: var(--azul); margin: 6px 0 10px; }
.titulo-l  { font-size: clamp(20px, 3.6vw, 26px); line-height: 1.22; color: var(--azul); margin: 4px 0 9px; }
.titulo-m  { font-size: clamp(18px, 3vw, 22px); color: var(--azul); margin: 4px 0 8px; }
.subtitulo-bloque { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin: 18px 0 9px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--segura); font-weight: 700; margin: 0; }
.eyebrow--alerta { color: var(--alerta-fuerte); }
.parrafo-guia { color: var(--tinta-suave); margin: 0 0 18px; }

/* Bloques de texto largo justificados, con guionado para evitar ríos de espacio. */
.texto-largo,
.parrafo-guia,
.hero__intro,
.prosa p,
.pie__aviso {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.nota-pie { color: var(--tinta-suave); font-size: 14px; margin-top: 18px; }
.ayuda-campo { color: var(--tinta-suave); font-size: 14px; margin: 8px 0 0; }
.ayuda-campo--centro { text-align: center; }
.nota-privacidad { margin-top: 18px; }

.aviso-suave, .aviso-alerta, .aviso-atencion {
    border-radius: var(--radio-s); padding: 12px 14px; font-size: 15px; margin: 14px 0;
}
.aviso-suave { background: var(--segura-tenue); color: var(--segura-fuerte); }
.aviso-atencion { background: var(--atencion-tenue); color: var(--atencion-fuerte); }
.aviso-alerta { background: var(--alerta-tenue); color: var(--alerta-fuerte); }

/* ---------- Tarjetas ---------- */
.tarjeta {
    background: var(--superficie); border: 1px solid var(--linea);
    border-radius: var(--radio-l); padding: clamp(18px, 4vw, 28px); box-shadow: var(--sombra);
}
.tarjeta + .tarjeta, .cabecera-seccion + * { margin-top: 22px; }
.tarjeta--centrada, .tarjeta--bloqueo, .tarjeta--inicio { text-align: center; }
.cabecera-seccion { margin-bottom: 18px; }

.prosa p { margin: 0 0 14px; }
.prosa ul { margin: 0 0 16px; padding-left: 20px; }
.prosa li { margin-bottom: 6px; }

/* ---------- Botones ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 2px solid transparent;
    font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .05s ease, background-color .15s ease;
}
.boton:active { transform: translateY(1px); }
.boton--grande { width: 100%; font-size: 16px; min-height: 50px; }
.boton--primario { background: var(--segura); color: #fff; }
.boton--primario:hover { background: var(--segura-fuerte); }
.boton--secundario { background: transparent; color: var(--segura-fuerte); border-color: var(--segura); }
.boton--secundario:hover { background: var(--segura-tenue); }
.boton--alerta { background: var(--alerta); color: #fff; }
.boton--alerta:hover { background: var(--alerta-fuerte); }
.boton--mini { min-height: 38px; padding: 8px 16px; font-size: 14px; width: auto; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.enlace-discreto {
    background: none; border: 0; padding: 8px; font: inherit; color: var(--tinta-suave);
    text-decoration: underline; cursor: pointer;
}
.enlace-discreto--alerta { color: var(--alerta-fuerte); }

/* ---------- Bienvenida (hero) ---------- */
.hero {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 28px;
    overflow: hidden; box-shadow: var(--sombra);
}
.hero__marca {
    display: flex; justify-content: center; padding: clamp(18px, 4vw, 24px);
    background: linear-gradient(135deg, var(--segura-tenue) 0%, var(--azul-reposo-tenue) 55%, #f6ecdf 100%);
}
.hero__logo { max-width: min(280px, 82%); height: auto; }

.hero__cuerpo {
    display: flex; gap: clamp(14px, 3vw, 20px); align-items: center;
    padding: clamp(18px, 4vw, 24px);
}
.hero__figura {
    width: clamp(96px, 26vw, 124px); height: clamp(96px, 26vw, 124px);
    flex: none; border-radius: 50%;
    box-shadow: 0 0 0 5px var(--segura-tenue), var(--sombra-suave);
    background: #fff;
}
.hero__texto { text-align: left; }
.hero__texto h1 { margin: 0 0 8px; }
.hero__intro { color: var(--tinta-suave); margin: 0; font-size: 15px; }

.hero__form { padding: 4px clamp(18px, 4vw, 24px) 8px; }
.hero__form label { display: block; font-family: var(--fuente-titulo); font-weight: 700; color: var(--azul); margin-bottom: 8px; font-size: 15px; }
.hero__acciones { display: grid; gap: 10px; margin-top: 14px; }

.hero__pasos {
    list-style: none; margin: 4px 0 0; padding: 16px clamp(18px, 4vw, 24px);
    display: grid; gap: 10px; background: var(--fondo-seccion); border-top: 1px solid var(--linea);
    font-size: 15px;
}
.hero__pasos li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--tinta); }
.hero__pasos span {
    flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--fuente-titulo); font-weight: 800; font-size: 14px; background: var(--segura); color: #fff;
}

.zonas {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 16px clamp(18px, 4vw, 24px) 22px; background: var(--fondo-seccion);
}
.zonas__titulo { width: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); font-weight: 700; }
.zona { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 11px; }
.zona--segura { background: var(--segura-tenue); color: var(--segura-fuerte); }
.zona--atencion { background: var(--atencion-tenue); color: var(--atencion-fuerte); }
.zona--alerta { background: var(--alerta-tenue); color: var(--alerta-fuerte); }

@media (max-width: 560px) {
    .hero { border-radius: 20px; }
    .hero__cuerpo { flex-direction: column; text-align: center; }
    .hero__texto { text-align: center; }
}

/* ---------- Festejo al completar una actividad ---------- */
.festejo {
    position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
    padding: 24px; background: rgba(23, 49, 58, 0.55);
}
.festejo__tarjeta { text-align: center; color: #fff; }
.festejo__tarjeta img {
    width: 200px; height: 200px; border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18);
    animation: brinca 0.9s ease-in-out infinite alternate;
}
.festejo__tarjeta p { font-family: var(--fuente-titulo); font-weight: 800; font-size: 26px; margin: 16px 0 0; }
@keyframes brinca { from { transform: translateY(4px); } to { transform: translateY(-10px); } }

/* ---------- Inicio (tiempo + necesidad) ---------- */
.formulario-inicio { margin-top: 8px; }
.saludo-personal { color: var(--segura-fuerte); font-weight: 700; margin: 0 0 4px; }
.bloque-opciones { border: 0; padding: 0; margin: 0 0 22px; }
.bloque-opciones__titulo { font-weight: 700; color: var(--azul); padding: 0; margin-bottom: 12px; }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 88px; min-height: 48px; padding: 0 18px;
    border: 2px solid var(--linea); border-radius: 999px;
    font-weight: 700; color: var(--tinta-suave); background: #fff;
}
.chip input:checked + span { border-color: var(--segura); background: var(--segura); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

.rejilla-necesidades { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.necesidad input { position: absolute; opacity: 0; }
.necesidad__contenido {
    display: flex; gap: 12px; align-items: center; padding: 14px;
    border: 2px solid var(--linea); border-radius: var(--radio-m); background: #fff; height: 100%; cursor: pointer;
}
.necesidad input:checked + .necesidad__contenido { border-color: var(--segura); background: var(--segura-tenue); }
.necesidad input:focus-visible + .necesidad__contenido { outline: 3px solid var(--foco); outline-offset: 2px; }
.necesidad__inicial {
    flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; background: var(--segura); color: #fff;
}
.necesidad__texto { display: flex; flex-direction: column; }
.necesidad__texto strong { color: var(--azul); }
.necesidad__texto span { font-size: 14px; color: var(--tinta-suave); }

/* ---------- Filtro de seguridad ---------- */
.lista-sintomas { border: 0; padding: 0; margin: 12px 0; }
.lista-sintomas__titulo { font-weight: 700; color: var(--azul); margin-bottom: 12px; }
.sintoma {
    display: flex; align-items: center; gap: 14px; padding: 14px;
    border: 1px solid var(--linea); border-radius: var(--radio-m); background: #fff; margin-bottom: 10px; cursor: pointer;
}
.sintoma input { position: absolute; opacity: 0; }
.sintoma__marca {
    flex: none; width: 28px; height: 28px; border-radius: 8px;
    border: 2px solid var(--azul-reposo); background: #fff; position: relative;
}
.sintoma input:checked + .sintoma__marca { background: var(--alerta); border-color: var(--alerta); }
.sintoma input:checked + .sintoma__marca::after {
    content: ""; position: absolute; left: 8px; top: 3px;
    width: 8px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.sintoma input:focus-visible + .sintoma__marca { outline: 3px solid var(--foco); outline-offset: 2px; }
.acciones-seguridad { margin-top: 16px; }

.tarjeta--bloqueo { border-color: #f1c9bd; }
.bloqueo__icono {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center;
    font-size: 34px; font-weight: 800; background: var(--alerta-tenue); color: var(--alerta-fuerte);
}
.bloqueo__acciones { margin: 18px 0 6px; }

/* ---------- Menú de experiencias ---------- */
.etiqueta-tiempo { font-size: 14px; color: var(--tinta-suave); margin: 6px 0 0; }
.filtros-categoria { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.filtro-chip {
    display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea);
    background: #fff; text-decoration: none; color: var(--tinta-suave); font-size: 14px; font-weight: 600;
}
.filtro-chip--activo { background: var(--segura); color: #fff; border-color: var(--segura); }

.rejilla-experiencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .rejilla-experiencias { grid-template-columns: 1fr 1fr; } }
.experiencia { border-radius: var(--radio-m); background: var(--segura-tenue); }
.experiencia__enlace { display: flex; gap: 14px; padding: 16px; text-decoration: none; color: inherit; height: 100%; }
.experiencia__pastilla {
    flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    font-size: 20px; background: var(--segura); color: #fff;
}
.experiencia__cuerpo { display: flex; flex-direction: column; gap: 3px; }
.experiencia__titulo { font-weight: 700; color: var(--azul); font-size: 18px; }
.experiencia__meta { font-size: 13px; color: var(--tinta-suave); }
.experiencia__desc { font-size: 14px; color: var(--tinta-suave); }

/* ---------- Ficha de actividad ---------- */
.actividad-encabezado { display: flex; gap: 14px; align-items: center; margin: 6px 0 12px; }
.actividad-encabezado__icono {
    flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    font-size: 22px; background: var(--segura); color: #fff;
}
.lista-pasos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.lista-pasos li { display: flex; gap: 12px; align-items: flex-start; background: var(--segura-tenue); border-radius: var(--radio-s); padding: 12px 14px; }
.lista-pasos__num {
    flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: 14px; background: var(--segura); color: #fff;
}
.recuadro-info, .recuadro-alerta, .recuadro-mensaje {
    border-radius: var(--radio-m); padding: 14px 16px; margin: 14px 0;
}
.recuadro-info { background: var(--segura-tenue); }
.recuadro-alerta { background: var(--alerta-tenue); }
.recuadro-mensaje { background: var(--azul-reposo-tenue); }
.recuadro-info__titulo, .recuadro-alerta__titulo, .recuadro-mensaje__titulo {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; font-weight: 700;
}
.recuadro-alerta__titulo { color: var(--alerta-fuerte); }
.acciones-actividad { display: grid; gap: 10px; margin-top: 18px; justify-items: center; }
.acciones-actividad .boton { width: 100%; }

/* ---------- Motor de actividad ---------- */
.pagina--actividad { background: var(--fondo); }
.motor {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-l);
    padding: clamp(18px, 4vw, 24px); box-shadow: var(--sombra); width: 100%;
}
.motor__cabecera { margin-bottom: 16px; }
.barra-avance { height: 10px; border-radius: 999px; background: #dfeae7; overflow: hidden; margin: 12px 0 8px; }
.barra-avance__relleno { display: block; height: 100%; width: 0; background: var(--segura); transition: width .3s ease; }
.motor__paso-indicador { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin: 0; }
.motor__lienzo { min-height: 180px; }
.motor__navegacion { display: flex; gap: 10px; }
.motor__navegacion .boton { flex: 1; }
.motor__pie { margin-top: 20px; display: grid; gap: 10px; justify-items: center; }
.motor__pie .ayuda-campo { text-align: center; }

.consigna { font-size: 20px; color: var(--azul); font-weight: 700; margin: 4px 0 10px; }
.consigna-ejemplo { color: var(--tinta-suave); font-size: 15px; margin: 0 0 14px; }
.campo-texto {
    width: 100%; min-height: 96px; padding: 12px 14px; font: inherit;
    border: 2px solid var(--linea); border-radius: var(--radio-s); resize: vertical; background: #fff;
}
.campo-linea {
    width: 100%; min-height: 48px; padding: 10px 14px; font: inherit;
    border: 2px solid var(--linea); border-radius: var(--radio-s); background: #fff; margin-bottom: 10px;
}

/* Escala 1-10 (batería): recorre las tres zonas */
.escala { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.escala button {
    width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--linea);
    background: #fff; font: inherit; font-weight: 700; color: var(--tinta-suave); cursor: pointer;
}
.escala button[aria-pressed="true"] { background: var(--segura); border-color: var(--segura); color: #fff; }
.escala button[aria-pressed="true"][data-zona="atencion"] { background: var(--atencion); border-color: var(--atencion); color: #23303a; }
.escala button[aria-pressed="true"][data-zona="alerta"] { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.escala-valor { font-weight: 700; color: var(--azul); }

.opciones { display: grid; gap: 10px; margin: 12px 0; }
.opcion {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 2px solid var(--linea); border-radius: var(--radio-s); background: #fff;
    font: inherit; text-align: left; cursor: pointer; color: var(--tinta);
}
.opcion[aria-pressed="true"] { border-color: var(--segura); background: var(--segura-tenue); }
.opcion[disabled] { opacity: .5; cursor: not-allowed; }

/* Semáforo de hábitos */
.habito { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.habito:last-child { border-bottom: 0; }
.habito__texto { display: block; margin-bottom: 8px; }
.semaforo-luces { display: flex; gap: 8px; }
.luz {
    width: 46px; height: 40px; border-radius: 10px; border: 2px solid var(--linea);
    background: #fff; cursor: pointer; font-size: 13px; color: var(--tinta-suave);
}
.luz[aria-pressed="true"][data-luz="verde"] { background: var(--segura); border-color: var(--segura); color: #fff; }
.luz[aria-pressed="true"][data-luz="ambar"] { background: var(--atencion); border-color: var(--atencion); color: #23303a; }
.luz[aria-pressed="true"][data-luz="rojo"]  { background: var(--alerta); border-color: var(--alerta); color: #fff; }

/* Prioridades */
.prioridad-fila { display: grid; gap: 8px; margin-bottom: 12px; }
.prioridad-fila select { min-height: 44px; font: inherit; padding: 8px; border-radius: var(--radio-s); border: 2px solid var(--linea); }

/* Memoria en pares */
.tablero-memoria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.carta {
    aspect-ratio: 3 / 4; border-radius: 12px; border: 2px solid var(--linea);
    background: var(--segura); color: #fff; font-size: 26px; cursor: pointer; display: grid; place-items: center;
}
.carta[data-estado="oculta"] { color: transparent; }
.carta[data-estado="vista"], .carta[data-estado="encontrada"] { background: #fff; color: var(--azul); }
.carta[data-estado="encontrada"] { border-color: var(--segura); }
.marcador { font-weight: 700; color: var(--azul); }

/* Detective visual */
.escena {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    background: var(--segura-tenue); border-radius: var(--radio-m); padding: 14px; margin: 12px 0;
    font-size: 24px; text-align: center;
}
.escena span { padding: 6px 0; }
.contador-tiempo { font-weight: 700; color: var(--atencion-fuerte); }

/* Pausa sensorial */
.pausa-sensorial { text-align: center; padding: 10px 0; }
.pausa-sensorial .circulo-respira {
    width: 120px; height: 120px; border-radius: 50%; margin: 16px auto;
    background: radial-gradient(circle at 50% 50%, var(--segura-tenue), var(--azul-reposo-tenue));
    animation: respira 8s ease-in-out infinite;
}
@keyframes respira { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.1); } }

/* Cierre */
.cierre__resumen { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.cierre__figura { width: 88px; height: 88px; flex: none; object-fit: contain; }
.cierre__contador {
    flex: none; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
    text-align: center; border: 10px solid #dfeae7;
}
.cierre__numero { font-size: 34px; font-weight: 800; color: var(--azul); line-height: 1; }
.cierre__unidad { font-size: 13px; color: var(--tinta-suave); }
.cierre__lista { margin: 6px 0 0; padding-left: 18px; }
.cierre__lista li { margin-bottom: 4px; }
.cierre__vacio { list-style: none; margin-left: -18px; color: var(--tinta-suave); }
.cierre__notas { background: var(--segura-tenue); border-radius: var(--radio-m); padding: 14px 16px; margin: 12px 0; }
.cierre__notas h2 { margin-top: 0; }
.cierre__notas dl { margin: 0 0 12px; }
.cierre__notas dt { font-weight: 700; color: var(--azul); }
.cierre__notas dd { margin: 0 0 10px; }

/* ---------- Guía virtual ---------- */
.guia-boton {
    position: fixed; right: 14px; bottom: 14px; width: 56px; height: 56px; border-radius: 50%;
    border: 0; padding: 0; background: var(--superficie); overflow: hidden;
    box-shadow: 0 0 0 3px var(--segura), var(--sombra);
    cursor: pointer; z-index: 40; display: grid; place-items: center;
    animation: guiaBotonLatido 2.8s ease-out infinite;
}
/* El dedo del personaje se voltea para que apunte hacia el contenido. */
.guia-boton img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.guia-boton:hover { animation-play-state: paused; box-shadow: 0 0 0 3px var(--segura-fuerte), var(--sombra); }
@keyframes guiaBotonLatido {
    0%   { box-shadow: 0 0 0 3px var(--segura), 0 0 0 0 rgba(28, 138, 122, 0.5); }
    70%  { box-shadow: 0 0 0 3px var(--segura), 0 0 0 16px rgba(28, 138, 122, 0); }
    100% { box-shadow: 0 0 0 3px var(--segura), 0 0 0 0 rgba(28, 138, 122, 0); }
}
.guia-boton__texto {
    position: absolute; right: 70px; background: var(--tinta); color: #fff; font-size: 13px;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
@media (max-width: 520px) { .guia-boton__texto { display: none; } }

.guia-modal {
    position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(23, 49, 58, 0.55);
    animation: guiaFondo 0.28s ease both;
}
.guia-tarjeta {
    background: var(--superficie); border-radius: 20px; max-width: 430px; width: 100%;
    padding: 22px; text-align: center; box-shadow: 0 24px 60px rgba(23, 49, 58, 0.28); position: relative;
    animation: guiaTarjeta 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
@keyframes guiaFondo {
    from { background: rgba(23, 49, 58, 0); }
    to   { background: rgba(23, 49, 58, 0.55); }
}
@keyframes guiaTarjeta {
    0%   { opacity: 0; transform: translateY(28px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes guiaFigura {
    0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    70%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes guiaTexto {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.guia-cerrar {
    position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 26px;
    line-height: 1; color: var(--tinta-suave); cursor: pointer; padding: 6px;
}
.guia-slide { display: none; }
.guia-slide.es-activa { display: block; }
.guia-slide img { width: 150px; height: 150px; object-fit: contain; margin: 4px auto 12px; }
.guia-slide h2 { color: var(--azul); font-size: 20px; margin: 0 0 8px; }
.guia-slide p { color: var(--tinta-suave); margin: 0; }
/* Cada paso entra con un pequeño rebote al activarse. */
.guia-slide.es-activa img { animation: guiaFigura 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) 0.12s both; }
.guia-slide.es-activa h2 { animation: guiaTexto 0.4s ease 0.18s both; }
.guia-slide.es-activa p  { animation: guiaTexto 0.4s ease 0.26s both; }
.guia-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 10px; }
.guia-puntos { display: flex; gap: 6px; }
.guia-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.guia-punto.es-activo { background: var(--segura); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .cabecera, .pie, .acciones-actividad, [data-imprimir], .filtros-categoria,
    .guia-boton, .guia-modal { display: none !important; }
    body.pagina { background: #fff; }
    .tarjeta { box-shadow: none; border: 0; }
}