/* =========================================================
   DaTuIdea — landing page styles
   Paleta oficial (Opción 1 del kit de marca):
   azul #2563EB · morado #7C3AED · verde #10B981
   tinta #0F172A · gris claro #F3F4F6
   ========================================================= */

:root {
  --blue: #2563EB;
  --purple: #7C3AED;
  --green: #10B981;
  --ink: #0F172A;
  --gray-light: #F3F4F6;

  --bg: #ffffff;
  --bg-alt: var(--gray-light);
  --text: var(--ink);
  --text-muted: #475569;
  --border: #e2e8f0;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);

  --gradient-brand: linear-gradient(135deg, var(--blue), var(--purple));

  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --max-width: 1120px;
  --radius: 16px;
  --radius-sm: 10px;
}

/* Tema oscuro: se activa solo por preferencia del sistema, sin JS */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --bg-alt: #0F172A;
    --text: #F1F5F9;
    --text-muted: #A6B0C3;
    --border: #1e293b;
    --card-bg: #111c31;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* evita el "salto" del ancho al aparecer/ocultarse la barra de scroll */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  /* el texto nunca debe generar scroll horizontal en móvil */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 88px 0;
}

@media (max-width: 640px) {
  section {
    padding: 64px 0;
  }
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
}

p {
  margin: 0 0 16px;
  color: var(--text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.eyebrow--live {
  color: var(--green);
  background: rgba(16, 185, 129, 0.12);
}

.eyebrow--soon {
  color: var(--purple);
  background: rgba(124, 58, 237, 0.12);
}

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Logo (wordmark en texto real, escala perfecta) ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-height: 44px;
}

.brand__icon {
  height: 34px;
  width: auto;
}

.brand__word {
  font-weight: 700;
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--text);
}

.brand__word .idea {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__word .tld {
  font-weight: 500;
  color: var(--text-muted);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}

/* color-mix puede no existir en navegadores muy viejos: damos un fondo sólido de respaldo */
@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .site-header {
    background: var(--bg);
  }
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--blue);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* En pantallas angostas escondemos los enlaces de ancla y dejamos logo + CTA */
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
}

/* En móvil muy angosto, el wordmark completo + botón de WhatsApp con texto
   no caben en una sola fila: se reduce el logo y el botón queda solo ícono. */
@media (max-width: 420px) {
  .brand__word {
    font-size: 1.05rem;
  }
  .header-actions .btn-whatsapp {
    padding: 12px;
    min-width: 44px;
  }
  .header-actions .btn-whatsapp .btn-label {
    display: none;
  }
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.38);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-whatsapp {
  background: #25D366;
  color: #06210f;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.28);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.38);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-top: 72px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.16), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

.hero__icon {
  width: 88px;
  height: auto;
  margin-bottom: 8px;
}

.hero h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing: -0.01em;
}

.hero p.lead {
  font-size: 1.1rem;
  max-width: 620px;
}

/* ---------- Valores (3 columnas) ---------- */

.values {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.value-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.value-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  margin-bottom: 18px;
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.value-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.value-card p {
  margin: 0;
  font-size: 0.96rem;
}

/* ---------- Producto (Memory Cloud / Próximamente) ---------- */

.product {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.product.reverse .product__visual {
  order: -1;
}

@media (max-width: 900px) {
  .product,
  .product.reverse .product__visual {
    grid-template-columns: 1fr;
    order: initial;
  }
  .product {
    gap: 36px;
  }
}

.feature-list {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--text);
}

.feature-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--green);
}

/* Mockup ilustrativo (no es una captura real de la app) */
.mockup {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mockup__qr {
  width: 128px;
  height: 128px;
  border-radius: 14px;
  background: var(--gradient-brand);
  padding: 10px;
}

.mockup__qr svg {
  width: 100%;
  height: 100%;
}

.mockup__caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.mockup__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.mockup__grid span {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

.mockup__grid span:nth-child(1) { background: linear-gradient(135deg, var(--blue), var(--purple)); opacity: 0.85; }
.mockup__grid span:nth-child(4) { background: linear-gradient(135deg, var(--purple), var(--green)); opacity: 0.7; }
.mockup__grid span:nth-child(6) { background: linear-gradient(135deg, var(--blue), var(--green)); opacity: 0.6; }

/* ---------- Precios ---------- */

.pricing {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  max-width: 860px;
  margin: 0 auto;
}

.plan {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.6rem 1.6rem;
  box-shadow: var(--card-shadow);
}

/* El destacado se marca con el borde y la cinta, no con un fondo de color:
   un bloque de color junto a uno blanco hace que el blanco parezca la opción
   descartada, y el evento pequeño es una venta perfectamente buena. */
.plan--destacado { border-color: var(--blue); }

.plan__cinta {
  position: absolute;
  top: -0.7rem;
  left: 1.6rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.plan__tipo {
  margin: 0 0 1.2rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.plan__lista {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.plan__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.plan__lista span { color: var(--text-muted); font-size: 0.94rem; }
.plan__lista em { font-style: normal; opacity: 0.7; font-size: 0.85em; }
.plan__lista b { font-size: 1.15rem; font-weight: 600; white-space: nowrap; }

/* El combo es la fila que queremos que se elija, así que es la única con
   fondo: el ojo va al bloque distinto antes que al número más grande. */
.plan__combo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.plan__combo > span { font-weight: 600; font-size: 0.94rem; }
.plan__combo b {
  margin-left: auto;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan__combo em {
  width: 100%;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
}

.plan__ancla {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.incluye {
  list-style: none;
  max-width: 860px;
  margin: 1.6rem auto 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem 1.5rem;
}

.incluye li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.btn-row.center { justify-content: center; }

/* ---------- Vista previa de la invitación ----------
   Los colores NO usan las variables de la landing a propósito: esto no es
   un componente de esta página, es la muestra de otro producto. Si mañana
   la landing cambia de paleta, la tarjeta de boda tiene que seguir viéndose
   como una tarjeta de boda. Son los valores literales del tema Nocturna. */

.invitacion {
  background: #0A0A0F;
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(10, 10, 15, 0.35);
}

/* El filete de oro por dentro del borde: el mismo recurso que usa la
   invitación de verdad, y lo que separa "un rectángulo negro" de "una
   tarjeta". */
.invitacion__marco {
  border: 1px solid rgba(216, 179, 106, 0.28);
  border-radius: 14px;
  padding: 38px 24px 32px;
  text-align: center;
  color: #F0EAE0;
}

.invitacion__eyebrow {
  margin: 0 0 18px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D8B36A;
}

/* Cormorant no está cargada en esta página y no vale la pena traerla por
   seis palabras: una serif del sistema da el mismo gesto sin pedir una
   fuente más al navegador. */
.invitacion__nombres {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1.1;
  color: #F7E9CC;
}

.invitacion__nombres span {
  display: block;
  font-size: 0.62em;
  font-style: italic;
  color: #D8B36A;
  margin: 0.1em 0;
}

.invitacion__filete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 18px;
}

.invitacion__filete i {
  height: 1px;
  width: 46px;
  background: linear-gradient(90deg, transparent, #A9853F);
}

.invitacion__filete i:last-child { transform: scaleX(-1); }

.invitacion__filete b {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: #D8B36A;
}

.invitacion__fecha {
  margin: 0 0 22px;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: #C9C2B8;
}

.invitacion__cuenta {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 26px;
}

.invitacion__cuenta span {
  display: grid;
  gap: 2px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9E958A;
}

.invitacion__cuenta b {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #F7E9CC;
  letter-spacing: 0;
}

.invitacion__rsvp {
  display: inline-block;
  margin: 0;
  padding: 11px 26px;
  border: 1px solid rgba(216, 179, 106, 0.45);
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: #F7E9CC;
}

.soon-card {
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: 24px;
  padding: 32px;
  text-align: center;
}

.soon-card__invite {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 20px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 28px 20px;
  position: relative;
}

.soon-card__invite::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.soon-card__invite .line {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  margin: 10px auto;
}

.soon-card__invite .line.w-70 { width: 70%; }
.soon-card__invite .line.w-50 { width: 50%; }
.soon-card__invite .line.w-40 { width: 40%; }

/* ---------- Contacto ---------- */

.contact {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}

.contact-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card__icon svg {
  width: 26px;
  height: 26px;
}

.contact-card--whatsapp .contact-card__icon {
  background: rgba(37, 211, 102, 0.14);
  color: #1fa855;
}

.contact-card--email .contact-card__icon {
  background: rgba(37, 99, 235, 0.12);
  color: var(--blue);
}

.contact-card strong {
  font-size: 1.02rem;
}

.contact-card span {
  color: var(--text-muted);
  font-size: 0.92rem;
  word-break: break-word;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--blue);
}

/* Utilidad: foco visible consistente en toda la página */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* =========================================================
   BRILLO — capa puramente decorativa
   Todo lo de aquí abajo se suma encima de la página ya
   terminada: si se borra el bloque entero, la landing sigue
   funcionando y viéndose bien. Nada aquí sostiene el layout.
   La regla global de prefers-reduced-motion (arriba) ya anula
   estas animaciones; cada una está escrita para que su estado
   final sea el visible, de modo que anularla nunca esconde
   contenido.
   ========================================================= */

/* ---------- Texto con degradado de marca ---------- */

.grad {
  background: linear-gradient(120deg, var(--blue), var(--purple) 55%, var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Aurora del hero ----------
   El hero ya tenía dos manchas de color fijas. Aquí se les da
   una deriva muy lenta (~22 s) para que el fondo respire en vez
   de quedarse plano. Se mueve el pseudo-elemento, no el texto:
   animar el fondo detrás de un titular lo vuelve ilegible. */

.hero::before {
  animation: auroraDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* Segunda mancha, en contrafase, para que el movimiento no se
   lea como un vaivén único y mecánico. */
.hero::after {
  content: "";
  position: absolute;
  inset: -10% -20% auto auto;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.14), transparent 60%);
  pointer-events: none;
  z-index: -1;
  animation: auroraDrift 28s ease-in-out infinite alternate-reverse;
  will-change: transform;
}

@keyframes auroraDrift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* El isotipo flota apenas. 10 px en 6 s: se percibe como que la
   página está viva, no como un elemento moviéndose. */
.hero__icon {
  animation: floaty 6s ease-in-out infinite alternate;
}

@keyframes floaty {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* ---------- Aparición al hacer scroll ----------
   El estado oculto SOLO existe si el script arrancó (html.js).
   Sin JavaScript, o si el script falla, todo está visible desde
   el principio: una animación de entrada jamás debe ser lo que
   decide si el contenido se ve. */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Escalonado dentro de una misma fila de tarjetas */
html.js .reveal[data-delay="1"] { transition-delay: 0.09s; }
html.js .reveal[data-delay="2"] { transition-delay: 0.18s; }
html.js .reveal[data-delay="3"] { transition-delay: 0.27s; }

/* ---------- Tarjetas de valor ---------- */

.value-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Filo superior de marca: aparece al pasar el cursor y da la
   sensación de que la tarjeta "se enciende". */
.value-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.value-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  box-shadow: var(--card-shadow);
}

.value-card:hover::before {
  transform: scaleX(1);
}

.value-card__icon {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.value-card:hover .value-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

/* ---------- Botón principal: barrido de luz ---------- */

.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary > * {
  position: relative;
  z-index: 1;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
  left: 130%;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

/* ---------- "Ya disponible": el punto late ----------
   Un indicador de estado en vivo que no se mueve parece una
   calcomanía. Latiendo, se lee como que de verdad está encendido. */

.eyebrow--live svg {
  animation: livePulse 2.2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}

/* ---------- Mockup: las fotos van llegando ----------
   Las casillas se encienden en cascada, que es exactamente lo
   que hace el producto: las fotos de los invitados van cayendo
   una tras otra. La animación cuenta la historia del producto,
   no es adorno. */

.mockup {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.mockup:hover {
  transform: translateY(-5px);
}

.mockup__qr {
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.55);
}

html.js .mockup.is-in .mockup__grid span {
  animation: tileIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.mockup__grid span:nth-child(1) { animation-delay: 0.10s; }
.mockup__grid span:nth-child(2) { animation-delay: 0.18s; }
.mockup__grid span:nth-child(3) { animation-delay: 0.26s; }
.mockup__grid span:nth-child(4) { animation-delay: 0.34s; }
.mockup__grid span:nth-child(5) { animation-delay: 0.42s; }
.mockup__grid span:nth-child(6) { animation-delay: 0.50s; }
.mockup__grid span:nth-child(7) { animation-delay: 0.58s; }
.mockup__grid span:nth-child(8) { animation-delay: 0.66s; }

@keyframes tileIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Tarjetas de contacto ---------- */

.contact-card {
  position: relative;
  overflow: hidden;
}

.contact-card__icon {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-card:hover .contact-card__icon {
  transform: scale(1.1);
}

.contact-card--whatsapp:hover {
  border-color: color-mix(in srgb, #25D366 45%, var(--border));
}

.contact-card--email:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
}

/* ---------- La cuadrícula, más llena ----------
   Con solo tres casillas de color la rejilla se leía como algo a medio cargar
   en vez de como un álbum llenándose. Se colorean todas, alternando tonos e
   intensidades para que parezcan fotos distintas y no un patrón. */

.mockup__grid span:nth-child(2) { background: linear-gradient(135deg, var(--purple), var(--blue)); opacity: 0.34; }
.mockup__grid span:nth-child(3) { background: linear-gradient(160deg, var(--green), var(--blue)); opacity: 0.5; }
.mockup__grid span:nth-child(5) { background: linear-gradient(135deg, var(--blue), var(--purple)); opacity: 0.28; }
.mockup__grid span:nth-child(7) { background: linear-gradient(200deg, var(--purple), var(--green)); opacity: 0.45; }
.mockup__grid span:nth-child(8) { background: linear-gradient(135deg, var(--green), var(--purple)); opacity: 0.6; }

/* ---------- Tarjeta de "Próximamente" ----------
   Las líneas usaban el color de los bordes y en la práctica no se veían: la
   tarjeta salía casi vacía, que parece un error de carga, no un boceto. Un
   tinte de marca la lee como lo que es: una maqueta. */

.soon-card__invite .line {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--blue) 34%, transparent),
    color-mix(in srgb, var(--purple) 26%, transparent));
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .soon-card__invite .line {
    background: rgba(37, 99, 235, 0.28);
  }
}

/* Un par de renglones más y un remate, para que se lea como una invitación */
.soon-card__invite::after {
  content: "";
  display: block;
  width: 34%;
  height: 10px;
  border-radius: 999px;
  margin: 18px auto 0;
  background: var(--gradient-brand);
  opacity: 0.55;
}

.soon-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}

.soon-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--purple) 40%, var(--border));
}

/* ---------- Preguntas frecuentes ----------
   Se usa <details>/<summary> nativo: el navegador ya sabe abrir y cerrar, y el
   texto de las respuestas EXISTE en el HTML aunque esté plegado. Un acordeón
   hecho con JavaScript que inserta el texto al hacer clic deja al buscador sin
   nada que leer, que es justo lo contrario de lo que se busca aquí. */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
  box-shadow: var(--card-shadow);
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  .faq-item[open] { border-color: var(--blue); }
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  /* Oculta el triangulito por defecto en todos los navegadores; el nuestro es
     el "+" de la derecha, que gira al abrir. */
  list-style: none;
  min-height: 44px;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* El h3 va DENTRO del summary para que el título de cada pregunta siga siendo
   un encabezado real del documento, no un párrafo con negrita. */
.faq-item summary h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  /* Un "+" dibujado con dos degradados: sin imagen y sin icono extra que cargar */
  background:
    linear-gradient(var(--blue), var(--blue)) center / 100% 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 100% no-repeat;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item[open] summary::after {
  transform: rotate(135deg); /* el + se convierte en × */
}

.faq-item summary:hover h3 {
  color: var(--blue);
}

.faq-answer {
  padding: 0 24px 22px;
}

.faq-answer p {
  margin: 0;
  font-size: 0.97rem;
}

@media (max-width: 640px) {
  .faq-item summary { padding: 18px; }
  .faq-answer { padding: 0 18px 20px; }
  .faq-item summary h3 { font-size: 0.98rem; }
}

/* ---------- Remate de marca en el pie ---------- */

.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--purple), var(--green), transparent);
  opacity: 0.7;
}