/*
Theme Name: LGS Kids Landing
Theme URI: https://lgskidsplataforma.com
Author: Grupo JJ · LGS
Author URI: https://letsgospeak.cl
Description: Tema de la landing de LGS Kids (inglés en vivo para niños de 6 a 13 años). Portada estática de alta fidelidad; los textos que cambian seguido se editan en Apariencia › Personalizar › LGS Kids.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lgs-kids-landing
Tags: landing, one-page, education
*/

  :root {
    --bg:#fdfcff; --surface:#ffffff; --surface2:#f7f5ff;
    --ink:#191634; --muted:#6a6786; --line:#eceaf6;
    --azul:#1e88ef; --cian:#00aeef; --verde:#69ae2e; --ambar:#f5a800; --magenta:#ec008f; --purpura:#7b2fbe;
    --shadow:0 2px 6px rgba(40,20,90,.05), 0 18px 44px rgba(40,20,90,.09);
    --r:1.1rem;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#0e0f1f; --surface:#181932; --surface2:#1f2140; --ink:#f1effb; --muted:#a6a4c6; --line:#2a2c4c;
      --shadow:0 2px 6px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.4);
      --azul:#4aa8f7; --cian:#3cc6f5; --verde:#8ccf52; --ambar:#ffc23c; --magenta:#f5559f; --purpura:#a874e4; }
  }
  :root[data-theme="dark"]{ --bg:#0e0f1f; --surface:#181932; --surface2:#1f2140; --ink:#f1effb; --muted:#a6a4c6; --line:#2a2c4c;
    --shadow:0 2px 6px rgba(0,0,0,.3), 0 20px 50px rgba(0,0,0,.4);
    --azul:#4aa8f7; --cian:#3cc6f5; --verde:#8ccf52; --ambar:#ffc23c; --magenta:#f5559f; --purpura:#a874e4; }
  :root[data-theme="light"]{ --bg:#fdfcff; --surface:#ffffff; --surface2:#f7f5ff; --ink:#191634; --muted:#6a6786; --line:#eceaf6;
    --azul:#1e88ef; --cian:#00aeef; --verde:#69ae2e; --ambar:#f5a800; --magenta:#ec008f; --purpura:#7b2fbe; }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--bg); color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{letter-spacing:-.025em; text-wrap:balance; margin:0;}
  a{color:inherit;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 1.25rem;}
  .eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color:var(--purpura);}

  /* NAV */
  nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
    background:color-mix(in srgb,var(--bg) 82%, transparent); border-bottom:1px solid var(--line);}
  nav .row{display:flex; align-items:center; gap:1rem; height:4.8rem;}
  .brand{display:flex; align-items:center; gap:.55rem; font-weight:900; font-size:1.15rem; letter-spacing:-.03em;}
  .brand .mk{width:2.1rem; height:2.1rem; border-radius:.6rem; display:grid; place-items:center; color:#fff; font-size:.8rem; font-weight:900;
    background:conic-gradient(from 200deg,var(--azul),var(--purpura),var(--magenta),var(--ambar),var(--verde),var(--azul));}
  .brand b{color:var(--magenta);}
  .brand-logo{height:3.1rem; width:auto; display:block;}
  nav .links{display:flex; gap:1.4rem; margin-left:auto; font-size:.9rem; font-weight:600;}
  nav .links a{color:var(--muted); text-decoration:none;}
  nav .links a:hover{color:var(--ink);}
  .btn{display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-weight:800; cursor:pointer; text-decoration:none;
    padding:.7rem 1.25rem; border-radius:999px; border:0; font-size:.95rem; transition:transform .12s ease, box-shadow .12s ease;}
  .btn:focus-visible{outline:3px solid var(--azul); outline-offset:2px;}
  .btn-primary{background:linear-gradient(120deg,var(--azul),var(--purpura)); color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--purpura) 35%,transparent);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--azul);}
  .btn-app{position:relative; overflow:hidden; color:#fff;
    background:linear-gradient(120deg,var(--magenta),var(--purpura),var(--azul),var(--purpura)); background-size:220% 100%;
    box-shadow:0 6px 18px color-mix(in srgb,var(--magenta) 40%,transparent); animation:flow 4s ease infinite;}
  .btn-app:hover{transform:translateY(-2px) scale(1.03);}
  .btn-app::after{content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:shine 4s ease-in-out infinite;}
  @keyframes flow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
  @keyframes shine{0%,15%{left:-70%;}55%,100%{left:150%;}}
  .themebtn{margin-left:.4rem; background:var(--surface); border:1.5px solid var(--line); color:var(--ink); border-radius:999px; width:2.3rem; height:2.3rem; cursor:pointer; font-size:1rem;}
  .themebtn:focus-visible{outline:3px solid var(--azul); outline-offset:2px;}
  @media(max-width:820px){ nav .links{display:none;} }

  /* HERO */
  .hero{position:relative; overflow:hidden; padding:4.5rem 0 3.5rem;}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem; align-items:center;}
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:2rem;} }
  h1.title{font-size:clamp(2.5rem,6vw,4.1rem); line-height:1.02; font-weight:900;}
  h1.title .c1{color:var(--azul);} h1.title .c2{color:var(--magenta);}
  .lead{font-size:1.18rem; color:var(--muted); margin:1.1rem 0 1.7rem; max-width:34ch;}
  .cta-row{display:flex; gap:.8rem; flex-wrap:wrap;}
  .chips{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2rem;}
  .chip{background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:.5rem .95rem; font-size:.85rem; font-weight:700; box-shadow:var(--shadow); display:flex; align-items:center; gap:.45rem;}
  .chip .d{width:.6rem; height:.6rem; border-radius:50%;}

  /* Hero visual: tarjeta de progreso viva */
  .hero-card{background:var(--surface); border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem; box-shadow:var(--shadow); position:relative;}
  .hero-card h3{font-size:1rem; color:var(--muted); font-weight:700; margin-bottom:1rem;}
  .beadline{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem;}
  .bead{display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:1;}
  .bead .b{width:2.5rem; height:2.5rem; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:1.1rem; box-shadow:0 6px 14px rgba(0,0,0,.12);}
  .bead small{font-size:.65rem; font-weight:800; letter-spacing:.02em; color:var(--muted); text-transform:uppercase;}
  .barwrap{height:.7rem; border-radius:999px; background:var(--line); overflow:hidden;}
  .bar{height:100%; width:62%; border-radius:999px; background:linear-gradient(90deg,var(--verde),var(--cian),var(--ambar));}
  .hero-card .foot{display:flex; justify-content:space-between; margin-top:.8rem; font-size:.82rem; color:var(--muted); font-weight:600;}
  .float{position:absolute; font-weight:900; font-size:.85rem; padding:.35rem .7rem; border-radius:999px; color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.15); animation:bob 5s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-12px) rotate(3deg);}}
  .hero-right{display:flex; flex-direction:column; align-items:center;}
  .hero-logo{width:min(320px,76%); height:auto; margin:0 auto 1.4rem; filter:drop-shadow(0 12px 22px rgba(40,20,90,.18)); animation:bob 6s ease-in-out infinite;}

  /* SECTIONS */
  section{padding:4rem 0;}
  .shead{text-align:center; max-width:38rem; margin:0 auto 2.4rem;}
  .shead h2{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; margin:.4rem 0 .6rem;}
  .shead p{color:var(--muted); font-size:1.05rem;}

  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
  @media(max-width:860px){ .grid3{grid-template-columns:1fr;} }
  .feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; border-top:4px solid var(--c);}
  .feat:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(40,20,90,.14);}
  .feat .ic{width:2.6rem; height:2.6rem; border-radius:.7rem; display:grid; place-items:center; margin-bottom:.8rem; background:color-mix(in srgb,var(--c) 15%,transparent); color:var(--c); font-weight:900; font-size:1.2rem;}
  .feat h3{font-size:1.1rem; margin-bottom:.35rem;}
  .feat p{color:var(--muted); font-size:.92rem; margin:0;}

  /* Level journey */
  .journey{background:var(--surface2);}
  .path{display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; margin-top:1rem; position:relative;}
  @media(max-width:820px){ .path{grid-template-columns:1fr 1fr;} }
  .node{background:var(--surface); border:1px solid var(--line); border-radius:1rem; padding:1.2rem 1rem; text-align:center; box-shadow:var(--shadow); position:relative;
    opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
  .node.in{opacity:1; transform:none;}
  .node .medal{width:3.4rem; height:3.4rem; margin:0 auto .7rem; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; color:#fff; font-weight:900;
    box-shadow:0 8px 18px rgba(0,0,0,.16); position:relative;}
  .node .medal::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:3px solid var(--c); opacity:.35;}
  .node h3{font-size:1.05rem;}
  .node small{color:var(--muted); font-size:.8rem; display:block; margin-top:.2rem;}
  .node .lv{position:absolute; top:.7rem; right:.8rem; font-size:.68rem; font-weight:900; color:var(--muted);}
  .diploma .medal{background:linear-gradient(135deg,var(--ambar),var(--magenta));}
  .journey .note{text-align:center; color:var(--muted); font-size:.92rem; margin-top:1.6rem; max-width:44rem; margin-inline:auto;}
  .journey .note b{color:var(--ink);}

  /* How it works */
  .how{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;}
  @media(max-width:860px){ .how{grid-template-columns:1fr;} }
  .steps{display:flex; flex-direction:column; gap:.9rem;}
  .step{display:flex; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; box-shadow:var(--shadow);}
  .step .n{width:2.2rem; height:2.2rem; flex-shrink:0; border-radius:.6rem; display:grid; place-items:center; font-weight:900; color:#fff; background:var(--c);}
  .step h3{font-size:1.02rem; margin-bottom:.15rem;}
  .step p{color:var(--muted); font-size:.9rem; margin:0;}
  .weekcard{background:var(--surface); border:1px solid var(--line); border-radius:1.3rem; padding:1.6rem; box-shadow:var(--shadow);}
  .weekcard h3{margin-bottom:1rem;}
  .wk{display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px dashed var(--line);}
  .wk:last-child{border-bottom:0;}
  .wk .tag{margin-left:auto; font-size:.72rem; font-weight:800; padding:.2rem .6rem; border-radius:999px;}

  /* audiences */
  .aud{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
  @media(max-width:760px){ .aud{grid-template-columns:1fr;} }
  .audc{border-radius:1.3rem; padding:1.8rem; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow);}
  .audc.j{background:linear-gradient(135deg,var(--verde),var(--cian));}
  .audc.y{background:linear-gradient(135deg,var(--azul),var(--purpura));}
  .audc .age{font-size:2.6rem; font-weight:900; letter-spacing:-.03em;}
  .audc h3{font-size:1.4rem; margin:.2rem 0 .5rem;}
  .audc p{opacity:.92; font-size:.95rem; margin:0;}

  /* trust + cta */
  .trust{text-align:center; padding:2.5rem 0;}
  .trust p{color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800;}
  .trust .lg{font-size:1.35rem; font-weight:900; margin-top:.4rem;}
  .cta{margin:0 0 4rem; }
  .ctabox{background:linear-gradient(130deg,var(--purpura),var(--magenta)); border-radius:1.6rem; padding:3rem 2rem; text-align:center; color:#fff; box-shadow:var(--shadow); position:relative; overflow:hidden;}
  .ctabox h2{font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900;}
  .ctabox p{opacity:.95; max-width:34rem; margin:.7rem auto 1.5rem;}
  .ctabox .btn-primary{background:#fff; color:var(--purpura);}
  .ctabox .phone{margin-top:1.2rem; font-size:1.1rem; font-weight:800;}
  .ctabox .loc{opacity:.85; font-size:.9rem; margin-top:.2rem;}

  footer{border-top:1px solid var(--line); padding:2rem 0; color:var(--muted); font-size:.85rem; text-align:center;}
  @media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} .node{opacity:1; transform:none;} }

  /* ── Personajes ─────────────────────────────────────────────────────────
     Los cuatro van recortados (PNG/WebP con transparencia) y de CUERPO ENTERO,
     sin marco. Se alinean por ALTURA, no por ancho: así Emma (figura alta y
     estrecha) y Simba (figura ancha y baja) se ven del mismo tamaño.         */
  .pjband{display:flex; align-items:flex-end; justify-content:center; gap:clamp(1rem,3vw,2.4rem);
          flex-wrap:wrap; margin:2.8rem 0 2.4rem; position:relative; z-index:2;}
  .pjband .pjtxt{flex:1 1 17rem; max-width:26rem; min-width:0; padding-bottom:1.4rem;}
  @media(max-width:760px){ .pjband{flex-direction:column; align-items:center; text-align:center;} .pjband .pjtxt{padding-bottom:0;} }

  .pj{position:relative; z-index:3; flex:0 0 auto; margin:0; line-height:0;}
  .pj img{display:block; height:clamp(10rem,24vw,16.5rem); width:auto; max-width:min(48vw,17rem); object-fit:contain;
          filter:drop-shadow(0 16px 18px rgba(40,20,90,.24));
          animation:pjflota 5.4s ease-in-out infinite;}
  .pj .nombre{position:absolute; left:50%; bottom:-.75rem; transform:translateX(-50%); line-height:1;
              background:var(--c,var(--azul)); color:#fff; font-weight:900; font-size:.78rem;
              padding:.34rem .85rem; border-radius:999px; white-space:nowrap; box-shadow:0 4px 12px rgba(40,20,90,.28);}
  .pj.libre img{animation-duration:6.8s;}

  .pjbubble{position:relative; display:inline-block; background:var(--surface); border:1px solid var(--line);
            border-radius:1.2rem; padding:1.05rem 1.3rem; box-shadow:var(--shadow);
            font-weight:900; font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.3;}
  .pjbubble small{display:block; font-weight:600; color:var(--muted); font-size:.92rem; margin-top:.4rem; line-height:1.5;}
  .pjbubble::before,.pjbubble::after{content:""; position:absolute; top:2.1rem; width:0; height:0; border:.65rem solid transparent;}
  .pjbubble.izq::before{right:100%; border-right-color:var(--line);}
  .pjbubble.izq::after{right:100%; margin-right:-1px; border-right-color:var(--surface);}
  .pjbubble.der::before{left:100%; border-left-color:var(--line);}
  .pjbubble.der::after{left:100%; margin-left:-1px; border-left-color:var(--surface);}
  @media(max-width:760px){
    .pjbubble::before,.pjbubble::after{top:auto; bottom:100%; left:50%; right:auto; margin:0; transform:translateX(-50%); border-color:transparent;}
    .pjbubble::before{border-bottom-color:var(--line);}
    .pjbubble::after{margin-bottom:-1px; border-bottom-color:var(--surface);}
  }

  @keyframes pjflota{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}