/* ============================================================
   COMPONENTS.CSS · Piezas reutilizables:
   botones, chips, tarjetas, formulario, video, botón flotante
   de WhatsApp, barra de progreso de scroll y grano de película.
   ============================================================ */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
  padding: 1rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
  text-align: center;
}
.btn:active { transform: translateY(1px) scale(.99); }

/* Primario = CTA rojo (ÚNICO rojo · máxima visibilidad) */
.btn--primary {
  background: var(--grad-cta);
  color: var(--c-cta-ink);
  box-shadow: 0 10px 44px -10px var(--glow-cta);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px -8px var(--glow-cta);
}

/* Secundario = contorno con RELLENO DESLIZANTE (slide-fill) */
.btn--ghost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, .03);
  border-color: var(--border-strong);
  color: var(--text);
}
/* Capa de acento que entra desde la izquierda al pasar el ratón */
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-accent);
  transform: translateX(-101%);
  transition: transform .5s var(--ease-soft);
}
.btn--ghost:hover {
  border-color: var(--c-accent);
  color: var(--c-accent-ink);   /* texto oscuro cuando el acento rellena */
}
.btn--ghost:hover::before { transform: translateX(0); }

.btn--lg { padding: 1.15rem 2rem; font-size: var(--fs-lg); }
.btn--block { width: 100%; }

.btn__icon { width: 20px; height: 20px; flex: none; }

/* ---------- Chips / etiquetas ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); flex: none; }

/* ---------- Badge de icono (SVG de línea sobre gradiente suave) ---------- */
.icon-badge {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--grad-accent-soft);
  border: 1px solid var(--border);
  color: var(--c-accent);
  flex: none;
}
.icon-badge svg { width: 26px; height: 26px; }

/* ---------- Tarjetas · Dark Glassmorphism (estilo Apple/macOS) ----------
   Cristal oscuro translúcido: gradiente blanco muy sutil sobre una base
   sólida muy oscura, desenfoque de fondo y borde especular fino. El hover
   intensifica el borde y añade una sombra de luz difusa. Mantiene la
   paleta y la tipografía de la marca. */
.card {
  position: relative;
  background: var(--glass-bg);                 /* cristal translúcido y gris */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);       /* borde especular fino */
  border-radius: 24px;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
}
.card:hover {
  border-color: var(--glass-border-strong);    /* el cristal "se ilumina" */
  box-shadow: var(--glass-sh-hover);           /* luz difusa y elegante */
  transform: translateY(-3px);
}
.card h3 { font-size: var(--fs-xl); margin-top: 1.1rem; }
.card p { color: var(--text-muted); margin-top: .6rem; }

/* Tilt 3D (effects.js) */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---------- Lista "qué incluye" con check ---------- */
.ticklist { display: grid; gap: .9rem; margin-top: 1.25rem; }
.ticklist li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: var(--text-muted);
}
.ticklist li::before {
  content: "";
  width: 22px; height: 22px; flex: none;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--grad-accent-soft);
  border: 1px solid var(--border-strong);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

/* ---------- Formulario ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: .45rem; }
.form__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.form__label .req { color: var(--text-dim); }

.form__control {
  width: 100%;
  padding: .9rem 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--t-base), background var(--t-base);
}
.form__control::placeholder { color: var(--text-dim); }
.form__control:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(255, 255, 255, .05);
}
textarea.form__control { resize: vertical; min-height: 96px; }

select.form__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

/* Estado de error por campo */
.form__row.has-error .form__control { border-color: #ff4d4d; }
.form__error {
  color: #ff6b6b;
  font-size: .82rem;
  min-height: 1em;
}

/* Microcopy de confianza bajo el formulario */
.form-note {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  text-align: center;
}
.form-note svg { width: 16px; height: 16px; flex: none; color: var(--c-accent); }

/* Mensaje de éxito / error global */
.form__status {
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  font-size: var(--fs-sm);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status--ok {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.form__status--err {
  background: rgba(255, 77, 77, .12);
  border: 1px solid #ff4d4d;
  color: #ffb3b3;
}

/* ---------- Video de ventas (carga diferida) ---------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000 center/cover no-repeat;
  box-shadow: var(--sh-lg);
}
.video__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.2));
}
.video__play-btn {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: var(--c-accent-ink);
  display: grid; place-items: center;
  box-shadow: var(--sh-glow);
  transition: transform var(--t-base);
}
.video__play-btn svg { width: 34px; height: 34px; margin-left: 4px; }
.video__play:hover .video__play-btn { transform: scale(1.08); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Placeholder cuando no hay video */
.video__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.07), transparent 70%),
    var(--surface);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: clamp(14px, 3vw, 22px);
  bottom: clamp(14px, 3vw, 22px);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  z-index: 900;
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .45);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 12px 26px -6px rgba(0, 0, 0, .5); }
.wa-float svg { width: 26px; height: 26px; }

/* ---------- Botón "volver arriba" (aparece al hacer scroll) ---------- */
.to-top {
  position: fixed;
  left: clamp(14px, 3vw, 22px);
  bottom: clamp(14px, 3vw, 22px);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  z-index: 900;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--c-accent); background: var(--surface-2); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- Barra de progreso de scroll (effects.js) ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--grad-accent);
  z-index: 1500;
}

/* ---------- Grano de película (overlay global sutil) ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CURSOR CUSTOM (dos círculos · solo escritorio con puntero fino)
   ============================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  display: none;                 /* se activa solo en escritorio */
  mix-blend-mode: difference;    /* se invierte sobre cualquier fondo */
  opacity: 0;                    /* oculto hasta el primer movimiento */
  transition: opacity .25s ease;
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

.cursor-dot,
.cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; margin: -3px; background: #fff; border-radius: 50%; }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px;
  border: 1.5px solid #fff; border-radius: 50%;
  transition: width .35s var(--ease-soft), height .35s var(--ease-soft), margin .35s var(--ease-soft);
}
.cursor.is-interactive .cursor-ring { width: 54px; height: 54px; margin: -27px; }

/* Oculta el cursor nativo cuando el custom está activo… */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-tilt] { cursor: none; }
/* …pero lo restaura en campos de texto para que escribir sea cómodo */
.has-cursor input, .has-cursor textarea { cursor: text; }
.has-cursor select { cursor: pointer; }

/* ============================================================
   MARQUEE (cinta de palabras en bucle infinito · CSS puro)
   ============================================================ */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--border);
  padding-block: 1.15rem;
  background: var(--bg-deep);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.05rem, .85rem + 1vw, 1.6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.marquee__track .sep { color: var(--c-accent); font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   SPLIT-TEXT (entrada de palabras del titular, con stagger)
   Las palabras solo existen tras ejecutar el JS; si el JS falla,
   el texto original permanece visible (contenido primero).
   ============================================================ */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.split-word.is-in { opacity: 1; transform: none; }
.no-js .split-word { opacity: 1; transform: none; }
/* Con "reducir movimiento" conservamos un fundido suave (sin desplazamiento) */
@media (prefers-reduced-motion: reduce) {
  .split-word { transform: none; }
}

/* ============================================================
   FEEDBACK DE ENVÍO DEL FORMULARIO (spinner → check)
   ============================================================ */
.btn--submit { position: relative; }
.btn--submit .btn__label { transition: opacity .2s ease; }
.btn--submit .btn__spinner,
.btn--submit .btn__check {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
}
.btn--submit.is-sending .btn__label { opacity: 0; }
.btn--submit.is-sending .btn__spinner { opacity: 1; }
.btn--submit.is-sent .btn__label { opacity: 0; }
.btn--submit.is-sent .btn__check { opacity: 1; }

.btn__spinner::after {
  content: "";
  width: 20px; height: 20px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn__check svg { width: 24px; height: 24px; }
.btn__check path {
  stroke: currentColor;
  stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.btn--submit.is-sent .btn__check path { animation: check-draw .45s var(--ease-soft) forwards; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* ============================================================
   HONEYPOT (campo trampa anti-spam · invisible y fuera del foco)
   ============================================================ */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   TOAST (aviso breve, p. ej. "enlace copiado")
   ============================================================ */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: .8rem 1.4rem;
  font-size: var(--fs-sm);
  box-shadow: var(--sh-lg);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s var(--ease-soft);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }