/* ===========================================================
   Despega Studio — hoja de estilos

   SISTEMA DE COLOR — cuatro colores con un rol fijo cada uno.
     azul   → confianza. Botones y todo lo que se toca.
     terracota → calidez. Comida, local, lo humano.
     verde  → avance. Confirmaciones, pasos cumplidos.
     ámbar  → detalle. Subrayados y acentos pequeños.
   Un color no invade el rol de otro. Esa es la única regla que
   mantiene la página elegante teniendo cuatro y no uno.
   =========================================================== */

:root {
  /* neutros */
  --ink:        #14181C;
  --ink-soft:   #45505A;
  --muted:      #67727C;
  --line:       #E4E8EC;
  --bg:         #FFFFFF;
  --bg-alt:     #F6F8F9;

  /* azul — primario */
  --blue:       #2F5D7C;
  --blue-dk:    #284F69;
  --blue-t:     #EBF1F5;

  /* terracota */
  --clay:       #B0553A;
  --clay-dk:    #96462E;
  --clay-t:     #F9EEEA;

  /* verde */
  --green:      #3F7D5F;
  --green-dk:   #346950;
  --green-t:    #ECF4EF;

  /* ámbar — decorativo; para texto se usa --amber-ink */
  --amber:      #C08F33;
  --amber-ink:  #8F6519;
  --amber-t:    #FAF3E4;

  --radius:     14px;
  --radius-lg:  22px;
  --shadow-sm:  0 1px 2px rgba(20, 24, 28, .05);
  --shadow-md:  0 12px 32px rgba(20, 24, 28, .08);
  --shadow-lg:  0 24px 60px rgba(20, 24, 28, .12);

  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Space Grotesk", "Inter", -apple-system, sans-serif;

  --container: 1140px;
  --header-h:  74px;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dk); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.15rem, 5.2vw, 3.7rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.14rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0; font-weight: 500;
}
.skip:focus { left: 0; color: #fff; }

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

/* ================= Cabecera ================= */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: flex; align-items: center; color: var(--ink); }
.brand:hover { color: var(--ink); }

/* Logotipo — el acento ámbar sobre la palabra es la marca.
   Va en currentColor, así que hereda el tono de donde se ponga. */
.lockup { height: 34px; width: auto; display: block; color: var(--ink); }
.lockup-lg { height: 42px; margin-bottom: 14px; }
.lk-name {
  font-family: var(--display); font-weight: 700; font-size: 28px;
  letter-spacing: -1px; fill: currentColor;
}
.lk-sub {
  font-family: var(--sans); font-weight: 600; font-size: 10px;
  letter-spacing: 2.2px; fill: var(--muted);
}

.nav { display: flex; align-items: center; gap: 24px; }
.nav a { color: var(--ink-soft); font-size: .92rem; font-weight: 500; transition: color .2s ease; }
.nav a:hover { color: var(--ink); }
.nav .btn { color: #fff; }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================= Botones ================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: .95rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(47, 93, 124, .22); }
.btn-primary:hover { background: var(--blue-dk); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--muted); }
.btn-sm { padding: 9px 17px; font-size: .88rem; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ================= Secciones ================= */

.section { padding: 104px 0; }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 700px; margin: 0 0 56px; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: .35em; }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

.eyebrow {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 14px;
}
.eyebrow-clay  { color: var(--clay); }
.eyebrow-green { color: var(--green); }
.eyebrow-amber { color: var(--amber-ink); }
.eyebrow-light { color: #9FC0D6; }

/* ================= Hero ================= */

.hero { position: relative; padding: 76px 0 92px; overflow: hidden; }

.hero-deco { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.blob-blue  { width: 460px; height: 460px; background: var(--blue);  opacity: .13; top: -190px; right: -110px; }
.blob-clay  { width: 320px; height: 320px; background: var(--clay);  opacity: .10; bottom: -170px; left: -120px; }
.blob-green { width: 260px; height: 260px; background: var(--green); opacity: .10; top: 190px; right: 34%; }

.hero-inner {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 60px; align-items: center;
}

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px 7px 13px;
  font-size: .84rem; font-weight: 500; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  margin: 0 0 24px;
}
.pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex: none;
  box-shadow: 0 0 0 4px rgba(63, 125, 95, .18);
}

.hero h1 { margin-bottom: .38em; }
.hl {
  background-image: linear-gradient(to top, rgba(192, 143, 51, .34) 0 .26em, transparent .26em);
}

.lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 30em; margin-bottom: 2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* foto de portada */
.hero-visual { position: relative; display: flex; justify-content: center; }

.shot {
  margin: 0; width: 100%; max-width: 560px;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-alt);
  /* Reserva el alto exacto de la foto. Las diapositivas van en position:absolute,
     asi que sin esto la figura colapsaria a cero y el hero saltaria al cargar. */
  position: relative; aspect-ratio: 1400 / 782;
  /* isolation encierra las capas del carrusel DENTRO de la figura. El carrusel
     le sube el z-index a cada foto que entra (1, 2, 3...) y sin esto esos
     numeros compiten con los del resto del hero: a la segunda vuelta las fotos
     pasaban por encima de las etiquetas "Listo en 3 dias" y "Sin mensualidades"
     y se las comian. */
  isolation: isolate;
}
.shot-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; object-fit: cover;
  /* 0.9s de cruce dentro de un ciclo de 3s: deja ~2.1s de foto quieta. Con el
     fundido de 1.4s que habia antes, la imagen pasaba casi la mitad del tiempo
     en transicion y se leia como algo mal hecho, no como un carrusel. */
  opacity: 0; transition: opacity .9s ease;
}
.shot-img.is-on { opacity: 1; }
/* Sin JS ninguna diapositiva recibe .is-on: se deja visible la primera, que es
   la unica con src real, y el hero se ve igual que antes del carrusel. */
html:not(.js) .shot-img:first-child { opacity: 1; }

/* El movimiento tiene que ser lento y casi imperceptible: la foto acompaña al
   titular, no compite con el. Si el visitante nota el cambio, esta mirando la
   foto en vez de leer la oferta.

   Con "reducir movimiento" el carrusel NO se apaga, se hace mas lento todavia.
   Motivo: aqui no hay desplazamiento, ni parallax, ni escala — es un cambio de
   opacidad y nada mas, que es justo lo que esa preferencia menos penaliza.
   Y Windows la trae activada de fabrica en muchisimos equipos: apagarlo dejaria
   la foto quieta para una parte enorme de los visitantes. Mismo criterio que se
   uso en la landing de CONSULTHINK. */
@media (prefers-reduced-motion: reduce) {
  /* El !important es necesario, no decorativo: mas abajo en esta misma hoja hay
     un `* { transition-duration: .01ms !important }` que apaga todas las
     transiciones. Sin ganarle, el carrusel cortaria en seco de una foto a otra
     — que es MAS brusco que el fundido, justo lo contrario de lo que busca la
     preferencia de reducir movimiento. */
  .shot-img { transition: opacity 1.4s ease !important; }
}

.chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border-radius: 999px;
  padding: 9px 16px; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow-md);
  /* Las dos etiquetas son fijas: se quedan quietas y encima mientras la foto
     de abajo rota. Van con z-index explicito y no heredado, para que no
     dependa del orden en que esten escritas en el HTML. */
  z-index: 2;
}
.chip svg { width: 14px; height: 14px; }
.chip-green { color: var(--green); border: 1px solid var(--green-t); left: -6px; top: 34px; }
.chip-amber { color: var(--amber-ink); border: 1px solid var(--amber-t); right: -4px; bottom: 44px; }

/* ================= Franja de datos ================= */

.strip { background: var(--ink); padding: 46px 0; }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.stat { padding-left: 18px; border-left: 3px solid; }
.stat-blue  { border-color: #6E9DBE; }
.stat-clay  { border-color: #D4836A; }
.stat-green { border-color: #6FAE8D; }
.stat-amber { border-color: var(--amber); }

.stat-num {
  font-family: var(--display); font-weight: 700;
  font-size: 2.5rem; line-height: 1; margin: 0 0 8px; color: #fff;
}
.stat-blue  .stat-num { color: #9FC5DE; }
.stat-clay  .stat-num { color: #E5A48D; }
.stat-green .stat-num { color: #96CFB1; }
.stat-amber .stat-num { color: #E3C077; }
.stat-txt { margin: 0; font-size: .93rem; color: #AFBAC3; line-height: 1.45; }

/* ================= Comparación antes / después ================= */

.compare {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 30px; align-items: center;
  max-width: 830px; margin: 0 auto 76px;
}
.compare-item { margin: 0; text-align: center; }
.compare-item img {
  width: 100%; max-width: 290px; margin: 0 auto 16px;
  border-radius: 18px; box-shadow: var(--shadow-md);
}
.compare-item figcaption { font-size: .93rem; color: var(--ink-soft); max-width: 26em; margin: 0 auto; }

.tag {
  display: inline-block; margin-bottom: 14px;
  font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.tag-off { background: #EDF0F2; color: var(--muted); }
.tag-on  { background: var(--green-t); color: var(--green-dk); }

.compare-arrow { color: var(--blue); opacity: .55; }
.compare-arrow svg { width: 48px; height: 24px; }

/* ================= Tarjetas ================= */

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

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px;
  border-top: 4px solid;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-blue  { border-top-color: var(--blue); }
.card-clay  { border-top-color: var(--clay); }
.card-green { border-top-color: var(--green); }

.card-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  margin-bottom: 18px;
}
.card-ic svg { width: 23px; height: 23px; }
.card-blue  .card-ic { background: var(--blue-t);  color: var(--blue); }
.card-clay  .card-ic { background: var(--clay-t);  color: var(--clay); }
.card-green .card-ic { background: var(--green-t); color: var(--green-dk); }

.card h3 { margin-bottom: .5em; }
.card p, .feature p, .work p { color: var(--ink-soft); margin: 0; font-size: .97rem; }

.reasons { margin-top: 0; }

/* ================= Qué incluye ================= */

.features { gap: 40px 32px; }
.ic-box {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
}
.ic-box svg { width: 22px; height: 22px; }
.ic-blue  { background: var(--blue-t);  color: var(--blue); }
.ic-clay  { background: var(--clay-t);  color: var(--clay); }
.ic-green { background: var(--green-t); color: var(--green-dk); }
.ic-amber { background: var(--amber-t); color: var(--amber-ink); }
.feature h3 { margin-bottom: .5em; }

/* ================= Proceso ================= */

.steps {
  list-style: none; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.step { display: flex; gap: 18px; align-items: flex-start; }
.step-num {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
}
.step-blue  .step-num { background: var(--blue); }
.step-clay  .step-num { background: var(--clay); }
.step-green .step-num { background: var(--green); }
.step h3 { margin-bottom: .4em; }
.step p { color: var(--ink-soft); margin: 0; font-size: .97rem; }

.band {
  display: flex; gap: 22px; align-items: flex-start;
  background: #fff; border: 1px solid var(--green-t);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-lg); padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.band-ic {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-t); color: var(--green-dk);
}
.band-ic svg { width: 26px; height: 26px; }
.band h3 { margin-bottom: .35em; }
.band p { margin: 0; color: var(--ink-soft); font-size: 1.01rem; }

/* ================= Trabajos ================= */

.work h3 { margin: 0 0 .1em; }
.work-link { display: block; color: inherit; text-decoration: none; }
.work-link:hover h3, .work-link:focus-visible h3 { color: var(--blue); }
.work-go { color: var(--amber-ink); font-size: .8em; }
.work-meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: .84rem; margin: 0 0 .7em;
}
.work-meta span {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.dot-blue  { background: var(--blue); }
.dot-clay  { background: var(--clay); }
.dot-green { background: var(--green); }

.work-shot {
  position: relative; margin-bottom: 18px;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.work:hover .work-shot { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.work-shot img { width: 100%; }
.tag-demo {
  position: absolute; top: 12px; right: 12px; margin: 0;
  background: rgba(255, 255, 255, .94); color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.works-note {
  margin: 40px 0 0; text-align: center;
  color: var(--muted); font-size: .94rem;
}
.works-note strong { color: var(--ink-soft); }

/* ================= Precio ================= */

.price-card {
  display: grid; grid-template-columns: 1fr 1.15fr;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
  max-width: 940px; margin: 0 auto;
}
.price-main {
  padding: 44px 40px; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, var(--blue-t), #fff 70%);
}
.price-label { color: var(--muted); font-size: .92rem; margin: 0 0 6px; }

/* El precio tachado va ARRIBA y chico: el numero que tiene que quedarse en la
   cabeza es el que se paga, no el que se ahorra. */
.price-was {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 2px; font-size: 1.05rem;
}
.price-was s { color: var(--muted); text-decoration-thickness: 2px; }
.price-off {
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  background: var(--clay-t); color: var(--clay-dk);
}

.price-amount {
  font-family: var(--display); font-weight: 700;
  font-size: 3.7rem; line-height: 1; letter-spacing: -.03em; margin: 0 0 10px;
}
.price-amount .cur { font-size: 1.8rem; vertical-align: super; color: var(--muted); margin-right: 2px; }

/* Ambar = detalle. Es el unico sitio de la pagina donde marca urgencia, y por
   eso funciona: si se usara en tres lugares mas, dejaria de verse. */
.price-badge {
  display: inline-block; margin: 0 0 16px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--amber-t); border: 1px solid #EBD9AE;
  color: var(--amber-ink); font-size: .82rem; font-weight: 500;
}

.price-note { color: var(--ink-soft); font-size: .95rem; margin: 0 0 24px; }
.price-mini { margin: 12px 0 0; font-size: .85rem; color: var(--muted); text-align: center; }

.price-list {
  list-style: none; margin: 0; padding: 44px 40px;
  display: grid; gap: 13px; align-content: center;
}
.price-list li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: .98rem; }
.price-list li::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
/* Por que el precio esta mas bajo. Va sobre fondo blanco y con filete ambar
   para que se lea como una nota del que vende, no como otra tarjeta de oferta. */
.launch {
  max-width: 940px; margin: 34px auto 0;
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg); padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.launch h3 { margin-bottom: .5em; }
.launch p { color: var(--ink-soft); margin: 0 0 14px; }
.launch-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.launch-list li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.launch-list li::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(-45deg);
}
.launch-fine { margin: 0 !important; font-size: .92rem; color: var(--muted); }

/* Los cuatro puntos fuertes del pago. Numerados porque se leen como una
   secuencia de lo que recibe, no como una lista de caracteristicas sueltas. */
.paypoints { max-width: 940px; margin: 34px auto 0; }
.paypoints-h { text-align: center; margin-bottom: 26px; }
.paygrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.paypoint {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px;
}
.pp-n {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; color: var(--blue);
  margin-bottom: 10px;
}
.paypoint h4 {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  margin: 0 0 .45em; color: var(--ink);
}
.paypoint p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.price-fine { margin: 26px auto 0; max-width: 640px; text-align: center; color: var(--muted); font-size: .92rem; }
.price-fine strong { color: var(--ink-soft); }

/* ================= Preguntas ================= */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-weight: 500; font-size: 1.06rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--clay); border-bottom: 2px solid var(--clay);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details[open] summary { color: var(--clay-dk); }
.faq details p { margin: -4px 0 24px; padding-right: 44px; color: var(--ink-soft); font-size: 1rem; }

/* ================= Contacto (único bloque oscuro grande) ================= */

.cta { background: var(--ink); color: #fff; }
.cta h2 { color: #fff; }
.cta .section-sub { color: #B9C4CD; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }

.form label { font-size: .9rem; font-weight: 500; color: #DCE3E9; margin-bottom: 8px; }
.form label .opt { color: #8D9AA5; font-weight: 400; }

.form input, .form select, .form textarea {
  font-family: var(--sans); font-size: 1rem; color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius); padding: 13px 15px;
  transition: border-color .2s ease, background-color .2s ease;
}
.form textarea { resize: vertical; min-height: 96px; }
.form input::placeholder, .form textarea::placeholder { color: #7E8B96; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: #9FC0D6; background: rgba(255, 255, 255, .1);
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: 3px solid #9FC0D6; outline-offset: 2px;
}
.form select { appearance: none; }
.form select option { color: var(--ink); background: #fff; }

.form .error { margin: 7px 0 0; font-size: .84rem; color: #F0B4A8; }
.field.invalid input, .field.invalid select { border-color: #F0B4A8; }

.form-note { margin: 12px 0 0; font-size: .88rem; color: #8D9AA5; text-align: center; }
.form-status { margin: 10px 0 0; font-size: .92rem; color: #96CFB1; text-align: center; }

/* ================= Pie ================= */

.site-footer {
  background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: 64px 0 28px; font-size: .94rem;
}
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-tag { color: var(--ink-soft); margin: 0; max-width: 28em; }
.footer-h {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.footer-col p { margin: 0 0 8px; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--blue); }
.footer-muted { color: var(--muted); }

.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--muted); font-size: .86rem;
}
.footer-bottom p { margin: 0; }

/* ================= WhatsApp flotante ================= */

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
  box-shadow: 0 10px 26px rgba(63, 125, 95, .35);
  transition: background-color .2s ease, transform .2s ease;
}
.wa-float:hover { background: var(--green-dk); color: #fff; transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; }

/* ================= Animación de entrada ================= */

/* Solo se ocultan si hay JavaScript para volver a mostrarlas.
   Sin JS la página se ve completa, nunca en blanco. */
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ================= Responsive ================= */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { order: -1; }
  .shot { max-width: 620px; }
  .chip-green { left: 4px; top: 16px; }
  .chip-amber { right: 4px; bottom: 22px; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .grid-3, .steps { grid-template-columns: repeat(2, 1fr); }
  .price-card { grid-template-columns: 1fr; }
  .price-main { border-right: none; border-bottom: 1px solid var(--line); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; gap: 26px; }
  .compare-arrow { justify-self: center; transform: rotate(90deg); }
}

@media (max-width: 760px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px 24px 24px; box-shadow: var(--shadow-md); display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { margin-top: 18px; border-bottom: none; justify-content: center; }
  .burger { display: flex; }
  .lockup { height: 29px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .hero { padding: 48px 0 68px; }
  .section-head { margin-bottom: 40px; }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .card { padding: 26px 22px; }
  .band { flex-direction: column; gap: 16px; padding: 26px 24px; }
  .price-main, .price-list { padding: 32px 26px; }
  .price-amount { font-size: 3rem; }
  .paygrid { grid-template-columns: 1fr; }
  .launch { padding: 26px 24px; }
  .form { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .btn-lg { padding: 14px 24px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .faq details p { padding-right: 0; }
  .stat-num { font-size: 2.1rem; }
  .chip { font-size: .76rem; padding: 7px 13px; }
}