/*
  Tema LonjApp — hoja de identidad que el panel inyecta globalmente (login incluido) cuando esta
  extensión está habilitada (manifest.identity.theme).

  Marca: azul #152764 · amarillo #FFE739 · neutros blanco/negro · tipografía Inter.
  Solo sobreescribe tokens shadcn del core y define las clases .lonja-* de la landing: las
  utilidades/los componentes los aporta el CSS compilado del producto — este archivo se carga
  DESPUÉS y gana por cascada. (Un bundle de extensión NO puede aportar utilidades Tailwind nuevas.)
*/

/* Tipografía de marca (Google Fonts). Futuro: auto-hospedarla dentro del paquete. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..600&display=swap');

:root {
  /* Colores de marca (fijos, independientes del tema) */
  --lonja-azul: #152764;
  --lonja-azul-2: #1f3a94; /* hover / variante clara del azul */
  --lonja-azul-oscuro: #0c1637; /* fondo profundo del hero/footer */
  --lonja-amarillo: #ffe739;
  --lonja-amarillo-2: #f2d800; /* hover del amarillo */

  /* ── Panel con los tonos de la landing ──
     Base clara azulada (como las secciones de la landing), superficies blancas, primario azul y
     el sidebar en el azul profundo del hero/footer con el ítem activo en amarillo. */
  --background: #f3f5fb;
  --foreground: #0f1c3f;
  --card: #ffffff;
  --card-foreground: #0f1c3f;
  --popover: #ffffff;
  --popover-foreground: #0f1c3f;
  --primary: #152764;
  --primary-foreground: #ffffff;
  --secondary: #e9edf9;
  --secondary-foreground: #152764;
  --muted: #eef1f9;
  --muted-foreground: #5a6684;
  --accent: #eef1fb;
  --accent-foreground: #152764;
  --border: #dfe4f2;
  --input: #dfe4f2;
  --ring: #4d68c0;

  /* Sidebar: el azul profundo de la landing */
  --sidebar: #0c1637;
  --sidebar-foreground: #dfe5f7;
  --sidebar-primary: #ffe739;
  --sidebar-primary-foreground: #152764;
  --sidebar-accent: rgba(255, 255, 255, 0.07);
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #4d68c0;
}

/* Tema oscuro: azules profundos de la marca; el amarillo toma el rol primario (contraste). */
.dark {
  --background: #0a1129;
  --foreground: #e7ebfa;
  --card: #101a3d;
  --card-foreground: #e7ebfa;
  --popover: #101a3d;
  --popover-foreground: #e7ebfa;
  --primary: #ffe739;
  --primary-foreground: #152764;
  --secondary: #1a2650;
  --secondary-foreground: #dfe5f7;
  --muted: #16224a;
  --muted-foreground: #93a0cf;
  --accent: #1a2650;
  --accent-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #b3a51f;
  --sidebar: #080e24;
  --sidebar-foreground: #dfe5f7;
  --sidebar-primary: #ffe739;
  --sidebar-primary-foreground: #152764;
  --sidebar-accent: rgba(255, 255, 255, 0.07);
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #b3a51f;
}

/* Inter en todo el producto (panel + login/landing). */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* El sidebar es azul profundo en AMBOS temas: el logo/favicon (SVG negro) va invertido a blanco. */
[data-slot='sidebar-header'] img {
  filter: brightness(0) invert(1);
}

/* Tema OSCURO del panel: el logo/favicon de la marca (SVG negro) se invierte a blanco en cualquier
   otro lugar donde aparezca (previews de Ajustes, modales, etc.). Solo aplica a los assets de la
   extensión — nunca a fotos o archivos subidos por usuarios. */
.dark img[src^='/api/extensions/assets/'] {
  filter: brightness(0) invert(1);
}

/* Marca de la CABECERA del panel (móvil): el logo es un SVG monocromo negro, así que se pinta con
   máscara en el azul de la identidad — sobre fondo claro, en negro, no se leía como la marca. */
[data-slot='brand-logo'] {
  background-color: var(--lonja-azul);
  -webkit-mask: url('/api/extensions/assets/lonja/logo') center / contain no-repeat;
  mask: url('/api/extensions/assets/lonja/logo') center / contain no-repeat;
}
.dark [data-slot='brand-logo'] {
  background-color: #ffffff;
}

/* Ítem activo del sidebar en amarillo de marca (el layout del panel usa bg-primary — azul — que
   sobre el sidebar azul profundo no contrasta; esta hoja se carga después y gana por cascada). */
[data-sidebar='menu-button'][data-active='true'],
[data-sidebar='menu-button'][data-active='true']:hover {
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
}

/* ══ LANDING (pantalla de entrada pre-auth; ver src/frontend/login.tsx) ═══════
   Ancho de contenido: 1360px (85rem). El hero llena el alto de la pantalla. La landing fija sus
   propios colores (marca sobre azul profundo/blanco): no depende del tema claro/oscuro del panel. */

html {
  scroll-behavior: smooth;
}

.lonja-landing {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #0a0a0a;
  overflow-x: clip;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Contenedor estándar de la landing: 1360px */
.lonja-contenedor {
  width: 100%;
  max-width: 85rem; /* 1360px */
  margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
}

/* ── Animaciones de entrada ── */
@keyframes lonja-sube {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lonja-flota {
  0%,
  100% {
    transform: translate(var(--dx, 0), 0) rotate(var(--giro, 0deg));
  }
  50% {
    transform: translate(var(--dx, 0), -12px) rotate(var(--giro, 0deg));
  }
}
.lonja-anim,
.lonja-anim-2,
.lonja-anim-3,
.lonja-anim-4 {
  opacity: 0;
  animation: lonja-sube 0.7s cubic-bezier(0.22, 0.65, 0.3, 1) forwards;
}
.lonja-anim-2 {
  animation-delay: 0.12s;
}
.lonja-anim-3 {
  animation-delay: 0.24s;
}
.lonja-anim-4 {
  animation-delay: 0.36s;
}

/* ── Header (fijo sobre el hero, vidrio azul; contenido al MISMO ancho de 1360px) ── */
.lonja-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(12, 22, 55, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lonja-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.lonja-header .lonja-logo {
  height: 1.6rem; /* mismo tamaño que el del footer */
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* el SVG es negro → blanco sobre el azul */
}
.lonja-logo-text {
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
}
.lonja-header-derecha {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.lonja-nav {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.lonja-nav a {
  color: #c7d0f0;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
.lonja-nav a:hover {
  color: #ffffff;
}

/* ── Botones (proporciones de shadcn/Plasma: default h-9 px-4 text-sm · lg h-10 px-6) ── */
.lonja-btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  height: 2.25rem; /* h-9 */
  padding: 0 1rem; /* px-4 */
  cursor: pointer;
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.lonja-btn:hover {
  transform: translateY(-2px);
}
.lonja-btn:active {
  transform: translateY(0);
}
.lonja-btn-amarillo {
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
}
.lonja-btn-amarillo:hover {
  background: var(--lonja-amarillo-2);
}
.lonja-btn-azul {
  background: var(--lonja-azul);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(21, 39, 100, 0.35);
}
.lonja-btn-azul:hover {
  background: var(--lonja-azul-2);
}
.lonja-btn-fantasma {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.lonja-btn-fantasma:hover {
  background: rgba(255, 255, 255, 0.08);
}
.lonja-btn-grande {
  height: 2.5rem; /* lg: h-10 */
  padding: 0 1.5rem; /* px-6 */
}

/* ── Hero: azul profundo con glows + retícula, llena el alto de la pantalla ── */
.lonja-hero-wrap {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(60rem 32rem at 88% -12%, rgba(255, 231, 57, 0.16), transparent 60%),
    radial-gradient(48rem 30rem at -12% 115%, rgba(77, 104, 192, 0.45), transparent 62%),
    linear-gradient(160deg, var(--lonja-azul-oscuro) 0%, var(--lonja-azul) 58%, #1b3287 100%);
  overflow: hidden;
}
/* La escena abarca las cuatro filas; las dos filas `1fr` se comen su altura sobrante, así la
   etiqueta y el bloque de texto quedan juntos (y el grupo, centrado frente a las fotos). */
.lonja-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    '. escena'
    'etiqueta escena'
    'texto escena'
    '. escena';
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(6rem, 12vh, 8rem); /* despeja el header fijo */
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
.lonja-solo-movil {
  display: none;
}
.lonja-hero > div:not(.lonja-scene):not(.lonja-hero-logo) {
  grid-area: texto;
}
.lonja-hero-logo {
  display: none; /* en escritorio la marca ya está en el header */
}
.lonja-hero-logo .lonja-logo {
  height: 1.9rem;
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* el SVG es negro → blanco sobre el azul */
}
.lonja-eyebrow {
  grid-area: etiqueta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #e8ecfb;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.38rem 1rem;
}
.lonja-eyebrow::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--lonja-amarillo);
  box-shadow: 0 0 12px rgba(255, 231, 57, 0.9);
}
.lonja-hero h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: 500; /* medium, no bold */
  letter-spacing: -0.03em;
}
.lonja-hero h1 .lonja-amarillo {
  color: var(--lonja-amarillo);
}
.lonja-hero p {
  margin: 1.4rem 0 2.2rem;
  max-width: 33rem;
  color: #b9c4ea;
  font-size: 1.08rem;
  line-height: 1.75;
  font-weight: 300;
}
@media (min-width: 961px) {
  /* La altura la fija .lonja-btn-grande, así que aquí se sube: con solo padding el botón crecía
     de ancho pero no de alto. */
  .lonja-hero-cta .lonja-btn-grande {
    height: 3.15rem;
    padding: 0 2.1rem;
    font-size: 1.02rem;
    border-radius: 0.6rem;
  }
}
.lonja-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Escena del hero: tres tarjetas de foto flotando, escalonadas */
.lonja-scene {
  grid-area: escena;
  position: relative;
  min-height: 33rem;
}
/* Instantánea: foto CUADRADA con marco fino y pie ancho, como una revelada. Las tres miden lo
   mismo (son un paquete de fotos). Los márgenes van en calc sobre `--ancho` porque el % de padding
   se resuelve contra la escena, no contra la tarjeta: así la proporción no cambia con el tamaño. */
.lonja-foto-flotante {
  --ancho: 45%;
  position: absolute;
  margin: 0;
  width: var(--ancho);
  padding: calc(var(--ancho) * 0.05) calc(var(--ancho) * 0.05) calc(var(--ancho) * 0.17);
  border-radius: 0.2rem;
  background: #fdfdfb;
  box-shadow: 0 30px 60px rgba(4, 9, 30, 0.5);
  animation: lonja-flota 7s ease-in-out infinite;
}
.lonja-foto-flotante img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}
/* Tocar o hacer clic en una foto la trae al frente, sin moverla de su sitio. */
.lonja-foto-flotante {
  cursor: pointer;
}
.lonja-foto-flotante.lonja-ff-frente {
  z-index: 4;
}
/* Mismo tamaño las tres; cambian el sitio, el giro y el ritmo. */
.lonja-ff-1 {
  --giro: -4deg;
  top: 0;
  left: 0;
  z-index: 2;
}
.lonja-ff-2 {
  --giro: 5deg;
  top: 7%;
  right: 0;
  animation-duration: 8s;
  animation-delay: 0.4s;
  z-index: 1;
}
/* La tercera va DELANTE y abajo, cruzando a las otras dos: es la que da profundidad. */
.lonja-ff-3 {
  --giro: 3deg;
  bottom: 0;
  left: 27.5%;
  animation-duration: 9s;
  animation-delay: 0.8s;
  z-index: 3;
}
.lonja-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.lonja-chip-amarillo {
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
}
.lonja-chip-vidrio {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* ── Secciones ── */
.lonja-seccion {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  scroll-margin-top: 4.5rem;
}
.lonja-seccion-head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}
.lonja-seccion-head.centrada {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.lonja-tag {
  display: inline-block;
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.32rem 0.9rem;
}
.lonja-seccion-head h2 {
  margin: 1rem 0 0.6rem;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 500; /* medium, no bold */
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--lonja-azul); /* mismo tono que el titular de Características */
}
.lonja-seccion-head p {
  margin: 0;
  color: #555;
  line-height: 1.7;
}

/* ── Características: bento grid ── */
/* Características: collage de fotos + lista de capacidades (dos columnas) */
.lonja-caract {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.lonja-collage {
  position: relative;
}
/* La foto llena la columna (va absoluta para no imponer su propio alto): así su borde superior queda a
   la altura de la etiqueta y el inferior, con el último ítem de la lista — la tarjeta cierra abajo. */
.lonja-collage {
  min-height: 26rem;
}
.lonja-collage-principal {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
}
.lonja-collage-tarjeta {
  position: absolute;
  right: -1rem;
  bottom: 0;
  width: min(17rem, 62%);
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 50px rgba(21, 39, 100, 0.22);
}
.lonja-collage-tarjeta img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.lonja-collage-tarjeta figcaption {
  display: block;
  padding: 0.7rem 0.9rem 0.85rem;
}
.lonja-collage-tarjeta strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lonja-azul);
}
.lonja-collage-tarjeta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6b7280;
}
.lonja-caract-copy h2 {
  margin: 1rem 0 0;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--lonja-azul);
}
.lonja-caract-copy > p {
  margin: 1rem 0 1.8rem;
  color: #4b5563;
  line-height: 1.65;
}
.lonja-lista {
  list-style: none;
  /* Sin margen final: es el último bloque de la columna y descuadraba la foto de al lado. */
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.lonja-lista li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  background: #f6f7fb;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--lonja-azul);
}
.lonja-lista-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 0.6rem;
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
}
.lonja-estado {
  flex: none;
  border-radius: 999px;
  padding: 0.24rem 0.68rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.lonja-estado-disponible {
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
}
.lonja-estado-arrendado {
  background: #e8edfd;
  color: var(--lonja-azul);
}
.lonja-estado-vendido {
  background: #efefef;
  color: #666;
}

/* ── Beneficios: claim + checklist sobre azul suave ── */
/* ── Cómo funciona: una foto por paso, con píldora numerada ── */
.lonja-pasos-wrap {
  background: #f6f7fb;
}
.lonja-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.lonja-paso {
  text-align: center;
}
/* Marco tintado alrededor de la foto (el "panel" de la referencia). */
.lonja-paso-marco {
  /* Mismo grosor de marco en los cuatro lados. */
  padding: 0.75rem;
  border-radius: 1.25rem;
  background: rgba(21, 39, 100, 0.07);
}
.lonja-paso-marco img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.9rem;
}
/* El número de paso encabeza el título (antes era una píldora sobre el borde de la foto). */
.lonja-paso-num {
  font-weight: 600;
}
.lonja-paso h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--lonja-azul);
}
.lonja-paso p {
  margin: 0;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ── Preguntas frecuentes (acordeón nativo <details>, sin JS) ── */
.lonja-faq {
  display: grid;
  gap: 0.7rem;
}
.lonja-faq-item {
  border: 1px solid #e9e9e9;
  border-radius: 1rem;
  background: #ffffff;
  overflow: hidden;
}
/* La cabecera es un botón (el acordeón va controlado, no con <details>): hay que desvestirlo. */
.lonja-faq-summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  color: var(--lonja-azul);
  background: none;
  border: 0;
}
.lonja-faq-summary svg {
  flex: none;
  transition: transform 0.25s ease;
}
.lonja-faq-abierta .lonja-faq-summary svg {
  transform: rotate(180deg);
}
.lonja-faq-cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.lonja-faq-abierta .lonja-faq-cuerpo {
  grid-template-rows: 1fr;
}
.lonja-faq-cuerpo > p {
  overflow: hidden;
  margin: 0;
  padding: 0 1.3rem;
  color: #555;
  line-height: 1.7;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    padding 0.28s ease;
}
.lonja-faq-abierta .lonja-faq-cuerpo > p {
  padding-bottom: 1.2rem;
  opacity: 1;
  transition-delay: 0.05s;
}

/* ── CTA final: banda oscura, tarjetas flotantes y flechas hacia el botón ── */
.lonja-cta-wrap {
  position: relative;
  overflow: hidden;
  color: var(--lonja-azul);
  background: var(--lonja-amarillo);
}
.lonja-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 34rem) 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}
.lonja-cta-copy {
  text-align: center;
}
.lonja-cta-copy h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.1; /* el default del navegador dejaba las dos líneas muy sueltas */
  font-weight: 500;
  letter-spacing: -0.02em;
}
.lonja-cta-copy p {
  margin: 0 auto 2rem;
  max-width: 30rem;
  line-height: 1.6;
  color: rgba(21, 39, 100, 0.82);
}
.lonja-cta-pie {
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: rgba(21, 39, 100, 0.6);
}
/* Tarjetas: una foto del trabajo real con su etiqueta. */
.lonja-cta-tarjeta {
  margin: 0;
  width: min(15rem, 100%);
  border-radius: 1rem;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(21, 39, 100, 0.1);
  box-shadow: 0 26px 55px rgba(21, 39, 100, 0.25);
  animation: lonja-flota 8s ease-in-out infinite;
  --giro: -3deg;
}
.lonja-cta-tarjeta-der {
  justify-self: end;
  --giro: 3deg;
  animation-duration: 9s;
  animation-delay: 0.5s;
}
.lonja-cta-tarjeta img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lonja-cta-tarjeta figcaption {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--lonja-azul);
}
/* Flechas punteadas que llevan la vista de las tarjetas al botón. */
.lonja-cta-flecha {
  position: absolute;
  width: 10rem;
  height: 5.6rem;
  fill: none;
  stroke: rgba(21, 39, 100, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
}
/* La punta de flecha (segundo path) va continua, no punteada. */
.lonja-cta-flecha path + path {
  stroke-dasharray: none;
}
.lonja-cta-flecha-izq {
  left: 17%;
  top: 34%;
}
.lonja-cta-flecha-der {
  right: 17%;
  top: 24%;
}

/* ── Footer azul profundo con secciones de enlaces ── */
.lonja-footer {
  background: var(--lonja-azul-oscuro);
  color: #93a0cf;
}
.lonja-footer .lonja-logo {
  height: 1.6rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.lonja-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem 3rem;
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}
.lonja-footer-marca {
  max-width: 20rem;
}
.lonja-footer-marca p {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
}
.lonja-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
}
.lonja-footer-links h4 {
  margin: 0 0 0.9rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
}
.lonja-footer-links a {
  display: block;
  margin-bottom: 0.55rem;
  color: #93a0cf;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.lonja-footer-links a:hover {
  color: #ffffff;
}
.lonja-footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.3rem;
  padding-bottom: 1.5rem;
  font-size: 0.85rem;
}

/* ── Entrada (sheet) de login ── */
@keyframes lonja-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.965);
  }
}
/* Entrada como SHEET: panel a la derecha en escritorio, hoja inferior en móvil.
   Entra deslizándose (menos brusco que un modal que aparece en el centro). */
/* Sin capa oscura: el desenfoque ya separa el panel de la landing. */
.lonja-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
/* Panel de vidrio azul (mismo lenguaje que el navbar de la landing): marca arriba, formulario
   centrado y pie legal abajo. */
.lonja-sheet {
  position: relative;
  width: 100%;
  max-width: 27rem;
  display: flex;
  flex-direction: column;
  background: rgba(12, 22, 55, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  padding: 2.2rem 2.1rem;
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  animation: lonja-sheet-in 0.24s ease;
  overflow-y: auto;
}
.lonja-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lonja-sheet-head .lonja-logo {
  height: 1.9rem;
  width: auto;
  display: block;
}
.lonja-sheet-cuerpo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
/* El formulario del core viene en una columna `max-w-sm`: aquí manda el ancho del panel, para que
   sus campos queden a plomo con la marca y el pie. */
.lonja-sheet-cuerpo > div {
  max-width: none;
}
.lonja-sheet-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: rgba(224, 230, 250, 0.55);
  font-size: 0.8rem;
  text-align: center;
}
.lonja-sheet-legal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@keyframes lonja-sheet-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/* Salida: el mismo recorrido al revés (el panel sigue montado mientras dura). */
@keyframes lonja-sheet-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.lonja-sheet.lonja-sheet-fuera {
  animation: lonja-sheet-out 0.24s ease forwards;
}
.lonja-sheet-overlay {
  animation: lonja-velo-in 0.2s ease;
}
.lonja-sheet-overlay.lonja-sheet-fuera {
  animation: lonja-velo-out 0.24s ease forwards;
}
@keyframes lonja-velo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lonja-velo-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.lonja-sheet-close {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  z-index: 1;
}
.lonja-sheet-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* El formulario del core (LoginScreen bare, componentes shadcn) vestido para el vidrio:
   tarjeta transparente, textos claros, inputs translúcidos y el submit en amarillo de marca. */
.lonja-sheet img {
  filter: brightness(0) invert(1); /* logo negro → blanco */
}
.lonja-sheet [data-slot='card'] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* Sin el acolchado propio de la tarjeta: el margen lo pone el panel. */
.lonja-sheet [data-slot='card-header'],
.lonja-sheet [data-slot='card-content'] {
  padding-left: 0;
  padding-right: 0;
}
.lonja-sheet [data-slot='card-title'] {
  color: #ffffff;
  font-weight: 500;
}
.lonja-sheet [data-slot='card-description'] {
  color: rgba(224, 230, 250, 0.65);
}
.lonja-sheet [data-slot='label'],
.lonja-sheet label,
.lonja-sheet .text-muted-foreground {
  color: rgba(233, 237, 252, 0.85);
}
.lonja-sheet [data-slot='input'] {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.lonja-sheet [data-slot='input']::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.lonja-sheet [data-slot='input']:focus-visible {
  border-color: var(--lonja-amarillo);
  box-shadow: 0 0 0 3px rgba(255, 231, 57, 0.22);
}
.lonja-sheet a {
  color: var(--lonja-amarillo);
}
.lonja-sheet a:hover {
  color: var(--lonja-amarillo-2);
}
.lonja-sheet [data-slot='checkbox'] {
  border-color: rgba(255, 255, 255, 0.35);
}
.lonja-sheet [data-slot='checkbox'][data-state='checked'] {
  background: var(--lonja-amarillo);
  border-color: var(--lonja-amarillo);
  color: var(--lonja-azul);
}
/* La palomita (icono lucide del indicador) en azul de marca y con trazo grueso para que resalte
   sobre el amarillo — si no, hereda text-primary-foreground (blanco) y se pierde. */
.lonja-sheet [data-slot='checkbox'][data-state='checked'] [data-slot='checkbox-indicator'],
.lonja-sheet [data-slot='checkbox'][data-state='checked'] svg {
  color: var(--lonja-azul);
  stroke: var(--lonja-azul);
  stroke-width: 3;
  opacity: 1;
}
.lonja-sheet button[type='submit'] {
  background: var(--lonja-amarillo);
  color: var(--lonja-azul);
  font-weight: 600;
  box-shadow: none;
}
.lonja-sheet button[type='submit']:hover {
  background: var(--lonja-amarillo-2);
}
/* Botones auxiliares del form (ojo de la contraseña, volver): claros sobre el vidrio. */
.lonja-sheet button[type='button']:not(.lonja-sheet-close) {
  color: rgba(255, 255, 255, 0.55);
}
.lonja-sheet button[type='button']:not(.lonja-sheet-close):hover {
  color: #ffffff;
}

/* ── Responsive + accesibilidad ── */
@media (max-width: 960px) {
  .lonja-nav {
    display: none;
  }
  /* El header no se monta sobre el hero: aparece cuando el hero ya pasó y ahí se queda. */
  .lonja-header {
    transform: translateY(-110%);
    transition: transform 0.22s ease;
    /* Barra de estado / notch: sin esto el contenido del header sale recortado por arriba
       en los móviles con área segura (iPhone y Android con isla). */
    padding-top: env(safe-area-inset-top, 0px);
  }
  .lonja-header-fija {
    transform: translateY(0);
  }
  /* Más específica que la regla de arriba (.lonja-hero > div:not(.lonja-scene)), que si no le
     imponía order:2 y la marca caía debajo de las fotos. */
  .lonja-solo-desktop {
    display: none;
  }
  .lonja-solo-movil {
    display: inline;
  }
  /* La marca ocupa la franja donde iría el navbar: ANCLADA arriba del TODO. Para eso el hero deja
     de ser el contenedor posicionado (va centrado dentro del wrap, y anclada a él la marca bajaba
     con el bloque): la referencia pasa a ser .lonja-hero-wrap, que sí llena la pantalla. */
  .lonja-hero {
    position: static;
  }
  .lonja-hero > .lonja-hero-logo {
    display: flex;
    position: absolute;
    top: calc(1.5rem + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    justify-content: center;
  }
  .lonja-hero-logo .lonja-logo {
    height: 2.2rem; /* aquí es la única marca visible: algo mayor que en el header */
  }
  /* Una columna: etiqueta → fotos → titular/párrafo/botones. */
  .lonja-hero > .lonja-eyebrow {
    justify-self: center;
    font-size: 0.78rem;
    padding: 0.34rem 0.85rem;
    margin-top: -1.25rem;
    margin-bottom: 1.3rem;
  }
  .lonja-hero-wrap {
    position: relative;
  }
  /* En una sola columna la foto entra PRIMERO (es el gancho) y el texto va centrado debajo.
     Todo el hero tiene que caber SIN scroll, así que la foto se dimensiona por ALTURA (una
     fracción de la pantalla) y no por anchura: es lo único elástico del bloque. */
  .lonja-hero {
    padding-left: 1rem;
    padding-right: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'etiqueta'
      'escena'
      'texto';
    gap: 1.5rem;
    /* El bloque va centrado, así que este relleno solo aporta la mitad de su valor a la distancia
       con la marca (anclada arriba). En pantallas bajas manda la media query de altura de abajo. */
    padding-top: 2.5rem;
    padding-bottom: 1.4rem;
    gap: 1.5rem; /* las fotos no deben quedar pegadas al titular */
    text-align: center;
  }
  .lonja-hero > * {
    min-width: 0;
  }

  .lonja-hero-wrap {
    position: relative;
  }
  .lonja-scene {
    min-height: auto;
  }
  .lonja-hero-cta {
    justify-content: center;
    margin: 0;
  }
  /* Las tres en ABANICO desde el centro, como un paquete de fotos en la mano: mismo tamaño, la del
     medio delante y las otras dos asomando giradas. `--dx` (porcentaje del ancho de la propia
     tarjeta) entra en el transform de la animación de flote. */
  .lonja-scene {
    /* Hueco reservado, no tamaño de las fotos (van absolutas): recortarlo sube el titular. */
    height: min(26svh, 13rem);
  }
  .lonja-foto-flotante {
    --ancho: 41%;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    margin-left: calc(var(--ancho) / -2);
  }
  .lonja-ff-1 {
    --giro: -11deg;
    --dx: -60%;
  }
  .lonja-ff-2 {
    --giro: 11deg;
    --dx: 60%;
  }
  .lonja-ff-3 {
    --giro: 1deg;
    --dx: 0%;
  }
  .lonja-hero h1 {
    /* Tope justo: a más de esto, "inmobiliarias y agentes" se parte en dos líneas. */
    margin-top: 0.9rem;
    /* Medido: a 9.5vw aún caben dos líneas en 360 y 390 px; se deja margen. */
    font-size: clamp(2.05rem, 9.2vw, 2.85rem);
  }
  .lonja-hero p {
    margin: 0.9rem 0 1.4rem;
  }
  .lonja-pasos {
    grid-template-columns: 1fr 1fr;
  }
  .lonja-cta {
    grid-template-columns: 1fr;
  }
  .lonja-cta-tarjeta,
  .lonja-cta-flecha {
    display: none;
  }
  /* Características en una columna: primero el collage, luego el texto. */
  .lonja-caract {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .lonja-collage {
    min-height: 0;
    height: 22rem;
    margin-bottom: 3rem;
  }
  .lonja-collage-tarjeta {
    right: 0;
    bottom: -2.5rem;
    width: min(14rem, 60%);
  }
}
/* Móviles de poca altura (o con la barra del navegador comiendo pantalla): el hero se aprieta y la
   etiqueta se subiría hasta la marca. Se recorta el hueco de las fotos y se recupera el relleno. */
@media (max-width: 960px) and (max-height: 720px) {
  .lonja-hero {
    padding-top: 4.75rem;
  }
  .lonja-scene {
    height: min(22svh, 10.5rem);
  }
}
@media (max-width: 640px) {
  .lonja-pasos {
    gap: 2.75rem;
    grid-template-columns: 1fr;
  }
  .lonja-footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .lonja-footer-base {
    text-align: center;
  }
  /* Sheet = hoja a pantalla completa en el teléfono, entrando desde abajo. */
  .lonja-sheet-overlay {
    align-items: stretch;
    justify-content: center;
  }
  .lonja-sheet {
    max-width: none;
    min-height: 100svh;
    border-left: 0;
    border-radius: 0;
    padding: calc(1.6rem + env(safe-area-inset-top, 0px)) 1.4rem
      calc(1.6rem + env(safe-area-inset-bottom, 0px));
    animation-name: lonja-sheet-in-abajo;
  }
  .lonja-sheet-cuerpo {
    padding: 1.5rem 0;
  }
  @keyframes lonja-sheet-in-abajo {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  .lonja-sheet.lonja-sheet-fuera {
    animation-name: lonja-sheet-out-abajo;
  }
  @keyframes lonja-sheet-out-abajo {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lonja-anim,
  .lonja-anim-2,
  .lonja-anim-3,
  .lonja-anim-4 {
    animation: none;
    opacity: 1;
  }
  .lonja-foto-flotante,
  .lonja-cta-tarjeta {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}