/* =========================================================
   Cassá Lucía — landing de los dos dormitorios (oct-2026)

   Marca de clientes/cassa-estudio/contexto/marca.md, en su versión de LANDING:
   titulares en Cormorant Garamond Light en sentence case (nunca mayúsculas),
   etiquetas en DM Sans mini en mayúsculas con tracking, cuerpo DM Sans.
   Crema de fondo, charcoal de texto, el dorado SOLO para la acción, el sage
   para la ubicación. "La elegancia está en lo que no dice": mucho aire.

   Mobile first, a 390 px. Una columna centrada (el formato de embudo que
   funcionó en Nagoy Office, 5-oct-2026). Sin fondos animados.
   ========================================================= */

:root {
  --crema: #faf8f5;
  --crema-2: #f5f0e8;
  --papel: #ffffff;
  --tinta: #2c2c2c;
  --tinta-2: #5f5b55;
  --linea: #e6dfd3;
  --oro: #a08b6d;
  /* El dorado de marca con texto blanco no llega a 4,5:1. El botón usa uno más
     hondo, de la misma familia; el de marca queda para líneas y detalles. */
  --oro-accion: #846f50;
  --oro-hondo: #6f5c41;
  --oro-suave: #f3ede3;
  --sage: #5a6b52;
  --error: #a3352b;

  --col: 600px;
  --r: 8px;
  --r-sm: 6px;
  --sombra: 0 1px 2px rgba(44, 44, 44, .04), 0 14px 36px -14px rgba(44, 44, 44, .18);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

/* La página del pendón y la de la pauta son la misma: cambia una línea. */
[data-solo-obra] { display: none; }
.es-obra [data-solo-obra] { display: block; }
.es-obra [data-solo-web] { display: none; }

/* ---------- Barra ---------- */
.bar { padding: 14px 20px 2px; display: flex; justify-content: center; }
.bar__brand img { width: auto; height: 50px; }
@media (max-width: 719px) { .bar__brand img { height: 40px; } .hero { padding-top: 10px; } }

/* ---------- Tipografía ---------- */
.eyebrow {
  margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro-hondo);
}
.eyebrow--centro { text-align: center; }
.eyebrow--sage { color: var(--sage); }

h1, h2 { font-family: var(--serif); font-weight: 300; letter-spacing: -.005em; }
h1 {
  margin: 0 auto; max-width: 18ch;
  font-size: clamp(29px, 7.6vw, 54px); line-height: 1.06;
}
h2 { margin: 0; font-size: clamp(30px, 7.6vw, 42px); line-height: 1.1; }
h1 em, h2 em { font-style: italic; font-weight: 300; }

.sello {
  display: table; margin: 16px auto 0; padding: 9px 16px; max-width: 34ch;
  background: var(--oro-suave); border: 1px solid var(--oro); border-radius: 14px;
  font-size: 15px; line-height: 1.35; text-align: center; color: var(--oro-hondo);
}
.sello b { font-weight: 600; color: var(--tinta); }
.lead { margin: 14px auto 0; max-width: 32ch; font-size: 17px; color: var(--tinta-2); }
.sub { margin: 12px 0 0; font-size: 17px; color: var(--tinta-2); max-width: 36ch; }
.nota { margin: 14px 0 0; font-size: 13px; color: var(--tinta-2); }

/* ---------- Héroe ---------- */
.hero { padding: 16px 0 8px; text-align: center; }

.hero__img { margin: 18px 0 0; position: relative; }
.hero__img picture { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--crema-2); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 60%; }
@media (min-width: 720px) { .hero__img picture { aspect-ratio: 16 / 10; } }
.hero__img figcaption { margin-top: 8px; font-size: 13px; color: var(--tinta-2); }
.es-obra .hero__img figcaption { display: block; }

.datos {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px;
  margin: 14px 0 0; font-size: 14px; color: var(--tinta-2);
}
.datos b { color: var(--tinta); font-weight: 600; }
.datos sup { font-size: .65em; }

/* ---------- Tarjeta del formulario ----------
   Se monta sobre el borde inferior de la foto (como en Nagoy Office): la foto vende,
   la tarjeta pide. El encabezado es corto a propósito: con el de antes (título en tres
   líneas + bajada + separador) la primera opción caía bajo la primera pantalla. */
.card {
  position: relative; margin: -30px 10px 0; padding: 16px 16px 16px;
  background: var(--papel); border-radius: var(--r); box-shadow: 0 1px 2px rgba(44, 44, 44, .06), 0 18px 40px -16px rgba(44, 44, 44, .28);
  border-top: 3px solid var(--oro);
  text-align: left; scroll-margin-top: 14px;
}
.es-obra .card { margin-top: 12px; }
.card__head { margin: 0 0 12px; text-align: left; }
.card__titulo { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.card__sub { margin: 2px 0 0; font-size: 14px; color: var(--tinta-2); }
.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.progress span { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.progress__track { flex: 1; height: 3px; background: var(--linea); border-radius: 3px; overflow: hidden; }
.progress__track i { display: block; height: 100%; width: 17%; background: var(--oro); border-radius: 3px; transition: width .35s ease; }

form { margin: 0; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: none; }
.step.is-active { display: block; animation: entra .3s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.is-active { animation: none; } }
.step__q { padding: 0; margin: 0 0 12px; font-family: var(--serif); font-size: 25px; line-height: 1.12; font-weight: 400; }
.step__hint { margin: -6px 0 14px; font-size: 15px; color: var(--tinta-2); }

.options { display: grid; gap: 8px; }
.option { position: relative; display: block; cursor: pointer; }
.option input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.option span {
  display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 12px 16px 12px 46px; position: relative;
  border: 1.5px solid #d9cdb9; border-radius: var(--r-sm); background: var(--papel);
  font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--tinta);
  transition: border-color .15s, background .15s;
}
/* El círculo de la izquierda dice «esto se elige» sin que nadie lo explique. */
.option span::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border: 1.5px solid var(--oro); border-radius: 50%; background: var(--papel); box-sizing: border-box;
}
.option input:checked + span::before { border: 5px solid var(--oro-accion); }
.option small { font-size: 14px; font-weight: 400; color: var(--tinta-2); }
.option:hover span { border-color: var(--oro); background: var(--oro-suave); }
.option input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.option input:checked + span { background: var(--oro-suave); border-color: var(--oro); font-weight: 500; }

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.field input, .phone {
  width: 100%; height: 52px; border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--crema); font: inherit; font-size: 17px; color: var(--tinta);
}
.field input { padding: 0 14px; }
.field input:focus, .phone:focus-within { outline: none; border-color: var(--oro); background: var(--papel); }
.phone { display: flex; align-items: center; overflow: hidden; }
.phone b { padding: 0 4px 0 14px; font-weight: 400; color: var(--tinta-2); }
.phone input { border: 0; height: 100%; background: transparent; padding-left: 6px; }
.phone input:focus { background: transparent; }
.field.is-invalid input, .field.is-invalid .phone { border-color: var(--error); }
.field__error { display: block; margin-top: 4px; font-size: 13px; color: var(--error); }
.field__error:empty { display: none; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { position: relative; display: block; cursor: pointer; }
.chip span {
  display: flex; align-items: center; justify-content: center; height: 46px;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--crema); font-size: 15px;
}
.chip input:checked + span { background: var(--oro-suave); border-color: var(--oro); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--r-sm);
  background: var(--oro-accion); color: #fff; font: inherit; font-size: 17px; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .1s;
}
.btn:hover { background: var(--oro-hondo); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn--block { width: 100%; margin-top: 8px; }

.form__note { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--tinta-2); }
.form__legal { margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.45; color: var(--tinta-2); }
.form__error { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--error); }
.back {
  display: block; margin: 10px auto 0; padding: 6px; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--tinta-2); cursor: pointer;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* El calendario: ancho completo dentro de la tarjeta y con scroll propio (landing.js). */
.cal { margin: 0 -10px; }
.cal iframe { display: block; width: 100%; height: 700px; border: 0; border-radius: var(--r-sm); background: var(--crema); }


/* ---------- Bloques ---------- */
.block { padding: 64px 0 0; }
.block h2 { max-width: 20ch; }

/* La vista aérea: borde a borde en el teléfono, se puede abrir grande. */
.aerea { position: relative; display: block; max-width: 720px; margin: 22px auto 0; text-decoration: none; }
.aerea img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.aerea span {
  position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 500; letter-spacing: .04em;
}
@media (min-width: 760px) { .aerea img { border-radius: var(--r); } }

.cerca { list-style: none; margin: 18px 0 0; padding: 0; }
.cerca li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--linea); font-size: 16px;
}
.cerca li:last-child { border-bottom: 1px solid var(--linea); }
.cerca small { display: block; font-size: 13px; color: var(--tinta-2); }
.cerca b { flex: none; font-weight: 500; color: var(--sage); font-variant-numeric: tabular-nums; }

.foto { max-width: 720px; margin: 22px auto 0; }
.foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 55%; }
@media (min-width: 760px) { .foto img { border-radius: var(--r); } }

.checks { list-style: none; margin: 20px 0 0; padding: 0; }
.checks li { position: relative; padding: 8px 0 8px 28px; font-size: 17px; }
.checks li::before {
  content: ''; position: absolute; left: 2px; top: 15px; width: 13px; height: 7px;
  border-left: 1.5px solid var(--oro-hondo); border-bottom: 1.5px solid var(--oro-hondo); transform: rotate(-45deg);
}

/* Las dos fotos del departamento: en el teléfono se deslizan de lado. */
.galeria {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px;
  margin: 22px 0 0; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria figure { margin: 0; scroll-snap-align: center; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.galeria figcaption { margin-top: 8px; font-size: 13px; color: var(--tinta-2); }
@media (min-width: 760px) {
  .galeria { max-width: 720px; margin-left: auto; margin-right: auto; padding: 0; grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
}

.ficha { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.ficha span { padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; font-size: 14px; background: var(--papel); }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
.cifras div { padding: 16px 10px; background: var(--papel); border-radius: var(--r); box-shadow: var(--sombra); text-align: center; }
.cifras strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; }
.cifras span { display: block; margin-top: 8px; font-size: 12px; line-height: 1.3; color: var(--tinta-2); }

.block--faq details { border-top: 1px solid var(--linea); }
.block--faq details:last-of-type { border-bottom: 1px solid var(--linea); }
.block--faq summary {
  list-style: none; position: relative; padding: 17px 32px 17px 0; cursor: pointer;
  font-size: 17px; font-weight: 500;
}
.block--faq summary::-webkit-details-marker { display: none; }
.block--faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 300; color: var(--oro-hondo);
  transition: transform .2s;
}
.block--faq details[open] summary::after { transform: rotate(45deg); }
.block--faq details p { margin: 0 0 18px; color: var(--tinta-2); }

.close { padding: 72px 0 80px; text-align: center; }
.close h2 { max-width: 14ch; margin: 0 auto 26px; }
.close p { margin: 16px 0 0; font-size: 14px; color: var(--tinta-2); }

.foot { padding: 32px 0 calc(96px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); text-align: center; font-size: 13px; color: var(--tinta-2); }
.foot img { width: auto; height: 54px; margin: 0 auto 12px; }
.foot p { margin: 0 0 4px; }

/* ---------- Botón fijo (móvil) ---------- */
.sticky {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; justify-content: center; min-height: 54px;
  border-radius: var(--r-sm); background: var(--oro-accion); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 500; box-shadow: 0 10px 24px -8px rgba(44, 44, 44, .35);
  transform: translateY(140%); transition: transform .3s ease;
}
.sticky.is-on { transform: none; }
.has-cookies .sticky { display: none; }
@media (min-width: 720px) { .sticky { display: none; } }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 520px; margin: 0 auto; padding: 10px 12px;
  background: var(--tinta); color: #fff; border-radius: var(--r-sm); font-size: 12px; line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
}
.cookies p { margin: 0; flex: 1; }
.cookies a { color: #fff; }
.cookies div { flex: none; display: flex; gap: 8px; }
.cookies button { border: 0; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.cookies [data-no] { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.cookies [data-si] { background: #fff; color: var(--tinta); }

/* ---------- Escritorio ---------- */
@media (min-width: 720px) {
  .bar { padding-top: 28px; }
  .bar__brand img { height: 74px; }
  .hero { padding-top: 28px; }
  .card { padding: 28px 28px 22px; }
  .cal { margin: 0; }
  .block { padding-top: 96px; }
  .close { padding: 104px 0 112px; }
}

/* ---------- Páginas secundarias (gracias, privacidad) ---------- */
.page { padding: 40px 0 64px; }
.page h1 { max-width: none; text-align: left; font-size: clamp(32px, 7vw, 44px); }
.page h2 { margin: 32px 0 8px; font-family: var(--sans); font-size: 18px; font-weight: 500; }
.page p, .page li { color: var(--tinta-2); }
.done { padding: 48px 0 80px; text-align: center; }
.done h1 { max-width: 16ch; }
.done .lead { max-width: 34ch; }
.done ol { list-style: none; margin: 32px auto 0; padding: 0; max-width: 440px; text-align: left; }
.done li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); font-size: 17px; }
.done li:last-child { border-bottom: 1px solid var(--linea); }
.done li b { font-family: var(--serif); color: var(--oro-hondo); font-weight: 400; font-size: 22px; line-height: 1.1; }

/* ---------- Escritorio: el formulario al lado, a la vista sin bajar ---------- */
@media (min-width: 960px) {
  .hero .col {
    max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 56px; align-items: start; text-align: left;
  }
  .hero .col > * { grid-column: 1; }
  .hero .col > .card { grid-column: 2; grid-row: 1 / span 8; margin: 8px 0 0; position: sticky; top: 20px; }
  .hero .eyebrow--centro { text-align: left; }
  .hero h1 { margin: 0; max-width: 16ch; }
  .hero .sello { margin-left: 0; text-align: left; }
  .hero .datos { justify-content: flex-start; }
}