/* ================================================
   PYRUS INMOBILIARIA — ESTILOS PÁGINAS DE DESARROLLO
   Archivo:  src/css/pyrus-desarrollo.css
   Versión:  2.0.2
   Depende:  pyrus-global.css (debe cargarse antes)
   Uso WP:   Apariencia → Personalizar → CSS adicional
             (después de pyrus-global.css)
             O snippet en Code Snippets (tipo: frontend)

   Este archivo contiene únicamente los estilos
   específicos para las páginas de desarrollo individual.
   No modifica ni sobreescribe pyrus-global.css.

   Cambios v1.1.0:
   - Renombramiento pyrus-desarro-* → pyrus-desarrollo-*
   - Eliminación de inline styles → clases nuevas
   - Nuevo: .pyrus-amenidades-grupos (estructura por grupos)
   - Nuevo: .pyrus-tipologias__grid--2col (variante 2 columnas)
   - Nuevo: clases de espaciado para galería y relacionados

   Cambios v1.2.0:
   - Nuevo: .pyrus-tipologias__grid--2x2 (variante 4 cards, 2×2)

   Cambios v1.3.0:
   - Nuevo: .pyrus-numeralia (bloque de cifras clave del proyecto)
   - Nuevo: .pyrus-tipologias__nota (nota de financiamiento)

   Cambios v1.4.0:
   - Nuevo: .pyrus-respaldo (sección de infraestructura y respaldo)
     Grid de 3 columnas con dot dorado + texto estructurado.
     Reutilizable para cualquier desarrollo con respaldo documental detallado.

   Cambios v1.4.1:
   - Nuevo: .pyrus-seccion-intro (párrafo estrecho en sección centrada)
     Elimina la necesidad de style="max-width:Xpx;margin-inline:auto;" inline.

   Cambios v1.5.0:
   - Nuevo: .pyrus-portafolio-hero (hero del índice de desarrollos)
   - Nuevo: .pyrus-portafolio-intro (bloque introductorio del índice)
   - Nuevo: .pyrus-portafolio-grid + .pyrus-portafolio-card (grilla 2+3 con cards enriquecidas)
   - Nuevo: .pyrus-orientacion (sección "si buscas…" — guía de selección)
   - Nuevo: .pyrus-portafolio-cierre (sección de cierre con frase y CTA)

   Cambios v1.6.0:
   - Nuevo: .pyrus-nosotros-hero (hero institucional de la página Nosotros)
   - Nuevo: .pyrus-nosotros-intro (bloque editorial "Qué es Pyrus")
   - Nuevo: .pyrus-pilares + .pyrus-pilar (3 pilares de trabajo, fondo oscuro)
   - Nuevo: .pyrus-perfiles + .pyrus-perfil (portafolio editorial 2-col, 4 perfiles)
   - Nuevo: .pyrus-nosotros-confianza (bloque de cita de confianza, fondo petróleo)

   Cambios v1.7.0:
   - Nuevo: .pyrus-contacto-hero (hero de la página Contacto, 70vh, fondo cálido)
   - Nuevo: .pyrus-contacto-intro (bloque introductorio editorial, marfil)
   - Nuevo: .pyrus-contacto-grid (layout 2 columnas: formulario + canales)
   - Nuevo: .pyrus-contacto-form (columna formulario con encabezado + privacidad)
   - Nuevo: .pyrus-contacto-canales + .pyrus-contacto-canal (canales directos con icono)
   - Nuevo: .pyrus-contacto-ayuda (mini bloque "Te podemos ayudar con")
   - Nuevo: .pyrus-contacto-mapa (espacio para Google Maps embed, con placeholder visual)

   Cambios v1.8.0:
   - Nuevo: .pyrus-legal-hero (hero contenido de páginas legales, ~52vh, tono sobrio)
   - Nuevo: .pyrus-legal-intro (bloque introductorio con fecha de actualización)
   - Nuevo: .pyrus-legal-cuerpo + .pyrus-legal-seccion (layout del cuerpo legal numerado)
   - Nuevo: .pyrus-legal-lista + .pyrus-legal-lista--arco (listas del aviso de privacidad)
   - Nuevo: .pyrus-legal-subtitulo (H3 dentro del cuerpo legal)
   - Nuevo: .pyrus-legal-contacto + .pyrus-legal-dato (bloque final de datos de contacto)

   Cambios v1.9.0:
   - Nuevo: .pyrus-gracias-hero (hero centrado de confirmación, 72vh, icono checkmark)
   - Nuevo: .pyrus-gracias-pasos + .pyrus-gracias-paso (3 pasos en grid, fondo marfil)
   - Nuevo: .pyrus-gracias-acciones + .pyrus-gracias-accion (3 tarjetas de acción con icono SVG)

   Cambios v2.0.0:
   - Nuevo: .pyrus-contacto-faq (overrides del FAQ sobre fondo blanco en página Contacto)
   - Fix global: rotación de ícono FAQ corregida a 180deg (era 45deg — incorrecto para chevron)

   Cambios v2.0.1:
   - Mejora visual: .pyrus-gracias-hero__overlay — radial glow petróleo centrado añadido al degradado existente
   - Mejora visual: .pyrus-legal-hero__overlay — radial glow petróleo lateral añadido al degradado existente
     Ambos cambios aportan profundidad editorial a los heroes CSS-only (sin imagen fotográfica).

   Cambios v2.0.2:
   - Responsive: .pyrus-legal-hero__content — padding-top mobile aumentado (clamp 52px→80px) para mayor aire vertical
   - Responsive: .pyrus-legal-hero — min-height mobile 46vh → 48vh (mínimo extra de respiro)
   - Responsive: .pyrus-legal-intro__texto — font-size reducido a var(--pyrus-type-base) en ≤640px
   - WA float: .pyrus-page-gracias .pyrus-wa-float { display: none } en ≤640px (evita que tape CTAs internos)
   ================================================ */


/* ================================================
   1. HERO DEL DESARROLLO
   Hero de página interior con imagen, overlay
   y contenido posicionado en la parte inferior.
   ================================================ */

.pyrus-desarrollo-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--pyrus-negro-carbon);
}

.pyrus-desarrollo-hero__picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.pyrus-desarrollo-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.pyrus-desarrollo-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  rgba(16,18,22,0.48) 0%, rgba(16,18,22,0.14) 52%, rgba(16,18,22,0) 100%),
    linear-gradient(to bottom, rgba(16,18,22,0.22) 0%, rgba(16,18,22,0.08) 30%, rgba(16,18,22,0.60) 68%, rgba(16,18,22,0.92) 100%);
  z-index: 1;
}

.pyrus-desarrollo-hero__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--pyrus-header-h) + var(--pyrus-sp-6));
  padding-inline: var(--pyrus-container-px);
  z-index: 2;
}

.pyrus-desarrollo-hero__breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-2);
  font-size: var(--pyrus-type-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(247,244,238,0.55);
}

.pyrus-desarrollo-hero__breadcrumb-nav a {
  color: rgba(247,244,238,0.55);
  transition: color var(--pyrus-tr-fast);
}
.pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado); }

.pyrus-desarrollo-hero__breadcrumb-sep {
  color: rgba(247,244,238,0.25);
  font-size: 10px;
}

.pyrus-desarrollo-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(40px, 5.5vw, 72px);
}

.pyrus-desarrollo-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-4);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-desarrollo-hero__eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
}

.pyrus-desarrollo-hero__nombre {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(48px, 8.5vw, 100px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-5);
  text-shadow: 0 2px 20px rgba(16,18,22,0.50), 0 1px 4px rgba(16,18,22,0.28);
}

.pyrus-desarrollo-hero__tagline {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  color: rgba(247,244,238,0.80);
  text-shadow: 0 1px 10px rgba(16,18,22,0.42);
  line-height: 1.6;
  max-width: 580px;
  margin-bottom: var(--pyrus-sp-7);
}

.pyrus-desarrollo-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  align-items: center;
}

.pyrus-desarrollo-hero__scroll {
  position: absolute;
  bottom: var(--pyrus-sp-6);
  right: var(--pyrus-container-px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-3);
  color: rgba(247,244,238,0.40);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  writing-mode: vertical-rl;
}

.pyrus-desarrollo-hero__scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(247,244,238,0.30);
  animation: pyrus-scroll-pulse 2s ease-in-out infinite;
}

@keyframes pyrus-scroll-pulse {
  0%, 100% { opacity: 0.30; }
  50%       { opacity: 0.80; }
}

/* ─── TABLET LANDSCAPE ≤1024px ─── */
@media (max-width: 1024px) {
  .pyrus-desarrollo-hero {
    min-height: 76vh;
  }
}

/* ─── TABLET PORTRAIT ≤768px ─── */
@media (max-width: 768px) {
  .pyrus-desarrollo-hero {
    min-height: 70vh;
  }
  .pyrus-desarrollo-hero__overlay {
    background:
      linear-gradient(to right,  rgba(16,18,22,0.58) 0%, rgba(16,18,22,0.20) 60%, rgba(16,18,22,0.04) 100%),
      linear-gradient(to bottom, rgba(16,18,22,0.20) 0%, rgba(16,18,22,0.06) 22%, rgba(16,18,22,0.68) 58%, rgba(16,18,22,0.95) 100%);
  }
  .pyrus-desarrollo-hero__tagline {
    max-width: 100%;
  }
}

/* Mobile ≤640px
   - breadcrumb oculto: reduce ruido visual y elimina riesgo de solapamiento
   - padding-top en la sección: impide que el flex-end empuje contenido
     dentro de la zona del header fijo (72px) en viewports cortos (~568px)
   - H1 reducido: escala elegante para pantallas pequeñas
   - tagline compactado: 16px + line-height 1.55 + ancho completo
   - overlay reforzado: mayor contraste en lateral y fondo para pantallas angostas
   - eyebrow más ajustado al H1 */
@media (max-width: 640px) {
  .pyrus-desarrollo-hero__breadcrumb { display: none; }
  .pyrus-desarrollo-hero {
    min-height: 70vh;
    padding-top: var(--pyrus-header-h);
  }
  .pyrus-desarrollo-hero__scroll   { display: none; }
  .pyrus-desarrollo-hero__content  { padding-bottom: clamp(32px, 8vw, 48px); }
  .pyrus-desarrollo-hero__eyebrow  { margin-bottom: var(--pyrus-sp-4); }
  .pyrus-desarrollo-hero__nombre   { font-size: clamp(36px, 10vw, 52px); }
  .pyrus-desarrollo-hero__tagline  {
    font-size: var(--pyrus-type-base);
    line-height: 1.55;
    max-width: 100%;
    margin-bottom: var(--pyrus-sp-6);
  }
  .pyrus-desarrollo-hero__overlay {
    background:
      linear-gradient(to right,  rgba(16,18,22,0.70) 0%, rgba(16,18,22,0.28) 65%, rgba(16,18,22,0.06) 100%),
      linear-gradient(to bottom, rgba(16,18,22,0.18) 0%, rgba(16,18,22,0.06) 18%, rgba(16,18,22,0.74) 52%, rgba(16,18,22,0.96) 100%);
  }
}

/* ─── NARROW MOBILE ≤480px: CTAs apilados verticalmente ─── */
@media (max-width: 480px) {
  .pyrus-desarrollo-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pyrus-sp-3);
  }
}

/* ─── LANDSCAPE MOBILE (altura ≤500px): hero compacto y funcional ────────
   Teléfonos en horizontal donde la altura disponible es muy reducida.
   Se compactan fuentes y espaciado; tagline, breadcrumb e indicador de
   scroll se ocultan para que el bloque textual quepa sin desborde. */
@media (max-height: 500px) and (orientation: landscape) {
  .pyrus-desarrollo-hero             { min-height: 100vh; }
  .pyrus-desarrollo-hero__breadcrumb { display: none; }
  .pyrus-desarrollo-hero__scroll     { display: none; }
  .pyrus-desarrollo-hero__content    { padding-bottom: var(--pyrus-sp-5); }
  .pyrus-desarrollo-hero__eyebrow    { margin-bottom: var(--pyrus-sp-2); }
  .pyrus-desarrollo-hero__nombre {
    font-size: clamp(28px, 5.5vw, 42px);
    margin-bottom: var(--pyrus-sp-3);
  }
  .pyrus-desarrollo-hero__tagline    { display: none; }
  .pyrus-desarrollo-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--pyrus-sp-3);
  }
}


/* ─── SCROLL MARGIN — previene que el header fijo tape encabezados al navegar por anclas ─── */
.pyrus-section[id],
.pyrus-section--lg[id],
.pyrus-galeria[id],
.pyrus-beneficios-desarrollo[id],
.pyrus-numeralia[id],
.pyrus-resumen[id],
.pyrus-conversion[id] {
  scroll-margin-top: calc(var(--pyrus-header-h) + 20px);
}


/* ================================================
   2. RESUMEN RÁPIDO
   Strip oscuro con datos clave del desarrollo.
   ================================================ */

.pyrus-resumen {
  background-color: var(--pyrus-negro-carbon);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-block: var(--pyrus-sp-7);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.pyrus-resumen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pyrus-sp-6);
}

.pyrus-resumen__item {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-2);
}

.pyrus-resumen__etiqueta {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.35);
}

.pyrus-resumen__valor {
  font-family: var(--pyrus-font-heading);
  font-size: var(--pyrus-type-h4);
  font-weight: 400;
  color: var(--pyrus-blanco-marfil);
  line-height: 1.2;
}

.pyrus-resumen__sub {
  font-size: var(--pyrus-type-xs);
  color: rgba(247,244,238,0.45);
  line-height: 1.5;
}

.pyrus-resumen__item + .pyrus-resumen__item {
  border-left: 1px solid rgba(255,255,255,0.08);
  padding-left: var(--pyrus-sp-6);
}

@media (max-width: 860px) {
  .pyrus-resumen__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pyrus-sp-6) var(--pyrus-sp-5);
  }
  .pyrus-resumen__item + .pyrus-resumen__item { border-left: none; padding-left: 0; }
  .pyrus-resumen__item:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.08);
    padding-right: var(--pyrus-sp-5);
  }
}

@media (max-width: 480px) {
  /* gap: 0 porque cada item ya tiene padding-top como separador — evita doble espaciado */
  .pyrus-resumen__grid { grid-template-columns: 1fr; gap: 0; }
  .pyrus-resumen__item + .pyrus-resumen__item { border-left: none; padding-left: 0; }
  .pyrus-resumen__item:nth-child(odd) { border-right: none; padding-right: 0; }
  .pyrus-resumen__item {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: var(--pyrus-sp-5);
  }
  .pyrus-resumen__item:first-child { border-top: none; padding-top: 0; }
}


/* ================================================
   3. DESCRIPCIÓN NARRATIVA (2 columnas)
   Texto a la izquierda, imagen a la derecha.
   ================================================ */

/* Stacking context propio: evita bleed visual desde la sección resumen
   oscura en mobile. Aplica a todas las páginas de desarrollo (misma id). */
#descripcion {
  position: relative;
}

.pyrus-descripcion__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.pyrus-descripcion__texto {
  max-width: 540px;
}

.pyrus-descripcion__cuerpo {
  margin-top: var(--pyrus-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-5);
}

.pyrus-descripcion__cuerpo p {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  line-height: 1.75;
  color: #2a2e35;
}

.pyrus-descripcion__cta {
  margin-top: var(--pyrus-sp-7);
}

.pyrus-descripcion__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--pyrus-radius-md);
  aspect-ratio: 4 / 5;
  max-height: 560px;
  box-shadow: var(--pyrus-shadow-lg);
}

.pyrus-descripcion__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.pyrus-descripcion__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pyrus-tr-slow);
  background-color: var(--pyrus-negro-suave);
}
.pyrus-descripcion__img-wrap:hover .pyrus-descripcion__img { transform: scale(1.03); }

/* Placeholder premium: activo cuando se usa <div> en lugar de <img> real.
   Reemplazar clase --ph + contenido interno al activar asset definitivo. */
.pyrus-descripcion__img--ph {
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 48px,
      rgba(216, 192, 122, 0.03) 48px,
      rgba(216, 192, 122, 0.03) 49px
    ),
    linear-gradient(150deg, var(--pyrus-negro-suave) 0%, var(--pyrus-azul-petroleo) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pyrus-descripcion__ph-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px 24px;
  position: relative;
  z-index: 1;
}

.pyrus-descripcion__ph-icon {
  width: 52px;
  height: 52px;
  color: var(--pyrus-dorado-principal);
  opacity: 0.5;
}

.pyrus-descripcion__ph-nombre {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--pyrus-blanco-marfil);
  line-height: 1.2;
}

.pyrus-descripcion__ph-zona {
  font-size: var(--pyrus-type-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(216, 192, 122, 0.5);
  line-height: 1.5;
}

.pyrus-descripcion__img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(216,192,122,0.12);
  border-radius: var(--pyrus-radius-md);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 860px) {
  .pyrus-descripcion__inner {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-6);
  }
  .pyrus-descripcion__img-wrap {
    aspect-ratio: 16 / 9;
    /* order eliminado: la imagen sigue al texto según orden del DOM (texto primero) */
  }
  .pyrus-descripcion__texto { max-width: 100%; }
}

@media (max-width: 768px) {
  .pyrus-descripcion__cta { text-align: center; }
}


/* ================================================
   4. GALERÍA VISUAL
   1 imagen principal + 4 secundarias en grid.
   ================================================ */

.pyrus-galeria {
  background-color: var(--pyrus-negro-carbon);
  /* Offset para que el heading no quede tapado por el header fijo al navegar con ancla */
  scroll-margin-top: var(--pyrus-header-h, 72px);
}

/* Reemplaza inline style="padding-top: var(--pyrus-section-py)" */
.pyrus-galeria__encabezado {
  padding-top: var(--pyrus-section-py);
}

/* Reemplaza inline style="padding-bottom: var(--pyrus-section-py)" */
.pyrus-galeria__pie {
  padding-bottom: var(--pyrus-section-py);
}

/* Placeholder temporal de galería (3 tarjetas sin imagen).
   Reactivar con pyrus-galeria__main + pyrus-galeria__side cuando lleguen los assets. */
.pyrus-galeria__grid--ph {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
  height: auto;
}

.pyrus-galeria-ph {
  aspect-ratio: 16 / 9;
  border-radius: var(--pyrus-radius-md);
  border: 1px solid rgba(216, 192, 122, 0.10);
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 48px,
      rgba(216, 192, 122, 0.025) 48px,
      rgba(216, 192, 122, 0.025) 49px
    ),
    linear-gradient(150deg, var(--pyrus-negro-suave) 0%, var(--pyrus-azul-petroleo) 100%);
  display: flex;
  align-items: flex-end;
  padding: var(--pyrus-sp-5);
  overflow: hidden;
  transition: border-color var(--pyrus-tr-fast);
}

.pyrus-galeria-ph:hover {
  border-color: rgba(216, 192, 122, 0.22);
}

.pyrus-galeria-ph__label {
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, 0.45);
}

/* Tablet: 2 columnas + tercera tarjeta a ancho completo */
@media (min-width: 481px) and (max-width: 860px) {
  .pyrus-galeria__grid--ph {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pyrus-sp-4);
  }
  .pyrus-galeria-ph:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
}

/* Mobile: columna única, tarjetas compactas */
@media (max-width: 480px) {
  .pyrus-galeria__grid--ph {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-3);
  }
  .pyrus-galeria-ph {
    aspect-ratio: 16 / 7;
  }
}

.pyrus-galeria__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 6px;
  height: 560px;
}

.pyrus-galeria__main {
  overflow: hidden;
  border-radius: var(--pyrus-radius-md) 0 0 var(--pyrus-radius-md);
  position: relative;
}

.pyrus-galeria__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

.pyrus-galeria__side-item {
  overflow: hidden;
  position: relative;
}

.pyrus-galeria__side-item:first-child  { border-radius: 0 var(--pyrus-radius-md) 0 0; }
.pyrus-galeria__side-item:nth-child(2) { border-radius: 0; }
.pyrus-galeria__side-item:nth-child(3) { border-radius: 0; }
.pyrus-galeria__side-item:last-child   { border-radius: 0 0 var(--pyrus-radius-md) 0; }

.pyrus-galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.pyrus-galeria__main:hover .pyrus-galeria__img,
.pyrus-galeria__side-item:hover .pyrus-galeria__img {
  transform: scale(1.05);
}

.pyrus-galeria__side-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16,18,22,0.08);
  pointer-events: none;
  transition: background var(--pyrus-tr);
}
.pyrus-galeria__side-item:hover::after { background: rgba(16,18,22,0.0); }

.pyrus-galeria__ver-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pyrus-sp-3);
  padding-top: var(--pyrus-sp-6);
  font-size: var(--pyrus-type-sm);
  font-weight: 400;
  color: rgba(247,244,238,0.50);
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .pyrus-galeria__grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .pyrus-galeria__main {
    aspect-ratio: 16 / 9;
    border-radius: var(--pyrus-radius-md) var(--pyrus-radius-md) 0 0;
  }
  .pyrus-galeria__side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    aspect-ratio: 16 / 5;
  }
  .pyrus-galeria__side-item:not(:nth-child(-n+2)) { display: none; }
  .pyrus-galeria__side-item:first-child { border-radius: 0 0 0 var(--pyrus-radius-md); }
  .pyrus-galeria__side-item:nth-child(2) { border-radius: 0 0 var(--pyrus-radius-md) 0; }
}

@media (max-width: 480px) {
  .pyrus-galeria__side { display: none; }
  .pyrus-galeria__main { border-radius: var(--pyrus-radius-md); }
}

/* ─── GALERÍA: LINK TRIGGER ─────────────────────
   Envuelve cada imagen. Ocupa todo el contenedor
   padre y actúa como zona de clic del lightbox.
   ─────────────────────────────────────────────── */
.pyrus-galeria__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  text-decoration: none;
}

/* Overlay sutil sobre la imagen principal al hover */
.pyrus-galeria__main .pyrus-galeria__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 18, 22, 0.0);
  transition: background 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.pyrus-galeria__main .pyrus-galeria__link:hover::after,
.pyrus-galeria__main .pyrus-galeria__link:focus-visible::after {
  background: rgba(16, 18, 22, 0.22);
}

/* Contorno de foco visible — dorado del sistema */
.pyrus-galeria__link:focus-visible {
  outline: 2px solid var(--pyrus-dorado);
  outline-offset: -2px;
}

/* ─── GALERÍA: LABEL DE HOVER ────────────────────
   Aparece sobre la imagen al hacer hover/focus.
   Está siempre en el DOM, solo cambia la opacidad.
   ─────────────────────────────────────────────── */
.pyrus-galeria__label {
  position: absolute;
  bottom: var(--pyrus-sp-4);
  left: var(--pyrus-sp-4);
  z-index: 2;
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: transparent;
  transition: color 0.3s ease;
  pointer-events: none;
}
.pyrus-galeria__link:hover .pyrus-galeria__label,
.pyrus-galeria__link:focus-visible .pyrus-galeria__label {
  color: rgba(247, 244, 238, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* ─── GALERÍA: FALLBACK DE IMAGEN ───────────────
   JS añade --fallback al <img> y al <a> padre
   cuando el asset no existe o falla al cargar.
   ─────────────────────────────────────────────── */
.pyrus-galeria__img--fallback {
  visibility: hidden; /* oculta el ícono roto del navegador */
}
/* El link padre muestra el gradiente placeholder del sistema */
.pyrus-galeria__link--fallback {
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 48px,
      rgba(216, 192, 122, 0.025) 48px,
      rgba(216, 192, 122, 0.025) 49px
    ),
    linear-gradient(150deg, var(--pyrus-negro-suave) 0%, var(--pyrus-azul-petroleo) 100%);
}
/* Label siempre visible cuando no hay imagen */
.pyrus-galeria__link--fallback .pyrus-galeria__label {
  color: rgba(247, 244, 238, 0.35);
}

/* ─── GALERÍA: CTA INFERIOR (button reset) ───────
   Convierte el <p> anterior en <button> manteniendo
   los estilos flex/spacing ya definidos arriba.
   ─────────────────────────────────────────────── */
button.pyrus-galeria__ver-mas {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.25s ease;
  width: 100%;
}
button.pyrus-galeria__ver-mas:hover {
  color: rgba(247, 244, 238, 0.85);
}
button.pyrus-galeria__ver-mas:focus-visible {
  outline: 2px solid var(--pyrus-dorado);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ================================================
   GALERÍA — MODAL / LIGHTBOX
   Componente creado dinámicamente por JS.
   El <div#pyrus-galeria-modal> se inserta en <body>
   al primer clic. La clase en <body> bloquea scroll.
   ================================================ */

body.pyrus-modal-open {
  overflow: hidden;
}

/* Ocultar el botón flotante de WhatsApp mientras el modal esté abierto.
   Se restaura automáticamente al quitar la clase del body al cerrar. */
body.pyrus-modal-open .pyrus-wa-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Gracias: en mobile, la página ya tiene CTAs internos de WhatsApp en el hero.
   El botón flotante duplicaría la acción y tape los CTAs en pantallas pequeñas. */
@media (max-width: 640px) {
  .pyrus-page-gracias .pyrus-wa-float { display: none; }
}

.pyrus-galeria-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pyrus-galeria-modal[hidden] {
  display: none;
}

/* Fondo oscuro con blur */
.pyrus-galeria-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 18, 22, 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Área central con imagen y controles */
.pyrus-galeria-modal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 64px 80px;
  box-sizing: border-box;
}

/* Figura contenedora */
.pyrus-galeria-modal__figura {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Imagen en el modal */
.pyrus-galeria-modal__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--pyrus-radius-sm, 4px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.60);
  opacity: 0; /* oculta hasta que cargue — JS añade is-loaded */
}
/* Aparece con fade suave cuando la imagen cargó correctamente */
.pyrus-galeria-modal__img.is-loaded {
  opacity: 1;
  transition: opacity 0.28s ease;
}

/* Fallback premium: misma estética del sistema para imágenes ausentes.
   JS añade esta clase a <figure> cuando el <img> dispara error. */
.pyrus-galeria-modal__figura--fallback {
  width: min(80vw, 560px);
  min-height: 320px;
  justify-content: flex-end;
  padding: var(--pyrus-sp-6);
  box-sizing: border-box;
  border-radius: var(--pyrus-radius-md, 8px);
  border: 1px solid rgba(216, 192, 122, 0.12);
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 48px,
      rgba(216, 192, 122, 0.025) 48px,
      rgba(216, 192, 122, 0.025) 49px
    ),
    linear-gradient(150deg, var(--pyrus-negro-suave) 0%, var(--pyrus-azul-petroleo) 100%);
}
/* En fallback el <img> desaparece completamente (sin espacio residual) */
.pyrus-galeria-modal__figura--fallback .pyrus-galeria-modal__img {
  display: none;
}
/* Caption sigue visible y se alinea al fondo del bloque */
.pyrus-galeria-modal__figura--fallback .pyrus-galeria-modal__caption {
  display: block;
  margin-top: 0;
  color: rgba(247, 244, 238, 0.40);
}

/* Caption opcional */
.pyrus-galeria-modal__caption {
  margin-top: var(--pyrus-sp-3);
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(247, 244, 238, 0.72);
  text-align: center;
}
.pyrus-galeria-modal__caption[hidden] {
  display: none;
}

/* Contador "1 / 5" */
.pyrus-galeria-modal__counter {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 400;
  letter-spacing: 0.10em;
  color: rgba(247, 244, 238, 0.45);
  white-space: nowrap;
}

/* Base compartida de botones de control */
.pyrus-galeria-modal__close,
.pyrus-galeria-modal__prev,
.pyrus-galeria-modal__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 18, 22, 0.60);
  border: 1px solid rgba(216, 192, 122, 0.15);
  border-radius: 50%;
  color: rgba(247, 244, 238, 0.80);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pyrus-galeria-modal__close:hover,
.pyrus-galeria-modal__prev:hover,
.pyrus-galeria-modal__next:hover {
  background: rgba(216, 192, 122, 0.12);
  border-color: rgba(216, 192, 122, 0.40);
  color: rgba(247, 244, 238, 1);
}
.pyrus-galeria-modal__close:focus-visible,
.pyrus-galeria-modal__prev:focus-visible,
.pyrus-galeria-modal__next:focus-visible {
  outline: 2px solid var(--pyrus-dorado);
  outline-offset: 2px;
}
.pyrus-galeria-modal__prev:disabled,
.pyrus-galeria-modal__next:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* Botón cerrar — esquina superior derecha */
.pyrus-galeria-modal__close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
}
.pyrus-galeria-modal__close svg {
  width: 20px;
  height: 20px;
}

/* Anterior / Siguiente — laterales centrados */
.pyrus-galeria-modal__prev,
.pyrus-galeria-modal__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.pyrus-galeria-modal__prev {
  left: 20px;
}
.pyrus-galeria-modal__next {
  right: 20px;
}
.pyrus-galeria-modal__prev svg,
.pyrus-galeria-modal__next svg {
  width: 22px;
  height: 22px;
}

/* ─── MODAL DESKTOP AMPLIO: imagen con más presencia visual ───
   Prev/next se acercan al borde (8px) para liberar ancho útil.
   Padding horizontal baja a 64px → clearance de 4px vs botones.
   Padding vertical más ajustado → imagen crece en alto y ancho.
   Fallback también crece proporcionalmente.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .pyrus-galeria-modal__prev {
    left: 8px;
  }
  .pyrus-galeria-modal__next {
    right: 8px;
  }
  .pyrus-galeria-modal__inner {
    padding: 36px 64px 64px;
  }
  .pyrus-galeria-modal__img {
    max-height: calc(100vh - 88px);
  }
  .pyrus-galeria-modal__figura--fallback {
    width: min(88vw, 760px);
    min-height: 440px;
  }
}

/* ─── MODAL RESPONSIVE: TABLET ─── */
@media (max-width: 768px) {
  .pyrus-galeria-modal__inner {
    /* safe-area-inset-bottom: respeta la barra del home en iPhones */
    padding: 44px 20px calc(108px + env(safe-area-inset-bottom, 0px));
  }
  .pyrus-galeria-modal__img {
    max-height: calc(100vh - 190px);
    border-radius: 8px;
  }
  /* Prev/Next bajan al pie en lugar de quedar a los lados */
  .pyrus-galeria-modal__prev,
  .pyrus-galeria-modal__next {
    width: 48px;
    height: 48px;
    top: auto;
    transform: none;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .pyrus-galeria-modal__prev {
    left: 50%;
    transform: translateX(calc(-50% - 38px));
  }
  .pyrus-galeria-modal__next {
    left: 50%;
    transform: translateX(calc(-50% + 38px));
  }
  .pyrus-galeria-modal__prev svg,
  .pyrus-galeria-modal__next svg {
    width: 20px;
    height: 20px;
  }
  /* Contador sobre los botones con margen suficiente */
  .pyrus-galeria-modal__counter {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
  /* Figura fallback adaptada a tablet */
  .pyrus-galeria-modal__figura--fallback {
    min-height: 240px;
  }
}

/* ─── MODAL RESPONSIVE: MÓVIL ─── */
@media (max-width: 480px) {
  .pyrus-galeria-modal__inner {
    padding: 44px 12px calc(112px + env(safe-area-inset-bottom, 0px));
  }
  .pyrus-galeria-modal__close {
    top: max(12px, env(safe-area-inset-top, 12px));
    right: max(12px, env(safe-area-inset-right, 12px));
    width: 40px;
    height: 40px;
  }
  .pyrus-galeria-modal__close svg {
    width: 18px;
    height: 18px;
  }
  .pyrus-galeria-modal__img {
    max-height: calc(100vh - 200px);
  }
  /* Figura fallback compacta en móvil */
  .pyrus-galeria-modal__figura--fallback {
    width: 90vw;
    min-height: 200px;
  }
}


/* ─── MODAL RESPONSIVE: MÓVIL LANDSCAPE ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .pyrus-galeria-modal__inner {
    padding: 28px 56px 36px;
  }
  .pyrus-galeria-modal__img {
    max-height: calc(100vh - 72px);
    border-radius: 6px;
  }
  /* Prev/Next vuelven a los laterales en landscape */
  .pyrus-galeria-modal__prev,
  .pyrus-galeria-modal__next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
  }
  .pyrus-galeria-modal__prev {
    left: 8px;
    right: auto; /* reset: tablet fija right vía transform; previene conflicto */
  }
  .pyrus-galeria-modal__next {
    right: 8px;
    left: auto; /* reset: tablet fija left:50% — sin esto la flecha queda al centro */
  }
  .pyrus-galeria-modal__caption {
    margin-top: 6px;
    font-size: 11px;
  }
  .pyrus-galeria-modal__counter {
    bottom: 28px;
  }
  .pyrus-galeria-modal__close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }
  .pyrus-galeria-modal__close svg {
    width: 16px;
    height: 16px;
  }
}


/* ================================================
   5. BENEFICIOS DIFERENCIALES
   Grid de tarjetas sobre fondo oscuro.
   Patrón reutilizable para los 5 desarrollos.
   ================================================ */

.pyrus-beneficios-desarrollo {
  background-color: var(--pyrus-azul-petroleo);
}

.pyrus-beneficios-desarrollo .pyrus-section-header {
  margin-bottom: var(--pyrus-sp-7);
}

/* Heading calibrado: ligero y editorial, no dominante sobre las tarjetas */
.pyrus-beneficios-desarrollo .pyrus-h2 {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.pyrus-beneficios-desarrollo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
}

.pyrus-beneficio-card {
  padding: var(--pyrus-sp-6) var(--pyrus-sp-6) var(--pyrus-sp-7);
  border: 1px solid rgba(216,192,122,0.10);
  border-radius: var(--pyrus-radius-md);
  background: rgba(255,255,255,0.03);
  transition: background var(--pyrus-tr), border-color var(--pyrus-tr);
}
.pyrus-beneficio-card:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(216,192,122,0.20);
}

/* Número: guía la lectura sin pesar */
.pyrus-beneficio-card__num {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 300;
  color: rgba(216,192,122,0.28);
  line-height: 1;
  margin-bottom: var(--pyrus-sp-3);
  letter-spacing: 0.04em;
}

.pyrus-beneficio-card__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: var(--pyrus-type-h4);
  font-weight: 400;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-3);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.pyrus-beneficio-card__texto {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247,244,238,0.65);
}

@media (max-width: 860px) {
  .pyrus-beneficios-desarrollo__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pyrus-beneficios-desarrollo .pyrus-h2 { font-size: clamp(20px, 5.5vw, 26px); }
  .pyrus-beneficios-desarrollo__grid { grid-template-columns: 1fr; gap: var(--pyrus-sp-4); }
  .pyrus-beneficio-card { padding: var(--pyrus-sp-5) var(--pyrus-sp-5) var(--pyrus-sp-6); }
}


/* ================================================
   6. UBICACIÓN Y CONECTIVIDAD
   Texto + distancias a la izquierda, mapa a la derecha.
   ================================================ */

.pyrus-ubicacion__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(48px, 7vw, 88px);
  align-items: stretch;
}

.pyrus-ubicacion__inner > .pyrus-reveal:first-child {
  align-self: center;
}

.pyrus-ubicacion__distancias {
  margin-top: var(--pyrus-sp-7);
  display: flex;
  flex-direction: column;
}

.pyrus-ubicacion__distancia-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--pyrus-sp-4);
  border-bottom: 1px solid var(--pyrus-gris-calido);
  font-size: var(--pyrus-type-base);
  gap: var(--pyrus-sp-4);
}

.pyrus-ubicacion__distancia-item:first-child {
  border-top: 1px solid var(--pyrus-gris-calido);
}

.pyrus-ubicacion__lugar {
  color: var(--pyrus-negro-carbon);
  font-weight: 400;
}

.pyrus-ubicacion__tiempo {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.pyrus-ubicacion__mapa-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--pyrus-radius-md);
  aspect-ratio: 4 / 3;
  background-color: var(--pyrus-gris-calido);
  box-shadow: var(--pyrus-shadow-md);
  min-width: 0;
  box-sizing: border-box;
}

.pyrus-ubicacion__mapa-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pyrus-sp-3);
  color: var(--pyrus-azul-grisaceo);
  font-size: var(--pyrus-type-sm);
  text-align: center;
  padding: var(--pyrus-sp-5);
}

.pyrus-ubicacion__mapa-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.pyrus-map-column {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-width: 0;
  width: 100%;
}

.pyrus-map-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pyrus-map-link {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #1d4ed8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pyrus-map-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

.pyrus-map-embed {
  width: 100%;
  min-height: 620px;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #ebe5db;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.pyrus-map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 620px;
  border: 0;
  display: block;
}

@media (max-width: 1024px) {
  .pyrus-map-embed {
    min-height: 500px;
  }
  .pyrus-map-embed iframe {
    min-height: 500px;
  }
}

@media (max-width: 860px) {
  .pyrus-map-column {
    display: block;
    margin-top: 28px;
  }
  .pyrus-map-card {
    width: 100%;
  }
  .pyrus-map-link {
    top: 16px;
    left: 16px;
    font-size: 13px;
    padding: 9px 13px;
    border-radius: 10px;
  }
  .pyrus-map-embed {
    min-height: 340px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  }
  .pyrus-map-embed iframe {
    min-height: 340px;
  }
}

@media (max-width: 860px) {
  .pyrus-ubicacion__inner {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-8);
  }
}


/* ================================================
   7A. AMENIDADES — GRID DE ICONOS (plantilla genérica)
   Usar cuando se quiera layout de tarjetas individuales.
   ================================================ */

.pyrus-amenidades__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-6) var(--pyrus-sp-5);
  margin-top: var(--pyrus-sp-3);
}

.pyrus-amenidad {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-3);
  padding: var(--pyrus-sp-6);
  background: var(--pyrus-blanco-puro);
  border-radius: var(--pyrus-radius-md);
  border: 1px solid var(--pyrus-gris-calido);
  transition: border-color var(--pyrus-tr), box-shadow var(--pyrus-tr);
}
.pyrus-amenidad:hover {
  border-color: rgba(216,192,122,0.40);
  box-shadow: var(--pyrus-shadow-sm);
}

.pyrus-amenidad__icono {
  width: 36px;
  height: 36px;
  color: var(--pyrus-dorado-profundo);
  flex-shrink: 0;
}

.pyrus-amenidad__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: var(--pyrus-type-h4);
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.pyrus-amenidad__desc {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.65;
}

@media (max-width: 860px) {
  .pyrus-amenidades__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pyrus-amenidades__grid { grid-template-columns: 1fr; }
}

/* Centra la última card cuando queda sola en el grid de 3 cols
   (7 amenidades: 3+3+1 → la 7ª queda centrada en lugar de quedar sola a la izquierda).
   El selector :nth-child(3n+1) coincide con posiciones 1, 4, 7, 10...
   Reset en ≤860px porque el grid pasa a 2 cols y el flujo es correcto. */
#amenidades .pyrus-amenidades__grid > *:last-child:nth-child(3n + 1) {
  grid-column: 2;
}
@media (max-width: 860px) {
  #amenidades .pyrus-amenidades__grid > *:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
}


/* ================================================
   BALAM RESORT — OVERRIDES ENCAPSULADOS
   Ajustes visuales específicos de balam-resort.html.
   Scopeados por ID de sección para no contaminar
   Aldea Hortus ni ninguna otra página.
   ================================================ */

/* Tipología card placeholder — tratamiento premium.
   El shared .pyrus-tipologia-card__img-ph usa líneas diagonales
   al 2.5% sobre gris-calido: prácticamente invisible, parece
   área rota/vacía. Este override aplica el gradiente oscuro del
   sistema, coherente con .pyrus-descripcion__img--ph y
   .pyrus-galeria-ph — todos los placeholders de Balam Resort
   quedan visualmente unificados. */
#tipologias .pyrus-tipologia-card__img-ph {
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 48px,
      rgba(216, 192, 122, 0.03) 48px,
      rgba(216, 192, 122, 0.03) 49px
    ),
    linear-gradient(150deg, var(--pyrus-negro-suave) 0%, var(--pyrus-azul-petroleo) 100%);
}

/* Beneficios — centra la 3ª card cuando queda sola en el grid
   de 2 cols (tablet ≤860px). Mismo patrón que amenidades.
   :nth-child(2n+1) coincide con posiciones 1, 3, 5...
   Solo activo entre 601px y 860px — debajo de 601px el grid
   ya es 1 col y no hay desequilibrio que corregir. */
@media (min-width: 601px) and (max-width: 860px) {
  #beneficios .pyrus-beneficios-desarrollo__grid > *:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    margin-inline: auto;
  }
}


/* ================================================
   7B. AMENIDADES — GRUPOS TEMÁTICOS
   Usar cuando las amenidades están organizadas
   en categorías confirmadas (ej. Aldea Hortus).
   ================================================ */

.pyrus-amenidades-grupos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pyrus-sp-6);           /* 24 → 32px — más aire entre tarjetas */
  margin-top: var(--pyrus-sp-5);    /* 12 → 24px — más separación del encabezado */
}

.pyrus-amenidades-grupo {
  background: var(--pyrus-blanco-puro);
  border: 1px solid rgba(216,192,122,0.15);   /* borde dorado sutil vs gris plano */
  border-radius: var(--pyrus-radius-md);
  padding: var(--pyrus-sp-6) var(--pyrus-sp-5);
  box-shadow: var(--pyrus-shadow-card);        /* elevación base sutil */
  transition: border-color var(--pyrus-tr), box-shadow var(--pyrus-tr);
}
.pyrus-amenidades-grupo:hover {
  border-color: rgba(216,192,122,0.45);
  box-shadow: var(--pyrus-shadow-card-hover);
}

.pyrus-amenidades-grupo__encabezado {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-3);
  margin-bottom: 20px;                          /* 16 → 20px */
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(216,192,122,0.22); /* línea divisoria con tinte dorado */
}

.pyrus-amenidades-grupo__icono {
  width: 22px;                                  /* 24 → 22px — proporción más fina */
  height: 22px;
  color: var(--pyrus-dorado-profundo);
  opacity: 0.85;
  flex-shrink: 0;
}

.pyrus-amenidades-grupo__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(16px, 1.5vw, 19px);         /* 17–21 → 16–19px — más elegante */
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  letter-spacing: 0.025em;
  line-height: 1.25;
}

.pyrus-amenidades-grupo__lista {
  display: flex;
  flex-direction: column;
  gap: 14px;                                    /* 12 → 14px — ritmo más airoso */
}

.pyrus-amenidades-grupo__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pyrus-sp-3);
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-negro-carbon);
  line-height: 1.6;                             /* 1.5 → 1.6 — más legible */
}

.pyrus-amenidades-grupo__item-dot {
  display: block;
  width: 5px;                                   /* 4 → 5px — más visible */
  height: 5px;
  border-radius: 50%;
  background-color: var(--pyrus-dorado-principal);
  margin-top: 7px;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .pyrus-amenidades-grupos {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-4);                     /* 16px en mobile — más compacto */
    padding-bottom: var(--pyrus-sp-7);          /* aire extra para botón WhatsApp */
  }
  .pyrus-amenidades-grupo {
    padding: var(--pyrus-sp-5) var(--pyrus-sp-4);
  }
}


/* ================================================
   8. TIPOLOGÍAS / ETAPAS / OPCIONES
   Tarjetas de producto disponibles.
   ================================================ */

.pyrus-tipologias__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
}

/* Variante para 2 cards (más ancho, sin columna vacía) */
.pyrus-tipologias__grid--2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
}

/* Variante para 4 cards en 2 filas × 2 columnas (sin restricción de ancho) */
.pyrus-tipologias__grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
}

.pyrus-tipologia-card {
  background: var(--pyrus-blanco-puro);
  border: 1px solid var(--pyrus-gris-calido);
  border-radius: var(--pyrus-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--pyrus-tr), transform var(--pyrus-tr), border-color var(--pyrus-tr);
}
.pyrus-tipologia-card:hover {
  box-shadow: var(--pyrus-shadow-card-hover);
  transform: translateY(-4px);
  border-color: rgba(216,192,122,0.30);
}

.pyrus-tipologia-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--pyrus-gris-calido);
  position: relative;
}

.pyrus-tipologia-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pyrus-tr-slow);
}
.pyrus-tipologia-card:hover .pyrus-tipologia-card__img { transform: scale(1.04); }

/* Placeholder temporal hasta disponer de asset real.
   Para activar imagen: reemplazar <div class="--ph"> por <img class="__img"> en el HTML. */
.pyrus-tipologia-card__img-ph {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, transparent, transparent 40px,
      rgba(0,0,0,0.025) 40px, rgba(0,0,0,0.025) 41px);
}

.pyrus-tipologia-card__body {
  padding: var(--pyrus-sp-6) var(--pyrus-sp-5) var(--pyrus-sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pyrus-tipologia-card__tipo {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
  margin-bottom: var(--pyrus-sp-2);
}

.pyrus-tipologia-card__nombre {
  font-family: var(--pyrus-font-heading);
  font-size: var(--pyrus-type-h4);
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-4);
  letter-spacing: 0.02em;
}

.pyrus-tipologia-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-2);
  margin-bottom: var(--pyrus-sp-5);
  border-top: 1px solid var(--pyrus-gris-calido);
  padding-top: var(--pyrus-sp-4);
}

/* Cotos de Xahala: empuja el botón al fondo de cada card
   sin afectar las cards de tipologías (Balam, etc.) */
#cotos .pyrus-tipologia-card__specs {
  flex: 1;
}

/* San Vicente 330: opciones por nivel — empuja el botón al fondo */
#tipologias .pyrus-tipologia-card__specs {
  flex: 1;
}

.pyrus-tipologia-card__spec {
  display: flex;
  justify-content: space-between;
  font-size: var(--pyrus-type-sm);
}

.pyrus-tipologia-card__spec-lbl { color: var(--pyrus-azul-grisaceo); flex-shrink: 0; }
.pyrus-tipologia-card__spec-val { font-weight: 500; color: var(--pyrus-negro-carbon); }

/* Fila con valor largo (ej. "Incluye"): apila label sobre valor */
.pyrus-tipologia-card__spec--stacked {
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}
.pyrus-tipologia-card__spec--stacked .pyrus-tipologia-card__spec-val {
  font-weight: 400;
  line-height: 1.5;
}
.pyrus-tipologia-card__nota {
  font-size: 0.8em;
  opacity: 0.75;
}

.pyrus-tipologia-card__precio {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  margin-top: auto;
  margin-bottom: var(--pyrus-sp-2);
  letter-spacing: 0.01em;
}

.pyrus-tipologia-card__precio-desde {
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  color: var(--pyrus-azul-grisaceo);
  font-weight: 400;
  display: block;
  margin-bottom: var(--pyrus-sp-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pyrus-tipologia-card__precio-nota {
  font-family: var(--pyrus-font-body);
  font-size: 11px;
  color: var(--pyrus-azul-grisaceo);
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--pyrus-sp-5);
  opacity: 0.72;
}

@media (max-width: 920px) {
  .pyrus-tipologias__grid { grid-template-columns: repeat(2, 1fr); }
  .pyrus-tipologias__grid--2col { grid-template-columns: 1fr; max-width: 100%; }
  .pyrus-tipologias__grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .pyrus-tipologias__grid,
  .pyrus-tipologias__grid--2col,
  .pyrus-tipologias__grid--2x2 { grid-template-columns: 1fr; max-width: 100%; }
}


/* ================================================
   9. POTENCIAL PATRIMONIAL
   Fondo oscuro, sin cifras de retorno inventadas.
   ================================================ */

.pyrus-potencial {
  background-color: var(--pyrus-negro-suave);
  position: relative;
  overflow: hidden;
}

.pyrus-potencial::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(216,192,122,0.04);
  pointer-events: none;
}

.pyrus-potencial__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

.pyrus-potencial__statement {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(23px, 3.6vw, 42px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--pyrus-blanco-marfil);
}

.pyrus-potencial__statement em {
  font-style: italic;
  color: var(--pyrus-dorado);
}

.pyrus-potencial__puntos {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-7);
}

.pyrus-potencial__punto {
  display: flex;
  gap: var(--pyrus-sp-4);
  align-items: flex-start;
}

.pyrus-potencial__punto-linea {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--pyrus-dorado);
  margin-top: 11px;
  flex-shrink: 0;
}

.pyrus-potencial__punto-texto {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.78;
  color: rgba(247,244,238,0.72);
}

.pyrus-potencial__nota {
  margin-top: var(--pyrus-sp-8);
  padding-top: var(--pyrus-sp-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--pyrus-type-xs);
  color: rgba(247,244,238,0.45);
  line-height: 1.7;
  font-style: italic;
}

@media (max-width: 768px) {
  .pyrus-potencial__inner { grid-template-columns: 1fr; gap: var(--pyrus-sp-8); }
}


/* ================================================
   10. DESARROLLOS RELACIONADOS
   (Reutiliza .pyrus-card-desarrollo del global)
   ================================================ */

.pyrus-relacionados__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
}

/* Reemplaza inline style="margin-top: var(--pyrus-sp-8); text-align: center" */
.pyrus-relacionados__cta {
  margin-top: var(--pyrus-sp-8);
  text-align: center;
}

@media (max-width: 860px) {
  .pyrus-relacionados__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pyrus-relacionados__grid { grid-template-columns: 1fr; }
}


/* ================================================
   11. CIERRE FINAL DEL DESARROLLO
   ================================================ */

.pyrus-cierre-desarrollo {
  background-color: var(--pyrus-negro-carbon);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pyrus-cierre-desarrollo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(216,192,122,0),
    rgba(216,192,122,0.15),
    rgba(216,192,122,0)
  );
  pointer-events: none;
}

.pyrus-cierre-desarrollo__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
}

/* Reemplaza inline style="margin-bottom: var(--pyrus-sp-8)" en el divider */
.pyrus-cierre-desarrollo .pyrus-divider {
  margin-bottom: var(--pyrus-sp-8);
}

.pyrus-cierre-desarrollo__frase {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 3.8vw, 46px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.30;
  letter-spacing: 0.02em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-7);
}

.pyrus-cierre-desarrollo__sub {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  color: rgba(247,244,238,0.55);
  line-height: 1.72;
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--pyrus-sp-9);
}

.pyrus-cierre-desarrollo__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
}

@media (max-width: 480px) {
  .pyrus-cierre-desarrollo__ctas {
    flex-direction: column;
    align-items: center;
  }
  .pyrus-cierre-desarrollo__ctas .pyrus-btn {
    width: 100%;
    max-width: 280px;
  }
}


/* ================================================
   12. BREADCRUMB DE PÁGINA (fuera del hero)
   ================================================ */

.pyrus-page-breadcrumb {
  padding-top: var(--pyrus-header-h);
  padding-bottom: var(--pyrus-sp-3);
  background-color: var(--pyrus-blanco-marfil);
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-page-breadcrumb__nav {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-2);
  font-size: var(--pyrus-type-xs);
  color: var(--pyrus-azul-grisaceo);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.pyrus-page-breadcrumb__nav a {
  color: var(--pyrus-azul-grisaceo);
  transition: color var(--pyrus-tr-fast);
}
.pyrus-page-breadcrumb__nav a:hover { color: var(--pyrus-negro-carbon); }

.pyrus-page-breadcrumb__sep     { opacity: 0.40; font-size: 10px; }


/* ================================================
   13. NUMERALIA DEL PROYECTO
   Bloque de cifras clave. Se ubica entre el resumen
   rápido (sección 2) y la descripción (sección 3).
   Uso: desarrollos con datos cuantitativos relevantes
   (niveles, unidades, locales, hectáreas, etc.)
   ================================================ */

.pyrus-numeralia {
  background-color: var(--pyrus-negro-suave);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-block: var(--pyrus-sp-9);
}

.pyrus-numeralia__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pyrus-numeralia__item {
  text-align: center;
  padding-inline: var(--pyrus-sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pyrus-sp-3);
}

.pyrus-numeralia__item + .pyrus-numeralia__item {
  border-left: 1px solid rgba(255,255,255,0.07);
}

.pyrus-numeralia__numero {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 400;
  line-height: 1;
  color: var(--pyrus-blanco-marfil);
  letter-spacing: -0.01em;
}

.pyrus-numeralia__label {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.40);
}

.pyrus-numeralia__sub {
  font-size: var(--pyrus-type-xs);
  color: rgba(247,244,238,0.22);
  font-style: italic;
}

@media (max-width: 640px) {
  .pyrus-numeralia__grid {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-7);
  }
  .pyrus-numeralia__item + .pyrus-numeralia__item {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: var(--pyrus-sp-7);
    padding-inline: 0;
  }
}


/* ================================================
   14. NOTA DE TIPOLOGÍAS / FINANCIAMIENTO
   Bloque informativo debajo del grid de tipologías.
   Uso: financiamiento, disponibilidad, locales u
   otras condiciones complementarias al producto.
   ================================================ */

.pyrus-tipologias__nota {
  margin-top: var(--pyrus-sp-8);
  padding: var(--pyrus-sp-5) var(--pyrus-sp-6);
  border-left: 2px solid rgba(216,192,122,0.50);
  border-radius: 0 var(--pyrus-radius-sm) var(--pyrus-radius-sm) 0;
  background: rgba(216,192,122,0.05);
}

.pyrus-tipologias__nota p {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.7;
  margin: 0;
}

.pyrus-tipologias__nota p + p {
  margin-top: var(--pyrus-sp-3);
}

.pyrus-tipologias__nota strong {
  color: var(--pyrus-negro-carbon);
  font-weight: 500;
}
.pyrus-page-breadcrumb__current { color: var(--pyrus-negro-carbon); font-weight: 500; }


/* ================================================
   15. INFRAESTRUCTURA Y RESPALDO
   Grid de ítems con dot dorado y texto estructurado.
   Uso: desarrollos con respaldo documental e
   infraestructura que debe comunicarse con elegancia
   (sin que se sienta un listado legal pesado).
   Ejemplo de uso: Xahala.
   ================================================ */

.pyrus-respaldo__intro {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.pyrus-respaldo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-7) var(--pyrus-sp-8);
  margin-top: var(--pyrus-sp-9);
}

.pyrus-respaldo__item {
  display: flex;
  gap: var(--pyrus-sp-4);
  align-items: flex-start;
}

.pyrus-respaldo__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
  margin-top: 8px;
}

.pyrus-respaldo__texto {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.65;
}

.pyrus-respaldo__texto strong {
  display: block;
  font-family: var(--pyrus-font-heading);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  letter-spacing: 0.01em;
  margin-bottom: var(--pyrus-sp-2);
  line-height: 1.3;
}

@media (max-width: 920px) {
  .pyrus-respaldo__grid { grid-template-columns: repeat(2, 1fr); gap: var(--pyrus-sp-6); }
}

@media (max-width: 540px) {
  .pyrus-respaldo__grid { grid-template-columns: 1fr; gap: var(--pyrus-sp-6); }
}


/* ================================================
   16. INTRODUCCIÓN DE SECCIÓN CENTRADA (párrafo estrecho)
   Uso: lead paragraph dentro de un .pyrus-section-header--center
   que necesita ancho limitado para legibilidad.
   Alternativa limpia a style="max-width:Xpx;margin-inline:auto;"
   ================================================ */

.pyrus-seccion-intro {
  max-width: 620px;
  margin-inline: auto;
}


/* ================================================
   17. HERO DEL ÍNDICE DE DESARROLLOS
   Hero de la página /desarrollos/ — más corto y
   editorial que el hero individual de cada desarrollo.
   Centra el contenido, fondo oscuro con imagen opcional.
   ================================================ */

.pyrus-portafolio-hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--pyrus-negro-carbon);
}

/* Placeholder premium del hero — reemplazar contenido por <img> cuando el asset esté listo.
   El gradiente actúa como fondo temporal del portafolio. */
.pyrus-portafolio-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    var(--pyrus-azul-petroleo) 0%,
    var(--pyrus-negro-carbon) 55%,
    var(--pyrus-negro-suave) 100%
  );
}

.pyrus-portafolio-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16,18,22,0.55) 0%,
    rgba(16,18,22,0.40) 40%,
    rgba(16,18,22,0.72) 100%
  );
  z-index: 1;
}

/* Breadcrumb en flujo normal dentro de __inner */
.pyrus-portafolio-hero__breadcrumb {
  position: static;
  margin-bottom: var(--pyrus-sp-5);
}

/* Contenido central del hero */
.pyrus-portafolio-hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(40px, 7vw, 80px);
}

.pyrus-portafolio-hero__inner {
  max-width: 760px;
}

.pyrus-portafolio-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-4);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-portafolio-hero__eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
}

.pyrus-portafolio-hero__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-6);
}

.pyrus-portafolio-hero__subtexto {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  color: rgba(247,244,238,0.75);
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: var(--pyrus-sp-8);
}

.pyrus-portafolio-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  align-items: center;
}

@media (max-width: 640px) {
  .pyrus-portafolio-hero                { min-height: 72vh; justify-content: flex-end; }
  /* Padding-top aumentado: garantiza que el eyebrow quede bien por debajo del header fijo.
     72px header + 24px buffer = 96px mínimo antes de que aparezca el primer elemento. */
  .pyrus-portafolio-hero__content       { padding-top: calc(var(--pyrus-header-h) + var(--pyrus-sp-5)); }
  .pyrus-portafolio-hero__titulo        { font-size: clamp(34px, 10vw, 56px); }
  .pyrus-portafolio-hero__inner         { max-width: 100%; }
  .pyrus-portafolio-hero__ctas          { flex-direction: column; align-items: flex-start; }
  .pyrus-portafolio-hero__ctas .pyrus-btn { width: 100%; justify-content: center; }
  /* Breadcrumb oculto en móvil: evita solapamiento con el H1 */
  .pyrus-portafolio-hero__breadcrumb    { display: none; }
}


/* ================================================
   18. INTRODUCCIÓN DEL ÍNDICE
   Párrafo editorial entre el hero y la grilla.
   Sección breve, sin imagen, solo texto + divider.
   ================================================ */

.pyrus-portafolio-intro {
  padding-block: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-portafolio-intro__inner {
  max-width: 780px;
}

.pyrus-portafolio-intro__texto {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--pyrus-negro-suave);
  letter-spacing: 0.01em;
  margin-top: var(--pyrus-sp-5);
}


/* ================================================
   19A. GRILLA DEL PORTAFOLIO
   Grid escalable: 3 columnas desktop / 2 tablet / 1 móvil.
   Todas las cards son idénticas — no hay fila especial.
   Para añadir más desarrollos: duplicar un <article> y listo.
   ================================================ */

.pyrus-portafolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
}

@media (max-width: 900px) {
  .pyrus-portafolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .pyrus-portafolio-grid { grid-template-columns: 1fr; }
}


/* ================================================
   19B. CARD DEL PORTAFOLIO (enriquecida)
   Incluye imagen, ubicación, nombre, descripción,
   atributos y CTA. Extiende .pyrus-card-desarrollo.
   ================================================ */

.pyrus-portafolio-card {
  background: var(--pyrus-blanco-puro);
  border-radius: var(--pyrus-radius-md);
  overflow: hidden;
  box-shadow: var(--pyrus-shadow-card);
  transition: box-shadow var(--pyrus-tr), transform var(--pyrus-tr);
  display: flex;
  flex-direction: column;
}
.pyrus-portafolio-card:hover {
  box-shadow: var(--pyrus-shadow-card-hover);
  transform: translateY(-5px);
}

/* Envuelve el enlace de imagen */
.pyrus-portafolio-card__img-link {
  display: block;
  overflow: hidden;
}

.pyrus-portafolio-card__img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(
    135deg,
    var(--pyrus-azul-petroleo) 0%,
    var(--pyrus-negro-suave) 100%
  );
}

.pyrus-portafolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.pyrus-portafolio-card:hover .pyrus-portafolio-card__img {
  transform: scale(1.04);
}

/* Cuerpo de la card */
.pyrus-portafolio-card__body {
  padding: var(--pyrus-sp-6) var(--pyrus-sp-5) var(--pyrus-sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Ubicación con mini-icono */
.pyrus-portafolio-card__ubicacion {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-2);
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
  margin-bottom: var(--pyrus-sp-3);
}

.pyrus-portafolio-card__ubicacion-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nombre del desarrollo */
.pyrus-portafolio-card__nombre {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-4);
}

.pyrus-portafolio-card__nombre a {
  color: inherit;
  text-decoration: none;
  transition: color var(--pyrus-tr-fast);
}
.pyrus-portafolio-card__nombre a:hover { color: var(--pyrus-dorado-profundo); }

/* Descripción corta */
.pyrus-portafolio-card__desc {
  font-size: var(--pyrus-type-sm);
  color: #3a3e48;
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: var(--pyrus-sp-5);
  flex: 1;
}

/* Atributos / chips */
.pyrus-portafolio-card__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-2);
  margin-bottom: var(--pyrus-sp-5);
  list-style: none;
}

.pyrus-portafolio-card__attr {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pyrus-azul-petroleo);
  background-color: var(--pyrus-gris-calido);
  padding: 4px 10px;
  border-radius: var(--pyrus-radius-xs);
  line-height: 1.5;
  white-space: nowrap;
}

/* CTA en la base de la card */
.pyrus-portafolio-card__cta {
  margin-top: auto;
  align-self: flex-start;
}


/* ================================================
   20. SECCIÓN DE ORIENTACIÓN
   "Si buscas frente al mar… Balam Resort"
   Fondo petróleo oscuro, grid de 4 ítems.
   ================================================ */

.pyrus-orientacion {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.pyrus-orientacion__encabezado {
  margin-bottom: var(--pyrus-sp-5);
  max-width: 620px;
}

.pyrus-orientacion__intro {
  font-size: var(--pyrus-type-sm);
  color: rgba(247,244,238,0.68);
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: var(--pyrus-sp-10);
}

.pyrus-orientacion__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pyrus-sp-8) var(--pyrus-sp-7);
}

.pyrus-orientacion__item {
  display: flex;
  gap: var(--pyrus-sp-5);
  align-items: flex-start;
  padding-bottom: var(--pyrus-sp-7);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Numeración decorativa */
.pyrus-orientacion__tipo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  color: rgba(216,192,122,0.25);
  line-height: 1;
  flex-shrink: 0;
  width: 56px;
  letter-spacing: -0.02em;
  margin-top: -4px;
}

.pyrus-orientacion__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-2);
}

.pyrus-orientacion__condicion {
  font-size: var(--pyrus-type-sm);
  font-weight: 400;
  color: rgba(247,244,238,0.60);
  line-height: 1.5;
}

.pyrus-orientacion__desarrollo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pyrus-sp-3);
}

.pyrus-orientacion__link {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  color: var(--pyrus-dorado-suave);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--pyrus-tr-fast);
}
.pyrus-orientacion__link:hover { color: var(--pyrus-dorado); }

.pyrus-orientacion__sep {
  color: rgba(216,192,122,0.35);
  font-size: var(--pyrus-type-sm);
}

.pyrus-orientacion__nota {
  font-size: var(--pyrus-type-xs);
  font-weight: 400;
  color: rgba(247,244,238,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Footer de la sección con CTA de asesoría */
.pyrus-orientacion__footer {
  margin-top: var(--pyrus-sp-10);
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-6);
  flex-wrap: wrap;
}

.pyrus-orientacion__footer-texto {
  font-size: var(--pyrus-type-sm);
  color: rgba(247,244,238,0.50);
  line-height: 1.65;
  max-width: 420px;
}

/* Ítem impar al final del grid (ej. 5º ítem en 2 columnas): ocupa la fila completa
   para evitar la celda vacía que rompe el ritmo premium de la sección. */
.pyrus-orientacion__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .pyrus-orientacion__grid           { grid-template-columns: 1fr; gap: var(--pyrus-sp-6); }
  .pyrus-orientacion__footer         { flex-direction: column; align-items: center; text-align: center; }
  .pyrus-orientacion__footer-texto   { max-width: 100%; }
  .pyrus-orientacion__footer .pyrus-btn { width: 100%; max-width: 320px; }
}

@media (max-width: 480px) {
  .pyrus-orientacion__tipo { font-size: 32px; width: 44px; }
}


/* ================================================
   21. CIERRE DEL ÍNDICE DE DESARROLLOS
   Sección final con frase editorial y CTA.
   Fondo claro (blanco marfil), texto centrado.
   ================================================ */

.pyrus-portafolio-cierre {
  background-color: var(--pyrus-blanco-puro);
  border-top: 1px solid var(--pyrus-gris-calido);
}

.pyrus-portafolio-cierre__inner {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.pyrus-portafolio-cierre__frase {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-6);
  margin-top: var(--pyrus-sp-3);
}

.pyrus-portafolio-cierre__sub {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.75;
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--pyrus-sp-8);
}

.pyrus-portafolio-cierre__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  justify-content: center;
}

@media (max-width: 480px) {
  .pyrus-portafolio-cierre__ctas { flex-direction: column; align-items: center; }
  .pyrus-portafolio-cierre__ctas .pyrus-btn { width: 100%; max-width: 320px; }
}


/* ================================================
   22. HERO DE LA PÁGINA NOSOTROS
   Hero institucional — más cálido y centrado que
   los heros de desarrollo individual. 72vh, imagen
   de ambiente premium del Pacífico mexicano.
   ================================================ */

.pyrus-nosotros-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--pyrus-negro-carbon);
}

.pyrus-nosotros-hero__picture {
  position: absolute;
  inset: 0;
  height: 100%;
  display: block;
  z-index: 0;
}

.pyrus-nosotros-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

.pyrus-nosotros-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16,18,22,0.48) 0%,
    rgba(16,18,22,0.35) 35%,
    rgba(16,18,22,0.78) 100%
  );
  z-index: 1;
}

.pyrus-nosotros-hero__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--pyrus-header-h) + var(--pyrus-sp-6));
  z-index: 2;
}

.pyrus-nosotros-hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(40px, 7vw, 80px);
}

.pyrus-nosotros-hero__inner {
  max-width: 720px;
}

.pyrus-nosotros-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-4);
  margin-top: var(--pyrus-sp-8);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-nosotros-hero__eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
}

.pyrus-nosotros-hero__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-6);
}

.pyrus-nosotros-hero__subtexto {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  color: rgba(247,244,238,0.75);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: var(--pyrus-sp-8);
}

.pyrus-nosotros-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  align-items: center;
}

/* Ajustes de composición mobile — imagen y overlay.
   Breakpoint alineado con el <source media="(max-width: 767px)"> del <picture>.
   Desplaza el encuadre y refuerza el overlay para mejorar legibilidad sin perder presencia de imagen. */
@media (max-width: 767px) {
  .pyrus-nosotros-hero__img     { object-position: 58% center; }
  .pyrus-nosotros-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(16,18,22,0.55) 0%,
      rgba(16,18,22,0.50) 35%,
      rgba(16,18,22,0.82) 100%
    );
  }
}

@media (max-width: 640px) {
  .pyrus-nosotros-hero                  { min-height: 78vh; justify-content: flex-end; }
  .pyrus-nosotros-hero__titulo          { font-size: clamp(30px, 9.5vw, 48px); }
  .pyrus-nosotros-hero__ctas            { flex-direction: column; align-items: flex-start; }
  .pyrus-nosotros-hero__ctas .pyrus-btn { width: 100%; justify-content: center; }
  /* Breadcrumb oculto en móvil: evita invasión visual sobre el H1 */
  .pyrus-nosotros-hero__breadcrumb      { display: none; }
}


/* ================================================
   23. INTRODUCCIÓN EDITORIAL — QUÉ ES PYRUS
   Bloque de texto limpio sobre fondo marfil.
   Dos párrafos con jerarquía tipográfica.
   Sin imagen — el texto tiene el peso visual.
   ================================================ */

.pyrus-nosotros-intro {
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-nosotros-intro__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.pyrus-nosotros-intro__encabezado {
  padding-top: var(--pyrus-sp-3);
}

/* "Quiénes somos" — presencia ligeramente reforzada sin convertirse en heading */
.pyrus-nosotros-intro__encabezado .pyrus-label {
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #4a555e;
}

.pyrus-nosotros-intro__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-6);
}

/* Primer párrafo — Cormorant editorial, tamaño generoso */
.pyrus-nosotros-intro__primer-parrafo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--pyrus-negro-carbon);
}

/* Segundo párrafo — Inter regular, más pequeño */
.pyrus-nosotros-intro__segundo-parrafo {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  line-height: 1.75;
  color: #3a3e48;
  max-width: 680px;
}

@media (max-width: 860px) {
  .pyrus-nosotros-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-7);
  }
}


/* ================================================
   24. PILARES DE TRABAJO
   3 columnas sobre fondo oscuro (negro-suave).
   Diseño editorial: número decorativo + título
   Cormorant + texto Inter. Sin iconos.
   ================================================ */

.pyrus-pilares__encabezado {
  margin-bottom: var(--pyrus-sp-10);
  max-width: 640px;
}

.pyrus-pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
}

.pyrus-pilar {
  border-top: 1px solid var(--pyrus-dorado);
  padding-top: var(--pyrus-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-4);
}

/* Número decorativo grande y tenue */
.pyrus-pilar__numero {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 400;
  line-height: 1;
  color: rgba(216,192,122,0.18);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--pyrus-sp-2);
}

.pyrus-pilar__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--pyrus-blanco-marfil);
}

.pyrus-pilar__texto {
  font-size: var(--pyrus-type-sm);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(247,244,238,0.65);
}

@media (max-width: 860px) {
  .pyrus-pilares__grid { grid-template-columns: 1fr; gap: var(--pyrus-sp-7); }
  .pyrus-pilar { border-top: none; border-left: 1px solid var(--pyrus-dorado); padding-top: 0; padding-left: var(--pyrus-sp-6); }
  .pyrus-pilar__numero { font-size: 44px; }
}

@media (max-width: 480px) {
  .pyrus-pilares__encabezado            { margin-bottom: var(--pyrus-sp-8); }
  .pyrus-pilares__encabezado .pyrus-h2  { font-size: clamp(26px, 8vw, 36px); line-height: 1.2; }
}


/* ================================================
   25. PORTAFOLIO DE PERFILES
   2 columnas: descripción a la izquierda, 4 tipos
   de desarrollo a la derecha. Diseño editorial limpio
   sobre fondo blanco.
   ================================================ */

.pyrus-perfiles__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 8vw, 112px);
  align-items: start;
}

.pyrus-perfiles__lead {
  margin-top: var(--pyrus-sp-5);
  max-width: 420px;
}

.pyrus-perfiles__nota {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.75;
  margin-top: var(--pyrus-sp-5);
  max-width: 380px;
}

.pyrus-perfiles__cta {
  display: inline-flex;
  margin-top: var(--pyrus-sp-7);
}

/* Lista de 4 perfiles */
.pyrus-perfiles__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Cada perfil de desarrollo */
.pyrus-perfil {
  display: flex;
  gap: var(--pyrus-sp-5);
  padding-block: var(--pyrus-sp-6);
  border-bottom: 1px solid var(--pyrus-gris-calido);
  transition: background-color var(--pyrus-tr);
}
.pyrus-perfil:first-child { border-top: 1px solid var(--pyrus-gris-calido); }

/* Acento dorado lateral */
.pyrus-perfil__acento {
  width: 2px;
  min-height: 48px;
  background-color: var(--pyrus-dorado);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.70;
  transition: opacity var(--pyrus-tr);
}
.pyrus-perfil:hover .pyrus-perfil__acento { opacity: 1; }

.pyrus-perfil__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-2);
}

.pyrus-perfil__tipo {
  display: block;
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
}

.pyrus-perfil__desc {
  font-size: var(--pyrus-type-sm);
  color: #3a3e48;
  line-height: 1.7;
  font-weight: 400;
}

.pyrus-perfil__link {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 400;
  color: var(--pyrus-dorado-profundo);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--pyrus-tr-fast);
  display: inline-block;
  margin-top: var(--pyrus-sp-1);
}
.pyrus-perfil__link:hover { color: var(--pyrus-negro-carbon); }

@media (max-width: 920px) {
  .pyrus-perfiles__inner {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-10);
  }
  .pyrus-perfiles__lead,
  .pyrus-perfiles__nota { max-width: 100%; }
}


/* ================================================
   26. BLOQUE DE CONFIANZA
   Cita editorial centrada sobre fondo petróleo.
   Dos párrafos con jerarquía visual clara.
   Primer párrafo: Cormorant grande (declaración).
   Segundo párrafo: Inter regular (refuerzo).
   ================================================ */

.pyrus-nosotros-confianza__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* Primer párrafo — declaración editorial grande */
.pyrus-nosotros-confianza__primer-parrafo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--pyrus-blanco-marfil);
  margin-top: var(--pyrus-sp-3);
  margin-bottom: var(--pyrus-sp-7);
}

/* Segundo párrafo — respaldo en Inter */
.pyrus-nosotros-confianza__segundo-parrafo {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247,244,238,0.68);
  max-width: 580px;
  margin-inline: auto;
}

@media (max-width: 600px) {
  .pyrus-nosotros-confianza__inner {
    max-width: 100%;
    overflow: hidden;
  }
  .pyrus-nosotros-confianza__primer-parrafo {
    font-size: clamp(19px, 5.5vw, 26px);
    line-height: 1.6;
  }
  .pyrus-nosotros-confianza__segundo-parrafo {
    max-width: 100%;
  }
}


/* ================================================
   27. HERO DE LA PÁGINA CONTACTO
   Hero más íntimo y cálido que los de desarrollo.
   70vh centrado, overlays sutiles, imagen de fondo
   reemplazable (paisaje Pacífico o arquitectura cálida).
   ================================================ */

.pyrus-contacto-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: var(--pyrus-negro-carbon);
  /* Empuja el centro visual por debajo del header fijo */
  padding-top: var(--pyrus-header-h);
}

.pyrus-contacto-hero__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.pyrus-contacto-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.pyrus-contacto-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16,18,22,0.52) 0%,
    rgba(16,18,22,0.32) 40%,
    rgba(16,18,22,0.80) 100%
  );
  z-index: 1;
}

.pyrus-contacto-hero__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--pyrus-header-h) + var(--pyrus-sp-6));
  z-index: 2;
}

.pyrus-contacto-hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(48px, 8vw, 96px);
}

.pyrus-contacto-hero__inner {
  max-width: 720px;
}

.pyrus-contacto-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-4);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-contacto-hero__eyebrow-line {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
}

.pyrus-contacto-hero__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-6);
}

.pyrus-contacto-hero__subtexto {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  color: rgba(247,244,238,0.78);
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: var(--pyrus-sp-8);
}

.pyrus-contacto-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  align-items: center;
}

/* Ajustes mobile — imagen y overlay.
   Breakpoint alineado con el <source media="(max-width: 767px)"> del <picture>. */
@media (max-width: 767px) {
  .pyrus-contacto-hero__img {
    object-position: 58% center;
  }
  .pyrus-contacto-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(16,18,22,0.60) 0%,
      rgba(16,18,22,0.42) 35%,
      rgba(16,18,22,0.85) 100%
    );
  }
}

@media (max-width: 640px) {
  .pyrus-contacto-hero                   { min-height: 75vh; }
  .pyrus-contacto-hero__content          { padding-block: 36px 44px; }
  .pyrus-contacto-hero__eyebrow          { margin-bottom: var(--pyrus-sp-4); }
  .pyrus-contacto-hero__titulo           { font-size: clamp(34px, 10vw, 52px); margin-bottom: var(--pyrus-sp-5); }
  .pyrus-contacto-hero__subtexto         { margin-bottom: var(--pyrus-sp-6); font-size: 1rem; }
  .pyrus-contacto-hero__ctas             { flex-direction: column; align-items: flex-start; gap: var(--pyrus-sp-3); }
  .pyrus-contacto-hero__ctas .pyrus-btn  { width: 100%; justify-content: center; }
}


/* ================================================
   28. BLOQUE INTRODUCTORIO DE CONTACTO
   Sección de transición editorial centrada.
   H2 + párrafo corto. Fondo marfil, sin imagen.
   ================================================ */

.pyrus-contacto-intro {
  /* Pausa breve — más compacta que el estándar de sección */
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-contacto-intro__inner {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

/* H2 — Cormorant editorial, título de transición */
.pyrus-contacto-intro__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-4);
}

/* Párrafo — Inter, cuerpo de apoyo */
.pyrus-contacto-intro__parrafo {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  line-height: 1.7;
  color: #3a3e48;
  max-width: 480px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .pyrus-contacto-intro             { padding-block: 28px 32px; }
  .pyrus-contacto-intro__titulo     { font-size: clamp(20px, 6vw, 26px); margin-bottom: var(--pyrus-sp-3); }
  .pyrus-contacto-intro__parrafo    { font-size: 0.975rem; line-height: 1.65; }
}


/* ================================================
   29. BLOQUE PRINCIPAL — GRID DE CONTACTO
   2 columnas: formulario (izquierda) +
   canales directos (derecha).
   Colapsa a 1 columna en tablet/móvil.
   ================================================ */

.pyrus-contacto-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}

@media (max-width: 960px) {
  .pyrus-contacto-grid {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-8);
  }
}

@media (max-width: 640px) {
  /* Clearance sobre el botón flotante de WhatsApp (48px alto + 20px offset = 68px) */
  #contacto-formulario { padding-bottom: 72px; }
}


/* --- Columna izquierda: Formulario --- */

.pyrus-contacto-form__encabezado {
  margin-bottom: var(--pyrus-sp-6);
}

.pyrus-contacto-form__titulo {
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-4);
}

.pyrus-contacto-form__lead {
  font-size: var(--pyrus-type-base);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.75;
  max-width: 480px;
}

/* Nota de tiempo de respuesta (encima del formulario) */
.pyrus-contacto-form__nota {
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  font-style: normal;
  color: #3a3e48;
  padding: var(--pyrus-sp-3) var(--pyrus-sp-5);
  background-color: var(--pyrus-gris-calido);
  border-left: 2px solid var(--pyrus-dorado);
  border-radius: 0 var(--pyrus-radius-sm) var(--pyrus-radius-sm) 0;
  margin-bottom: var(--pyrus-sp-5);
  line-height: 1.5;
}

/* Checkbox de privacidad */
.pyrus-contacto-form__privacidad {
  margin-bottom: var(--pyrus-sp-6);
}

.pyrus-contacto-form__check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--pyrus-sp-3);
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.65;
  cursor: pointer;
}

.pyrus-contacto-form__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--pyrus-dorado);
  cursor: pointer;
}

.pyrus-contacto-form__privacidad-link {
  color: var(--pyrus-dorado-profundo);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--pyrus-tr-fast);
}
.pyrus-contacto-form__privacidad-link:hover { color: var(--pyrus-negro-carbon); }

/* Botón submit de ancho completo */
.pyrus-contacto-form__submit {
  margin-top: var(--pyrus-sp-2);
}

/* Reduce el espacio por encima del campo submit en contexto de contacto */
.pyrus-contacto-form__body .pyrus-cform__campo--submit {
  margin-top: var(--pyrus-sp-5);
}


/* --- Columna derecha: Canales directos --- */

.pyrus-contacto-canales__encabezado {
  margin-bottom: var(--pyrus-sp-6);
  padding-bottom: var(--pyrus-sp-5);
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-contacto-canales__titulo {
  /* Ligeramente más pequeño que el título izquierdo — columna secundaria */
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-4);
}

.pyrus-contacto-canales__lead {
  font-size: var(--pyrus-type-sm);
  color: var(--pyrus-azul-grisaceo);
  line-height: 1.75;
}

/* Canal individual (WhatsApp / correo / zona) */
.pyrus-contacto-canal {
  display: flex;
  align-items: flex-start;
  gap: var(--pyrus-sp-5);
  padding-block: var(--pyrus-sp-5);
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-contacto-canal:last-of-type {
  margin-bottom: var(--pyrus-sp-6);
}

/* Icono del canal */
.pyrus-contacto-canal__icono {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pyrus-gris-calido);
  border-radius: var(--pyrus-radius-sm);
  color: var(--pyrus-azul-petroleo);
}

.pyrus-contacto-canal__icono svg {
  width: 20px;
  height: 20px;
}

.pyrus-contacto-canal__contenido {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-2);
}

.pyrus-contacto-canal__etiqueta {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
}

.pyrus-contacto-canal__valor {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--pyrus-tr-fast);
}

a.pyrus-contacto-canal__valor:hover { color: var(--pyrus-dorado-profundo); }

/* Variante texto (no enlace) */
.pyrus-contacto-canal__valor--texto {
  display: block;
  color: var(--pyrus-negro-carbon);
}


/* --- Mini bloque "Te podemos ayudar con" --- */

.pyrus-contacto-ayuda {
  background-color: var(--pyrus-gris-calido);
  border-radius: var(--pyrus-radius-md);
  border: 1px solid rgba(216,192,122,0.20);
  padding: var(--pyrus-sp-5);
}

.pyrus-contacto-ayuda__titulo {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
  margin-bottom: var(--pyrus-sp-4);
}

.pyrus-contacto-ayuda__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pyrus-contacto-ayuda__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pyrus-sp-3);
  font-size: var(--pyrus-type-sm);
  color: #3a3e48;
  line-height: 1.5;
  font-weight: 400;
}

.pyrus-contacto-ayuda__dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
  margin-top: 6px;
}


/* ================================================
   30. BLOQUE DE COBERTURA GEOGRÁFICA
   Tarjeta premium de zonas de operación.
   Reemplaza al placeholder de mapa provisional.
   Cuando exista embed real: añadir .pyrus-contacto-mapa__wrap
   con iframe dentro de .pyrus-contacto-cobertura.
   ================================================ */

/* pyrus-section--sm no tiene definición — padding explícito aquí */
.pyrus-contacto-mapa {
  padding-block: clamp(40px, 6vw, 72px);
}

.pyrus-contacto-mapa__encabezado {
  margin-bottom: var(--pyrus-sp-7);
}

/* Tarjeta principal de cobertura
   Fondo blanco sobre sección marfil — contraste visible, elegante */
.pyrus-contacto-cobertura__card {
  background-color: var(--pyrus-blanco-puro);
  border: 1px solid rgba(216,192,122,0.28);
  border-radius: var(--pyrus-radius-md);
  box-shadow: 0 2px 14px rgba(16,18,22,0.05);
  padding: var(--pyrus-sp-7) clamp(var(--pyrus-sp-7), 4.5vw, var(--pyrus-sp-10));
}

/* Cabecera de tarjeta: icono + label */
.pyrus-contacto-cobertura__card-header {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-3);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-contacto-cobertura__card-icono {
  width: 16px;
  height: 16px;
  color: var(--pyrus-dorado-profundo);
  flex-shrink: 0;
}

/* Párrafo descriptivo */
.pyrus-contacto-cobertura__desc {
  font-size: var(--pyrus-type-base);
  color: #3a3e48;
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: var(--pyrus-sp-5);
}

/* Separador dorado entre descripción y zonas */
.pyrus-contacto-cobertura__sep {
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--pyrus-dorado);
  margin-bottom: var(--pyrus-sp-5);
}

/* Grid de zonas — 2 columnas en desktop */
.pyrus-contacto-cobertura__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pyrus-sp-3) var(--pyrus-sp-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Zona individual */
.pyrus-contacto-cobertura__zona {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-3);
  font-size: var(--pyrus-type-sm);
  font-weight: 500;
  color: var(--pyrus-negro-carbon);
  line-height: 1.4;
}

.pyrus-contacto-cobertura__zona-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
}

/* Compatibilidad futura: iframe si se añade mapa real */
.pyrus-contacto-mapa__wrap {
  overflow: hidden;
  border-radius: var(--pyrus-radius-md);
  border: 1px solid var(--pyrus-gris-calido);
}
.pyrus-contacto-mapa__wrap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 760px) {
  /* Tablet: padding horizontal más ajustado */
  .pyrus-contacto-cobertura__card { padding: var(--pyrus-sp-6) var(--pyrus-sp-6); }
}

@media (max-width: 640px) {
  .pyrus-contacto-mapa                          { padding-block: 32px 40px; }
  .pyrus-contacto-mapa__encabezado              { margin-bottom: var(--pyrus-sp-6); }
  .pyrus-contacto-cobertura__card               { padding: var(--pyrus-sp-5); }
  .pyrus-contacto-cobertura__card-header        { margin-bottom: var(--pyrus-sp-3); }
  .pyrus-contacto-cobertura__desc               { margin-bottom: var(--pyrus-sp-4); font-size: var(--pyrus-type-sm); line-height: 1.65; }
  .pyrus-contacto-cobertura__sep                { margin-bottom: var(--pyrus-sp-4); }
  .pyrus-contacto-cobertura__grid               { grid-template-columns: 1fr; gap: 10px; }
  .pyrus-contacto-mapa__wrap iframe             { height: 300px; }
}


/* ================================================
   30b. FAQ — ICONO ACORDEÓN: + → −
   El icono global solo rota 180° (+ sigue siendo +).
   Este override oculta el trazo vertical cuando el
   item está abierto, convirtiendo el + en un −.
   ================================================ */

.pyrus-faq__icono line {
  transition: opacity 0.2s ease;
}
.pyrus-faq__item.is-open .pyrus-faq__icono {
  transform: none;
}
.pyrus-faq__item.is-open .pyrus-faq__icono line:first-child {
  opacity: 0;
}


/* ================================================
   31. FAQ DE CONTACTO
   Overrides sobre el sistema global .pyrus-faq.
   La sección usa fondo blanco (pyrus-bg-blanco),
   por lo que se transparenta el fondo del div FAQ
   y se ajusta el espaciado superior respecto al header.
   ================================================ */

/* Sin fondo propio — hereda el blanco de la sección */
.pyrus-contacto-faq {
  background-color: transparent;
  margin-top: var(--pyrus-sp-7);
}

/* Padding inferior reducido: el sistema da 96px, demasiado al combinar con
   el padding-top de la sección siguiente. 32px da la respiración mínima. */
#faq-contacto {
  padding-bottom: clamp(24px, 2.5vw, 32px);
}

@media (max-width: 640px) {
  #faq-contacto { padding-bottom: 24px; }
  .pyrus-contacto-faq .pyrus-faq__pregunta {
    font-size: clamp(14px, 4vw, 17px);
    padding-block: var(--pyrus-sp-4);
    gap: var(--pyrus-sp-4);
  }
  .pyrus-contacto-faq .pyrus-faq__respuesta-inner {
    padding-bottom: var(--pyrus-sp-5);
    font-size: var(--pyrus-type-sm);
  }
}


/* ================================================
   32. SECCIÓN CTA FINAL DE CONTACTO
   Override sobre pyrus-section--lg (120px) y ajustes
   de espaciado interno para un cierre compacto y premium.
   ================================================ */

.pyrus-contacto-cierre {
  border-top: 1px solid var(--pyrus-gris-calido);
  /* pyrus-section--lg da clamp(64px,10vw,120px) — demasiado para un cierre */
  padding-block: clamp(48px, 6vw, 72px);
}

/* Eyebrow — centrado para alinearse con el sistema de encabezado de sección */
.pyrus-contacto-cierre .pyrus-label {
  margin-top: calc(-1 * var(--pyrus-sp-3));
  margin-bottom: var(--pyrus-sp-3);
}

/* Reducir gap entre texto de apoyo y botones (global: sp-8 = 56px) */
.pyrus-contacto-cierre .pyrus-portafolio-cierre__sub {
  margin-bottom: var(--pyrus-sp-6);
}

@media (max-width: 640px) {
  .pyrus-contacto-cierre { padding-block: 40px; }
}


/* ================================================
   33. PÁGINA DE GRACIAS / THANK YOU
   Hero centrado con checkmark, sección de 3 pasos
   y grid de 3 tarjetas de acción. Más ligero que las
   páginas comerciales: sin galerías, sin formularios,
   sin secciones largas. El cierre reutiliza
   .pyrus-portafolio-cierre (bloque 21).
   ================================================ */


/* --- Hero de confirmación --- */

.pyrus-gracias-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centrado vertical — diferente a heros comerciales */
  overflow: hidden;
  background-color: var(--pyrus-negro-carbon);
  padding-top: var(--pyrus-header-h);  /* compensa el header sticky para centrado visual real */
}

.pyrus-gracias-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.35;             /* más tenue: calma visual, foco en el mensaje */
}

.pyrus-gracias-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 58%, rgba(22, 49, 61, 0.28) 0%, transparent 70%),
    linear-gradient(
      160deg,
      rgba(16, 18, 22, 0.55) 0%,
      rgba(22, 49, 61, 0.70) 50%,   /* azul petróleo cálido */
      rgba(16, 18, 22, 0.80) 100%
    );
}

.pyrus-gracias-hero__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--pyrus-header-h) + var(--pyrus-sp-6));
  z-index: 2;
}

.pyrus-gracias-hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(48px, 7vw, 80px);
}

/* Contenido centrado — distinto a todos los demás heros */
.pyrus-gracias-hero__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pyrus-sp-5);
}

/* Ícono de confirmación (checkmark en círculo) */
.pyrus-gracias-hero__check {
  width: 52px;
  height: 52px;
  color: var(--pyrus-dorado);
  margin-bottom: var(--pyrus-sp-2);
}

.pyrus-gracias-hero__check-icon {
  width: 100%;
  height: 100%;
}

.pyrus-gracias-hero__eyebrow {
  display: flex;
  justify-content: center;
}

.pyrus-gracias-hero__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: 0;
}

.pyrus-gracias-hero__texto {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247, 244, 238, 0.85);
  max-width: 520px;
  margin-bottom: 0;
}

.pyrus-gracias-hero__subtexto {
  font-size: var(--pyrus-type-sm);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247, 244, 238, 0.55);
  max-width: 480px;
}

.pyrus-gracias-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  justify-content: center;
  margin-top: var(--pyrus-sp-3);
}

@media (max-width: 640px) {
  .pyrus-gracias-hero          { min-height: 80vh; }
  .pyrus-gracias-hero__titulo  { font-size: clamp(32px, 9vw, 44px); }
  .pyrus-gracias-hero__ctas    { flex-direction: column; align-items: stretch; width: 100%; }
  .pyrus-gracias-hero__ctas .pyrus-btn { justify-content: center; }
}


/* --- Sección "Qué sigue" --- */

.pyrus-gracias-pasos__encabezado {
  margin-bottom: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-4);
}

.pyrus-gracias-pasos__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
}

.pyrus-gracias-pasos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

/* Paso individual */
.pyrus-gracias-paso {
  border-top: 1px solid var(--pyrus-dorado);
  padding-top: var(--pyrus-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-4);
}

.pyrus-gracias-paso__num {
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pyrus-dorado-profundo);
  display: block;
}

.pyrus-gracias-paso__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
}

.pyrus-gracias-paso__texto {
  font-size: var(--pyrus-type-sm);
  font-weight: 300;
  line-height: 1.80;
  color: #4a5060;
}

@media (max-width: 860px) {
  .pyrus-gracias-pasos__grid { grid-template-columns: 1fr; gap: var(--pyrus-sp-7); }
  .pyrus-gracias-paso        { border-top: none; border-left: 1px solid var(--pyrus-dorado); padding-top: 0; padding-left: var(--pyrus-sp-5); }
}


/* --- Tarjetas de acción --- */

.pyrus-gracias-acciones {
  border-top: 1px solid var(--pyrus-gris-calido);
}

.pyrus-gracias-acciones__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}

/* Tarjeta individual */
.pyrus-gracias-accion {
  background-color: var(--pyrus-blanco-marfil);
  border: 1px solid var(--pyrus-gris-calido);
  border-radius: var(--pyrus-radius-md);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-4);
  transition: box-shadow var(--pyrus-tr), border-color var(--pyrus-tr);
}

.pyrus-gracias-accion:hover {
  box-shadow: var(--pyrus-shadow-card-hover);
  border-color: var(--pyrus-dorado);
}

/* Icono SVG */
.pyrus-gracias-accion__icono {
  width: 44px;
  height: 44px;
  color: var(--pyrus-azul-petroleo);
  flex-shrink: 0;
}

.pyrus-gracias-accion__icono svg {
  width: 100%;
  height: 100%;
}

.pyrus-gracias-accion__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
}

.pyrus-gracias-accion__texto {
  font-size: var(--pyrus-type-sm);
  font-weight: 300;
  line-height: 1.75;
  color: #4a5060;
  flex-grow: 1;              /* empuja el link al fondo de la card */
}

/* Enlace / CTA de la tarjeta */
.pyrus-gracias-accion__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pyrus-sp-2);
  font-size: var(--pyrus-type-sm);
  font-weight: 500;
  color: var(--pyrus-azul-petroleo);
  text-decoration: none;
  margin-top: var(--pyrus-sp-2);
  transition: color var(--pyrus-tr-fast), gap var(--pyrus-tr-fast);
}

.pyrus-gracias-accion__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--pyrus-tr-fast);
}

.pyrus-gracias-accion__link:hover {
  color: var(--pyrus-dorado-profundo);
  gap: var(--pyrus-sp-3);
}

.pyrus-gracias-accion__link:hover svg {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .pyrus-gracias-acciones__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pyrus-gracias-accion { padding: var(--pyrus-sp-6); }
}


/* ================================================
   32. PÁGINAS LEGALES — HERO, CUERPO Y CONTACTO
   Estilos específicos para aviso-de-privacidad.html
   y politica-de-cookies.html. Hero más contenido
   que las páginas comerciales; cuerpo de documento
   optimizado para lectura; bloque de cierre sobrio.
   ================================================ */


/* --- Hero legal --- */

.pyrus-legal-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--pyrus-negro-carbon);
}

.pyrus-legal-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.45;
  /* Oculta alt-text e ícono roto cuando el asset no existe;
     el fondo oscuro de .pyrus-legal-hero actúa como fallback. */
  color: transparent;
}

.pyrus-legal-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 18% 70%, rgba(22, 49, 61, 0.32) 0%, transparent 65%),
    linear-gradient(
      to bottom,
      rgba(16, 18, 22, 0.30) 0%,
      rgba(16, 18, 22, 0.65) 60%,
      rgba(16, 18, 22, 0.88) 100%
    );
}

.pyrus-legal-hero__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--pyrus-header-h) + var(--pyrus-sp-6));
  z-index: 2;
}

.pyrus-legal-hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(36px, 5vw, 64px);
}

.pyrus-legal-hero__inner {
  max-width: 680px;
}

.pyrus-legal-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pyrus-sp-4);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-legal-hero__eyebrow-line {
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
}

.pyrus-legal-hero__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(36px, 5.5vw, 66px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.03em;
  color: var(--pyrus-blanco-marfil);
  margin-bottom: var(--pyrus-sp-5);
}

.pyrus-legal-hero__subtexto {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(247, 244, 238, 0.70);
  max-width: 560px;
}

@media (max-width: 640px) {
  .pyrus-legal-hero              { min-height: 48vh; }
  /* Más aire sobre el título — el hero CSS-only sin imagen se siente plano sin respiro */
  .pyrus-legal-hero__content     { padding-top: clamp(52px, 10vw, 80px); }
  .pyrus-legal-hero__titulo      { font-size: clamp(30px, 9vw, 44px); }
  .pyrus-legal-hero__subtexto    { font-size: var(--pyrus-type-sm); }
  /* Breadcrumb: solo visible en desktop; en móvil ocupa espacio sin aportar lectura */
  .pyrus-legal-hero__breadcrumb  { display: none; }
}


/* --- Introducción --- */

.pyrus-legal-intro__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-5);
}

.pyrus-legal-intro__texto {
  font-size: var(--pyrus-type-lg);
  font-weight: 300;
  line-height: 1.80;
  color: #3a3e48;
}

@media (max-width: 640px) {
  /* En mobile, lg (≈18-20px) resulta excesivo para lectura de documento legal */
  .pyrus-legal-intro__texto { font-size: var(--pyrus-type-base); line-height: 1.75; }
}

.pyrus-legal-intro__meta {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
}


/* --- Cuerpo legal principal --- */

.pyrus-legal-cuerpo__inner {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sección numerada individual */
.pyrus-legal-seccion {
  padding-block: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--pyrus-gris-calido);
}

.pyrus-legal-seccion:last-child {
  border-bottom: none;
}

.pyrus-legal-seccion__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
  margin-bottom: var(--pyrus-sp-6);
  display: flex;
  align-items: baseline;
  gap: var(--pyrus-sp-4);
}

/* Número decorativo de sección */
.pyrus-legal-seccion__num {
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--pyrus-dorado-profundo);
  flex-shrink: 0;
  padding-top: 2px;
}

.pyrus-legal-seccion__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-5);
}

.pyrus-legal-seccion__cuerpo p {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.80;
  color: #3a3e48;
}

.pyrus-legal-seccion__cuerpo strong {
  font-weight: 500;
  color: var(--pyrus-negro-carbon);
}

.pyrus-legal-seccion__cuerpo a {
  color: var(--pyrus-azul-petroleo);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--pyrus-tr-fast);
}

.pyrus-legal-seccion__cuerpo a:hover {
  color: var(--pyrus-dorado-profundo);
}

/* H3 dentro del cuerpo legal */
.pyrus-legal-subtitulo {
  font-family: var(--pyrus-font-body);
  font-size: var(--pyrus-type-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
  padding-top: var(--pyrus-sp-3);
  border-top: 1px solid var(--pyrus-gris-calido);
}

/* Listas del aviso */
.pyrus-legal-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-4);
  padding-left: 0;
}

.pyrus-legal-lista li {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.75;
  color: #3a3e48;
  display: flex;
  align-items: baseline;
  gap: var(--pyrus-sp-4);
}

/* Dot dorado como marcador */
.pyrus-legal-lista li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--pyrus-dorado);
  flex-shrink: 0;
  margin-top: 8px;
  align-self: flex-start;
}

/* Variante ARCO: sin dot (el strong ya da jerarquía) */
.pyrus-legal-lista--arco li::before {
  display: none;
}

.pyrus-legal-lista--arco li {
  flex-direction: column;
  gap: var(--pyrus-sp-2);
  padding-left: var(--pyrus-sp-5);
  border-left: 2px solid var(--pyrus-gris-calido);
}

@media (max-width: 640px) {
  .pyrus-legal-seccion__titulo {
    flex-direction: column;
    gap: var(--pyrus-sp-2);
    align-items: flex-start;
  }

  /* Secciones 06 y 10: layout de lista en móvil.
     Raíz del bug: display:flex en el li + ::before anónimo como
     flex item + strong:first-child:block dentro del segundo flex
     item crea "columnas implícitas" ilegibles en viewports angostos.
     Solución: cambiar a display:block en móvil y posicionar el dot
     absolutamente — el texto fluye como bloque normal sin flex. */
  .pyrus-legal-lista li {
    display: block;
    position: relative;
    padding-left: 18px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .pyrus-legal-lista li::before {
    position: absolute;
    left: 0;
    top: 9px;
    margin-top: 0;
  }
}


/* --- Bloque final de contacto legal --- */

.pyrus-legal-contacto {
  border-top: 1px solid var(--pyrus-gris-calido);
}

.pyrus-legal-contacto__inner {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

.pyrus-legal-contacto__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-5);
}

/* El .pyrus-divider global lleva margin-bottom: 24px propio.
   Dentro de un flex-column con gap: 24px, eso suma 48px de separación
   (margin + gap) antes del título — hueco visual anómalo.
   Se anula el margin ya que el gap del padre es suficiente. */
.pyrus-legal-contacto__encabezado .pyrus-divider {
  margin-bottom: 0;
}

.pyrus-legal-contacto__titulo {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--pyrus-negro-carbon);
}

.pyrus-legal-contacto__subtexto {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.75;
  color: #3a3e48;
  max-width: 600px;
}

.pyrus-legal-contacto__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pyrus-sp-5);
}

/* Dato individual */
.pyrus-legal-dato {
  display: flex;
  flex-direction: column;
  gap: var(--pyrus-sp-3);
  padding: var(--pyrus-sp-6);
  background-color: var(--pyrus-blanco-puro);
  border: 1px solid var(--pyrus-gris-calido);
  border-radius: var(--pyrus-radius-md);
  border-top: 2px solid var(--pyrus-dorado);
}

.pyrus-legal-dato__etiqueta {
  font-size: var(--pyrus-type-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pyrus-azul-grisaceo);
}

.pyrus-legal-dato__valor {
  font-family: var(--pyrus-font-heading);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  color: var(--pyrus-negro-carbon);
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--pyrus-tr-fast);
}

a.pyrus-legal-dato__valor:hover {
  color: var(--pyrus-dorado-profundo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pyrus-legal-dato__valor--address {
  font-style: normal;
  line-height: 1.65;
}

.pyrus-legal-contacto__nota {
  font-size: var(--pyrus-type-sm);
  font-weight: 300;
  line-height: 1.75;
  color: var(--pyrus-azul-grisaceo);
  padding-top: var(--pyrus-sp-5);
  border-top: 1px solid var(--pyrus-gris-calido);
}

@media (max-width: 860px) {
  .pyrus-legal-contacto__datos  { grid-template-columns: 1fr; }
  /* Reducir gap interno en tablet/móvil para compactar
     el espacio antes de las tarjetas de contacto. */
  .pyrus-legal-contacto__inner  { gap: var(--pyrus-sp-7); }
}

@media (max-width: 640px) {
  .pyrus-legal-contacto__datos { gap: var(--pyrus-sp-4); }
  .pyrus-legal-dato            { padding: var(--pyrus-sp-5); }
}


/* ── San Vicente 330 — mobile: fila "Distribución" en cards de nivel ────────
   Scope: #tipologias (exclusivo de San Vicente 330 en este archivo).
   La fila 3 de .pyrus-tipologia-card__specs es siempre "Distribución"
   en las 3 cards de nivel (Planta Baja / Primer Nivel / Segundo Nivel).
   Equivalente WP: BLOQUE 44-M en pyrus-wp-elementor.css.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #tipologias .pyrus-tipologia-card__specs > li:nth-child(3) {
    flex-wrap: wrap;
    gap:       3px 0;
  }
  #tipologias .pyrus-tipologia-card__specs > li:nth-child(3) .pyrus-tipologia-card__spec-lbl {
    flex: 0 0 100%;
  }
  #tipologias .pyrus-tipologia-card__specs > li:nth-child(3) .pyrus-tipologia-card__spec-val {
    line-height: 1.45;
  }
}


/* ================================================
   Aldea Hortus — Tour virtual
   Sección editorial con enlace externo al tour 360°.
   Scopeada a .pyrus-tour-virtual — no afecta otros desarrollos.
   ================================================ */

.pyrus-tour-virtual {
  background-color: var(--pyrus-azul-petroleo, #16313D);
  position: relative;
  overflow: hidden;
}

.pyrus-tour-virtual__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.pyrus-tour-virtual__texto {
  font-size: var(--pyrus-type-base);
  font-weight: 300;
  line-height: 1.78;
  color: rgba(247,244,238,0.75);
  margin-top: var(--pyrus-sp-5);
}

.pyrus-tour-virtual__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pyrus-sp-4);
  margin-top: var(--pyrus-sp-7);
}

/* ── Tour virtual — preview card (imagen real + play + caption) ── */

.pyrus-tour-virtual__preview {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.pyrus-tour-virtual__preview-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.pyrus-tour-virtual__preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16,18,22,0.08) 0%,
    rgba(16,18,22,0.38) 100%
  );
  transition: background 0.35s ease;
  pointer-events: none;
}

.pyrus-tour-virtual__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  color: rgba(255,255,255,0.88);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
  transition: color 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.pyrus-tour-virtual__play svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pyrus-tour-virtual__caption {
  position: absolute;
  bottom: 16px;
  left: 20px;
  font-family: var(--pyrus-font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.72);
  pointer-events: none;
  transition: color 0.3s ease;
}

/* Hover */
.pyrus-tour-virtual__preview:hover .pyrus-tour-virtual__preview-img {
  transform: scale(1.03);
}

.pyrus-tour-virtual__preview:hover .pyrus-tour-virtual__preview-overlay {
  background: linear-gradient(
    180deg,
    rgba(16,18,22,0.05) 0%,
    rgba(16,18,22,0.32) 100%
  );
}

.pyrus-tour-virtual__preview:hover .pyrus-tour-virtual__play {
  color: var(--pyrus-dorado, #D8C07A);
  transform: translate(-50%, -50%) scale(1.08);
}

.pyrus-tour-virtual__preview:hover .pyrus-tour-virtual__caption {
  color: rgba(247,244,238,0.88);
}

/* Focus-visible */
.pyrus-tour-virtual__preview:focus-visible {
  outline: 2px solid var(--pyrus-dorado, #D8C07A);
  outline-offset: 4px;
}

/* ── Tour virtual — responsive ── */

@media (max-width: 768px) {
  .pyrus-tour-virtual__inner {
    grid-template-columns: 1fr;
    gap: var(--pyrus-sp-8);
  }

  .pyrus-tour-virtual__visual {
    order: -1;
  }

  .pyrus-tour-virtual__play {
    width: 44px;
    height: 44px;
  }

  .pyrus-tour-virtual__caption {
    bottom: 12px;
    left: 14px;
    font-size: 11px;
  }
}