/* ==========================================================================
   Ejercicio Tres movimientos (/ejercicio). Solo esta página; usa los tokens de
   styles.css. Sin html.ej-listo se lee de corrido (versión en papel); con ella
   se ve un paso por vez. Estados = atributos (hidden, data-estado, aria-*):
   GSAP solo anima entre los estados finales que define este archivo.
   ========================================================================== */
:root {
  --ej-barra: 3.75rem;
  --ej-frase: clamp(2.4rem, 1.2rem + 6vw, 5.8rem);
  --ej-tilde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2367544c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
html { scroll-padding-top: calc(var(--ej-barra-alto, var(--ej-barra)) + 1rem); }   /* --ej-barra-alto: alto real, lo pone ejercicio.js */
html.ej-listo { scroll-padding-bottom: 6rem; }   /* la .ej-nav fija no tapa el foco */
.ej-pagina [id] { scroll-margin-top: 0; }
.ej-pagina [hidden] { display: none !important; }   /* hidden le gana a .btn, grid y flex */

/* ---------- Papel o un paso por vez ---------- */
html:not(.ej-listo) .ej-solo-js, html.ej-listo .ej-solo-papel { display: none !important; }
/* Con JS, el papel no se pinta antes de que arranque ejercicio.js (sin CLS). Si a los 3 s no arrancó, aparece igual. */
html.js:not(.ej-listo) .ej-form { visibility: hidden; animation: ej-red 0s 3s forwards; }
@keyframes ej-red { to { visibility: visible; } }

/* ---------- Tipografía común ---------- */
.ej-titulo, .ej-subtitulo, .ej-camino b, .ej-salida h3, .ej-burbuja h3, .ej-familias h3, .ej-cuidado h2, .ej-papel h2,
.ej-papel h3, .ej-papel__movimientos b, .ej-desplegable summary, .ej-mapa__valor, .ej-frase__texto, .ej-distancia__detras, .ej-tarjeta span {
  font-family: var(--f-display); font-weight: 500; line-height: 1.2; color: var(--tinta); text-wrap: balance;
}
.ej-titulo, .ej-familias h3, .ej-cuidado h2, .ej-papel h2, .ej-distancia__detras { font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -0.02em; }
.ej-subtitulo, .ej-camino b, .ej-salida h3, .ej-burbuja h3, .ej-papel h3 { font-size: var(--t-xl); }
.ej-grupo ~ .ej-nota, .ej-tiene-sentido, .ej-marco__despues, .ej-quedo__respuesta, .ej-mapa__linea, .ej-prefijo, .ej-marco__palabras, .ej-giro__frente, .ej-giro__alternativa {
  font-family: var(--f-display); font-style: italic; font-size: var(--t-lg); line-height: 1.35; color: var(--topo-2); max-width: 40rem;
}
.ej-ayuda, .ej-nota, .ej-cuidado__nota { font-size: var(--t-sm); color: var(--texto-suave); max-width: 40rem; }
.ej-nota { color: var(--texto); }
.ej-aviso, .ej-confirmacion { font-size: var(--t-sm); font-weight: 600; color: var(--topo-2); }
.ej-mapa__rotulo, .ej-giro__rotulo, .ej-semana h3 { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--topo); }
.ej-riesgo h3, .ej-quedo h3, .ej-grupo--breve legend, .ej-campo__etiqueta, .ej-papel h4 { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.ej-form .enlace, .ej-pie a { text-decoration: underline 1px; text-underline-offset: 0.25em; background: none; }
.ej-form .enlace { min-height: 2.75rem; text-align: left; align-self: flex-start; }
.ej-nota a, .ej-fijado a, .ej-cuidado__lineas a { padding-block: 0.7rem; font-weight: 700; color: var(--tinta); text-decoration: underline; }
.ej-pagina .btn { white-space: normal; }
.ej-pagina .btn:not(:has(.btn__icono)) { padding-inline: 1.5rem; justify-content: center; text-align: center; }

/* ---------- Barra fija ---------- */
/* Con el texto agrandado (200 %) no entra en un renglón: la marca queda arriba y el 155 pasa al
   segundo renglón, achicándose si hace falta. Nada queda fuera de la pantalla. */
.ej-barra { position: sticky; top: 0; z-index: var(--z-nav); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.25rem 0.5rem; min-height: var(--ej-barra); padding-block: 0.25rem; padding-inline: var(--gutter); background: var(--crema); box-shadow: 0 1px 0 var(--linea-fuerte); }
/* La marca es la salida al inicio: flecha y nombre en un renglón (en styles.css .marca es columna) */
.ej-barra .marca { flex-direction: row; align-items: center; gap: 0.4rem; min-height: 2.75rem; }
.ej-barra .marca svg, .ej-portada .enlace svg { flex: none; width: 1.1em; height: 1.1em; color: var(--topo); }
.ej-barra .marca svg { transition: transform 0.4s var(--ease-suave); }
.ej-barra .marca:hover svg, .ej-portada .enlace:hover svg { transform: translateX(-3px); }
.ej-barra__acciones { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.ej-progreso { display: none; margin-right: auto; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; color: var(--texto-suave); }
.ej-progreso li + li::before { content: '·'; display: inline-block; margin-inline: 0.45rem; }
.ej-progreso li[data-activo] { color: var(--tinta); text-decoration: underline 2px; text-underline-offset: 0.35em; }
body:is([data-paso-actual="portada"], [data-paso-actual="1"], [data-paso-actual="7"], [data-paso-actual="cuidado"]) .ej-progreso { visibility: hidden; }
.ej-urgencia { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-height: 2.75rem; padding-inline: 0.85rem; border-radius: 1.4rem; background: var(--topo); color: var(--crema); font-size: var(--t-xs); font-weight: 600; line-height: 1.15; text-align: center; }
@media (max-width: 400px) {
  .ej-barra { gap: 0.35rem; padding-inline: 0.75rem; }
  .ej-barra .marca__nombre { font-size: 1.05rem; }
  .ej-urgencia { padding-inline: 0.65rem; }
}
@media (min-width: 560px) { .ej-progreso { display: flex; } }

/* ---------- Pasos ---------- */
.ej-form { --ancho: 46rem; }
.ej-distancia, .ej-final, .ej-papel { --ancho: 62rem; }
.ej-paso, .ej-papel { padding-block: clamp(1.75rem, 4vw, 3rem); }
.ej-paso > .contenedor { display: flex; flex-direction: column; gap: 1.25rem; }
html.ej-listo .ej-paso { display: flex; flex-direction: column; min-height: calc(100vh - var(--ej-barra)); min-height: calc(100dvh - var(--ej-barra)); padding-bottom: 0; }
html.ej-listo .ej-paso > .contenedor { flex: 1; }
html.ej-listo :is(.ej-portada, .ej-cuidado) > .contenedor { justify-content: center; padding-bottom: 3rem; }
html:not(.ej-listo) :is(.ej-cuidado, .ej-portada, .ej-papel) { border-bottom: 1px solid var(--linea-fuerte); }
.ej-portada .display { font-size: var(--t-3xl); max-width: 17ch; }
.ej-portada__acciones, .ej-salida__acciones, .ej-quedo__botones, .ej-borrar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.ej-previo { font-size: var(--t-lg); max-width: 40rem; }
.ej-nota--privacidad, .ej-nota--cuidado, .ej-fijado { padding: 0.9rem 1.1rem; border-radius: var(--r-sm); background: var(--crema-2); }
.ej-nota--cuidado, .ej-fijado { background: var(--malva-3); color: var(--tinta); }
.ej-tiene-sentido { padding-left: 1rem; border-left: 2px solid var(--malva); }

/* Navegación inferior: fija abajo mientras se completa el paso. "Saltar este paso" va antes, así se ve sin bajar */
.ej-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: auto; padding-block: 0.9rem calc(0.9rem + env(safe-area-inset-bottom)); }
.ej-nav [data-seguir] { margin-left: auto; }
html.ej-listo .ej-nav:has([data-seguir]) { position: sticky; bottom: 0; z-index: 5; border-image: linear-gradient(rgba(43, 37, 35, 0.14) 0 1px, var(--crema) 1px) fill 0 / / 0 100vmax; }
/* Sin "Seguir" la navegación no queda fija: va a continuación del contenido, sin un hueco hasta el fondo (paso 1) */
html.ej-listo .ej-nav:not(:has([data-seguir])) { margin-top: 2rem; }
/* Con el texto muy agrandado los dos botones no entran en un renglón: la navegación deja de ser fija
   para no tapar media pantalla. El umbral en rem sigue al tamaño del texto (a 100 % solo pasaría con menos de 256 px). */
.ej-paso > .contenedor { container: ej-paso / inline-size; }
@container ej-paso (max-width: 16rem) { html.ej-listo .ej-nav:has([data-seguir]) { position: static; border-image: none; } }
.ej-saltar { margin-top: -0.75rem; align-self: flex-end; }

/* ---------- Opciones: pastillas y tarjetas (el input queda encima, invisible y enfocable) ---------- */
fieldset.ej-grupo { display: grid; gap: 0.9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.ej-grupo legend { padding: 0; margin-bottom: 0.9rem; }
.ej-grupo--breve legend { margin-bottom: 0.6rem; }
.ej-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ej-tarjetas { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.ej-chip, .ej-tarjeta, .ej-interruptor { position: relative; display: flex; }
:is(.ej-chip, .ej-tarjeta, .ej-interruptor) input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ej-chip span, .ej-tarjeta span, .ej-quedo__boton, .ej-riesgo__boton {
  display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.55rem 1rem; border-radius: 1.4rem;
  background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-campo);
  font-size: var(--t-sm); font-weight: 500; line-height: 1.3; text-align: left;
  transition: background-color 0.18s, box-shadow 0.18s, color 0.18s;
}
.ej-tarjeta span { width: 100%; min-height: 3.5rem; padding: 0.85rem 1.1rem; border-radius: var(--r-sm); font-size: var(--t-lg); line-height: 1.25; }
/* Marcado sin depender del color: aro vacío → tilde */
.ej-chip span::before, .ej-tarjeta span::before { content: ''; flex: none; width: 1rem; height: 1rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.ej-chip input[type="checkbox"] + span::before { border-radius: 0.3rem; }
:is(.ej-chip, .ej-tarjeta) input:checked + span, .ej-quedo__boton[aria-pressed="true"] { background: var(--topo); color: var(--crema); box-shadow: inset 0 0 0 2px var(--topo-2); }
:is(.ej-chip, .ej-tarjeta) input:checked + span::before, .ej-quedo__boton[aria-pressed="true"]::before { content: ''; width: 1rem; height: 1rem; border-radius: 50%; box-shadow: none; background: var(--crema) var(--ej-tilde) center / 80% no-repeat; }
:is(.ej-chip, .ej-tarjeta) input:hover + span, .ej-riesgo__boton:hover, .ej-camino:hover { box-shadow: inset 0 0 0 2px var(--topo); }
:is(.ej-chip, .ej-tarjeta) input:focus-visible + span, .ej-interruptor input:focus-visible + .ej-interruptor__pista { outline: 2px solid var(--topo); outline-offset: 3px; }

/* ---------- Paso 1, salida honesta y puertas de riesgo ---------- */
.ej-caminos { display: grid; gap: 0.75rem; }
.ej-camino { display: grid; align-content: start; gap: 0.35rem; min-height: 5.5rem; padding: 1.3rem 1.5rem; border-radius: var(--r-md); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea-campo); text-align: left; }
.ej-camino span { font-size: var(--t-sm); color: var(--texto-suave); }
@media (min-width: 640px) { .ej-caminos { grid-template-columns: 1fr 1fr; } }
.ej-salida, .ej-guardar, .ej-semana, .ej-copiar, .ej-accion, .ej-riesgo { display: grid; gap: 0.75rem; justify-items: start; }
.ej-salida, .ej-guardar, .ej-semana { padding: 1.25rem; border-radius: var(--r-md); background: var(--crema-2); }
.ej-riesgo { gap: 0.6rem; margin-top: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-fuerte); }
.ej-riesgo__boton { max-width: 34rem; border-radius: var(--r-sm); }

/* ---------- Hacer lugar: el marco (las palabras nunca se transforman) ---------- */
.ej-marco { display: grid; gap: 1rem; justify-items: center; margin-top: 1rem; padding: 1.5rem 1rem; border-radius: var(--r-lg); background: var(--crema-2); text-align: center; }
.ej-marco__intro { font-size: var(--t-sm); }
.ej-marco__caja { position: relative; display: grid; place-items: center; max-width: 74%; margin-block: 2.25rem; }   /* 74 % × 1,35 = el ancho entero */
.ej-marco__aire, .ej-marco__borde { position: absolute; inset: 0; border-radius: var(--r-md); }
.ej-marco__aire { inset: -17.5%; background: var(--malva-3); opacity: 0; visibility: hidden; }
.ej-marco__borde { background: rgba(103, 84, 76, 0.06); box-shadow: inset 0 0 0 1.5px var(--topo); }
.ej-marco__palabras { position: relative; padding: 0.8rem 1.1rem; font-size: var(--t-xl); color: var(--tinta); overflow-wrap: anywhere; }
[data-marco][data-estado="1"] .ej-marco__borde { transform: scale(1.35); }
[data-marco][data-estado="1"] .ej-marco__aire { opacity: 1; visibility: visible; }
[data-marco][data-estado="1"] .ej-marco__boton { display: none; }

/* ---------- Tomar distancia: la escena ----------
   Fuente de verdad: section[data-estado="0|1|2"]. Las capas que GSAP cruza se ocultan con
   opacity + visibility (nunca display); los controles, con display. No se anima filter,
   color ni background-color: hay dos fondos y dos copias de la frase. */
html.ej-listo .ej-distancia { overflow: clip; }
.ej-distancia__fondo { position: absolute; inset: 0; background: var(--tinta); }
.ej-distancia__fondo--crema { background: var(--crema-2); }
.ej-distancia > .ej-distancia__escenario {
  position: relative; display: grid; align-content: center; gap: 1.25rem 3rem;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(min(48dvh, 28rem), auto);
  grid-template-areas: "centro" "pie" "accion" "nav";
}
.ej-distancia__detras, .ej-frase { grid-area: centro; align-self: center; justify-self: center; text-align: center; }
.ej-distancia__detras--borroso { color: rgba(246, 241, 235, 0.45); filter: blur(9px); user-select: none; }
.ej-frase { position: relative; isolation: isolate; z-index: 1; display: grid; gap: 0.6rem; justify-items: center; }
.ej-frase__tarjeta { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-md); background: var(--crema); box-shadow: var(--sombra-tarjeta), inset 0 0 0 1px var(--linea); }
.ej-prefijo { grid-area: 1 / 1; max-width: 32ch; color: var(--topo); }
.ej-prefijo[data-n="1"] { color: rgba(246, 241, 235, 0.85); }
.ej-frase__cuerpo { grid-area: 2 / 1; display: grid; }
.ej-frase__texto { grid-area: 1 / 1; font-size: var(--ej-frase); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ej-frase__texto--clara { color: var(--crema); }
.ej-distancia__pie { grid-area: pie; justify-self: center; max-width: 36ch; text-align: center; color: rgba(246, 241, 235, 0.8); }
.ej-distancia__pie[data-en-estado="2"] { color: var(--texto); }
.ej-distancia__boton { grid-area: accion; justify-self: center; --bg: var(--crema); --fg: var(--tinta); }
.ej-distancia .ej-desplegable { grid-area: extra; }
.ej-quedo { grid-area: quedo; display: grid; gap: 0.75rem; }
.ej-quedo__botones { gap: 0.5rem; }
.ej-quedo__boton { border-radius: 999px; }
html.ej-listo .ej-distancia .ej-nav { grid-area: nav; position: static; border-image: none; }
.ej-distancia:not([data-estado="2"]) .ej-nav .btn--fantasma { --fg: var(--crema); box-shadow: inset 0 0 0 1px rgba(246, 241, 235, 0.4); }
.ej-distancia:not([data-estado="2"]) :focus-visible { outline-color: var(--crema); }

/* Qué se ve en cada estado */
.ej-distancia[data-estado="0"] [data-en-estado]:not([data-en-estado~="0"]),
.ej-distancia[data-estado="1"] [data-en-estado]:not([data-en-estado~="1"]),
.ej-distancia[data-estado="2"] [data-en-estado]:not([data-en-estado~="2"]),
.ej-distancia:not([data-estado="2"]) :is(.ej-frase__texto--oscura, .ej-distancia__fondo--crema),
.ej-distancia[data-estado="2"] .ej-frase__texto--clara { opacity: 0; visibility: hidden; }
.ej-distancia[data-estado="0"] :is(button, span, details, .ej-quedo)[data-en-estado]:not([data-en-estado~="0"]),
.ej-distancia[data-estado="1"] :is(button, span, details, .ej-quedo)[data-en-estado]:not([data-en-estado~="1"]),
.ej-distancia[data-estado="2"] :is(button, span, details, .ej-quedo)[data-en-estado]:not([data-en-estado~="2"]) { display: none; }
.ej-distancia[data-estado="1"] .ej-frase__texto { font-size: calc(var(--ej-frase) * 0.7); }
/* Estado 2: la frase chica en su tarjeta, abajo en el celular y al costado en escritorio */
.ej-distancia[data-estado="2"] > .ej-distancia__escenario { grid-template-rows: none; grid-template-areas: "detras" "frase" "pie" "extra" "quedo" "nav"; }
.ej-distancia[data-estado="2"] :is(.ej-distancia__detras, .ej-frase, .ej-distancia__pie) { justify-self: start; justify-items: start; text-align: left; }
.ej-distancia[data-estado="2"] .ej-distancia__detras { grid-area: detras; }
.ej-distancia[data-estado="2"] .ej-frase { grid-area: frase; padding: 1.1rem 1.35rem; }
.ej-distancia[data-estado="2"] .ej-frase__texto { font-size: calc(var(--ej-frase) * 0.5); }
@media (min-width: 900px) {
  .ej-distancia[data-estado="2"] > .ej-distancia__escenario { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "frase detras" "frase pie" "frase extra" "frase quedo" "nav nav"; }
  .ej-distancia[data-estado="2"] .ej-frase__texto { font-size: calc(var(--ej-frase) * 0.42); }
}

/* ---------- Desplegables (como el acordeón del home) ---------- */
.ej-desplegable { border-block: 1px solid var(--linea-fuerte); }
.ej-desplegable summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding-block: 0.6rem; cursor: pointer; font-size: var(--t-lg); }
.ej-desplegable summary::-webkit-details-marker { display: none; }
.ej-desplegable summary svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--topo); transition: transform 0.4s var(--ease-suave); }
.ej-desplegable[open] summary svg { transform: rotate(45deg); }
.ej-desplegable > :not(summary) { margin-bottom: 1rem; max-width: 42rem; }

/* ---------- Paso 7: mapa ---------- */
.ej-mapa, .ej-cierre, .ej-familias, .ej-acciones, .ej-burbuja, .ej-burbuja__cuerpo { display: grid; gap: 1.25rem; }
.ej-mapa__grilla { display: grid; gap: 0.75rem; }
.ej-mapa__bloque { display: grid; align-content: start; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.ej-mapa__valor { font-size: var(--t-lg); }
.ej-mapa__bloque--importa { background: var(--malva); box-shadow: none; }
.ej-mapa__bloque--importa .ej-mapa__rotulo { color: var(--tinta); }
.ej-mapa__bloque--importa .ej-mapa__valor { font-size: var(--t-2xl); line-height: 1.12; }
.ej-mapa__bloque--paso { background: var(--crema-2); }
.ej-mapa__bloque--paso .ej-mapa__valor { font-size: var(--t-xl); }
.ej-mapa__pensamiento { justify-self: end; max-width: 85%; padding: 0.8rem 1rem; border-radius: var(--r-sm); border: 1px dashed var(--linea-campo); }
.ej-mapa__pensamiento .ej-mapa__valor { font-size: var(--t-base); font-style: italic; }
@media (min-width: 760px) {
  .ej-mapa__grilla { grid-template-columns: 1fr 1fr minmax(10rem, 0.7fr); grid-template-areas: "importa importa lado" "paso paso lado" "aparece hace lado"; }
  .ej-mapa__bloque--importa { grid-area: importa; }
  .ej-mapa__bloque--paso { grid-area: paso; }
  .ej-mapa__bloque--aparece { grid-area: aparece; }
  .ej-mapa__bloque--hace { grid-area: hace; }
  .ej-mapa__pensamiento { grid-area: lado; align-self: start; justify-self: stretch; max-width: none; }
}

/* Interruptor */
.ej-interruptor { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; font-size: var(--t-sm); font-weight: 500; color: var(--tinta); }
.ej-interruptor__pista { position: relative; flex: none; width: 2.75rem; height: 1.6rem; border-radius: 999px; background: var(--crema-2); box-shadow: inset 0 0 0 1.5px var(--linea-campo); }
.ej-interruptor__pista::after { content: ''; position: absolute; top: 0.3rem; left: 0.3rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--topo); transition: transform 0.18s var(--ease-out); }
.ej-interruptor input:checked + .ej-interruptor__pista { background: var(--topo); }
.ej-interruptor input:checked + .ej-interruptor__pista::after { transform: translateX(1.15rem); background: var(--crema) var(--ej-tilde) center / 80% no-repeat; }

/* ---------- Cierre y burbuja del mensaje ---------- */
.ej-cierre { margin-top: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--linea-fuerte); }
.ej-burbuja { gap: 0.75rem; padding: 1.25rem; border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 0.3rem; background: var(--malva-3); }
.ej-burbuja__cuerpo { gap: 0.75rem; }
.ej-burbuja__escribiendo { display: flex; gap: 0.3rem; justify-self: start; padding: 0.8rem 1rem; border-radius: 999px; background: var(--blanco); }
.ej-burbuja__escribiendo span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--texto-suave); animation: ej-punto 1s infinite; }
.ej-burbuja__escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.ej-burbuja__escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ej-punto { 50% { opacity: 0.25; } }
html.sin-motion .ej-burbuja__escribiendo { display: none; }
.ej-campo, .ej-copia-manual { width: 100%; min-height: 10rem; padding: 0.8rem 1rem; border: 1px solid var(--linea-campo); border-radius: var(--r-sm); background: var(--blanco); color: var(--tinta); font: inherit; line-height: 1.5; resize: vertical; }
.ej-campo { field-sizing: content; }   /* crece con el mensaje donde el navegador lo permite */
.ej-campo:focus-visible, .ej-copia-manual:focus-visible { outline-offset: 2px; border-color: var(--topo); }
.ej-menores .btn { margin-bottom: 1rem; }
.ej-borrar { gap: 0 1rem; font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------- Para familias: tarjetas que giran ---------- */
.ej-familias { padding: 1.5rem clamp(1rem, 4vw, 2rem); border-radius: var(--r-lg); background: var(--crema-2); }
.ej-giros { display: grid; gap: 0.75rem; align-items: start; }
.ej-giro { display: grid; perspective: 60rem; }
.ej-giro__frente { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: none; min-height: 2.75rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea-campo); color: var(--tinta); text-align: left; }
.ej-giro__frente::after { content: ''; flex: none; width: 0.55rem; height: 0.55rem; margin-top: -0.3rem; border: solid var(--topo); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Abierta: el botón queda visible como encabezado compacto, así se cierra con teclado */
.ej-giro__frente:is([aria-expanded="true"], p) { padding-block: 0.7rem; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--malva-3); font-size: var(--t-base); }
.ej-giro__frente[aria-expanded="true"]::after { margin-top: 0.3rem; transform: rotate(-135deg); }
.ej-giro__reverso { display: grid; gap: 0.35rem; padding: 1rem 1.25rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.ej-giro__reverso p + .ej-giro__rotulo { margin-top: 0.6rem; }
.ej-giro__alternativa { color: var(--tinta); }
@media (min-width: 760px) { .ej-giros { grid-template-columns: 1fr 1fr; } }
/* En papel las frases se leen como citas, sin aspecto de botón */
html:not(.ej-listo) .ej-giro__frente { padding-bottom: 0.25rem; border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: none; font-size: var(--t-lg); cursor: default; }
html:not(.ej-listo) .ej-giro__reverso { box-shadow: none; }
html:not(.ej-listo) .ej-giro__frente::after { display: none; }
.ej-principios, .ej-cuidado__lineas, .ej-papel__movimientos { display: grid; gap: 0.6rem; }
.ej-principios li, .ej-cuidado__lineas li { position: relative; padding-left: 1.25rem; }
.ej-principios li::before, .ej-cuidado__lineas li::before { content: ''; position: absolute; left: 0.2rem; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--topo); }
.ej-familias__aviso { padding-left: 0.9rem; border-left: 3px solid var(--topo); font-weight: 600; color: var(--tinta); }

/* ---------- Cuidado: pantalla quieta ---------- */
.ej-cuidado, .ej-cuidado * { transition: none !important; animation: none !important; }
.ej-cuidado .btn:hover { transform: none; }
.ej-cuidado__cab, .ej-cuidado__cuerpo, .ej-cuidado__llamar, .ej-cuidado__confianza { display: grid; gap: 0.9rem; justify-items: start; }
.ej-cuidado__cuerpo { gap: 1.5rem; margin-top: 0.5rem; }
.ej-cuidado__llamar, .ej-cuidado__confianza { gap: 0.5rem; }
.ej-pagina .ej-cuidado__155 { width: min(100%, 26rem); min-height: 4.25rem; justify-content: space-between; font-size: var(--t-lg); }
.ej-cuidado__155 .btn__icono { width: 3rem; height: 3rem; }
.ej-cuidado__lineas li { line-height: 1.7; }
.ej-cuidado__lineas { gap: 0.9rem; }

/* ---------- Versión en papel: guía y listas ---------- */
.ej-papel .contenedor, .ej-papel__ideas { display: grid; gap: 1.5rem; }
.ej-papel__movimientos li { padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
.ej-papel__movimientos b { display: block; margin-bottom: 0.3rem; font-size: var(--t-lg); }
.ej-papel h4 { margin: 1.25rem 0 0.4rem; }
.ej-papel__camino ul { display: flex; flex-wrap: wrap; font-size: var(--t-sm); }
.ej-papel__camino li:not(:last-child)::after { content: '·'; margin-inline: 0.5rem; color: var(--topo); }
@media (min-width: 760px) { .ej-papel__ideas { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.ej-papel__contacto .contenedor { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-block: 2rem; }

/* ---------- Pie ---------- */
.ej-pie { --ancho: 46rem; padding-block: 2.5rem; background: var(--tinta); color: rgba(246, 241, 235, 0.75); font-size: var(--t-sm); }
.ej-pie p + p { margin-top: 0.6rem; }
.ej-pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1rem; font-size: var(--t-xs); }
.ej-pie a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.7rem; color: var(--crema); }
.ej-pie :focus-visible { outline-color: var(--crema); }

/* ---------- Sin GSAP o con movimiento reducido: cambios de estado con un fundido de 200 ms, sin mover nada ---------- */
/* La frase y su tarjeta cambian en seco: si se fundieran con el fondo, a mitad del cruce la frase tendría el color de lo que tiene detrás */
html.sin-motion .ej-distancia :is([data-en-estado]:not(.ej-frase__tarjeta), .ej-distancia__fondo), html.sin-motion .ej-marco__aire { transition: opacity 0.2s, visibility 0.2s; }
html.sin-motion .ej-interruptor__pista::after, html.sin-motion .ej-desplegable summary svg { transition: none; }
html.sin-motion :is(.ej-barra .marca, .ej-portada .enlace) svg { transition: none; transform: none !important; }
@media (prefers-reduced-motion: reduce) { :is(.ej-barra .marca, .ej-portada .enlace) svg { transition: none; transform: none !important; } }