/* Estilos propios del CMS: reveal-on-scroll (equivalente al fade-up de Webflow)
   e ilustraciones SVG. El resto del diseño lo aporta webflow.css. */

/* Rebote (spring) de las imágenes al aparecer. La imagen arranca oculta
   (inline, desde wf-effects.js) y entra DESPUÉS del deslizamiento del ítem;
   si rebota a la vez que el fade el efecto queda enmascarado y no se ve. */
@keyframes wfxBounce{
  0%{opacity:0;transform:scale(.4);}
  45%{opacity:1;transform:scale(1.14);}
  65%{transform:scale(.92);}
  82%{transform:scale(1.05);}
  100%{opacity:1;transform:scale(1);}
}
.wfx-bounce{animation:wfxBounce .85s cubic-bezier(.22,.9,.35,1) both;transform-origin:center;}

/* Reveal — arranca oculto y desplazado, sube al entrar en viewport */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].is-in{opacity:1;transform:translateY(0);}

/* Ilustración SVG dentro de la rejilla del hub: mismo hueco que las <img> */
.svg-illus{width:100%;height:auto;display:block;}
.svg-illus svg{width:100%;height:auto;display:block;}

/* ---- Recorrido de capítulos del hub: layout propio, fiel + responsive + N ítems ----
   Sustituye al grid de Webflow (que colocaba hijos por #w-node-<uuid> y rompía en móvil). */
.way-home-page{display:flex;flex-direction:column;align-items:center;width:100%;height:auto;position:relative;}
/* imágenes decorativas flotantes (menorá + tablas) que siguen al cursor */
.floater{position:absolute;z-index:40;pointer-events:none;will-change:transform;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));opacity:.92;}

.camino-wrap{position:relative;width:100%;}
.camino-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.camino-base,.camino-fill{fill:none;stroke-width:48;stroke-linecap:round;stroke-linejoin:round;}
.camino-base{stroke:rgba(255,255,255,.10);}          /* rastro tenue */
.camino-fill{stroke:#7d88e8;opacity:.95;}            /* periwinkle del original */
.grid-of-images-way{display:flex;flex-direction:column;gap:8vw;width:100%;max-width:1080px;margin:0 auto;padding:6vw 5vw 6vw;height:auto;position:relative;z-index:1;}
.grid-of-images-way>*{position:relative;z-index:1;}
@media (max-width:767px){.camino-base,.camino-fill{stroke-width:34;}}
.item-of-story-hp.hub-item{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;width:100%;text-decoration:none;position:relative;}
.item-of-story-hp.hub-item.is-right{direction:rtl;}
.item-of-story-hp.hub-item.is-right>*{direction:ltr;}
/* reset de posicionamiento: dejo de pelear con el grid/posiciones de Webflow en estos contenedores */
.home-main-div,.home-main-div.green,.grid-div-home-main-div,.way-home-page,.grid-of-images-way,.item-of-story-hp.hub-item{position:static;overflow:visible;float:none;}
.hub-item-illus img{width:100%;max-width:260px;height:auto;display:block;margin:0 auto;border-radius:14px;}
.hub-item-illus .illus-pending{display:inline-block;color:#eafaf7;opacity:.6;font-family:Lato,sans-serif;font-size:14px;border:2px dashed rgba(255,255,255,.4);border-radius:14px;padding:38px 26px;text-align:center;}
.hub-item-text{color:#fff;max-width:34ch;}
.hub-item-text .number-story-hp-div{position:relative;inset:auto;width:48px;height:48px;min-width:48px;font-size:20px;margin-bottom:14px;}
.hub-item-text .text-block-9{font-family:bree,sans-serif;font-weight:700;font-size:1.7vw;color:#fff;margin-bottom:.5vw;line-height:1.15;}
.hub-item-text>div:last-child{font-family:Lato,sans-serif;font-size:1.05vw;line-height:1.45;color:#eafaf7;}

/* liberar el grid por node-id y las alturas fijas en vw de Webflow (rompían el flujo) */
.home-main-div,.home-main-div.green,.home-main-div.fr.green{height:auto;min-height:0;overflow:visible;padding:4vw 0 6vw;}
.grid-div-home-main-div{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;margin:0 auto;height:auto;position:static;}
.text-div-home-page{text-align:center;max-width:900px;margin-bottom:5vw;}
.text-div-home-page .button-hompage-links{margin-top:2.5vw;position:relative;z-index:2;}
.way-home-page{margin-top:4vw;}
.div-block-11{display:flex;justify-content:center;align-items:flex-end;gap:1vw;flex-wrap:wrap;height:auto;margin:2vw 0;}
.div-block-11 .image-of-homepage{width:100%;max-width:460px;height:auto;border-radius:16px;}
.way-home-page{height:auto;min-height:0;width:100%;}

/* la línea/camino decorativa del original solo en escritorio */
@media (max-width:991px){.div-block-21{display:none;}}
@media (max-width:767px){
  .home-main-div,.home-main-div.green{min-height:0;padding-bottom:30px;}
  .div-block-11{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0;}
  .div-image-home-page{position:static;width:auto;}
  .div-image-home-page img{max-width:90px;height:auto;}
  .grid-div-home-main-div{width:100%;padding:16px;}
  .hero-title-home{font-size:34px;line-height:1.1;}
  .hero-title-home.small{font-size:22px;}
  .par-subtitile-home{font-size:15px;}
}
@media (min-width:768px){
  .hub-item-text .text-block-9{font-size:clamp(20px,1.7vw,30px);}
  .hub-item-text>div:last-child{font-size:clamp(14px,1.05vw,18px);}
}
@media (max-width:767px){
  .item-of-story-hp.hub-item,.item-of-story-hp.hub-item.is-right{grid-template-columns:1fr;direction:ltr;text-align:center;gap:16px;margin-bottom:10px;}
  .hub-item-text{max-width:none;margin:0 auto;}
  .hub-item-text .text-block-9{font-size:22px;}
  .hub-item-text>div:last-child{font-size:16px;}
  .hub-item-text .number-story-hp-div{margin:0 auto 10px;}
  .hub-item-illus img{max-width:190px;}
  .grid-of-images-way{gap:44px;padding:24px 20px 40px;}
}

/* Herramientas adicionales: dos columnas en escritorio, una en móvil */
.section-2,.section1{min-height:0;}
.section1{margin-top:0;}
/* liberar los contenedores de Webflow que estrechaban y descentraban las tarjetas */
.section1 .grid-home-page.techelet.yellow{display:block;width:100%;}
.section1 .title-home-page{text-align:center;}
.section1 .div-block-17,.section1 .div-block-18{display:block;width:100%;max-width:1100px;margin:0 auto;position:static;height:auto;}
.for-teacher-div{display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:start;width:100%;}
.item-div-for-teacer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%;max-width:600px;justify-self:center;text-decoration:none;color:#241f16;font-family:Lato,sans-serif;font-size:16px;line-height:1.6;}
.item-div-for-teacer .image-for-teacher{max-width:280px;width:100%;height:auto;}
.item-div-for-teacer .button-hompage-links{margin-top:8px;}
@media (max-width:767px){.for-teacher-div{grid-template-columns:1fr;gap:40px;}}

/* Hover "pop" (preset de Webflow): encoge rápido (outQuart 250ms) y vuelve con
   rebote elástico (outElastic ~1s). Valores extraídos del bundle IX2. */
@keyframes wfxPop{
  0%{transform:scale(1);}
  25%{transform:scale(.82);}
  55%{transform:scale(1.09);}
  72%{transform:scale(.96);}
  86%{transform:scale(1.03);}
  100%{transform:scale(1);}
}
.wfx-pop{animation:wfxPop .5s linear both;transform-origin:center;}

/* ---- Pulido de formato (9/09): botones sin montarse, espacios cómodos ---- */

/* Footer SIEMPRE banda blanca ordenada (en historias salía sobre azul) */
.footer{background:#fff;padding:22px 4vw;border-top:1px solid #e8e8e8;}
.div-block-20{display:flex;align-items:center;justify-content:center;gap:4vw;flex-wrap:wrap;}
.div-block-20 img{max-height:44px;width:auto;}

/* Historias: tarjetas centradas con ancho contenido, sin vacío gigante */
.hs-wrap{min-height:0 !important;padding-bottom:90px !important;}
.hs-grid{grid-template-columns:repeat(auto-fit,minmax(280px,400px));justify-content:center;}
.hs-card img{height:250px;object-position:center 38%;}

/* Relato: el pill de idiomas no debe montarse sobre las tarjetas */
.crumbs{z-index:60;}
.lang-button.fix{top:56px;right:14px;z-index:55;}

/* El relato ancla arriba (Webflow centraba en vertical y dejaba un vacío enorme) */
.grid-div-story-page{align-items:flex-start;}
@media (min-width:992px){.main-title-story{padding-top:80px;}}

/* Botones Class-E siempre con forma de píldora visible */
.class-e-button{border:1.5px solid currentColor;}

/* Class-E: respiración uniforme, botones en fila sin hueco raro */
.item-of-unit.class-e{padding:26px 30px;}
.item-of-unit.class-e .paragraph-2{margin-top:10px;margin-bottom:18px;font-size:16px;line-height:1.65;}
.div-block-26{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:0;}
.class-e-button{white-space:nowrap;}

/* Unidades en escritorio: que no arranquen pegadas al borde superior */
@media (min-width:992px){
  .list-of-unit{padding:80px 40px 40px 10px;align-items:flex-start;gap:34px;}
  .item-of-unit.unit-tile{width:400px;min-width:360px;flex:none;}
}

/* Imágenes verticales 848×1264: recortadas a un alto cómodo, no pantallas enteras */
.unit-card img{max-height:420px;object-fit:cover;object-position:center 20%;}
.unit-tile .div-image-unit img{max-height:280px;object-fit:cover;object-position:center 18%;}
.hub-item-illus img{max-height:340px;object-fit:cover;object-position:center 15%;border-radius:14px;}

/* Tarjetas: mismo lenguaje en todo el sitio (radio, sombra, hover con vida) */
.item-of-unit.unit-tile,.unit-card,.hs-card{border-radius:22px;box-shadow:0 2px 10px rgba(0,0,0,.10);transition:transform .22s ease,box-shadow .22s ease;}
.item-of-unit.unit-tile:hover,.hs-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.18);}
.unit-tile .link-block,.hs-card{cursor:pointer;}

/* Nav inferior del relato: tres accesos claros, sin montarse */
.relato-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:900px;margin:40px auto 30px;padding:0 20px;font-family:Lato,sans-serif;}
.relato-nav a{border:1.5px solid currentColor;border-radius:30px;padding:10px 22px;text-decoration:none;font-weight:700;white-space:nowrap;transition:transform .15s ease;}
.relato-nav a:hover{transform:translateY(-2px);}

/* Texto cómodo en general */
.hub-item-text>div:last-child{line-height:1.6;}
.par-subtitile-home{line-height:1.65;}
.text-block-6{line-height:1.5;}
.item-div-for-teacer{line-height:1.65;}

/* Página del CMS (editor) — estética libro crema, sobria */
.cms{max-width:960px;margin:0 auto;padding:40px 24px;font-family:"Libre Baskerville",Georgia,serif;color:#241f16;background:#f8f5ec;}
.cms h1,.cms h2{font-family:bree,"Lato",sans-serif;color:#107ea6;}
.cms a{color:#107ea6;}
.cms .card{background:#fff;border:1px solid #e6e0d2;border-radius:10px;padding:20px 24px;margin:16px 0;}
.cms label{display:block;font-size:.85rem;color:#6b6350;margin:12px 0 4px;font-family:"Lato",sans-serif;}
.cms input[type=text],.cms textarea,.cms select{width:100%;padding:10px 12px;border:1px solid #d8d1c0;border-radius:6px;font:inherit;background:#fffdf7;box-sizing:border-box;}
.cms textarea{min-height:90px;resize:vertical;}
.cms .btn{display:inline-block;background:#107ea6;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-family:"Lato",sans-serif;font-weight:700;cursor:pointer;text-decoration:none;}
.cms .btn.coral{background:#f24c3d;}
.cms .btn.ghost{background:transparent;color:#107ea6;border:1px solid #107ea6;}
.cms .chapter-row{display:grid;grid-template-columns:44px 1fr 1fr;gap:12px;align-items:start;border-top:1px dashed #e0d9c8;padding-top:14px;margin-top:14px;}
.cms .badge{width:36px;height:36px;border-radius:50%;background:#f24c3d;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:"Lato",sans-serif;}
.cms .story-list{list-style:none;padding:0;}
.cms .story-list li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #ece5d5;}
.cms .muted{color:#8a8271;font-size:.85rem;}

/* Títulos de tarjeta rectos (airco-std solo existe en cursiva y quedaba raro) */
.title-of-unit{font-family:bree,sans-serif;font-style:normal;}