/* ═══════════════════════════════════════════════════════════════════════════
   Landing pública — la cara de venta.
   Mismo lenguaje que el panel: 3D, cristal, halo azul y verde sobre negro.
   ══════════════════════════════════════════════════════════════════════════ */

.contenedor { width: min(1200px, 100% - 40px); margin-inline: auto; }
@media (max-width: 640px) { .contenedor { width: min(1200px, 100% - 32px); } }

/* ── Cabecera flotante ── */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding: 14px 0;
  background: var(--sup-barra);
  border-bottom: 1px solid var(--borde);
  transition: background var(--t), padding var(--t);
}
html[data-tema="claro"] .cabecera { background: #ffffff; }
.cabecera .fila { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cabecera nav { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.cabecera nav a.enlace { padding: 8px 14px; font-size: .9rem; font-weight: 560; color: var(--texto-2); border-radius: var(--r-s); transition: color var(--t), background var(--t); }
.cabecera nav a.enlace:hover { color: var(--texto); background: var(--sup-media); }
html[data-tema="claro"] .cabecera nav a.enlace:hover { background: #eaf6fd; }
@media (max-width: 720px) { .cabecera nav a.enlace { display: none; } }

/* ── Controles de la cabecera: idioma y tema ───────────────────────────────
   Rectangulares con las esquinas redondeadas, igual que el botón "Entrar", y
   discretos: son ajustes, no llamadas a la acción.                      */
.selector {
  display: flex; gap: 3px; flex: none;
  padding: 3px; border-radius: var(--r-s);
  background: rgba(0, 200, 255, .06);
  border: 1px solid var(--borde);
}
html[data-tema="claro"] .selector {
  background: #f4fbff;
  border-color: rgba(0, 144, 212, .3);
}
.opcion {
  width: 30px; height: 28px; padding: 0; flex: none;
  display: grid; place-items: center;
  border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; background: none;
  color: var(--texto-2);
  opacity: .45; filter: saturate(.45);
  transition: opacity var(--t), filter var(--t), border-color var(--t),
              box-shadow var(--t), background var(--t), color var(--t);
}
.opcion .bandera-svg {
  display: block; width: 21px; height: 14px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.opcion:hover { opacity: .9; filter: none; }
.opcion:active { transform: scale(.94); }
.opcion[aria-pressed="true"] {
  opacity: 1; filter: none;
  color: var(--texto);
  background: rgba(37, 211, 102, .13);
  border-color: rgba(37, 211, 102, .75);
}
html[data-tema="claro"] .opcion[aria-pressed="true"] {
  background: rgba(37, 211, 102, .16);
  color: #0b2438;
}

/* Todo lo de la cabecera comparte altura. */
.cabecera .btn-s { min-height: 36px; }

/* ── La cabecera en el móvil ───────────────────────────────────────────────
   Se quita el texto de la marca (el logo ya identifica) y "Empezar gratis",
   que ya está a tamaño grande en el hero justo debajo: repetirlo aquí solo
   quita sitio. Nada puede desbordar hacia los lados.                    */
@media (max-width: 720px) {
  .cabecera { padding: 9px 0; }
  .cabecera .fila { gap: 10px; }
  .cabecera nav { gap: 7px; }
  .marca-texto { display: none; }
  .opcion { width: 34px; height: 32px; }
  .opcion .bandera-svg { width: 23px; height: 15px; }
  .cabecera .btn-s { padding: 8px 14px; font-size: .84rem; min-height: 40px; }
}
@media (max-width: 380px) {
  .cabecera .btn-s { padding: 8px 11px; font-size: .8rem; }
  .opcion { width: 31px; height: 30px; }
}

/* ── Hero ── */
.hero { padding: 148px 0 88px; position: relative; }
.hero-rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
@media (max-width: 980px) { .hero-rejilla { grid-template-columns: 1fr; gap: 44px; } .hero { padding: 116px 0 64px; } }

.pildora {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 9px; border-radius: 99px; margin-bottom: 24px;
  font-size: .81rem; font-weight: 580;
  background: var(--g-alta);
  border: 1px solid rgba(0,200,255,.55);
  box-shadow: var(--halo), inset 0 1px 0 var(--brillo-sup);
}
.pildora .chispa {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--azul), var(--verde));
  box-shadow: 0 0 14px rgba(0,200,255,.7); font-size: .7rem;
}

.hero h1 { margin-bottom: 20px; }
.hero .entradilla {
  font-size: clamp(1.02rem, 2.1vw, 1.24rem); color: var(--texto-2);
  max-width: 34ch; line-height: 1.62; margin-bottom: 32px;
}
.hero-botones { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.hero-avales { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; font-size: .84rem; color: var(--texto-3); }
.hero-avales span { display: flex; align-items: center; gap: 7px; }

/* ── Maqueta 3D del panel: la pieza que sale de la pantalla ── */
.maqueta { perspective: 1600px; perspective-origin: 60% 40%; position: relative; }

.maqueta-cuerpo {
  position: relative;
  border-radius: var(--r-xxl);
  padding: 16px;
  background: linear-gradient(160deg, #0d2a41 0%, #071a2b 52%, #04101c 100%);
  border: 1px solid var(--borde-vivo);
  box-shadow:
    0 1px 0 rgba(120,230,255,.34) inset,
    0 40px 90px rgba(0,0,0,.7),
    var(--halo-fuerte);
  transform: rotateY(-13deg) rotateX(7deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.16,1,.3,1);
}
.maqueta:hover .maqueta-cuerpo { transform: rotateY(-7deg) rotateX(3deg); }
@media (max-width: 980px) { .maqueta-cuerpo { transform: rotateY(-6deg) rotateX(3deg); } }
@media (max-width: 640px) { .maqueta-cuerpo { transform: none; } }

/* El halo de la maqueta va en su box-shadow (arriba): así sale por fuera del
   borde y nunca puede quedar por delante de la pantalla que dibuja. */

.maqueta-barra { display: flex; align-items: center; gap: 7px; padding: 0 6px 14px; }
.maqueta-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.maqueta-barra i:first-child { background: var(--rojo); box-shadow: 0 0 8px var(--rojo); }
.maqueta-barra i:nth-child(2) { background: var(--ambar); }
.maqueta-barra i:nth-child(3) { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.maqueta-barra .ruta { margin-left: 10px; font-size: .74rem; color: var(--texto-3); font-family: var(--mono); }

.maqueta-lienzo { display: grid; gap: 12px; }
.maqueta-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.maqueta-metrica {
  padding: 13px; border-radius: var(--r);
  background: rgba(0, 200, 255, .07); border: 1px solid rgba(0, 200, 255, .34);
  box-shadow: inset 0 1px 0 rgba(120, 230, 255, .3);
}
.maqueta-metrica .n { font-size: 1.35rem; font-weight: 720; letter-spacing: -.04em; line-height: 1.1; }
.maqueta-metrica .l { font-size: .66rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 660; }

/* Tarjeta de chat que flota POR DELANTE de la maqueta. */
.maqueta-chat {
  padding: 14px; border-radius: var(--r-l);
  background: rgba(0, 200, 255, .06); border: 1px solid rgba(0, 200, 255, .3);
  display: flex; flex-direction: column; gap: 9px;
}
.mini-burbuja { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: .78rem; line-height: 1.45; }
.mini-burbuja.cli { align-self: flex-start; background: #0d2a41; border: 1px solid rgba(0,200,255,.34); border-bottom-left-radius: 5px; }
.mini-burbuja.bot {
  align-self: flex-end; border-bottom-right-radius: 5px; color: #04222c;
  background: linear-gradient(140deg, #5ee0ff, #00c8ff);
  box-shadow: 0 4px 14px rgba(0,200,255,.4), 0 0 24px rgba(0,200,255,.28);
}

.flotante {
  position: absolute; z-index: 3;
  padding: 13px 16px; border-radius: var(--r-l);
  background: var(--g-cristal);
  border: 1px solid var(--borde-vivo);
  box-shadow: 0 20px 50px rgba(0,0,0,.6), var(--halo-medio), inset 0 1px 0 rgba(120,230,255,.34);
  animation: flotar 6s ease-in-out infinite;
}
.flotante.lead { top: 8%; left: -9%; box-shadow: 0 20px 50px rgba(0,0,0,.6), var(--halo-verde), inset 0 1px 0 rgba(120,255,210,.34); }
.flotante.conectado { bottom: 10%; right: -7%; animation-delay: -3s; }
@media (max-width: 1100px) { .flotante.lead { left: -3%; } .flotante.conectado { right: -2%; } }
@media (max-width: 640px) { .flotante { display: none; } }

@keyframes flotar {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-13px) }
}

.flotante .fila-f { display: flex; align-items: center; gap: 10px; }
.flotante .t { font-size: .8rem; font-weight: 660; }
.flotante .s { font-size: .71rem; color: var(--texto-2); }

/* ── Secciones ── */
.seccion { padding: 84px 0; position: relative; }
.seccion-cabeza { text-align: center; max-width: 62ch; margin: 0 auto 52px; }
.seccion-cabeza h2 { margin-bottom: 14px; }
.seccion-cabeza p { color: var(--texto-2); font-size: 1.04rem; line-height: 1.65; }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.paso { padding: 26px; text-align: left; }
.paso .num {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  font-weight: 760; font-size: 1.05rem; margin-bottom: 16px;
  background: linear-gradient(140deg, rgba(0,200,255,.22), rgba(0,255,156,.14));
  border: 1px solid rgba(0,200,255,.34); color: var(--azul-hi);
  box-shadow: 0 0 22px rgba(0,200,255,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.paso h3 { margin-bottom: 8px; }
.paso p { color: var(--texto-2); font-size: .92rem; line-height: 1.6; }

.dones { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 18px; }
.don { padding: 24px; }
.don .ico-caja {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 15px;
  background: linear-gradient(140deg, rgba(0,255,156,.2), rgba(0,200,255,.12));
  border: 1px solid rgba(0,255,156,.3); color: var(--verde);
  box-shadow: 0 0 20px rgba(0,255,156,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.don h3 { margin-bottom: 7px; font-size: 1.02rem; }
.don p { color: var(--texto-2); font-size: .9rem; line-height: 1.6; }

/* ── Planes ── */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; align-items: start; }
.plan { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.plan.destacado { border-color: rgba(0,200,255,.75); }
.plan .cinta {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 11px; border-radius: 99px; font-size: .68rem; font-weight: 720;
  text-transform: uppercase; letter-spacing: .1em;
  background: linear-gradient(120deg, var(--azul), var(--verde)); color: #001820;
  box-shadow: 0 0 20px rgba(0,200,255,.5);
}
.plan .precio { font-size: 2.7rem; font-weight: 740; letter-spacing: -.05em; line-height: 1; }
.plan .precio small { font-size: .95rem; font-weight: 560; color: var(--texto-3); letter-spacing: -.01em; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: .89rem; color: var(--texto-2); line-height: 1.5; }
.plan li .tic {
  width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px;
  display: grid; place-items: center; font-size: .62rem;
  background: rgba(0,255,156,.16); color: var(--verde); border: 1px solid rgba(0,255,156,.34);
}

/* ── Cierre ── */
.cierre { text-align: center; padding: 60px 30px; }
.cierre h2 { margin-bottom: 14px; }
.cierre p { color: var(--texto-2); max-width: 52ch; margin: 0 auto 28px; font-size: 1.02rem; }

.pie {
  border-top: 1px solid var(--borde); padding: 34px 0; margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: .84rem; color: var(--texto-3);
}
.pie .derecha { margin-left: auto; display: flex; gap: 18px; }

/* ── Acceso (entrar / crear cuenta) ── */
.acceso-caja { width: min(440px, 100%); }
.acceso-caja h2 { margin-bottom: 6px; font-size: 1.6rem; }
.acceso-caja .sub { color: var(--texto-2); font-size: .9rem; margin-bottom: 24px; }
.acceso-pie { text-align: center; margin-top: 18px; font-size: .87rem; color: var(--texto-2); }
.acceso-pie button { color: var(--azul-hi); font-weight: 620; }
.acceso-pie button:hover { text-decoration: underline; }
.error-caja {
  padding: 11px 14px; border-radius: var(--r); margin-bottom: 16px; font-size: .86rem;
  background: rgba(251,90,106,.1); border: 1px solid rgba(251,90,106,.32); color: var(--rojo);
}

/* ═══════════════ Añadidos de la versión con lenguaje de IA ═══════════════ */

.hero { position: relative; overflow: hidden; }
.hero .contenedor { position: relative; z-index: 1; }

/* ── Franja de cifras ── */
.franja-cifras {
  padding: 42px 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(0, 200, 255, .05), transparent);
}
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; }
.cifra-caja { text-align: center; }
.cifra-etq { font-size: .82rem; color: var(--texto-2); margin-top: 8px; line-height: 1.4; }

/* ── Sección de inteligencia ── */
.cerebro-rejilla {
  display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center;
}
@media (max-width: 900px) { .cerebro-rejilla { grid-template-columns: 1fr; gap: 36px; } }

.cerebro-visual { display: grid; place-items: center; }
.cerebro-visual .anillos {
  width: 250px; height: 250px;
  filter: drop-shadow(0 0 40px rgba(0, 200, 255, .45));
}
.cerebro-visual .anillos .centro { inset: 88px; font-size: 2.2rem; }
@media (max-width: 900px) { .cerebro-visual .anillos { width: 190px; height: 190px; } .cerebro-visual .anillos .centro { inset: 64px; } }

.cerebro-txt { color: var(--texto-2); font-size: 1.02rem; line-height: 1.68; margin-bottom: 26px; max-width: 56ch; }
.cerebro-lista { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.cerebro-lista li { display: flex; gap: 13px; font-size: .93rem; color: var(--texto-2); line-height: 1.55; }
.cerebro-lista li strong { color: var(--texto); font-weight: 640; }
.cerebro-lista .tic {
  width: 24px; height: 24px; border-radius: 8px; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-size: .7rem;
  color: var(--azul-hi);
  background: rgba(0, 200, 255, .12);
  border: 1px solid rgba(0, 200, 255, .4);
  box-shadow: 0 0 16px -4px rgba(0, 200, 255, .7);
}

/* La tarjeta de cierre respira luz por el borde. */
.cierre { position: relative; }
.cierre h2 { max-width: 22ch; margin-inline: auto; }


/* ═══════════ Verde de WhatsApp ═══════════
   El azul manda, pero esto atiende WhatsApp: el verde de WhatsApp aparece en el
   segundo botón del hero y en el resplandor de detrás de las tarjetas. */
.btn-wa {
  color: #062b16;
  background: linear-gradient(150deg, var(--wa-hi), var(--wa) 55%, var(--wa-hondo));
  border: 1px solid rgba(37, 211, 102, .85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 6px 18px -6px rgba(0, 0, 0, .6),
    0 0 26px -6px rgba(37, 211, 102, .75);
  font-weight: 680;
}
.btn-wa:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 8px 24px -6px rgba(0, 0, 0, .6),
    0 0 38px -6px rgba(37, 211, 102, .95);
}

/* El punto vivo de los avales late en verde de WhatsApp. */
.hero-avales .punto.vivo { background: var(--wa); box-shadow: 0 0 10px rgba(37, 211, 102, .9); }

/* Nada, en ninguna anchura, puede empujar la página hacia los lados. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ═══════════ Modo día: piezas que son oscuras por diseño ═══════════
   La maqueta del hero simula el panel funcionando, y el panel de la captura
   es oscuro. Su caja no cambia con el tema, así que su texto tampoco puede:
   si hereda los colores del modo día queda negro sobre azul noche. */
html[data-tema="claro"] .maqueta-cuerpo { color: #f2f5f8; }
html[data-tema="claro"] .maqueta-metrica .n { color: #f2f5f8; }
html[data-tema="claro"] .maqueta-metrica .l,
html[data-tema="claro"] .maqueta-barra .ruta { color: #8fa0b3; }
html[data-tema="claro"] .mini-burbuja.cli { color: #dce6f0; }

/* Las líneas que caen detrás del hero: sobre blanco cantan demasiado. */
html[data-tema="claro"] .malla-datos { opacity: .35; }