/* =========================================================================
   Reserva Las Rastras / propuesta de rediseño 2026
   base.css : tokens, reset, tipografía, botones, navegación, footer
   Acento dorado #C9A46D, el mismo valor que trae el SVG del logo.
   Sistema de esquinas: radius 0 en todo. Única excepción documentada:
   el botón flotante de WhatsApp, que es un icono y por convención es circular.
   ========================================================================= */

:root {
  --gold: #c9a46d;   /* tomado del logo: el SVG usa este valor */
  --gold-deep: #7a5f30;
  --gold-soft: rgba(201, 164, 109, 0.15);

  --font-display: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --shell: min(1360px, 100% - 3rem);
  --gutter: 1.5rem;

  --step-1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1u: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.3rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.6rem);
  --step-4: clamp(2.5rem, 1.9rem + 2.9vw, 4.6rem);

  --sp-section: clamp(5rem, 3rem + 8vw, 9.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-nav: 40;
  --z-fab: 45;
  --z-overlay: 60;
}

:root {
  --ink: #0d0d0c;
  --surface: #141412;
  --surface-2: #1c1b18;
  --paper: #f2f0eb;
  --muted: #a09c93;
  --line: rgba(242, 240, 235, 0.12);
  --line-strong: rgba(242, 240, 235, 0.28);
  --scrim: linear-gradient(180deg, rgba(13, 13, 12, 0.72) 0%, rgba(13, 13, 12, 0.15) 38%, rgba(13, 13, 12, 0.88) 100%);
  --btn-bg: var(--gold);
  --btn-fg: #14120d;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  --accent-text: var(--gold);
}

/* El claro ya no es un tema del sitio: es el bloque de agendamiento, que
   hereda estos tokens porque el calendario de GoHighLevel llega en blanco. */
[data-theme="light"] {
  --ink: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #ebe8e1;
  --paper: #17150f;
  --muted: #6c675d;
  --line: rgba(23, 21, 15, 0.14);
  --line-strong: rgba(23, 21, 15, 0.34);
  --scrim: linear-gradient(180deg, rgba(13, 13, 12, 0.55) 0%, rgba(13, 13, 12, 0.1) 38%, rgba(13, 13, 12, 0.8) 100%);
  --btn-bg: var(--gold-deep);
  --btn-fg: #ffffff;
  --shadow: 0 20px 50px rgba(23, 21, 15, 0.14);
  --accent-text: var(--gold-deep);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1u); letter-spacing: -0.015em; }
p { margin: 0; max-width: 62ch; }

.shell { width: var(--shell); margin-inline: auto; }
.lede { color: var(--muted); font-size: var(--step-1u); line-height: 1.5; font-weight: 300; }
.muted { color: var(--muted); }
.gold { color: var(--accent-text); }
.section { padding-block: var(--sp-section); }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 500;
  margin: 0 0 1.25rem;
}

/* Sin :where(): ese envoltorio deja la regla en especificidad cero y cualquier
   otra declaración de outline la pisa, dejando el foco invisible al navegar con
   el teclado. Con los selectores desnudos, gana. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- botones */

.btn {
  --btn-pad: 1rem 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--btn-pad);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------ brillo del dorado

   Un reflejo estrecho cruza la superficie al apuntar el botón principal, como
   la luz recorriendo un metal pulido. Es el mismo gesto que buscan los botones
   con shader, resuelto con un degradado y una transición: sin WebGL, sin lienzo
   y sin coste en el móvil, donde además no hay puntero que lo dispare. */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.42) 48%,
    rgba(255, 255, 255, 0.62) 51%,
    rgba(255, 255, 255, 0.42) 54%,
    transparent 64%
  );
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease);
}
@media (hover: hover) {
  .btn--primary:hover::after { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { transition: none; }
  .btn--primary:hover::after { transform: translateX(-120%); }
}

.btn--ghost { border-color: var(--line-strong); color: var(--paper); background: transparent; }
.btn--ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }

.btn--on-media {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(13, 13, 12, 0.35);
  backdrop-filter: blur(10px);
}
.btn--on-media:hover { background: #fff; color: #14120d; border-color: #fff; }

.btn--sm { --btn-pad: 0.72rem 1.35rem; font-size: 0.84rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent-text);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: 0.8rem; }

/* --------------------------------------------------------- quiebre escrito

   Marca un texto cuyo corte de línea en móvil está decidido, no librado al
   ancho disponible: cada <span> pasa a ocupar su renglón. En pantallas
   mayores los span vuelven a ser inline y el texto fluye normalmente, así que
   el mismo marcado sirve para las dos versiones. El espacio entre span queda
   dentro del salto y no deja sangría. */
@media (max-width: 640px) {
  .quiebre > span { display: block; }
}
/* en táctil el subrayado se mantiene pegado al texto, pero la zona sensible
   del enlace crece por arriba y por abajo hasta poder acertarla con el dedo */
@media (max-width: 640px) {
  .link-arrow { padding-block: 0.5rem 0.4rem; }
}

/* ------------------------------------------- lenguaje premium (compartido)

   Cuatro piezas nacidas de las tarjetas de modelos, aplicadas a todo el sitio:
   .frame     borde interior de 1px y apoyo degradado sobre cualquier imagen
   .zoom-slow zoom lento del render al pasar el cursor
   .lift      elevación con sombra tintada
   .rule      hairline que se pinta de dorado de izquierda a derecha
   .figure    la jerarquía de dato: etiqueta discreta arriba, cifra grande abajo
   ------------------------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-2);
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
[data-theme="light"] .frame::before { box-shadow: inset 0 0 0 1px rgba(23, 21, 15, 0.12); }

.frame--base::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 8, 7, 0.55), transparent);
}

.zoom-slow > img { transition: transform 1.4s var(--ease); }
.lift { transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease); }

@media (hover: hover) {
  .zoom-slow:hover > img { transform: scale(1.07); }
  .lift:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
}

.rule { position: relative; padding-top: 1.4rem; }
.rule::before,
.rule::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
}
.rule::before { background: var(--line); }
.rule::after {
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
@media (hover: hover) {
  .rule:hover::after,
  a:hover .rule::after,
  .is-hot:hover .rule::after { transform: scaleX(1); }
}

.figure__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
.figure__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.035em;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  color: var(--paper);
}
.figure__value--gold { color: var(--accent-text); }
.figure__note { display: block; margin-top: 0.6rem; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------------ navegación */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 76px;
  padding-inline: clamp(1rem, 4vw, 2.75rem);
  transition: height 0.4s var(--ease), background 0.4s var(--ease),
              border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav[data-stuck="true"] {
  height: 64px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__logo { display: flex; align-items: center; }
.nav__logo img {
  height: 52px;
  width: auto;
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.nav[data-stuck="true"] .nav__logo img { transform: scale(0.78); }

.nav__links { display: flex; align-items: center; gap: 1.9rem; margin-left: auto; }
.nav__links a {
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  opacity: 0.82;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__links a:hover { opacity: 1; border-bottom-color: var(--accent-text); }

.nav__tools { display: flex; align-items: center; gap: 0.9rem; }

.nav__burger { display: none; }

/* menú móvil */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--ink);
  padding: 6rem clamp(1.5rem, 6vw, 3rem) 3rem;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.drawer[data-open="true"] { transform: translateY(0); }
.drawer a {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  font-weight: 300;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.drawer__close {
  position: absolute;
  top: 1.5rem;
  right: clamp(1rem, 5vw, 2.5rem);
  background: none;
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 1.3rem;
}

@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--line);
    cursor: pointer;
    font-size: 1.25rem;
  }
  /* el auto tiene que ir en el contenedor, no en el botón: dentro de
     .nav__tools el botón ya es el único hijo visible y no tiene contra qué
     empujarse, así que el cuadro quedaba pegado al logo en vez de al margen
     derecho */
  .nav__tools { margin-left: auto; }

  /* en táctil el logo gana algo de cuerpo y se separa del borde izquierdo */
  .nav__logo { margin-left: 5px; }
  .nav__logo img { height: 54.6px; }
}

/* ------------------------------------------------------ WhatsApp flotante */

.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%; /* excepción única al sistema de esquinas: es un icono */
  background: #1f8a48;
  color: #fff;
  font-size: 1.7rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease);
}
.fab:hover { transform: scale(1.06); }
.fab:active { transform: scale(0.97); }

/* Al bajar 20px el bloque del hero, el botón volvía a morder la esquina de
   "Agendar visita". En móvil se ajusta a 50px —sigue muy por encima del
   mínimo táctil— y se acerca al borde, que es donde cae bien el pulgar. */
@media (max-width: 640px) {
  .fab { width: 50px; height: 50px; font-size: 1.5rem; right: 0.9rem; bottom: 0.7rem; }
}

/* ------------------------------------------------------------------ footer */

.footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.footer__brands { display: flex; align-items: center; gap: 2.25rem; flex-wrap: wrap; }
.footer__brands img { height: 58px; width: auto; }
/* Ferval es un sello cuadrado con texto dentro: bajo 60px deja de leerse */
.footer__brands img:last-child { height: 64px; opacity: 0.8; }

.footer h4 {
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 1.2rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer ul a { font-size: 0.94rem; opacity: 0.85; }
.footer ul a:hover { color: var(--accent-text); opacity: 1; }

.footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 2rem 2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem 3rem;
  flex-wrap: wrap;
  color: var(--muted);
}
/* El descargo va en cuerpo 11px: presente y legible, sin pelear con el diseño.
   Se compensa el tamaño con interlineado amplio y el contraste alto de --muted. */
.footer__legal .legal {
  flex: 1 1 40ch;
  max-width: 78ch;
  font-size: 0.688rem;
  line-height: 1.75;
  letter-spacing: 0.005em;
}
.footer__legal .copy { font-size: 0.8rem; flex: 0 0 auto; }
.footer__social { display: flex; gap: 0.6rem; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  font-size: 1.1rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer__social a:hover { border-color: var(--accent-text); color: var(--accent-text); }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  /* la marca cierra el sitio: cruza el ancho completo y va centrada */
  .footer__top > div:first-child { grid-column: 1 / -1; text-align: center; }
  .footer__brands { justify-content: center; gap: 1.75rem; }
}

/* ---------------------------------------------------------- footer en móvil

   Apilado en una sola columna el cierre quedaba en una escalera de bloques sin
   jerarquía. Aquí la marca se convierte en portada del pie —centrada, con aire
   y un filete dorado corto debajo—, los dos menús conviven en dos columnas
   separadas por una línea, y el descargo se retira al fondo en cuerpo menor. */
@media (max-width: 640px) {
  .footer { background: var(--ink); }

  .footer__top {
    padding-block: clamp(3rem, 12vw, 4.5rem) 2.5rem;
    gap: 2.75rem 1.25rem;
  }
  .footer__brands img { height: 76px; }
  .footer__brands img:last-child { height: 62px; }
  .footer__top > div:first-child p { margin-inline: auto; max-width: 30ch; }

  /* filete dorado que separa la marca de los menús */
  .footer__top > div:first-child::after {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    margin: 2.25rem auto 0;
    background: var(--accent-text);
  }

  /* línea vertical entre los dos menús, en lugar de dejarlos flotando */
  .footer__top > div:nth-child(3) {
    border-left: 1px solid var(--line);
    padding-left: 1.25rem;
  }
  /* Los dos logotipos suman 320px con su separación y a 360px envolvían, uno
     debajo del otro. La marca cede el alto justo para que sigan en fila. */
  .footer__brands img { height: 66px; }
  .footer__brands img:last-child { height: 56px; }

  /* "Modelos de casas" ocupa dos renglones y "El proyecto" uno, así que las
     dos listas arrancaban a distinta altura. El rótulo reserva las dos líneas
     y las columnas vuelven a partir del mismo punto. */
  .footer h4 {
    margin-bottom: 0.75rem;
    font-size: 0.72rem;
    min-height: 38px;   /* respaldo para navegadores sin la unidad lh */
    min-height: 2lh;    /* exactamente dos renglones de este rótulo */
  }

  /* En escritorio los enlaces se separan con el gap de la lista y basta con
     apuntar el cursor. En táctil un enlace de 18px de alto es difícil de
     acertar: la separación pasa del gap al relleno del propio enlace, que así
     ofrece unos 44px de zona sensible sin cambiar cómo se ve la lista. */
  .footer ul { gap: 0; }
  .footer ul a {
    display: block;
    font-size: 0.9rem;
    padding-block: 0.75rem;
  }

  .footer__social { gap: 0.5rem; margin-top: 1.75rem !important; }
  .footer__social a { width: 42px; height: 42px; }

  /* el botón flotante de WhatsApp ocupa la esquina inferior derecha y tapaba
     la última línea del copyright: el pie reserva esa altura */
  .footer__legal {
    padding-block: 1.75rem;
    padding-bottom: calc(58px + clamp(1rem, 3vw, 2rem) + 1.5rem);
    gap: 1.25rem;
    text-align: center;
  }
  .footer__legal .legal { flex: 1 1 100%; font-size: 0.66rem; line-height: 1.7; }
  .footer__legal .copy { flex: 1 1 100%; font-size: 0.74rem; }
}

/* ------------------------------------------------------ reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

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