/* Las plantas: lámina vertical interactiva a la izquierda y panel a la derecha (debajo en el móvil).
   Mismo aspecto que el ciclo del agua y el cuerpo humano: tinta azul oscura, bordes de juguete y el verde de Conocimiento del Medio. */
.planta-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;
  --hoja:#3E9B3A; --hoja-fondo:#E4F6DC;
  --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;
}
.planta-app,.planta-app *{box-sizing:border-box}
.planta-app [hidden]{display:none!important}
.planta-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}
.planta-app p,.planta-app h1,.planta-app h2,.planta-app h3{margin:0}
.planta-app button{font:inherit;color:inherit}
.planta-app button:focus-visible,.planta-app a:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.planta-app header{display:flex;align-items:center;justify-content:space-between;gap:6px 16px}
.planta-app .marca{min-width:0;flex:1}
.planta-app .marca h1{font-family:var(--titulos);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1}
.planta-app .marca p{margin-top:4px;color:var(--tinta-2);font-weight:700;font-size:.95rem}
.planta-app .sello{flex:none;font-family:var(--titulos);font-weight:700;background:var(--medio-fondo);color:var(--medio);border-radius:999px;padding:4px 12px;font-size:.95rem}
.planta-app .temas{display:flex;gap:8px;flex-wrap:wrap}
.planta-app .temas a{border:2px solid var(--tinta);border-radius:999px;padding:3px 12px;font-weight:800;font-size:.9rem;color:var(--tinta);text-decoration:none;background:var(--fondo)}
.planta-app .temas a[aria-current="page"]{background:var(--hoja-fondo);border-color:var(--hoja);color:var(--medio)}
.planta-app .main{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,32vw,430px);gap:16px;align-items:start}
.planta-app .escenario{display:flex;flex-direction:column;gap:10px;min-width:0;align-items:center}

/* Pestañas */
.planta-app .pestanas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.planta-app .pestanas button{border:var(--borde);background:var(--fondo);border-radius:16px;padding:6px 8px;font-weight:800;font-size:.95rem;cursor:pointer;
  line-height:1.1;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 0 var(--tinta);min-height:50px}
.planta-app .pestanas button svg{width:28px;height:28px;flex:none}
.planta-app .pestanas button[aria-pressed="true"]{background:var(--sol);transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}

/* Lámina vertical (2:3): en escritorio cabe entera en la pantalla */
.planta-app .lamina-wrap{position:relative;background:var(--azul-fondo);border:var(--borde);box-shadow:var(--sombra);border-radius:22px;overflow:hidden;
  width:min(100%, calc((100svh - 215px) * 2 / 3));max-width:720px}
.planta-app #escena{display:block;width:100%;height:auto;aspect-ratio:2/3;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.planta-app .flotante{position:absolute;top:10px;right:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.planta-app .pildora{border:2px solid var(--tinta);background:var(--fondo);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.88rem;cursor:pointer}
.planta-app .pildora[aria-pressed="true"]{background:var(--tinta);color:var(--fondo)}

/* Zonas táctiles: invisibles hasta que se señalan */
.planta-app .zona{cursor:pointer;fill:transparent;stroke:transparent}
.planta-app .zona.linea{fill:none;stroke:transparent;stroke-linecap:round;pointer-events:stroke}
.planta-app .zona.activa{fill:rgba(255,204,51,.28);stroke:var(--sol);stroke-width:7;stroke-linejoin:round}
.planta-app .zona.linea.activa{fill:none;stroke:rgba(255,204,51,.6)}
.planta-app .zona.senal{fill:rgba(255,255,255,.22);stroke:#fff;stroke-width:6;stroke-dasharray:14 10;animation:planta-hormigas 1s linear infinite}
.planta-app .zona.linea.senal{fill:none;stroke:rgba(255,255,255,.75)}
.planta-app .zona.acierto{fill:rgba(18,161,80,.3);stroke:var(--bien);stroke-width:8}
.planta-app .zona.linea.acierto{fill:none;stroke:rgba(18,161,80,.6)}
.planta-app .zona.fallo{fill:rgba(229,72,77,.25);stroke:var(--mal);stroke-width:8}
.planta-app .zona.linea.fallo{fill:none;stroke:rgba(229,72,77,.55)}
.planta-app .zona.destello{fill:rgba(140,255,120,.35);stroke:#9BFF7A;stroke-width:8;animation:planta-destello .9s ease-in-out infinite alternate}
@keyframes planta-hormigas{to{stroke-dashoffset:-48}}
@keyframes planta-destello{from{opacity:.35}to{opacity:1}}
.planta-app #escena.jugando .zona.activa{fill:transparent;stroke:transparent}

/* Nombres sobre el dibujo */
.planta-app .rotulo rect{fill:#fff;stroke:var(--tinta);stroke-width:3}
.planta-app .rotulo text{font-family:var(--texto);font-weight:800;fill:var(--tinta);text-anchor:middle;dominant-baseline:central}
.planta-app .rotulo line{stroke:var(--tinta);stroke-width:3}
.planta-app .rotulo circle.punta{fill:var(--tinta)}
.planta-app .rotulo.vacio text{fill:var(--tinta-2)}
.planta-app .rotulo.elegido rect{fill:var(--sol)}
.planta-app #escena.sin-nombres #rotulos{display:none}

/* Viaje: Gotita y las partículas */
.planta-app #gota image{filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.planta-app .part{pointer-events:none}
.planta-app .part.luz circle{fill:#FFE45C;stroke:#fff;stroke-width:3}
.planta-app .part.luz{filter:drop-shadow(0 0 6px #FFD000)}
.planta-app .part.agua path{fill:#3A8EE6;stroke:#fff;stroke-width:3}
.planta-app .part.azucar rect{fill:#F29A2E;stroke:#fff;stroke-width:3}
.planta-app .part.co2 circle{fill:#8B93A7;stroke:#fff;stroke-width:3}
.planta-app .part.o2 circle{fill:#7FD3FF;stroke:#fff;stroke-width:3}
.planta-app .part text{font-family:var(--texto);font-weight:800;font-size:15px;fill:#fff;text-anchor:middle;dominant-baseline:central}
.planta-app .part.brillo path{fill:#C9FF9E;stroke:#fff;stroke-width:2}
.planta-app #noche{fill:#0B1640;opacity:0;pointer-events:none;transition:opacity .8s}
.planta-app #escena.es-noche #noche{opacity:.55}
.planta-app #luna{opacity:0;transition:opacity .8s;pointer-events:none}
.planta-app #escena.es-noche #luna{opacity:1}

/* Panel */
.planta-app .panel{border:var(--borde);box-shadow:var(--sombra);border-radius:22px;background:var(--fondo);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.planta-app .panel h2{font-family:var(--titulos);font-weight:800;font-size:1.5rem;line-height:1.05}
.planta-app .niveles{display:flex;gap:6px;align-items:center;font-weight:800;font-size:.88rem;color:var(--tinta-2)}
.planta-app .ficha{display:flex;flex-direction:column;gap:8px}
.planta-app .ficha .curioso{background:var(--crema);color:var(--crema-texto);border-radius:14px;padding:8px 12px;font-weight:700}
.planta-app .ficha .enlace{align-self:flex-start;font-weight:800;color:var(--azul)}
.planta-app .lista-partes{display:flex;flex-wrap:wrap;gap:6px}
.planta-app .lista-partes button{border:2px solid var(--tinta);background:var(--fondo);border-radius:999px;padding:4px 11px;font-weight:800;font-size:.9rem;cursor:pointer}
.planta-app .lista-partes button[aria-pressed="true"]{background:var(--sol)}
.planta-app .lista-partes button i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tinta);color:#fff;font-size:.75rem;margin-right:5px}
.planta-app .btn{border:var(--borde);background:var(--fondo);border-radius:14px;padding:8px 14px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--tinta);display:inline-flex;align-items:center;gap:8px;justify-content:center}
.planta-app .btn.principal{background:var(--sol)}
.planta-app .btn:disabled{opacity:.5;cursor:default}
.planta-app .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.planta-app .fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.planta-app .viaje-cab{display:flex;gap:10px;align-items:center}
.planta-app .viaje-cab img{width:40px;height:auto;flex:none}
.planta-app .camino{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.planta-app .camino button{border:2px solid var(--tinta);background:var(--fondo);border-radius:999px;padding:3px 10px 3px 4px;font-weight:800;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:6px}
.planta-app .camino i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gris);border:2px solid var(--tinta);font-size:.75rem}
.planta-app .camino .hecha i{background:var(--bien-fondo)}
.planta-app .camino .ahora button{background:var(--sol)}
.planta-app .etapa{background:var(--gris);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;min-height:150px}
.planta-app .etapa small{font-weight:800;color:var(--tinta-2)}
.planta-app .etapa b.tit{font-family:var(--titulos);font-size:1.3rem;line-height:1.1}
.planta-app .etapa .curioso{background:var(--crema);color:var(--crema-texto);border-radius:12px;padding:6px 10px;font-weight:700;font-size:.95rem}
.planta-app .final{background:var(--bien-fondo);border-radius:16px;padding:12px;font-weight:700;display:flex;flex-direction:column;gap:8px}
.planta-app .juego-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.planta-app .pregunta{font-family:var(--titulos);font-weight:800;font-size:1.45rem;line-height:1.1;background:var(--azul-fondo);border-radius:16px;padding:12px}
.planta-app .respuesta{font-weight:800;min-height:1.5em}
.planta-app .respuesta.bien{color:var(--bien)}
.planta-app .respuesta.mal{color:var(--mal)}
.planta-app .marcador{font-weight:800}
.planta-app .modos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.planta-app .modos button{border:2px solid var(--tinta);background:var(--fondo);border-radius:14px;padding:8px;font-weight:800;cursor:pointer}
.planta-app .modos button[aria-pressed="true"]{background:var(--sol)}
.planta-app .banco{display:flex;flex-wrap:wrap;gap:6px}
.planta-app .banco span{border:2px dashed var(--tinta-2);border-radius:10px;padding:2px 8px;font-weight:700}
.planta-app .nota{color:var(--tinta-2);font-size:.9rem}
.planta-app .impresion-cab,.planta-app .impresion-banco{display:none}

/* Móvil en vertical: el subtítulo de debajo del dibujo se queda pegado abajo con lo que toca (parte, paso del viaje o pregunta) */
.planta-app .subtitulo{display:none}
@media (max-width:860px){
  .planta-app .subtitulo{display:flex;position:sticky;bottom:8px;z-index:3;width:100%;max-width:560px;gap:10px;align-items:center;background:var(--fondo);
    border:var(--borde);box-shadow:var(--sombra);border-radius:16px;padding:8px 10px;font-size:.95rem;line-height:1.3}
  .planta-app .subtitulo:empty{display:none}
  .planta-app .subtitulo p{flex:1;min-width:0}
  .planta-app .subtitulo b{font-family:var(--titulos);font-size:1.1rem}
  .planta-app .subtitulo .btn{flex:none;padding:6px 12px;min-height:44px}
  .planta-app .subtitulo .bien{color:var(--bien);font-weight:800}
  .planta-app .subtitulo .mal{color:var(--mal);font-weight:800}
  .planta-app header .sello{display:none}
  .planta-app .marca p{font-size:.9rem}
  .planta-app .temas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .planta-app .temas a{flex:none}
  .planta-app .main{grid-template-columns:minmax(0,1fr)}
  .planta-app .lamina-wrap{width:100%;max-width:560px}
  .planta-app .pestanas button{flex-direction:column;gap:2px;font-size:.8rem;min-height:56px}
  .planta-app .pestanas button svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){.planta-app *{animation:none!important;transition:none!important}}

/* Imprimir: solo la lámina, en A4 vertical */
@media print{
  @page{size:A4 portrait;margin:10mm}
  body *{visibility:hidden}
  .planta-app .lamina-wrap,.planta-app .lamina-wrap *{visibility:visible}
  .planta-app .lamina-wrap{position:fixed;left:0;top:0;width:100%!important;max-width:none;border:0;box-shadow:none;border-radius:0;background:#fff}
  .planta-app .impresion-cab{display:flex;gap:24px;align-items:baseline;font-family:var(--texto);font-size:14pt;margin-bottom:4mm}
  .planta-app .impresion-cab b{font-family:var(--titulos);font-size:20pt;flex:1}
  .planta-app .impresion-cab i{display:inline-block;width:60mm;border-bottom:1px solid #000}
  .planta-app .impresion-cab i.corta{width:30mm}
  .planta-app #escena{height:255mm;width:auto;margin:0 auto}
  .planta-app .impresion-banco:not(:empty){display:flex;flex-wrap:wrap;gap:3mm;justify-content:center;margin-top:3mm;font:700 12pt var(--texto)}
  .planta-app .impresion-banco:not(:empty) ~ * {display:none}
  .planta-app .lamina-wrap:has(.impresion-banco:not(:empty)) #escena{height:240mm}
  .planta-app .impresion-banco span{border:1.5px dashed #555;border-radius:3mm;padding:1mm 3mm}
  .planta-app .flotante,.planta-app #gota,.planta-app #particulas{display:none!important}
}

/* ---------- Solo en fichas.es (llevar-a-fichas-web.py lo añade detrás de motor/plantas.css) ---------- */
.contenedor > .planta-app{padding-block:8px 6px}
.pagina-plantas .migas{padding-top:16px}
.pagina-plantas .migas ol{margin-bottom:0}
/* Texto de debajo de la herramienta, a todo el ancho: la lámina con nombres va dentro de la primera sección y el texto la rodea */
.planta-texto{margin-top:34px}
.planta-texto .prosa{max-width:none}
.planta-texto .prosa::after{content:"";display:table;clear:both}
.planta-texto .prosa > h2{margin-top:1.3em;scroll-margin-top:90px}
.planta-texto .prosa > h2:first-child{margin-top:0}
.planta-texto h3{font-family:var(--titulos);font-weight:800;color:#23263B;line-height:1.15}
.planta-figura{float:right;width:min(34%,380px);margin:2px 0 18px 32px;background:#E4F6DC;border-radius:18px;overflow:hidden;border:3px solid #23263B;box-shadow:0 5px 0 #23263B}
.planta-figura img{display:block;width:100%;height:auto}
.planta-figura figcaption{padding:8px 12px;font-weight:800;font-size:.9rem;color:#23263B;background:#fff;border-top:3px solid #23263B}
.planta-tarjetas{clear:both;list-style:none;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.planta-tarjetas[data-n="5"]{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.planta-tarjetas li{--c:#2E8B3A;background:#F4F6FB;border-radius:18px;padding:14px 16px;border-top:6px solid var(--c)}
.planta-tarjetas li:nth-child(4n+2){--c:#11735F}
.planta-tarjetas li:nth-child(4n+3){--c:#E8603D}
.planta-tarjetas li:nth-child(4n+4){--c:#D9A400}
.planta-tarjetas h3{font-size:20px;margin:0 0 .3em}
.planta-tarjetas p{margin:0;font-size:16px;line-height:1.5}
.planta-pasos{clear:both;list-style:none;counter-reset:paso;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.planta-pasos li{counter-increment:paso;position:relative;background:#E4F6DC;border-radius:18px;padding:16px 16px 14px 64px;min-height:84px}
.planta-pasos li::before{content:counter(paso);position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:50%;background:#2E8B3A;color:#fff;display:grid;place-items:center;font:800 20px var(--titulos)}
.planta-pasos h3{font-size:20px;margin:0 0 .25em}
.planta-pasos p{margin:0;font-size:16px;line-height:1.5}
/* Láminas para descargar */
.planta-laminas{clear:both;list-style:none;margin:10px 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.planta-laminas li{display:flex;flex-direction:column;background:#fff;border:3px solid #23263B;border-radius:18px;overflow:hidden;box-shadow:0 4px 0 #23263B}
.planta-laminas img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border-bottom:3px solid #23263B;background:#E4F6DC}
.planta-laminas div{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.planta-laminas h3{font-size:19px;margin:0}
.planta-laminas p{margin:0;font-size:15px;line-height:1.45;flex:1}
.planta-laminas .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}
.planta-laminas .boton-pdf:hover{filter:brightness(1.05)}
.planta-faq{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0 10px}
.planta-faq > div{border:3px solid #E3E7F1;border-radius:18px;padding:14px 18px}
.planta-faq h3{font-size:19px;margin:0 0 .35em}
.planta-faq p{margin:0;font-size:16px;line-height:1.5}
@media (max-width:760px){
  .planta-figura{float:none;width:100%;max-width:560px;margin:0 auto 18px}
  .planta-faq{grid-template-columns:minmax(0,1fr)}
}
/* Al imprimir, solo la lámina: fuera la cabecera de la web, las migas, el texto, las fichas y los anuncios */
@media print{
  .pagina-plantas .cabecera,.pagina-plantas .pie,.pagina-plantas .migas,.pagina-plantas .saltar,
  .pagina-plantas .planta-texto,.pagina-plantas .seccion,.pagina-plantas .anuncio,.pagina-plantas ins,
  .pagina-plantas iframe{display:none!important}
  .pagina-plantas .contenedor{padding:0!important;max-width:none!important}
}
/* Portada /las-plantas/: la planta a la izquierda y los temas a la derecha */
.planta-app .portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.planta-app .portada .lamina-wrap{width:100%;max-width:480px;justify-self:center;display:block}
.planta-app .portada .lamina-wrap img{display:block;width:100%;height:auto;aspect-ratio:2/3}
.planta-app .temas-lista{display:grid;gap:12px}
.planta-app .tema{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;border:var(--borde);box-shadow:var(--sombra);border-radius:20px;padding:12px;background:var(--fondo);color:var(--tinta);text-decoration:none}
.planta-app a.tema:hover{background:var(--hoja-fondo)}
.planta-app .tema img{width:96px;height:96px;object-fit:cover;object-position:top;border-radius:14px;border:2px solid var(--tinta)}
.planta-app .tema h2{font-family:var(--titulos);font-weight:800;font-size:1.35rem;line-height:1.05}
.planta-app .tema p{margin-top:4px;font-weight:600;color:var(--tinta-2)}
.planta-app .tema .ir{display:inline-block;margin-top:6px;font-weight:800;color:var(--medio)}
.planta-app .tema.pronto{opacity:.65;box-shadow:none;border-style:dashed}
.planta-app .tema.pronto .ir{color:var(--tinta-2)}
.planta-app .marca-hoja{display:grid;place-items:center;width:96px;height:96px;border-radius:14px;border:2px solid var(--tinta);background:var(--hoja-fondo);font-size:44px}
.planta-app .intro-portada{font-weight:600;font-size:1.05rem}
@media (max-width:860px){.planta-app .portada{grid-template-columns:minmax(0,1fr)}.planta-app .portada .lamina-wrap{max-width:340px}}
/* En la web, la cabecera ocupa más que en el prototipo: la lámina mide lo que queda de pantalla con las pestañas arriba (se baja un poco) */
.pagina-plantas .planta-app .lamina-wrap{width:min(100%, calc((100svh - 110px) * 2 / 3))}
@media (max-width:860px){.pagina-plantas .planta-app .lamina-wrap{width:100%}}