/* ═══════════════════════════════════════════════════════════
   Daneff Propiedades — landing embudo, cód. 9323
   Tokens claros por defecto; las secciones .section--dark
   invierten los tokens para dar ritmo al scroll.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ground:     #faf7f8;
  --surface:    #ffffff;
  --tint:       #f3ebef;
  --line:       #e5d8de;
  --line-soft:  #efe5ea;
  --ink:        #1a1216;
  --ink-mid:    #5a4c52;
  --ink-dim:    #756569;
  --accent:     #6b0034;
  --accent-ink: #fff8fa;
  --accent-wash:#6b003414;
  --ok:         #3f6b4d;
  --shadow:     0 18px 44px -28px #2b0f1c55;
  --shadow-lg:  0 30px 70px -40px #2b0f1c66;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --col:  36rem;
  --band: 66rem;
  --pad:  clamp(20px, 5vw, 28px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:     #120c0f;
    --surface:    #1c1418;
    --tint:       #201720;
    --line:       #33262c;
    --line-soft:  #241a1f;
    --ink:        #f5edf0;
    --ink-mid:    #b4a2a9;
    --ink-dim:    #8f7a82;
    --accent:     #d189a5;
    --accent-ink: #2a0715;
    --accent-wash:#d189a51c;
    --ok:         #74ac86;
    --shadow:     0 20px 60px -32px #000;
    --shadow-lg:  0 34px 80px -44px #000;
  }
}
:root[data-theme="dark"] {
  --ground:     #120c0f;
  --surface:    #1c1418;
  --tint:       #201720;
  --line:       #33262c;
  --line-soft:  #241a1f;
  --ink:        #f5edf0;
  --ink-mid:    #b4a2a9;
  --ink-dim:    #8f7a82;
  --accent:     #d189a5;
  --accent-ink: #2a0715;
  --accent-wash:#d189a51c;
  --ok:         #74ac86;
  --shadow:     0 20px 60px -32px #000;
  --shadow-lg:  0 34px 80px -44px #000;
}

/* ── base ────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  z-index: 200;
}
.skip:focus { left: 8px; top: 8px; }

/* ── contenedores ────────────────────────────────────────── */
.col  { width: 100%; max-width: var(--col);  margin-inline: auto; padding-inline: var(--pad); }
.band { width: 100%; max-width: var(--band); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: clamp(58px, 9vw, 104px); }

.section--dark {
  --ground:     #120c0f;
  --surface:    #1c1418;
  --tint:       #201720;
  --line:       #33262c;
  --line-soft:  #241a1f;
  --ink:        #f5edf0;
  --ink-mid:    #b4a2a9;
  --ink-dim:    #8f7a82;
  --accent:     #d189a5;
  --accent-ink: #2a0715;
  --accent-wash:#d189a51c;
  --ok:         #74ac86;
  background: var(--ground);
  color: var(--ink);
}

/* En modo oscuro el ground del sitio ya es oscuro, así que .section--dark
   perdería el contraste y toda la página quedaría plana. Se hunde un tono más
   para que el ritmo de bandas se siga leyendo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--dark {
    --ground:  #0a0608;
    --surface: #171016;
    --tint:    #171016;
    --line:    #2c2027;
  }
}
:root[data-theme="dark"] .section--dark {
  --ground:  #0a0608;
  --surface: #171016;
  --tint:    #171016;
  --line:    #2c2027;
}

.section--tint { background: var(--tint); }

/* ── tipografía ──────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; }

h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.65rem, 3.9vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  margin-bottom: 20px;
}
h3 {
  font-size: 1.2rem;
  line-height: 1.32;
  margin-bottom: 8px;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 650; color: var(--ink); }

.lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-mid);
}

.label, .eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.label--accent { color: var(--accent); }

.turn {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.44;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin-top: 40px;
}

/* ── barra de progreso ───────────────────────────────────── */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  z-index: 120;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* ── botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
}
.btn--primary:hover { filter: brightness(1.06); }

/* Sobre foto (hero y cierre) el botón va en el bordó de marca sí o sí, pero el
   bordó contra un velo casi negro tiene 1,5:1 y la pastilla se pierde. El aro
   claro es el que dibuja el contorno; el relleno queda de marca. */
.hero .btn--primary,
.section--close .btn--primary,
.form .btn--primary {
  background: #6b0034;
  color: #fff8fa;
  border-color: #ffffff66;
}
.hero .btn--primary:hover,
.section--close .btn--primary:hover,
.form .btn--primary:hover { filter: none; background: #7d0040; border-color: #ffffff99; }

.btn--ghost {
  border-color: currentColor;
  color: var(--ink);
  opacity: 0.85;
}
.btn--ghost:hover { opacity: 1; background: #ffffff14; }

.btn--block { width: 100%; }
.btn--sm { padding: 11px 18px; font-size: 0.9rem; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ── 1 · hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 110px 64px;
  color: #f7f0f3;
  isolation: isolate;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: -2;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, #150c10f2 0%, #150c10cc 32%, #150c1066 62%, #150c1040 100%);
}
.hero__body { position: relative; }

.hero .eyebrow { color: #e9a9c1; }

.hero h1 { margin-bottom: 22px; }
.hero h1 .soft { color: #d8c6ce; }

.hero__lede {
  font-size: 1.15rem;
  line-height: 1.58;
  color: #dccbd3;
  max-width: 40rem;
}

.hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #ffffff2b;
}
.hero__amount {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero__unit {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c2aeb6;
}

.hero .btn--ghost { color: #f7f0f3; }

.hero__scroll {
  position: relative;
  margin: 44px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #bda7b0;
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll { animation: none; } }

/* ── 2 · dolores ─────────────────────────────────────────── */
.pains {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  counter-reset: pain;
}
.pains li {
  position: relative;
  padding: 26px 0 26px 62px;
  border-top: 1px solid var(--line);
}
.pains li:last-child { border-bottom: 1px solid var(--line); }

.pains__n {
  position: absolute;
  left: 0;
  top: 28px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.pains p { color: var(--ink-mid); margin: 0; }

/* ── figuras ─────────────────────────────────────────────── */
figure { margin: 0; }

figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  line-height: 1.5;
}

.figures {
  display: grid;
  gap: 22px;
  margin-top: 40px;
}
.figures--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.figures img { border-radius: 6px; box-shadow: var(--shadow); }

.figure-wide { margin-top: 42px; }
.figure-wide img {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.figure-wide + .col { margin-top: 42px; }

/* ── 5 · recorrido ───────────────────────────────────────── */
.tour {
  display: flex;
  flex-direction: column;
  gap: clamp(38px, 6vw, 68px);
  margin-top: 48px;
}
.tour__item {
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: 1fr;
}
.tour__item img { border-radius: 8px; box-shadow: var(--shadow); width: 100%; }
.tour__txt p { color: var(--ink-mid); margin: 0; }

@media (min-width: 46rem) {
  .tour__item { grid-template-columns: 1.15fr 1fr; gap: 40px; }
  .tour__item--flip img { order: 2; }
}

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 16px;
  margin-top: clamp(38px, 6vw, 62px);
}
.strip img {
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ── 7 · chequeos ────────────────────────────────────────── */
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2px;
  margin-top: 42px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.check {
  background: var(--surface);
  padding: 26px 24px;
}
.check h3 {
  position: relative;
  padding-left: 30px;
  font-size: 1.06rem;
  margin-bottom: 6px;
}
.check h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 18px;
  height: 10px;
  border-left: 2.5px solid var(--ok);
  border-bottom: 2.5px solid var(--ok);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.check p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--ink-mid);
}

.checks + .col { margin-top: 8px; }

/* ── 9 · números ─────────────────────────────────────────── */
.price-card {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: clamp(26px, 4vw, 40px);
  margin-top: 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
@media (min-width: 44rem) {
  .price-card { grid-template-columns: auto 1fr; gap: 44px; }
}
.price-card__label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 4px;
}
.price-card__amount {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1;
  margin: 0;
  color: var(--accent);
}
.price-card__split {
  border-left: 0;
  border-top: 1px solid var(--line);
  padding: 22px 0 0;
}
@media (min-width: 44rem) {
  .price-card__split { border-top: 0; border-left: 1px solid var(--line); padding: 4px 0 4px 44px; }
}
.price-card__split p {
  margin: 0 0 10px;
  font-size: 0.99rem;
  line-height: 1.55;
  color: var(--ink-mid);
}
.price-card__split p:last-child { margin: 0; }
.price-card__split span {
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 650;
  color: var(--ink);
}

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  /* sin column-gap, el valor de una fila queda pegado a la etiqueta de la
     columna siguiente y la ficha se lee como una sola frase corrida */
  column-gap: clamp(24px, 5vw, 56px);
  row-gap: 0;
  margin: 34px 0 0;
}
.specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 14px 2px;
  border-top: 1px solid var(--line);
}
.specs dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.specs dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* ── 10 · ubicación ──────────────────────────────────────── */
.around {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 18px;
  margin-top: 38px;
}
.around__item {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.around__item span {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.around__item p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.35;
}

.map {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* ── 11 · agente ─────────────────────────────────────────── */
.agent {
  display: grid;
  gap: 24px;
  align-items: start;
  margin-top: 34px;
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
@media (min-width: 40rem) { .agent { grid-template-columns: auto 1fr; gap: 32px; } }

.agent__mark {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.agent__role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.agent p:not(.agent__role):not(.agent__meta) { color: var(--ink-mid); }
.agent__meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
}

/* ── 12 · faq ────────────────────────────────────────────── */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.4;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }

.faq details p {
  margin: 0;
  padding: 0 0 22px;
  color: var(--ink-mid);
  font-size: 1rem;
}

/* ── 13 · cierre ─────────────────────────────────────────── */
.section--close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f7f0f3;
  padding-block: clamp(64px, 10vw, 116px);
}
.close__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.close__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #150c10cc, #150c10ee 45%, #150c10fa);
}
.section--close .label--accent { color: #e9a9c1; }
.section--close .lede { color: #d6c3cb; }

.form {
  margin-top: 38px;
  padding: clamp(22px, 4vw, 32px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.form__row { display: grid; gap: 16px; }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.form label {
  display: block;
  margin-bottom: 16px;
}
.form__row label { margin-bottom: 0; }

.form label > span {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c2aeb6;
  margin-bottom: 7px;
}
.form input,
.form textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;
  color: #f7f0f3;
  background: #ffffff12;
  border: 1px solid #ffffff2e;
  border-radius: 8px;
  resize: vertical;
}
.form input::placeholder,
.form textarea::placeholder { color: #9c8791; }
/* el foco va en el bordó aclarado: el bordó puro no se ve sobre el panel oscuro */
.form input:focus,
.form textarea:focus { outline: 2px solid #e9a9c1; outline-offset: 1px; border-color: transparent; }

.form__row + label { margin-top: 16px; }

.form .btn--primary { margin-top: 4px; }

.form__err {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: #f2a0b8;
}
.form__note {
  margin: 14px 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: #a8949c;
  text-align: center;
}

.close__alt {
  margin-top: 26px;
  text-align: center;
  font-size: 0.94rem;
  color: #bda7b0;
}
.close__alt a { color: #e9a9c1; }

/* ── footer ──────────────────────────────────────────────── */
.foot {
  background: var(--tint);
  border-top: 1px solid var(--line);
  padding-block: 46px 120px;
  font-size: 0.92rem;
  color: var(--ink-mid);
}
.foot p { margin: 0 0 6px; }
.foot__fine {
  margin-top: 20px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 46rem;
}

/* ── dock pegajoso (mobile) ──────────────────────────────── */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -22px #0009;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.dock[data-show="1"] { transform: translateY(0); }
.dock__price { line-height: 1.25; }
.dock__price strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 650;
}
.dock__price span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (min-width: 48rem) { .dock { display: none; } }

/* ── reveal on scroll ────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}