/* =============================================================================
   Sitio público — portada, vitrina y mapa.

   Dirección: PLANO SOBRE MESA DE ARQUITECTO. El producto es la certeza de la
   disponibilidad, así que el protagonista es la cartografía real del proyecto,
   no una foto de archivo. El sitio entero es papel; la única superficie profunda
   es la mesa verde sobre la que se apoya el plano —y el pie, que la repite.

   Dos colores con un trabajo cada uno:
     · DORADO — la marca y lo que se puede oprimir. Nunca es fondo de una zona.
     · VERDE BOSQUE — la superficie profunda y el dato de disponibilidad.
   Cuando los dos compiten por lo mismo, la pantalla se vuelve ruido.

   Nada de esta hoja depende de un CDN: la política de seguridad del sitio no
   permite recursos externos y no queremos que el sitio dependa de que un
   servidor ajeno esté arriba.
   ========================================================================== */

/* La paleta completa vive en app.css, que cargan las tres plantillas. Aqui solo
   queda lo que es exclusivo del sitio publico. */
/* 1280px + 24px de aire a cada lado: medido en dafep.com real —el logo de
   su cabecera empieza a 104px del borde de la ventana a 1440px de ancho—,
   no adivinado. Antes eran 1200px + 28px, y dejaban 46px de más a cada
   lado. */
:root{ --sitio-max:1280px; }

.sitio{background:var(--papel);color:var(--tinta)}
.sitio main{display:block}

/* Disuade la copia casual de fotos y texto —nunca la impide de verdad:
   quien de verdad quiera el contenido igual puede ver el código fuente o
   tomar una captura, esto no es una medida de seguridad—. Lo que sí importa
   proteger es que un visitante real pueda seguir copiando lo que vino a
   copiar: el teléfono, el correo, la dirección. Esos quedan exceptuados
   explícitamente, no por accidente. */
.sitio{-webkit-user-select:none;user-select:none}
.sitio input,.sitio textarea,
.sitio .pie-contacto-enlace,.sitio .pie-legal{
  -webkit-user-select:text;user-select:text;
}
.sitio img{-webkit-user-drag:none;user-drag:none}

/* Para quien navega con teclado: el primer tabulador debe poder saltarse el menú. */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--bosque-2);color:#fff;border-radius:0 0 var(--r-control) 0;
}
.saltar:focus{left:0}

.caja{max-width:var(--sitio-max);margin:0 auto;padding:0 24px}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera{
  position:sticky;top:0;z-index:20;
  background:var(--lienzo);border-bottom:1px solid var(--linea);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cabecera-caja{
  max-width:var(--sitio-max);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.marca{display:flex;align-items:center;gap:11px}
/* Medido contra capturas reales de dafep.com: el ícono ahí ocupa casi todo el
   alto de la cabecera —40px de trazo visible en una cabecera de 65px—, no una
   esquina discreta. 38px se veía a menos de tres cuartos de ese tamaño. */
.marca-icono{width:50px;height:50px}
/* El lockup completo —ícono, "DAFEP" y "GRUPO EMPRESARIAL S.A.S" en una
   línea chica debajo— es como dafep.com firma su propia marca. */
.marca-lockup{display:flex;flex-direction:column;line-height:1}
.marca-texto{height:18px;width:auto}
.marca-lockup em{
  margin-top:4px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-2);
}
.menu{display:flex;align-items:center;gap:26px}
.menu a{color:var(--tinta-2);font-size:var(--fs-base);font-weight:600}
.menu a:hover{color:var(--marca-oscura)}
/* El enlace de la página en la que estás se subraya en dorado —así se ve
   "Inicio" en dafep.com cuando uno está parado en la portada—. */
.menu a.activo{
  color:var(--tinta);text-decoration:underline;text-decoration-color:var(--marca-clara);
  text-decoration-thickness:2px;text-underline-offset:6px;
}
/* Sólido y dorado, como el "Contactar" de dafep.com: es la única acción
   destacada de la barra —el resto del menú es texto plano—. */
.btn-marco{
  background:var(--marca-clara);color:var(--tinta);font-weight:700;
  border-radius:var(--r-control);padding:9px 20px;
  transition:background .15s ease;
}
.btn-marco:hover{background:var(--marca-viva)}
/* El interruptor de idioma: una píldora con borde, como el "English" de
   dafep.com —ni sólida ni de texto plano, un tercer tratamiento aparte
   de los dos que ya tiene el menú—. */
.menu-idioma{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-pastilla);border:1px solid var(--linea);
  color:var(--tinta-2)!important;font-size:var(--fs-small);font-weight:600;
  transition:border-color .15s ease, color .15s ease;
}
.menu-idioma:hover{border-color:var(--marca);color:var(--marca-oscura)!important}
.menu-idioma .ic{flex:none}

/* La cabecera es siempre la misma en todo el sitio. Antes se volvía transparente
   sobre el encabezado oscuro de la portada; ahora que el sitio entero es papel,
   ese modo sobra y con él se va una fuente de diferencias entre páginas. */
.cabecera.pegada{box-shadow:0 1px 18px -10px rgba(var(--tinta-rgb),.5)}

/* ── Encabezado de la portada ─────────────────────────────────────────────── */
/* Negro de dafep.com, no negro plano de CSS (2026-09-25): un solo tono
   sólido, sin ninguna variación tonal, es lo que hace que un negro se lea
   "de pantalla apagada" en vez de "de superficie premium" —el panel ya
   había resuelto esto en `.lateral` con un degradado radial dorado más uno
   lineal; el héroe público, la pieza más vista de todo el sitio, se había
   quedado con el fondo más plano de los dos. Mismo negro en el centro de
   lectura —el texto y la reja dorada de `::before` no cambian—, con una
   variación sutil hacia los bordes para que la superficie entera respire. */
.heroe{
  position:relative;overflow:hidden;padding:76px 0 88px;
  background:
    radial-gradient(ellipse 70% 55% at 22% 15%, rgba(var(--marca-rgb),.10) 0%, transparent 60%),
    linear-gradient(155deg,var(--bosque-2) 0%,var(--bosque-1) 45%,#000 100%);
  color:var(--claro-1);
}
/* La retícula de la mesa de planos, ahora en dorado sobre negro. */
.heroe::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(var(--marca-rgb),.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--marca-rgb),.14) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(75% 75% at 30% 20%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 75% at 30% 20%,#000 0%,transparent 100%);
}
.heroe-caja{
  position:relative;max-width:var(--sitio-max);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center;
}

/* Texto plano, sin píldora ni fondo: así lo escribe dafep.com —el punto
   vivo se queda, es un dato real de este sitio (la disponibilidad
   actualizándose) que el de ellos no tiene—. */
.heroe-etiqueta{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--marca-clara);font-weight:700;
}
.punto-vivo{width:7px;height:7px;border-radius:50%;background:var(--marca-clara);flex:none;position:relative}
.punto-vivo::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--marca-clara);
  opacity:.55;animation:latir 2.4s ease-out infinite;
}
@keyframes latir{
  0%{transform:scale(.55);opacity:.7}
  100%{transform:scale(1.5);opacity:0}
}
/* dafep.com no trae este punto en su antetítulo —el texto va solo—; se
   mantiene, eso sí, en la placa de disponibilidad sobre el plano (más
   abajo), que es un dato real que ellos no tienen. */
.heroe-etiqueta .punto-vivo{display:none}

.heroe-tit{
  margin:0;font-size:clamp(2.6rem,5.4vw,4.1rem);font-weight:800;line-height:1.02;
  letter-spacing:-.042em;text-wrap:balance;color:var(--claro-1);
  font-family:var(--font-display);
}
/* Sobre negro el dorado primario sí funciona como texto —al revés que sobre
   papel—: aquí se usa el vivo, no el oscuro. */
.heroe-tit em{font-style:normal;color:var(--marca-clara)}
.heroe-sub{margin:22px 0 0;max-width:52ch;color:var(--claro-2);font-size:1.08rem;line-height:1.62}

/* Las tres cifras reales —lotes, disponibles, desde—, no una foto de
   atardecer. Separadores en vez de tarjetas: es un dato que se lee de
   corrido, no un widget aparte compitiendo con el titular. */
.heroe-cifras{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;padding:0;
  font-size:var(--fs-base);color:var(--claro-2);
}
.heroe-cifras li{position:relative;padding-left:18px}
.heroe-cifras li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;
  background:var(--marca-clara);
}
.heroe-cifras li:first-child{padding-left:0}
.heroe-cifras li:first-child::before{display:none}
.heroe-cifras b{color:var(--claro-1);font-weight:700;font-variant-numeric:tabular-nums}

.heroe-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-oro{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--r-control);
  background:var(--marca-clara);color:var(--tinta);font-weight:700;font-size:var(--fs-base);
  box-shadow:0 12px 30px -14px rgba(var(--marca-rgb),.9);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-oro:hover{background:var(--marca-viva);color:var(--tinta);transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(var(--marca-rgb),1)}

/* ── Pago en línea ───────────────────────────────────────────────────────── */
.pago-icono{
  display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;
  border-radius:50%;background:var(--marca-suave);color:var(--marca-oscura);
}
.pago-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.pago-paso{
  text-align:center;padding:28px 22px;border-radius:var(--r-caja);
  background:var(--lienzo);border:1px solid var(--linea);box-shadow:var(--sombra-1);
}
.pago-paso-ic{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;
  border-radius:var(--r-control);background:var(--marca-suave);color:var(--marca-oscura);
}
.pago-paso h3{margin:0 0 6px;font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.pago-paso p{margin:0;color:var(--tinta-2);font-size:var(--fs-small);line-height:1.55}
@media (max-width:680px){
  .pago-pasos{grid-template-columns:1fr}
}
.btn-fantasma{
  display:inline-flex;align-items:center;padding:14px 24px;border-radius:var(--r-control);
  border:1px solid var(--linea);background:var(--lienzo);color:var(--tinta);
  font-weight:600;font-size:var(--fs-base);
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.btn-fantasma:hover{border-color:var(--marca);color:var(--marca-oscura)}
/* Sobre el negro del encabezado, el fantasma se invierte: transparente con
   borde y texto claros, nunca la tarjeta blanca de siempre. El llamado
   final tiene los suyos propios —`.btn-cta-*`—: es dorado, no negro. */
.heroe .btn-fantasma{background:transparent;border-color:var(--bosque-5);color:var(--claro-1)}
.heroe .btn-fantasma:hover{background:var(--bosque-3);border-color:var(--bosque-5);color:var(--claro-1)}

/* La garantía suelta, bajo los botones —mismo lugar, peso e ícono simple
   (sin placa circular detrás) que en dafep.com—. */
.heroe-garantia{
  display:flex;align-items:center;gap:10px;margin:26px 0 0;color:var(--claro-1);
  font-weight:600;font-size:var(--fs-base);
}
.heroe-garantia .ic{flex:none;color:var(--marca-clara)}

/* El plano, montado igual que la foto de proyecto de dafep.com: la imagen
   llena la tarjeta a bordo completo, sin marco ni relleno alrededor, con las
   esquinas redondeadas de la propia tarjeta —no un marco oscuro por
   fuera—, y el nombre/ubicación/precio superpuestos abajo en degradado. */
.heroe-plano{margin:0}
.plano-marco{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-grande);aspect-ratio:4/3;
  /* El plano —a diferencia de una foto— tiene un contorno irregular: es el
     lindero real del proyecto, en diagonal. En vez de recortarlo para que
     "llene" el marco como una foto —cortaría lote de verdad—, el fondo
     imita el terreno sobre el que se apoya, para que el margen alrededor
     se lea como tierra y no como un vacío negro. La proporción 4:3 —fija,
     no la del SVG— es la misma que usa la tarjeta de proyecto de
     dafep.com; sin esto, cada plano tendría un alto distinto según su
     propio contorno. */
  background:linear-gradient(155deg,#E8EFE3 0%,#D9E4D2 60%,#CBD9C2 100%);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
}
.plano-marco img{
  display:block;width:100%;height:100%;position:relative;
  object-fit:contain;object-position:center;padding:26px;
}

/* La marca de agua sobre una foto real —nunca sobre el plano, ver el
   comentario de `partials/marca_agua.php`—. No impide copiar la imagen; lo
   único que hace es que cualquier copia, así sea por captura de pantalla,
   quede con la marca encima. `pointer-events:none` para que nunca robe un
   clic al carrusel o al enlace que sí está debajo. */
.marca-agua{
  position:absolute;right:14px;bottom:14px;z-index:3;pointer-events:none;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  /* Sin esta píldora, la marca se perdía contra la foto de abajo —visible
     sobre un cielo claro, invisible sobre un jardín oscuro—. Con ella es
     visible siempre, sin importar qué haya detrás: el mismo truco que ya
     usan `.carrusel-contador` y `.placa-disponible` en este archivo. */
  background:rgba(10,10,10,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* `span.marca-agua img`, no `.marca-agua img`: selectores como
   `.plano-marco img`, `.destacado-imagen img` o `.vitrina-plano img` —que
   ya existían para la foto de verdad— también alcanzan por descendencia a
   ESTA imagen (mismo elemento `img`, cualquier ancestro), y con la misma
   especificidad el orden de la hoja decide, no la intención. Sumar el
   elemento `span` a la izquierda sube la especificidad lo suficiente para
   ganar siempre, sin `!important`. */
span.marca-agua img{display:block;width:22px;height:22px;padding:0;opacity:.92}

/* El rótulo inferior, sobre un degradado que sube desde negro: mismo
   tratamiento que la tarjeta de proyecto de dafep.com. */
.plano-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 26px 22px;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 78%);
  display:flex;flex-direction:column;gap:3px;
}
.plano-overlay-etiqueta{
  font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--marca-clara);font-weight:700;
}
.plano-overlay-lugar{color:var(--claro-1);font-size:var(--fs-base)}
.plano-overlay-precio{color:#fff;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin-top:4px}
.plano-overlay-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  color:var(--claro-1);font-weight:600;font-size:var(--fs-base);align-self:flex-start;
}
.plano-overlay-link .ic{transform:rotate(180deg)}

/* ── Cabeza de página interior ───────────────────────────────────────────── */
/* Las páginas que no son la portada abren con esta banda en lugar del
   encabezado grande: mismo idioma, mucho menos ruido. */
.pagina-cabeza{padding:56px 0 42px;background:var(--papel)}
.pagina-cabeza .titular{font-size:clamp(2rem,4vw,2.8rem)}
.pagina-cabeza .bajada b{color:var(--tinta);font-weight:700}

/* La cabecera de /proyectos en dafep.com es oscura, como la de la portada
   —no la franja clara que traía esta página—, con un antetítulo en
   píldora (no en texto plano: así lo escriben aquí, distinto de la
   portada). */
.pagina-cabeza-oscura{
  position:relative;overflow:hidden;padding:76px 0 60px;
  background:
    radial-gradient(ellipse 70% 55% at 22% 15%, rgba(var(--marca-rgb),.10) 0%, transparent 60%),
    linear-gradient(155deg,var(--bosque-2) 0%,var(--bosque-1) 45%,#000 100%);
  color:var(--claro-1);
}
.pagina-cabeza-oscura::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(var(--marca-rgb),.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(var(--marca-rgb),.14) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(75% 75% at 30% 20%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 75% at 30% 20%,#000 0%,transparent 100%);
}
.pagina-cabeza-oscura .caja{position:relative}
.pagina-cabeza-oscura .titular{color:#fff;font-size:clamp(1.9rem,3.6vw,2.6rem)}
.pagina-cabeza-oscura .bajada{color:var(--claro-2)}
.pagina-cabeza-oscura .btn-fantasma{
  margin-top:26px;background:transparent;border-color:var(--bosque-5);color:var(--claro-1);
}
.pagina-cabeza-oscura .btn-fantasma:hover{background:var(--bosque-3);border-color:var(--bosque-5);color:var(--claro-1)}
.rotulo-pildora{
  display:inline-block;margin:0 0 16px;padding:7px 16px;border-radius:var(--r-pastilla);
  background:rgba(var(--marca-rgb),.14);border:1px solid rgba(var(--marca-rgb),.4);
  color:var(--marca-clara);font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-meta);
  letter-spacing:.07em;text-transform:uppercase;font-weight:700;
}
.pagina-cabeza code{
  font-family:"JetBrains Mono",monospace;font-size:.9em;padding:2px 7px;border-radius:5px;
  background:var(--linea-suave);color:var(--tinta);
}
.error-404{padding:90px 0 110px}
.error-botones{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
/* El botón del 404 es el mismo de la portada: se usa `.btn-oro` y no quedan dos
   definiciones del mismo dorado con medidas distintas. */

/* ── Carrusel ────────────────────────────────────────────────────────────── */
/* El carrusel de fotos, DENTRO de la tarjeta del encabezado —mismo lugar y
   montaje que dafep.com: una foto a bordo completo por vez, flechas
   circulares oscuras encima, puntos debajo de la tarjeta—. Si nadie ha
   subido fotos en /admin/sitio, esta tarjeta no existe y el plano real
   ocupa su lugar solo —ver `.plano-marco` más arriba—; cuando sí hay
   fotos, el riel vive adentro del mismo marco 4:3, por eso no trae su
   propio borde ni sombra: los hereda de la tarjeta que lo envuelve. */
.carrusel-pista{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-item{flex:0 0 100%;scroll-snap-align:start;margin:0;height:100%}
.plano-marco .carrusel-item img{width:100%;height:100%;object-fit:cover;display:block;padding:0}
.carrusel-flecha{
  position:absolute;top:50%;translate:0 -50%;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;border:0;
  background:rgba(10,10,10,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  color:#fff;cursor:pointer;transition:background .15s ease;
}
.carrusel-flecha:hover{background:rgba(10,10,10,.8)}
.carrusel-prev{left:14px}
.carrusel-next{right:14px}
.carrusel-next svg{transform:rotate(180deg)}
.carrusel-puntos{display:flex;justify-content:center;gap:8px;margin-top:16px}
.carrusel-puntos button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--bosque-4);transition:background .15s ease, transform .15s ease;
}
.carrusel-puntos button.activo{background:var(--marca-clara);transform:scale(1.3)}
.carrusel-contador{
  position:absolute;top:14px;left:14px;z-index:3;
  font:600 12px/1 "JetBrains Mono",monospace;letter-spacing:.04em;
  color:#fff;background:rgba(10,10,10,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:6px 10px;border-radius:999px;font-variant-numeric:tabular-nums;
}
@media (max-width:680px){
  .carrusel-flecha{display:none}
}

/* La placa de disponibilidad, sobre el plano —esquina opuesta al contador
   del carrusel, nunca compiten por el mismo rincón—. El punto vivo que el
   antetítulo del texto apagó a propósito (ver su comentario) sigue vivo
   aquí: es el mismo dato, en el lugar donde dafep.com no tiene nada que
   mostrar porque no tiene disponibilidad real que anunciar. */
.placa-disponible{
  position:absolute;top:14px;right:14px;z-index:3;display:flex;align-items:center;gap:7px;
  font:600 12px/1 "Plus Jakarta Sans",sans-serif;
  color:#fff;background:rgba(10,10,10,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:7px 12px 7px 10px;border-radius:999px;
}
.placa-disponible .punto-vivo{display:block}
.placa-disponible b{font-variant-numeric:tabular-nums}

/* ── Fotos del proyecto, en su propia página ──────────────────────────────── */
/* El plano ya dice dónde está cada lote; esto dice cómo se ve el lugar de
   verdad. Mismo carrusel de la portada —mismas clases, mismo `sitio.js`—,
   dentro de su propio marco: si nadie subió fotos de este proyecto, la
   sección entera no existe, igual que el carrusel del inicio. */
.proy-galeria{background:var(--papel);border-bottom:1px solid var(--linea);padding:22px 24px}
.proy-galeria .adentro{max-width:1400px;margin:0 auto}
.proy-fotos-marco{
  position:relative;overflow:hidden;border-radius:var(--r-grande);
  height:340px;background:var(--linea-suave);box-shadow:0 20px 50px -30px rgba(0,0,0,.5);
}
.proy-fotos-marco .carrusel-item img{width:100%;height:100%;object-fit:cover;display:block;padding:0}
@media (max-width:680px){ .proy-fotos-marco{height:220px} }

/* ── Franjas ─────────────────────────────────────────────────────────────── */
.franja{padding:86px 0}
.franja-papel{background:var(--lienzo);border-block:1px solid var(--linea)}
/* dafep.com carga solo dos familias —Outfit y Plus Jakarta Sans—, ninguna
   monoespaciada: el antetítulo va en la misma Plus Jakarta Sans del
   cuerpo, con letras espaciadas, no en JetBrains Mono —esa sí se queda
   para datos/tablas, un rol que este antetítulo no es—. Y el color no es
   un gris —medido en píxeles contra la captura real, el antetítulo de
   CADA sección, sobre fondo claro u oscuro, es el mismo dorado primario
   (#F4D03F) que usa el resto de la marca, no un gris de "bosque"—. */
/* Tercer ajuste: todavía chico y sin nada que se moviera. Ahora: 18px
   —un salto real, no cosmético—, el degradado corre en bucle solo (el
   brillo cruza el texto cada pocos segundos, sin esperar al mouse: es
   parte del texto, no del menú, no tiene sentido exigir que alguien lo
   toque para verlo vivo) y AL PASAR el mouse el brillo se adelanta y la
   rayita de abajo se estira el doble —el "efecto interactivo" que faltaba—.
   `prefers-reduced-motion` apaga el bucle automático y dorado se queda
   fijo en su tono más rico, sin perder el efecto al pasar el mouse. */
.rotulo{
  position:relative;display:inline-block;margin:0 0 20px;padding-bottom:12px;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:18px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(100deg,
    var(--marca-oscura) 0%,var(--marca-oscura) 30%,var(--marca-viva) 45%,#FFF3C4 50%,
    var(--marca-viva) 55%,var(--marca-oscura) 70%,var(--marca-oscura) 100%);
  background-size:220% 100%;background-position:80% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 1px rgba(var(--marca-rgb),.25);
  animation:rotulo-brillo 5s ease-in-out infinite;
  transition:letter-spacing .25s ease;
  cursor:default;
}
.rotulo:hover{letter-spacing:.22em;animation-duration:1.1s}
@keyframes rotulo-brillo{
  0%, 15%   {background-position:120% 0}
  50%       {background-position:-20% 0}
  85%, 100% {background-position:-20% 0}
}
.rotulo::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:34px;
  background:linear-gradient(90deg,var(--marca-oscura),var(--marca-clara));
  border-radius:2px;transition:width .25s ease;
}
.rotulo:hover::after{width:68px}
.rotulo-centrado::after{left:50%;translate:-50% 0}
.rotulo-claro{
  background:linear-gradient(100deg,
    var(--marca-clara) 0%,var(--marca-clara) 30%,#FFF3C4 45%,#FFFDF0 50%,
    #FFF3C4 55%,var(--marca-clara) 70%,var(--marca-clara) 100%);
  background-size:220% 100%;background-position:80% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.rotulo-claro::after{background:linear-gradient(90deg,var(--marca-clara),#FFF3C4)}
@media (prefers-reduced-motion: reduce){
  .rotulo{animation:none;background-position:15% 0}
}
/* El titular de cada sección —no solo el de la portada— va en Outfit: así
   se ve "Qué hacemos" o "Cómo comprar tu lote" en dafep.com, con el mismo
   trazo grueso y geométrico del titular del encabezado, no en la Plus
   Jakarta Sans del cuerpo. */
.titular{
  margin:0;font-family:var(--font-display);font-size:clamp(1.7rem,3.1vw,2.35rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.14;text-wrap:balance;
}
.titular-claro{color:var(--tinta)}
.bajada{margin:16px 0 0;max-width:62ch;color:var(--tinta-2);font-size:var(--fs-body);line-height:1.62}
.franja-cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.enlace-flecha{display:inline-flex;align-items:center;gap:7px;color:var(--marca-oscura);font-weight:600;font-size:var(--fs-base)}
.enlace-flecha .ic{transform:rotate(180deg);transition:transform .18s ease}
.enlace-flecha:hover .ic{transform:rotate(180deg) translateX(-3px)}
.proyectos-vertodos{margin:38px 0 0}
.proyectos-vertodos .btn-fantasma .ic{transform:rotate(180deg);transition:transform .18s ease}
.proyectos-vertodos .btn-fantasma:hover .ic{transform:rotate(180deg) translateX(-3px)}

/* ── Proyectos destacados (portada) ───────────────────────────────────────
   Tarjeta más simple que `.vitrina`: en dafep.com la portada solo muestra
   imagen, nombre con su flecha, ciudad · tipo, y precio —la barra de
   inventario detallada es cosa de `/proyectos`, no de aquí—. */
.destacados{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.destacado-liga{display:block;color:inherit}
.destacado-imagen{
  position:relative;border-radius:var(--r-grande);overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(155deg,#E8EFE3 0%,#D9E4D2 60%,#CBD9C2 100%);
}
.destacado-imagen img{width:100%;height:100%;object-fit:contain;object-position:center;padding:18px;display:block}
/* La foto de reemplazo no siempre es una fotografía de paisaje: puede ser
   la misma pieza de mercadeo cuadrada que ya usa la empresa —con precio,
   logo y datos de contacto—, y recortarla a bordo completo («cover») le
   corta justo la parte con la información, dejando solo el cielo o el
   fondo. Se ve COMPLETA, igual que el plano y por la misma razón: lo que
   se corta podría ser lo único que importaba de la imagen. Solo cambia el
   fondo, gris neutro en vez del verde "terreno" que es específico del
   plano. */
.destacado-imagen.es-foto{background:var(--linea-suave)}
.destacado-cuerpo{padding-top:18px}
.destacado-fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.destacado-fila h3{margin:0;font-size:1.28rem;font-weight:700;letter-spacing:-.022em}
.destacado-flecha{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea);color:var(--tinta);transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.destacado-flecha .ic{transform:rotate(180deg)}
.destacado-liga:hover .destacado-flecha{background:var(--tinta);border-color:var(--tinta);color:#fff}
.destacado-lugar{margin:8px 0 0;color:var(--tinta-2);font-size:var(--fs-base)}
.destacado-precio{margin:10px 0 0;font-weight:700;font-size:var(--fs-body);color:var(--marca-oscura)}

/* ── Tarjetas de proyecto ──────────────────────────────────────────────────
   Nombres propios (`vitrina-*`) y no `tarjeta-*`: app.css ya tiene su `.tarjeta`
   y el mapa público carga las dos hojas. Igual con `.etiqueta` y `.leyenda`,
   que allá son el rótulo SVG del lote y el filtro del mapa. */
/* `auto-fit` —no `auto-fill`— y un tope de ancho: con un solo proyecto
   publicado, `auto-fill` deja columnas vacías que se comen la mitad de la
   fila y la tarjeta se ve perdida en un hueco. Así, una sola tarjeta se
   acomoda a su ancho natural en vez de estirarse o dejar aire muerto. */
.proyectos{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,420px));gap:24px;justify-content:start}
.vitrina{
  background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r-grande);overflow:hidden;
  box-shadow:var(--sombra-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vitrina:hover{
  transform:translateY(-4px);border-color:var(--marca);
  box-shadow:0 30px 60px -34px rgba(var(--bosque-rgb),.65);
}
.vitrina-liga{display:flex;flex-direction:column;height:100%;color:inherit}
/* El plano se muestra completo, nunca recortado: es la carta de presentación
   del proyecto. La caja fija la proporción y la lámina se acomoda adentro. */
.vitrina-plano{
  position:relative;border-bottom:1px solid var(--linea);
  background:linear-gradient(155deg,#F4F8F2 0%,#EAF0E7 100%);
  padding:22px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.vitrina-plano img{
  max-width:100%;max-height:100%;width:auto;height:auto;min-height:0;
  transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.vitrina:hover .vitrina-plano img{transform:scale(1.04)}
/* La foto de reemplazo se queda con el mismo tratamiento del plano —COMPLETA,
   nunca recortada— por la misma razón: puede ser una pieza de mercadeo con
   precio y datos de contacto, no una fotografía de paisaje, y recortarla
   podría cortar justo lo único que importaba. Ver el mismo criterio en
   `.destacado-imagen.es-foto`. Solo cambia el fondo. */
.vitrina-plano.es-foto{background:var(--linea-suave)}
.vitrina-sello{
  position:absolute;top:14px;right:14px;padding:6px 14px;border-radius:var(--r-pastilla);
  background:var(--bosque-3);border:1px solid var(--bosque-4);
  font-size:var(--fs-chip);color:var(--bosque-claro);
  box-shadow:0 6px 16px -8px rgba(var(--bosque-rgb),.8);
}
.vitrina-sello b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.vitrina-sello.agotado{background:var(--nodisp);border-color:var(--nodisp);color:#fff}

.vitrina-cuerpo{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.vitrina-lugar{
  margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);
}
.vitrina-cuerpo h3{margin:6px 0 0;font-size:1.28rem;font-weight:700;letter-spacing:-.022em}
.vitrina-desc{margin:9px 0 0;color:var(--tinta-2);font-size:var(--fs-base);line-height:1.55}
.vitrina-cuerpo .barra-inv{margin-top:18px;flex:none}
.vitrina-datos{display:flex;gap:30px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linea-suave)}
.vitrina-datos:empty{display:none}
.vitrina-datos dt{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3);
}
.vitrina-datos dd{margin:4px 0 0;font-weight:700;font-size:var(--fs-body)}
/* Ojo: `.precio` ya existe en app.css, es el panel de precio del mapa. Aquí
   necesita su propio nombre o hereda un recuadro crema que no viene al caso. */
.vitrina-datos .vitrina-precio{color:var(--marca-oscura)}
/* Empujado al fondo: con o sin descripción, todas las tarjetas cierran a la
   misma altura y la fila no queda dentada. */
.vitrina-ir{
  display:inline-flex;align-items:center;align-self:flex-start;gap:7px;
  margin-top:auto;padding:10px 18px;
  border:1px solid var(--marca-borde);border-radius:var(--r-pastilla);
  background:var(--marca-suave);color:var(--marca-oscura);font-weight:600;font-size:var(--fs-base);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.vitrina-cuerpo .vitrina-datos + .vitrina-ir{margin-top:20px}
.vitrina:hover .vitrina-ir{background:var(--marca);border-color:var(--marca);color:#fff}
.vitrina-ir .ic{transform:rotate(180deg);transition:transform .18s ease}
.vitrina:hover .vitrina-ir .ic{transform:rotate(180deg) translateX(-3px)}

/* La barra de inventario se reusa del panel; aquí solo se le da aire. */
.franja .barra-inv{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--linea-suave)}
.franja .barra-inv i{display:block;height:100%}
.franja .bi-disp{background:var(--disponible-fill)}
.franja .bi-tom{background:var(--reservado)}
.franja .bi-vend{background:var(--vendido)}
.franja .barra-pie{display:flex;justify-content:space-between;gap:10px;margin-top:11px;flex-wrap:wrap}
.franja .barra-pie span{
  display:flex;align-items:center;gap:5px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3);
}
.franja .barra-pie i{width:7px;height:7px;border-radius:var(--r-chip);display:block}
.franja .barra-pie b{color:var(--tinta);font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-base)}
.franja .barra-pie span:first-child b{color:var(--bosque-3)}

/* El estado vacío vive en panel.css, que el sitio público no carga. */
.vacio{
  border:1px dashed var(--linea);border-radius:var(--r-grande);padding:44px 30px;text-align:center;
  color:var(--tinta-3);background:var(--lienzo);
}
.vacio b{display:block;color:var(--tinta);font-size:1.06rem;margin-bottom:7px;font-weight:700}

/* ── Los pasos ───────────────────────────────────────────────────────────── */
/* Filas horizontales de ancho completo, no columnas —con texto largo, y
   ahora con números reales del plan de pago, no se aprietan cuatro
   tarjetas—. La numeración aquí SÍ significa algo: es el orden real de la
   compra, un paso no puede ocurrir antes que el anterior, así que en vez de
   las rayas divisorias de antes se dibuja como lo que es: una línea de
   tiempo, con un círculo dorado por paso en vez del texto plano "PASO 01". */
.pasos{list-style:none;margin:44px 0 0;padding:0;text-align:left;position:relative}
.pasos::before{content:"";position:absolute;left:45px;top:32px;bottom:32px;width:2px;background:var(--linea)}
.pasos li{position:relative;display:flex;gap:32px;padding:26px 0}
.paso-n{flex:none;width:90px;display:flex;justify-content:center;padding-top:2px}
.paso-circulo{
  position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--marca-clara),var(--marca-viva));color:var(--tinta);
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 10px 24px -10px rgba(var(--marca-rgb),.55);
  transition:transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease;
}
.pasos li:hover .paso-circulo{transform:scale(1.08);box-shadow:0 14px 30px -10px rgba(var(--marca-rgb),.7)}
.paso-etq{
  display:block;margin-bottom:6px;font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-meta);
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--marca-oscura);
}
.pasos h3{margin:0 0 8px;font-size:1.14rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.pasos p{margin:0;color:var(--tinta-2);font-size:var(--fs-base);line-height:1.6;max-width:64ch}

/* ── Encabezados centrados ───────────────────────────────────────────────────
   dafep.com centra el antetítulo, el titular y la bajada en CADA sección
   —sobre nosotros, qué hacemos, cómo se compra, preguntas frecuentes—; solo
   la vitrina de proyectos y el encabezado quedan a la izquierda. Modificador
   aparte (`-centrado`) en vez de cambiar `.rotulo`/`.titular` por defecto:
   esas dos clases las usan también `/proyectos` y otras páginas públicas
   que sí quieren quedarse a la izquierda. */
.franja-centrada{text-align:center}
.centrado-caja{margin:0 auto}
.rotulo-centrado, .titular-centrado{text-align:center}
.bajada-centrada{margin:16px auto 0;text-align:center}
/* El texto de la INTRODUCCIÓN se centra; el contenido de cada tarjeta —el
   nombre del proyecto, el título y la descripción de cada pilar o
   servicio— se queda a la izquierda, como en dafep.com. */
.franja-centrada .servicios, .franja-centrada .proyectos, .franja-centrada .destacados{text-align:left}

/* ── Sobre nosotros ──────────────────────────────────────────────────────── */
.sobre-texto{margin:16px auto 26px;max-width:62ch;color:var(--tinta-2);font-size:var(--fs-body);line-height:1.62}

/* ── Sobre Dafep, la página larga (/nosotros) ─────────────────────────────── */
.nosotros-cifras{
  display:flex;justify-content:center;gap:0;margin:0 0 8px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.nosotros-cifras div{flex:1;text-align:center;padding:26px 16px;border-right:1px solid var(--linea)}
.nosotros-cifras div:last-child{border-right:0}
.nosotros-cifras dd{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.02em;
  font-family:var(--font-display);color:var(--tinta);font-variant-numeric:tabular-nums}
.nosotros-cifras dt{margin:4px 0 0;font-size:var(--fs-small);color:var(--tinta-3)}
@media (max-width:560px){ .nosotros-cifras{flex-direction:column}
  .nosotros-cifras div{border-right:0;border-bottom:1px solid var(--linea)}
  .nosotros-cifras div:last-child{border-bottom:0} }

.rasgos{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.rasgos li{display:flex;gap:16px;align-items:flex-start}
.rasgo-ic{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--marca-suave);color:var(--marca-oscura);
}
.rasgos h3{margin:0 0 4px;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.rasgos p{margin:0;color:var(--tinta-2);font-size:var(--fs-small);line-height:1.55}
@media (max-width:680px){ .rasgos{grid-template-columns:1fr} }

/* ── Qué hacemos ─────────────────────────────────────────────────────────── */
/* Antes era una cuadrícula con líneas divisorias —"es como dafep.com", decía
   el comentario que esto reemplaza—; el usuario la vio "muy plana" y pidió
   premium. Ahora es tarjeta de verdad: borde, sombra, la misma barra dorada
   de tres píxeles que ya identifica lo "premium" en el panel de admin, e
   insignia circular con el ícono de cada servicio. */
.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:44px}
.servicio{
  position:relative;overflow:hidden;padding:30px;text-align:left;
  background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r-grande);
  box-shadow:0 16px 40px -28px rgba(var(--bosque-rgb),.4);
  transition:transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease, border-color .22s ease;
}
.servicio::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--marca-clara) 25%,var(--marca) 50%,var(--marca-clara) 75%,transparent);
}
.servicio:hover{
  transform:translateY(-6px);border-color:var(--marca-borde);
  box-shadow:0 26px 54px -30px rgba(var(--bosque-rgb),.55);
}
.servicio-cab{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.servicio-ic{
  flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--marca-clara),var(--marca-viva));color:var(--tinta);
  box-shadow:0 8px 18px -8px rgba(var(--marca-rgb),.55);
  transition:transform .22s cubic-bezier(.2,.8,.25,1);
}
.servicio:hover .servicio-ic{transform:scale(1.08) rotate(-4deg)}
.servicio-n{
  font-family:"JetBrains Mono",monospace;font-size:.82rem;font-weight:700;
  color:var(--tinta-3);letter-spacing:.03em;
}
.servicio h3{margin:0 0 9px;font-size:1.09rem;font-weight:700;letter-spacing:-.018em;line-height:1.25}
.servicio p{margin:0;color:var(--tinta-2);font-size:var(--fs-base);line-height:1.6}
.etiquetas{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;
  padding-top:18px;border-top:1px solid var(--linea-suave);
}
.etiquetas li{
  padding:5px 13px;border:1px solid var(--linea);border-radius:var(--r-pastilla);
  font-size:var(--fs-chip);color:var(--tinta-2);background:var(--papel);
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.servicio:hover .etiquetas li{border-color:var(--marca-borde);color:var(--marca-oscura);background:var(--marca-suave)}
@media (max-width:680px){ .servicios{grid-template-columns:1fr} }

/* ── Preguntas frecuentes ────────────────────────────────────────────────── */
.caja-angosta{max-width:760px}
.faq{display:grid;gap:14px;margin-top:34px;text-align:left}
.faq-item{
  background:var(--lienzo);border:1px solid var(--linea);border-radius:var(--r-control);
  padding:2px 26px;transition:border-color .18s ease;
}
.faq-item:hover{border-color:var(--marca-borde)}
.faq-item summary{
  padding:20px 30px 20px 0;position:relative;cursor:pointer;list-style:none;
  font-weight:600;font-size:var(--fs-body);letter-spacing:-.012em;
}
.faq-item summary::-webkit-details-marker{display:none}
/* Una "v" de chevron dibujada con dos bordes rotados, no un signo +/-:
   así la marca dafep.com cada pregunta. */
.faq-item summary::after{
  content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
  transform:rotate(45deg);transition:transform .2s ease, margin-top .2s ease;
}
.faq-item[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq-item p{margin:0 0 22px;color:var(--tinta-2);font-size:var(--fs-base);line-height:1.62;max-width:64ch}

/* ── Llamado final, para el comprador ─────────────────────────────────────
   Dorado sólido y texto negro —igual que dafep.com—: es el único bloque
   del sitio que usa el dorado primario como FONDO de una franja entera, no
   solo de un botón. Por eso sus botones se invierten distinto que el resto
   del sitio: blanco-contorno y negro-sólido, nunca dorado —un botón dorado
   encima de un fondo dorado desaparecería—. */
.franja-cta{background:var(--marca-clara);color:var(--tinta);text-align:center}
.franja-cta .titular-cta{color:var(--tinta)}
/* Sobre el fondo dorado sólido de esta franja, el degradado dorado de
   `.rotulo` no se leería —oro sobre oro—: aquí vuelve a ser un color
   plano y oscuro, sin el efecto de texto en degradado. */
.rotulo-cta{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  filter:none;text-shadow:none;color:rgba(var(--tinta-rgb),.55);
  animation:none;
}
.rotulo-cta::after{background:rgba(var(--tinta-rgb),.4)}
.cta-caja{max-width:640px;display:flex;flex-direction:column;align-items:center}
.cta-sub{margin:16px 0 30px;color:rgba(var(--tinta-rgb),.7);font-size:var(--fs-body);line-height:1.62;max-width:52ch}
.franja-cta .heroe-botones{justify-content:center}
.btn-cta-fantasma{
  display:inline-flex;align-items:center;padding:14px 24px;border-radius:var(--r-control);
  border:1px solid var(--tinta);background:transparent;color:var(--tinta);
  font-weight:600;font-size:var(--fs-base);transition:background .16s ease;
}
.btn-cta-fantasma:hover{background:rgba(var(--tinta-rgb),.08)}
.btn-cta-solido{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--r-control);
  background:var(--tinta);color:#fff;font-weight:700;font-size:var(--fs-base);
  transition:background .16s ease, transform .16s ease;
}
.btn-cta-solido:hover{background:#000;transform:translateY(-2px)}
.btn-cta-solido .ic{transform:rotate(180deg)}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie-sitio{background:linear-gradient(180deg,var(--bosque-2) 0%,var(--bosque-1) 100%);color:var(--claro-2)}
.pie-caja{
  max-width:var(--sitio-max);margin:0 auto;padding:58px 24px 42px;
  display:grid;grid-template-columns:minmax(220px,2fr) repeat(auto-fit,minmax(140px,1fr));gap:42px;
}
.pie-nombre{margin:0;color:var(--marca-clara);font-weight:700;font-size:1.05rem}
.pie-marca .pie-frase{margin-top:8px;color:var(--claro-3);font-weight:400;font-size:var(--fs-base);max-width:34ch;line-height:1.55}
.pie-tit-contacto{margin-top:26px}
.pie-contacto-enlace{display:block;color:var(--claro-2);font-size:var(--fs-base);margin-bottom:6px}
.pie-contacto-enlace:hover{color:var(--marca-clara)}
.pie-redes{display:flex;gap:10px;margin:20px 0 0}
.pie-redes a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--bosque-4);color:var(--claro-1);transition:border-color .16s ease, color .16s ease;
}
.pie-redes a:hover{border-color:var(--marca-clara);color:var(--marca-clara)}
.pie-tit{
  margin:0 0 14px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--claro-3);
}
.pie-enlaces{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pie-enlaces a{display:flex;align-items:center;gap:7px;color:var(--claro-2);font-size:var(--fs-base)}
.pie-enlaces a:hover{color:var(--marca-clara)}
.pie-enlaces a .ic{flex:none;color:var(--claro-3)}

/* ── Botón flotante de WhatsApp ────────────────────────────────────────────
   Solo aparece si hay un número configurado —ver layouts/publico.php—. */
.whatsapp-flotante{
  position:fixed;right:22px;bottom:22px;z-index:40;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;box-shadow:0 14px 30px -10px rgba(37,211,102,.55);
  transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease;
}
.whatsapp-flotante:hover{transform:translateY(-3px);box-shadow:0 18px 36px -8px rgba(37,211,102,.65)}
.whatsapp-flotante .ic{stroke:#fff}
@media (prefers-reduced-motion:reduce){ .whatsapp-flotante{transition:none} }
.pie-legal{
  border-top:1px solid var(--bosque-3);
  max-width:var(--sitio-max);margin:0 auto;padding:20px 24px 28px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:var(--fs-meta);letter-spacing:.02em;color:var(--claro-3);
}

/* ── El formulario de interés en la ficha del mapa ────────────────────────
   Antes esta ficha solo mostraba precio y cuota, sin ninguna forma de dejar
   un contacto: `.tomar` es del panel del aliado (congelar), pero ese vive
   solo en panel.css —aquí no se carga—, así que se repite aquí lo que ese
   formulario necesita. Mismo look, sin depender del CSS del portal. */
.tomar{padding:18px 20px;border-top:1px solid var(--linea-suave)}
.tomar-t{margin:0 0 12px;font-weight:700;font-size:var(--fs-base);color:var(--tinta)}
.tomar label{display:block;font-size:var(--fs-small);font-weight:600;color:var(--tinta-2);margin-bottom:10px}
.tomar input{
  width:100%;margin-top:5px;padding:9px 11px;font:inherit;font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-base);
  text-transform:none;letter-spacing:0;color:var(--tinta);
  border:1px solid var(--linea);border-radius:var(--r-control);background:var(--papel);
}
.tomar input:focus{outline:none;border-color:var(--marca);background:var(--lienzo)}
.tomar label.casilla{
  display:flex;align-items:center;gap:10px;margin:16px 0 0;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--fs-chip);font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--tinta-2);cursor:pointer;
}
.tomar label.casilla input{width:auto;margin:0;accent-color:var(--marca)}
.tomar .btn-solido{margin-top:16px;width:100%;text-decoration:none}

/* ── Aparición al bajar ──────────────────────────────────────────────────── */
/* Solo se activa si el JS marca el documento; sin JS todo está visible. */
.js [data-revelar]{opacity:0;transform:translateY(18px)}
.js [data-revelar].visible{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.25,1)}

@media (prefers-reduced-motion: reduce){
  .js [data-revelar]{opacity:1;transform:none;transition:none}
  .punto-vivo::after{animation:none}
  .plano-marco,.vitrina-plano img,.enlace-flecha .ic,.vitrina-ir .ic{transition:none}
  .plano-marco{transform:none}
  .heroe-plano:hover .plano-marco{transform:none}
}

/* ── Pantallas angostas ──────────────────────────────────────────────────── */
@media (max-width:960px){
  .heroe{padding:52px 0 64px}
  .heroe-caja{grid-template-columns:1fr;gap:44px}
  .plano-marco{transform:none}
  .pasos::before{display:none}
  .pasos li{flex-direction:column;gap:14px}
  .paso-n{width:auto;justify-content:flex-start}
  .pie-caja{grid-template-columns:1fr 1fr;gap:32px}
  .pie-marca{grid-column:1 / -1}
}
@media (max-width:680px){
  .caja,.cabecera-caja,.heroe-caja{padding-left:20px;padding-right:20px}
  .franja{padding:60px 0}
  .menu{gap:16px}
  .menu a:not(.btn-marco){display:none}
  .proyectos,.destacados{grid-template-columns:1fr}
  .pie-caja{grid-template-columns:1fr}
}