/* css/islas-patron.css — ISLAS-PATRÓN del Mundo 1 (screens/islas-patron.js, 2026-10-06).
   Ladrillos como en el vídeo del método: VERDE = carta del niño (menta, palabra verde de marca
   subrayada + miniatura de la carta) · GRIS = pegamento gramatical (lila claro). */
main>.screen:has(.ip-ficha),main>.screen:has(.ip-ses){max-width:880px}

/* ── rejilla de islas ── */
.ip-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.ip-isla{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:200px;padding:14px 12px 16px;
  border:2px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);cursor:pointer;text-align:center;
  transition:transform .15s,border-color .15s}
.ip-isla:hover:not(.cerrada){transform:translateY(-3px);border-color:var(--purple-light)}
.ip-isla b{color:var(--deep);font-size:1.05rem}
.ip-isla.tres{border-color:#f0b429;box-shadow:0 0 0 2px #f0b429,0 8px 20px rgba(240,180,41,.25)}
.ip-isla.cerrada{cursor:default;filter:grayscale(.75);opacity:.65;box-shadow:none}
.ip-isla-art{display:block;width:110px;height:80px}
.ip-isla-art svg{width:100%;height:100%}
.ip-molde{font-size:.82rem;font-weight:700;color:var(--purple)}
.ip-molde.grande{font-size:clamp(1.05rem,3.5vw,1.3rem);font-weight:800}
.ip-est{font-size:1.2rem;letter-spacing:2px;color:#CFC8EC}
.ip-est i{font-style:normal}.ip-est i.on{color:#F5B400}
.ip-cerrada{font-size:.76rem;font-weight:700;color:var(--text2)}

/* ── ladrillos ── */
.ip-frase{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.ip-lad{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:6px 16px;border-radius:99px;
  font-size:clamp(1.15rem,3.8vw,1.5rem);font-weight:800;line-height:1.1;cursor:pointer;border:2px solid transparent}
.ip-lad.gris{background:#EEEAFB;color:var(--deep)}
.ip-lad.verde{background:#E7F7EE;border-color:#BCE8CD;color:#08A256;padding-left:6px}
.ip-lad.verde .ip-pal{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.ip-punt{margin-left:1px;color:var(--deep);text-decoration:none}
.ip-lad.verde:hover{border-color:#08A256}
.ip-lad.hueco{background:#fff;border:2px dashed #08A256;color:#08A256;padding-left:6px}
.ip-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;transition:opacity .3s;
  /* CARGANDO: brillo suave (skeleton) hasta que llega la imagen; el <img> sin src no pinta nada */
  background:linear-gradient(100deg,#E3F3EA 30%,#F6FCF8 50%,#E3F3EA 70%) 0 0/300% 100%;animation:ipCarga 1.2s linear infinite}
.ip-img.ready{background:#fff;animation:none}
@keyframes ipCarga{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){ .ip-img{animation:none} }
.ip-img.vacia{opacity:1;border:2px dashed #BCE8CD;background:#fff;animation:none}
.ip-img.grande{width:clamp(110px,28vw,170px);height:clamp(110px,28vw,170px);border-radius:24px;box-shadow:var(--shadow)}
.ip-frase.completa .ip-lad{animation:ipPop .35s ease}
@keyframes ipPop{from{transform:scale(.85)}to{transform:scale(1)}}

/* ── ficha de la isla ── */
.ip-ficha{display:flex;flex-direction:column;gap:16px;padding-bottom:24px}
.ip-cab{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:24px;padding:16px 20px;box-shadow:var(--shadow)}
.ip-cab h1{color:var(--deep);font-size:clamp(1.3rem,4vw,1.7rem)}
.ip-acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ip-acciones .btn{width:auto;min-width:220px;min-height:52px}
.ip-lista{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;padding:0;margin:0}
.ip-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:18px;background:var(--surface);
  box-shadow:var(--shadow);cursor:pointer}
.ip-item .ip-lad{font-size:1.05rem;min-height:44px}
.ip-item .ip-img{width:32px;height:32px}
.ip-item small,.ip-es{color:var(--text2);font-weight:700;font-size:.92rem;text-align:center}

/* ── sesión ── */
.ip-ses{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}
.ip-card{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 18px;background:var(--surface);border-radius:26px;box-shadow:var(--shadow);text-align:center}
.ip-botones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ip-botones .btn{width:auto;min-width:180px;min-height:52px}
/* zona del altavoz: altura fija → al salir la frase en su sitio, nada se desplaza */
.ip-oir-zona{min-height:128px;width:100%;display:flex;align-items:center;justify-content:center}
.ip-oir-zona .ip-frase{animation:ipPop .3s ease}
/* altavoz OFICIAL: círculo morado de marca + icono de sonido del juego (SVG_SOUND) */
.ip-oir{position:relative;width:104px;height:104px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(145deg,var(--purple-light),var(--purple));box-shadow:0 6px 0 var(--purple-hover),0 12px 24px rgba(124,58,237,.3);
  display:grid;place-items:center;transition:transform .12s}
.ip-oir svg{width:46px;height:46px}
.ip-oir:active{transform:translateY(3px);box-shadow:0 3px 0 var(--purple-hover),0 8px 18px rgba(124,58,237,.3)}
.ip-oir:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.ip-oir.sonando::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--purple-light);animation:ipOnda 1s ease-out infinite}
@keyframes ipOnda{from{transform:scale(.9);opacity:.9}to{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){ .ip-oir.sonando::after{animation:none} }
.ip-ops{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;max-width:600px}
.ip-ops .ip-op{flex:0 1 180px;min-width:0}
.ip-op{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:3px solid var(--border);border-radius:20px;background:#fff;
  cursor:pointer;font-weight:800;color:var(--deep);font-size:1rem;transition:border-color .15s,transform .12s}
.ip-op .ip-img{width:100%;height:auto;aspect-ratio:1;border-radius:14px}
.ip-op:hover:not(:disabled){border-color:var(--purple-light)}
.ip-op:active{transform:scale(.96)}
.ip-op.ok{border-color:#08A256;background:#E7F7EE}
.ip-op.mal{border-color:#E5484D;background:#FDECEC;opacity:.7}
.ip-cartas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ip-escalera{display:flex;flex-direction:column;gap:10px;width:100%}
.ip-peldano{opacity:.55}
.ip-peldano.nuevo{opacity:1;animation:ipPop .4s ease}
.ip-fin .in-stars.grande{font-size:2.6rem}
@media (max-width:520px){ .ip-ops{gap:8px} .ip-ops .ip-op{flex-basis:calc(33.333% - 6px)} .ip-lista{grid-template-columns:1fr} .ip-acciones .btn{min-width:0;width:100%} }
@media (prefers-reduced-motion:reduce){ .ip-frase.completa .ip-lad,.ip-peldano.nuevo{animation:none} }
.ip-premio{color:var(--deep);font-weight:700;text-align:center;max-width:42ch}
/* explicación de la sección, ARRIBA (Dave 2026-10-06) */
.ip-explica{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:20px;
  background:linear-gradient(135deg,#E7F7EE,#F3EEFF);border:2px solid #D7F0E1}
.ip-explica-ico{font-size:2rem;line-height:1;flex:0 0 auto}
.ip-explica p{margin:0;color:var(--deep);font-size:.98rem;line-height:1.45}
.ip-explica b{color:#08A256}
/* tarjetita al pasar el ratón por un ladrillo verde (solo ratón) */
.ip-lad.verde{padding-left:16px}
.ip-tip{position:fixed;z-index:80;width:190px;transform:translateY(-100%);display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 12px 12px;border-radius:18px;background:#fff;border:2px solid #BCE8CD;box-shadow:0 12px 30px rgba(46,16,101,.18);
  pointer-events:none;animation:ipTip .15s ease}
.ip-tip img{width:120px;height:120px;object-fit:contain;border-radius:12px;
  background:linear-gradient(100deg,#E3F3EA 30%,#F6FCF8 50%,#E3F3EA 70%) 0 0/300% 100%;animation:ipCarga 1.2s linear infinite}
.ip-tip img.ready{background:none;animation:none}
.ip-tip b{color:#08A256;font-size:1.15rem}
.ip-tip span{color:var(--deep);font-weight:800}
.ip-tip small{color:var(--text2);font-size:.72rem;font-weight:700;text-align:center}
@keyframes ipTip{from{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}
.ip-es-v{color:#08A256;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ═══ escenas de la HISTORIA ANIMADA de las Islas (screens/islas-patron.js historiaIslas) ═══ */
.ih-mar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,16px);
  background:linear-gradient(180deg,#DDF4FF 0%,#BFE7FA 55%,#8FD3F0 100%)}
.ih-isla{width:clamp(80px,22vw,120px);animation:ciPop .6s cubic-bezier(.3,1.6,.5,1) both,ihFlota 3s ease-in-out infinite;
  animation-delay:calc(var(--i) * .25s),calc(var(--i) * .5s + .6s)}
.ih-isla svg{width:100%;height:auto}
.ih-isla.grande{width:clamp(130px,34vw,180px);animation:ihFlota 3s ease-in-out infinite}
.ih-una{display:flex;flex-direction:column;align-items:center;gap:6px}
.ih-bocadillo{padding:8px 18px;border-radius:18px;background:#fff;color:var(--deep);font-weight:900;font-size:1.25rem;
  box-shadow:0 6px 16px rgba(30,27,75,.15);animation:ciPop .5s .5s cubic-bezier(.3,1.6,.5,1) both}
.ih-frase .ih-lad{animation:ciPop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * .55s + .2s)}
.ih-oir{position:relative;display:flex;align-items:center;gap:22px}
.ih-check{flex:0 0 auto;aspect-ratio:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#08A256;color:#fff;font-size:2rem;font-weight:900;
  animation:ciPop .45s 1.6s cubic-bezier(.3,1.6,.5,1) both}
.ih-mapa{display:flex;align-items:center;gap:6px}
.ih-nodo{flex:0 0 auto;aspect-ratio:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#2FB574;box-shadow:0 5px 0 #1F7A4E;
  animation:ciPop .4s both;animation-delay:calc(var(--i) * .4s)}
.ih-nodo img{width:34px;height:34px;filter:brightness(0) invert(1)}
.ih-nodo.es-isla{width:78px;height:78px;background:var(--purple);box-shadow:0 6px 0 var(--purple-hover),0 0 0 8px rgba(124,58,237,.18);
  animation:ciPop .4s .8s both,ciLatido 1.6s 1.3s ease-in-out infinite}
.ih-camino{width:28px;height:6px;border-radius:99px;background:#D9D3F2}
@keyframes ihFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){ .ih-isla,.ih-bocadillo,.ih-frase .ih-lad,.ih-check,.ih-nodo{animation:none!important} }

/* ── DESCUBRIR ISLAS (2026-10-07): niebla, próxima isla, sello NUEVA, descubrimiento ── */
/* bajo la niebla: silueta suave entre nubes blancas que se mecen; nada de candados */
.ip-isla.niebla{cursor:pointer;background:linear-gradient(180deg,#F4F1FF,#fff);border-style:dashed;border-color:#D9D2F5;box-shadow:none}
.ip-isla.niebla .ip-isla-art,.ip-prox-art{position:relative}
.ip-isla.niebla .ip-isla-art svg:not(.ip-nubes){filter:brightness(0) invert(.7) sepia(.4) hue-rotate(215deg) saturate(1.6);opacity:.8}
.ip-isla.niebla .ip-nubes{top:22%;height:85%}
.ip-isla.niebla b{color:#8B84A8}
.ip-nubes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(46,16,101,.1))}
.ip-nubes ellipse{opacity:.92;animation:ipNube 6s ease-in-out infinite alternate}
.ip-nubes .n2{animation-duration:7.5s;animation-delay:-2s}.ip-nubes .n3{animation-duration:5.5s;animation-delay:-1s}
.ip-nubes .n4{animation-duration:8s;animation-delay:-3s}
@keyframes ipNube{from{transform:translateX(-4px)}to{transform:translateX(5px)}}
.ip-isla.tiembla{animation:ipTiembla .45s}
@keyframes ipTiembla{20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* sello NUEVA (se va al entrar en la isla) */
.ip-isla.nueva{border-color:#10B981;box-shadow:0 0 0 2px #A7F3D0,0 10px 24px rgba(16,185,129,.22)}
.ip-sello{position:absolute;top:10px;right:-6px;padding:4px 10px;border-radius:8px 8px 8px 2px;background:#10B981;color:#fff;
  font-size:.72rem;font-weight:900;letter-spacing:.06em;box-shadow:0 3px 0 #047857;transform:rotate(6deg);animation:ipSello 1.6s ease-in-out infinite}
@keyframes ipSello{50%{transform:rotate(6deg) scale(1.08)}}

/* la PRÓXIMA isla: niebla a medio abrir (nubes más transparentes), su nombre y el camino que le falta */
.ip-prox{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 20px;margin-bottom:18px;border-radius:24px;
  background:radial-gradient(120% 140% at 0% 0%,#FFF7DB 0%,#F3EEFF 55%,#fff 100%);border:2px solid #E6DEFF;box-shadow:0 10px 28px rgba(46,16,101,.1)}
.ip-prox-art{width:140px;height:102px;animation:ipFlota 3.2s ease-in-out infinite}
.ip-prox-art svg:not(.ip-nubes){width:100%;height:100%}
.ip-prox .ip-nubes{top:40%;height:70%}
.ip-prox .ip-nubes ellipse{opacity:.5}
@keyframes ipFlota{50%{transform:translateY(-5px)}}
.ip-prox-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.ip-prox-txt small{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
.ip-prox-txt>b{font-size:clamp(1.15rem,3.4vw,1.45rem);color:var(--deep)}
.ip-prox-falta{margin:0;font-size:.95rem;color:var(--deep)}
.ip-prox-falta b{color:#08A256}
.ip-vamos{min-height:52px;padding:0 26px;font-size:1.05rem}
/* los nodos reales del mapa que le faltan (Duolingo): hechos en verde con ✓, el que toca latiendo */
.ip-pasos{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.ip-paso{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#EEECF9;box-shadow:0 3px 0 #DEDAF0;flex:0 0 auto}
.ip-paso img{width:24px;height:24px;object-fit:contain;filter:grayscale(1) opacity(.55)}
.ip-paso.hecho{background:linear-gradient(180deg,#10B981,#059669);box-shadow:0 3px 0 #047857}
.ip-paso.hecho img{filter:brightness(0) invert(1)}
.ip-paso.hecho i{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:#fff;color:#059669;
  font-style:normal;font-size:.7rem;font-weight:900;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ip-paso.ahora{background:linear-gradient(180deg,var(--purple-light),var(--purple));box-shadow:0 3px 0 var(--purple-hover);animation:ipLate 1.4s ease-in-out infinite}
.ip-paso.ahora img{filter:brightness(0) invert(1)}
.ip-paso.es-isla{width:46px;height:46px;background:linear-gradient(180deg,#FDE68A,#F59E0B);box-shadow:0 3px 0 #B45309}
.ip-paso.es-isla img{filter:none}
.ip-paso-hilo{width:16px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,#CFC6EE 0 5px,transparent 5px 9px)}
@keyframes ipLate{50%{transform:scale(1.1)}}
/* isla lejana: barra que se llena desde la isla anterior */
.ip-barra{position:relative;height:16px;border-radius:99px;background:#EEECF9;margin-right:18px}
.ip-barra i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#A78BFA,#7C3AED)}
.ip-barra span{position:absolute;right:-18px;top:50%;transform:translateY(-50%);font-size:1.4rem}
@media (max-width:620px){
  .ip-prox{grid-template-columns:auto 1fr;padding:14px}
  .ip-prox-art{width:100px;height:74px}
  .ip-vamos{grid-column:1/-1;width:100%}
}

/* «¡Nueva isla descubierta!» (historia de una escena): la niebla se abre y la isla aparece */
.ip-descubre{display:flex;flex-direction:column;align-items:center;gap:8px}
.ip-isla-art.grande{position:relative;width:min(220px,56vw);height:auto;aspect-ratio:110/80}
.ip-isla-art.grande svg:not(.ip-nubes){animation:ipAparece 1s .5s both cubic-bezier(.3,1.5,.5,1)}
.ip-descubre .ip-nubes .n1,.ip-descubre .ip-nubes .n4{animation:ipAbreIzq 1.4s .2s both ease-in}
.ip-descubre .ip-nubes .n2,.ip-descubre .ip-nubes .n3{animation:ipAbreDer 1.4s .2s both ease-in}
@keyframes ipAparece{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ipAbreIzq{to{transform:translateX(-90px);opacity:0}}
@keyframes ipAbreDer{to{transform:translateX(90px);opacity:0}}
.ip-descubre-tit{font-size:clamp(1.3rem,4vw,1.7rem);font-weight:900;color:var(--deep);animation:ciTxt .5s 1.2s both}
.ip-descubre .ip-molde{animation:ciTxt .5s 1.5s both}
@media (prefers-reduced-motion:reduce){
  .ip-nubes ellipse,.ip-prox-art,.ip-paso.ahora,.ip-sello,.ip-isla.tiembla{animation:none}
  .ip-descubre .ip-nubes ellipse{animation:none;opacity:0}
  .ip-isla-art.grande svg:not(.ip-nubes),.ip-descubre-tit,.ip-descubre .ip-molde{animation:none}
}
/* al tocar una isla con niebla: aparece «Ir al mapa» (la tarjeta entera lleva al mapa) */
.ip-ir{display:none;min-height:44px;margin-top:4px;padding:0 18px;font-size:.95rem}
.ip-isla.niebla.info .ip-ir{display:inline-flex;align-items:center;animation:ciTxt .35s both}
.ip-isla.niebla.info .ip-cerrada{display:none}