/* Recursos de emociones (semáforo, rincón de la calma, emociones para niños). GENERADO por ../ideas/emociones/llevar-a-fichas-web.py */
/* Recursos de emociones de fichas.es: base común (semáforo de las emociones, rincón de la calma y emociones para niños).
   Mismo aspecto que el ciclo del agua y las plantas: tinta azul oscura, bordes de juguete, Baloo 2 y Nunito.
   Todo va acotado a .emo-app para poder llevarlo a fichas-web. Cada recurso añade su hoja (semaforo.css, calma.css…). */
.emo-app{
  --tinta:#23263B; --tinta-2:#4B4F6B; --fondo:#FFFFFF; --gris:#F4F6FB; --linea:#E3E7F1;
  --azul:#1478D4; --azul-fondo:#D6EEFF; --sol:#FFCC33; --crema:#FFF3C4;
  --bien:#12A150; --bien-fondo:#C9F5DC; --mal:#E5484D; --mal-fondo:#FFE1E1;
  --rojo:#E5383B; --ambar:#FFB400; --verde:#1FA34A;
  --titulos:"Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --texto:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --borde:3px solid var(--tinta); --sombra:0 5px 0 var(--tinta);
  color-scheme:light;
}
.emo-app,.emo-app *{box-sizing:border-box}
.emo-app [hidden]{display:none!important}
.emo-app{color:var(--tinta);font-family:var(--texto);font-size:1rem;line-height:1.45;max-width:1300px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.emo-app p,.emo-app h1,.emo-app h2,.emo-app h3,.emo-app ol,.emo-app ul{margin:0}
.emo-app ol,.emo-app ul{padding:0;list-style:none}
.emo-app button{font:inherit;color:inherit}
.emo-app button:focus-visible,.emo-app a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.emo-app img{max-width:100%}
.emo-app .ico{width:22px;height:22px;flex:none}

/* Cabecera */
.emo-app .emo-cabeza{display:flex;align-items:center;justify-content:space-between;gap:6px 16px}
.emo-app .marca{min-width:0;flex:1}
.emo-app .marca h1{font-family:var(--titulos);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1}
.emo-app .marca p{margin-top:4px;color:var(--tinta-2);font-weight:700;font-size:.95rem}

/* Botones */
.emo-app .pildora{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--tinta);background:var(--fondo);border-radius:999px;padding:6px 14px;
  font-weight:800;font-size:.92rem;cursor:pointer;min-height:46px;white-space:nowrap}
.emo-app .pildora[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}
.emo-app .boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--borde);background:var(--fondo);border-radius:16px;
  padding:8px 18px;font-weight:800;font-size:1rem;cursor:pointer;min-height:50px;box-shadow:0 4px 0 var(--tinta);text-decoration:none;color:var(--tinta);line-height:1.15}
.emo-app .boton:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}
.emo-app .boton.principal{background:var(--sol)}
.emo-app .boton.suave{box-shadow:none;border-width:2px}
.emo-app .boton:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px 0 var(--tinta)}

/* Barra: pestañas y edad */
.emo-app .emo-barra{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.emo-app .pestanas{display:flex;gap:8px;flex-wrap:wrap}
.emo-app .pestanas button{border:var(--borde);background:var(--fondo);border-radius:16px;padding:6px 14px;font-weight:800;font-size:.98rem;cursor:pointer;
  line-height:1.1;display:flex;align-items:center;gap:8px;box-shadow:0 3px 0 var(--tinta);min-height:50px}
.emo-app .pestanas button[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.emo-app .pestanas .punto{width:18px;height:18px;border-radius:50%;border:2px solid var(--tinta);flex:none}
.emo-app .edades{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.emo-app .edades .etq-edad{font-weight:800;font-size:.9rem;color:var(--tinta-2);margin-right:2px}
.emo-app .edades button{border:2px solid var(--tinta);background:var(--fondo);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.92rem;cursor:pointer;min-height:46px;min-width:46px}
.emo-app .edades button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}

/* Rejilla de emociones para elegir (cara + nombre) */
.emo-app .caras{display:grid;grid-template-columns:repeat(var(--col,3),minmax(0,1fr));gap:10px}
.emo-app .cara{--c:var(--tinta);display:flex;flex-direction:column;align-items:center;gap:2px;border:var(--borde);border-radius:20px;background:var(--fondo);
  padding:8px 6px 6px;cursor:pointer;box-shadow:0 4px 0 var(--tinta);min-height:46px;transition:background .15s}
.emo-app .cara img{width:100%;max-width:150px;aspect-ratio:1;object-fit:contain;display:block;pointer-events:none}
.emo-app .cara span{font-family:var(--titulos);font-weight:800;font-size:1.15rem;line-height:1.1}
.emo-app .cara:hover{background:var(--gris)}
.emo-app .cara[aria-pressed="true"]{background:var(--cf,var(--crema));border-color:var(--c);box-shadow:0 4px 0 var(--c);outline:3px solid var(--c);outline-offset:-6px}

/* Tarjetas de soluciones (dibujo + texto) */
.emo-app .ideas{display:grid;grid-template-columns:repeat(var(--col,3),minmax(0,1fr));gap:10px}
.emo-app .idea{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--tinta);border-radius:18px;background:var(--fondo);padding:8px;
  text-align:center;font-weight:800;line-height:1.15;min-height:46px}
.emo-app button.idea{cursor:pointer;box-shadow:0 4px 0 var(--tinta);border-width:3px}
.emo-app button.idea:hover{background:var(--gris)}
.emo-app .idea img{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;display:block;pointer-events:none}
.emo-app .idea[aria-pressed="true"]{background:var(--bien-fondo);border-color:var(--verde);box-shadow:0 4px 0 var(--verde)}

/* ---------- Respiraciones ---------- */
.emo-app .resp{display:flex;flex-direction:column;align-items:center;gap:10px;--aire:0;--p:0;--hechas:0;--veces:3}
.emo-app .resp-visual{position:relative;width:var(--resp-tam,min(76vw,330px));aspect-ratio:1}
.emo-app .resp-aro{position:absolute;inset:0;width:100%;height:100%}
.emo-app .resp-aro circle{fill:none;stroke-width:4}
.emo-app .resp-aro .fondo-aro{stroke:var(--linea);fill:rgba(255,255,255,.65)}
.emo-app .resp-aro .marca-aro{stroke:var(--azul);stroke-linecap:round;transition:stroke .3s}
.emo-app .resp[data-fase="sale"] .marca-aro{stroke:var(--verde)}
.emo-app .resp-obj{position:absolute;left:50%;top:50%;width:58%;transform:translate(-50%,-50%)}
.emo-app .resp-obj img{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.emo-app .resp-frase{font-family:var(--titulos);font-weight:800;font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.1;text-align:center;min-height:2.2em;display:flex;align-items:center}
.emo-app .resp-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.emo-app .resp-puntos{display:flex;gap:10px}
.emo-app .resp-puntos li{width:22px;height:22px;border-radius:50%;border:3px solid var(--tinta);background:var(--fondo);transition:background .3s}
.emo-app .resp-puntos li.hecha{background:var(--verde)}
/* Flor: crece un poco al olerla y el aroma sube hacia la nariz */
.emo-app .resp[data-tipo="flor"] .resp-obj{width:46%;top:55%}
.emo-app .resp[data-tipo="flor"] .resp-obj img{transform:scale(calc(1 + var(--aire) * .1));transform-origin:50% 90%}
.emo-app .aroma{position:absolute;left:var(--x);top:6%;width:13%;aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFB3D1 0 35%,rgba(255,179,209,0) 70%)}
.emo-app .aroma.a1{--x:28%}.emo-app .aroma.a2{--x:44%}.emo-app .aroma.a3{--x:60%}
.emo-app .resp[data-fase="entra"] .aroma{opacity:calc(1 - var(--p) * .8);transform:translateY(calc(var(--p) * -150%)) scale(calc(1 + var(--p) * .6))}
.emo-app .resp[data-fase="entra"] .aroma.a2{transform:translateY(calc(var(--p) * -190%)) scale(calc(1 + var(--p) * .4))}
/* Vela: la llama se dobla al soplar y se apaga al final */
.emo-app .resp[data-tipo="vela"] .resp-obj{width:44%;top:60%}
.emo-app .llama{--sopla:0;position:absolute;left:50%;bottom:95.5%;width:22%;aspect-ratio:1/1.7;transform-origin:50% 100%;
  transform:translateX(-50%) rotate(calc(var(--sopla) * 38deg)) scaleY(calc(1 - var(--sopla) * .4));transition:transform .2s linear,opacity .6s}
.emo-app .llama i{position:absolute;inset:0;border-radius:50% 50% 45% 45% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFF7C2 0 22%,#FFD23F 40%,#FF8A1F 75%,rgba(255,110,20,0) 100%);animation:emo-parpadeo 1.1s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 8px rgba(255,190,40,.8))}
.emo-app .resp[data-fase="sale"] .llama{--sopla:var(--p)}
.emo-app .resp[data-fase="fin"] .llama{opacity:0}
.emo-app .humo{position:absolute;left:50%;bottom:96%;width:10%;aspect-ratio:1/3;opacity:0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(150,160,180,.55),rgba(150,160,180,0) 70%);transform:translateX(-50%)}
.emo-app .resp[data-fase="fin"] .humo{animation:emo-humo 2.4s ease-out forwards}
@keyframes emo-parpadeo{from{transform:scale(1,1)}to{transform:scale(.94,1.05)}}
@keyframes emo-humo{0%{opacity:.9;transform:translate(-50%,0) scale(.8)}100%{opacity:0;transform:translate(-30%,-70%) scale(1.8)}}
/* Globo: se infla con cada soplido */
.emo-app .resp[data-tipo="globo"] .resp-obj{width:50%;top:52%}
.emo-app .resp[data-tipo="globo"] .resp-obj img{transform-origin:50% 92%;transform:scale(calc(.42 + .58 * var(--hechas) / var(--veces)))}
.emo-app .resp[data-tipo="globo"][data-fase="fin"] .resp-obj img{transform:scale(1);animation:emo-flotar 2.6s ease-in-out infinite alternate}
@keyframes emo-flotar{from{translate:0 0;rotate:-3deg}to{translate:0 -6%;rotate:3deg}}
/* Burbuja: crece al tomar aire y se encoge al soltarlo */
.emo-app .burbuja{display:block;width:100%;aspect-ratio:1;border-radius:50%;transform:scale(calc(.45 + .55 * var(--aire)));
  background:radial-gradient(circle at 35% 30%,#fff 0 8%,#CDEFFF 22%,#9FD8F5 60%,#7CC4EE 100%);box-shadow:inset 0 0 0 4px rgba(255,255,255,.7),0 8px 30px rgba(80,160,220,.35)}
@media (prefers-reduced-motion:reduce){.emo-app .llama i{animation:none}}

/* ---------- Hojas para imprimir ---------- */
.emo-app .hojas{position:absolute;left:-10000px;top:0;width:794px}
.emo-app .lista-hojas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.emo-app .tarjeta-hoja{display:flex;flex-direction:column;border:var(--borde);border-radius:18px;overflow:hidden;box-shadow:var(--sombra);background:var(--fondo)}
.emo-app .vista{position:relative;overflow:hidden;border-bottom:var(--borde);background:#fff}
.emo-app .vista-escala{position:absolute;left:0;top:0;width:794px;transform-origin:0 0;pointer-events:none}
.emo-app .tarjeta-hoja-texto{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.emo-app .tarjeta-hoja-texto h3{font-family:var(--titulos);font-weight:800;font-size:1.2rem;line-height:1.1}
.emo-app .tarjeta-hoja-texto p{font-size:.95rem;color:var(--tinta-2);flex:1}
.emo-app .tarjeta-hoja-texto .boton{align-self:flex-start;font-size:.95rem}
.emo-app .opciones-hojas{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-weight:700}
.emo-app .opciones-hojas label{display:inline-flex;align-items:center;gap:8px;min-height:46px;cursor:pointer}
.emo-app .opciones-hojas input{width:24px;height:24px;accent-color:var(--tinta)}
.emo-app .aviso-imprimir{font-weight:700;color:var(--tinta-2)}

.emo-hoja{width:794px;height:1123px;padding:46px 50px 40px;background:#fff;color:#23263B;font-family:"Nunito",system-ui,sans-serif;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:18px}
.emo-hoja *{box-sizing:border-box}
.emo-hoja h2{margin:0;font-family:"Baloo 2",ui-rounded,sans-serif;font-weight:800;font-size:46px;line-height:1;text-align:center}
.emo-hoja .sub{margin:0;text-align:center;font-weight:700;font-size:19px;color:#4B4F6B}
.emo-hoja .firma{position:absolute;right:30px;bottom:16px;font:700 13px "Nunito",sans-serif;color:#8A8FA8}
.emo-hoja .nombre-fecha{display:flex;gap:24px;font-weight:700;font-size:18px}
.emo-hoja .nombre-fecha span{flex:1;border-bottom:2px solid #23263B;padding-bottom:4px}
.emo-app .mayus .etq{text-transform:uppercase}

/* ---------- Móvil de pie: cabecera, pestañas y edad en poco alto ---------- */
@media (max-width:560px){
  .emo-app .emo-cabeza{align-items:flex-start}
  .emo-app #pantalla{padding:0 11px}
  .emo-app #pantalla[aria-pressed="false"] span{display:none}
  .emo-app .pestanas{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));width:100%;gap:6px}
  .emo-app .pestanas button{padding:4px 6px;font-size:.88rem;justify-content:center;gap:5px;min-height:48px}
  .emo-app .pestanas button .ico{width:18px;height:18px}
  .emo-app .edades{width:100%;display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:5px}
  .emo-app .edades button{padding:2px 4px;font-size:.86rem;min-width:0}
}

/* ---------- Pantalla completa sin la API (iPhone): la app tapa la página ---------- */
.emo-app:fullscreen{background:var(--fondo-app,#fff);overflow:auto;padding:12px max(16px, env(safe-area-inset-left, 0px))}
.emo-app.inmersiva{position:fixed;inset:0;z-index:2000;max-width:none;margin:0;height:100vh;height:100dvh;background:var(--fondo-app,#fff);
  overflow:auto;overscroll-behavior:contain;padding:10px max(12px, env(safe-area-inset-left, 0px)) 10px max(12px, env(safe-area-inset-right, 0px))}
html.con-inmersiva,html.con-inmersiva body{overflow:hidden}

/* ---------- Pizarra digital: pantalla completa en una pantalla grande ----------
   La app ocupa todo el alto, sin franjas vacías: cada recurso reparte el espacio de .emo-main con consultas de contenedor. */
@media (min-width:900px) and (min-height:600px){
  .emo-app:fullscreen,.emo-app.inmersiva{height:100vh;height:100dvh;overflow:hidden;max-width:none;padding:14px 22px}
  .emo-app:fullscreen .emo-main,.emo-app.inmersiva .emo-main{flex:1;min-height:0;container-type:size}
  .emo-app:fullscreen .marca p,.emo-app.inmersiva .marca p{display:none}
  .emo-app:fullscreen .pestanas button,.emo-app.inmersiva .pestanas button{min-height:56px;font-size:1.1rem;padding:6px 18px}
  .emo-app:fullscreen .edades button,.emo-app.inmersiva .edades button{min-height:52px;min-width:56px;font-size:1rem}
  .emo-app:fullscreen .boton,.emo-app.inmersiva .boton{min-height:56px;font-size:1.1rem}
}

/* En una pizarra grande (1600 px o más) todo un poco más grande: las medidas en rem crecen con la raíz */
@media (min-width:1600px) and (min-height:900px){html.emo-pantalla{font-size:125%}}

/* ---------- Al imprimir, solo la hoja elegida ---------- */
@media print{
  @page{size:A4 portrait;margin:0}
  body[data-imprimir] > *:not(.emo-app):not(.contenedor):not(main){display:none!important}
  body[data-imprimir] .emo-app > *:not(.hojas){display:none!important}
  body[data-imprimir] .emo-app{display:block;max-width:none;margin:0;padding:0}
  body[data-imprimir] .emo-app .hojas{position:static;width:auto}
  body[data-imprimir]{margin:0!important;padding:0!important}
  body[data-imprimir] .emo-hoja{display:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;width:210mm;height:296mm;break-after:avoid;break-inside:avoid}
  body[data-imprimir] .emo-hoja.a-imprimir{display:flex}
}

/* Semáforo de las emociones: el semáforo a la izquierda (arriba en el móvil) y el paso a la derecha. Va detrás de ../comun/emociones.css. */
.semaforo-app .mini-semaforo{display:inline-flex;flex-direction:column;gap:2px;background:#2B2F45;border-radius:6px;padding:3px}
.semaforo-app .mini-semaforo i{width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.semaforo-app .mini-semaforo i:nth-child(2){background:var(--ambar)}
.semaforo-app .mini-semaforo i:nth-child(3){background:var(--verde)}

.semaforo-app .panel-semaforo,.semaforo-app .panel-practicar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}

/* El semáforo */
.semaforo-app .semaforo{--bombilla:88px;display:flex;flex-direction:column;align-items:center}
.semaforo-app .caja-semaforo{display:flex;flex-direction:column;gap:10px;background:#2B2F45;border:var(--borde);border-radius:30px;padding:14px 12px;box-shadow:var(--sombra)}
.semaforo-app .poste{width:24px;height:46px;background:#8A8FA8;border:var(--borde);border-top:0}
.semaforo-app .luz{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:4px 6px;border-radius:20px;color:#fff;min-width:118px}
.semaforo-app button.luz{cursor:pointer}
.semaforo-app button.luz:hover .bombilla{filter:brightness(1.25)}
.semaforo-app .bombilla{width:var(--bombilla);height:var(--bombilla);border-radius:50%;border:4px solid #15172A;display:grid;place-items:center;transition:background .3s,box-shadow .3s,filter .3s}
.semaforo-app .bombilla b{font-family:var(--titulos);font-size:calc(var(--bombilla) * .34);color:rgba(255,255,255,.35)}
.semaforo-app .luz-rojo .bombilla{background:#6A2628}
.semaforo-app .luz-amarillo .bombilla{background:#6B5420}
.semaforo-app .luz-verde .bombilla{background:#1F5130}
.semaforo-app .luz-rojo.encendida .bombilla{background:radial-gradient(circle at 35% 30%,#FF9C94,var(--rojo) 55%);box-shadow:0 0 26px 6px rgba(229,56,59,.75)}
.semaforo-app .luz-amarillo.encendida .bombilla{background:radial-gradient(circle at 35% 30%,#FFE590,var(--ambar) 55%);box-shadow:0 0 26px 6px rgba(255,180,0,.75)}
.semaforo-app .luz-verde.encendida .bombilla{background:radial-gradient(circle at 35% 30%,#9BF0B4,var(--verde) 55%);box-shadow:0 0 26px 6px rgba(31,163,74,.75)}
.semaforo-app .encendida .bombilla b{color:rgba(255,255,255,.9)}
.semaforo-app .luz-texto{display:flex;flex-direction:column;align-items:center;line-height:1.05;text-align:center}
.semaforo-app .luz-texto strong{font-family:var(--titulos);font-weight:800;font-size:1.25rem}
.semaforo-app .luz-texto small{font-weight:700;font-size:.82rem;opacity:.85}
.semaforo-app .luz:not(.encendida) .luz-texto{opacity:.6}
.semaforo-app .semaforo.indicador{--bombilla:58px}
.semaforo-app .semaforo.indicador .luz{min-width:84px}
.semaforo-app .semaforo.indicador .luz-texto small{display:none}

/* La escena de cada paso: el color de fondo es el de la luz */
.semaforo-app .escena{border:var(--borde);border-radius:24px;padding:16px 18px;background:#FFF1F0;min-height:100%;box-shadow:var(--sombra);min-width:0}
.semaforo-app .escena[data-luz="amarillo"]{background:#FFF7DA}
.semaforo-app .escena[data-luz="verde"]{background:#E8F7EC}
.semaforo-app #practica{background:#F4F6FB}
.semaforo-app .paso{display:flex;flex-direction:column;gap:14px;height:100%}
.semaforo-app .paso-titulo{display:flex;align-items:center;gap:10px;font-family:var(--titulos);font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05}
.semaforo-app .luz-chip{width:26px;height:26px;border-radius:50%;border:3px solid var(--tinta);flex:none}
.semaforo-app .luz-chip-rojo{background:var(--rojo)}.semaforo-app .luz-chip-amarillo{background:var(--ambar)}.semaforo-app .luz-chip-verde{background:var(--verde)}
.semaforo-app .paso-pie{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:auto}
.semaforo-app .boton.late{animation:emo-late 1.2s ease-in-out infinite}
@keyframes emo-late{50%{transform:scale(1.05)}}

/* Rojo: elegir la respiración y la animación */
.semaforo-app .rojo-cuerpo{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.semaforo-app .elige-resp{display:flex;flex-direction:column;gap:10px}
.semaforo-app .resp-opcion{display:flex;flex-direction:column;align-items:center;gap:2px;border:var(--borde);border-radius:18px;background:var(--fondo);padding:6px;cursor:pointer;
  box-shadow:0 3px 0 var(--tinta);font-weight:800;font-size:.95rem;min-height:46px}
.semaforo-app .resp-opcion img{width:64px;height:64px;object-fit:contain}
.semaforo-app .resp-opcion[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.semaforo-app .rojo-anim{display:flex;justify-content:center}
.semaforo-app .rojo-anim .resp{--resp-tam:min(100%,320px)}

/* Amarillo: me siento… y qué puedo hacer */
.semaforo-app .siento{display:flex;align-items:center;gap:16px;background:var(--fondo);border:3px solid var(--c);border-radius:20px;padding:8px 16px 8px 8px}
.semaforo-app .siento img{width:110px;height:110px;object-fit:contain;background:var(--cf);border-radius:50%;flex:none}
.semaforo-app .siento-nombre{font-family:var(--titulos);font-size:1.6rem;line-height:1.1}
.semaforo-app .siento-nombre strong{color:var(--c)}
.semaforo-app .siento-texto{font-weight:700;font-size:1.05rem}
.semaforo-app .siento-frase{margin-top:4px;font-weight:800;color:var(--tinta-2);font-style:italic}
.semaforo-app .ideas .idea span{font-size:.98rem}

/* Verde: hacerlo */
.semaforo-app .hacer{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.semaforo-app .hacer > img{width:min(240px,45%);aspect-ratio:1;object-fit:contain;background:var(--fondo);border:var(--borde);border-radius:24px}
.semaforo-app .hacer-texto{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.semaforo-app .hacer-sol{font-family:var(--titulos);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.05}
.semaforo-app .frase-modelo{font-size:1.3rem;font-weight:700}
.semaforo-app .contar{display:grid;grid-template-columns:repeat(5,52px);gap:8px}
.semaforo-app .contar span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid var(--tinta);background:var(--fondo);
  font-family:var(--titulos);font-weight:800;font-size:1.5rem;transition:background .3s,transform .3s}
.semaforo-app .contar span.va{background:var(--verde);color:#fff;transform:scale(1.08)}
.semaforo-app .ha-ayudado{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--fondo);border:2px solid var(--tinta);border-radius:18px;padding:10px 14px;margin-top:auto}
.semaforo-app .ha-ayudado p{font-weight:800;font-size:1.15rem;margin-right:auto}

/* Final */
.semaforo-app .paso-final{align-items:center;justify-content:center;text-align:center}
.semaforo-app .paso-final .paso-pie{margin-top:8px;justify-content:center}
.semaforo-app .emo-estrellas{font-size:3.2rem;color:#FFB400;letter-spacing:.2em;-webkit-text-stroke:2px var(--tinta);animation:emo-estrellas .6s ease-out}
.semaforo-app .final-texto{font-weight:700;font-size:1.2rem}
@keyframes emo-estrellas{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* Practicar */
.semaforo-app .situacion{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:start}
.semaforo-app .situacion-img{margin:0;background:var(--fondo);border:var(--borde);border-radius:24px;padding:8px}
.semaforo-app .situacion-img img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.semaforo-app .situacion-cuerpo{display:flex;flex-direction:column;gap:12px}
.semaforo-app .progreso{display:flex;gap:6px;flex-wrap:wrap}
.semaforo-app .progreso li{width:16px;height:16px;border-radius:50%;border:2px solid var(--tinta);background:var(--fondo)}
.semaforo-app .progreso li.hecha{background:var(--verde)}
.semaforo-app .progreso li.ahora{background:var(--sol)}
.semaforo-app .situacion-texto{font-family:var(--titulos);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.08}
.semaforo-app .pregunta{font-weight:800;font-size:1.2rem}
.semaforo-app .respuesta-emo{font-weight:700;font-size:1.05rem;background:var(--fondo);border-left:6px solid var(--ambar);border-radius:10px;padding:6px 12px}
.semaforo-app .opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.semaforo-app .opcion{display:flex;flex-direction:column;align-items:center;gap:6px;border:var(--borde);border-radius:18px;background:var(--fondo);padding:8px 10px;cursor:pointer;
  box-shadow:0 4px 0 var(--tinta);font-weight:800;line-height:1.2;text-align:center;min-height:46px}
.semaforo-app .opcion img{width:84px;height:84px;object-fit:contain}
.semaforo-app .opcion-mano{display:grid;place-items:center;width:84px;height:84px;font-size:44px;border-radius:50%;background:var(--gris)}
.semaforo-app .opcion.bien{background:var(--bien-fondo);border-color:var(--verde);box-shadow:0 4px 0 var(--verde)}
.semaforo-app .opcion.mal{background:var(--mal-fondo);border-color:var(--mal);box-shadow:none;opacity:.75}
.semaforo-app .opcion:disabled{cursor:default}
.semaforo-app .aviso{font-weight:800;font-size:1.1rem;min-height:1.5em}
.semaforo-app .aviso.bien{color:#0B7A3B}
.semaforo-app .aviso.mal{color:#B42318}

/* Imprimir */
.semaforo-app .panel-imprimir{display:flex;flex-direction:column;gap:14px}

/* ---------- Móvil y tableta de pie: el semáforo en horizontal arriba ---------- */
@media (max-width:760px){
  .semaforo-app .panel-semaforo,.semaforo-app .panel-practicar{grid-template-columns:minmax(0,1fr);gap:12px}
  .semaforo-app .semaforo{--bombilla:54px}
  .semaforo-app .semaforo.indicador{--bombilla:38px}
  .semaforo-app .caja-semaforo{flex-direction:row;justify-content:space-around;width:100%;border-radius:24px;padding:8px 6px}
  .semaforo-app .luz{min-width:0;flex:1;padding:2px}
  .semaforo-app .semaforo.indicador .luz{min-width:0}
  .semaforo-app .luz-texto strong{font-size:1.05rem}
  .semaforo-app .poste{display:none}
  .semaforo-app .escena{padding:12px;border-radius:20px}
  .semaforo-app .rojo-cuerpo{grid-template-columns:minmax(0,1fr)}
  .semaforo-app .elige-resp{flex-direction:row}
  .semaforo-app .resp-opcion{flex:1;font-size:.82rem;line-height:1.1;text-align:center}
  .semaforo-app .resp-opcion img{width:46px;height:46px}
  .semaforo-app .rojo-anim .resp{--resp-tam:min(100%,250px)}
  .semaforo-app .caras{--col:3!important;gap:8px}
  .semaforo-app .caras[style*="--col:4"]{--col:2!important}
  .semaforo-app .cara span{font-size:1rem}
  .semaforo-app .ideas{--col:2!important}
  .semaforo-app .ideas .idea img{max-width:86px}
  .semaforo-app .siento img{width:76px;height:76px}
  .semaforo-app .siento-nombre{font-size:1.3rem}
  .semaforo-app .situacion{grid-template-columns:minmax(0,1fr);gap:10px}
  .semaforo-app .situacion-img{max-width:240px;justify-self:center;width:70%}
  .semaforo-app .hacer > img{width:150px}
  .semaforo-app .contar{grid-template-columns:repeat(5,46px)}
  .semaforo-app .contar span{width:46px;height:46px}
  .semaforo-app .paso-pie{justify-content:stretch}
  .semaforo-app .paso-pie .boton{flex:1}
}

/* ---------- Pizarra digital en pantalla completa: todo cabe sin moverse ---------- */
@media (min-width:900px) and (min-height:600px){
  .semaforo-app:fullscreen,.semaforo-app.inmersiva{--fondo-app:#FFFDF8}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) :is(.panel-semaforo,.panel-practicar){height:100%;align-items:stretch}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .semaforo{--bombilla:min(15.5cqh,190px);justify-content:center}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .semaforo.indicador{--bombilla:min(11cqh,100px)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .luz-texto strong{font-size:1.55rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .luz-texto small{font-size:1rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .escena{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .escena > *{flex:1;min-height:0}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .paso-titulo{font-size:2.1rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .rojo-cuerpo{flex:1;min-height:0;grid-template-columns:min(190px,18cqw) minmax(0,1fr)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .resp-opcion img{width:min(90px,11cqh);height:min(90px,11cqh)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .resp-opcion{font-size:1.05rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .rojo-anim .resp{--resp-tam:min(calc(100cqh - 300px),46cqw)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .resp-frase{font-size:2.1rem;min-height:1.25em}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .caras{flex:1;align-content:center}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .cara img{max-width:none;width:auto;height:calc((100cqh - 230px) / 2);max-height:300px}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .caras[style*="--col:4"] .cara img{height:min(calc(100cqh - 260px),20cqw)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .cara span{font-size:1.5rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .siento img{width:min(130px,15cqh);height:min(130px,15cqh)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .siento-nombre{font-size:2rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .siento-texto{font-size:1.25rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .ideas{flex:1;align-content:center}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .ideas .idea img{max-width:100%;width:auto;height:calc((100cqh - 360px) / var(--filas,1));max-height:250px}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .ideas.elegir .idea img{max-width:100%;height:calc((100cqh - 230px) / var(--filas,1));max-height:270px}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .ideas .idea span{font-size:1.15rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .hacer{flex:1;min-height:0;flex-wrap:nowrap}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .hacer > img{width:auto;height:min(calc(100cqh - 250px),40cqw)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .hacer-sol{font-size:2.8rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .ha-ayudado p{font-size:1.4rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .situacion{height:100%;grid-template-columns:auto minmax(0,1fr)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .situacion-img img{width:min(calc(100cqh - 70px),30cqw)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .opciones{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .situacion-cuerpo{gap:10px}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .situacion-texto{font-size:2.3rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .pregunta,:is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .respuesta-emo{font-size:1.3rem}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .situacion .cara img{height:calc((100cqh - 330px) / 2);max-height:170px}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .situacion .caras[style*="--col:4"] .cara img{height:min(calc(100cqh - 330px),11cqw)}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .opcion img,:is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .opcion-mano{width:min(110px,calc(100cqh - 460px));height:min(110px,calc(100cqh - 460px))}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .opcion{font-size:1.05rem;overflow-wrap:anywhere}
  :is(.semaforo-app:fullscreen,.semaforo-app.inmersiva) .panel-imprimir{overflow:auto}
}

/* ---------- Hojas para imprimir ---------- */
.hoja-pared .pared{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-around;padding:10px 0 60px}
.hoja-pared .pared-caja{position:absolute;left:24px;top:0;bottom:44px;width:262px;background:#2B2F45;border-radius:46px;border:4px solid #23263B;z-index:0}
.hoja-pared .pared-fila{position:relative;z-index:1;display:flex;align-items:center;gap:44px}
.hoja-pared .pared-luz{width:214px;height:214px;border-radius:50%;margin-left:48px;border:6px solid #15172A;flex:none}
.hoja-pared .pared-luz{box-shadow:inset -16px -18px 0 rgba(0,0,0,.14)}
.hoja-pared .pared-rojo{background:#E5383B}
.hoja-pared .pared-amarillo{background:#FFB400}
.hoja-pared .pared-verde{background:#1FA34A}
.hoja-pared .pared-texto{display:flex;flex-direction:column;gap:6px}
.hoja-pared .pared-t{margin:0;font:800 64px/1 "Baloo 2",sans-serif}
.hoja-pared .pared-sub{margin:0;font-weight:800;font-size:22px;color:#4B4F6B;max-width:380px}
.hoja-pared .pared-imgs{display:flex;gap:8px;flex-wrap:wrap;max-width:390px}
.hoja-pared .pared-imgs img{width:86px;height:86px;object-fit:contain}
.hoja-pared .pared-imgs.n6 img{width:56px;height:56px}
.hoja-tarjetas .tarjetas-imp{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);border:2px dashed #9AA0B8}
.hoja-tarjetas .tarjeta-imp{border:2px dashed #9AA0B8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px}
.hoja-tarjetas .tarjeta-imp img{width:220px;height:220px;object-fit:contain;background:var(--cf);border-radius:50%;border:5px solid var(--c)}
.hoja-tarjetas .tarjeta-imp p{margin:0;font:800 42px/1 "Baloo 2",sans-serif;color:#23263B}
.hoja-rueda .rueda{display:block;margin:0 auto}
.hoja-rueda .rueda text{font:800 18px "Nunito",sans-serif;fill:#23263B;text-anchor:middle;dominant-baseline:central}
.hoja-rueda .rueda-pie{display:flex;align-items:center;gap:24px;margin-top:auto;margin-bottom:24px}
.hoja-rueda .rueda-pie p{margin:0;font-weight:700;font-size:18px}

/* Rincón de la calma: colores suaves (lavanda, menta y cielo) y una sola cosa grande en la pantalla. Va detrás de ../comun/emociones.css. */
.calma-app{--lavanda:#B9A6F2;--lavanda-fondo:#EFEAFF;--menta:#7FD1B5;--menta-fondo:#E3F6EF;--cielo:#A9D8F5;--fondo-app:linear-gradient(160deg,#F3EFFF 0%,#E6F6F0 100%)}
.calma-app .cabeza-botones{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.calma-app .pestanas button[aria-pressed="true"]{background:var(--lavanda)}
.calma-app .pestanas img{width:28px;height:28px;object-fit:contain}
.calma-app .emo-main{background:var(--fondo-app);border:var(--borde);border-radius:28px;padding:18px;box-shadow:var(--sombra);min-height:min(70vh,560px);display:flex;flex-direction:column}
.calma-app .emo-main > section{flex:1}
.calma-app .boton.principal{background:var(--lavanda)}
.calma-app .cara[aria-pressed="true"]{outline-offset:-6px}

/* Reloj de arena */
.calma-app .panel-reloj{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:24px;align-items:center}
.calma-app .arena-escena{display:flex;flex-direction:column;align-items:center;gap:6px}
.calma-app .arena-boton{background:none;border:0;padding:0;cursor:pointer;border-radius:24px}
.calma-app #arena{display:block;height:min(58vh,460px);width:auto;aspect-ratio:220/320;overflow:visible}
.calma-app #arena.girando{animation:calma-girar .7s ease-in-out}
@keyframes calma-girar{from{transform:rotate(-180deg)}to{transform:rotate(0)}}
.calma-app #arena .vidrio{fill:rgba(255,255,255,.6);stroke:var(--tinta);stroke-width:4}
.calma-app #arena .madera{fill:#D89B5E;stroke:var(--tinta);stroke-width:3}
.calma-app #arena .palo{fill:#B87A40;stroke:var(--tinta);stroke-width:2.5}
.calma-app #arena .brillo{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:.8}
.calma-app #arena .chorro{stroke:#8E7BE0;stroke-width:3.5;stroke-dasharray:4 5;opacity:0}
.calma-app #arena .chorro.cae{opacity:1;animation:calma-chorro .4s linear infinite}
@keyframes calma-chorro{to{stroke-dashoffset:-9}}
.calma-app .arena-tiempo{font-family:var(--titulos);font-weight:800;font-size:2.4rem;line-height:1;color:var(--tinta-2)}
.calma-app .arena-mandos{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.calma-app .arena-frase,.calma-app .bote-frase{font-family:var(--titulos);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.15}
.calma-app .duraciones,.calma-app .colores{display:flex;gap:8px;flex-wrap:wrap}
.calma-app .duraciones button{border:var(--borde);background:var(--fondo);border-radius:999px;padding:6px 16px;font-weight:800;font-size:1.05rem;cursor:pointer;min-height:50px;box-shadow:0 3px 0 var(--tinta)}
.calma-app .duraciones button[aria-pressed="true"]{background:var(--menta);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.calma-app .arena-acciones{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.calma-app .ver-minutos{display:inline-flex;align-items:center;gap:8px;font-weight:700;min-height:46px;cursor:pointer}
.calma-app .ver-minutos input{width:24px;height:24px;accent-color:var(--tinta)}
.calma-app .arena-fin{display:flex;flex-direction:column;gap:10px;width:100%}
.calma-app .arena-fin > p{font-weight:800;font-size:1.2rem}
.calma-app .fin-caras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.calma-app .fin-caras .cara img{max-width:90px}
.calma-app .fin-caras .cara span{font-size:1rem}

/* Respirar */
.calma-app .panel-respirar{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:center}
.calma-app .resp-tipos{display:flex;flex-direction:column;gap:10px}
.calma-app .resp-tipos button{display:flex;flex-direction:column;align-items:center;gap:2px;border:var(--borde);border-radius:18px;background:var(--fondo);padding:6px;cursor:pointer;
  box-shadow:0 3px 0 var(--tinta);font-weight:800;font-size:.95rem;min-height:46px}
.calma-app .resp-tipos img{width:56px;height:56px;object-fit:contain}
.calma-app .mini-burbuja{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 10%,#CDEFFF 25%,#7CC4EE 100%)}
.calma-app .resp-tipos button[aria-pressed="true"]{background:var(--lavanda);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.calma-app .resp-zona{display:flex;justify-content:center}
.calma-app .resp-zona .resp{--resp-tam:min(52vh,420px,100%)}
.calma-app .resp-zona .resp-aro .fondo-aro{fill:rgba(255,255,255,.45)}

/* Bote de la calma */
.calma-app .panel-bote{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:24px;align-items:center}
.calma-app .bote-escena{display:flex;justify-content:center}
.calma-app .bote{position:relative;height:min(58vh,470px);aspect-ratio:.62;display:flex;flex-direction:column;align-items:center;cursor:pointer;touch-action:manipulation}
.calma-app .bote.meneo{animation:calma-meneo .5s ease-in-out}
@keyframes calma-meneo{20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
.calma-app .tapon{width:46%;height:9%;background:linear-gradient(#A58CF0,#7E64D8);border:var(--borde);border-radius:12px 12px 6px 6px;flex:none;z-index:1}
.calma-app .vidrio-bote{position:relative;flex:1;width:100%;margin-top:-3px;border:4px solid var(--tinta);border-radius:34% 34% 20% 20% / 12% 12% 9% 9%;overflow:hidden;
  background:linear-gradient(180deg,rgba(206,236,255,.75),rgba(170,214,245,.85));box-shadow:inset 10px 0 0 rgba(255,255,255,.45)}
.calma-app #purpurina{position:absolute;inset:0;width:100%;height:100%;display:block}
.calma-app .bote-mandos{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.calma-app .colores button{width:56px;height:56px;border-radius:50%;border:var(--borde);background:var(--fondo);padding:5px;cursor:pointer}
.calma-app .colores button i{display:block;width:100%;height:100%;border-radius:50%}
.calma-app .colores button[aria-pressed="true"]{outline:4px solid var(--tinta);outline-offset:2px}

/* Kit */
.calma-app .panel-kit{display:flex;flex-direction:column;gap:14px}

/* Luz suave: fondo de noche y todo más apagado */
.calma-app.noche .emo-main{background:linear-gradient(160deg,#1E2246 0%,#22304F 100%);color:#ECE8FF;border-color:#0F1126}
.calma-app.noche .arena-frase,.calma-app.noche .bote-frase,.calma-app.noche .arena-tiempo,.calma-app.noche .arena-fin > p,.calma-app.noche .ver-minutos,.calma-app.noche .resp-frase{color:#ECE8FF}
.calma-app.noche #arena .vidrio{fill:rgba(255,255,255,.12);stroke:#ECE8FF}
.calma-app.noche .vidrio-bote{background:linear-gradient(180deg,rgba(40,60,110,.9),rgba(25,40,85,.95));border-color:#ECE8FF}
.calma-app.noche .resp-zona .resp-aro .fondo-aro{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.25)}
.calma-app.noche .panel-kit{color:#ECE8FF}
.calma-app.noche .aviso-imprimir{color:#C9C3EE}
.calma-app.noche #luzSuave{background:#1E2246;color:#fff}

/* ---------- Móvil de pie ---------- */
@media (max-width:560px){
  .calma-app .pestanas .largo{display:none}
  .calma-app .pestanas img{display:none}
  .calma-app .duraciones{flex-wrap:nowrap;gap:6px}
  .calma-app .duraciones button{padding:4px 10px;font-size:.95rem}
  .calma-app #luzSuave .txt{display:none}
}
@media (max-width:760px){
  .calma-app .emo-main{padding:12px;border-radius:22px;min-height:0}
  .calma-app .panel-reloj,.calma-app .panel-bote{grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center}
  .calma-app #arena{height:min(46svh,330px)}
  .calma-app .bote{height:min(46svh,330px)}
  .calma-app .arena-mandos,.calma-app .bote-mandos{align-items:center;text-align:center}
  .calma-app .panel-respirar{grid-template-columns:minmax(0,1fr);gap:12px}
  .calma-app .resp-tipos{flex-direction:row}
  .calma-app .resp-tipos button{flex:1;font-size:.8rem;line-height:1.1;text-align:center}
  .calma-app .resp-tipos img,.calma-app .mini-burbuja{width:40px;height:40px}
  .calma-app .resp-zona .resp{--resp-tam:min(78vw,300px)}
}

/* ---------- Pizarra digital en pantalla completa ---------- */
@media (min-width:900px) and (min-height:600px){
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .emo-main{min-height:0}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .emo-main > section{height:100%;min-height:0}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) #arena{height:calc(100cqh - 50px)}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .bote{height:calc(100cqh - 40px)}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .resp-zona .resp{--resp-tam:min(calc(100cqh - 180px),60cqw)}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .resp-frase{font-size:2.4rem}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .arena-frase,:is(.calma-app:fullscreen,.calma-app.inmersiva) .bote-frase{font-size:2.1rem}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .duraciones button{min-height:58px;font-size:1.2rem;padding:6px 20px}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .colores button{width:64px;height:64px}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .resp-tipos img,:is(.calma-app:fullscreen,.calma-app.inmersiva) .mini-burbuja{width:min(80px,10cqh);height:min(80px,10cqh)}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .panel-kit{overflow:auto}
  :is(.calma-app:fullscreen,.calma-app.inmersiva) .fin-caras .cara img{max-width:min(90px,9cqh)}
}

/* ---------- Hojas del kit ---------- */
.hoja-cartel .cartel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;border:8px solid #B9A6F2;border-radius:46px;background:#F6F3FF;padding:30px}
.hoja-cartel .cartel-t{margin:0;font:800 76px/1 "Baloo 2",sans-serif;text-align:center;color:#23263B}
.hoja-cartel .cartel > img{width:560px;height:auto}
.hoja-cartel .cartel-sub{margin:0;font-weight:800;font-size:30px;text-align:center}
.hoja-cartel .cartel-caras{display:flex;gap:16px}
.hoja-cartel .cartel-caras img{width:130px;height:130px;object-fit:contain}
.hoja-respira .tarjetas-resp{flex:1;display:flex;flex-direction:column;gap:22px}
.hoja-respira .tarjeta-resp{flex:1;display:flex;align-items:center;gap:30px;border:4px dashed #9AA0B8;border-radius:30px;padding:18px 30px;background:#F6F3FF}
.hoja-respira .tarjeta-resp img{width:220px;height:220px;object-fit:contain;flex:none}
.hoja-respira .tr-t{margin:0;font:800 50px/1 "Baloo 2",sans-serif}
.hoja-respira .tr-d{margin:8px 0;font-weight:700;font-size:23px;line-height:1.35}
.hoja-respira .tr-veces{margin:0;font-weight:800;font-size:22px;color:#6B5FB0}
.hoja-siento .tira-emociones{flex:1;align-self:center;width:470px;display:flex;flex-direction:column;gap:10px}
.hoja-siento .tira-emo{flex:1;display:flex;align-items:center;gap:24px;background:var(--cf);border:4px solid var(--c);border-radius:24px;padding:4px 24px}
.hoja-siento .tira-emo img{height:120px;width:120px;object-fit:contain}
.hoja-siento .tira-emo p{margin:0;font:800 44px/1 "Baloo 2",sans-serif;color:#23263B}
.hoja-pasos .pasos-imp{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.hoja-pasos .pasos-imp li{flex:1;display:flex;align-items:center;gap:26px;border:4px solid #23263B;border-radius:30px;padding:16px 26px;background:#E6F6F0}
.hoja-pasos .pasos-imp li:nth-child(2){background:#F6F3FF}
.hoja-pasos .pasos-imp li:nth-child(3){background:#FFF7DA}
.hoja-pasos .pasos-imp li > img{width:200px;height:200px;object-fit:contain;flex:none}
.hoja-pasos .pi-imgs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:200px;flex:none}
.hoja-pasos .pi-imgs img{width:97px;height:97px;object-fit:contain}
.hoja-pasos .pasos-imp .pi-t{margin:0 0 8px;font:800 40px/1.05 "Baloo 2",sans-serif}
.hoja-pasos .pasos-imp p{margin:0;font-weight:700;font-size:23px;line-height:1.35}

/* Emociones para niños: conocer, jugar a reconocer y «Haz la cara». Va detrás de ../comun/emociones.css. */
.sentir-app .pestanas img{width:28px;height:28px;object-fit:contain}
.sentir-app .emo-main{min-width:0}

/* Conocer: la lista de emociones a la izquierda y su ficha a la derecha */
.sentir-app .panel-conocer{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.sentir-app .lista-emo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sentir-app .lista-emo .cara{padding:6px 4px 4px;border-radius:16px}
.sentir-app .lista-emo .cara img{max-width:84px}
.sentir-app .lista-emo .cara span{font-size:1rem}
.sentir-app .ficha-emo{--c:var(--tinta);--cf:var(--gris);border:3px solid var(--c);border-radius:24px;background:var(--cf);padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 5px 0 var(--c);min-width:0}
.sentir-app .ficha-cabeza{display:flex;align-items:center;gap:16px}
.sentir-app .ficha-cabeza > img{width:140px;height:140px;object-fit:contain;background:var(--fondo);border-radius:50%;border:4px solid var(--c);flex:none}
.sentir-app .ficha-titulo{flex:1;min-width:0}
.sentir-app .ficha-titulo h2{font-family:var(--titulos);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--c);filter:brightness(.82)}
.sentir-app .ficha-que{font-weight:700;font-size:1.12em;margin-top:6px}
.sentir-app .ficha-flechas{display:flex;gap:8px;flex:none;align-self:flex-start}
.sentir-app .ficha-flechas .boton{padding:6px 12px;min-width:50px}
.sentir-app .ficha-bloques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sentir-app .bloque{background:var(--fondo);border-radius:18px;padding:12px 14px;border-left:8px solid var(--c)}
.sentir-app .bloque h3{font-family:var(--titulos);font-weight:800;font-size:1.25em;line-height:1.1;margin-bottom:6px}
.sentir-app .bloque h3:not(:first-child){margin-top:10px}
.sentir-app .bloque ul{display:flex;flex-direction:column;gap:4px}
.sentir-app .bloque li{position:relative;padding-left:20px;font-weight:700}
.sentir-app .bloque li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--c)}
.sentir-app .bloque p{font-weight:600}
.sentir-app .cuando{display:flex;align-items:center;gap:10px}
.sentir-app .cuando img{width:96px;height:96px;object-fit:contain;flex:none}

/* Jugar */
.sentir-app .juego{border:var(--borde);border-radius:24px;background:var(--gris);padding:16px 18px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:12px;min-height:420px}
.sentir-app .progreso{display:flex;gap:6px;flex-wrap:wrap}
.sentir-app .progreso li{width:18px;height:18px;border-radius:50%;border:2px solid var(--tinta);background:var(--fondo)}
.sentir-app .progreso li.hecha{background:var(--verde)}
.sentir-app .progreso li.ahora{background:var(--sol)}
.sentir-app .juego-cuerpo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center;flex:1}
.sentir-app .juego-cuerpo.tipo-nombre{grid-template-columns:minmax(0,1fr)}
.sentir-app .estimulo{display:flex;justify-content:center}
.sentir-app .estimulo-cara{width:min(100%,300px);aspect-ratio:1;object-fit:contain;background:var(--fondo);border:var(--borde);border-radius:50%}
.sentir-app .estimulo-sit{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--fondo);border:var(--borde);border-radius:24px;padding:10px;width:min(100%,340px)}
.sentir-app .estimulo-sit img{width:100%;aspect-ratio:1;object-fit:contain}
.sentir-app .estimulo-sit figcaption{font-family:var(--titulos);font-weight:800;font-size:1.4rem;line-height:1.1;text-align:center}
.sentir-app .estimulo-pista{margin:0;font-family:var(--titulos);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;background:var(--fondo);border:var(--borde);border-radius:24px;padding:22px 24px;text-align:center}
.sentir-app .juego-resp{display:flex;flex-direction:column;gap:12px}
.sentir-app .juego-pregunta{font-family:var(--titulos);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.1}
.sentir-app .ops{display:grid;gap:10px}
.sentir-app .tipo-cara .ops{grid-template-columns:minmax(0,1fr)}
.sentir-app .tipo-nombre .ops{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.sentir-app .tipo-nombre .ops.n3{--n:3}
.sentir-app :is(.tipo-situacion,.tipo-pista) .ops{grid-template-columns:repeat(2,minmax(0,1fr))}
.sentir-app .op{border:var(--borde);border-radius:18px;background:var(--fondo);cursor:pointer;box-shadow:0 4px 0 var(--tinta);font-weight:800;min-height:56px;transition:background .15s}
.sentir-app .op:hover{background:var(--gris)}
.sentir-app .op-nombre{font-family:var(--titulos);font-size:1.6rem;display:flex;align-items:center;gap:12px;padding:6px 18px}
.sentir-app .op-nombre::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--c);border:3px solid var(--tinta);flex:none}
.sentir-app .op-cara{padding:6px}
.sentir-app .op-cara img{width:100%;max-width:200px;aspect-ratio:1;object-fit:contain;display:block;margin:0 auto}
.sentir-app .op-ambas{display:flex;align-items:center;gap:10px;padding:6px 12px;font-size:1.2rem;font-family:var(--titulos)}
.sentir-app .op-ambas img{width:64px;height:64px;object-fit:contain}
.sentir-app .op.bien{background:var(--bien-fondo);border-color:var(--verde);box-shadow:0 4px 0 var(--verde)}
.sentir-app .op.mal{background:var(--mal-fondo);border-color:var(--mal);box-shadow:none;opacity:.6}
.sentir-app .op:disabled{cursor:default}
.sentir-app .juego-aviso{font-weight:800;font-size:1.15rem;min-height:1.5em}
.sentir-app .juego-aviso.bien{color:#0B7A3B}
.sentir-app .juego-aviso.mal{color:#B42318}
.sentir-app .juego-pie{display:flex;justify-content:flex-end}
.sentir-app .juego-fin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.sentir-app .juego-fin h2{font-family:var(--titulos);font-weight:800;font-size:2.2rem}
.sentir-app .juego-fin p{font-weight:700;font-size:1.2rem}
.sentir-app .emo-estrellas{font-size:3.4rem;color:#FFB400;letter-spacing:.15em;-webkit-text-stroke:2px var(--tinta)}
.sentir-app .emo-estrellas span{color:#E3E7F1}

/* Haz la cara */
.sentir-app .panel-cara{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center}
.sentir-app .cara-lienzo{display:flex;flex-direction:column;align-items:center;gap:10px}
.sentir-app #caraSvg{width:min(100%,400px);height:auto;aspect-ratio:1;display:block}
.sentir-app .cara-dice{font-family:var(--titulos);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.15;text-align:center;min-height:2.3em}
.sentir-app .cara-dice.bien{color:#0B7A3B}
.sentir-app .cara-mandos{display:flex;flex-direction:column;gap:14px}
.sentir-app .cara-modos{display:flex;gap:8px}
.sentir-app .cara-modos button{border:var(--borde);background:var(--fondo);border-radius:999px;padding:4px 20px;font-weight:800;cursor:pointer;min-height:48px;box-shadow:0 3px 0 var(--tinta)}
.sentir-app .cara-modos button[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.sentir-app .cara-reto{font-family:var(--titulos);font-weight:800;font-size:1.6rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sentir-app .parte-t{font-weight:800;font-size:1.05rem;margin-bottom:4px}
.sentir-app .parte-ops{display:flex;gap:8px;flex-wrap:wrap}
.sentir-app .parte-op{width:86px;height:56px;padding:3px;border:var(--borde);border-radius:14px;background:var(--fondo);cursor:pointer;box-shadow:0 3px 0 var(--tinta)}
.sentir-app .parte-op svg{width:100%;height:100%;display:block}
.sentir-app .parte-op[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
/* Dibujo de la cara (también en las miniaturas de las partes y en la hoja «Dibuja la cara») */
.sentir-app svg .piel,.emo-hoja svg .piel{fill:#E39A62;stroke:#23263B;stroke-width:5}
.sentir-app svg .oreja,.emo-hoja svg .oreja{fill:#E39A62;stroke:#23263B;stroke-width:5}
.sentir-app svg .pelo,.emo-hoja svg .pelo{fill:#7A3E1C;stroke:#23263B;stroke-width:4;stroke-linejoin:round}
.sentir-app svg .mejilla{fill:#F08A7E;opacity:.45;transition:fill .3s,opacity .3s}
.sentir-app svg .mejilla.roja{fill:#E5383B;opacity:.75}
.sentir-app svg .cejas path{fill:none;stroke:#5A2E14;stroke-width:9;stroke-linecap:round}
.sentir-app svg .pupila{fill:#23263B}
.sentir-app svg .luz{fill:#fff}
.sentir-app svg .blanco{fill:#fff;stroke:#23263B;stroke-width:4}
.sentir-app svg .linea{fill:none;stroke:#23263B;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.sentir-app svg .dentro{fill:#8B2E2E;stroke:#23263B;stroke-width:5;stroke-linejoin:round}
.sentir-app svg .dientes{stroke:#23263B;stroke-width:3;stroke-linecap:round}
.sentir-app svg .lengua{fill:#F07A8A;stroke:#23263B;stroke-width:4;stroke-linejoin:round}
.sentir-app svg .fondo-mini{fill:#F3C9A6}
.emo-hoja svg .piel,.emo-hoja svg .oreja,.emo-hoja svg .pelo{fill:#fff}
.emo-hoja svg .mejilla{display:none}

/* Imprimir */
.sentir-app .panel-imprimir{display:flex;flex-direction:column;gap:14px}

/* ---------- Móvil de pie ---------- */
@media (max-width:560px){
  .sentir-app .pestanas img,.sentir-app .pestanas .ico{display:none}
  .sentir-app .pestanas .largo{display:none}
  .sentir-app .niveles{grid-template-columns:auto repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .sentir-app .panel-conocer{grid-template-columns:minmax(0,1fr);gap:12px}
  .sentir-app .lista-emo{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .sentir-app .lista-emo .cara img{max-width:56px}
  .sentir-app .lista-emo .cara span{font-size:.8rem}
  .sentir-app .ficha-emo{padding:12px}
  .sentir-app .ficha-cabeza{flex-wrap:wrap}
  .sentir-app .ficha-cabeza > img{width:84px;height:84px}
  .sentir-app .ficha-flechas{display:none}
  .sentir-app .ficha-titulo{flex-basis:calc(100% - 100px)}
  .sentir-app .ficha-bloques{grid-template-columns:minmax(0,1fr)}
  .sentir-app .juego{padding:12px;min-height:0}
  .sentir-app .juego-cuerpo{grid-template-columns:minmax(0,1fr);gap:12px}
  .sentir-app .estimulo-cara{width:min(60vw,200px)}
  .sentir-app .estimulo-sit{width:min(70vw,250px)}
  .sentir-app .estimulo-sit figcaption{font-size:1.15rem}
  .sentir-app .tipo-nombre .ops{--n:2!important}
  .sentir-app .op-nombre{font-size:1.3rem}
  .sentir-app .op-ambas{font-size:1rem;gap:6px;padding:4px 8px}
  .sentir-app .op-ambas img{width:48px;height:48px}
  .sentir-app .panel-cara{grid-template-columns:minmax(0,1fr);gap:10px}
  .sentir-app #caraSvg{width:min(66vw,240px)}
  .sentir-app .parte-op{width:72px;height:48px}
}

/* ---------- Pizarra digital en pantalla completa ---------- */
@media (min-width:900px) and (min-height:600px){
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .emo-main > section{height:100%;min-height:0}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .panel-conocer{grid-template-columns:min(460px,26cqw) minmax(0,1fr);align-items:stretch}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .lista-emo{grid-template-rows:repeat(4,minmax(0,1fr))}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .lista-emo .cara img{max-width:none;width:auto;height:min(calc((100cqh - 190px) / 4),calc(13cqw - 44px))}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .lista-emo .cara span{font-size:1.15rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .ficha-emo{font-size:clamp(14px,2.8cqh,26px);overflow:hidden}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .ficha-cabeza > img{width:min(170px,22cqh);height:min(170px,22cqh)}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .ficha-titulo h2{font-size:3.2em}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .ficha-bloques{flex:1;min-height:0}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .bloque{font-size:1em}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .cuando img{width:5.5em;height:5.5em}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .juego{height:100%;min-height:0;overflow:hidden}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .juego-cuerpo{min-height:0}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .estimulo-cara{width:min(calc(100cqh - 120px),42cqw)}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .estimulo-sit{width:min(calc(100cqh - 190px),38cqw)}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .estimulo-sit figcaption{font-size:1.7rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .juego-pregunta{font-size:2.4rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .op-nombre{font-size:2rem;min-height:min(84px,11cqh)}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .op-cara img{max-width:none;width:auto;height:min(calc(100cqh - 270px),20cqw);max-height:300px}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .op-ambas img{width:min(90px,11cqh);height:min(90px,11cqh)}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .op-ambas{font-size:1.5rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .juego-aviso{font-size:1.35rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) #caraSvg{width:auto;height:calc(100cqh - 110px);max-width:100%}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .cara-dice{font-size:2rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .parte-op{width:min(110px,8.5cqw);height:min(72px,10cqh);min-height:46px}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .parte-t{font-size:1.25rem}
  :is(.sentir-app:fullscreen,.sentir-app.inmersiva) .panel-imprimir{overflow:auto}
}

/* ---------- Hojas para imprimir ---------- */
.hoja-tarjetas .tarjetas-emo{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);border:2px dashed #9AA0B8}
.hoja-tarjetas .tarjeta-emo{border:2px dashed #9AA0B8;display:flex;align-items:center;justify-content:center;gap:18px;padding:10px}
.hoja-tarjetas .tarjeta-emo img{width:156px;height:156px;flex:none;object-fit:contain;background:var(--cf);border-radius:50%;border:5px solid var(--c)}
.hoja-tarjetas .tarjeta-emo p{margin:0;font:800 34px/1 "Baloo 2",sans-serif;color:#23263B;flex:1;min-width:0}
.hoja-tarjetas .cara-vacia{width:156px;height:156px;flex:none;border-radius:50%;border:5px dashed #9AA0B8}
.hoja-dibuja .dibuja-caras{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:10px}
.hoja-dibuja .dibuja-cara{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.hoja-dibuja .dibuja-cara svg{width:240px;height:240px}
.hoja-dibuja .dibuja-cara p{margin:0;font:800 32px/1 "Baloo 2",sans-serif}
.hoja-diario .diario{flex:1;display:flex;flex-direction:column;gap:10px}
.hoja-diario .diario-dia{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;border:3px solid #23263B;border-radius:22px;padding:8px 18px}
.hoja-diario .diario-nombre{margin:0;font:800 28px/1 "Baloo 2",sans-serif}
.hoja-diario .diario-caras{display:flex;justify-content:space-between}
.hoja-diario .diario-caras img{width:96px;height:96px;object-fit:contain}
.hoja-diario .con-porque .diario-caras img{width:78px;height:78px}
.hoja-diario .diario-porque{margin:0;font-weight:700;font-size:20px;border-bottom:2px solid #23263B;padding-bottom:2px}


/* ---------- Solo en fichas.es: llevar-a-fichas-web.py lo añade al final de assets/css/emociones.css ----------
   Encaja la herramienta en la página, deshace lo que el CSS de la web pone a .boton, da forma al texto de debajo
   (tarjetas, pasos, hojas para descargar, otros recursos y preguntas) y al imprimir deja solo la hoja elegida. */
.emo-marco{padding:4px 0 8px}
.emo-marco .emo-app{font-weight:400;text-align:left}
.emo-app a.boton,.emo-app .boton{font-family:var(--texto);letter-spacing:normal;text-transform:none}
.emo-app .marca h1{margin:0;color:var(--tinta)}
.emo-app .marca p{margin:4px 0 0;max-width:none}
.pagina-emociones .migas{padding-top:16px}
.pagina-emociones .migas ol{margin-bottom:0}

/* Texto de debajo de la herramienta, a todo el ancho */
.emo-texto{margin-top:30px}
.emo-texto .prosa{max-width:none}
.emo-texto .prosa > h2{margin-top:1.3em;scroll-margin-top:90px}
.emo-texto .prosa > h2:first-child{margin-top:0}
.emo-texto h3{font-family:var(--titulos);font-weight:800;color:#23263B;line-height:1.15}
.emo-figura{float:right;width:min(40%,460px);margin:2px 0 18px 32px;border-radius:18px;overflow:hidden;border:3px solid #23263B;box-shadow:0 5px 0 #23263B;background:#fff}
.emo-figura img{display:block;width:100%;height:auto}
.emo-figura figcaption{padding:8px 12px;font-weight:800;font-size:.9rem;color:#23263B;border-top:3px solid #23263B}
.emo-tarjetas{clear:both;list-style:none;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.emo-tarjetas li{--c:#E5383B;background:#F4F6FB;border-radius:18px;padding:14px 16px;border-top:6px solid var(--c)}
.emo-tarjetas li:nth-child(6n+2){--c:#FFB400}
.emo-tarjetas li:nth-child(6n+3){--c:#1FA34A}
.emo-tarjetas li:nth-child(6n+4){--c:#3B82D6}
.emo-tarjetas li:nth-child(6n+5){--c:#7A5BC7}
.emo-tarjetas li:nth-child(6n+6){--c:#1E9E8F}
.emo-tarjetas h3{font-size:20px;margin:0 0 .3em}
.emo-tarjetas p{margin:0;font-size:16px;line-height:1.5}
.emo-pasos{clear:both;list-style:none;counter-reset:paso;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.emo-pasos li{counter-increment:paso;position:relative;background:#EFEAFF;border-radius:18px;padding:16px 16px 14px 64px;min-height:84px}
.emo-pasos li::before{content:counter(paso);position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:50%;background:#7A5BC7;color:#fff;display:grid;place-items:center;font:800 20px var(--titulos)}
.emo-pasos h3{font-size:20px;margin:0 0 .25em}
.emo-pasos p{margin:0;font-size:16px;line-height:1.5}
.emo-descargas{clear:both;list-style:none;margin:10px 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.emo-descargas li{display:flex;flex-direction:column;background:#fff;border:3px solid #23263B;border-radius:18px;overflow:hidden;box-shadow:0 4px 0 #23263B}
.emo-descargas img{display:block;width:100%;height:auto;aspect-ratio:600/849;object-fit:cover;object-position:top;border-bottom:3px solid #23263B;background:#fff}
.emo-descargas div{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.emo-descargas h3{font-size:19px;margin:0}
.emo-descargas p{margin:0;font-size:15px;line-height:1.45;flex:1}
.emo-descargas .boton-pdf{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:8px 16px;border-radius:999px;background:#FFCC33;border:3px solid #23263B;box-shadow:0 3px 0 #23263B;color:#23263B;font-weight:800;text-decoration:none}
.emo-otros{clear:both;list-style:none;margin:10px 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.emo-otros a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;border:3px solid #23263B;border-radius:18px;box-shadow:0 4px 0 #23263B;padding:10px;color:#23263B;text-decoration:none;background:#fff;height:100%}
.emo-otros a:hover{background:#F4F6FB}
.emo-otros img{width:120px;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:10px;border:2px solid #23263B}
.emo-otros strong{display:block;font:800 19px/1.1 var(--titulos)}
.emo-otros span{display:block;font-size:15px;line-height:1.4;margin-top:4px}
.emo-faq{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 10px}
.emo-faq > div{border:3px solid #E3E7F1;border-radius:18px;padding:14px 18px}
.emo-faq h3{font-size:19px;margin:0 0 .35em}
.emo-faq p{margin:0;font-size:16px;line-height:1.5}
@media (max-width:760px){
  .emo-figura{float:none;width:100%;max-width:560px;margin:0 auto 18px}
  .emo-faq{grid-template-columns:minmax(0,1fr)}
}

/* Al imprimir, solo la hoja elegida: fuera la cabecera de la web, las migas, el texto y los anuncios */
@media print{
  body.pagina-emociones[data-imprimir] .cabecera,body.pagina-emociones[data-imprimir] .pie,body.pagina-emociones[data-imprimir] .migas,
  body.pagina-emociones[data-imprimir] .saltar,body.pagina-emociones[data-imprimir] .emo-texto,body.pagina-emociones[data-imprimir] .anuncio,
  body.pagina-emociones[data-imprimir] ins,body.pagina-emociones[data-imprimir] iframe{display:none!important}
  body.pagina-emociones[data-imprimir] .contenedor,body.pagina-emociones[data-imprimir] main{padding:0!important;margin:0!important;max-width:none!important}
}