/* ============ VARIABLES: paleta negro + fucsia ============ */
:root { /* :root = elementos raíz; aquí guardamos valores reutilizables */
  --bg: #0a0a0a; /* Negro de fondo principal */
  --bg-alt: #141014; /* Negro ligeramente rosado para secciones alternas */
  --card: #1a131a; /* Fondo de las tarjetas */
  --line: #3a2338; /* Color de los bordes sutiles */
  --text: #f5f0f5; /* Texto claro principal */
  --muted: #bfb0bd; /* Texto claro secundario (más suave) */
  --fucsia: #e11d9c; /* Fucsia principal */
  --fucsia-dark: #a3066f; /* Fucsia más oscuro para degradados */
  --wa: #25d366; /* Verde oficial de WhatsApp */
  --radius: 16px; /* Redondeo de esquinas */
  --max: 1120px; /* Ancho máximo del contenido */
}

/* ============ BASE ============ */
* { /* Aplica a todos los elementos */
  box-sizing: border-box; /* El padding no agranda las cajas */
  margin: 0; /* Quita márgenes por defecto del navegador */
  padding: 0; /* Quita rellenos por defecto */
}
html { /* Elemento raíz */
  scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en el menú */
  scroll-padding-top: 72px; /* Evita que la barra fija tape los títulos al navegar */
}
body { /* Cuerpo de la página */
  font-family: Inter, system-ui, sans-serif; /* Tipografía; si falla, usa la del sistema */
  background: var(--bg); /* Fondo negro */
  color: var(--text); /* Texto claro */
  line-height: 1.6; /* Espacio entre líneas para leer cómodo */
  -webkit-font-smoothing: antialiased; /* Suaviza las letras en pantallas Mac/iOS */
}
a { /* Todos los links */
  color: inherit; /* Heredan el color del texto */
  text-decoration: none; /* Sin subrayado */
}
svg { /* Todos los SVG */
  display: block; /* Evita espacios extra debajo */
}
.wrap { /* Contenedor centrado */
  max-width: var(--max); /* No se pasa del ancho máximo */
  margin: 0 auto; /* Centra horizontalmente */
  padding: 0 20px; /* Margen lateral en celulares */
}
.icon { /* Estilo común de los íconos */
  width: 24px; /* Ancho */
  height: 24px; /* Alto */
  fill: none; /* Sin relleno */
  stroke: currentColor; /* Trazo del mismo color que el texto */
  stroke-width: 2; /* Grosor del trazo */
  stroke-linecap: round; /* Puntas redondeadas */
  stroke-linejoin: round; /* Esquinas redondeadas */
}
:focus-visible { /* Cuando se navega con teclado */
  outline: 2px solid var(--fucsia); /* Contorno fucsia visible */
  outline-offset: 3px; /* Separado del elemento */
}

/* ============ BOTONES ============ */
.btn { /* Botón base */
  display: inline-flex; /* Alinea contenido en fila */
  align-items: center; /* Centra verticalmente */
  gap: 8px; /* Espacio entre elementos internos */
  padding: 12px 24px; /* Relleno interno */
  border-radius: 999px; /* Forma de píldora */
  border: 1px solid transparent; /* Borde invisible para igualar tamaños */
  font: inherit; /* Usa la misma fuente de la página */
  font-weight: 700; /* Negrita */
  font-size: .95rem; /* Tamaño de letra */
  cursor: pointer; /* Cursor de mano */
  transition: transform .15s, box-shadow .15s; /* Anima el hover */
}
.btn:hover { /* Al pasar el mouse */
  transform: translateY(-2px); /* Sube un poquito */
}
.btn:disabled { /* Cuando está enviando */
  opacity: .6; /* Se ve apagado */
  cursor: wait; /* Cursor de espera */
}
.btn-primary { /* Botón principal fucsia */
  background: linear-gradient(135deg, var(--fucsia), var(--fucsia-dark)); /* Degradado fucsia a fucsia oscuro */
  color: #fff; /* Texto blanco */
  box-shadow: 0 8px 24px rgba(225, 29, 156, .3); /* Resplandor fucsia */
}
.btn-ghost { /* Botón secundario */
  border-color: var(--line); /* Borde sutil */
  color: var(--text); /* Texto claro */
}
.btn-ghost:hover { /* Al pasar el mouse */
  border-color: var(--fucsia); /* Borde se vuelve fucsia */
}

/* ============ HEADER ============ */
.header { /* Barra superior */
  position: sticky; /* Se queda fija al hacer scroll */
  top: 0; /* Pegada arriba */
  z-index: 50; /* Por encima del resto */
  background: rgba(10, 10, 10, .85); /* Negro semitransparente */
  backdrop-filter: blur(10px); /* Difumina lo que pasa por detrás */
  border-bottom: 1px solid transparent; /* Borde oculto hasta hacer scroll */
  transition: border-color .2s; /* Anima el borde */
}
.header.scrolled { /* Clase que agrega JavaScript al bajar */
  border-bottom-color: var(--line); /* Muestra el borde inferior */
}
.nav { /* Fila interna de la barra */
  display: flex; /* Elementos en fila */
  align-items: center; /* Centrados verticalmente */
  justify-content: space-between; /* Logo a la izquierda, botón a la derecha */
  height: 64px; /* Alto de la barra */
}
.logo { /* Logo en texto */
  font-weight: 700; /* Negrita */
  font-size: 1.25rem; /* Tamaño */
}
.logo span { /* La palabra "Web" del logo */
  color: var(--fucsia); /* Fucsia */
}
.menu { /* Lista del menú */
  display: flex; /* En fila */
  gap: 28px; /* Separación entre links */
  list-style: none; /* Sin viñetas */
  color: var(--muted); /* Color suave */
  font-size: .95rem; /* Tamaño */
}
.menu a:hover { /* Al pasar el mouse por un link */
  color: var(--fucsia); /* Se vuelve fucsia */
}
@media (max-width: 760px) { /* En pantallas pequeñas */
  .menu { display: none; } /* Oculta el menú para no saturar */
}

/* ============ HERO ============ */
.hero { /* Primera sección */
  padding: 88px 0 72px; /* Espacio arriba y abajo */
  background: radial-gradient(800px 420px at 85% -10%, rgba(225, 29, 156, .28), transparent), radial-gradient(600px 360px at 0% 10%, rgba(163, 6, 111, .25), transparent); /* Dos resplandores fucsia en las esquinas */
}
.hero-grid { /* Dos columnas */
  display: grid; /* Usa grilla */
  grid-template-columns: 1.1fr .9fr; /* Texto un poco más ancho que la maqueta */
  gap: 48px; /* Separación entre columnas */
  align-items: center; /* Centradas verticalmente */
}
.pill { /* Etiqueta sobre el título */
  display: inline-block; /* Se ajusta a su contenido */
  padding: 6px 14px; /* Relleno */
  border: 1px solid var(--line); /* Borde sutil */
  border-radius: 999px; /* Forma de píldora */
  font-size: .82rem; /* Letra pequeña */
  color: var(--fucsia); /* Texto fucsia */
  background: rgba(225, 29, 156, .08); /* Fondo fucsia muy suave */
  margin-bottom: 20px; /* Espacio hacia abajo */
}
h1 { /* Título principal */
  font-size: clamp(2.1rem, 5vw, 3.4rem); /* Tamaño que crece según la pantalla */
  line-height: 1.1; /* Líneas más juntas */
  letter-spacing: -.02em; /* Letras un poco más apretadas */
  margin-bottom: 20px; /* Espacio hacia abajo */
}
h1 em { /* Parte destacada del título */
  font-style: normal; /* Quita la cursiva */
  background: linear-gradient(135deg, #ff4fc3, var(--fucsia)); /* Degradado rosa a fucsia */
  -webkit-background-clip: text; /* Recorta el fondo con la forma del texto */
  background-clip: text; /* Versión estándar */
  color: transparent; /* Deja ver el degradado a través de las letras */
}
.lead { /* Bajada del hero */
  font-size: 1.15rem; /* Letra algo más grande */
  color: var(--muted); /* Color suave */
  max-width: 560px; /* Línea no demasiado larga */
  margin-bottom: 30px; /* Espacio hacia abajo */
}
.cta { /* Grupo de botones */
  display: flex; /* En fila */
  flex-wrap: wrap; /* Pasan a otra línea si no caben */
  gap: 12px; /* Separación */
}
.trust { /* Línea de confianza */
  margin-top: 30px; /* Espacio hacia arriba */
  color: var(--muted); /* Color suave */
  font-size: .9rem; /* Letra pequeña */
}
.trust strong { /* Palabras destacadas */
  color: var(--text); /* Color claro pleno */
}
@media (max-width: 900px) { /* En tablets y celulares */
  .hero-grid { grid-template-columns: 1fr; } /* Una sola columna */
  .hero { padding-top: 56px; } /* Menos espacio arriba */
}

/* ============ MAQUETA DE NAVEGADOR ============ */
.browser { /* Contenedor de la maqueta */
  background: var(--card); /* Fondo de tarjeta */
  border: 1px solid var(--line); /* Borde sutil */
  border-radius: var(--radius); /* Esquinas redondeadas */
  overflow: hidden; /* Recorta lo que sobresalga */
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6), 0 0 60px rgba(225, 29, 156, .15); /* Sombra negra y brillo fucsia */
}
.bar { /* Barra superior de la maqueta */
  display: flex; /* En fila */
  align-items: center; /* Centrada verticalmente */
  gap: 7px; /* Espacio entre puntos */
  padding: 12px 14px; /* Relleno */
  background: var(--bg-alt); /* Fondo */
  border-bottom: 1px solid var(--line); /* Línea inferior */
}
.bar i { /* Los tres puntos */
  width: 10px; /* Ancho */
  height: 10px; /* Alto */
  border-radius: 50%; /* Círculo */
  background: var(--line); /* Color */
}
.url { /* Cuadro con la dirección web */
  margin-left: 10px; /* Separación de los puntos */
  flex: 1; /* Ocupa el espacio restante */
  background: var(--bg); /* Fondo negro */
  border-radius: 8px; /* Esquinas */
  padding: 4px 12px; /* Relleno */
  font-size: .78rem; /* Letra pequeña */
  color: var(--muted); /* Color suave */
}
.screen { /* Pantalla falsa */
  padding: 24px; /* Relleno */
  display: grid; /* Grilla vertical */
  gap: 12px; /* Separación */
}
.sk { /* Barra "esqueleto" */
  height: 12px; /* Alto */
  border-radius: 6px; /* Esquinas */
  background: var(--line); /* Color */
}
.sk-title { /* Barra de título */
  height: 22px; /* Más alta */
  width: 70%; /* Ancho parcial */
  background: linear-gradient(90deg, var(--fucsia), var(--fucsia-dark)); /* Degradado fucsia */
}
.sk-long { width: 90%; } /* Párrafo largo */
.sk-short { width: 60%; } /* Párrafo corto */
.sk-row { /* Fila de cajas */
  display: grid; /* Grilla */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
  gap: 10px; /* Separación */
  margin-top: 6px; /* Espacio arriba */
}
.sk-box { /* Cada caja */
  height: 76px; /* Alto */
  border-radius: 10px; /* Esquinas */
  background: var(--bg-alt); /* Fondo */
  border: 1px solid var(--line); /* Borde */
}

/* ============ SECCIONES ============ */
.section { /* Sección genérica */
  padding: 88px 0; /* Espacio arriba y abajo */
}
.alt { /* Sección con fondo alterno */
  background: var(--bg-alt); /* Negro rosado */
}
.eyebrow { /* Mini título */
  color: var(--fucsia); /* Fucsia */
  font-weight: 700; /* Negrita */
  font-size: .85rem; /* Letra pequeña */
  letter-spacing: .08em; /* Letras separadas */
  text-transform: uppercase; /* Mayúsculas */
  margin-bottom: 10px; /* Espacio abajo */
}
h2 { /* Título de sección */
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); /* Tamaño adaptable */
  line-height: 1.2; /* Altura de línea */
  margin-bottom: 14px; /* Espacio abajo */
}
.sub { /* Bajada de sección */
  color: var(--muted); /* Color suave */
  max-width: 640px; /* Ancho máximo */
  margin-bottom: 44px; /* Espacio abajo */
}

/* ============ GRILLAS Y TARJETAS ============ */
.grid { /* Grilla genérica */
  display: grid; /* Usa grilla */
  gap: 20px; /* Separación */
}
.grid-2 { grid-template-columns: repeat(2, 1fr); } /* 2 columnas */
.grid-3 { grid-template-columns: repeat(3, 1fr); } /* 3 columnas */
.grid-4 { grid-template-columns: repeat(4, 1fr); } /* 4 columnas */
@media (max-width: 900px) { /* Tablets */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } /* Bajan a 2 columnas */
}
@media (max-width: 600px) { /* Celulares */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } /* Bajan a 1 columna */
}
.card { /* Tarjeta */
  background: var(--card); /* Fondo */
  border: 1px solid var(--line); /* Borde */
  border-radius: var(--radius); /* Esquinas */
  padding: 26px; /* Relleno */
  transition: border-color .2s, transform .2s; /* Anima el hover */
}
.card:hover { /* Al pasar el mouse */
  border-color: var(--fucsia); /* Borde fucsia */
  transform: translateY(-3px); /* Sube un poco */
}
.card h3 { /* Título de tarjeta */
  font-size: 1.1rem; /* Tamaño */
  margin-bottom: 8px; /* Espacio abajo */
}
.card p { /* Texto de tarjeta */
  color: var(--muted); /* Color suave */
  font-size: .95rem; /* Tamaño */
}
.ico { /* Cuadro del ícono */
  width: 46px; /* Ancho */
  height: 46px; /* Alto */
  display: grid; /* Para centrar */
  place-items: center; /* Centra el ícono */
  border-radius: 12px; /* Esquinas */
  background: rgba(225, 29, 156, .12); /* Fondo fucsia suave */
  color: var(--fucsia); /* Ícono fucsia */
  margin-bottom: 16px; /* Espacio abajo */
}

/* ============ PASOS ============ */
.grid-4 { counter-reset: paso; } /* Reinicia el contador de pasos */
.step { /* Cada paso */
  background: var(--card); /* Fondo */
  border: 1px solid var(--line); /* Borde */
  border-radius: var(--radius); /* Esquinas */
  padding: 26px; /* Relleno */
}
.step::before { /* Círculo con número, creado con CSS */
  counter-increment: paso; /* Suma 1 al contador */
  content: counter(paso); /* Muestra el número */
  display: grid; /* Para centrar */
  place-items: center; /* Centra el número */
  width: 36px; /* Ancho */
  height: 36px; /* Alto */
  border-radius: 50%; /* Círculo */
  background: linear-gradient(135deg, var(--fucsia), var(--fucsia-dark)); /* Degradado */
  color: #fff; /* Número blanco */
  font-weight: 700; /* Negrita */
  margin-bottom: 14px; /* Espacio abajo */
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; } /* Título del paso */
.step p { color: var(--muted); font-size: .92rem; } /* Texto del paso */

/* ============ PRECIOS ============ */
.price { /* Tarjeta de precio */
  display: flex; /* Columna flexible */
  flex-direction: column; /* Apila el contenido */
  position: relative; /* Para ubicar la etiqueta */
}
.price.hot { /* Tarjeta destacada */
  border-color: var(--fucsia); /* Borde fucsia */
  box-shadow: 0 0 40px rgba(225, 29, 156, .15); /* Brillo fucsia */
}
.tag { /* Etiqueta flotante */
  position: absolute; /* Posición libre */
  top: -12px; /* Sobresale por arriba */
  left: 24px; /* Separada del borde izquierdo */
  background: var(--fucsia); /* Fondo fucsia */
  color: #fff; /* Texto blanco */
  font-size: .75rem; /* Letra pequeña */
  font-weight: 700; /* Negrita */
  padding: 3px 12px; /* Relleno */
  border-radius: 999px; /* Píldora */
}
.amount { /* Precio grande */
  font-size: 2rem; /* Tamaño grande */
  font-weight: 700; /* Negrita */
  margin: 8px 0 4px; /* Espaciado */
}
.amount small { /* Aclaración del precio */
  font-size: .85rem; /* Pequeña */
  color: var(--muted); /* Color suave */
  font-weight: 400; /* Sin negrita */
}
.price ul { /* Lista de beneficios */
  list-style: none; /* Sin viñetas */
  display: grid; /* Grilla vertical */
  gap: 10px; /* Separación */
  margin: 18px 0 24px; /* Espaciado */
  color: var(--muted); /* Color suave */
  font-size: .95rem; /* Tamaño */
  flex: 1; /* Empuja el botón al fondo */
}
.price li { /* Cada beneficio */
  display: flex; /* Ícono y texto en fila */
  gap: 10px; /* Separación */
}
.price li .icon { /* Ícono check */
  width: 18px; /* Ancho */
  height: 18px; /* Alto */
  stroke: var(--fucsia); /* Check fucsia */
  flex: none; /* No se achica */
  margin-top: 4px; /* Alinea con la primera línea */
}
.note { /* Nota bajo los precios */
  margin-top: 22px; /* Espacio arriba */
  text-align: center; /* Centrada */
  color: var(--muted); /* Color suave */
  font-size: .88rem; /* Pequeña */
}

/* ============ CONTACTO ============ */
.contact-grid { /* Dos columnas */
  display: grid; /* Grilla */
  grid-template-columns: .9fr 1.1fr; /* Datos y formulario */
  gap: 40px; /* Separación */
  align-items: start; /* Alineadas arriba */
}
@media (max-width: 860px) { /* Tablets y celulares */
  .contact-grid { grid-template-columns: 1fr; } /* Una columna */
}
.info { /* Link de contacto */
  display: flex; /* En fila */
  align-items: center; /* Centrado vertical */
  gap: 14px; /* Separación */
  color: var(--muted); /* Color suave */
  margin-bottom: 16px; /* Espacio abajo */
}
.info:hover { color: var(--text); } /* Al pasar el mouse se aclara */
.info .ico { margin-bottom: 0; } /* Quita margen del ícono */
form { /* Formulario */
  display: grid; /* Grilla vertical */
  gap: 16px; /* Separación */
  background: var(--card); /* Fondo */
  border: 1px solid var(--line); /* Borde */
  border-radius: var(--radius); /* Esquinas */
  padding: 28px; /* Relleno */
}
label { /* Etiqueta de campo */
  display: grid; /* Texto sobre el campo */
  gap: 6px; /* Separación */
  font-size: .88rem; /* Letra pequeña */
  color: var(--muted); /* Color suave */
}
input, textarea { /* Campos de texto */
  font: inherit; /* Misma fuente */
  color: var(--text); /* Texto claro */
  background: var(--bg); /* Fondo negro */
  border: 1px solid var(--line); /* Borde */
  border-radius: 10px; /* Esquinas */
  padding: 12px 14px; /* Relleno */
  width: 100%; /* Ancho completo */
}
input:focus, textarea:focus { /* Al escribir en el campo */
  outline: 2px solid var(--fucsia); /* Contorno fucsia */
  border-color: transparent; /* Oculta el borde normal */
}
textarea { /* Cuadro de mensaje */
  min-height: 110px; /* Alto mínimo */
  resize: vertical; /* Solo se estira hacia abajo */
}
.row2 { /* Fila de dos campos */
  display: grid; /* Grilla */
  grid-template-columns: 1fr 1fr; /* Dos columnas */
  gap: 16px; /* Separación */
}
@media (max-width: 560px) { /* Celulares */
  .row2 { grid-template-columns: 1fr; } /* Una columna */
}
.hp { /* Campo trampa anti-bots */
  position: absolute; /* Fuera del flujo */
  left: -9999px; /* Lo saca de la pantalla */
}
#msg { /* Mensaje de resultado */
  min-height: 1.3em; /* Reserva espacio para que no salte */
  font-size: .92rem; /* Tamaño */
}
#msg.ok { color: var(--wa); } /* Éxito en verde */
#msg.err { color: #ff6b8b; } /* Error en rosa rojizo */

/* ============ FOOTER ============ */
.footer { /* Pie de página */
  border-top: 1px solid var(--line); /* Línea superior */
  padding: 34px 0; /* Espacio */
  color: var(--muted); /* Color suave */
  font-size: .88rem; /* Pequeña */
}
.foot { /* Fila del pie */
  display: flex; /* En fila */
  flex-wrap: wrap; /* Salta de línea si no cabe */
  justify-content: space-between; /* Separa los extremos */
  gap: 12px; /* Separación */
}

/* ============ BOTÓN FLOTANTE WHATSAPP ============ */
.wa-float { /* Botón redondo */
  position: fixed; /* Fijo en la pantalla */
  right: 18px; /* Distancia a la derecha */
  bottom: 18px; /* Distancia abajo */
  z-index: 60; /* Sobre todo lo demás */
  width: 58px; /* Ancho */
  height: 58px; /* Alto */
  border-radius: 50%; /* Círculo */
  background: var(--wa); /* Verde WhatsApp */
  display: grid; /* Para centrar */
  place-items: center; /* Centra el ícono */
  box-shadow: 0 10px 28px rgba(37, 211, 102, .4); /* Sombra verde */
  transition: transform .15s; /* Anima el hover */
}
.wa-float:hover { transform: scale(1.08); } /* Crece al pasar el mouse */
.wa-float .icon { /* Ícono interno */
  width: 30px; /* Ancho */
  height: 30px; /* Alto */
  stroke: #fff; /* Blanco */
}

/* ============ ANIMACIÓN AL HACER SCROLL ============ */
.reveal { /* Elementos que aparecen al bajar */
  opacity: 0; /* Invisibles al inicio */
  transform: translateY(20px); /* Un poco más abajo */
  transition: opacity .6s, transform .6s; /* Animan al aparecer */
}
.reveal.visible { /* Clase que agrega JavaScript */
  opacity: 1; /* Se hacen visibles */
  transform: none; /* Vuelven a su lugar */
}
@media (prefers-reduced-motion: reduce) { /* Si el usuario prefiere menos animación */
  * { transition: none !important; scroll-behavior: auto !important; } /* Desactiva animaciones */
  .reveal { opacity: 1; transform: none; } /* Muestra todo de inmediato */
}