/* ============================================================
   PRAXITAL · TEMA CLARO (premium)
   Se activa con html[data-theme="light"]. El modo oscuro queda intacto.
   Paleta derivada del logo: cian de marca + papel calido + mostaza.
   ============================================================ */
html[data-theme="light"]{
  --paper:#16201F;          /* texto principal (tinta) */
  --paper-dim:#586867;      /* texto secundario */
  --line:rgba(20,40,40,.10);
  --line-soft:rgba(20,40,40,.06);
  --line-cyan:rgba(48,181,178,.45);
  --line-must:rgba(224,165,63,.5);
  /* cian y mostaza de marca se mantienen para coherencia con el logo */
}

/* ---- Fondo: limpio, calido, sin textura gamer ---- */
html[data-theme="light"] body{background:#F3F6F6}
html[data-theme="light"] body::before{opacity:.035}            /* textura carbono casi invisible */
html[data-theme="light"] body::after{
  background:radial-gradient(120% 80% at 85% -5%,rgba(48,181,178,.10),transparent 45%),
             radial-gradient(90% 70% at -10% 100%,rgba(224,165,63,.07),transparent 50%),
             linear-gradient(180deg,rgba(255,255,255,.5),rgba(243,246,246,.2));
}

/* ---- Nav ---- */
html[data-theme="light"] nav.scrolled{background:rgba(255,255,255,.85);border-bottom:1px solid var(--line)}
html[data-theme="light"] .nav-toggle span{background:var(--paper)}
html[data-theme="light"] .nav-links{}
@media(max-width:860px){
  html[data-theme="light"] .nav-links{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
}

/* ---- Hero: velo claro sobre el video (texto oscuro legible) ---- */
html[data-theme="light"] .hero::before{
  background:linear-gradient(110deg,rgba(243,246,246,.82) 0%,rgba(243,246,246,.78) 50%,rgba(243,246,246,.74) 100%),
             radial-gradient(80% 90% at 80% 20%,rgba(48,181,178,.12),transparent 55%);
}

/* ---- Bandas de seccion: tinte claro para dar ritmo ---- */
html[data-theme="light"] .engines,
html[data-theme="light"] .agents,
html[data-theme="light"] .prod,
html[data-theme="light"] .social,
html[data-theme="light"] .faq,
html[data-theme="light"] .band{background:#EAF1F1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- Tarjetas: blancas con sombra suave (definicion premium en claro) ---- */
html[data-theme="light"] .engine,
html[data-theme="light"] .step,
html[data-theme="light"] .agent,
html[data-theme="light"] .cred-card,
html[data-theme="light"] .mem-card,
html[data-theme="light"] .ccard,
html[data-theme="light"] .core-c,
html[data-theme="light"] .pcard,
html[data-theme="light"] .how-c,
html[data-theme="light"] .price-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .orchestrator{
  background:#FFFFFF;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,40,40,.04),0 12px 32px -16px rgba(20,40,40,.12);
}

/* superficie del grid de agentes (las lineas del gap) */
html[data-theme="light"] .agent-grid{background:var(--line);border:1px solid var(--line)}
html[data-theme="light"] .agent:hover{background:#F6FAFA}

/* ---- Formulario e inputs ---- */
html[data-theme="light"] form{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 12px 40px -20px rgba(20,40,40,.15)}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{background:#F7FAFA;border:1px solid var(--line);color:var(--paper)}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#9AA8A7}
html[data-theme="light"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23586867' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}

/* ---- Membresia toggle ---- */
html[data-theme="light"] .mem-toggle{background:#EAF1F1;border:1px solid var(--line)}

/* ---- Selector de idioma ---- */
html[data-theme="light"] .lang{border:1px solid var(--line)}
html[data-theme="light"] .lang button{color:var(--paper-dim)}
html[data-theme="light"] .lang button:hover{color:var(--paper)}

/* ---- Botones ---- */
html[data-theme="light"] .btn-ghost{border:1px solid var(--line);color:var(--paper)}
html[data-theme="light"] .prod-all a{border:1px solid var(--line);color:var(--paper)}

/* ---- Praxis side border ---- */
html[data-theme="light"] .praxis-side{border-color:var(--line-cyan)}
@media(max-width:960px){html[data-theme="light"] .praxis-side{border-top-color:var(--line-cyan)}}

/* ---- Tarjetas de portafolio: las dejamos oscuras a proposito (bloques de contraste premium) ---- */
/* (folio-bg / folio-veil sin cambios: lucen como tarjetas oscuras sobre fondo claro) */

/* ---- Pie ---- */
html[data-theme="light"] footer{border-top:1px solid var(--line)}

/* ---- Boton de tema (sol/luna) ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--paper-dim);cursor:pointer;transition:.25s;flex:none;font-size:1rem;line-height:1}
.theme-toggle:hover{color:var(--cyan);border-color:var(--line-cyan)}
html[data-theme="light"] .theme-toggle{border-color:var(--line)}

/* ============================================================
   PÁGINAS DE PORTAFOLIO (praxis-creativa.html / praxis-academica.html)
   Cubre sus clases propias en tema claro.
   ============================================================ */

/* ---- Nav scrolled en páginas de portafolio ---- */
html[data-theme="light"] nav.scrolled{background:rgba(255,255,255,.85)}

/* ---- Hero de portafolio (phero) ---- */
html[data-theme="light"] .phero{background:transparent}
html[data-theme="light"] .phero .kick{color:var(--cyan)}
html[data-theme="light"] .crumb,html[data-theme="light"] .crumb a{color:var(--paper-dim)}
html[data-theme="light"] .crumb a:hover{color:var(--cyan)}

/* ---- Filtros (praxis-creativa) ---- */
html[data-theme="light"] .filters button{background:#fff;border:1px solid var(--line);color:var(--paper-dim)}
html[data-theme="light"] .filters button:hover{border-color:var(--line-cyan);color:var(--paper)}
html[data-theme="light"] .filters button.on{background:var(--cyan);color:#fff;border-color:var(--cyan)}

/* ---- Tarjetas de proyecto (proj) ---- */
html[data-theme="light"] .proj{background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(20,40,40,.05),0 8px 24px rgba(20,40,40,.04)}
html[data-theme="light"] .proj:hover{border-color:var(--line-cyan);box-shadow:0 4px 12px rgba(48,181,178,.1),0 12px 32px rgba(20,40,40,.08)}
html[data-theme="light"] .proj .ph{background:#EAF1F1}
html[data-theme="light"] .proj .cat{background:rgba(255,255,255,.85);border:1px solid var(--line-cyan);color:var(--cyan)}
html[data-theme="light"] .proj .meta{color:var(--paper-dim)}

/* ---- Video frame (praxis-creativa) ---- */
html[data-theme="light"] .vframe{background:#EAF1F1;border:1px solid var(--line)}
html[data-theme="light"] .vframe .vlabel{background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--paper)}
html[data-theme="light"] .vframe .vplay .ring{background:rgba(255,255,255,.6);border-color:var(--cyan)}

/* ---- Feature / empty note ---- */
html[data-theme="light"] .feature{background:#fff;border:1px solid var(--line)}
html[data-theme="light"] .empty-note{color:var(--paper-dim)}

/* ---- praxis-academica: tarjetas (card / entry / flagship) ---- */
html[data-theme="light"] .card,html[data-theme="light"] .entry,html[data-theme="light"] .flagship{background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(20,40,40,.05),0 8px 24px rgba(20,40,40,.04)}
html[data-theme="light"] .card:hover,html[data-theme="light"] .entry:hover{border-color:var(--line-cyan);box-shadow:0 4px 12px rgba(48,181,178,.1),0 12px 32px rgba(20,40,40,.08)}
html[data-theme="light"] .badge{background:rgba(48,181,178,.1);border:1px solid var(--line-cyan);color:var(--cyan)}
html[data-theme="light"] .status{color:var(--paper-dim)}
html[data-theme="light"] .venue,html[data-theme="light"] .yr,html[data-theme="light"] .auth{color:var(--paper-dim)}
html[data-theme="light"] .sep{background:var(--line)}
html[data-theme="light"] .desc{color:var(--paper-dim)}
html[data-theme="light"] .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-theme="light"] .sec-head{border-bottom:1px solid var(--line)}
html[data-theme="light"] .pubsec .num{color:var(--mustard)}
html[data-theme="light"] .edit-note{background:rgba(224,165,63,.08);border:1px solid var(--line-must);color:var(--paper-dim)}

/* ---- CTA band en portafolios ---- */
html[data-theme="light"] .cta{background:linear-gradient(160deg,rgba(48,181,178,.08),rgba(255,255,255,.4));border:1px solid var(--line-cyan)}

/* ============================================================
   SOMBRAS PREMIUM EN TEMA CLARO
   Las sombras negras del modo oscuro son muy duras sobre fondo claro.
   Aquí se suavizan a sombras sutiles apropiadas para superficies claras.
   ============================================================ */
html[data-theme="light"] .core-c,
html[data-theme="light"] .engine,
html[data-theme="light"] .step,
html[data-theme="light"] .pcard,
html[data-theme="light"] .ccard,
html[data-theme="light"] .cred-card,
html[data-theme="light"] .mem-card{
  box-shadow:0 1px 3px rgba(20,40,40,.06),0 10px 30px rgba(20,40,40,.07);
}
html[data-theme="light"] .core-c:hover,
html[data-theme="light"] .engine:hover,
html[data-theme="light"] .step:hover,
html[data-theme="light"] .pcard:hover,
html[data-theme="light"] .ccard:hover{
  box-shadow:0 4px 14px rgba(48,181,178,.12),0 18px 40px rgba(20,40,40,.1);
}

/* Tarjetas con fondo claro real en modo claro (sobrescribe el fondo oscuro) */
html[data-theme="light"] .core-c,
html[data-theme="light"] .engine,
html[data-theme="light"] .step,
html[data-theme="light"] .pcard,
html[data-theme="light"] .ccard,
html[data-theme="light"] .cred-card{
  background:#fff;
}

/* Divisor: en tema claro mantiene los colores de marca (cian/mostaza) ya visibles */