/* ==========================================================================
   landing.css — Home pública del sitio (pages/cuenta/landing.html)

   Es la única pantalla pensada para visitantes, no para el equipo: por eso
   tiene su propio lenguaje visual (editorial, fondo cálido, tipografía grande)
   en vez del look de aplicación que usan base.css y cuenta.css.

   Todo lo de acá cuelga de body.publica--landing para no filtrarse al login.
   Prefijo de clases: .lp-
   ========================================================================== */

body.publica--landing {
  /* Paleta propia de la landing: el verde de marca (#42695A) sobre un blanco
     roto cálido, que es lo que hace que las fotos de las casas se vean bien. */
  --lp-bg:          #f2f1ee;
  --lp-superficie:  #ffffff;
  --lp-tinta:       #14181a;
  --lp-tinta-suave: #5d6763;
  --lp-linea:       #dcdbd5;
  --lp-verde:       #42695A;
  --lp-verde-hondo: #2c4739;
  --lp-verde-tenue: #e9efec;

  /* Aire vertical entre secciones y ancho del contenido. */
  --lp-aire:        clamp(72px, 9vw, 132px);
  --lp-ancho:       1240px;
  --lp-margen:      clamp(20px, 5vw, 48px);

  background: var(--lp-bg);
  color: var(--lp-tinta);
  /* base.css bloquea la selección de texto para que la app no parezca un
     documento. En una página pública es al revés: se debe poder copiar. */
  -webkit-user-select: text;
  user-select: text;
  /* "clip" y no "hidden": hidden convierte al body en contenedor de scroll y eso
     rompe el position:sticky del encabezado (se iría con el scroll en vez de
     quedarse arriba). clip recorta igual pero no crea contenedor de scroll. */
  overflow-x: clip;

  /* base.css fija html y body en height:100% porque la app es un tablero de una
     sola pantalla. Acá no: un elemento sticky solo se pega mientras dure su
     contenedor, así que con el body midiendo una pantalla el encabezado se
     despegaba apenas se bajaba. El body tiene que crecer con el contenido. */
  height: auto;
  min-height: 100%;
}

body.publica--landing ::selection { background: var(--lp-verde); color: #fff; }

/* Anclas del menú: que el encabezado fijo no tape el título de la sección. */
body.publica--landing { scroll-behavior: smooth; }
.lp-seccion { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  body.publica--landing { scroll-behavior: auto; }
}

/* ==========================================================================
   Piezas compartidas
   ========================================================================== */
.lp-contenedor {
  width: 100%;
  max-width: var(--lp-ancho);
  margin: 0 auto;
  padding: 0 var(--lp-margen);
}

.lp-seccion { padding: var(--lp-aire) 0; }

/* Etiqueta pequeña en versalitas que anuncia cada sección. */
.lp-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lp-verde);
}

.lp-titulo {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.lp-bajada {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--lp-tinta-suave);
}

/* Cabecera de sección: título a la izquierda, bajada a la derecha. */
.lp-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.lp-cabecera__titulo { grid-column: 1; }
.lp-cabecera__bajada { grid-column: 2; padding-bottom: 6px; }

@media (max-width: 860px) {
  .lp-cabecera { grid-template-columns: 1fr; }
  .lp-cabecera__titulo,
  .lp-cabecera__bajada { grid-column: 1; }
}

/* Línea divisoria fina, del mismo tono que los bordes. */
.lp-regla { height: 1px; background: var(--lp-linea); border: 0; margin: 0; }

/* ---- Botones ---- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.lp-btn--solido { background: var(--lp-verde); color: #fff; }
.lp-btn--solido:hover { background: var(--lp-verde-hondo); }

.lp-btn--linea { border-color: var(--lp-tinta); color: var(--lp-tinta); }
.lp-btn--linea:hover { background: var(--lp-tinta); color: var(--lp-bg); }

/* Sobre la franja verde: borde blanco. */
.lp-btn--claro { border-color: rgba(255, 255, 255, .55); color: #fff; }
.lp-btn--claro:hover { background: #fff; color: var(--lp-verde-hondo); }

/* Botón sin caja, con subrayado animado. */
.lp-btn--texto {
  padding: 14px 2px;
  color: var(--lp-tinta);
  background: none;
  position: relative;
}
.lp-btn--texto::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.lp-btn--texto:hover::after { transform: scaleX(1); }

.lp-btn--compacto { padding: 11px 18px; font-size: 13px; }

/* ---- Aparición al hacer scroll (solo si el JS está vivo) ---- */
.js-activo .lp-revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js-activo .lp-revelar.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-activo .lp-revelar { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Encabezado fijo
   ========================================================================== */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 241, 238, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
/* El borde aparece recién cuando la página se despega del tope. */
.lp-nav.es-pegado { border-bottom-color: var(--lp-linea); }

.lp-nav__interior {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 74px;
}

.lp-nav__marca { display: flex; align-items: center; flex: 0 0 auto; }
.lp-nav__logo { height: 38px; width: auto; display: block; }

.lp-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin-left: auto;
}
/* El menú trae su propio botón de WhatsApp, pero solo hace falta cuando se
   despliega en móvil: en escritorio ese botón ya está en .lp-nav__acciones. */
.lp-nav__menu .lp-btn { display: none; }
.lp-nav__enlace {
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-tinta-suave);
  text-decoration: none;
  transition: color .16s ease;
}
.lp-nav__enlace:hover { color: var(--lp-tinta); }

.lp-nav__acciones { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* Botón hamburguesa: solo se ve en móvil. */
.lp-nav__hamburguesa {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--lp-linea);
  border-radius: 2px;
  background: transparent;
  color: var(--lp-tinta);
  cursor: pointer;
}
.lp-nav__hamburguesa svg { width: 20px; height: 20px; }
.lp-nav__hamburguesa .lp-icono-cerrar,
.lp-nav__hamburguesa[aria-expanded="true"] .lp-icono-menu { display: none; }
.lp-nav__hamburguesa[aria-expanded="true"] .lp-icono-cerrar { display: block; }

@media (max-width: 940px) {
  .lp-nav__hamburguesa { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .lp-nav__acciones { display: none; }

  /* En móvil el menú se despliega como panel bajo el encabezado. */
  .lp-nav__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--lp-margen) 24px;
    background: var(--lp-bg);
    border-bottom: 1px solid var(--lp-linea);
    display: none;
  }
  .lp-nav__menu.es-abierto { display: flex; }
  .lp-nav__enlace {
    padding: 15px 0;
    font-size: 16px;
    color: var(--lp-tinta);
    border-bottom: 1px solid var(--lp-linea);
  }
  .lp-nav__menu .lp-btn { display: inline-flex; margin-top: 18px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.lp-hero { padding: clamp(56px, 8vw, 104px) 0 0; }

.lp-hero__eyebrow {
  margin: 0 0 clamp(24px, 3vw, 38px);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lp-tinta-suave);
}

.lp-hero__titulo {
  margin: 0;
  /* El mínimo es bajo a propósito: en pantallas de 360 px "financiamos."
     tiene que caber en una línea sin desbordar. */
  font-size: clamp(2.15rem, 7.2vw, 5.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
}
.lp-hero__titulo span { display: block; }
.lp-hero__acento { color: var(--lp-verde); }

/* Bajo el título: párrafo a la izquierda, botones a la derecha. */
.lp-hero__pie {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, auto);
  justify-content: space-between;
  align-items: end;
  gap: 32px clamp(32px, 6vw, 80px);
  margin: clamp(34px, 4vw, 52px) 0 clamp(48px, 6vw, 76px);
}
.lp-hero__texto {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.72;
  color: var(--lp-tinta-suave);
}
.lp-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 780px) {
  .lp-hero__pie { grid-template-columns: 1fr; align-items: start; }
}

/* Foto de ancho completo que cierra el hero. */
.lp-hero__foto {
  position: relative;
  height: clamp(320px, 56vh, 620px);
  overflow: hidden;
  background: #dfe0dc;
}
.lp-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

/* ==========================================================================
   Cifras
   ========================================================================== */
.lp-cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
  padding: clamp(48px, 6vw, 80px) 0;
}
.lp-cifra__valor {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--lp-verde);
}
.lp-cifra__etiqueta {
  margin: 14px 0 0;
  max-width: 24ch;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-tinta-suave);
}

@media (max-width: 760px) {
  .lp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Cómo funciona — los tres pasos
   ========================================================================== */
.lp-pasos { border-top: 1px solid var(--lp-linea); }

.lp-paso {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px clamp(24px, 5vw, 64px);
  align-items: start;
  padding: clamp(32px, 4vw, 46px) 0;
  border-bottom: 1px solid var(--lp-linea);
}
.lp-paso__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lp-verde);
  padding-top: 6px;
}
.lp-paso__titulo {
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.lp-paso__texto {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--lp-tinta-suave);
}

@media (max-width: 820px) {
  .lp-paso { grid-template-columns: 52px minmax(0, 1fr); }
  .lp-paso__texto { grid-column: 2; }
}

/* ==========================================================================
   Proyectos
   ========================================================================== */
.lp-proyectos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 34px);
}

.lp-proyecto { display: flex; flex-direction: column; }

.lp-proyecto__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lp-verde-tenue);
  margin-bottom: 20px;
}
.lp-proyecto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.lp-proyecto:hover .lp-proyecto__media img { transform: scale(1.045); }

/* Tarjeta sin foto todavía: bloque de marca en vez de una imagen rota.
   Cuando llegue la fotografía basta con completar "imagen" en views/landing.py
   y este bloque desaparece solo. */
.lp-proyecto__pendiente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, .92);
  background:
    linear-gradient(150deg, var(--lp-verde) 0%, var(--lp-verde-hondo) 100%);
}
/* Trama diagonal tenue para que el bloque no se vea como un color plano. */
.lp-proyecto__pendiente::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: repeating-linear-gradient(
    -45deg, #fff 0 1px, transparent 1px 11px
  );
}
.lp-proyecto__inicial {
  position: relative;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
}
.lp-proyecto__aviso {
  position: relative;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lp-proyecto__nombre {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.lp-proyecto__ubicacion {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-verde);
}
.lp-proyecto__texto {
  margin: 14px 0 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--lp-tinta-suave);
}

@media (max-width: 1040px) { .lp-proyectos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lp-proyectos { grid-template-columns: 1fr; } }

/* ==========================================================================
   Estilos de fachada
   ========================================================================== */
.lp-estilos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.lp-estilo__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #e3e3df;
  margin-bottom: 18px;
}
/* Las fachadas arrancan en blanco y negro y toman color al pasar el cursor:
   así la grilla se lee como un conjunto y no como cinco fotos sueltas. */
.lp-estilo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.lp-estilo:hover .lp-estilo__media img,
.lp-estilo:focus-within .lp-estilo__media img {
  filter: none;
  transform: scale(1.04);
}

/* En pantallas táctiles no hay cursor que pasar por encima: ahí las fachadas
   van a color desde el principio y la frase que invita a hacerlo se esconde. */
@media (hover: none) {
  .lp-estilo__media img { filter: none; }
  .lp-solo-mouse { display: none; }
}

.lp-estilo__nombre {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.lp-estilo__texto {
  margin: 8px 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--lp-tinta-suave);
}

@media (max-width: 1100px) { .lp-estilos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .lp-estilos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Financiamiento
   ========================================================================== */
.lp-financiamiento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.lp-financiamiento__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e3e3df;
}
.lp-financiamiento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-financiamiento__texto {
  margin: 22px 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--lp-tinta-suave);
}

.lp-lista { margin: 28px 0 0; padding: 0; list-style: none; }
.lp-lista li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--lp-linea);
  font-size: .9375rem;
  line-height: 1.6;
}
.lp-lista li:last-child { border-bottom: 1px solid var(--lp-linea); }
/* Palito verde en lugar de viñeta redonda, para seguir la línea gráfica. */
.lp-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  width: 14px;
  height: 2px;
  background: var(--lp-verde);
}

@media (max-width: 860px) {
  .lp-financiamiento { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.lp-contacto {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--lp-linea);
}
.lp-contacto__bajada { margin-top: 20px; }
.lp-contacto__lugares {
  margin: 28px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-verde);
}

.lp-form { display: flex; flex-direction: column; gap: 18px; }
.lp-form__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 560px) { .lp-form__fila { grid-template-columns: 1fr; } }

.lp-campo { display: flex; flex-direction: column; gap: 8px; }
.lp-campo__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lp-tinta);
}
.lp-campo__opcional { font-weight: 400; color: #8b918d; }
.lp-campo input,
.lp-campo textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--lp-tinta);
  background: var(--lp-superficie);
  border: 1px solid var(--lp-linea);
  border-radius: 2px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lp-campo textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.lp-campo input::placeholder,
.lp-campo textarea::placeholder { color: #a3a9a5; }
.lp-campo input:focus,
.lp-campo textarea:focus {
  border-color: var(--lp-verde);
  box-shadow: 0 0 0 3px rgba(66, 105, 90, .13);
}

/* Campo trampa para bots: invisible pero sin display:none, porque hay bots que
   ignoran los campos ocultos de esa forma. Se recorta en su sitio en vez de
   mandarlo a left:-9999px, que estiraba la página hacia la izquierda. */
.lp-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-form__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.lp-form__nota {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--lp-tinta-suave);
}
.lp-form__estado {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  padding: 11px 14px;
  border-radius: 2px;
  border: 1px solid var(--lp-linea);
  background: var(--lp-superficie);
}
.lp-form__estado[hidden] { display: none; }
.lp-form__estado--ok    { border-color: #bcd3c8; background: var(--lp-verde-tenue); color: var(--lp-verde-hondo); }
.lp-form__estado--error { border-color: #f0c9c9; background: #fdf2f2; color: #a03535; }

@media (max-width: 860px) {
  .lp-contacto { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Llamado final + pie
   ========================================================================== */
.lp-cta {
  background: var(--lp-verde-hondo);
  color: #fff;
  padding: clamp(64px, 8vw, 112px) 0;
}
.lp-cta__titulo {
  margin: 0 0 clamp(28px, 3.5vw, 42px);
  max-width: 18ch;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.038em;
}
.lp-cta__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-footer {
  background: var(--lp-verde-hondo);
  color: rgba(255, 255, 255, .68);
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 40px 0;
}
.lp-footer__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  font-size: .8125rem;
}
.lp-footer__logo { height: 26px; width: auto; display: block; opacity: .9; }
.lp-footer__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.lp-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .16s ease; }
.lp-footer a:hover { color: #fff; }
.lp-footer p { margin: 0; }