/* Estilos exclusivos de la landing. Depende de tokens.css + base.css. */

/* ── Marca / logo ─────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: .7rem; }
.marca__mono {
  width: 2.15rem; height: 2.15rem;
  flex: none;
  color: var(--acento);
}
.marca__texto {
  display: flex; flex-direction: column; line-height: 1;
  min-width: 0;   /* deja encoger el lema en pantallas angostas */
}
.marca__nombre {
  font-family: var(--f-display);
  font-size: 1.28rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.marca__sub {
  font-size: .58rem;
  letter-spacing: var(--tracking-marca);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-top: .3rem;
}
.marca--grande .marca__mono { width: 3.4rem; height: 3.4rem; }
.marca--grande .marca__nombre { font-size: 1.7rem; }

@media (max-width: 560px) {
  /* El lema con tracking .34em no cabe en 375 px: se apila y se aprieta. */
  .marca--grande { flex-direction: column; gap: 1rem; text-align: center; }
  .marca--grande .marca__texto { align-items: center; }
  .marca__sub { font-size: .5rem; letter-spacing: .2em; }
}

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color var(--d-media) var(--e-suave),
              box-shadow var(--d-media) var(--e-suave),
              backdrop-filter var(--d-media);
}
.nav__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
}
.nav.es-fija {
  background: rgba(253, 252, 250, .86);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--linea);
}
/* Sobre el hero oscuro el nav va en claro; al fijarse vuelve a tinta. */
.nav:not(.es-fija) .marca__nombre,
.nav:not(.es-fija) .nav__link { color: var(--c-blanco); }
.nav:not(.es-fija) .marca__sub { color: rgba(253, 252, 250, .6); }
.nav:not(.es-fija) .marca__mono { color: var(--c-oro-claro); }
.nav:not(.es-fija) .nav__cta { --btn-fondo: transparent; --btn-texto: var(--c-blanco); --btn-borde: rgba(253,252,250,.4); }
.nav:not(.es-fija) .nav__hamb span { background: var(--c-blanco); }

/* En el nav sólo el nombre: el lema es ancho (tracking .34em) y desplazaba
   el CTA fuera del viewport. Vive en el hero y en el pie. */
.nav .marca__sub { display: none; }

.nav__menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__link {
  position: relative;
  font-size: var(--t-sm);
  letter-spacing: .05em;
  padding-block: .3rem;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-media) var(--e-suave);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__hamb {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav__hamb span {
  display: block; width: 22px; height: 1.5px;
  background: var(--texto);
  transition: transform var(--d-rapida) var(--e-suave), opacity var(--d-rapida);
}
.nav.menu-abierto .nav__hamb span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.menu-abierto .nav__hamb span:nth-child(2) { opacity: 0; }
.nav.menu-abierto .nav__hamb span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__hamb { display: flex; }
  .nav__menu {
    position: fixed;
    inset: 4.6rem 0 auto;
    background: var(--c-blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra-md);
    padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--d-media) var(--e-suave),
                transform var(--d-media) var(--e-suave),
                visibility var(--d-media);
  }
  .nav.menu-abierto .nav__menu { opacity: 1; visibility: visible; transform: none; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding-block: .95rem; border-bottom: 1px solid var(--linea); }
  /* Dentro del panel blanco el texto siempre va en tinta. */
  .nav:not(.es-fija) .nav__link { color: var(--texto); }
  .nav__cta, .nav:not(.es-fija) .nav__cta {
    margin-top: 1.4rem;
    --btn-fondo: var(--c-negro); --btn-texto: var(--c-blanco); --btn-borde: var(--c-negro);
  }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: 8rem 5rem;
  background: var(--c-negro);
  color: var(--c-blanco);
  overflow: hidden;
  isolation: isolate;
}
.hero__lienzo { position: absolute; inset: 0; z-index: -1; }
/* Dos halos dorados que respiran lento: da profundidad sin una sola imagen. */
.hero__lienzo::before,
.hero__lienzo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.hero__lienzo::before {
  width: 62vmax; height: 62vmax;
  top: -22vmax; right: -18vmax;
  background: radial-gradient(circle, rgba(217,195,122,.20), transparent 66%);
  animation: flotar 22s var(--e-suave) infinite alternate;
}
.hero__lienzo::after {
  width: 48vmax; height: 48vmax;
  bottom: -20vmax; left: -14vmax;
  background: radial-gradient(circle, rgba(255,217,160,.13), transparent 68%);
  animation: flotar 28s var(--e-suave) infinite alternate-reverse;
}
@keyframes flotar {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.14); }
}
/* Trama fina tipo papel de lujo. */
.hero__trama {
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(217,195,122,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(217,195,122,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 68% 58% at 50% 42%, #000, transparent 78%);
}

.hero__caja { text-align: center; display: grid; justify-items: center; }
.hero__marca { margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.hero__marca .marca__nombre { color: var(--c-blanco); }
.hero__marca .marca__sub { color: var(--c-oro-claro); }
.hero__marca .marca__mono { color: var(--c-oro-claro); }

.hero__titulo {
  font-size: var(--t-3xl);
  max-width: 20ch;
  letter-spacing: -.02em;
}
.hero__titulo em {
  font-style: italic;
  background: linear-gradient(100deg, var(--c-oro-claro), var(--c-oro-brillo) 48%, var(--c-oro-claro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__texto {
  margin-top: 1.6rem;
  max-width: 46ch;
  color: rgba(253, 252, 250, .72);
  font-size: var(--t-lg);
}
.hero__acciones {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
}
.hero__acciones .btn--oro:hover { box-shadow: 0 18px 44px -16px rgba(217,195,122,.62); }

.hero__cifras {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}
.hero__cifra { text-align: center; }
.hero__cifra b {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 300;
  color: var(--c-oro-claro);
}
.hero__cifra span {
  font-size: var(--t-xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, .5);
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.8rem;
  translate: -50% 0;
  display: grid; justify-items: center; gap: .5rem;
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, .38);
}
.hero__scroll i {
  display: block; width: 1px; height: 2.4rem;
  background: linear-gradient(var(--c-oro-claro), transparent);
  animation: bajar 2.4s var(--e-suave) infinite;
}
@keyframes bajar {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}
@media (max-height: 700px) { .hero__scroll { display: none; } }

/* ── Servicios ────────────────────────────────────────────────── */
.servicios__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}
.servicio { padding: clamp(1.8rem, 3.4vw, 2.8rem); }
.servicio__icono {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-beige);
  color: var(--acento);
  margin-bottom: 1.5rem;
}
.servicio__icono svg { width: 1.4rem; height: 1.4rem; }
.servicio__titulo { font-size: var(--t-xl); }
.servicio__texto { margin-top: .8rem; color: var(--texto-suave); }
.servicio__lista { margin-top: 1.8rem; display: grid; gap: .1rem; }
.servicio__item {
  display: flex; align-items: flex-start; gap: .8rem;
  padding-block: .72rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
}
.servicio__item:last-child { border-bottom: 1px solid var(--linea); }
.servicio__item b { font-weight: 400; }
.servicio__item i {
  flex: none;
  margin-top: .42rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acento);
}
.servicio__item p { color: var(--texto-suave); font-size: var(--t-xs); margin-top: .1rem; }
.servicio__pie { margin-top: 1.9rem; }

/* ── Galería de demos ─────────────────────────────────────────── */
.demos__grid {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.demo {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--c-blanco);
}
.demo__lienzo {
  position: relative;
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--demo-fondo, var(--c-beige));
  color: var(--demo-texto, var(--c-tinta));
}
.demo__lienzo::after {
  /* Barrido de luz al pasar el cursor. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.3) 50%, transparent 62%);
  translate: -110% 0;
  transition: translate .85s var(--e-suave);
}
.demo:hover .demo__lienzo::after { translate: 110% 0; }
.demo__marco {
  position: absolute;
  inset: clamp(.7rem, 2vw, 1.1rem);
  border: 1px solid var(--demo-borde, rgba(163,130,60,.45));
  border-radius: 4px;
  pointer-events: none;
}
.demo__vista { text-align: center; padding: 2rem 1.2rem; display: grid; gap: .55rem; }
.demo__vista small {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; opacity: .72;
}
.demo__vista strong {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem);
  line-height: 1;
  display: block;
}
.demo__vista span { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.demo__vista hr { width: 2.2rem; height: 1px; border: 0; background: currentColor; opacity: .4; margin: .35rem auto; }
.demo__cuerpo { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .55rem; }
.demo__nombre { font-size: var(--t-lg); font-family: var(--f-display); }
.demo__texto { font-size: var(--t-sm); color: var(--texto-suave); }
.demo__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.demo__tag {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .6rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--texto-suave);
}
.demo__abrir {
  margin-top: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento);
}
.demo__abrir svg { width: .85rem; height: .85rem; transition: translate var(--d-rapida) var(--e-suave); }
.demo:hover .demo__abrir svg { translate: 4px 0; }
/* El <a> cubre la tarjeta entera: toda la superficie es táctil en móvil. */
.demo__enlace { position: absolute; inset: 0; z-index: 2; }
.demos__nota {
  margin-top: 2.5rem; text-align: center;
  font-size: var(--t-sm); color: var(--texto-suave);
}

/* ── Cómo funciona ────────────────────────────────────────────── */
.pasos {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  counter-reset: paso;
}
.paso { position: relative; padding-top: 2.4rem; }
.paso::before {
  counter-increment: paso;
  content: "0" counter(paso);
  position: absolute; top: 0; left: 0;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--acento);
  opacity: .5;
}
.paso::after {
  content: "";
  position: absolute; top: 1.15rem; left: 3.2rem; right: -1rem;
  height: 1px;
  background: linear-gradient(90deg, var(--linea), transparent);
}
.paso:last-child::after { display: none; }
@media (max-width: 700px) { .paso::after { display: none; } }
.paso__titulo { font-size: var(--t-lg); }
.paso__texto { margin-top: .55rem; color: var(--texto-suave); font-size: var(--t-sm); }

/* ── Beneficios ───────────────────────────────────────────────── */
.beneficios {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.beneficio {
  background: var(--c-blanco);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  transition: background-color var(--d-media) var(--e-suave);
}
.beneficio:hover { background: var(--c-beige); }
.beneficio__icono { color: var(--acento); margin-bottom: 1.1rem; }
.beneficio__icono svg { width: 1.5rem; height: 1.5rem; }
.beneficio__titulo { font-size: var(--t-lg); }
.beneficio__texto { margin-top: .5rem; color: var(--texto-suave); font-size: var(--t-sm); }

/* ── Precios ──────────────────────────────────────────────────── */
.paquetes {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  /* stretch y no start: con listas de distinto largo, la tarjeta más barata
     quedaba más alta que la cara y se leía como si diera más. */
  align-items: stretch;
}
/* flex y no grid para que el botón pueda irse al pie con margin-top:auto y
   los dos CTA queden alineados entre tarjetas. */
.paquete {
  position: relative;
  padding: clamp(1.8rem, 3.4vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
}
/* El destacado se levanta un poco: hace evidente cuál es la opción sugerida
   sin necesidad de escribirlo dos veces. */
.paquete--destacado {
  border-color: rgba(163, 130, 60, .45);
  box-shadow: var(--sombra-md);
}
.paquete__cinta {
  position: absolute;
  top: -.75rem; left: clamp(1.8rem, 3.4vw, 2.6rem);
  padding: .28rem .8rem;
  border-radius: 999px;
  background: var(--c-negro);
  color: var(--c-blanco);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.paquete__nombre { font-size: var(--t-xl); }
.paquete__precio { display: flex; align-items: baseline; gap: .4rem; }
.paquete__precio b {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: 300;
  line-height: 1;
}
.paquete__precio span { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.paquete__resumen { color: var(--texto-suave); font-size: var(--t-sm); }
.paquete__lista { display: grid; gap: .1rem; margin-top: .4rem; }
.paquete__item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding-block: .6rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
}
.paquete__item:last-child { border-bottom: 1px solid var(--linea); }
.paquete__item i {
  flex: none; margin-top: .45rem;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acento);
}
.paquete .btn { margin-top: auto; align-self: start; }
/* La primera viñeta del paquete alto dice "todo lo del anterior": va en
   tinta plena para que se lea como inclusión y no como un punto más. */
.paquete__item--todo { color: var(--texto); }
.paquete__item--todo i { width: 6px; height: 6px; opacity: 1; }

.extras {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.8rem, 3.4vw, 2.6rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--c-blanco);
}
.extras__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; }
.extras__titulo { font-size: var(--t-lg); }
.extras__precio { font-size: var(--t-sm); color: var(--acento); letter-spacing: .04em; }
.extras__lista {
  margin-top: 1.4rem;
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.extras__item {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: var(--t-sm); color: var(--texto-suave);
}
.extras__item i {
  flex: none; margin-top: .45rem;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acento); opacity: .6;
}
.extras__nota { margin-top: 1.4rem; font-size: var(--t-xs); color: var(--texto-suave); max-width: 58ch; }

/* ── Contacto ─────────────────────────────────────────────────── */
.contacto { text-align: center; }
.contacto__titulo { font-size: var(--t-2xl); margin-top: 1rem; }
.contacto__texto { margin-top: 1.1rem; color: var(--texto-suave); max-width: 46ch; margin-inline: auto; }
.contacto__acciones { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.contacto__datos {
  margin-top: 3rem;
  display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; justify-content: center;
  font-size: var(--t-sm);
}
.contacto__dato { display: grid; gap: .2rem; }
.contacto__dato small {
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--acento);
}

/* ── Footer ───────────────────────────────────────────────────── */
.pie {
  background: var(--c-negro);
  color: rgba(253,252,250,.62);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
  font-size: var(--t-sm);
}
.pie__caja {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.pie .marca__nombre { color: var(--c-blanco); }
.pie .marca__mono { color: var(--c-oro-claro); }
.pie .marca__sub { color: rgba(253,252,250,.45); }
.pie__lema { margin-top: 1.1rem; max-width: 30ch; }
.pie__titulo {
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-oro-claro); margin-bottom: 1rem;
}
.pie__links { display: grid; gap: .55rem; }
.pie__links a { transition: color var(--d-rapida); }
.pie__links a:hover { color: var(--c-blanco); }
.pie__legal {
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(253,252,250,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(253,252,250,.4);
}

/* ── Botón flotante de WhatsApp ───────────────────────────────── */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 90;
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-negro);
  color: var(--c-blanco);
  box-shadow: var(--sombra-md);
  opacity: 0; visibility: hidden; transform: scale(.7);
  transition: opacity var(--d-media) var(--e-suave),
              transform var(--d-media) var(--e-suave),
              visibility var(--d-media);
}
.wa.es-visible { opacity: 1; visibility: visible; transform: none; }
.wa:hover { background: var(--c-oro); }
.wa svg { width: 1.55rem; height: 1.55rem; }