/* ==========================================================================
   Snap It Go — estilos base (mobile-first)
   Dirección: producto premium. Aire generoso, tipografía grande, una idea
   por pantalla, fotografía a sangre y azul de marca como único acento.
   Los breakpoints viven en responsive.css
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --noche: #050A16;
  --noche-2: #0A1226;
  --carta: #F5F7FB;
  --carta-2: #E7ECF5;
  --tinta: #0A1120;
  --tinta-suave: #5D6B84;
  --azul: #1E6BFF;
  --azul-hondo: #0C4CD6;
  --cian: #4FD1F5;
  --ok: #2FBF71;

  --linea-clara: rgba(245, 247, 251, .14);
  --linea-oscura: rgba(10, 17, 32, .12);

  --tipo: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 14px;
  --radio-xl: 26px;
  --sombra: 0 40px 80px -50px rgba(0, 0, 0, .9);

  --aire: 6rem;
  --alto-cabecera: 62px;
  --curva: cubic-bezier(.22, .8, .28, 1);
}

/* ---------- 2. Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--noche);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }
figure { margin: 0; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background-color: var(--azul);
  color: #fff;
  padding: .75rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.cont { width: 100%; padding-inline: 1.35rem; }

/* ---------- 3. Piezas de texto ---------- */
.etiqueta {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--tinta-suave);
  margin-bottom: 1.1rem;
}
.seccion-oscura .etiqueta,
.hero .etiqueta,
.escena .etiqueta,
.cierre .etiqueta,
.seccion-confianza .etiqueta { color: rgba(245, 247, 251, .55); }

.titulo {
  font-size: clamp(2.2rem, 8.5vw, 3.2rem);
  margin-bottom: 1.1rem;
  max-width: 16ch;
}
.titulo-grande { font-size: clamp(2.4rem, 9vw, 3.6rem); max-width: 15ch; }

.acento {
  color: var(--azul);
  display: inline;
}
.seccion-oscura .acento,
.hero .acento,
.cierre .acento,
.seccion-confianza .acento { color: var(--cian); }

.entrada {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  max-width: 46ch;
  font-weight: 400;
}
.seccion-oscura .entrada,
.cierre .entrada,
.seccion-confianza .entrada { color: rgba(245, 247, 251, .68); }

.frase {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--tinta);
  max-width: 22ch;
  margin-block: 2rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--azul);
}

.encabezado { margin-bottom: 3rem; }
.encabezado-centro { text-align: center; margin-inline: auto; max-width: 34rem; }
.encabezado-centro .titulo { margin-inline: auto; }

/* ---------- 4. Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--tipo);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 1.05rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--curva), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton-lleno { background-color: var(--azul); color: #fff; }
.boton-lleno:hover { background-color: var(--azul-hondo); color: #fff; }

.boton-linea { background-color: transparent; color: var(--carta); border-color: rgba(245, 247, 251, .35); }
.boton-linea:hover { border-color: var(--carta); background-color: rgba(245, 247, 251, .08); }

.boton-wa { background-color: rgba(245, 247, 251, .1); color: var(--carta); border-color: var(--linea-clara); }
.boton-wa:hover { background-color: rgba(245, 247, 251, .18); color: var(--carta); }

.enlace-mas {
  display: inline-block;
  margin-top: 2.5rem;
  font-weight: 500;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 107, 255, .4);
  padding-bottom: 3px;
}
.enlace-mas:hover { border-bottom-color: currentColor; }

/* ---------- 5. Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(5, 10, 22, .72);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.cabecera.pegada { background-color: rgba(5, 10, 22, .94); border-bottom-color: var(--linea-clara); }

.barra { padding: 0; }
.barra-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: var(--alto-cabecera);
}

.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca-logo {
  height: 28px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  mix-blend-mode: screen;
}

.menu-boton {
  border: 1px solid var(--linea-clara);
  border-radius: 10px;
  padding: .55rem .6rem;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.menu-boton:focus { box-shadow: none; }
.menu-linea { display: block; width: 18px; height: 1.5px; background-color: var(--carta); }

/* Panel desplegable (móvil y tablet) */
.menu { width: 100%; }
.menu.collapse:not(.show) { display: none; }
.menu.show,
.menu.collapsing {
  background-color: var(--noche);
  max-height: calc(100svh - var(--alto-cabecera));
  overflow-y: auto;
}
.menu-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .5rem 0 1rem;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--linea-clara);
}
.menu-lista .nav-item + .nav-item { border-top: 1px solid rgba(245, 247, 251, .07); }
.menu-lista .nav-link {
  text-decoration: none;
  font-size: 1.05rem;
  color: rgba(245, 247, 251, .85);
  padding: .95rem .25rem;
  display: block;
  position: relative;
}
.menu-lista .nav-link::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(245, 247, 251, .35);
  border-bottom: 1.5px solid rgba(245, 247, 251, .35);
  transform: translateY(-60%) rotate(-45deg);
}
.menu-lista .nav-link:hover { color: var(--cian); }
.menu-lista .nav-link:hover::after { border-color: var(--cian); }
.menu-cta { width: 100%; margin-bottom: 1.25rem; padding: 1rem 1.5rem; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 5rem 3rem;
  color: var(--carta);
  background-color: var(--noche);
  overflow: hidden;
  isolation: isolate;
}
.hero-fondo { position: absolute; inset: 0; z-index: -2; }
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: acercar 30s ease-in-out infinite alternate;
}
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 22, .86) 0%, rgba(5, 10, 22, .6) 40%, rgba(5, 10, 22, .96) 100%),
    radial-gradient(65% 55% at 12% 75%, rgba(30, 107, 255, .35), transparent 70%);
}
@keyframes acercar {
  from { transform: scale(1.02); }
  to { transform: scale(1.14); }
}

.hero-inner { position: relative; z-index: 1; }

.hero-titulo {
  font-size: clamp(2.4rem, 9.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.02;
  color: var(--carta);
  margin-bottom: 1.35rem;
  max-width: 17ch;
}
.hero-titulo .pal { display: inline-block; }
.con-js .hero-titulo .pal { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
.hero-titulo.entro .pal { animation: subir .9s var(--curva) forwards; }
.hero-titulo.entro .pal:nth-child(1) { animation-delay: .05s; }
.hero-titulo.entro .pal:nth-child(2) { animation-delay: .11s; }
.hero-titulo.entro .pal:nth-child(3) { animation-delay: .17s; }
.hero-titulo.entro .pal:nth-child(4) { animation-delay: .23s; }
.hero-titulo.entro .pal:nth-child(5) { animation-delay: .29s; }
.hero-titulo.entro .pal:nth-child(6) { animation-delay: .38s; }
.pal-acento { color: var(--cian); }
@keyframes subir {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(245, 247, 251, .78);
  max-width: 38ch;
  margin-bottom: 2rem;
}
.hero-acciones { display: flex; flex-direction: column; gap: .75rem; }

/* Chat rápido del hero */
.rapido {
  margin-top: 2.5rem;
  background-color: rgba(10, 18, 38, .72);
  backdrop-filter: blur(18px);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio-xl);
  padding: 1.5rem 1.35rem;
}
.rapido-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .75rem; }
.rapido-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--ok);
  box-shadow: 0 0 0 4px rgba(47, 191, 113, .18);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.rapido-titulo { font-weight: 500; font-size: .95rem; color: var(--carta); }
.rapido-texto { font-size: .95rem; color: rgba(245, 247, 251, .65); margin-bottom: 1.1rem; }
.rapido-form { display: grid; gap: .75rem; }
.rapido-enviar { width: 100%; }
.rapido-nota { margin: .85rem 0 0; font-size: .82rem; color: rgba(245, 247, 251, .45); }

/* Campos (se reutilizan en el formulario final) */
.campo { display: block; }
.campo-label {
  display: block;
  font-size: .8rem;
  color: rgba(245, 247, 251, .55);
  margin-bottom: .35rem;
}
.campo-input {
  width: 100%;
  font-family: var(--tipo);
  font-size: 1rem;
  color: var(--carta);
  background-color: rgba(245, 247, 251, .06);
  border: 1px solid var(--linea-clara);
  border-radius: 12px;
  padding: .85rem .95rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.campo-input::placeholder { color: rgba(245, 247, 251, .35); }
.campo-input:focus {
  outline: none;
  border-color: var(--azul);
  background-color: rgba(245, 247, 251, .1);
}
select.campo-input { appearance: none; }
select.campo-input option { color: #111; }

/* Chips de actividad */
.hero-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding-inline: 1.35rem;
  margin-top: 2.5rem;
}
.chip {
  font-size: .8rem;
  color: rgba(245, 247, 251, .8);
  background-color: rgba(5, 10, 22, .55);
  border: 1px solid var(--linea-clara);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .5rem .9rem;
}
.chip b { font-weight: 500; color: var(--cian); }
.chip-ok b { color: var(--ok); }
.con-js .chip { opacity: 0; transform: translateY(8px); }
.hero-chips.entro .chip { animation: subir .7s var(--curva) forwards; }
.hero-chips.entro .chip:nth-child(1) { animation-delay: .9s; }
.hero-chips.entro .chip:nth-child(2) { animation-delay: 1.15s; }
.hero-chips.entro .chip:nth-child(3) { animation-delay: 1.4s; }
.hero-chips.entro .chip:nth-child(4) { animation-delay: 1.65s; }

/* ---------- 7. Escena de hora pico ---------- */
.escena {
  position: relative;
  background-color: var(--noche);
  color: var(--carta);
  isolation: isolate;
}
.escena-fondo { position: absolute; inset: 0; z-index: -1; }
.escena-fondo img { width: 100%; height: 100%; object-fit: cover; }
.escena-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 22, .95), rgba(5, 10, 22, .82) 50%, rgba(5, 10, 22, .97));
}
.escena-pegada { padding-block: var(--aire); }

.escena-hora {
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--cian);
  margin-bottom: 2rem;
}
.escena-beats { display: grid; gap: 1.35rem; }
.beat {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: rgba(245, 247, 251, .35);
  max-width: 20ch;
  transition: color .6s ease, transform .6s var(--curva), opacity .6s ease;
}
.con-js .beat { opacity: 0; transform: translateY(18px); }
.escena-beats.entro .beat { opacity: 1; transform: translateY(0); }
.escena-beats.entro .beat:nth-child(1) { transition-delay: .05s; }
.escena-beats.entro .beat:nth-child(2) { transition-delay: .3s; }
.escena-beats.entro .beat:nth-child(3) { transition-delay: .55s; }
.escena-beats.entro .beat:nth-child(4) { transition-delay: .8s; }
.escena-beats.entro .beat:nth-child(5) { transition-delay: 1.05s; }
.escena-beats.entro .beat:nth-child(6) { transition-delay: 1.3s; }
.escena-beats.entro .beat:nth-child(7) { transition-delay: 1.7s; }
.beat-malo { color: rgba(255, 118, 90, .85); }
.escena-beats.entro .beat-bueno { color: var(--carta); font-weight: 600; }

/* ---------- 8. Secciones genéricas ---------- */
.seccion { padding-block: var(--aire); }
.seccion-clara { background-color: var(--carta); color: var(--tinta); }
.seccion-oscura { background-color: var(--noche); color: var(--carta); }
.seccion-oscura .titulo { color: var(--carta); }

/* ---------- 9. Soporte ---------- */
.col-visual { margin-top: 3rem; }

.chat {
  background-color: var(--noche);
  border-radius: var(--radio-xl);
  padding: 1.35rem 1.2rem;
  box-shadow: var(--sombra);
  max-width: 420px;
}
.chat-head { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea-clara); }
.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--azul);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.chat-avatar img { width: 26px; height: 26px; object-fit: contain; }
.chat-datos { display: flex; flex-direction: column; }
.chat-nombre { font-weight: 500; color: var(--carta); }
.chat-estado { font-size: .8rem; color: var(--ok); }

.chat-cuerpo { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.1rem; min-height: 250px; }
.msg {
  margin: 0;
  max-width: 84%;
  padding: .75rem 1rem;
  font-size: .95rem;
  line-height: 1.4;
  border-radius: 18px;
}
.con-js .msg { opacity: 0; transform: translateY(8px) scale(.98); }
.msg.visible {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .5s var(--curva);
}
.msg-tu { align-self: flex-start; background-color: rgba(245, 247, 251, .1); color: var(--carta); border-bottom-left-radius: 6px; }
.msg-yo { align-self: flex-end; background-color: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.msg-escribe { align-self: flex-end; background-color: var(--azul); display: inline-flex; gap: 4px; padding: .9rem 1rem; }
.msg-escribe span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .9);
  animation: escribir 1.2s ease-in-out infinite;
}
.msg-escribe span:nth-child(2) { animation-delay: .15s; }
.msg-escribe span:nth-child(3) { animation-delay: .3s; }
@keyframes escribir {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- 10. Tarjetas de continuidad ---------- */
.tarjetas { display: grid; gap: 1rem; }
.tarjeta {
  background-color: rgba(245, 247, 251, .05);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio-xl);
  padding: 1.75rem 1.5rem;
  transition: transform .35s var(--curva), background-color .35s ease, border-color .35s ease;
}
.tarjeta:hover {
  transform: translateY(-4px);
  background-color: rgba(245, 247, 251, .09);
  border-color: rgba(79, 209, 245, .5);
}
.tarjeta-titulo { font-size: 1.25rem; color: var(--carta); margin-bottom: .5rem; }
.tarjeta-texto { margin: 0; font-size: 1rem; color: rgba(245, 247, 251, .6); }
.tarjeta-marca { background-color: var(--azul); border-color: var(--azul); }
.tarjeta-marca .tarjeta-texto { color: rgba(255, 255, 255, .85); }

/* ---------- 11. Flujo de tres pantallas (mirar, pedir, pagar) ---------- */
.mesas { position: relative; overflow: hidden; padding-bottom: 0; }
.entrada-centro { margin-inline: auto; }

.flujo {
  position: relative;
  display: grid;
  gap: 2.5rem;
  justify-items: center;
  padding-inline: 1.35rem;
  margin-top: 3.5rem;
}
.flujo-brillo {
  position: absolute;
  left: 50%;
  top: 10%;
  width: min(120vw, 900px);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(30, 107, 255, .35), transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.pantalla { position: relative; z-index: 1; width: 100%; max-width: 300px; }
.pantalla-paso {
  display: block;
  font-size: .82rem;
  color: var(--cian);
  margin-bottom: .9rem;
  text-align: center;
}
.pantalla-marco {
  border-radius: 30px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(245, 247, 251, .18), rgba(245, 247, 251, .04));
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95);
}
.pantalla-cuerpo {
  background-color: #fff;
  border-radius: 22px;
  padding: 1rem .9rem 1.1rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  color: var(--tinta);
}

.pan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--linea-oscura);
  font-size: .9rem;
}
.pan-mesa { font-weight: 600; }
.pan-hora, .pan-vivo { font-size: .78rem; color: var(--tinta-suave); }
.pan-vivo { display: inline-flex; align-items: center; gap: .35rem; }
.pan-total { font-weight: 600; color: var(--azul); }

/* Pantalla 1: menú con fotos */
.pan-menu { display: grid; gap: .55rem; padding-block: .9rem; flex: 1; }
.pan-plato {
  display: flex;
  align-items: center;
  gap: .7rem;
  background-color: var(--carta);
  border-radius: 12px;
  padding: .45rem .55rem;
}
.pan-foto { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; background-color: var(--carta-2); }
.pan-datos { display: flex; flex-direction: column; line-height: 1.25; }
.pan-datos b { font-size: .88rem; font-weight: 500; }
.pan-datos em { font-style: normal; font-size: .82rem; color: var(--azul); font-weight: 600; }
.pan-boton, .pan-pagar {
  display: block;
  text-align: center;
  border-radius: 999px;
  background-color: var(--azul);
  color: #fff;
  font-weight: 500;
  font-size: .92rem;
  padding: .8rem 1rem;
}

/* Pantalla 2: comanda a cocina */
.pan-comanda { display: grid; gap: .5rem; padding-block: 1rem; flex: 1; }
.pan-linea {
  font-size: .9rem;
  padding: .55rem .7rem .55rem 2rem;
  background-color: var(--carta);
  border-radius: 10px;
  position: relative;
}
.pan-linea em { font-style: normal; color: var(--azul); font-size: .8rem; }
.pan-linea::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 1rem;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.pan-sello {
  display: block;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ok);
  border: 1px dashed rgba(47, 191, 113, .5);
  border-radius: 999px;
  padding: .7rem 1rem;
}

/* Pantalla 3: cuenta y pago */
.pan-cuenta { display: grid; gap: .4rem; padding-block: 1rem; flex: 1; }
.pan-fila {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--tinta-suave);
  padding: .45rem .1rem;
  border-bottom: 1px solid var(--linea-oscura);
}
.pan-ok {
  display: block;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ok);
  margin-top: .7rem;
  opacity: 0;
}

/* Micro animación en bucle: la cuenta se paga sola */
.pantalla-der .pan-pagar { animation: pagarBoton 7s ease-in-out infinite; }
.pantalla-der .pan-ok { animation: pagarAviso 7s ease-in-out infinite; }
@keyframes pagarBoton {
  0%, 45% { background-color: var(--azul); transform: scale(1); }
  52% { transform: scale(.96); }
  60%, 92% { background-color: var(--ok); transform: scale(1); }
  100% { background-color: var(--azul); }
}
@keyframes pagarAviso {
  0%, 55% { opacity: 0; transform: translateY(4px); }
  65%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}
.pantalla-centro .pan-linea { animation: entrarLinea 7s ease-in-out infinite; }
.pantalla-centro .pan-linea:nth-child(2) { animation-delay: .4s; }
.pantalla-centro .pan-linea:nth-child(3) { animation-delay: .8s; }
@keyframes entrarLinea {
  0%, 6% { opacity: .25; transform: translateX(-6px); }
  16%, 100% { opacity: 1; transform: translateX(0); }
}
.pantalla-centro .pan-sello { animation: sellar 7s ease-in-out infinite; }
@keyframes sellar {
  0%, 22% { opacity: 0; transform: scale(.96); }
  32%, 100% { opacity: 1; transform: scale(1); }
}
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background-color: var(--ok); animation: latir 2s ease-in-out infinite; }

/* ---------- Pulso del salón ---------- */
.pulso {
  margin-top: 4rem;
  overflow: hidden;
  border-block: 1px solid var(--linea-clara);
  padding-block: 1.1rem;
  background-color: rgba(245, 247, 251, .03);
}
.pulso-riel {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: correrPulso 42s linear infinite;
}
.pulso-item { font-size: .95rem; color: rgba(245, 247, 251, .6); white-space: nowrap; }
.pulso-item b { font-weight: 600; color: var(--cian); }
.pulso-sep { width: 5px; height: 5px; border-radius: 50%; background-color: var(--azul); flex: none; }
@keyframes correrPulso {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 12. Soluciones (Cómo ayuda Snap It Go) ---------- */
.soluciones { display: grid; gap: 1px; background-color: var(--linea-clara); border-block: 1px solid var(--linea-clara); }
.solucion {
  background-color: var(--noche);
  padding: 1.9rem 1.35rem 1.75rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background-color .35s ease;
}
.solucion:hover { background-color: var(--noche-2); }
.solucion-titulo { font-size: 1.2rem; color: var(--carta); }
.solucion-texto { margin: 0; font-size: .96rem; color: rgba(245, 247, 251, .6); flex: 1; }
.solucion-cta {
  font-size: .9rem;
  font-weight: 500;
  color: var(--cian);
  margin-top: .75rem;
}
.solucion:hover .solucion-cta { color: #fff; }
.solucion-destacada { background-color: var(--azul); }
.solucion-destacada:hover { background-color: var(--azul-hondo); }
.solucion-destacada .solucion-texto { color: rgba(255, 255, 255, .85); }
.solucion-destacada .solucion-cta { color: #fff; }

/* Puente de la escena y pantallas reales */
.escena-puente {
  margin-top: 2.75rem;
  font-size: 1.1rem;
  color: rgba(245, 247, 251, .7);
  max-width: 40ch;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea-clara);
}
.app-real { margin-top: 4rem; }
.app-real img { width: 100%; }
.app-pie { margin: 1rem 0 0; font-size: .85rem; color: rgba(245, 247, 251, .45); }
.con-js [data-anim="revelar"] img { opacity: 0; transform: translateY(28px) scale(.98); }
[data-anim="revelar"].entro img {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform 1.1s var(--curva);
}

/* ---------- 13. Pasos ---------- */
.pasos { display: grid; gap: 0; }
.paso {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--linea-oscura);
}
.paso:last-child { border-bottom: 1px solid var(--linea-oscura); }
.paso-num { font-size: .9rem; font-weight: 600; color: var(--azul); flex: none; }
.paso-texto { margin: 0; font-size: 1.15rem; font-weight: 400; letter-spacing: -.02em; }

.dato { display: flex; align-items: baseline; gap: .75rem; margin-top: 3rem; }
.dato-num { font-size: clamp(3rem, 14vw, 4.5rem); font-weight: 600; letter-spacing: -.05em; color: var(--azul); line-height: 1; }
.dato-txt { font-size: 1rem; color: var(--tinta-suave); max-width: 14ch; }

/* ---------- 14. Confianza ---------- */
.seccion-confianza {
  position: relative;
  color: var(--carta);
  background-color: var(--noche);
  isolation: isolate;
  text-align: center;
}
.confianza-fondo { position: absolute; inset: 0; z-index: -1; }
.confianza-fondo img { width: 100%; height: 100%; object-fit: cover; }
.confianza-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 22, .93), rgba(5, 10, 22, .88)); }
.confianza-inner { max-width: 40rem; margin-inline: auto; }
.seccion-confianza .titulo { margin-inline: auto; color: var(--carta); }
.seccion-confianza .entrada { margin-inline: auto; }

.logos { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; }
.logo-txt { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; color: rgba(245, 247, 251, .85); }
.logo-sep { width: 5px; height: 5px; border-radius: 50%; background-color: var(--cian); }

/* ---------- 15. Artículos ---------- */
.notas { display: grid; gap: 1.5rem; }
.nota-enlace { text-decoration: none; display: block; }
.nota-foto {
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--carta-2);
  margin-bottom: 1rem;
}
.nota-foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .8s var(--curva);
}
.nota-enlace:hover .nota-foto img { transform: scale(1.05); }
.nota-titulo { font-size: 1.2rem; margin-bottom: .5rem; max-width: 26ch; }
.nota-enlace:hover .nota-titulo { color: var(--azul); }
.nota-meta { font-size: .85rem; color: var(--tinta-suave); }

/* ---------- 16. Cierre y formulario ---------- */
.cierre {
  position: relative;
  color: var(--carta);
  background-color: var(--noche);
  padding-block: var(--aire);
  isolation: isolate;
}
.cierre-fondo { position: absolute; inset: 0; z-index: -1; }
.cierre-fondo img { width: 100%; height: 100%; object-fit: cover; }
.cierre-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 22, .93), rgba(5, 10, 22, .88)); }
.cierre .titulo { color: var(--carta); }

.forma {
  margin-top: 3rem;
  background-color: rgba(10, 18, 38, .72);
  backdrop-filter: blur(18px);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio-xl);
  padding: 1.75rem 1.35rem;
  display: grid;
  gap: 1rem;
}
.forma-fila { display: grid; gap: 1rem; }
.forma-enviar { width: 100%; margin-top: .5rem; }
.forma-nota { margin: 0; font-size: .82rem; color: rgba(245, 247, 251, .45); text-align: center; }

/* ---------- 17. Pie ---------- */
.pie {
  background-color: var(--noche);
  color: rgba(245, 247, 251, .6);
  padding-block: 3.5rem 1.5rem;
  font-size: .95rem;
  border-top: 1px solid var(--linea-clara);
}
.pie-grid { display: grid; gap: 2.25rem; }
.pie-logo { height: 34px; width: auto; margin-bottom: .85rem; }
.pie-frase { max-width: 30ch; color: rgba(245, 247, 251, .55); }
.pie-titulo { font-size: .95rem; color: var(--carta); margin-bottom: .9rem; font-weight: 500; }
.pie-lista { display: grid; gap: .55rem; }
.pie-lista a { text-decoration: none; color: rgba(245, 247, 251, .6); }
.pie-lista a:hover { color: var(--carta); }

.pie-abajo {
  margin-top: 3rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--linea-clara);
  display: grid;
  gap: .35rem;
}
.pie-legal { margin: 0; font-size: .82rem; color: rgba(245, 247, 251, .4); }

/* ---------- 18. WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background-color: #25D366;
  color: #04310f;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .85);
  transition: transform .25s var(--curva);
}
.wa-flotante:hover { transform: translateY(-3px); color: #04310f; }
.wa-icono { width: 22px; height: 22px; fill: currentColor; flex: none; }
.wa-texto { display: none; }

/* ---------- 19. Entradas al hacer scroll ---------- */
.con-js [data-anim="cascada"] > * { opacity: .001; transform: translateY(24px); }
[data-anim="cascada"].entro > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .8s var(--curva);
}
[data-anim="cascada"].entro > *:nth-child(1) { transition-delay: .04s; }
[data-anim="cascada"].entro > *:nth-child(2) { transition-delay: .1s; }
[data-anim="cascada"].entro > *:nth-child(3) { transition-delay: .16s; }
[data-anim="cascada"].entro > *:nth-child(4) { transition-delay: .22s; }
[data-anim="cascada"].entro > *:nth-child(5) { transition-delay: .28s; }
[data-anim="cascada"].entro > *:nth-child(6) { transition-delay: .34s; }
[data-anim="cascada"].entro > *:nth-child(7) { transition-delay: .4s; }
[data-anim="cascada"].entro > *:nth-child(8) { transition-delay: .46s; }

/* ---------- 20. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-video,
  .mesa,
  .rapido-punto,
  .punto-vivo,
  .msg-escribe span { animation: none !important; }

  .hero-titulo .pal,
  .chip,
  .fono-item,
  [data-anim="revelar"] img,
  [data-anim="cascada"] > *,
  .beat,
  .msg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .boton:hover, .tarjeta:hover, .wa-flotante:hover { transform: none; }
}

/* ==========================================================================
   21. Páginas de funcionalidad
   ========================================================================== */
.pag-hero {
  position: relative;
  color: var(--carta);
  background-color: var(--noche);
  padding-block: 7rem 4.5rem;
  isolation: isolate;
  overflow: hidden;
}
.pag-hero-fondo { position: absolute; inset: 0; z-index: -1; }
.pag-hero-fondo img { width: 100%; height: 100%; object-fit: cover; }
.pag-hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 22, .88) 0%, rgba(5, 10, 22, .8) 45%, rgba(5, 10, 22, .97) 100%),
    radial-gradient(60% 55% at 10% 70%, rgba(30, 107, 255, .32), transparent 70%);
}
.pag-hero-inner { position: relative; max-width: 46rem; }

.miga { font-size: .85rem; color: rgba(245, 247, 251, .45); margin-bottom: 1.75rem; }
.miga a { text-decoration: none; }
.miga a:hover { color: var(--cian); }

.pag-titulo {
  font-size: clamp(2.3rem, 9vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.03;
  color: var(--carta);
  margin-bottom: 1.25rem;
  max-width: 18ch;
}
.pag-hero .acento { color: var(--cian); }
.pag-hero .entrada { color: rgba(245, 247, 251, .75); margin-bottom: 2rem; }
.pag-hero .hero-acciones { flex-direction: column; }

/* Problema */
.lista-problema { display: grid; gap: 0; margin-top: 2rem; }
.problema-item {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  padding: 1.1rem 0 1.1rem 2rem;
  border-top: 1px solid var(--linea-oscura);
  position: relative;
}
.lista-problema .problema-item:last-child { border-bottom: 1px solid var(--linea-oscura); }
.problema-item::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: 1.65rem;
  width: 12px;
  height: 2px;
  background-color: #FF765A;
}

/* Ejemplo real */
.bloque-ejemplo { max-width: 44rem; }
.ejemplo-texto {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--tinta);
  margin: 0;
}

/* Beneficios */
.beneficios { display: grid; gap: 0; }
.beneficio {
  font-size: 1.15rem;
  color: var(--carta);
  padding: 1.25rem 0 1.25rem 2.25rem;
  border-top: 1px solid var(--linea-clara);
  position: relative;
}
.beneficios .beneficio:last-child { border-bottom: 1px solid var(--linea-clara); }
.beneficio::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: 1.65rem;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* Preguntas frecuentes */
.bloque-faq { max-width: 46rem; }
.faq { display: grid; }
.faq-item { border-top: 1px solid var(--linea-oscura); }
.faq-item:last-child { border-bottom: 1px solid var(--linea-oscura); }
.faq-pregunta {
  list-style: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.02em;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
}
.faq-pregunta::-webkit-details-marker { display: none; }
.faq-pregunta::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 1.9rem;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--azul);
  border-bottom: 2px solid var(--azul);
  transform: rotate(45deg);
  transition: transform .3s var(--curva);
}
.faq-item[open] .faq-pregunta::after { transform: rotate(-135deg); top: 2.1rem; }
.faq-respuesta { margin: 0 0 1.5rem; color: var(--tinta-suave); max-width: 52ch; }

/* Tarjetas sobre fondo claro */
.seccion-clara .tarjeta {
  background-color: #fff;
  border-color: var(--linea-oscura);
}
.seccion-clara .tarjeta:hover { border-color: var(--azul); background-color: #fff; }
.seccion-clara .tarjeta-titulo { color: var(--tinta); }
.seccion-clara .tarjeta-texto { color: var(--tinta-suave); }
.seccion-clara .tarjeta-marca { background-color: var(--azul); border-color: var(--azul); }
.seccion-clara .tarjeta-marca .tarjeta-titulo { color: #fff; }
.seccion-clara .tarjeta-marca .tarjeta-texto { color: rgba(255, 255, 255, .85); }

/* ==========================================================================
   22. Selector de idioma
   ========================================================================== */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--linea-clara);
  border-radius: 999px;
  margin-bottom: 1rem;
  align-self: flex-start;
}
.idioma-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(245, 247, 251, .6);
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
.idioma-op:hover { color: var(--carta); }
.idioma-activo {
  background-color: var(--azul);
  color: #fff;
}
.idioma-activo:hover { color: #fff; }

/* Sobre fondo claro (páginas de artículo) la cabecera sigue siendo oscura,
   así que el selector no necesita variante extra. */

/* ==========================================================================
   23. Bloque de definición del home
   ========================================================================== */
.definicion {
  background-color: var(--noche-2);
  color: var(--carta);
  padding-block: 3rem;
  border-bottom: 1px solid var(--linea-clara);
}
.definicion-texto {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--carta);
  max-width: 62ch;
  margin-bottom: 1.5rem;
}
.definicion-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.definicion-lista a {
  display: inline-block;
  font-size: .85rem;
  color: rgba(245, 247, 251, .75);
  text-decoration: none;
  border: 1px solid var(--linea-clara);
  border-radius: 999px;
  padding: .4rem .85rem;
  transition: border-color .2s ease, color .2s ease;
}
.definicion-lista a:hover { border-color: var(--cian); color: var(--carta); }
.definicion-pie { margin: 0; font-size: .95rem; color: rgba(245, 247, 251, .5); }
.enlace-doc { color: var(--cian); text-decoration: none; }
.enlace-doc:hover { text-decoration: underline; }

/* ==========================================================================
   24. Páginas informativas
   ========================================================================== */
.doc { max-width: 46rem; margin-inline: auto; }
.doc-p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.35rem; }
.doc-h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 2.75rem 0 1rem;
}
.doc-lista { display: grid; gap: .7rem; margin-bottom: 1.75rem; }
.doc-lista li { position: relative; padding-left: 1.6rem; font-size: 1.05rem; }
.doc-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--azul);
}
.doc-nota {
  background-color: var(--carta-2);
  border-left: 3px solid var(--azul);
  border-radius: 0 12px 12px 0;
  padding: 1.15rem 1.25rem;
  font-size: 1rem;
  color: var(--tinta);
  margin: 2rem 0;
}

.doc-cards { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; }
.doc-card {
  background-color: #fff;
  border: 1px solid var(--linea-oscura);
  border-radius: 16px;
  padding: 1.25rem 1.2rem;
}
.doc-card-titulo { font-size: 1.05rem; margin-bottom: .35rem; }
.doc-card-texto { margin: 0; font-size: .95rem; color: var(--tinta-suave); }

.doc-pasos { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; counter-reset: paso; }
.doc-paso {
  border-top: 1px solid var(--linea-oscura);
  padding-top: 1.1rem;
}
.doc-paso-num { font-size: .85rem; font-weight: 600; color: var(--azul); }
.doc-paso-titulo { font-size: 1.15rem; margin: .3rem 0 .35rem; }
.doc-paso-texto { margin: 0; color: var(--tinta-suave); }

.doc-tabla-caja { overflow-x: auto; margin: 1.5rem 0 2rem; }
.doc-tabla { width: 100%; border-collapse: collapse; font-size: 1rem; }
.doc-tabla th, .doc-tabla td {
  text-align: left;
  padding: .9rem .75rem;
  border-bottom: 1px solid var(--linea-oscura);
}
.doc-tabla th { font-weight: 600; color: var(--tinta); }
.doc-tabla td:last-child { font-weight: 600; color: var(--azul); white-space: nowrap; }

/* Tres rutas de contacto */
.rutas { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.rutas-titulo {
  font-size: .85rem;
  color: var(--tinta-suave);
  margin: 0;
}
.ruta {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border: 1px solid var(--linea-oscura);
  border-radius: 16px;
  padding: 1.35rem 1.25rem;
  transition: border-color .25s ease, transform .25s var(--curva);
}
.ruta:hover { border-color: var(--azul); transform: translateY(-3px); }
.ruta-titulo { font-size: 1.1rem; margin-bottom: .35rem; }
.ruta-texto { font-size: .95rem; color: var(--tinta-suave); margin-bottom: .7rem; }
.ruta-cta { font-weight: 500; color: var(--azul); font-size: .92rem; }

/* Dirección del pie */
.pie-dir {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(245, 247, 251, .5);
  margin-top: 1rem;
}

/* ==========================================================================
   25. Botón flotante de llamada
   ========================================================================== */
.tel-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background-color: var(--azul);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
  transition: transform .25s var(--curva), background-color .25s ease;
}
.tel-flotante:hover { transform: translateY(-3px); background-color: var(--azul-hondo); color: #fff; }
.tel-icono { width: 20px; height: 20px; fill: currentColor; flex: none; }
.tel-texto { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tel-flotante:hover, .ruta:hover { transform: none; }
}

/* Nota de cotización junto al formulario de contacto */
.nota-precio {
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(245, 247, 251, .6);
  max-width: 46ch;
  padding-left: 1rem;
  border-left: 2px solid var(--cian);
  margin-bottom: 1.75rem;
}

/* Campo trampa contra robots: invisible para las personas */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso que aparece al enviar el formulario */
.forma-aviso {
  margin: .9rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--cian);
  text-align: center;
}
.forma-aviso a { color: var(--cian); }