/* ================================================================
   Experiencia 2026 — sistema visual compartido Kiko / theAkdemy
   Capa progresiva: moderniza sin cambiar contratos PHP ni flujos.
   ================================================================ */

:root{
  --ui-tinta:#18324a;--ui-suave:#587087;--ui-fondo:#f4fbf7;
  --ui-superficie:rgba(255,255,255,.9);--ui-borde:rgba(24,50,74,.09);
  --ui-verde:#18a875;--ui-verde-2:#087f5b;--ui-cielo:#2f80ed;
  --ui-sol:#ffbf3f;--ui-coral:#ff6b6b;--ui-violeta:#7c5cff;
  --ui-radio:26px;--ui-radio-sm:18px;
  --ui-sombra:0 14px 40px rgba(27,79,61,.12),0 2px 8px rgba(27,79,61,.06);
  --ui-sombra-alta:0 22px 56px rgba(27,79,61,.18),0 4px 12px rgba(27,79,61,.08);
  --ui-foco:0 0 0 4px #fff,0 0 0 8px rgba(47,128,237,.55);
}

body{
  background-color:var(--ui-fondo);
  background-image:radial-gradient(circle at 8% 3%,rgba(255,191,63,.22),transparent 24rem),
    radial-gradient(circle at 92% 12%,rgba(47,128,237,.15),transparent 28rem),
    linear-gradient(155deg,#f5fff8 0%,#eef8ff 55%,#f7f2ff 100%);
  background-attachment:fixed;font-family:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;
  color:var(--ui-tinta);letter-spacing:.005em;
}
.wrap{max-width:1280px;padding:clamp(10px,2vw,24px)}
h1{font-size:clamp(1.75rem,3.5vw,2.8rem);line-height:1.08;letter-spacing:-.035em}
h2{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.15;letter-spacing:-.025em}
h3{font-size:clamp(1.08rem,1.8vw,1.35rem)}
p,li{line-height:1.7}
.card,.panel,.topbar{border:1px solid var(--ui-borde);box-shadow:var(--ui-sombra)}
.card{border-radius:var(--ui-radio);padding:clamp(18px,3vw,30px);margin-bottom:20px}
.panel{border-radius:var(--ui-radio);padding:20px}
.topbar{position:relative;border-radius:22px;padding:12px clamp(14px,2vw,24px);isolation:isolate}
.topbar:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,.72),transparent 48%);z-index:-1}
.marca{font-size:clamp(1.15rem,2.2vw,1.45rem);letter-spacing:-.025em}
.topnav a,.topnav button,.btn,.btn-mini,nav button,.tabs button{min-height:48px}
.btn{border-radius:18px;padding:13px 23px;box-shadow:0 5px 0 var(--ui-verde-2),0 10px 22px rgba(24,168,117,.2)}
.btn:hover{transform:translateY(-2px) scale(1.015);filter:saturate(1.08)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ui-foco)}
.testGrid{gap:18px}.testCard{min-height:164px;border-radius:24px;padding:22px;box-shadow:var(--ui-sombra)}
.testCard:hover,.testCard:focus-visible{transform:translateY(-6px);box-shadow:var(--ui-sombra-alta)}
.lecBanner{border-radius:24px;padding:15px 20px;box-shadow:0 12px 30px rgba(30,64,175,.18)}
.lecIlus img{max-height:420px;border-radius:24px;box-shadow:var(--ui-sombra-alta)}
.lecPager{gap:14px}.lecPager .btn{min-height:52px}
.optGrid{gap:14px}.optGrid button{min-height:58px;border-radius:20px}

/* La sección narrable es la superficie. Su sello de audio es una onda propia:
   tres pulsos asimétricos y dos chispas, no un Play genérico. */
.lectorSuperficie{position:relative;cursor:pointer;border-radius:20px;padding:16px 78px 16px 18px!important;
  margin-block:10px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease;
  border:2px solid transparent;min-height:58px;clear:both}
.lectorSuperficie:after{content:"";position:absolute;right:14px;top:50%;width:48px;height:48px;
  transform:translateY(-50%);border-radius:18px 22px 18px 22px;
  background-color:#3677e8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M15 27v-6'/%3E%3Cpath d='M23 33V15'/%3E%3Cpath d='M31 29V19'/%3E%3C/g%3E%3Cg fill='%23bff8ff'%3E%3Cpath d='m37 10 1.2 2.8L41 14l-2.8 1.2L37 18l-1.2-2.8L33 14l2.8-1.2z'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(145deg,#43c8b6,#5968f2 62%,#934de5);
  background-size:100% 100%;box-shadow:0 10px 24px rgba(69,94,224,.3),inset 0 1px 1px rgba(255,255,255,.45);
  transition:transform .2s ease,box-shadow .2s ease,border-radius .2s ease}
.lectorSuperficie:hover{background:rgba(230,244,255,.65);border-color:rgba(47,128,237,.18);transform:translateY(-1px)}
.lectorSuperficie:focus-visible{outline:none;box-shadow:var(--ui-foco);background:#edf7ff}
.lectorSuperficie.reproduciendo{background:#fff7db;border-color:var(--ui-sol);box-shadow:0 12px 30px rgba(255,191,63,.18)}
.lectorSuperficie:hover:after{transform:translateY(-50%) rotate(-3deg) scale(1.08);box-shadow:0 14px 30px rgba(69,94,224,.4)}
.lectorSuperficie.reproduciendo:after{border-radius:50%;
  background-color:#ffae2d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='17' y='17' width='14' height='14' rx='4' fill='%23502f00'/%3E%3Cg fill='%23fff4c5'%3E%3Ccircle cx='24' cy='9' r='2'/%3E%3Ccircle cx='39' cy='24' r='2'/%3E%3Ccircle cx='24' cy='39' r='2'/%3E%3Ccircle cx='9' cy='24' r='2'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(145deg,#ffe07a,#ffab2e 58%,#ff6b57);
  animation:lectorPulso 1.35s ease-in-out infinite;box-shadow:0 0 0 7px rgba(255,191,63,.18),0 12px 28px rgba(255,129,57,.34)}
@keyframes lectorPulso{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.08);box-shadow:0 0 0 11px rgba(255,191,63,.08),0 15px 32px rgba(255,129,57,.4)}}
.lectorSuperficie.sinAudio{cursor:default;padding-right:18px!important}
.lectorSuperficie.sinAudio:after{display:none}
.lectorBloqueAudioEnvuelto{display:block}.lectorInlineBtn{display:none!important}
.lectorRuta{border:1px solid rgba(47,128,237,.18);box-shadow:0 10px 26px rgba(47,128,237,.1)}

/* Kiko: táctil, luminoso y con formas amistosas, sin aspecto de app antigua. */
body:not(.teen) .card.lesson{border:0;overflow:visible;background:rgba(255,255,255,.94)}
body:not(.teen) .card.lesson:before{content:"";display:block;width:64px;height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--ui-verde),var(--ui-cielo),var(--ui-violeta));margin:-8px 0 18px}
body:not(.teen) nav button.active,body:not(.teen) .tabs button.active{background:linear-gradient(120deg,var(--ui-verde),#23c483)}
body:not(.teen) .tipBox{border:0;border-left:7px solid var(--ui-violeta);background:#f4f1ff;border-radius:20px}
body:not(.teen) .demoBox{background:#edf7ff;border:1px solid rgba(47,128,237,.12);border-radius:22px}

/* theAkdemy: editorial, premium y energético; expresivo sin verse infantil. */
body.teen{--radio:18px;--vidrio:rgba(255,255,255,.76);--vidrio-borde:rgba(255,255,255,.82);
  --sombra:0 18px 55px rgba(49,46,129,.12);--grad:linear-gradient(120deg,#5b5cf0,#8b5cf6 52%,#0891b2)}
body.teen .card,body.teen .panel,body.teen .topbar{border-radius:22px}
body.teen .card{box-shadow:var(--sombra);overflow:clip}
body.teen .card.lesson{border-left:0;position:relative}
body.teen .card.lesson:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--grad)}
body.teen .marca{font-size:1.35rem;letter-spacing:-.045em}
body.teen .btn,body.teen .btn-mini,body.teen nav button,body.teen .tabs button{border-radius:16px}
body.teen .lectorSuperficie:hover{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.28)}
body.teen .lectorSuperficie:after{filter:saturate(1.15) contrast(1.04)}
body.teen.oscuro .lectorSuperficie{color:var(--tinta)}
body.teen.oscuro .lectorSuperficie:hover{background:rgba(99,102,241,.16)}
body.teen.oscuro .lectorSuperficie.reproduciendo{background:rgba(245,158,11,.14)}

@media(max-width:760px){
  .wrap{padding:10px}.card{padding:18px;border-radius:22px}.topbar{border-radius:18px}
  .topnav{gap:7px}.monChip{min-height:44px}.lectorSuperficie{padding:14px 68px 14px 14px!important}
  .lectorSuperficie:after{width:44px;height:44px;right:10px}.lecPager{display:grid;grid-template-columns:1fr 1fr}
  .lecPager .mini{grid-column:1/-1;grid-row:1}.lecPager .btn{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}