/* Portada de Leguendalf — mismo lenguaje visual que Video Fresh AI (modo claro). © Leguendalf */

/* monograma «L» provisional (hasta que exista el logo oficial) */
.monograma { width: 34px; height: 34px; }
.monograma.mini { width: 22px; height: 22px; display: inline-grid; vertical-align: middle; }
.monograma-grande svg { width: 52%; height: 52%; filter: drop-shadow(0 0 10px rgba(180, 160, 255, .9)); }

.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta h3 { margin-top: 14px; }

/* producto destacado */
.producto { display: flex; gap: 28px; align-items: center; padding: 30px; position: relative; overflow: hidden; }
.producto::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 80, 255, .25), transparent); pointer-events: none; }
.producto-icono { width: 120px; height: 120px; border-radius: 30px; flex: none; box-shadow: 0 0 50px 10px rgba(110, 80, 255, .3), 0 20px 40px rgba(40, 30, 90, .25); }
.producto-texto h3 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 6px; }
.producto-texto p { font-size: 15.5px; max-width: 46em; }
.producto .acciones { margin-top: 18px; }

/* próximamente y sectores */
.proximamente { margin-top: 26px; }
.proximamente h3 { color: var(--suave); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pildoras span { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; background: var(--vidrio); border: 1px solid var(--linea); box-shadow: var(--vidrio-luz); color: #3f3f4c; }
.proximamente .pildoras span { color: var(--suave); border-style: dashed; box-shadow: none; }
.pildoras-grandes span { font-size: 15px; padding: 10px 18px; font-weight: 500; }

/* contacto */
.contacto-tarjeta { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); }
.contacto-tarjeta b { display: block; }
.contacto-tarjeta small { color: var(--suave); }
a.contacto-tarjeta:hover { transform: translateY(-2px); }

/* ---------- agente de IA ---------- */
.agente-boton {
  position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; cursor: pointer; font: 600 14px 'Poppins', sans-serif; color: #fff;
  background: radial-gradient(120% 160% at 50% 130%, rgba(160, 110, 255, .9), transparent 60%), linear-gradient(135deg, #1b1b26, #0b0b12);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .25), 0 14px 40px rgba(80, 50, 200, .45);
  isolation: isolate;
}
.agente-boton::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--espectro); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: girar 4s linear infinite; pointer-events: none; }
.agente-boton .tile { width: 36px; height: 36px; }
.agente-boton[aria-expanded="true"] { display: none; }
.agente {
  position: fixed; right: 20px; bottom: 20px; z-index: 31; width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 40px));
  display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 243, 255, .94)); border: 1px solid var(--linea);
  box-shadow: inset 1.5px 1.5px 0 #fff, 0 30px 80px rgba(40, 30, 90, .3); backdrop-filter: blur(20px);
  animation: subir .35s var(--facil);
}
@keyframes subir { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.agente-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.agente-cab .tile { width: 34px; height: 34px; }
.agente-cab b { display: block; font-size: 14.5px; }
.agente-cab small { color: var(--suave); font-size: 12px; }
.agente-cerrar { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font-size: 20px; cursor: pointer; color: var(--suave); }
.agente-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msj { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; animation: subir .3s var(--facil); }
.msj.ia { align-self: flex-start; background: #fff; border: 1px solid var(--linea); border-bottom-left-radius: 6px; box-shadow: 0 6px 16px rgba(40, 30, 90, .06); }
.msj.yo { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #3a5bff, #8b5cff); border-bottom-right-radius: 6px; }
.msj.escribiendo { color: var(--suave); }
.msj.escribiendo::after { content: '…'; animation: puntos 1s steps(3) infinite; }
@keyframes puntos { 50% { opacity: .3; } }
.agente-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.agente-sugerencias button { font: 500 12.5px 'Poppins', sans-serif; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(139, 92, 255, .35); background: rgba(139, 92, 255, .08); color: #4b2bd6; cursor: pointer; }
.agente-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linea); }
.agente-form input { flex: 1; padding: 11px 14px; border-radius: 999px; }
.agente-form .boton { padding: 10px 16px; }
.agente-nota { margin: 0; padding: 0 16px 12px; font-size: 11.5px; color: var(--suave); text-align: center; }

@media (max-width: 860px) {
  .rejilla-3 { grid-template-columns: 1fr; }
  .producto { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .agente-boton span:last-child { display: none; }
  .agente-boton { padding: 8px; }
  .agente { right: 12px; bottom: 12px; }
}

.portada h1 { font-size: clamp(40px, 5.2vw, 64px); }

/* =====================================================================
   Paleta NATURALEZA (solo la portada, body.portada) — 2026-11-12
   Pedido del director: cambiar la iluminación morada por verde claro de naturaleza,
   combinado con agua y azul verdoso. Verde hoja #1fbf6f · menta #5ee0a0 · verde claro #a8f0c6
   · lima #c8f169 · agua #19c3b0 · azul verdoso #1798c4 · bosque #0d3b2e.
   No toca /video-fresh-ai ni /admin (usan otra clase en <body>).
   ===================================================================== */
body.portada {
  --fondo: #f1f6f3;
  --linea: rgba(10, 50, 40, .09);
  --vidrio-luz: inset 1.5px 1.5px 0 #fff, inset -1px -1px 0 rgba(0, 0, 0, .04), 0 14px 40px rgba(10, 70, 55, .1);
  --cristal-oscuro: linear-gradient(165deg, #12211d 0%, #08120f 55%, #040807 100%);
  --borde-frio: conic-gradient(from var(--giro), #1798c4, #19c3b0, #5ee0a0, #1798c4 50%, #08302a 62%, #19c3b0 80%, #5ee0a0);
  --borde-calido: conic-gradient(from var(--giro), #c8f169, #3ddc84, #19c3b0, #c8f169 50%, #12301a 62%, #8ee05a 80%, #c8f169);
  --espectro: conic-gradient(from var(--giro), transparent 0 64%, #0fbf8a 70%, #5ee0a0 74%, #eaffb8 77%, #7cf0d6 80%, #36c6ff 84%, #1f9fd1 88%, transparent 94%);
}
body.portada::before {
  background: radial-gradient(40% 45% at 8% 100%, rgba(40, 200, 140, .24), transparent 70%), radial-gradient(35% 40% at 100% 0%, rgba(25, 165, 210, .2), transparent 70%), radial-gradient(30% 35% at 75% 105%, rgba(185, 240, 110, .2), transparent 70%);
}
:where(.portada) a { color: #0b8f63; }
.portada .boton:hover { box-shadow: inset 1.5px 1.5px 0 #fff, 0 16px 40px rgba(20, 170, 120, .28); }
.portada .boton-principal {
  background: radial-gradient(120% 160% at 50% 130%, rgba(45, 215, 150, .92), transparent 60%), linear-gradient(135deg, #13221e, #070d0b);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .25), 0 12px 34px rgba(16, 150, 105, .38);
}
.portada .chip-pro { background: linear-gradient(135deg, #1798c4, #1fbf6f 55%, #a8e063); box-shadow: 0 6px 18px rgba(31, 191, 111, .4); }

/* escena animada del héroe */
.portada .escena::before { background: radial-gradient(closest-side, rgba(45, 215, 150, .38), rgba(25, 165, 210, .14) 62%, transparent); }
.portada .tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -10px 20px rgba(0, 0, 0, .5), 0 8px 20px rgba(10, 60, 45, .25); }
.portada .tile.principal { box-shadow: 0 0 70px 20px rgba(40, 205, 145, .4), 0 20px 50px rgba(10, 60, 45, .3); animation: girar 9s linear infinite, latir-verde 4.5s ease-in-out infinite; }
@keyframes latir-verde { 50% { box-shadow: 0 0 90px 30px rgba(25, 175, 210, .42), 0 20px 50px rgba(10, 60, 45, .3); } }
.portada .monograma-grande svg { filter: drop-shadow(0 0 10px rgba(150, 255, 200, .9)); }

/* producto destacado, pasos y listas */
.portada .producto::after { background: radial-gradient(closest-side, rgba(40, 205, 145, .25), transparent); }
.portada .producto-icono { box-shadow: 0 0 50px 10px rgba(40, 205, 145, .3), 0 20px 40px rgba(10, 60, 45, .25); }
.portada .pasos li::before, .portada .lista li::before { background: linear-gradient(135deg, #1798c4, #1fbf6f); box-shadow: 0 0 16px rgba(30, 190, 130, .5); }
.portada .destacado { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(238, 251, 244, .88)); }
.portada .pildoras span { color: #33463f; }
.portada input:focus { border-color: rgba(31, 191, 111, .7); box-shadow: 0 0 0 4px rgba(31, 191, 111, .15); }

/* agente de IA */
.portada .agente-boton {
  background: radial-gradient(120% 160% at 50% 130%, rgba(45, 215, 150, .92), transparent 60%), linear-gradient(135deg, #13221e, #070d0b);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .25), 0 14px 40px rgba(16, 150, 105, .45);
}
.portada .agente { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 251, 245, .94)); box-shadow: inset 1.5px 1.5px 0 #fff, 0 30px 80px rgba(10, 70, 55, .3); }
.portada .msj.ia { box-shadow: 0 6px 16px rgba(10, 70, 55, .06); }
.portada .msj.yo { background: linear-gradient(135deg, #1798c4, #1fbf6f); }
.portada .agente-sugerencias button { border-color: rgba(31, 191, 111, .4); background: rgba(31, 191, 111, .09); color: #0b7a55; }