/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: Karla, system-ui, sans-serif;

  --hueso: #F0EBDD;
  --crema: #F5F1E6;
  --tinta: #211F18;
  --olivo: #69603D;
  --olivo-osc: #4A452C;
  --olivo-txt: #57543F;
  --gris-olivo: #6E6750;
  --gris-borde: #A9A188;
  --gris-linea: #D6CFB8;
  --gris-control: #C9C1A6;
  --arena: #C3B98F;
  --crema-clara: #F5F0E1;
  --beige-txt: #E4DEC6;
  --error: #9B4A2E;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  background: var(--hueso);
  color: var(--tinta);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--olivo); text-decoration: none; }
a:hover { color: var(--olivo-osc); }
img { display: block; max-width: 100%; }
input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--olivo) !important; }
::placeholder { color: #8D866D; }
::selection { background: var(--olivo); color: var(--hueso); }
:focus-visible { outline: 2px solid var(--olivo); outline-offset: 3px; }

.wrap { max-width: 1320px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }

/* ── Aparición al hacer scroll ──────────────────────────── */
.reveal { transition: opacity 800ms cubic-bezier(0.2,0.6,0.2,1), transform 800ms cubic-bezier(0.2,0.6,0.2,1); }
.reveal.is-out { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; }
  .reveal.is-out { opacity: 1; transform: none; }
}

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 48px;
  background: rgba(240,235,221,0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gris-linea);
}
.nav__lockup { display: flex; align-items: baseline; gap: 12px; color: var(--tinta); }
.nav__lockup:hover { color: var(--olivo); }
.nav__mark { font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.nav__sig { font-family: var(--display); font-style: italic; font-size: 19px; color: var(--gris-olivo); }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__link { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #5B5747; }
.nav__link:hover { color: var(--olivo); }
.nav__cta {
  padding: 12px 26px; background: var(--olivo); color: var(--hueso);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.nav__cta:hover { background: var(--olivo-osc); color: var(--hueso); }

/* ── Portada ────────────────────────────────────────────── */
.hero {
  background-color: var(--olivo);
  background-image: url(assets/linen.png);
  background-size: 480px;
  color: #EFE9D8;
}
.hero__grid {
  padding-top: 108px; padding-bottom: 116px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  gap: 76px; align-items: center;
}
.hero__title {
  margin: 0; max-width: 15ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(46px, 5.6vw, 88px); line-height: 1.04; letter-spacing: -0.022em;
  color: var(--crema-clara); text-wrap: pretty;
}
.hero__rule { width: 84px; height: 1px; background: #9A9067; margin: 40px 0 30px; }
.hero__lead { margin: 0; max-width: 42ch; font-size: 19px; line-height: 1.72; color: var(--beige-txt); text-wrap: pretty; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; }
.btn-solido {
  padding: 18px 40px; background: #EFE9D8; color: var(--olivo-osc);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.btn-solido:hover { background: #FFFDF4; color: var(--olivo-osc); }
.btn-linea {
  padding: 18px 40px; border: 1px solid #9A9067; color: #EFE9D8;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.btn-linea:hover { background: var(--olivo-osc); color: #EFE9D8; border-color: var(--olivo-osc); }
.hero__card-col { display: flex; justify-content: center; }
.hero__card {
  padding: 24px; background: #EFE9D8; transform: rotate(-1.8deg);
  box-shadow: 0 44px 84px -42px rgba(20,18,10,0.72); max-width: 430px;
}
.hero__card img { width: 100%; }

/* ── Franja "incluyen" ──────────────────────────────────── */
.incluye { border-bottom: 1px solid var(--gris-linea); }
.incluye__label {
  margin: 0; padding-top: 30px; padding-bottom: 4px;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: #6A6553;
}
.incluye__caja { padding: 12px 0 30px; }
.incluye__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 34px;
  font-family: var(--display); font-style: italic; font-size: 32px; color: #78704F;
}
/* El punto va como elemento propio para que entre en el reparto del
   space-between; así queda centrado entre frase y frase, no pegado a una. */
.incluye__sep { font-style: normal; color: #A9A188; user-select: none; }

/* ── Paquetes ───────────────────────────────────────────── */
.seccion-titulo {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(60px, 8vw, 128px); line-height: 0.86; letter-spacing: -0.035em;
  color: var(--tinta);
}
.paquetes__head { padding-top: 116px; }
.grupo { padding-top: 86px; }
.grupo--primero { padding-top: 84px; }
.grupo__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 28px; padding-bottom: 18px; border-bottom: 1px solid var(--tinta);
}
.grupo__head--solo { display: block; padding-bottom: 20px; }
.grupo__nombre {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: 46px; line-height: 1; letter-spacing: -0.01em; color: var(--tinta);
}
.grupo__desc {
  margin: 0; max-width: 44ch;
  font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.25;
  color: var(--gris-olivo); text-wrap: pretty;
}
.prow {
  display: grid; grid-template-columns: 1.35fr 1.05fr 1fr 0.8fr;
  gap: 20px; align-items: center; padding: 28px 16px;
  border-bottom: 1px solid var(--gris-linea);
}
.prow:hover { background: #E7E1CE; }
.prow > p { margin: 0; }
.pname { font-family: var(--display); font-weight: 500; font-size: 34px; color: var(--tinta); }
.pname--usd { font-size: 32px; white-space: nowrap; }
.pmeta { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-olivo); }
.pprice { font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1; color: var(--olivo); }
.pprice small { font-family: var(--body); font-size: 11px; letter-spacing: 0.16em; color: var(--gris-olivo); }
.pdays { font-size: 15px; color: var(--gris-olivo); text-align: right; }
.nota { margin: 18px 16px 0; font-size: 14px; letter-spacing: 0.02em; color: var(--gris-olivo); }

/* ── Bloque olivo del cuestionario ──────────────────────── */
.intro {
  position: relative; overflow: hidden; margin-top: 104px;
  background-color: var(--olivo);
  background-image: url(assets/linen.png); background-size: 480px;
  color: #EFE9D8;
}
.intro__marca {
  position: absolute; bottom: -36%; right: -4%;
  width: min(34vw, 460px); aspect-ratio: 408 / 370; background: #726845;
  -webkit-mask-image: url(assets/monograma.png); mask-image: url(assets/monograma.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.intro__inner { position: relative; padding-top: 96px; padding-bottom: 96px; }
.intro__titulo {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(56px, 7.5vw, 118px); line-height: 0.88; letter-spacing: -0.035em;
  color: var(--crema-clara);
}
.intro__titulo em { font-style: italic; font-size: 0.42em; color: var(--arena); }
.intro__texto { margin: 40px 0 0; max-width: 58ch; font-size: 19px; line-height: 1.72; color: var(--beige-txt); text-wrap: pretty; }

/* ── Formulario ─────────────────────────────────────────── */
.form-seccion { padding-top: 96px; padding-bottom: 140px; }
.progreso { margin-bottom: 52px; }
.progreso__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.progreso__paso { margin: 0; font-family: var(--display); font-style: italic; font-size: 24px; color: var(--olivo); }
.progreso__pct { margin: 0; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olivo-txt); }
.progreso__riel { height: 1px; background: var(--gris-linea); }
.progreso__fill { height: 1px; background: var(--olivo); width: 25%; transition: width 450ms cubic-bezier(0.2,0.8,0.2,1); }

.paso { display: none; }
.paso.is-activa { display: flex; flex-direction: column; gap: 52px; }
.paso--datos.is-activa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px 32px;
}

.campo { display: flex; flex-direction: column; gap: 10px; }
.campo__label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olivo-txt); }
.campo__input {
  width: 100%; padding: 12px 0;
  border: none; border-bottom: 1px solid var(--gris-borde); background: transparent;
  font-family: var(--display); font-size: 26px; color: var(--tinta); outline: none;
}

.pregunta { display: flex; flex-direction: column; gap: 16px; }
.pregunta__titulo {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: 38px; line-height: 1.15; letter-spacing: -0.015em; color: var(--tinta);
}
.pregunta__titulo span { color: #7A7460; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones--columna { display: flex; flex-direction: column; gap: 10px; }
.opciones--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 20px; border: 1px solid var(--gris-control); background: var(--crema);
  font-size: 14px; color: #3B3829; cursor: pointer;
}
.chip--fila { display: flex; align-items: center; gap: 13px; padding: 15px 20px; }
.chip--desc { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.chip--desc-fila { display: flex; align-items: flex-start; gap: 13px; padding: 14px 18px; }
.chip:hover { border-color: var(--olivo); background: #E9E3D0; }
.chip input { width: 15px; height: 15px; accent-color: var(--olivo); margin: 0; flex: none; }
.chip--desc input { margin: 2px 0 0; }
.chip--desc-fila input { margin: 3px 0 0; }
.chip__texto { display: flex; flex-direction: column; gap: 3px; }
.chip__nombre { font-size: 14px; color: var(--tinta); }
.chip__desc { font-size: 13px; line-height: 1.5; color: var(--gris-olivo); }

.slider { display: flex; flex-direction: column; gap: 6px; max-width: 540px; }
/* Cifras de caja alta y ancho fijo: Cormorant trae figuras de estilo antiguo
   por defecto (el 3 baja, el 2 no), y como este número cambia al mover el
   slider, brincaba de alto y de posición en cada paso. */
.slider__valor {
  margin: 0; text-align: center;
  font-family: var(--display); font-size: 44px; line-height: 1; color: var(--olivo);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.slider input { width: 100%; height: 22px; accent-color: var(--olivo); cursor: pointer; margin: 0; }
.slider__extremos { display: flex; justify-content: space-between; gap: 16px; }
.slider__extremos span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-olivo); }

.textarea {
  width: 100%; padding: 16px 18px;
  border: 1px solid var(--gris-control); background: var(--crema);
  font-family: var(--display); font-size: 22px; line-height: 1.5; color: var(--tinta);
  outline: none; resize: vertical;
}

.form__error { margin: 30px 0 0; font-size: 14px; color: var(--error); min-height: 20px; }
.form__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 20px; padding-top: 32px; border-top: 1px solid var(--gris-linea);
}
.btn-atras {
  padding: 16px 32px; border: 1px solid var(--gris-borde); background: transparent;
  color: #4E4B39; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
}
.btn-atras:hover:not(:disabled) { border-color: var(--olivo); color: var(--olivo); }
.btn-atras:disabled { opacity: 0.35; cursor: default; }
.btn-avanza {
  padding: 16px 44px; border: none; background: var(--olivo); color: var(--hueso);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
}
.btn-avanza:hover { background: var(--olivo-osc); }
.form__nav-der { display: flex; flex-wrap: wrap; gap: 12px; }

.gracias { padding-top: 110px; padding-bottom: 140px; }
.gracias__caja { padding: 92px 52px; border: 1px solid var(--gris-control); background: var(--crema); text-align: center; }
.gracias__titulo {
  margin: 0 0 24px; font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 72px; line-height: 1; color: var(--olivo);
}
.gracias__texto {
  margin: 0 auto; max-width: 46ch;
  font-size: 17px; line-height: 1.75; color: #47442F; text-wrap: pretty;
}
.gracias__wa {
  display: inline-block; margin-top: 40px;
  padding: 16px 36px; border: 1px solid var(--olivo); color: var(--olivo);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.gracias__wa:hover { background: var(--olivo); color: var(--hueso); }

/* ── Pie ────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: #CFC9B4; }
.pie__inner {
  padding-top: 84px; padding-bottom: 84px;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.pie__mark {
  margin: 0; font-family: var(--display); font-weight: 500; font-size: 29px; line-height: 1.1;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--hueso);
}
.pie__sig { margin: 4px 0 0; font-family: var(--display); font-style: italic; font-size: 26px; color: var(--arena); }
.pie__links { display: flex; flex-direction: column; gap: 13px; align-items: flex-end; text-align: right; }
.pie__links a { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #CFC9B4; }
.pie__links a:hover { color: var(--hueso); }

/* ── Celular ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wrap { padding-left: 24px; padding-right: 24px; }

  .nav { flex-wrap: nowrap; gap: 12px; padding: 12px 20px; }
  .nav__mark { font-size: 16px; letter-spacing: 0.2em; }
  .nav__sig { font-size: 15px; }
  .nav__links { gap: 0; }
  .nav__link { display: none; }
  .nav__cta { padding: 10px 15px; font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  /* En celular fluye de izquierda a derecha con el punto pegado, para que si
     se parte en dos renglones no quede un punto huérfano al inicio de línea. */
  .incluye__lista { justify-content: flex-start; gap: 4px 14px; font-size: 26px; }

  .grupo__nombre { font-size: 34px; }
  .prow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; }
  .pname { font-size: 28px; }
  .pname--usd::after { content: " USD"; }
  .pmeta { grid-column: 1 / -1; order: 4; }
  .pmeta--usd { display: none; }
  .pprice { font-size: 32px; }
  .pdays { grid-column: 1 / -1; order: 5; text-align: left; }

  .intro { margin-top: 64px; }
  .intro__inner { padding-top: 64px; padding-bottom: 64px; }
  .intro__marca { display: none; }

  .pregunta__titulo { font-size: 29px; }
  .chip { min-height: 44px; }
  .gracias__caja { padding: 64px 28px; }
  .gracias__titulo { font-size: 56px; }
}

/* ── Trampa antibots (honeypot) ─────────────────────────── */
/* Fuera de pantalla en vez de display:none: los bots que ignoran
   los ocultos igual la llenan, y los lectores de pantalla la saltan
   por el aria-hidden del contenedor. */
.trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Aviso de privacidad bajo el formulario ─────────────── */
.form__aviso {
  margin: 30px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--gris-olivo);
}
.form__aviso a { color: var(--olivo); text-decoration: underline; text-underline-offset: 3px; }
.form__aviso a:hover { color: var(--olivo-osc); }

/* ── Página legal (aviso de privacidad) ─────────────────── */
.legal { padding-top: 96px; padding-bottom: 120px; max-width: 760px; }
.legal h1 {
  margin: 0 0 12px; font-family: var(--display); font-weight: 500;
  font-size: clamp(44px, 6vw, 76px); line-height: 0.95; letter-spacing: -0.03em; color: var(--tinta);
}
.legal__fecha { margin: 0 0 48px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-olivo); }
.legal h2 {
  margin: 44px 0 14px; font-family: var(--display); font-weight: 500;
  font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; color: var(--tinta);
}
.legal p, .legal li { font-size: 17px; line-height: 1.75; color: #47442F; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--olivo); text-decoration: underline; text-underline-offset: 3px; }
.legal__volver { display: inline-block; margin-top: 48px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 760px) { .legal { padding-top: 64px; padding-bottom: 80px; } }