/* =============================================================================
   LOTE ALTOS DE BERLÍN — sistema base, común a las tres variantes.

   El lenguaje sale de la cartografía predial: linderos, coordenadas, cabidas,
   códigos de uso. Una sola familia de texto (Archivo variable) donde el EJE DE
   ANCHO hace la jerarquía, como en el rótulo de una plancha catastral. El mono
   aparece solo donde un plano usaría mono: coordenadas, áreas, referencias.

   Orden: fuentes · tokens · reset · tipografía · layout · componentes
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. FUENTES
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   2. TOKENS
   Los cinco valores de la paleta salen de los propios fotogramas del video.
   -------------------------------------------------------------------------- */
:root {
  --lamina: #e8ede6;        /* papel de plano: gris-verde frío, no crema */
  --lamina-2: #dbe2d8;
  --verde-sombra: #12261d;  /* dosel en sombra — es la tinta */
  --verde-dosel: #2f6b45;   /* el bosque a plena luz */
  --cordillera: #8fa6b4;    /* la bruma azul de la sierra */
  --trazo: #d93a21;         /* el rojo del topógrafo */
  --trazo-hover: #bf2f19;

  /* Los papeles semánticos se reasignan en cada variante. */
  --bg: var(--lamina);
  --bg-2: var(--lamina-2);
  --ink: var(--verde-sombra);
  --ink-2: color-mix(in srgb, var(--verde-sombra) 74%, var(--lamina));
  --rule: color-mix(in srgb, var(--verde-sombra) 18%, transparent);
  --rule-firm: color-mix(in srgb, var(--verde-sombra) 42%, transparent);
  --accent: var(--trazo);
  --accent-ink: #fff;

  --f-text: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-data: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-h1: clamp(2.35rem, 5.4vw, 4.6rem);
  --t-h2: clamp(1.6rem, 3.2vw, 2.7rem);
  --t-h3: clamp(1.12rem, 1.5vw, 1.35rem);
  --t-lead: clamp(1.05rem, 1.35vw, 1.28rem);
  --t-body: clamp(1rem, 1.05vw, 1.06rem);
  --t-data: clamp(0.72rem, 0.85vw, 0.82rem);

  --wrap: 1280px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --sec-y: clamp(3.6rem, 7vw, 6.5rem);

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 0.22s;
  --d-mid: 0.55s;
}

/* -----------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* El atributo hidden lo pone el navegador con display:none, pero cualquier
   regla de autor con display lo pisa sin avisar. Este guardia evita que un
   campo oculto por la intención activa siga viéndose. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

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

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

.u-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--f-data);
  font-size: var(--t-data);
  text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* -----------------------------------------------------------------------------
   4. TIPOGRAFÍA
   El eje de ancho de Archivo hace el trabajo que en otro sitio harían dos
   familias distintas: expandido para los títulos, normal para leer.
   -------------------------------------------------------------------------- */
.display {
  font-weight: 700;
  font-stretch: 112%;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.title {
  font-weight: 800;
  font-stretch: 118%;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}

.subtitle {
  font-weight: 600;
  font-stretch: 108%;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose { max-width: 58ch; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }

/* Etiquetas de plano: coordenadas, cabidas, referencias. */
.data {
  font-family: var(--f-data);
  font-size: var(--t-data);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
}
.data--firm { font-weight: 600; }

/* La cifra de una cabida: mono, tabular, sin adornos. */
.figure {
  font-family: var(--f-data);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.figure sup {
  font-size: 0.5em;
  vertical-align: super;
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-y); }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}

/* -----------------------------------------------------------------------------
   6. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  font-weight: 700;
  font-stretch: 104%;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.btn:active { transform: translateY(1px); }

.btn--solid {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--solid:hover { background: var(--trazo-hover); }

.btn--line {
  border: 1px solid var(--rule-firm);
  color: var(--ink);
}
.btn--line:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

.btn__icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* -----------------------------------------------------------------------------
   7. FORMULARIO
   El envío arma un mensaje de WhatsApp: los campos son las líneas de ese
   mensaje, por eso las etiquetas van escritas como se las va a leer allá.
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.05rem; }

.field { display: grid; gap: 0.4rem; }

.field > label {
  font-family: var(--f-data);
  font-size: var(--t-data);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: color-mix(in srgb, var(--bg) 55%, #fff 10%);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  color: var(--ink);
  transition: border-color var(--d-fast) var(--e-out);
}
.field textarea { resize: vertical; min-height: 5.5rem; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-2); }

.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }

.field select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.85rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field--bad input,
.field--bad select { border-color: var(--trazo); }

.field__error {
  font-family: var(--f-data);
  font-size: var(--t-data);
  letter-spacing: 0.04em;
  color: var(--trazo);
  min-height: 1.1em;
}

.form__note {
  font-family: var(--f-data);
  font-size: var(--t-data);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

/* Salida cuando el navegador bloquea la pestaña de WhatsApp. */
.form__fallback {
  display: none;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--rule-firm);
  font-family: var(--f-data);
  font-size: var(--t-data);
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.form__fallback.is-on { display: block; }
.form__fallback a { color: var(--accent); }

/* -----------------------------------------------------------------------------
   8. MOVIMIENTO
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   9. COMPONENTES COMPARTIDOS
   Piezas que aparecen en más de una variante y en los dos idiomas.
   -------------------------------------------------------------------------- */

.u-sin-scroll { overflow: hidden; }

/* Selector de idioma — un enlace, sin JS, indexable. ------------------------ */
.idioma {
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-firm);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out);
}
.idioma:hover { color: var(--ink); }

/* En B y C no hay cabecera, así que va suelto y fijo. */
.idioma--suelto {
  position: fixed;
  top: clamp(0.8rem, 2vw, 1.4rem);
  right: clamp(0.9rem, 2.5vw, 1.8rem);
  z-index: 65;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}

/* Botón de sección: cierra un bloque con una salida concreta. --------------- */
.bloque__cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

.form__enviar {
  justify-content: center;
  margin-top: 0.4rem;
  padding-block: 1.05rem;
}

/* Vías alternas: llamar, copiar, compartir. --------------------------------- */
.vias { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.vias__ojo { color: var(--ink-2); margin-bottom: 0.85rem; }

.vias__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.vias__fila--suelta { margin-top: 1.5rem; }

.via {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  font-family: var(--f-data);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.via:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.via.is-hecho { border-color: var(--verde-dosel); color: var(--verde-dosel); }
.via__icono { width: 1.05em; height: 1.05em; flex: none; }

/* Preguntas frecuentes — <details> nativo, sin JS. -------------------------- */
.faq__lista {
  border-top: 1px solid var(--rule);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-stretch: 106%;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.35;
  transition: color var(--d-fast) var(--e-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }

/* El signo se convierte en menos al abrir: dice el estado sin depender del color. */
.faq__item summary i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 0.35em;
}
.faq__item summary i::before,
.faq__item summary i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--d-fast) var(--e-out);
}
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }

.faq__resp {
  padding-bottom: 1.15rem;
  max-width: 62ch;
  color: var(--ink-2);
  line-height: 1.65;
}

.faq__item--compacto summary { padding-block: 0.85rem; font-size: 0.98rem; }
.faq__item--compacto .faq__resp { font-size: 0.93rem; padding-bottom: 0.95rem; }

/* Pestañas de intención del formulario. ------------------------------------ */
.intencion {
  display: flex;
  gap: 1px;
  margin-bottom: 0.6rem;
  background: var(--rule-firm);
  border: 1px solid var(--rule-firm);
  border-radius: 3px;
  overflow: hidden;
}

.intencion__op {
  flex: 1;
  padding: 0.7rem 0.6rem;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--f-data);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.intencion__op[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.intencion__op:not([aria-selected="true"]):hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}

/* Visor de imágenes a pantalla completa. ----------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.4rem, 1.5vw, 1.2rem);
  padding: clamp(3.4rem, 7vw, 5rem) clamp(0.5rem, 2vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(9, 20, 15, 0.94);
  backdrop-filter: blur(6px);
  color: var(--lamina);
}
.visor[hidden] { display: none; }

.visor__barra {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.8rem, 2vw, 1.4rem) clamp(1rem, 2.5vw, 2rem);
}
.visor__indice { color: rgba(232, 237, 230, 0.72); font-variant-numeric: tabular-nums; }

.visor__cerrar,
.visor__paso {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(232, 237, 230, 0.34);
  border-radius: 50%;
  color: var(--lamina);
  transition: background var(--d-fast) var(--e-out);
}
.visor__cerrar:hover,
.visor__paso:hover { background: rgba(232, 237, 230, 0.16); }
.visor__cerrar svg,
.visor__paso svg { width: 1.1rem; height: 1.1rem; }

.visor__marco {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  min-width: 0;
}
.visor__marco img {
  max-width: 100%;
  max-height: min(74svh, 800px);
  width: auto;
  object-fit: contain;
  border-radius: 3px;
}
.visor__marco figcaption {
  color: rgba(232, 237, 230, 0.78);
  text-transform: none;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 639px) {
  /* En pantalla estrecha las flechas roban ancho a la imagen: bajan al pie. */
  .visor {
    grid-template-columns: 1fr;
    grid-template-areas: "marco" "pasos";
    align-content: center;
  }
  .visor__marco { grid-area: marco; }
  .visor__paso { grid-area: pasos; }
  .visor__paso--prev { justify-self: start; }
  .visor__paso--next { justify-self: end; }
}

/* El botón de copiar avisa también cuando no pudo: en un navegador sin
   portapapeles el número se queda a la vista para copiarlo a mano. */
.via.is-fallo {
  border-color: var(--trazo);
  color: var(--trazo);
  text-transform: none;
  letter-spacing: 0.02em;
}