/* Motor compartido de las páginas del cuerpo humano (portada y una página por aparato).
   Layout: lámina del cuerpo a la izquierda (capas arriba, partes debajo) y panel de exploración a la derecha; en el móvil, el panel va debajo.
   Un solo aspecto claro, el de fichas.es: tinta azul oscura, bordes de juguete y el verde de Conocimiento del Medio. */
.cuerpo-app{
  --tinta:#23263B; --tinta-2:#4B4F6B; --fondo:#FFFFFF; --gris:#F4F6FB; --linea:#E3E7F1;
  --medio:#11735F; --medio-fondo:#E2F8F1; --azul:#1478D4; --azul-fondo:#D6EEFF; --sol:#FFCC33;
  --crema:#FFF3C4; --crema-texto:#6B4A00; --bien:#12A150; --bien-fondo:#C9F5DC; --mal:#E5484D; --mal-fondo:#FFE1E1;
  --hueso:#F6EEDC; --musculo:#E46B66; --piel:#F2C6A0;
  --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;
}
.cuerpo-app,.cuerpo-app *{box-sizing:border-box}
.cuerpo-app [hidden]{display:none!important}
.cuerpo-app{color:var(--tinta);font-family:var(--texto);font-size:1rem;line-height:1.45}
.cuerpo-app button{font:inherit;color:inherit}
.cuerpo-app button:focus-visible,.cuerpo-app a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.cuerpo-app{max-width:1220px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.cuerpo-app header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 16px}
.cuerpo-app .marca h1{font-family:var(--titulos);font-weight:800;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1;margin:0;text-wrap:balance}
.cuerpo-app .marca p{margin:4px 0 0;color:var(--tinta-2);font-weight:700}
.cuerpo-app .sello{font-family:var(--titulos);font-weight:700;background:var(--medio-fondo);color:var(--medio);border-radius:999px;padding:4px 12px;font-size:.95rem}
.cuerpo-app .main{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
@media (orientation:portrait) and (max-width:1100px){.cuerpo-app .main{grid-template-columns:minmax(0,1fr)}}
.cuerpo-app .escenario{display:flex;flex-direction:column;gap:12px;min-width:0}
.cuerpo-app .capas{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cuerpo-app .capas span{font-weight:800;color:var(--tinta-2);font-size:.9rem;margin-right:2px}
.cuerpo-app .capa-btn{display:inline-flex;flex-direction:column;align-items:center;gap:4px;border:var(--borde);background:var(--fondo);border-radius:18px;padding:6px 10px 6px;
  font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--tinta);transition:transform .12s;min-width:84px}
.cuerpo-app .capa-btn i{width:64px;height:64px;border-radius:50%;border:2px solid var(--tinta);flex:none;background-color:var(--medio-fondo);
  background-size:300% auto;background-position:50% 22%;background-repeat:no-repeat}
.cuerpo-app .capa-btn[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
@media (max-width:600px){.cuerpo-app .capa-btn{min-width:0;flex:1}
.cuerpo-app .capa-btn i{width:52px;height:52px}
.cuerpo-app .capas{flex-wrap:nowrap;gap:6px}}
.cuerpo-app .lamina-wrap{position:relative;background:var(--medio-fondo);border:var(--borde);box-shadow:var(--sombra);border-radius:22px;overflow:hidden;
  background-image:radial-gradient(rgba(17,115,95,.16) 1.4px, transparent 1.6px);background-size:22px 22px}
html.pantalla{font-size:20px}
.cuerpo-app .pildora svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.cuerpo-app .flotante{position:absolute;top:10px;display:flex;gap:8px;align-items:center}
.cuerpo-app .flotante.izq{left:10px}
.cuerpo-app .flotante.der{right:10px}
/* Voz del viaje: pausa y sonido, botones mínimos en la esquina de abajo de la lámina */
.cuerpo-app .flotante.abajo{top:auto;bottom:10px}
.cuerpo-app .redondo{width:38px;height:38px;border-radius:50%;border:2px solid var(--tinta);background:var(--fondo);color:var(--tinta);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 3px 0 rgba(35,38,59,.25)}
.cuerpo-app .redondo svg{width:18px;height:18px}
.cuerpo-app .redondo[aria-pressed="false"]{background:var(--gris,#F4F6FB);color:var(--tinta-2,#4B4F6B)}
.cuerpo-app .pildora{border:2px solid var(--tinta);background:var(--fondo);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.88rem;cursor:pointer}
.cuerpo-app .pildora[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}
.cuerpo-app .reloj-mini{background:var(--tinta);color:var(--fondo);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.88rem;font-variant-numeric:tabular-nums}
.cuerpo-app .partes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.cuerpo-app .lista-partes summary{cursor:pointer;font-weight:800;color:var(--tinta-2);font-size:.95rem;display:inline-flex;align-items:center;gap:6px;list-style:none}
.cuerpo-app .lista-partes summary::-webkit-details-marker{display:none}
.cuerpo-app .lista-partes summary::before{content:"";width:0;height:0;border:6px solid transparent;border-left:8px solid currentColor;transition:transform .15s}
.cuerpo-app .lista-partes[open] summary::before{transform:rotate(90deg) translateX(2px)}
.cuerpo-app .partes > span{font-weight:800;color:var(--tinta-2);font-size:.88rem;margin-right:4px}
.cuerpo-app .parte-btn{border:2px solid var(--linea);background:var(--gris);border-radius:999px;padding:4px 11px;font-weight:700;font-size:.9rem;cursor:pointer}
.cuerpo-app .parte-btn[aria-pressed="true"]{border-color:var(--azul);background:var(--azul-fondo);color:#0B5DAA}
.cuerpo-app .parte-btn.otro{border-style:dashed;color:var(--tinta-2)}
.cuerpo-app .panel{background:var(--fondo);border:var(--borde);box-shadow:var(--sombra);border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:14px;min-width:0}
.cuerpo-app .pestanas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cuerpo-app .pestanas button{border:var(--borde);background:var(--fondo);border-radius:16px;padding:8px 6px;font-weight:800;font-size:1rem;cursor:pointer;color:var(--tinta);
  line-height:1.1;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 3px 0 var(--tinta);min-height:76px;justify-content:center}
.cuerpo-app .pestanas button svg{width:34px;height:34px;flex:none}
.cuerpo-app .pestanas button[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.cuerpo-app .aparatos{display:flex;flex-wrap:wrap;gap:6px}
.cuerpo-app .aparato{border:2px solid var(--medio);background:var(--medio-fondo);color:var(--medio);border-radius:999px;padding:3px 11px;font-weight:800;font-size:.85rem}
.cuerpo-app .aparato.pronto{border:2px dashed var(--linea);background:var(--fondo);color:var(--tinta-2);font-weight:700}
.cuerpo-app .ch-ficha{background:var(--crema);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.cuerpo-app .ch-ficha .tipo{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--crema-texto)}
.cuerpo-app .ch-ficha h2{font-family:var(--titulos);font-weight:800;font-size:2rem;line-height:1.05;margin:0;text-wrap:balance}
.cuerpo-app .ch-ficha p{margin:0}
.cuerpo-app .ch-ficha .corto{font-size:1.25rem;line-height:1.4;font-weight:700}
.cuerpo-app .curioso{background:rgba(255,255,255,.7);border-radius:12px;padding:8px 12px;font-size:1.08rem}
.cuerpo-app .curioso b{color:var(--crema-texto)}
.cuerpo-app .saber-mas summary{cursor:pointer;font-weight:800;color:#0B5DAA;padding:4px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
.cuerpo-app .saber-mas summary::-webkit-details-marker{display:none}
.cuerpo-app .saber-mas summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0B5DAA;color:#fff;font-size:1rem;line-height:1}
.cuerpo-app .saber-mas[open] summary::before{content:"−"}
.cuerpo-app .saber-mas > div{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.cuerpo-app .datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 0}
.cuerpo-app .datos div{background:rgba(255,255,255,.65);border-radius:10px;padding:7px 9px;font-size:.92rem;line-height:1.3}
.cuerpo-app .datos b{display:block;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--crema-texto);margin-bottom:2px}
.cuerpo-app .mas{border-top:2px dashed rgba(107,74,0,.3);padding-top:9px;font-size:.95rem}
.cuerpo-app .mas b{color:var(--crema-texto)}
.cuerpo-app .acciones{display:flex;flex-wrap:wrap;gap:8px}
.cuerpo-app .btn{border:var(--borde);background:var(--fondo);border-radius:999px;padding:7px 15px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--tinta);text-decoration:none;color:var(--tinta);display:inline-flex;align-items:center;gap:7px;font-size:.95rem}
.cuerpo-app .btn.principal{background:var(--sol)}
.cuerpo-app .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.cuerpo-app .btn svg{width:16px;height:16px}
.cuerpo-app .enlaces{display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.cuerpo-app .enlaces a{color:#0B5DAA;font-weight:800}
.cuerpo-app .viaje-cab{display:flex;gap:12px;align-items:center}
.cuerpo-app .viaje-cab svg{width:74px;height:auto;flex:none}
.cuerpo-app .viaje-cab p{margin:0}
.cuerpo-app .reloj{background:var(--tinta);color:var(--fondo);border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cuerpo-app .reloj span{font-size:.8rem;font-weight:700;opacity:.8}
.cuerpo-app .reloj b{font-family:var(--titulos);font-size:1.45rem;font-variant-numeric:tabular-nums;line-height:1}
.cuerpo-app .etapas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cuerpo-app .etapa{border:2px solid var(--linea);border-radius:14px;background:var(--fondo);text-align:left;width:100%;padding:8px 12px;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;align-items:center}
.cuerpo-app .etapa .n{grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--gris);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.cuerpo-app .etapa .nom{font-weight:800}
.cuerpo-app .etapa .t{font-size:.84rem;color:var(--tinta-2);font-weight:700}
.cuerpo-app .etapa .txt{grid-column:2;font-size:.93rem;margin-top:4px}
.cuerpo-app .etapa .txt em{font-style:normal;font-weight:800;color:var(--medio)}
.cuerpo-app .etapa[aria-current="step"]{border-color:var(--azul);background:var(--azul-fondo)}
.cuerpo-app .etapa[aria-current="step"] .n{background:var(--azul);color:#fff}
.cuerpo-app .etapa.hecha .n{background:var(--bien-fondo);color:var(--bien)}
.cuerpo-app .final{background:var(--bien-fondo);border-radius:14px;padding:10px 14px;font-weight:700}
.cuerpo-app .camino{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.cuerpo-app .camino::before{content:"";position:absolute;left:8%;right:8%;top:17px;height:4px;background:var(--linea);border-radius:2px}
.cuerpo-app .camino li{position:relative;display:flex;justify-content:center}
.cuerpo-app .camino button{border:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;font-weight:800;font-size:.74rem;color:var(--tinta-2)}
.cuerpo-app .camino i{width:30px;height:30px;border-radius:50%;background:var(--fondo);border:3px solid var(--linea);position:relative;z-index:1;transition:background .2s,border-color .2s,transform .2s}
.cuerpo-app .camino .hecha i{background:var(--bien);border-color:var(--bien)}
.cuerpo-app .camino .ahora i{background:var(--sol);border-color:var(--tinta);transform:scale(1.2)}
.cuerpo-app .camino .ahora span{color:var(--tinta)}
.cuerpo-app .meriendas{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.cuerpo-app .merienda-btn{border:2px solid var(--linea);background:var(--fondo);border-radius:14px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:2px;font-weight:800;font-size:.82rem;line-height:1.1;text-align:center}
.cuerpo-app .merienda-btn img{width:56px;height:56px}
.cuerpo-app .merienda-btn[aria-pressed="true"]{border-color:var(--azul);background:var(--azul-fondo);box-shadow:0 0 0 2px var(--azul)}
.cuerpo-app .fuente{font-size:.8rem;color:var(--tinta-2);margin:0}
.cuerpo-app .fuente a,.cuerpo-app .ch-ficha .fuente a{color:#0B5DAA;font-weight:700}
.cuerpo-app .juego-caja{background:var(--crema);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cuerpo-app .juego-caja .cuenta{display:flex;justify-content:space-between;font-weight:800;font-size:.88rem;color:var(--crema-texto);font-variant-numeric:tabular-nums}
.cuerpo-app .juego-caja .pregunta{font-family:var(--titulos);font-weight:800;font-size:1.9rem;line-height:1.1;margin:0;text-wrap:balance}
.cuerpo-app .ch-estrellas{display:block;font-size:3rem;line-height:1;color:#F2B705;letter-spacing:4px;-webkit-text-stroke:2px var(--tinta)}
.cuerpo-app .ch-estrellas i{font-style:normal;color:#fff}
.cuerpo-app .dificultad{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem;color:var(--crema-texto)}
.cuerpo-app .respuesta{border-radius:12px;padding:8px 12px;font-weight:700}
.cuerpo-app .respuesta.bien{background:var(--bien-fondo);color:#0B6B37}
.cuerpo-app .respuesta.mal{background:var(--mal-fondo);color:#9F1D22}
.cuerpo-app .puntos{display:flex;gap:5px}
.cuerpo-app .puntos i{width:14px;height:14px;border-radius:50%;background:rgba(107,74,0,.18)}
.cuerpo-app .puntos i.ok{background:var(--bien)}
.cuerpo-app .puntos i.no{background:var(--mal)}
.cuerpo-app .ch-nivel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border-top:2px solid var(--gris);padding-top:12px;font-weight:800;font-size:.9rem;color:var(--tinta-2)}
.cuerpo-app .segmento{display:inline-flex;background:var(--gris);border-radius:999px;padding:3px}
.cuerpo-app .segmento button{border:0;background:transparent;border-radius:999px;padding:5px 12px;font-weight:800;cursor:pointer;color:var(--tinta-2);font-size:.88rem}
.cuerpo-app .segmento button[aria-pressed="true"]{background:var(--medio);color:#fff}
.cuerpo-app .ch-pie{font-size:.8rem;color:var(--tinta-2);margin:0}
.cuerpo-app .profes{border-top:2px solid var(--gris);padding-top:10px}
.cuerpo-app .profes summary{cursor:pointer;font-weight:800;color:var(--tinta-2);font-size:.92rem}
.cuerpo-app .profes-cuerpo{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.cuerpo-app .profes .ch-nivel{border-top:0;padding-top:0}
.cuerpo-app .marca{display:flex;flex-direction:column;align-items:flex-start}
.cuerpo-app .volver{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:800;color:#0B5DAA;text-decoration:none;font-size:.95rem}
.cuerpo-app .volver:hover{text-decoration:underline}
/* Portada: los aparatos del cuerpo */
.cuerpo-app .aparatos-cab h2{font-family:var(--titulos);font-weight:800;font-size:1.6rem;margin:0;line-height:1.1}
.cuerpo-app .aparatos-cab p{margin:4px 0 0;color:var(--tinta-2);font-weight:700}
.cuerpo-app .aparatos-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cuerpo-app .aparato-tarjeta{display:flex;flex-direction:column;gap:4px;height:100%;border:var(--borde);border-radius:18px;padding:12px 14px;background:var(--fondo);
  color:var(--tinta);text-decoration:none;box-shadow:0 4px 0 var(--tinta)}
.cuerpo-app .aparato-tarjeta b{font-family:var(--titulos);font-size:1.2rem;line-height:1.1}
.cuerpo-app .aparato-tarjeta span{font-size:.92rem;color:var(--tinta-2);font-weight:700}
.cuerpo-app .aparato-tarjeta em{font-style:normal;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--medio)}
.cuerpo-app a.aparato-tarjeta{background:var(--medio-fondo)}
.cuerpo-app a.aparato-tarjeta:hover{transform:translateY(-2px)}
.cuerpo-app .aparato-tarjeta.pronto{border-style:dashed;box-shadow:none;opacity:.85}
.cuerpo-app .aparato-tarjeta.pronto em{color:var(--tinta-2)}
/* SVG */
.cuerpo-app .capa{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.cuerpo-app #lamina[data-capa="respiratorio"] .capa-respiratorio,.cuerpo-app #lamina[data-capa="circulatorio"] .capa-circulatorio,.cuerpo-app #lamina[data-capa="corazon"] .capa-corazon,.cuerpo-app #lamina[data-capa="nervioso"] .capa-nervioso,.cuerpo-app #lamina[data-capa="cerebro"] .capa-cerebro,.cuerpo-app #lamina[data-capa="excretor"] .capa-excretor,.cuerpo-app #lamina[data-capa="rinon"] .capa-rinon,.cuerpo-app #lamina[data-capa="ojo"] .capa-ojo,.cuerpo-app #lamina[data-capa="ojo-dentro"] .capa-ojo-dentro,.cuerpo-app #lamina[data-capa="oido"] .capa-oido,.cuerpo-app #lamina[data-capa="oido-dentro"] .capa-oido-dentro,.cuerpo-app #lamina[data-capa="musculos-espalda"] .capa-musculos-espalda,.cuerpo-app #lamina[data-capa="esqueleto-espalda"] .capa-esqueleto-espalda,.cuerpo-app #lamina[data-capa="piel"] .capa-piel,.cuerpo-app #lamina[data-capa="musculos"] .capa-musculos,.cuerpo-app #lamina[data-capa="esqueleto"] .capa-esqueleto,.cuerpo-app #lamina[data-capa="organos"] .capa-organos{opacity:1;visibility:visible;transition:opacity .45s ease}
.cuerpo-app [data-part]{cursor:pointer;transition:opacity .25s}
.cuerpo-app .atenuada{opacity:.3}
.cuerpo-app .activa{filter:drop-shadow(0 0 2px #1478D4) drop-shadow(0 0 5px #1478D4)}
.cuerpo-app .acierto{filter:drop-shadow(0 0 3px #12A150) drop-shadow(0 0 7px #12A150)}
.cuerpo-app .fallo{filter:drop-shadow(0 0 3px #E5484D) drop-shadow(0 0 7px #E5484D)}
.cuerpo-app .senal{animation:senal .7s ease-in-out infinite alternate}
.cuerpo-app .ayuda{animation:senal .6s ease-in-out infinite alternate}
@keyframes senal{from{filter:drop-shadow(0 0 1px #FFCC33)}to{filter:drop-shadow(0 0 4px #E8A800) drop-shadow(0 0 9px #FFCC33)}}
.cuerpo-app .zona{fill:transparent;stroke:transparent;stroke-width:6;stroke-linejoin:round;pointer-events:all;cursor:pointer}
.cuerpo-app .halo{fill:none;stroke:transparent;stroke-width:34;stroke-linejoin:round;pointer-events:stroke;cursor:pointer}
.cuerpo-app .halo.activa,.cuerpo-app .halo.ayuda,.cuerpo-app .halo.acierto,.cuerpo-app .halo.fallo,.cuerpo-app .halo.senal{fill:none;stroke:transparent;filter:none;animation:none}
.cuerpo-app .velo{fill:rgba(23,26,42,.42);fill-rule:evenodd;pointer-events:none;opacity:0;transition:opacity .25s}
.cuerpo-app .velo.on{opacity:1}
.cuerpo-app .zona.atenuada{opacity:1}
.cuerpo-app .zona.activa{fill:rgba(20,120,212,.18);stroke:#1478D4;filter:none}
.cuerpo-app .zona.ayuda{fill:rgba(255,204,51,.22);stroke:#E8A800;filter:none;animation:pulso .6s ease-in-out infinite alternate}
.cuerpo-app .zona.acierto{fill:rgba(18,161,80,.22);stroke:#12A150;filter:none}
.cuerpo-app .zona.fallo{fill:rgba(229,72,77,.2);stroke:#E5484D;filter:none}
.cuerpo-app .zona.senal{fill:rgba(255,204,51,.3);stroke:#E8A800;filter:none;animation:pulso .5s ease-in-out infinite alternate}
@keyframes pulso{from{stroke-opacity:.35;fill-opacity:.4}to{stroke-opacity:1;fill-opacity:1}}
.cuerpo-app .ch-rotulos text{font-family:var(--texto);font-weight:800;fill:#23263B;paint-order:stroke;stroke:#fff;stroke-width:.26em;stroke-linejoin:round}
.cuerpo-app .ch-rotulos line{stroke:#23263B}
.cuerpo-app .ch-rotulos circle{fill:#23263B}
@media (prefers-reduced-motion: reduce){.cuerpo-app,.cuerpo-app *{transition:none!important;animation:none!important}}
.cuerpo-app p,.cuerpo-app h1,.cuerpo-app h2{margin:0}
.cuerpo-app h1,.cuerpo-app h2{letter-spacing:0}
.cuerpo-app:fullscreen{background:var(--fondo);overflow:auto;padding:12px max(16px, env(safe-area-inset-left, 0px))}
/* Dentro de fichas.es (la app va en .contenedor): aire bajo la cabecera de la web y sus adornos de temporada */

/* ---------- Pantalla completa sin scroll ----------
   La app mide justo lo que queda de pantalla bajo la cabecera de la web (--alto-app, lo calcula el motor). En horizontal:
   dibujo a la izquierda y panel a la derecha, los dos a toda la altura. En vertical: dibujo arriba y panel abajo.
   El dibujo se encuadra a su hueco (sin franjas vacías) y lo que no cabe en el panel se mueve dentro del panel. */
.cuerpo-app{max-width:1500px;height:var(--alto-app, 100vh);min-height:440px;gap:10px}
.contenedor > .cuerpo-app{padding-block:22px 10px}
.cuerpo-app header{flex:none;flex-wrap:nowrap;align-items:center;gap:4px 14px}
.cuerpo-app .marca{min-width:0;flex:1}
.cuerpo-app .marca h1{font-size:clamp(1.35rem,2.4vw,2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cuerpo-app .marca p{font-size:.92rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cuerpo-app .volver{margin-bottom:0;font-size:.88rem}
.cuerpo-app .sello{flex:none}
.cuerpo-app .main{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) clamp(320px,31vw,440px);grid-template-rows:minmax(0,1fr);gap:14px;align-items:stretch}
.cuerpo-app .escenario{min-height:0;gap:10px}
.cuerpo-app .lamina-wrap{flex:1;min-height:0}
.cuerpo-app #lamina{display:block;width:100%;height:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cuerpo-app .panel{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px;gap:12px}
.cuerpo-app .capas{flex:none;flex-wrap:nowrap;gap:8px}
.cuerpo-app .capa-btn{min-width:0;flex:1;max-width:170px;flex-direction:row;justify-content:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;white-space:nowrap}
.cuerpo-app .capa-btn i{width:40px;height:40px}
.cuerpo-app .pestanas{flex:none}
.cuerpo-app .pestanas button{min-height:50px;flex-direction:row;gap:8px;padding:6px 8px;font-size:.95rem}
.cuerpo-app .pestanas button svg{width:28px;height:28px}
.cuerpo-app .ch-ficha h2{font-size:1.75rem}
.cuerpo-app .ch-ficha .corto{font-size:1.15rem}
.cuerpo-app .lista-partes{flex:none}
/* Portada: los aparatos, dentro del panel */
.cuerpo-app .aparatos-panel{display:flex;flex-direction:column;gap:8px}
.cuerpo-app .aparatos-panel h2{font-family:var(--titulos);font-weight:800;font-size:1.15rem;line-height:1.1}
.cuerpo-app .aparatos-lista{grid-template-columns:1fr;gap:8px}
.cuerpo-app .aparato-tarjeta{flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 10px;padding:8px 12px;border-radius:14px;box-shadow:0 3px 0 var(--tinta)}
.cuerpo-app .aparato-tarjeta b{font-size:1.05rem}
.cuerpo-app .aparato-tarjeta em{margin-left:auto}
/* Viaje: compacto (el camino de puntos sustituye a la lista de etapas) */
.cuerpo-app .viaje-cab svg{display:none}
.cuerpo-app .viaje-cab p{font-size:.95rem}
.cuerpo-app .meriendas{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cuerpo-app .merienda-btn{padding:4px 2px;font-size:.68rem;border-radius:12px}
.cuerpo-app .merienda-btn img{width:40px;height:40px}
/* Viaje: el botón de empezar, grande y con la merienda dentro; debajo, el reloj en una línea y el de volver a empezar */
.cuerpo-app .viaje-fila{display:flex;gap:8px;align-items:stretch}
.cuerpo-app .viaje-fila .reloj{flex:1;padding:6px 12px;align-items:center;justify-content:flex-start;gap:8px}
.cuerpo-app .viaje-fila .reloj svg{width:20px;height:20px;flex:none;opacity:.85}
.cuerpo-app .viaje-fila .reloj span{flex:1;line-height:1.15}
.cuerpo-app .viaje-fila .reloj b{font-size:1.15rem;white-space:nowrap}
.cuerpo-app .viaje-fila .btn{flex:none;align-self:center;width:44px;height:44px;justify-content:center;padding:0;font-size:1.15rem}
.cuerpo-app .empezar{position:relative;width:100%;justify-content:center;gap:12px;min-height:62px;padding:6px 18px;font-family:var(--titulos);font-size:1.3rem;border-radius:20px;box-shadow:0 5px 0 var(--tinta);overflow:visible}
.cuerpo-app .empezar:active{transform:translateY(3px);box-shadow:0 2px 0 var(--tinta)}
.cuerpo-app .empezar-merienda{width:52px;height:52px;object-fit:contain;margin:-8px 0;filter:drop-shadow(0 2px 0 rgba(35,38,59,.25))}
.cuerpo-app .empezar-play{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tinta);color:var(--sol);flex:none}
.cuerpo-app .empezar-play svg{width:16px;height:16px;margin-left:2px}
.cuerpo-app .empezar:not(.llamar){min-height:48px;font-size:1.1rem;background:var(--fondo)}
.cuerpo-app .empezar:not(.llamar) .empezar-merienda{width:38px;height:38px}
.cuerpo-app .empezar:not(.llamar) .empezar-play{width:30px;height:30px;color:var(--fondo)}
/* Para llamar la atención: late, la merienda da saltitos y sale una onda alrededor */
@media (prefers-reduced-motion: no-preference){
  .cuerpo-app .empezar.llamar{animation:ch-latido 1.6s ease-in-out infinite}
  .cuerpo-app .empezar.llamar .empezar-merienda{animation:ch-salto 1.6s ease-in-out infinite}
  .cuerpo-app .empezar.llamar::after{content:"";position:absolute;inset:-3px;border-radius:22px;border:3px solid var(--sol);animation:ch-onda 1.6s ease-out infinite;pointer-events:none}
  .cuerpo-app .empezar.llamar:hover{animation-play-state:paused}
}
@keyframes ch-latido{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ch-salto{0%,60%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-7px) rotate(-8deg)}40%{transform:translateY(0) rotate(6deg)}}
@keyframes ch-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12,1.35)}}
.cuerpo-app .etapa-actual{background:var(--azul-fondo);border:2px solid var(--azul);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.cuerpo-app .etapa-actual b{font-family:var(--titulos);font-size:1.2rem;line-height:1.1}
.cuerpo-app .etapa-actual small{font-weight:800;color:var(--tinta-2);font-size:.82rem}
.cuerpo-app .etapa-actual em{font-style:normal;font-weight:800;color:var(--medio)}
.cuerpo-app .etapa-actual.espera{background:var(--gris);border-color:var(--linea)}
/* Vertical (móvil, tableta de pie): dibujo arriba y panel abajo */
@media (orientation:portrait) and (max-width:1100px){
  .cuerpo-app .main{display:flex;flex-direction:column;gap:10px}
  .cuerpo-app .escenario{flex:1 1 auto}
  .cuerpo-app .panel{flex:0 1 auto;max-height:40%}
}
@media (max-width:600px){
  .cuerpo-app .marca p,.cuerpo-app .sello{display:none}
  .cuerpo-app .marca h1{font-size:1.35rem}
  .cuerpo-app .capa-btn{flex-direction:column;gap:2px;padding:4px 4px;border-radius:14px;font-size:.78rem}
  .cuerpo-app .capa-btn i{width:34px;height:34px}
  .cuerpo-app .pestanas{gap:6px}
  .cuerpo-app .pestanas button{min-height:44px;font-size:.8rem;gap:4px;padding:4px}
  .cuerpo-app .pestanas button svg{width:22px;height:22px}
  .cuerpo-app .flotante .pildora{padding:3px 9px;font-size:.78rem}
  .cuerpo-app #pantalla span{display:none}
  .cuerpo-app .pildora svg{margin-right:0}
  .cuerpo-app .ch-ficha{padding:10px 12px;gap:6px}
  .cuerpo-app .ch-ficha h2{font-size:1.45rem}
  .cuerpo-app .ch-ficha .corto{font-size:1.05rem}
  .cuerpo-app .viaje-cab{display:none}
  .cuerpo-app .merienda-btn span{display:none}
}
/* Pantallas bajas (móvil en horizontal): sin subtítulo */
@media (max-height:560px){.cuerpo-app .marca p{display:none}.cuerpo-app .capa-btn i{width:30px;height:30px}}
.cuerpo-app:fullscreen{height:100vh}
/* Texto de debajo de la herramienta (solo en fichas.es): lámina con nombres al lado del texto, que se queda a la vista al bajar */
.cuerpo-texto .prosa{max-width:none}
.cuerpo-texto .prosa::after{content:"";display:table;clear:both}
.cuerpo-texto .prosa > h2{margin-top:1.3em}
.cuerpo-texto .prosa > h2:first-child{margin-top:0}
.cuerpo-texto h3,.cuerpo-texto h4{font-family:var(--titulos);font-weight:800;color:var(--tinta);line-height:1.15}
.cuerpo-texto h3.cuerpo-grupo{font-size:22px;margin:1em 0 .5em;clear:both}
/* La lámina con nombres va dentro del texto, a la derecha, y el texto la rodea */
.cuerpo-figura{float:right;width:min(46%,540px);margin:2px 0 18px 32px;background:#E2F8F1;border-radius:18px;overflow:hidden;border:3px solid #23263B;box-shadow:0 5px 0 #23263B}
.cuerpo-figura--alta{width:min(40%,440px)}
.cuerpo-figura img{display:block;width:100%;height:auto}
.cuerpo-figura figcaption{padding:8px 12px;font-weight:800;font-size:.9rem;color:#23263B;background:#fff;border-top:3px solid #23263B}
/* Tarjetas: partes, capas, órganos, aparatos… (h3, o h4 dentro de un grupo) */
.cuerpo-tarjetas{clear:both;list-style:none;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
/* 5, 6 o 9 tarjetas: de tres en tres, para que no queden huecos en la última fila */
.cuerpo-tarjetas[data-n="5"],.cuerpo-tarjetas[data-n="6"],.cuerpo-tarjetas[data-n="9"]{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cuerpo-tarjetas li{--c:#11735F;background:#F4F6FB;border-radius:18px;padding:14px 16px 14px;border-top:6px solid var(--c)}
.cuerpo-tarjetas li:nth-child(4n+2){--c:#1478D4}
.cuerpo-tarjetas li:nth-child(4n+3){--c:#E8403D}
.cuerpo-tarjetas li:nth-child(4n+4){--c:#D9A400}
.cuerpo-tarjetas h3,.cuerpo-tarjetas h4{font-size:20px;margin:0 0 .3em}
.cuerpo-tarjetas h3 a,.cuerpo-tarjetas h4 a{color:#0F67BA}
.cuerpo-tarjetas p{margin:0;font-size:16px;line-height:1.5}
/* Fases: pasos numerados en fila */
.cuerpo-pasos{clear:both;list-style:none;counter-reset:paso;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.cuerpo-pasos li{counter-increment:paso;position:relative;background:#E2F8F1;border-radius:18px;padding:16px 16px 14px 64px;min-height:84px}
.cuerpo-pasos li::before{content:counter(paso);position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:50%;background:#11735F;color:#fff;display:grid;place-items:center;font:800 20px var(--titulos)}
.cuerpo-pasos h3{font-size:20px;margin:0 0 .25em}
.cuerpo-pasos p{margin:0;font-size:16px;line-height:1.5}
/* Preguntas frecuentes en dos columnas */
.cuerpo-faq{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 10px}
.cuerpo-faq > div{border:3px solid #E3E7F1;border-radius:18px;padding:14px 18px}
.cuerpo-faq h3{font-size:19px;margin:0 0 .35em}
.cuerpo-faq p{margin:0;font-size:16px;line-height:1.5}
@media (max-width:760px){
  .cuerpo-figura,.cuerpo-figura--alta{float:none;width:100%;max-width:520px;margin:0 auto 18px}
  .cuerpo-faq{grid-template-columns:minmax(0,1fr)}
}
/* Migas de la web encima de la app: una sola línea, con aire bajo la cabecera, y la app pegada a ellas */
.pagina-cuerpo-humano .migas{padding-top:16px}
.pagina-cuerpo-humano .migas ol{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;margin-bottom:0}
.pagina-cuerpo-humano .migas li:last-child{overflow:hidden;text-overflow:ellipsis}
.contenedor > .migas + .cuerpo-app{padding-top:8px}

/* Cuenta atrás de «Siguiente» en ¿Dónde está? (igual que en las fichas) */
.cuerpo-app #jSiguiente{position:relative;overflow:hidden}
.cuerpo-app #jSiguiente.contando{gap:10px;padding-right:8px}
.cuerpo-app .cuenta-relleno{position:absolute;inset:0;background:rgba(255,255,255,.5);transform-origin:left;transition:transform .2s linear;pointer-events:none}
.cuerpo-app .cuenta-texto{position:relative}
.cuerpo-app .cuenta-num{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--sol);font-size:15px}
@media (prefers-reduced-motion:reduce){.cuerpo-app .cuenta-relleno{transition:none}}

/* Aparato locomotor: Huesos / Músculos y «Dar la vuelta» encima de la lámina */
.cuerpo-app .capas-mini{flex-wrap:wrap;max-width:calc(100% - 20px)}
.cuerpo-app .flotante .capa-btn{flex-direction:row;min-width:0;max-width:none;gap:6px;border:2px solid var(--tinta);border-radius:999px;padding:4px 12px;box-shadow:none;transform:none;font-size:.88rem;background:var(--fondo)}
.cuerpo-app .flotante .capa-btn[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}
.cuerpo-app .vuelta{background:var(--sol)}
.cuerpo-app .vuelta[aria-pressed="true"]{background:var(--sol);color:var(--tinta)}
/* ¿Qué se mueve cuando…? */
.cuerpo-app .mover-cab{margin:0;font-family:var(--titulos);font-weight:800;font-size:1.2rem}
.cuerpo-app .acciones-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
.cuerpo-app .acciones-lista .merienda-btn img{width:52px;height:52px}
.cuerpo-app .mover-fila{display:flex;justify-content:flex-end}
.cuerpo-app #moverPaso small{display:block}
/* La pareja de músculos, animada en la esquina de la lámina */
.cuerpo-app .anim-mov{position:absolute;right:10px;bottom:10px;width:120px;height:120px;background:var(--fondo);border:2px solid var(--tinta);border-radius:16px;box-shadow:0 3px 0 rgba(35,38,59,.25)}
.cuerpo-app .anim-mov svg{width:100%;height:100%;display:block}
.cuerpo-app .anim-mov[data-anim="brazo"] .anim-pierna,.cuerpo-app .anim-mov[data-anim="pierna"] .anim-brazo{display:none}
.cuerpo-app .anim-mov .antebrazo{transform-origin:40px 65px;animation:ch-doblar 2.6s ease-in-out infinite}
.cuerpo-app .anim-mov .biceps{transform-box:fill-box;transform-origin:center;animation:ch-engorda 2.6s ease-in-out infinite}
.cuerpo-app .anim-mov .triceps{transform-box:fill-box;transform-origin:center;animation:ch-adelgaza 2.6s ease-in-out infinite}
.cuerpo-app .anim-mov .espinilla{transform-origin:61px 58px;animation:ch-chutar 2.6s ease-in-out infinite}
.cuerpo-app .anim-mov .cuadri{transform-box:fill-box;transform-origin:center;animation:ch-cuadri 2.6s ease-in-out infinite}
.cuerpo-app .anim-mov .isquio{transform-box:fill-box;transform-origin:center;animation:ch-isquio 2.6s ease-in-out infinite}
.cuerpo-app .anim-mov .balon{animation:ch-balon 2.6s ease-in-out infinite}
@keyframes ch-doblar{0%,15%{transform:rotate(0)}45%,65%{transform:rotate(-125deg)}95%,100%{transform:rotate(0)}}
@keyframes ch-engorda{0%,15%{transform:scaleX(1)}45%,65%{transform:scale(1.7,.85)}95%,100%{transform:scaleX(1)}}
@keyframes ch-adelgaza{0%,15%{transform:scaleX(1)}45%,65%{transform:scale(.6,1.08)}95%,100%{transform:scaleX(1)}}
@keyframes ch-chutar{0%,10%{transform:rotate(0)}40%{transform:rotate(70deg)}55%{transform:rotate(-35deg)}75%,100%{transform:rotate(0)}}
@keyframes ch-cuadri{0%,40%{transform:scaleX(1)}55%{transform:scale(1.6,.9)}75%,100%{transform:scaleX(1)}}
@keyframes ch-isquio{0%,10%{transform:scaleX(1)}40%{transform:scale(1.6,.9)}55%,100%{transform:scaleX(1)}}
@keyframes ch-balon{0%,52%{transform:translateX(0);opacity:1}75%{transform:translateX(40px);opacity:0}76%,90%{transform:translateX(0);opacity:0}100%{opacity:1}}
.cuerpo-app .anim-mov.pausa *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.cuerpo-app .anim-mov *{animation:none !important}}
@media (max-width:600px){.cuerpo-app .lamina-wrap:has(.capas-mini) .flotante.der{top:auto;bottom:10px;left:10px;right:auto}.cuerpo-app .lamina-wrap:has(.capas-mini) .mandos-voz{bottom:56px}.cuerpo-app .anim-mov{width:84px;height:84px}.cuerpo-app .flotante .capa-btn{padding:3px 9px;font-size:.78rem}}

/* «Todo el cuerpo»: volver a la portada desde un aparato. Grande y con el dibujo del niño (las migas son pequeñas para los niños) */
.cuerpo-app .a-todo{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 16px 4px 8px;border:var(--borde);border-radius:999px;background:var(--fondo);box-shadow:0 3px 0 var(--tinta);color:var(--tinta);font:800 1rem/1.05 var(--titulos);text-decoration:none}
.cuerpo-app .a-todo:hover{background:var(--sol);color:var(--tinta)}
.cuerpo-app .a-todo:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.cuerpo-app .a-todo svg{width:16px;height:16px;flex:none}
.cuerpo-app .a-todo img{width:40px;height:40px;border-radius:50%;border:2px solid var(--tinta);flex:none}
@media (max-width:600px){
  .cuerpo-app .a-todo{padding:3px 10px 3px 4px;gap:4px;font-size:.78rem}
  .cuerpo-app .a-todo img{width:32px;height:32px}
  .cuerpo-app .a-todo span{max-width:4.2em}
}

/* Aparato respiratorio: los pulmones se hinchan al coger aire (inspira) o respiran deprisa (respira-rapido) */
.cuerpo-app .capa-respiratorio .zona[data-part="pulmones"],.cuerpo-app .capa-respiratorio .zona[data-part="diafragma"]{transform-box:fill-box;transform-origin:center;transition:transform 3.6s ease-in-out,fill 1.2s}
.cuerpo-app #lamina.inspira .capa-respiratorio .zona[data-part="pulmones"]{fill:rgba(79,168,232,.3);transform:scale(1.07)}
.cuerpo-app #lamina.inspira .capa-respiratorio .zona[data-part="diafragma"]{transform:translateY(16px)}
.cuerpo-app #lamina.respira-rapido .capa-respiratorio .zona[data-part="pulmones"]{fill:rgba(79,168,232,.3);animation:ch-respira 1.1s ease-in-out infinite}
.cuerpo-app #lamina.respira-rapido .capa-respiratorio .zona[data-part="diafragma"]{animation:ch-diafragma 1.1s ease-in-out infinite}
@keyframes ch-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ch-diafragma{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}
/* Los alvéolos de cerca: el oxígeno (rojo) entra en la sangre y el dióxido de carbono (morado) sale */
.cuerpo-app .anim-mov[data-anim="alveolos"]{width:170px;height:170px;background:#E2F8F1}
.cuerpo-app .anim-mov .anim-alveolos{display:none}
.cuerpo-app .anim-mov[data-anim="alveolos"] .anim-alveolos{display:inline}
.cuerpo-app .anim-mov[data-anim="alveolos"] .anim-brazo,.cuerpo-app .anim-mov[data-anim="alveolos"] .anim-pierna{display:none}
.cuerpo-app .anim-alveolos .o2{fill:#E5484D;stroke:#fff;stroke-width:1.5;animation:ch-o2 2s ease-in-out infinite}
.cuerpo-app .anim-alveolos .co2{fill:#8E7CC3;stroke:#fff;stroke-width:1.5;animation:ch-co2 2s ease-in-out infinite}
.cuerpo-app .anim-alveolos .o2b,.cuerpo-app .anim-alveolos .co2b{animation-delay:.7s}
.cuerpo-app .anim-alveolos .o2c{animation-delay:1.3s}
@keyframes ch-o2{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(26px,-22px);opacity:0}}
@keyframes ch-co2{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(-22px,-30px);opacity:0}}
.cuerpo-app .anim-mov.pausa .anim-alveolos *{animation-play-state:paused}
@media (max-width:600px){.cuerpo-app .anim-mov[data-anim="alveolos"]{width:120px;height:120px}}
/* ¡Respira conmigo! */
.cuerpo-app .calma{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:12px;border-radius:16px;background:#E6F4FF}
.cuerpo-app .calma .btn{grid-row:span 2}
.cuerpo-app .calma .btn svg{width:22px;height:22px}
.cuerpo-app .calma p{margin:0;font-weight:700}
.cuerpo-app .calma b{font-size:.9rem;color:var(--tinta-2)}
@media (prefers-reduced-motion:reduce){.cuerpo-app #lamina .capa-respiratorio .zona{transition:none !important;animation:none !important}}

/* Detalle de cerca en el recuadro (capilares, nefrona…): la imagen la pone el motor en cada paso */
.cuerpo-app .anim-mov .anim-detalle{display:none}
.cuerpo-app .anim-mov[data-anim="detalle"]{width:170px;height:170px;background:#E2F8F1}
.cuerpo-app .anim-mov[data-anim="detalle"] .anim-detalle{display:inline}
.cuerpo-app .anim-mov[data-anim="detalle"] .anim-brazo,.cuerpo-app .anim-mov[data-anim="detalle"] .anim-pierna,.cuerpo-app .anim-mov[data-anim="detalle"] .anim-alveolos{display:none}
@media (max-width:600px){.cuerpo-app .anim-mov[data-anim="detalle"]{width:120px;height:120px}}
/* Aparato circulatorio: el corazón late (¡Tómate el pulso!), deprisa al correr y despacio al dormir */
.cuerpo-app .capa-circulatorio .zona[data-part="corazon"],.cuerpo-app .capa-corazon image{transform-box:fill-box;transform-origin:center;transition:transform .18s ease-out,fill .18s}
.cuerpo-app #lamina.late .capa-circulatorio .zona[data-part="corazon"]{fill:rgba(229,72,77,.35);transform:scale(1.14)}
.cuerpo-app #lamina.late .capa-corazon image{transform:scale(1.03)}
.cuerpo-app #lamina.late-rapido .capa-circulatorio .zona[data-part="corazon"]{fill:rgba(229,72,77,.35);animation:ch-latido-corazon .42s ease-in-out infinite}
.cuerpo-app #lamina.late-rapido .capa-corazon image{animation:ch-latido-dentro .42s ease-in-out infinite}
.cuerpo-app #lamina.late-lento .capa-circulatorio .zona[data-part="corazon"]{fill:rgba(229,72,77,.3);animation:ch-latido-corazon 1.3s ease-in-out infinite}
.cuerpo-app #lamina.late-lento .capa-corazon image{animation:ch-latido-dentro 1.3s ease-in-out infinite}
@keyframes ch-latido-corazon{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.14)}}
@keyframes ch-latido-dentro{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.cuerpo-app #lamina .capa-circulatorio .zona,.cuerpo-app #lamina .capa-corazon image{animation:none !important;transition:none !important}}

/* El ojo: la pupila se cierra con la luz (un anillo del color del iris la tapa por fuera) y se abre a oscuras */
.cuerpo-app .capa-ojo .zona[data-part="pupila"]{transform-box:fill-box;transform-origin:center;transition:transform 1.2s ease-in-out,stroke-width 1.2s ease-in-out,fill 1.2s}
.cuerpo-app #lamina.luz .capa-ojo .zona[data-part="pupila"]{fill:rgba(0,0,0,0);stroke:#8A4E22;stroke-width:34}
.cuerpo-app #lamina.oscuro .capa-ojo .zona[data-part="pupila"]{fill:#0d0d0d;transform:scale(1.55)}
@media (prefers-reduced-motion:reduce){.cuerpo-app .capa-ojo .zona{transition:none !important}}

/* El oído: el tímpano y los huesecillos vibran (fuerte o suave) con el sonido */
.cuerpo-app .capa-oido .zona,.cuerpo-app .capa-oido-dentro .zona{transform-box:fill-box;transform-origin:center}
@keyframes oi-vibra{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes oi-vibra-suave{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.cuerpo-app #lamina.vibra :is(.capa-oido,.capa-oido-dentro) .zona:is([data-part="timpano"],[data-part="huesecillos"],[data-part="martillo"],[data-part="yunque"],[data-part="estribo"]),
.cuerpo-app #lamina.vibra-fuerte .capa-oido-dentro .zona:is([data-part="timpano"],[data-part="martillo"],[data-part="yunque"],[data-part="estribo"]){animation:oi-vibra .14s linear infinite}
.cuerpo-app #lamina.vibra-suave .capa-oido-dentro .zona:is([data-part="timpano"],[data-part="martillo"],[data-part="yunque"],[data-part="estribo"]){animation:oi-vibra-suave .3s linear infinite}
@media (prefers-reduced-motion:reduce){.cuerpo-app :is(.capa-oido,.capa-oido-dentro) .zona{animation:none !important}}

/* ---------- Móvil en vertical ----------
   El dibujo, alto: casi toda la pantalla (100svh, la altura con las barras del navegador a la vista) menos las pestañas,
   el subtítulo y la fila de partes (--resto-lamina, lo mide el motor), sin pasar de la forma del dibujo (--prop-lamina:
   alto/ancho de su encuadre cercano, así el ojo y el oído, que son apaisados, no dejan aire). El panel va debajo, con el
   scroll de la página; el subtítulo repite lo importante y la fila de partes sustituye a la «Lista de partes». */
.cuerpo-app .subtitulo,.cuerpo-app .fila-partes{display:none}
@media (orientation:portrait) and (max-width:700px){
  .cuerpo-app:not(:fullscreen):not(.inmersiva){height:auto;min-height:0}
  .cuerpo-app .main{flex:none}
  .cuerpo-app .escenario{flex:none;gap:8px;container-type:inline-size}
  .cuerpo-app .lamina-wrap{flex:none;min-height:260px;
    height:min(calc(100vh - var(--resto-lamina, 220px)), calc(var(--prop-lamina, 1.6) * 100cqw));
    height:min(calc(100svh - var(--resto-lamina, 220px)), calc(var(--prop-lamina, 1.6) * 100cqw))}
  .cuerpo-app .panel{flex:none;max-height:none;overflow:visible}
  .cuerpo-app .lista-partes{display:none}
  .cuerpo-app .subtitulo{display:flex;align-items:center;gap:10px;min-height:96px;background:var(--crema);border-radius:16px;padding:8px 10px 8px 14px}
  .cuerpo-app .subtitulo p{flex:1;min-width:0;font-size:1.02rem;line-height:1.3;font-weight:700}
  .cuerpo-app .subtitulo p b{font-family:var(--titulos);font-size:1.2rem;line-height:1.1}
  .cuerpo-app .subtitulo small{display:block;font-size:.78rem;font-weight:800;color:var(--crema-texto);letter-spacing:.02em}
  .cuerpo-app .subtitulo .respuesta{display:block;margin-top:5px;padding:4px 9px;font-size:.95rem}
  .cuerpo-app .subtitulo .ch-estrellas{font-size:2rem}
  .cuerpo-app .sub-btn{flex:none;min-height:44px;padding:6px 14px;font-size:1rem}
  .cuerpo-app .sub-btn .cuenta-relleno{display:none}
  .cuerpo-app[data-tab="explorar"] .fila-partes{display:flex}
  .cuerpo-app .fila-partes{gap:6px;overflow-x:auto;min-height:46px;align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:-2px;padding:0 2px}
  .cuerpo-app .fila-partes::-webkit-scrollbar{display:none}
  .cuerpo-app .fila-partes .parte-btn{flex:none;min-height:42px;white-space:nowrap;font-size:.98rem;border-width:2px;padding:4px 13px}
  .cuerpo-app .fila-partes .parte-btn i{display:inline-grid;place-items:center;min-width:22px;height:22px;margin:0 6px 0 -5px;border-radius:50%;
    background:var(--sol);border:2px solid var(--tinta);font-style:normal;font-size:.78rem;font-weight:800}
  /* Botones de la lámina: abajo a la derecha (arriba tapaban la cabeza), del tamaño de un dedo */
  .cuerpo-app .flotante.der,.cuerpo-app .lamina-wrap:has(.capas-mini) .flotante.der{top:auto;bottom:10px;right:10px;left:auto}
  .cuerpo-app .mandos-voz,.cuerpo-app .lamina-wrap:has(.capas-mini) .mandos-voz{bottom:10px;left:10px}
  .cuerpo-app .flotante .pildora{min-height:40px;padding:6px 13px;font-size:.85rem}
  .cuerpo-app #pantalla{width:40px;padding:0;display:grid;place-items:center}
  .cuerpo-app .flotante .capa-btn{min-height:38px}
  .cuerpo-app .redondo{width:42px;height:42px}
  .cuerpo-app .anim-mov{top:10px;bottom:auto}
  .cuerpo-app .lamina-wrap:has(.capas-mini) .anim-mov{top:56px}
  /* El título, entero (en dos líneas si hace falta) */
  .cuerpo-app .marca h1{white-space:normal;font-size:1.3rem;line-height:1.1}
}
/* Números sobre el dibujo (móvil en vertical, «Ver nombres») */
.cuerpo-app .ch-rotulos circle.num{fill:var(--sol);stroke:var(--tinta)}
.cuerpo-app .ch-rotulos text.num{stroke:none;font-weight:800}

/* ---------- Móvil en horizontal: lado a lado y a toda la altura (la página baja sola hasta la herramienta) ---------- */
@media (orientation:landscape) and (max-height:520px){
  .cuerpo-app:not(:fullscreen):not(.inmersiva){height:auto;min-height:0}
  .cuerpo-app .main{flex:none;height:100vh;height:100svh;grid-template-columns:minmax(0,1fr) minmax(250px,40%);gap:10px}
  .cuerpo-app .pestanas button{min-height:40px;padding:3px 6px;font-size:.85rem}
  .cuerpo-app .pestanas button svg{width:22px;height:22px}
  .cuerpo-app .capa-btn{padding:3px 8px 3px 4px}
  .cuerpo-app .panel{padding:10px}
  .cuerpo-app .flotante .pildora{min-height:36px}
}

/* ---------- Pantalla completa sin la API (iPhone): la app tapa la página ---------- */
.cuerpo-app.inmersiva{position:fixed;inset:0;z-index:2000;max-width:none;margin:0;height:100vh;height:100dvh;background:var(--fondo);
  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}