/*
Theme Name: Tema Mateo Castrillón Realtor
Theme URI: https://example.com
Author: Tu Inmobiliaria
Description: Tema inmobiliario de lujo inspirado en el layout de las grandes brokerages (hero con buscador, propiedades destacadas, equipo de agentes, casos de éxito, contacto). Incluye tipos de contenido "Propiedades", "Agentes" y "Casos de Éxito" listos para publicar desde el escritorio de WordPress, sin plugins obligatorios.
Version: 3.5.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: prestige-estate
*/

/* ==========================================================================
   0. VARIABLES DE MARCA — cambia esto para personalizar todo el sitio
   ========================================================================== */
:root {
  --pe-black: #0b0b0c;
  --pe-black-soft: #16171b;
  --pe-white: #ffffff;
  --pe-off-white: #f3f1ea;
  --pe-cream: #f5f3ec;
  --pe-gray: #6c6f76;
  --pe-gray-light: #e3e2dc;
  --pe-navy: #1e5aa8;
  --pe-navy-deep: #153f76;
  --pe-gold: #1e5aa8; /* alias de compatibilidad: el "color de acento" del Personalizador pinta esta variable */
  --pe-success: #3f6f52;
  /* Semáforo de las calculadoras de inversión (Cap Rate/ROI/TIR) — colores de
     estado reservados solo para esto: nunca se reutilizan como color de serie
     en los gráficos (ver inc/calculadoras-inversion.php y calculadoras-inversion.js). */
  --pe-calc-verde: #2f7d52;
  --pe-calc-verde-bg: #eaf5ef;
  --pe-calc-amarillo: #b8860b;
  --pe-calc-amarillo-bg: #fbf3e1;
  --pe-calc-rojo: #c0392b;
  --pe-calc-rojo-bg: #fbeae8;
  --pe-calc-gris-bg: #f0eee6;

  --pe-font-display: "Archivo", "Arial Black", sans-serif;
  --pe-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pe-maxw: 1224px; /* ~10% más angosto que antes (1360px), para que todo el sitio se vea un poco más compacto */
  --pe-radius: 4px;
  --pe-radius-pill: 999px;
  --pe-transition: 220ms ease;
  /* Menú superior: por defecto usa el azul de la marca (sigue al "color de
     acento" del Personalizador); se puede cambiar en Personalizar → Menú
     superior. Las letras son siempre blancas. La cápsula que aparece al
     bajar la página usa exactamente este mismo color. */
  --pe-header-bg: var(--pe-navy);
  --pe-header-text: #ffffff;
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Tamaño general del sitio ~10% más pequeño: al bajar el font-size raíz, todo
   lo que usa "rem" en el resto de la hoja (títulos, botones, iconos, textos
   de componentes) se reduce proporcionalmente en automático. */
html { scroll-behavior: smooth; overflow-x: hidden; font-size: 90%; }
body {
  margin: 0;
  font-family: var(--pe-font-body);
  color: var(--pe-black);
  background: var(--pe-white);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* IMPORTANTE: "overflow-x" NO va aquí en el <body> — ponerlo en el body
     (en vez de solo en el <html> de arriba) convierte el body en su propio
     contenedor de scroll y eso ROMPE "position: sticky" en toda la página
     (el header que debía quedarse arriba al bajar, y el widget de "Programa
     una visita" que debía seguir visible junto al contenido). El <html>
     de arriba ya evita el desborde horizontal sin este efecto secundario. */
}
img { max-width: 100%; display: block; height: auto; }
/* position:fixed (no solo overflow:hidden) para que el bloqueo de scroll
   funcione de verdad en iPhone/Safari — ver main.js para el cálculo del
   "top" que evita que la página salte al abrir/cerrar el menú. */
body.pe-scroll-lock { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; overscroll-behavior: none; }
/* El <html> se bloquea igual que el <body> de arriba (ver main.js) — algunos
   navegadores de celular siguen dejando pasar el gesto de scroll a través
   del <html> aunque el <body> ya esté fijo. */
html.pe-scroll-lock { overflow: hidden; height: 100%; overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--pe-font-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--pe-navy); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; color: var(--pe-gray); }
.pe-container { max-width: var(--pe-maxw); margin: 0 auto; padding: 0 24px; }
.pe-eyebrow {
  font-family: var(--pe-font-body);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--pe-navy);
  margin-bottom: 14px;
  display: inline-block;
}
.pe-section-dark .pe-eyebrow { color: var(--pe-white); opacity: .75; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* Buttons */
.pe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 27px;
  border: 1px solid var(--pe-navy);
  background: var(--pe-navy);
  color: var(--pe-white);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  cursor: pointer;
  transition: var(--pe-transition);
  border-radius: var(--pe-radius-pill);
  font-family: var(--pe-font-body);
}
.pe-btn:hover { background: var(--pe-navy-deep); border-color: var(--pe-navy-deep); }
.pe-btn-outline {
  background: transparent;
  color: var(--pe-white);
  border-color: rgba(255,255,255,.55);
}
.pe-btn-outline:hover { background: var(--pe-white); color: var(--pe-navy); border-color: var(--pe-white); }
.pe-btn-dark-outline { background: transparent; color: var(--pe-navy); border-color: var(--pe-navy); }
.pe-btn-dark-outline:hover { background: var(--pe-navy); color: var(--pe-white); }
.pe-btn-full { width: 100%; justify-content: center; }

.pe-section { padding: 86px 0; }
.pe-section-tight { padding: 54px 0; }
.pe-section-dark { background: var(--pe-black); color: var(--pe-white); }
.pe-section-dark p { color: rgba(255,255,255,.65); }
.pe-section-dark h2 { color: var(--pe-white); }
.pe-section-off { background: var(--pe-off-white); }
.pe-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.pe-head-row h2 { margin: 0; }

/* ==========================================================================
   2. HEADER — barra azul de la marca con letras blancas. Al hacer scroll la
   barra completa desaparece y queda una cápsula flotante del mismo azul que
   va desde el logo hasta las tres rayitas.
   ========================================================================== */
.pe-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pe-header-bg);
  color: var(--pe-header-text);
  transition: background var(--pe-transition);
  border-bottom: 1px solid var(--pe-header-bg);
}
.pe-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
}
.pe-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--pe-maxw);
  margin: 0 auto;
  gap: 18px;
}
/* La cápsula es un fondo (::before) detrás de todo el contenido del
   encabezado: no cambia el alto ni mueve nada al bajar, solo aparece. */
.pe-header-inner::before {
  content: "";
  position: absolute;
  inset: 6px 8px;
  border-radius: 999px;
  background: var(--pe-header-bg);
  box-shadow: 0 12px 30px rgba(18,22,61,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pe-transition);
}
.pe-header.is-scrolled .pe-header-inner::before { opacity: 1; }
.pe-header-inner > * { position: relative; z-index: 1; }
/* pe-header-menu: agrupa el menú + los botones (de "Comprar" a las tres
   rayitas). */
.pe-header-menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
/* Animación de entrada del menú: el logo y cada elemento del menú principal
   "suben" hacia su lugar en cascada al abrir cualquier página, igual que el
   contenido del hero — así el encabezado se siente parte de la misma
   bienvenida en vez de aparecer de golpe. */
.pe-header-inner .pe-logo,
.pe-header .pe-nav > *,
.pe-header-actions > * {
  animation: pe-fade-up .6s cubic-bezier(.22,.68,0,1) both;
}
.pe-header-inner .pe-logo { animation-delay: 0s; }
.pe-header .pe-nav > *:nth-child(1) { animation-delay: .06s; }
.pe-header .pe-nav > *:nth-child(2) { animation-delay: .11s; }
.pe-header .pe-nav > *:nth-child(3) { animation-delay: .16s; }
.pe-header .pe-nav > *:nth-child(4) { animation-delay: .21s; }
.pe-header .pe-nav > *:nth-child(5) { animation-delay: .26s; }
.pe-header-actions > *:nth-child(1) { animation-delay: .3s; }
.pe-header-actions > *:nth-child(2) { animation-delay: .35s; }
.pe-header-actions > *:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .pe-header-inner .pe-logo,
  .pe-header .pe-nav > *,
  .pe-header-actions > * { animation: none; }
}
.pe-logo {
  font-family: var(--pe-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pe-logo span { color: inherit; opacity: .55; }
.pe-nav { display: flex; gap: 34px; align-items: center; flex-wrap: nowrap; }
.pe-nav a {
  position: relative;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  opacity: .85;
  transition: var(--pe-transition);
  white-space: nowrap;
}
.pe-nav a:hover { opacity: 1; }

/* "Nuestros Sectores" — menú desplegable dentro del nav principal */
.pe-nav-dropdown { position: relative; }
.pe-nav-dropdown-trigger {
  position: relative;
  font-family: var(--pe-font-body);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  opacity: .85;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  transition: var(--pe-transition);
}
.pe-nav-dropdown-trigger span { font-size: .7em; transition: transform .2s ease; }

/* Menú superior más animado en computador: al pasar el mouse, cada enlace
   sube ligeramente y le crece un subrayado de izquierda a derecha (en vez
   de solo cambiar de opacidad). Solo en dispositivos con hover real (mouse)
   — en celular/tablet el usuario toca, no "pasa por encima", así que ahí se
   deja el comportamiento simple de siempre. */
@media (hover: hover) and (pointer: fine) {
  .pe-nav a::after,
  .pe-nav-dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.22,.68,0,1);
  }
  .pe-nav a:hover,
  .pe-nav-dropdown:hover .pe-nav-dropdown-trigger,
  .pe-nav-dropdown:focus-within .pe-nav-dropdown-trigger {
    transform: translateY(-2px);
  }
  .pe-nav a:hover::after,
  .pe-nav a:focus-visible::after,
  .pe-nav-dropdown:hover .pe-nav-dropdown-trigger::after,
  .pe-nav-dropdown:focus-within .pe-nav-dropdown-trigger::after {
    transform: scaleX(1);
  }
}
.pe-nav-dropdown:hover .pe-nav-dropdown-trigger,
.pe-nav-dropdown:focus-within .pe-nav-dropdown-trigger { opacity: 1; }
.pe-nav-dropdown:hover .pe-nav-dropdown-trigger span,
.pe-nav-dropdown:focus-within .pe-nav-dropdown-trigger span { transform: rotate(180deg); }
.pe-nav-dropdown-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  background: var(--pe-white); border-radius: 18px; box-shadow: 0 20px 40px rgba(18,22,61,.18);
  padding: 20px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 50; text-align: center; min-width: 420px;
}
.pe-nav-dropdown:hover .pe-nav-dropdown-panel,
.pe-nav-dropdown:focus-within .pe-nav-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Cada sector es un botón (mismo azul de la marca que .pe-btn) en una cuadrícula */
.pe-nav-dropdown-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pe-nav-dropdown-btn {
  background: var(--pe-navy); color: var(--pe-white); opacity: 1;
  text-transform: none; font-weight: 700; font-size: .84rem; letter-spacing: 0;
  padding: 12px 16px; border-radius: var(--pe-radius-pill); white-space: nowrap;
  transition: var(--pe-transition);
}
.pe-nav-dropdown-btn:hover { background: var(--pe-navy-deep); }
/* "Ver propiedades" va suelto (sin botón) debajo de la cuadrícula de sectores */
.pe-nav-dropdown-viewall {
  display: block; margin-top: 16px; color: var(--pe-navy); opacity: 1;
  text-transform: uppercase; font-weight: 700; font-size: .78rem; letter-spacing: .06em;
  border-bottom: 1px solid var(--pe-navy); padding-bottom: 2px;
}
.pe-header-actions { display: flex; align-items: center; gap: 14px; }
.pe-header-actions .pe-phone { font-size: .8rem; font-weight: 600; opacity: .85; white-space: nowrap; }
/* "Ver Propiedades": sobre la barra azul pasa a ser blanco con letras del
   color de la barra (si siguiera azul se perdería). */
.pe-header-actions .pe-btn { padding: 12px 22px; font-size: .74rem; background: var(--pe-header-text); border-color: var(--pe-header-text); color: var(--pe-header-bg); }
.pe-header-actions .pe-btn:hover { background: rgba(255,255,255,.88); border-color: rgba(255,255,255,.88); color: var(--pe-header-bg); }
/* Íconos de redes sociales del menú principal: a tamaño discreto (igual de
   sobrios que el resto del menú), no los círculos grandes que usaba antes
   el menú de las tres rayitas. */
.pe-header-social { display: flex; gap: 6px; }
.pe-header-social a {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .7; color: inherit;
  transition: var(--pe-transition);
}
.pe-header-social a svg { width: 13px; height: 13px; }
.pe-header-social a:hover { opacity: 1; }
@media (max-width: 860px) {
  .pe-header-social { display: none; }
}
.pe-burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: currentColor;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   3. HERO / BUSCADOR
   ========================================================================== */
.pe-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--pe-white);
  background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.55) 55%, rgba(11,11,12,.85) 100%), var(--pe-black-soft) center/cover no-repeat;
  overflow: hidden;
}
.pe-hero.has-image { background-image: linear-gradient(180deg, rgba(11,11,12,.25), rgba(11,11,12,.8)), var(--pe-hero-img, none); background-size: cover; background-position: center; }
.pe-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pe-hero.has-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.55) 55%, rgba(11,11,12,.85) 100%); z-index: 1; }
.pe-hero-content {
  position: relative; z-index: 2; max-width: var(--pe-maxw); margin: 0 auto; padding: 60px 24px; width: 100%;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
/* El eyebrow ("Bienes raíces de lujo") usa el color navy por defecto
   (.pe-eyebrow), que se pierde sobre el fondo oscuro del hero — se fuerza a
   blanco aquí (selector .pe-hero-content .pe-eyebrow, más específico que la
   regla genérica, para que gane siempre). */
.pe-hero-content .pe-eyebrow { color: var(--pe-white); opacity: .9; }
/* Portada estilo "titular corto" (12 oct 2026, referencia de Mateo):
   titular grande en minúsculas normales, una sola línea de apoyo con las
   palabras clave y pestañas Comprar / Vender / Invertir sobre el buscador. */
.pe-hero h1 {
  max-width: 980px; margin-left: auto; margin-right: auto;
  font-size: clamp(2.3rem, 5.6vw, 4.6rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.02em; text-transform: none;
  white-space: normal; text-wrap: balance;
}
.pe-hero-sub { max-width: 640px; margin: 14px auto 0; font-size: 1rem; font-weight: 600; color: var(--pe-white); }
.pe-hero-tabs {
  display: inline-flex; gap: 4px; margin: 26px auto 14px; padding: 4px;
  background: rgba(255,255,255,.92); border-radius: 999px;
}
.pe-hero-tabs a {
  padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  color: var(--pe-navy); text-decoration: none; transition: background .2s ease;
}
.pe-hero-tabs a:hover { background: rgba(255,255,255,.7); }
.pe-hero-tabs a.is-on { background: var(--pe-white); color: #14264d; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.pe-hero-content .pe-search { margin-top: 0; width: min(640px, 100%); }

/* Animación de entrada al abrir la página: el eyebrow, el título y el
   subtítulo del hero aparecen en cascada (fade + leve desplazamiento hacia
   arriba) en vez de aparecer todos de golpe. */
@keyframes pe-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.pe-hero-content .pe-eyebrow,
.pe-hero-content h1,
.pe-hero-content .pe-hero-sub,
.pe-hero-content .pe-search {
  animation: pe-fade-up .9s cubic-bezier(.22,.68,0,1) both;
}
.pe-hero-content .pe-eyebrow { animation-delay: .05s; }
.pe-hero-content h1 { animation-delay: .18s; }
.pe-hero-content .pe-hero-sub { animation-delay: .32s; }
.pe-hero-content .pe-search { animation-delay: .46s; }
/* El fondo del hero (imagen/video) también aparece con un fundido suave en
   vez de estar de golpe al 100% — se siente más agradable al abrir la página. */
.pe-hero { animation: pe-fade-in 1.1s ease both; }
@keyframes pe-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pe-hero-content .pe-eyebrow,
  .pe-hero-content h1,
  .pe-hero-content .pe-hero-sub,
  .pe-hero-content .pe-search,
  .pe-hero { animation: none; }
}

.pe-search {
  width: 100%;
  margin-top: 40px;
  background: var(--pe-white);
  padding: 8px 8px 8px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  border-radius: var(--pe-radius-pill);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
@media (max-width: 480px) {
  .pe-search { padding: 6px 6px 6px 18px; }
  .pe-search input[type="text"] { min-width: 0; }
}
.pe-search input[type="text"] {
  flex: 1;
  min-width: 160px;
  background: transparent;
  border: none;
  color: var(--pe-black);
  padding: 12px 0;
  font-size: .95rem;
  font-family: var(--pe-font-body);
}
.pe-search input::placeholder { color: var(--pe-gray); }
.pe-search button {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}
.pe-search button svg { display: block; }

/* ==========================================================================
   3b. LOS MEJORES PROYECTOS (nuevos desarrollos — panel horizontal tipo
   acordeón: paneles landscape en una fila que crecen y revelan info al pasar
   el mouse, estilo brokerage de lujo)
   ========================================================================== */
.pe-projects-track {
  display: flex;
  gap: 8px;
  height: 460px;
  overflow: hidden;
}
.pe-project-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pe-gray-light);
  cursor: pointer;
  transition: flex .5s cubic-bezier(.2,.8,.2,1);
}
.pe-project-card:hover,
.pe-project-card:focus-within {
  flex: 2.4 1 0;
}
.pe-project-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-project-label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 22px;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72) 100%);
  color: var(--pe-white);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.pe-project-card:hover .pe-project-label,
.pe-project-card:focus-within .pe-project-label {
  opacity: 1;
}
.pe-project-loc { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; white-space: nowrap; }
.pe-project-title { font-family: var(--pe-font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-projects-controls {
  display: flex; align-items: center; justify-content: flex-end;
  padding-top: 24px;
}
@media (max-width: 900px) {
  .pe-projects-track {
    height: auto;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .pe-project-card {
    flex: 0 0 auto;
    width: 240px;
    height: 300px;
    scroll-snap-align: start;
    transition: none;
  }
  .pe-project-card:hover,
  .pe-project-card:focus-within { flex: 0 0 auto; }
  .pe-project-label { opacity: 1; padding: 16px; }
}

/* ==========================================================================
   4. SECTORES (inicio)
   ========================================================================== */
/* 4 columnas x 2 filas en escritorio (8 sectores por defecto) — botones
   grandes, estilo Serhant. */
.pe-sectores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pe-sector-btn {
  background: var(--pe-navy);
  color: var(--pe-white);
  text-align: center;
  padding: 26px 22px;
  border-radius: var(--pe-radius-pill);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
  transition: var(--pe-transition);
}
.pe-sector-btn:hover { background: var(--pe-navy-deep); }
@media (max-width: 860px) {
  .pe-sectores-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .pe-sector-btn { padding: 20px 16px; font-size: .95rem; }
}
@media (max-width: 600px) {
  .pe-sectores-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pe-sector-btn { padding: 18px 14px; font-size: .9rem; }
}
/* "Ver propiedades" va suelto (texto simple, sin fondo de botón) debajo de la cuadrícula */
.pe-sectores-viewall {
  display: inline-block;
  margin-top: 28px;
  color: var(--pe-navy);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--pe-navy);
  padding-bottom: 2px;
}

.pe-sectores-viewall + .pe-sectores-viewall { margin-left: 24px; }
@media (max-width: 600px) {
  .pe-sectores-viewall { display: table; }
  .pe-sectores-viewall + .pe-sectores-viewall { margin-left: 0; margin-top: 16px; }
}

/* ==========================================================================
   5. FILTROS DE PROPIEDADES
   ========================================================================== */
.pe-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background: var(--pe-off-white);
  border-radius: 18px;
  margin-bottom: 40px;
}
.pe-filters select,
.pe-filters input {
  padding: 12px 16px;
  border: 1px solid var(--pe-gray-light);
  background: var(--pe-white);
  font-size: .85rem;
  min-width: 140px;
  flex: 1;
  border-radius: var(--pe-radius-pill);
  font-family: var(--pe-font-body);
}
.pe-filters .pe-btn { flex: 0 0 auto; }
.pe-filters .pe-filters-reset {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pe-gray);
  align-self: center;
  border-bottom: 1px solid var(--pe-gray);
}

/* Buscador rápido del inicio (Sector / Tipo de propiedad / Habitaciones):
   el fondo azul va en la SECCIÓN completa (de esquina a esquina del
   navegador), no solo en el formulario — el formulario en sí queda
   transparente y alineado al ancho normal del contenido. */
.pe-search-band { background: var(--pe-navy); }
.pe-filters-home { background: transparent; margin-bottom: 0; }
.pe-filters-home select { background: var(--pe-white); border-color: transparent; }
.pe-filters-home .pe-btn { background: var(--pe-white); color: var(--pe-navy); border-color: var(--pe-white); }
.pe-filters-home .pe-btn:hover { background: var(--pe-off-white); }

/* ==========================================================================
   6. TARJETAS DE PROPIEDAD
   ========================================================================== */
.pe-property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 32px;
}
/* Propiedades destacadas del inicio: siempre 3 columnas (3 arriba, 3 abajo) */
.pe-property-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pe-property-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pe-property-grid-3 { grid-template-columns: 1fr; } }
.pe-property-card { position: relative; background: var(--pe-white); }
.pe-property-card .pe-thumb {
  display: block; /* el <a> es inline por defecto: sin esto, el navegador no suma
  correctamente su altura (aspect-ratio) a la de sus hermanos (precio, specs...),
  y esa información termina "recortada"/superpuesta con la sección de abajo. */
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pe-gray-light);
  border-radius: 14px;
}
.pe-property-card .pe-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.pe-property-card:hover .pe-thumb img { transform: scale(1.06); }
.pe-status-badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  background: var(--pe-cream);
  color: var(--pe-navy);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--pe-radius-pill);
}
.pe-status-badge.is-sold { background: var(--pe-gray-light); color: var(--pe-gray); }
.pe-status-badge.is-pending { background: var(--pe-navy); color: var(--pe-white); }
.pe-thumb-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72) 100%);
  color: var(--pe-white);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  pointer-events: none;
}
.pe-property-card .pe-price {
  font-family: var(--pe-font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin-top: 18px;
  color: var(--pe-black);
}
.pe-property-card .pe-address { font-size: .88rem; color: var(--pe-gray); margin-bottom: 4px; }
.pe-property-card .pe-meta {
  display: flex; gap: 0;
  font-size: .74rem; color: var(--pe-gray);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-top: 10px;
}
.pe-property-card .pe-meta span:not(:last-child)::after { content: "\00B7"; margin: 0 10px; color: var(--pe-gray-light); font-weight: 900; }
.pe-property-card .pe-view-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  border-bottom: 1px solid var(--pe-navy);
  color: var(--pe-navy);
  padding-bottom: 2px;
}

/* "Propiedades similares" (ficha de propiedad): las tarjetas pierden su
   fondo blanco para que se compacten con el fondo crema de la sección en
   vez de verse como recuadros separados. Solo afecta a esta sección — el
   resto de tarjetas de propiedad del sitio (inicio, listados) siguen igual. */
.pe-related-properties .pe-property-card { background: transparent; }

/* ==========================================================================
   7. MEDIA / VIDEO PROMO
   ========================================================================== */
.pe-media-promo {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  color: var(--pe-white);
  background: linear-gradient(180deg, rgba(11,11,12,.1), rgba(11,11,12,.85)), var(--pe-black-soft) center/cover no-repeat;
}
.pe-media-promo.has-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.1), rgba(11,11,12,.85)); z-index: 1; }
.pe-media-promo-inner { position: relative; z-index: 2; padding: 56px; max-width: 620px; }
.pe-media-promo h2 { color: var(--pe-white); }
.pe-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  background: transparent; color: var(--pe-white); cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.pe-play-btn:hover { background: rgba(255,255,255,.15); }

/* Modal de video (ej: "Así trabajamos por ti", y el botón "Jugar" sobre la
   foto principal de la galería de una propiedad) */
.pe-video-modal { position: fixed; inset: 0; z-index: 300; background: rgba(11,11,12,.96); display: flex; align-items: center; justify-content: center; padding: 24px; overscroll-behavior: none; touch-action: none; }
.pe-video-modal[hidden] { display: none; }
.pe-video-modal video { max-width: min(1100px, 92vw); max-height: 86vh; width: 100%; border-radius: 6px; }
.pe-video-modal-frame { position: relative; width: min(1100px, 92vw); aspect-ratio: 16/9; }
.pe-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

/* Enlace "Video" sobre la foto principal de la galería de una propiedad —
   lleva directo al video de YouTube/Vimeo en una pestaña nueva. Chico, en
   rojo estilo YouTube, en la esquina inferior izquierda de la foto hero
   (no debe tapar la imagen). Es un <a> hermano de la foto (no anidado
   dentro de su enlace) posicionado encima con position:absolute — la celda
   que lo contiene (.pe-gallery-hero-cell o el <a> hero cuando no hay video)
   ya tiene position:relative, ver más arriba. */
.pe-gallery-video-link {
  position: absolute !important; left: 12px; bottom: 12px; top: auto; right: auto; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  width: auto; max-width: max-content; height: auto;
  background: #ff0000; color: var(--pe-white);
  border: 0; border-radius: 999px; padding: 6px 12px 6px 9px;
  font-family: var(--pe-font-body); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.pe-gallery-video-link:hover { background: #d90000; }
.pe-gallery-play-icon {
  width: 18px; height: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; color: #ff0000;
}
.pe-gallery-play-icon svg { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) {
  .pe-gallery-video-link { left: 8px; bottom: 8px; padding: 5px 10px 5px 8px; font-size: .64rem; }
}

/* El botón "Video" es siempre rojo, sea cual sea la red social del enlace. */

/* ==========================================================================
   8. SERVICIOS / POR QUÉ NOSOTROS
   ========================================================================== */
.pe-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--pe-gray-light);
  border-radius: 18px;
  overflow: hidden;
}
.pe-service-card {
  background: var(--pe-white);
  padding: 40px 32px;
}
.pe-service-card .pe-num {
  font-family: var(--pe-font-display);
  color: var(--pe-navy);
  font-size: 1rem;
  margin-bottom: 20px;
  display: block;
  font-weight: 800;
}
.pe-service-card a.pe-link-arrow {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  border-bottom: 1px solid var(--pe-navy);
  color: var(--pe-navy);
}

/* ==========================================================================
   9. AGENTES
   ========================================================================== */
.pe-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
}
/* "Ver todos" debajo de la cuadrícula de agentes (en vez de arriba junto al
   título), centrado. */
.pe-agents-viewall-row { text-align: center; margin-top: 40px; }
.pe-agent-card { text-align: left; }
.pe-agent-card .pe-thumb {
  display: block; /* el <a> es inline por defecto: bloquea que su altura (aspect-ratio)
  se sume bien a la del nombre/cargo debajo. Ver nota en .pe-property-card .pe-thumb. */
  aspect-ratio: 3/4;
  background: var(--pe-gray-light);
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 14px;
}
.pe-agent-card .pe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-agent-card h4 { font-family: var(--pe-font-display); font-size: 1.05rem; margin: 0 0 4px; }
.pe-agent-card .pe-role { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pe-navy); }

/* ==========================================================================
   9b. REDES SOCIALES DESTACADAS — bloque de video con cinta ("marquee") en
   movimiento continuo arriba, y botones grandes a Instagram/TikTok/YouTube.
   ========================================================================== */
.pe-social-spotlight {
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  color: var(--pe-white);
  background: linear-gradient(180deg, rgba(11,11,12,.4) 0%, rgba(11,11,12,.6) 55%, rgba(11,11,12,.88) 100%), var(--pe-black-soft) center/cover no-repeat;
  overflow: hidden;
}
.pe-social-spotlight.has-image {
  background-image: linear-gradient(180deg, rgba(11,11,12,.35), rgba(11,11,12,.82)), var(--pe-social-img, none);
  background-size: cover; background-position: center;
}
.pe-social-spotlight .pe-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pe-social-spotlight.has-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, rgba(11,11,12,.55) 55%, rgba(11,11,12,.88) 100%);
  z-index: 1;
}

/* Cinta superior en movimiento continuo — el elemento "sorprendente" que
   anuncia el bloque. Se duplica el contenido en el PHP (dos veces seguidas)
   y se anima la mitad exacta del ancho para que el loop sea perfecto, sin
   salto visible. */
.pe-social-marquee {
  position: relative; z-index: 2; width: 100%; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 14px 0;
  background: rgba(0,0,0,.25);
}
.pe-social-marquee-track {
  display: flex; align-items: center; gap: 18px; width: max-content; white-space: nowrap;
  animation: pe-marquee 30s linear infinite;
  will-change: transform;
  font-family: var(--pe-font-display); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.pe-social-marquee-dot { opacity: .5; font-size: .6rem; }
@keyframes pe-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.pe-social-spotlight-inner {
  position: relative; z-index: 2; flex: 1;
  max-width: var(--pe-maxw); margin: 0 auto; padding: 64px 24px; width: 100%;
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pe-social-spotlight-inner .pe-eyebrow { color: var(--pe-white); opacity: .85; }
.pe-social-spotlight-inner h2 { color: var(--pe-white); max-width: 640px; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.pe-social-spotlight-inner p { color: rgba(255,255,255,.75); max-width: 520px; margin-bottom: 0; }
.pe-social-spotlight-subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  margin-top: 10px;
}

.pe-social-spotlight-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.pe-social-spotlight-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--pe-radius-pill);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--pe-white);
  transition: var(--pe-transition);
}
.pe-social-spotlight-link:hover { background: var(--pe-white); color: var(--pe-navy); border-color: var(--pe-white); }
.pe-social-spotlight-icon { width: 20px; height: 20px; display: inline-flex; flex-shrink: 0; }
.pe-social-spotlight-icon svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .pe-social-marquee-track { animation: none; }
}
@media (max-width: 600px) {
  .pe-social-spotlight { min-height: 50vh; }
  .pe-social-marquee-track { font-size: .82rem; gap: 12px; }
  .pe-social-spotlight-inner { padding: 44px 24px; }
  .pe-social-spotlight-links { flex-direction: column; width: 100%; max-width: 280px; }
  .pe-social-spotlight-link { justify-content: center; }
}

/* ==========================================================================
   10. CTA / JOIN
   ========================================================================== */
.pe-cta {
  background: var(--pe-navy);
  color: var(--pe-white);
  padding: 100px 0;
  text-align: center;
}
.pe-cta h2 { color: var(--pe-white); }
.pe-cta p { color: var(--pe-white); }
.pe-cta .pe-container { max-width: 720px; }
.pe-cta-actions { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ==========================================================================
   11. CASOS DE ÉXITO — fila horizontal de tarjetas con scroll infinito.
   El PHP repite el mismo conjunto de tarjetas 3 veces seguidas; main.js
   detecta cuándo el scroll se acerca al final o al inicio del grupo del
   medio y reubica la posición sin animación (imperceptible, porque los tres
   grupos son visualmente idénticos) — así se puede seguir desplazando hacia
   la derecha (o hacia la izquierda) sin tope real. Todas las tarjetas miden
   exactamente lo mismo (ancho fijo + alto de texto fijo con recorte) para
   que la fila se vea prolija sin importar cuánto texto tenga cada una.
   Full-bleed (se sale de .pe-container) igual que el mapa y los proyectos.
   ========================================================================== */
.pe-success-scroll {
  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
  margin-top: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pe-success-scroll::-webkit-scrollbar { display: none; height: 0; }
.pe-success-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 4px 24px 14px;
}
.pe-success-card {
  flex: 0 0 240px;
  width: 240px;
  background: var(--pe-white);
  border: 1px solid var(--pe-gray-light);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--pe-transition);
}
.pe-success-card:hover { box-shadow: 0 20px 40px rgba(11,11,12,.08); transform: translateY(-3px); }
.pe-success-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--pe-gray-light); }
.pe-success-photo img { width: 100%; height: 100%; object-fit: cover; }
.pe-success-body { padding: 20px; position: relative; }
.pe-success-quote {
  display: block; font-family: var(--pe-font-display); font-size: 2.4rem; line-height: 1;
  color: var(--pe-navy); opacity: .18; margin-bottom: -6px;
}
/* Alto fijo (con recorte a 4 líneas) para que todas las tarjetas midan
   siempre lo mismo, sin importar cuánto texto tenga cada caso de éxito. */
.pe-success-text {
  font-size: .86rem; color: var(--pe-gray); margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 4.5em;
}
.pe-success-name {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--pe-navy);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .pe-success-card { flex-basis: 200px; width: 200px; }
  .pe-success-track { gap: 16px; padding: 4px 20px 14px; }
}
/* Tarjetas con fotos adicionales (wp-admin → Casos de Éxito → "Fotos
   adicionales del proceso"): se pueden abrir en una ventana emergente, así
   que llevan cursor de mano y una insignia "+N fotos" sobre la foto para que
   se note que hay más para ver. Las que no tienen fotos extra quedan igual
   que antes (sin insignia, sin cursor de clic). */
.pe-success-card-clickable { cursor: pointer; }
.pe-success-card-clickable:focus-visible { outline: 2px solid var(--pe-navy); outline-offset: 2px; }
.pe-success-photo { position: relative; }
.pe-success-more {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(11,11,12,.72); color: var(--pe-white);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px; line-height: 1;
}
/* Estrellas de calificación (aprobación social) en la tarjeta de un caso de
   éxito, arriba de la frase del cliente — reutiliza pe_render_star_rating(),
   la misma barra de estrellas del Índice de Estilo de Vida. */
.pe-success-body .pe-star-rating { margin-bottom: 6px; font-size: .9rem; }

/* "Tarjeta" de aprobación social dentro de la ventana emergente de fotos de
   un caso de éxito (reutiliza el mismo .pe-lightbox del visor de fotos de
   propiedad, ver style.css más arriba y main.js): la foto y, justo debajo,
   un panel propio con el nombre, las estrellas y la frase completa del
   cliente — para que la ventana emergente se sienta como el testimonio real
   que es, y no solo un visor de fotos. Va DEBAJO de la foto (no encima, como
   un degradado) para que nunca se vea como una sombra rara sobre la imagen
   ni quede desproporcionado en fotos angostas (verticales) — el panel tiene
   su propio ancho y alto, y la frase se ve completa (con scroll interno si
   fuera muy larga) en vez de cortarse.
   .pe-caso-lightbox-col agrupa la foto + el panel en una sola columna para
   que los botones de "anterior/siguiente" del lightbox sigan quedando a los
   lados de todo el conjunto, no solo de la foto. */
.pe-caso-lightbox-col {
  display: flex; flex-direction: column; align-items: stretch;
  max-width: min(480px, 84vw);
  max-height: 90vh;
}
.pe-lightbox-stage { text-align: center; }
.pe-caso-lightbox-col .pe-lightbox-stage img { max-width: 100%; max-height: 58vh; }
.pe-lightbox-caso-caption {
  margin-top: 10px;
  padding: 14px 18px 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  text-align: left;
  max-height: 26vh;
  overflow-y: auto;
}
.pe-lightbox-caso-caption-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.pe-lightbox-caso-name {
  color: var(--pe-white); font-size: .84rem; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.pe-lightbox-caso-rating { color: #f0ad4e; font-size: .74rem; letter-spacing: 2px; }
.pe-lightbox-caso-caption-top .pe-lightbox-count {
  position: static; margin-left: auto;
  color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .04em; white-space: nowrap;
}
.pe-lightbox-caso-text {
  margin: 0; color: rgba(255,255,255,.92); font-size: .84rem; line-height: 1.55;
  font-style: italic;
}
@media (max-width: 600px) {
  .pe-caso-lightbox-col { max-width: 92vw; }
  .pe-lightbox-caso-caption { padding: 12px 14px 14px; max-height: 30vh; }
  .pe-lightbox-caso-text { font-size: .8rem; }
}

/* ==========================================================================
   12. FORMULARIOS (contacto / newsletter)
   ========================================================================== */
.pe-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pe-form-grid .full { grid-column: 1 / -1; }
.pe-form input, .pe-form select, .pe-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--pe-gray-light);
  background: var(--pe-white);
  font-family: var(--pe-font-body);
  font-size: .92rem;
  border-radius: var(--pe-radius-pill);
}
.pe-form textarea { border-radius: 18px; }
.pe-section-dark .pe-form input,
.pe-section-dark .pe-form select,
.pe-section-dark .pe-form textarea {
  background: transparent; border-color: rgba(255,255,255,.25); color: var(--pe-white);
}
/* El <select> hereda color:blanco arriba, pero el menú desplegable nativo del
   navegador tiene fondo blanco: sin esta regla las opciones quedaban blancas
   sobre blanco (invisibles) al abrir "Tema". Mismo patrón que
   .pe-tour-hour-select option. */
.pe-section-dark .pe-form select option { color: var(--pe-black); background: var(--pe-white); }
.pe-form textarea { min-height: 120px; resize: vertical; }
.pe-form label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--pe-gray); font-weight: 600; }
/* .pe-form-consent es un <label> (no un <p>) para que al hacer clic en el
   texto también se marque la casilla — antes no pasaba nada al hacer clic
   en el texto, lo que se sentía "bugeado". Selector reforzado (".pe-form
   .pe-form-consent" en vez de solo ".pe-form-consent") para ganarle siempre
   a la regla genérica ".pe-form label" sin depender del orden del archivo.
   Además se le da un contorno propio (tipo tarjeta) para que se vea como un
   elemento claro e independiente del resto del formulario, no como texto
   suelto — así no se siente "bugeado" ni desorganizado. */
.pe-form .pe-form-consent {
  display: flex; gap: 12px; align-items: flex-start; font-size: .82rem; color: var(--pe-gray);
  text-transform: none; letter-spacing: normal; font-weight: 400; cursor: pointer; margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--pe-gray-light);
  border-radius: 14px;
  transition: var(--pe-transition);
}
.pe-form .pe-form-consent:hover { border-color: var(--pe-navy); background: var(--pe-off-white); }
.pe-form-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--pe-navy);
}
.pe-section-dark .pe-form-consent { color: rgba(255,255,255,.65); }
.pe-section-dark .pe-form-consent { border-color: rgba(255,255,255,.18); }
.pe-section-dark .pe-form-consent:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.pe-section-dark .pe-form-consent input[type="checkbox"] { accent-color: var(--pe-white); }
.pe-form-note { font-size: .75rem; margin-top: 16px; color: var(--pe-gray); }

.pe-newsletter { background: var(--pe-off-white); }
/* Campos en una fila (se apilan si no caben) y el botón "Suscribirme"
   centrado debajo, no pegado a los campos. */
.pe-newsletter-form {
  max-width: 520px; margin: 24px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pe-newsletter-fields {
  width: 100%; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.pe-newsletter-fields input { flex: 1; min-width: 160px; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.pe-footer { background: var(--pe-black); color: rgba(255,255,255,.7); padding: 80px 0 30px; }
.pe-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pe-footer-grid h5 {
  color: var(--pe-white);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.pe-footer-grid li { margin-bottom: 10px; font-size: .86rem; }
.pe-footer-grid a:hover { color: var(--pe-white); text-decoration: underline; }
.pe-footer-brand .pe-logo { color: var(--pe-white); margin-bottom: 14px; }
.pe-footer-brand p { max-width: 280px; font-size: .86rem; }
.pe-footer-social { display: flex; gap: 14px; margin-top: 18px; }
.pe-footer-social a { border: 1px solid rgba(255,255,255,.25); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.pe-footer-social a svg { width: 17px; height: 17px; display: block; }
.pe-footer-social a { transition: background .2s, border-color .2s, color .2s; }
.pe-footer-social a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); text-decoration: none; }
.pe-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; padding-top: 26px; font-size: .78rem; color: rgba(255,255,255,.45);
}
.pe-footer-bottom a { margin-left: 18px; }

/* ==========================================================================
   14. SINGLE PROPERTY / SINGLE AGENT
   ========================================================================== */
/* Cabecera genérica navy (archivo de propiedades, agentes, páginas, entradas...).
   La ficha individual de propiedad (single-propiedad.php) ya NO usa esta clase:
   ahí las fotos van primero — ver "Resumen compacto" más abajo. */
.pe-single-hero { background: var(--pe-navy); color: var(--pe-white); padding: 60px 0 40px; }
.pe-single-hero h1 { color: var(--pe-white); }
.pe-single-hero .pe-price { font-family: var(--pe-font-display); font-weight: 800; font-size: 2.2rem; }
.pe-breadcrumb { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin-bottom: 18px; }
/* Galería: fondo negro de lateral a lateral; foto principal ancha y corta
   (horizontal) + 4 miniaturas más pequeñas en cuadrícula 2x2, estilo Serhant.
   La cuadrícula tiene una ALTURA FIJA (en vez de que cada celda calcule su
   propio aspect-ratio): así las dos filas de miniaturas encajan exactas con
   la foto principal sin desalinearse, sea cual sea el ancho de cada columna. */
.pe-gallery-section { background: var(--pe-black); padding: 20px 0; }
.pe-gallery { display: grid; grid-template-columns: 2.3fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 8px; height: 480px; }
.pe-gallery a, .pe-gallery-hero-cell { position: relative; display: block; cursor: pointer; overflow: hidden; border-radius: 8px; }
.pe-gallery-hero-cell { position: relative; }
.pe-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.pe-gallery > :first-child { grid-row: 1 / span 2; }
.pe-gallery-hero-cell .pe-gallery-item { position: absolute; inset: 0; border-radius: 0; }
.pe-gallery-hero-cell .pe-gallery-item img { border-radius: 0; }
.pe-gallery-more {
  position: absolute; inset: 0; border-radius: 8px;
  background: rgba(11,11,12,.55);
  color: var(--pe-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.6;
}
.pe-gallery-mobile-cta { display: none; }

/* Título, precio y características básicas: banda negra de lateral a
   lateral justo debajo de las fotos. Título y precio arriba, specs
   (habitaciones/baños/m²/parqueaderos) abajo — todo en blanco sobre negro. */
.pe-property-specs-band { background: var(--pe-black); padding: 28px 0 26px; }
.pe-property-summary-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.pe-property-summary-top .pe-status-badge { position: static; display: inline-block; margin-bottom: 6px; }
.pe-property-specs-band h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--pe-white); margin: 10px 0 6px; }
.pe-property-summary-address { color: rgba(255,255,255,.65); margin: 0; }
.pe-property-specs-band .pe-price { font-family: var(--pe-font-display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--pe-white); white-space: nowrap; }
.pe-property-specs-band .pe-spec-grid {
  margin: 24px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.15);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 20px;
}
.pe-property-specs-band .pe-spec-grid .pe-spec-val { color: var(--pe-white); font-size: 1.55rem; }
.pe-property-specs-band .pe-spec-grid .pe-spec-label { color: rgba(255,255,255,.6); }

/* Sub-nav debajo de la banda negra: pestañas ancla + botones de acción,
   fondo blanco (reemplaza el antiguo "hero" azul de arriba — ahora las
   fotos, luego título/precio/specs, van primero). */
.pe-property-summary { padding: 20px 0 32px; border-bottom: 1px solid var(--pe-gray-light); margin-bottom: 32px; }

/* Lightbox de galería */
.pe-lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11,11,12,.96);
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 24px;
  overscroll-behavior: none; touch-action: none;
}
.pe-lightbox[hidden] { display: none; }
.pe-lightbox-stage { position: relative; max-width: min(1100px, 84vw); max-height: 84vh; min-width: 60px; min-height: 60px; }
.pe-lightbox-stage img { max-width: min(1100px, 84vw); max-height: 84vh; width: auto; height: auto; border-radius: 6px; object-fit: contain; }
.pe-lightbox-count { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .82rem; letter-spacing: .04em; white-space: nowrap; }
/* Mientras una foto todavía no ha cargado (is-loading, ver main.js) se ve
   discreta y con un pequeño anillo girando encima, en vez de dejar la
   pantalla en blanco — así queda claro que sí está cargando y no invita a
   hacer clic en "siguiente" de nuevo pensando que no pasó nada. */
.pe-lightbox-stage.is-loading img { opacity: .25; transition: opacity .15s ease; }
.pe-lightbox-stage.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.9);
  animation: pe-lightbox-spin .7s linear infinite;
}
@keyframes pe-lightbox-spin { to { transform: rotate(360deg); } }
.pe-lightbox-close {
  position: absolute; top: 18px; right: 24px;
  background: transparent; border: 0; color: var(--pe-white); font-size: 2rem; line-height: 1; cursor: pointer;
}
.pe-lightbox-nav {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: var(--pe-white);
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; flex-shrink: 0;
}
.pe-lightbox-nav:hover { background: rgba(255,255,255,.2); }
@media (max-width: 600px) {
  .pe-lightbox { padding: 12px; gap: 6px; }
  .pe-lightbox-nav { width: 38px; height: 38px; font-size: 1.3rem; }
  .pe-lightbox-close { top: 10px; right: 12px; }
}
.pe-property-body { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; }
/* Evita que la columna del sidebar (widget "Programa una visita") empuje el
   ancho de su columna de la cuadrícula más allá de lo disponible: sin esto,
   en celular el widget puede desbordarse hacia un costado y generar una
   franja blanca vacía. */
.pe-property-body > * { min-width: 0; }
.pe-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 20px; padding: 28px 0; margin-bottom: 20px; border-top: 1px solid var(--pe-gray-light); border-bottom: 1px solid var(--pe-gray-light); }
.pe-spec-grid div span { display: block; }
.pe-spec-grid .pe-spec-val { font-family: var(--pe-font-display); font-weight: 800; font-size: 1.4rem; color: var(--pe-black); }
.pe-spec-grid .pe-spec-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pe-gray); }
.pe-agent-contact-card { background: var(--pe-off-white); padding: 30px; border-radius: 18px; position: sticky; top: 100px; }
.pe-agent-contact-card .pe-thumb { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; }
.pe-agent-contact-card .pe-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Sección "Ponte en contacto" (al final de la página, ya no en el sidebar) */
.pe-agent-callout .pe-agent-contact-card { position: static; max-width: 420px; }

.pe-action-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* Sub-nav de la propiedad: una sola fila, pestañas ancla a la izquierda y
   botones de acción a la derecha, estilo Serhant. */
.pe-subnav {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  border-top: 1px solid var(--pe-gray-light); border-bottom: 1px solid var(--pe-gray-light);
  padding: 18px 0; margin-bottom: 0;
}
/* Sub-nav simplificado a 3 accesos (Índice de estilo de vida, Calculadora
   de crédito, Agenda una visita), como pastillas discretas: se nota que son
   botones (fondo + borde), pero sin ser circulares ni llamar demasiado la
   atención — el peso visual fuerte se lo dejamos a los CTA reales. */
.pe-anchor-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.pe-anchor-nav a,
.pe-anchor-nav button {
  display: inline-flex; align-items: center;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--pe-navy); white-space: nowrap;
  padding: 10px 18px; border-radius: var(--pe-radius-pill);
  background: var(--pe-off-white); border: 1px solid var(--pe-gray-light);
  font-family: inherit; cursor: pointer;
  transition: 150ms ease;
}
.pe-anchor-nav a:hover,
.pe-anchor-nav button:hover { background: var(--pe-navy); border-color: var(--pe-navy); color: var(--pe-white); text-decoration: none; }
.pe-info-block { margin-top: 48px; scroll-margin-top: 100px; }
/* Títulos de sección dentro de la ficha de propiedad ("Descripción general",
   "Características y servicios"...) — más grandes para diferenciarse del
   resto de la información. */
.pe-section-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; margin-bottom: 18px; }
#pe-descripcion-propiedad { scroll-margin-top: 100px; }
.pe-empty-note { color: var(--pe-gray); font-size: .92rem; }
.pe-kv-list { margin: 20px 0; }
.pe-kv-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--pe-gray-light); }
.pe-kv-list dt { font-size: .92rem; color: var(--pe-gray); margin: 0; }
.pe-kv-list dd { margin: 0; font-weight: 700; color: var(--pe-black); text-align: right; }

/* Aviso legal sobre precisión de los datos del inmueble (metraje,
   distribución, linderos...) — recuadro discreto, no una alerta, al final
   de los bloques de características de la ficha de propiedad. */
.pe-property-disclaimer {
  margin-top: 28px; padding: 16px 18px; background: var(--pe-cream);
  border-left: 3px solid var(--pe-gray-light); border-radius: 4px;
}
.pe-property-disclaimer p { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--pe-gray); }
.pe-amenities-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px; margin: 8px 0 0; }
.pe-amenities-list li { font-size: .9rem; color: var(--pe-black); padding-left: 22px; position: relative; }
.pe-amenities-list li::before { content: "✓"; position: absolute; left: 0; color: var(--pe-navy); font-weight: 700; }
.pe-content { font-size: 1rem; line-height: 1.75; color: var(--pe-black); max-width: 760px; }
.pe-content * { font-size: 1rem !important; line-height: 1.75 !important; }
.pe-content h1, .pe-content h2, .pe-content h3, .pe-content h4 { font-size: 1.2rem !important; font-family: var(--pe-font-display); font-weight: 800; }
/* El reset global de "ul" (list-style:none) deja las listas de texto libre
   (p.ej. política de privacidad, guías) sin viñetas ni espacio — se
   restablecen solo dentro de .pe-content, sin tocar el resto del sitio. */
.pe-content ul { list-style: disc; margin: 16px 0; padding-left: 24px; }
.pe-content li { margin-bottom: 8px; }


/* Índice de Estilo de Vida + Ubicación */
.pe-lifestyle-section { padding: 64px 0 72px; border-top: 1px solid var(--pe-gray-light); text-align: center; }
.pe-lifestyle-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.pe-lifestyle-head p { max-width: 480px; margin: 0 auto 32px; }
.pe-lifestyle-tabs { display: inline-flex; gap: 4px; background: var(--pe-off-white); padding: 6px; border-radius: 999px; margin-bottom: 36px; flex-wrap: wrap; justify-content: center; }
.pe-lifestyle-tabs button { border: 0; background: transparent; padding: 11px 22px; border-radius: 999px; font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--pe-gray); font-family: var(--pe-font-body); transition: 150ms ease; }
.pe-lifestyle-tabs button.is-active { background: var(--pe-white); color: var(--pe-navy); box-shadow: 0 2px 8px rgba(18,22,61,.14); }
.pe-lifestyle-panel { display: none; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.pe-lifestyle-panel.is-active { display: grid; }
.pe-lifestyle-card { border: 1px solid var(--pe-gray-light); border-radius: 16px; padding: 28px 22px; text-align: center; }
.pe-lifestyle-icon { width: 42px; height: 42px; margin: 0 auto 16px; color: var(--pe-navy); }
.pe-lifestyle-icon svg { width: 100%; height: 100%; }
.pe-lifestyle-card h4 { font-size: 1rem; margin-bottom: 10px; }
.pe-star-rating { position: relative; display: inline-flex; font-size: 1.05rem; letter-spacing: 3px; color: var(--pe-gray-light); }
.pe-star-rating-fg { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--pe-navy); }
.pe-lifestyle-note { font-size: .78rem; font-style: italic; color: var(--pe-gray); max-width: 640px; margin: 32px auto 0; }

/* Ubicación / mapa: sección propia con fondo azul marino (la de Estilo de
   Vida arriba se mantiene blanca). El texto de "Ubicación" queda en el ancho
   normal del contenido; el mapa se sale del contenedor y llega de esquina a
   esquina del navegador, estilo Serhant. */
.pe-location-full { background: var(--pe-navy); color: var(--pe-white); padding: 64px 0 0; text-align: left; }
.pe-map-info { max-width: 620px; text-align: left; }
.pe-map-info h3 { margin-bottom: 12px; color: var(--pe-white); }
.pe-map-info p { color: rgba(255,255,255,.7); }
.pe-map-approx-note { font-size: .82rem; color: rgba(255,255,255,.55); }
.pe-map-airport-note { font-size: .82rem; color: rgba(255,255,255,.75); margin-top: 4px; }
.pe-map-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 18px 0 22px; font-size: .78rem; color: rgba(255,255,255,.7); }
.pe-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pe-map-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* Franja del mapa: se sale del .pe-container a propósito (técnica estándar
   de "full-bleed") para llegar de esquina a esquina del navegador. */
.pe-map-full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 40px; }
.pe-map-illustration, .pe-map-embed { position: relative; overflow: hidden; background: var(--pe-cream); height: 460px; }
.pe-map-illustration svg { display: block; width: 100%; height: 100%; }
#pe-map-leaflet { width: 100%; height: 100%; background: var(--pe-cream); }
/* Mapa en escala de grises (solo las teselas del mapa base) — el círculo de
   3km que marca la zona aproximada se dibuja aparte, en color, para que se
   note claramente sobre el fondo gris. Leaflet separa las teselas y las
   figuras vectoriales en "panes" distintos del DOM, así que el filtro se
   puede limitar solo a las teselas. */
.pe-map-embed .leaflet-tile-pane { filter: grayscale(1); }
.pe-map-embed .leaflet-control-attribution { font-size: .62rem; }
/* Botones de zoom más grandes y visibles (los de Leaflet por defecto son
   chicos y se pierden sobre el mapa en grises). */
.pe-map-embed .leaflet-control-zoom { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(11,11,12,.22); }
.pe-map-embed .leaflet-control-zoom a {
  width: 42px; height: 42px; line-height: 42px;
  font-size: 1.5rem; font-weight: 700; color: var(--pe-black);
}
.pe-map-embed .leaflet-control-zoom a:hover { background: var(--pe-off-white); }
.pe-map-approx-label {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  background: rgba(255,255,255,.92); color: var(--pe-black);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding: 8px 14px; border-radius: var(--pe-radius-pill);
  box-shadow: 0 6px 16px rgba(11,11,12,.18);
}
/* Overlay que bloquea el mapa por defecto: así el scroll normal de la
   página nunca queda "atrapado" adentro. Solo se activa si el usuario hace
   clic a propósito, y vuelve a bloquearse al sacar el mouse del mapa (ver
   main.js), para que la próxima vez que se desplace por la página tampoco
   quede atrapado sin querer. */
.pe-map-activate-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,12,.06);
  border: 0; padding: 0; margin: 0; cursor: pointer;
  transition: opacity .2s ease;
}
.pe-map-activate-overlay span {
  background: var(--pe-white); color: var(--pe-black);
  font-size: .78rem; font-weight: 700;
  padding: 10px 20px; border-radius: var(--pe-radius-pill);
  box-shadow: 0 10px 26px rgba(11,11,12,.25);
}
.pe-map-embed.is-active .pe-map-activate-overlay { opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .pe-lifestyle-panel { grid-template-columns: 1fr; }
  .pe-map-illustration, .pe-map-embed { height: 360px; }
}
@media (max-width: 600px) {
  .pe-map-illustration, .pe-map-embed { height: 280px; }
  .pe-map-full { margin-top: 28px; }
}

/* ==========================================================================
   ÁREAS COMUNES (ficha de propiedad) — fotos de la Galería de fotos de la
   propiedad, a tamaño completo, bien juntas entre sí, en una fila que se
   desliza horizontalmente. Scroll nativo del navegador (sin gestos táctiles
   personalizados) para que no se buguee en celular, igual que "Los Mejores
   Proyectos" y "Casos de éxito".
   ========================================================================== */
.pe-amenity-scroll {
  margin-top: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pe-amenity-scroll::-webkit-scrollbar { display: none; height: 0; }
.pe-amenity-track {
  display: flex;
  gap: 6px;
  width: max-content;
  padding: 4px 24px 14px;
}
.pe-amenity-slide {
  flex: 0 0 400px;
  width: 400px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pe-gray-light);
  scroll-snap-align: start;
}
.pe-amenity-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
  .pe-amenity-slide { flex-basis: 240px; width: 240px; }
  .pe-amenity-track { gap: 8px; padding: 4px 20px 14px; }
}

/* ==========================================================================
   CALCULADORA DE CRÉDITO HIPOTECARIO / LEASING (ficha de propiedad)
   ========================================================================== */
.pe-mortgage-calc { background: var(--pe-off-white); border-radius: 20px; padding: 32px; }
.pe-mortgage-type-toggle { display: inline-flex; gap: 6px; background: var(--pe-white); padding: 5px; border-radius: var(--pe-radius-pill); margin-bottom: 26px; }
.pe-mortgage-type-toggle button {
  border: 0; background: transparent; padding: 10px 20px; border-radius: var(--pe-radius-pill);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--pe-gray); cursor: pointer; transition: var(--pe-transition);
}
.pe-mortgage-type-toggle button.is-selected { background: var(--pe-navy); color: var(--pe-white); }
.pe-mortgage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.pe-mortgage-field label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pe-gray); margin-bottom: 6px; }
.pe-mortgage-field input, .pe-mortgage-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--pe-gray-light); border-radius: 10px;
  background: var(--pe-white); font-family: var(--pe-font-body); font-size: .84rem; color: var(--pe-black);
}
.pe-mortgage-result {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--pe-navy); color: var(--pe-white); border-radius: 16px; padding: 24px 28px; margin-bottom: 18px;
}
.pe-mortgage-result-main { display: flex; flex-direction: column; gap: 4px; }
.pe-mortgage-result-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; opacity: .75; }
.pe-mortgage-result-value { font-family: var(--pe-font-display); font-size: 1.7rem; font-weight: 800; }
.pe-mortgage-result-breakdown { display: flex; gap: 28px; flex-wrap: wrap; }
.pe-mortgage-result-breakdown div { display: flex; flex-direction: column; gap: 2px; }
.pe-mortgage-result-breakdown dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.pe-mortgage-result-breakdown dd { font-family: var(--pe-font-display); font-size: .92rem; font-weight: 800; }
.pe-mortgage-note { font-size: .72rem; color: var(--pe-gray); margin-bottom: 0; }
/* Nota de diferencias por tipo de crédito: solo se muestra la que
   corresponde al botón seleccionado (hipotecario/leasing), ver main.js. */
.pe-mortgage-note[data-note] { margin-top: 6px; }
@media (max-width: 760px) {
  .pe-mortgage-calc { padding: 24px; }
  .pe-mortgage-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pe-mortgage-grid { grid-template-columns: 1fr; }
  .pe-mortgage-result { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   CALCULADORA DE GASTOS NOTARIALES (final del inicio y del listado de propiedades)
   ========================================================================== */
.pe-notarial-calc { background: var(--pe-off-white); border-radius: 20px; padding: 32px; }
.pe-notarial-type-toggle { display: inline-flex; gap: 6px; background: var(--pe-white); padding: 5px; border-radius: var(--pe-radius-pill); margin-bottom: 26px; }
.pe-notarial-type-toggle button {
  border: 0; background: transparent; padding: 10px 20px; border-radius: var(--pe-radius-pill);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--pe-gray); cursor: pointer; transition: var(--pe-transition);
}
.pe-notarial-type-toggle button.is-selected { background: var(--pe-navy); color: var(--pe-white); }
.pe-notarial-field { max-width: 360px; margin-bottom: 28px; }
.pe-notarial-field label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pe-gray); margin-bottom: 6px; }
.pe-notarial-field input,
.pe-notarial-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--pe-gray-light); border-radius: 10px;
  background: var(--pe-white); font-family: var(--pe-font-body); font-size: .84rem; color: var(--pe-black);
}
.pe-notarial-field select { cursor: pointer; }
.pe-notarial-role-fields[hidden] { display: none; }
.pe-notarial-financia {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px; cursor: pointer;
  font-size: .82rem; color: var(--pe-black); font-weight: 600;
}
.pe-notarial-financia input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pe-navy); cursor: pointer; }
.pe-notarial-credito-field { max-width: 360px; margin-bottom: 28px; }
.pe-notarial-credito-field[hidden] { display: none; }
.pe-notarial-credito-field label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pe-gray); margin-bottom: 6px; }
.pe-notarial-credito-field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--pe-gray-light); border-radius: 10px;
  background: var(--pe-white); font-family: var(--pe-font-body); font-size: .84rem; color: var(--pe-black);
}
.pe-notarial-result {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--pe-navy); color: var(--pe-white); border-radius: 16px; padding: 24px 28px; margin-bottom: 18px;
}
.pe-notarial-result-main { display: flex; flex-direction: column; gap: 4px; }
.pe-notarial-result-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; opacity: .75; }
.pe-notarial-result-value { font-family: var(--pe-font-display); font-size: 1.7rem; font-weight: 800; }
.pe-notarial-result-breakdown { display: flex; gap: 28px; flex-wrap: wrap; }
.pe-notarial-result-breakdown div { display: flex; flex-direction: column; gap: 2px; }
.pe-notarial-result-breakdown dt { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.pe-notarial-result-breakdown dd { font-family: var(--pe-font-display); font-size: .92rem; font-weight: 800; }
.pe-notarial-note { font-size: .72rem; color: var(--pe-gray); margin-bottom: 0; }
.pe-notarial-note-strong {
  font-size: .8rem; font-weight: 700; color: var(--pe-navy); margin-top: -6px; margin-bottom: 22px;
}
.pe-notarial-info { font-size: .78rem; color: var(--pe-gray); }
.pe-notarial-info summary { cursor: pointer; font-weight: 700; color: var(--pe-black); margin-bottom: 10px; }
.pe-notarial-info ul { margin: 0; padding-left: 20px; }
.pe-notarial-info li { margin-bottom: 8px; }
.pe-notarial-info li:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .pe-notarial-calc { padding: 24px; }
}
@media (max-width: 480px) {
  .pe-notarial-result { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   HERRAMIENTAS: acordeones plegables (calculadora de crédito y de gastos
   notariales) — mismo componente reutilizado en el inicio y en cada
   propiedad. Cerrados por defecto; el contenido se despliega hacia abajo con
   una animación de "grid-template-rows" (0fr → 1fr, ver pe-tools.js), que se
   adapta sola a cualquier alto de contenido sin medir nada por JS.
   ========================================================================== */
.pe-tools-section { scroll-margin-top: 100px; }
#pe-contacto { scroll-margin-top: 80px; }
.pe-tools-group { display: flex; flex-direction: column; gap: 14px; }
.pe-tool-accordion { scroll-margin-top: 100px; }

.pe-tool-accordion {
  border: 1px solid var(--pe-gray-light); border-radius: 18px; overflow: hidden;
  background: var(--pe-white); transition: box-shadow var(--pe-transition), border-color var(--pe-transition);
}
.pe-tool-accordion.is-open { border-color: transparent; box-shadow: 0 20px 44px rgba(11,11,12,.10); }
.pe-tool-accordion-heading { margin: 0; }

.pe-tool-accordion-toggle {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 20px 22px; background: none; border: 0; cursor: pointer;
  font-family: var(--pe-font-body); color: var(--pe-black); transition: background var(--pe-transition);
  -webkit-tap-highlight-color: transparent;
}
.pe-tool-accordion-toggle:hover { background: var(--pe-off-white); }
.pe-tool-accordion-toggle:focus-visible { outline: 2px solid var(--pe-navy); outline-offset: -2px; }

.pe-tool-accordion-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--pe-navy); color: var(--pe-white);
}
.pe-tool-accordion-icon svg { width: 22px; height: 22px; }

.pe-tool-accordion-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pe-tool-accordion-title { font-family: var(--pe-font-display); font-weight: 800; font-size: 1rem; line-height: 1.3; }
.pe-tool-accordion-subtitle { font-size: .8rem; color: var(--pe-gray); }

.pe-tool-accordion-chevron {
  flex-shrink: 0; width: 22px; height: 22px; color: var(--pe-gray);
  transition: transform var(--pe-transition);
}
.pe-tool-accordion.is-open .pe-tool-accordion-chevron { transform: rotate(180deg); color: var(--pe-navy); }

.pe-tool-accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms ease; }
.pe-tool-accordion.is-open .pe-tool-accordion-panel { grid-template-rows: 1fr; }
.pe-tool-accordion-inner { overflow: hidden; min-height: 0; }

@media (max-width: 480px) {
  .pe-tool-accordion-toggle { padding: 16px; gap: 12px; }
  .pe-tool-accordion-icon { width: 40px; height: 40px; }
  .pe-tool-accordion-icon svg { width: 19px; height: 19px; }
  .pe-tool-accordion-title { font-size: .92rem; }
  .pe-tool-accordion-subtitle { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-tool-accordion-panel, .pe-tool-accordion-chevron { transition: none; }
}

.pe-sidebar-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }

/* Un solo widget: "Agenda una visita" (azul marino, arriba) y la tarjeta del
   agente encargado (clara, abajo) ahora viven dentro del mismo contenedor
   redondeado, sin espacio ni sombra entre ellos — se ven y se sienten como
   un único bloque en vez de dos tarjetas separadas. */
.pe-sidebar-widget { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 48px rgba(11,11,12,.12); }
.pe-sidebar-widget .pe-tour-widget { border-radius: 0; }

/* Tarjeta compacta del agente encargado, ahora como la parte inferior del
   mismo widget de "Agenda una visita" — deliberadamente chica (foto pequeña
   + una fila de texto + iconos de contacto en vez de botones de ancho
   completo) para no competir por espacio con la parte de arriba. */
.pe-sidebar-agent { padding: 16px; }
.pe-sidebar-widget .pe-sidebar-agent { border-top: 1px solid var(--pe-gray-light); padding: 20px; }
.pe-sidebar-agent-info { display: flex; align-items: center; gap: 12px; }
.pe-sidebar-agent-thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--pe-gray-light); display: block;
}
.pe-sidebar-agent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-sidebar-agent-text { display: flex; flex-direction: column; min-width: 0; }
.pe-sidebar-agent-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--pe-gray); }
.pe-sidebar-agent-name { font-family: var(--pe-font-display); font-size: .96rem; font-weight: 800; color: var(--pe-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-sidebar-agent-role { font-size: .74rem; color: var(--pe-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-sidebar-agent-actions { display: flex; gap: 8px; margin-top: 14px; }
.pe-sidebar-agent-actions a,
.pe-sidebar-agent-actions button {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  height: 38px;
  border: 1px solid var(--pe-gray-light); border-radius: 10px;
  color: var(--pe-navy);
  background: none;
  font: inherit;
  cursor: pointer;
  transition: var(--pe-transition);
}
.pe-sidebar-agent-actions a:hover,
.pe-sidebar-agent-actions button:hover { background: var(--pe-navy); color: var(--pe-white); border-color: var(--pe-navy); }
.pe-sidebar-agent-actions svg { width: 17px; height: 17px; }

/* Widget "Agendar una visita" en el sidebar, junto a la Descripción — fondo
   azul marino con texto blanco, estilo Serhant (antes iba en una sección
   aparte de ancho completo; ahora vive dentro del sidebar). */
.pe-tour-widget { background: var(--pe-navy); color: var(--pe-white); border-radius: 18px; padding: 28px; }
.pe-tour-widget h4 { margin-bottom: 6px; color: var(--pe-white); }
.pe-tour-intro { font-size: .88rem; margin-bottom: 20px; color: rgba(255,255,255,.7); }
.pe-tour-widget > [data-tour-open] { width: 100%; justify-content: center; }
.pe-tour-widget .pe-btn:not(.pe-btn-dark-outline) { background: var(--pe-white); color: var(--pe-navy); border-color: var(--pe-white); }
.pe-tour-widget .pe-btn:not(.pe-btn-dark-outline):hover { background: var(--pe-off-white); }
.pe-tour-widget .pe-btn-dark-outline { background: transparent; color: var(--pe-white); border-color: rgba(255,255,255,.4); }
.pe-tour-widget .pe-btn-dark-outline:hover { background: rgba(255,255,255,.12); color: var(--pe-white); }
.pe-tour-panel { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; }
.pe-tour-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: rgba(255,255,255,.65); margin: 18px 0 10px; }
.pe-tour-label:first-child { margin-top: 0; }
.pe-tour-dates-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 24px; }
.pe-tour-date-list { display: flex; gap: 10px; flex: 1; overflow-x: auto; min-width: 0; }
/* Tarjetas de fecha: fondo transparente + borde blanco (no rellenas), estilo
   Serhant — solo 3 visibles a la vez, más grandes y simples. */
.pe-tour-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; min-width: 0; padding: 16px 6px; border: 1.5px solid rgba(255,255,255,.55);
  background: transparent; border-radius: 12px; cursor: pointer; font-family: var(--pe-font-body);
  transition: var(--pe-transition);
}
.pe-tour-date:hover { border-color: var(--pe-white); }
.pe-tour-date-dow { font-size: .72rem; color: rgba(255,255,255,.8); }
.pe-tour-date-num { font-family: var(--pe-font-display); font-weight: 800; font-size: 1.8rem; color: var(--pe-white); line-height: 1.25; margin: 2px 0; }
.pe-tour-date-mon { font-size: .72rem; color: rgba(255,255,255,.8); }
.pe-tour-date.is-selected { background: var(--pe-white); border-color: var(--pe-white); }
.pe-tour-date.is-selected .pe-tour-date-dow,
.pe-tour-date.is-selected .pe-tour-date-num,
.pe-tour-date.is-selected .pe-tour-date-mon { color: var(--pe-navy); }
.pe-tour-nav {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent;
  cursor: pointer; flex-shrink: 0; font-size: 1.1rem; color: var(--pe-white);
}
.pe-tour-nav:hover { background: rgba(255,255,255,.12); }
/* Selector de hora: un <select> simple estilo píldora, en vez de la
   cuadrícula de botones anterior — más compacto, estilo Serhant. */
.pe-tour-select-wrap { position: relative; margin-bottom: 24px; }
.pe-tour-hour-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 999px; color: var(--pe-white); font-family: var(--pe-font-body);
  font-size: .92rem; font-weight: 600; padding: 15px 42px 15px 20px; cursor: pointer;
}
.pe-tour-hour-select option { color: var(--pe-black); }
.pe-tour-select-wrap::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
/* Selector "En persona / Mediante videollamada" en píldora, estilo Serhant —
   reemplaza los radios anteriores. */
.pe-tour-toggle {
  display: flex; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 5px; gap: 4px; margin-bottom: 24px;
}
.pe-tour-toggle button {
  flex: 1; background: transparent; border: 0; border-radius: 999px; padding: 11px 14px;
  font-family: var(--pe-font-body); font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.75);
  cursor: pointer; transition: var(--pe-transition); text-align: center;
}
.pe-tour-toggle button.is-selected { background: var(--pe-white); color: var(--pe-navy); }
.pe-tour-widget [data-tour-next]:disabled { opacity: .4; cursor: not-allowed; }
#pe-tour-form input { margin-bottom: 12px; border-radius: var(--pe-radius-pill); padding: 12px 16px; border: 1px solid transparent; font-family: var(--pe-font-body); }
.pe-tour-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .74rem; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.pe-tour-consent a { text-decoration: underline; color: var(--pe-white); }
.pe-tour-error { color: #ff8a80; font-size: .8rem; margin-bottom: 10px; }
.pe-tour-thankyou-msg { font-size: .92rem; color: var(--pe-white); margin-bottom: 20px; }
@media (max-width: 860px) {
  .pe-sidebar-widget { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 600px) {
  /* Versión compacta del widget "Agenda una visita" + agente encargado en
     celular: menos relleno y letras más pequeñas para que no se vea
     sobredimensionado en pantallas angostas. */
  .pe-tour-widget { padding: 20px; }
  .pe-tour-widget h4 { font-size: 1.15rem; }
  .pe-tour-intro { font-size: .82rem; margin-bottom: 16px; }
  .pe-tour-panel { margin-top: 18px; padding-top: 18px; }
  .pe-tour-date-num { font-size: 1.5rem; }
  .pe-tour-date { padding: 12px 4px; }
  .pe-tour-hour-select { padding: 13px 38px 13px 16px; font-size: .86rem; }
  .pe-tour-toggle button { padding: 9px 10px; font-size: .76rem; }
  .pe-sidebar-widget .pe-sidebar-agent { padding: 16px; }
}

.pe-agent-hero { display: grid; grid-template-columns: 340px 1fr; gap: 50px; align-items: center; }
.pe-agent-hero .pe-thumb { aspect-ratio: 3/4; overflow: hidden; background: var(--pe-gray-light); border-radius: 14px; }
.pe-agent-hero .pe-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-agent-social { display: flex; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.pe-agent-social a { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; border-bottom: 1px solid var(--pe-white); }

/* ==========================================================================
   14b. CALCULADORAS DE INVERSIÓN (Cap Rate / ROI / TIR)
   Página: page-templates/page-calculadoras-inversion.php
   Render: inc/calculadoras-inversion.php (pe_render_calculadora_inversion)
   Comportamiento: assets/js/calculadoras-inversion.js
   ========================================================================== */
.pe-calc-section { scroll-margin-top: 100px; }

.pe-calc {
  background: var(--pe-off-white); border-radius: 24px; padding: 28px;
  box-shadow: 0 1px 2px rgba(11,11,12,.04);
}

/* ==========================================================================
   SHELL — barra lateral de navegación + panel principal, como una
   aplicación de escritorio en vez de una página con pestañas arriba. La
   barra lateral solo cambia de qué pestaña está activa (misma lógica de
   siempre en JS: .pe-calc-tab / data-tab); aquí solo se reubica y se viste.
   ========================================================================== */
.pe-calc-shell { display: flex; align-items: flex-start; gap: 24px; }

.pe-calc-sidebar {
  flex: 0 0 232px; width: 232px; align-self: stretch;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 18px;
  padding: 18px 14px; box-shadow: 0 2px 10px rgba(11,11,12,.05);
  position: sticky; top: 96px;
}
.pe-calc-sidebar-titulo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pe-font-display); font-weight: 800; font-size: .86rem; color: var(--pe-black);
  padding: 4px 8px 14px; border-bottom: 1px solid var(--pe-gray-light);
}
.pe-calc-sidebar-icono {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px; background: var(--pe-navy); color: var(--pe-white);
}
.pe-calc-sidebar-icono svg { width: 17px; height: 17px; }

.pe-calc-tabs { display: flex; flex-direction: column; gap: 4px; background: transparent; padding: 0; border-radius: 0; }
.pe-calc-tab {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: transparent; padding: 10px 12px; border-radius: 12px;
  text-align: left; cursor: pointer; transition: var(--pe-transition); font-family: var(--pe-font-body);
}
.pe-calc-tab-icono {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px; background: var(--pe-off-white); color: var(--pe-gray);
  transition: var(--pe-transition);
}
.pe-calc-tab-icono svg { width: 17px; height: 17px; }
.pe-calc-tab-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pe-calc-tab-label { font-size: .8rem; font-weight: 700; color: var(--pe-black); }
.pe-calc-tab-sub { font-size: .68rem; color: var(--pe-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-calc-tab:hover .pe-calc-tab-icono { background: var(--pe-gray-light); color: var(--pe-navy); }
.pe-calc-tab.is-selected { background: var(--pe-navy); }
.pe-calc-tab.is-selected .pe-calc-tab-icono { background: rgba(255,255,255,.16); color: var(--pe-white); }
.pe-calc-tab.is-selected .pe-calc-tab-label { color: var(--pe-white); }
.pe-calc-tab.is-selected .pe-calc-tab-sub { color: rgba(255,255,255,.72); }

/* --- Barra superior del panel principal: solo el interruptor "Modo
   avanzado", con apariencia de switch en vez de casilla suelta. --- */
.pe-calc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.pe-calc-toolbar { display: flex; justify-content: flex-end; }
.pe-calc-modo-toggle {
  display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600;
  color: var(--pe-black); cursor: pointer; background: var(--pe-white); border: 1px solid var(--pe-gray-light);
  padding: 8px 14px 8px 8px; border-radius: var(--pe-radius-pill);
}
.pe-calc-switch { position: relative; display: inline-flex; width: 38px; height: 22px; flex-shrink: 0; }
.pe-calc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.pe-calc-switch-riel {
  position: absolute; inset: 0; background: var(--pe-gray-light); border-radius: var(--pe-radius-pill);
  transition: var(--pe-transition);
}
.pe-calc-switch-riel::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pe-white); box-shadow: 0 1px 3px rgba(11,11,12,.25); transition: var(--pe-transition);
}
.pe-calc-switch input:checked + .pe-calc-switch-riel { background: var(--pe-navy); }
.pe-calc-switch input:checked + .pe-calc-switch-riel::before { transform: translateX(16px); }
.pe-calc-switch input:focus-visible + .pe-calc-switch-riel { outline: 2px solid var(--pe-navy); outline-offset: 2px; }

/* Primero todo el formulario (de arriba hacia abajo), y debajo los
   resultados — en vez de dos columnas lado a lado, que se sentía enredado
   al tener que leer formulario e resultados al mismo tiempo. */
.pe-calc-layout { display: flex; flex-direction: column; gap: 36px; }

/* --- Formulario --- */
/* Con todo el ancho disponible (ya no una columna angosta de 380px), las
   secciones se acomodan en varias columnas cuando hay espacio y caen a una
   sola columna en pantallas angostas — sin dejar el formulario como una
   tira larga y vacía de campos angostos. */
/* Multi-columna en vez de grid: con grid, todas las fieldsets de una misma
   fila quedan tan altas como la más alta (p. ej. "Venta e impuestos" con
   muchos campos), dejando huecos vacíos al lado en las columnas más cortas
   y un layout desnivelado. Con column-count + break-inside:avoid, cada
   fieldset fluye a la columna con más espacio libre (como un "masonry"),
   así que las 3 columnas terminan parejas. */
.pe-calc-form { column-count: 3; column-gap: 22px; min-width: 0; }
.pe-calc-seccion {
  display: block; break-inside: avoid; width: 100%; margin-bottom: 22px;
  border: 1px solid var(--pe-gray-light); border-radius: 16px; padding: 22px 20px 18px;
  background: var(--pe-white); box-shadow: 0 1px 2px rgba(11,11,12,.03);
}
/* El <legend> nativo del fieldset se deja solo para lectores de pantalla
   (queda con .screen-reader-text): un <legend> real, aunque se le ponga
   display:block, sigue haciendo que el navegador le recorte un hueco al
   borde superior del fieldset a su medida — con esquinas redondeadas eso
   se veía como un mordisco feo en el borde. El título visible de verdad es
   este div de abajo, sin nada de la magia especial de <legend>/<fieldset>,
   con el mismo tratamiento de "ícono + texto" que los ítems del menú
   lateral (Cap Rate / ROI / TIR), para que todo el formulario se sienta
   como un solo sistema de menús. */
.pe-calc-seccion-titulo {
  display: flex; align-items: center; gap: 10px; padding: 0 0 14px; margin: 0 0 16px;
  border-bottom: 1px solid var(--pe-gray-light);
}
.pe-calc-seccion-icono {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px; background: var(--pe-off-white); color: var(--pe-navy);
}
.pe-calc-seccion-icono svg { width: 16px; height: 16px; }
.pe-calc-seccion-titulo-texto {
  font-family: var(--pe-font-display); font-weight: 800; font-size: .95rem; color: var(--pe-black);
}
.pe-calc-seccion-nota { font-size: .74rem; color: var(--pe-gray); margin: -6px 0 14px; }
.pe-calc-seccion > .pe-calc-field,
.pe-calc-seccion > .pe-calc-credito-detalle { margin-bottom: 14px; }
.pe-calc-seccion > .pe-calc-field:last-child,
.pe-calc-seccion > .pe-calc-credito-detalle:last-child { margin-bottom: 0; }

.pe-calc-field label {
  display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--pe-gray); margin-bottom: 6px;
}
.pe-calc-field input[type="text"],
.pe-calc-field input[type="number"],
.pe-calc-field input[type="tel"],
.pe-calc-field input[type="email"],
.pe-calc-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--pe-gray-light); border-radius: 10px;
  background: var(--pe-white); font-family: var(--pe-font-body); font-size: .84rem; color: var(--pe-black);
  transition: var(--pe-transition);
}
.pe-calc-field input:focus,
.pe-calc-field select:focus {
  outline: none; border-color: var(--pe-navy); box-shadow: 0 0 0 3px rgba(30,90,168,.14);
}
.pe-calc-field select { cursor: pointer; }
.pe-calc-requerido { color: var(--pe-calc-rojo); }
.pe-calc-field-ayuda { font-size: .7rem; color: var(--pe-gray); margin: 6px 0 0; }
.pe-calc-field-error { font-size: .72rem; color: var(--pe-calc-rojo); margin: 6px 0 0; font-weight: 600; }
.pe-calc-field-error[hidden] { display: none; }

.pe-calc-pct-wrap { position: relative; }
.pe-calc-pct-wrap input { padding-right: 34px; }
.pe-calc-pct-signo {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: .8rem; color: var(--pe-gray); pointer-events: none;
}

.pe-calc-checkbox {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: .82rem; color: var(--pe-black); font-weight: 600;
}
.pe-calc-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pe-navy); cursor: pointer; flex-shrink: 0; }

/* El modo rápido/avanzado y el despliegue de los campos de financiación se
   controlan con estilo en línea desde el JS (aplicarModo()/aplicarCredito()
   en calculadoras-inversion.js: el mismo elemento puede estar marcado
   data-modo="avanzado" o data-credito-detalle) — aquí solo el espaciado. */
.pe-calc-credito-detalle { margin-top: 4px; }

.pe-calc-mejoras { margin-top: 4px; }
.pe-calc-mejoras-titulo { font-size: .74rem; font-weight: 700; color: var(--pe-gray); margin-bottom: 10px; }
.pe-calc-mejoras-filas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pe-calc-mejora-fila { display: grid; grid-template-columns: 90px 1fr 32px; gap: 8px; align-items: center; }
.pe-calc-mejora-fila input {
  padding: 10px 12px; border: 1px solid var(--pe-gray-light); border-radius: 10px;
  font-family: var(--pe-font-body); font-size: .82rem; color: var(--pe-black); width: 100%;
}
.pe-calc-mejora-quitar {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--pe-gray-light);
  background: var(--pe-white); color: var(--pe-gray); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.pe-calc-mejora-quitar:hover { border-color: var(--pe-calc-rojo); color: var(--pe-calc-rojo); }

.pe-calc-btn-link {
  border: 0; background: none; padding: 0; color: var(--pe-navy); font-weight: 700;
  font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--pe-font-body);
}

/* --- Resultados --- */
.pe-calc-resultados { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pe-calc-panel[hidden] { display: none; }
.pe-calc-panel { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* Un hijo de flex-column no se encoge más allá del ancho de su contenido a
   menos que se le diga explícitamente — sin esto, la tabla de flujos
   (white-space: nowrap) empuja todo el layout más ancho que la pantalla en
   vez de solo activar su propio scroll horizontal (pe-calc-tabla-scroll). */
.pe-calc-resultados > *,
.pe-calc-panel > * { min-width: 0; }

/* Breve resumen de "para qué sirve esta herramienta" al tope de cada pestaña
   de resultados (Cap Rate / ROI y flujo / TIR y venta). */
.pe-calc-panel-intro {
  background: var(--pe-calc-gris-bg, var(--pe-off-white)); border-radius: 14px; padding: 16px 20px;
}
.pe-calc-panel-intro p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--pe-black); }
.pe-calc-panel-intro strong { font-family: var(--pe-font-display); }

/* Glosario colapsable (¿Qué significa cada término?) dentro de un panel. */
.pe-calc-glosario {
  background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 14px; padding: 14px 20px;
}
.pe-calc-glosario summary {
  cursor: pointer; font-family: var(--pe-font-display); font-weight: 800; font-size: .84rem; color: var(--pe-navy);
  padding: 4px 0; list-style: none;
}
.pe-calc-glosario summary::-webkit-details-marker { display: none; }
.pe-calc-glosario summary::before { content: '+ '; }
.pe-calc-glosario[open] summary::before { content: '− '; }
.pe-calc-glosario dl { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.pe-calc-glosario dt { font-family: var(--pe-font-display); font-weight: 800; font-size: .8rem; color: var(--pe-black); }
.pe-calc-glosario dd { margin: 4px 0 0; font-size: .82rem; line-height: 1.55; color: var(--pe-gray); }

.pe-calc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pe-calc-card {
  background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  border-left: 4px solid var(--pe-gray-light);
  box-shadow: 0 1px 2px rgba(11,11,12,.03); transition: var(--pe-transition);
}
.pe-calc-card:hover { box-shadow: 0 4px 14px rgba(11,11,12,.07); transform: translateY(-1px); }
.pe-calc-card--verde { border-left-color: var(--pe-calc-verde); background: var(--pe-calc-verde-bg); }
.pe-calc-card--amarillo { border-left-color: var(--pe-calc-amarillo); background: var(--pe-calc-amarillo-bg); }
.pe-calc-card--rojo { border-left-color: var(--pe-calc-rojo); background: var(--pe-calc-rojo-bg); }
.pe-calc-card--gris { border-left-color: var(--pe-gray); background: var(--pe-calc-gris-bg); }
.pe-calc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-calc-card-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--pe-gray); }
.pe-calc-card-valor { font-family: var(--pe-font-display); font-size: 1.3rem; font-weight: 800; color: var(--pe-black); }
.pe-calc-card-info {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--pe-gray-light);
  background: var(--pe-white); color: var(--pe-gray); font-size: .68rem; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pe-calc-card-info:hover { border-color: var(--pe-navy); color: var(--pe-navy); }

.pe-calc-desglose {
  grid-column: 1 / -1; background: var(--pe-white); border: 1px solid var(--pe-gray-light);
  border-radius: 14px; padding: 18px 20px;
}
.pe-calc-desglose h4 { font-size: .82rem; font-weight: 800; margin-bottom: 12px; }
.pe-calc-desglose dl { display: grid; gap: 8px; margin: 0; }
.pe-calc-desglose dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .84rem; }
.pe-calc-desglose dt { color: var(--pe-gray); }
.pe-calc-desglose dd { margin: 0; font-family: var(--pe-font-display); font-weight: 700; color: var(--pe-black); text-align: right; }

/* Lista simple "de dónde sale/a dónde se va la plata" — un renglón por
   concepto, como un recibo. Reemplaza el gráfico de cascada (barras
   flotantes) porque ese formato no se entendía; una lista de restas es
   universalmente conocida (cualquiera sabe leer un recibo). */
.pe-calc-desglose-lista { display: grid; gap: 10px; margin: 0; }
.pe-calc-desglose-lista > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .84rem; }
.pe-calc-desglose-lista dt { color: var(--pe-gray); }
.pe-calc-desglose-lista dd { margin: 0; font-family: var(--pe-font-display); font-weight: 700; color: var(--pe-black); text-align: right; }
.pe-calc-desglose-lista-total { padding-top: 10px; border-top: 1px solid var(--pe-gray-light); }
.pe-calc-desglose-lista-total dt, .pe-calc-desglose-lista-total dd { color: var(--pe-black); font-weight: 800; }

.pe-calc-aviso {
  border-radius: 10px; padding: 12px 16px; font-size: .82rem; font-weight: 600; line-height: 1.5;
  background: var(--pe-calc-gris-bg); color: var(--pe-black);
}
.pe-calc-aviso--verde { background: var(--pe-calc-verde-bg); color: var(--pe-calc-verde); }
.pe-calc-aviso--amarillo { background: var(--pe-calc-amarillo-bg); color: var(--pe-calc-amarillo); }
.pe-calc-aviso--rojo { background: var(--pe-calc-rojo-bg); color: var(--pe-calc-rojo); }
.pe-calc-aviso--gris { background: var(--pe-calc-gris-bg); color: var(--pe-gray); }
.pe-calc-explicacion { display: flex; flex-direction: column; gap: 10px; }
.pe-calc-ia-explicacion {
  background: var(--pe-white); border: 1px dashed var(--pe-navy); border-radius: 10px;
  padding: 14px 16px; font-size: .84rem; line-height: 1.6; color: var(--pe-black);
}

.pe-calc-chart-wrap { background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 14px; padding: 18px 20px; }
.pe-calc-chart-wrap h4 { font-size: .82rem; font-weight: 800; margin-bottom: 12px; }
.pe-calc-chart { width: 100%; overflow-x: auto; }
.pe-calc-chart svg { display: block; max-width: 100%; height: auto; }
.pe-calc-chart-nota { font-size: .72rem; color: var(--pe-gray); margin: 10px 0 0; }
.pe-calc-chart-vacio { font-size: .82rem; color: var(--pe-gray); margin: 0; }

.pe-calc-tabla-wrap { background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 14px; padding: 18px 20px; }
.pe-calc-tabla-wrap h4 { font-size: .82rem; font-weight: 800; margin-bottom: 12px; }
.pe-calc-tabla-scroll { overflow-x: auto; margin-bottom: 12px; }
.pe-calc-tabla { width: 100%; border-collapse: collapse; font-size: .8rem; white-space: nowrap; }
.pe-calc-tabla th, .pe-calc-tabla td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--pe-gray-light); }
.pe-calc-tabla th:first-child, .pe-calc-tabla td:first-child { text-align: left; }
.pe-calc-tabla thead th {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pe-gray);
  font-weight: 700; background: var(--pe-off-white);
}
/* Primera columna (año) fija al hacer scroll horizontal en pantallas angostas. */
.pe-calc-tabla th:first-child, .pe-calc-tabla td:first-child {
  position: sticky; left: 0; background: var(--pe-white); z-index: 1;
}
.pe-calc-tabla thead th:first-child { background: var(--pe-off-white); }

.pe-calc-yque { background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 14px; padding: 18px 20px; }
.pe-calc-yque h4 { font-size: .92rem; font-weight: 800; margin-bottom: 10px; }
.pe-calc-yque-intro { font-size: .8rem; line-height: 1.5; color: var(--pe-gray); margin: 0 0 18px; }
.pe-calc-slider { margin-bottom: 18px; }
.pe-calc-slider:last-of-type { margin-bottom: 10px; }
.pe-calc-slider label {
  display: flex; justify-content: space-between; font-size: .76rem; font-weight: 700;
  color: var(--pe-gray); margin-bottom: 8px;
}
.pe-calc-slider label output { color: var(--pe-navy); font-family: var(--pe-font-display); }
.pe-calc-slider input[type="range"] { width: 100%; accent-color: var(--pe-navy); cursor: pointer; }

.pe-calc-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
/* .pe-btn-outline es texto blanco pensado para fondos oscuros (hero, navy) —
   aquí los botones van sobre el fondo claro de la calculadora, así que se
   redefine el estilo "outline" localmente (igual look que pe-btn-dark-outline). */
.pe-calc-acciones .pe-btn-outline {
  background: transparent; color: var(--pe-navy); border-color: var(--pe-navy);
}
.pe-calc-acciones .pe-btn-outline:hover { background: var(--pe-navy); color: var(--pe-white); }
.pe-calc-disclaimer { font-size: .72rem; color: var(--pe-gray); margin: 0; }

/* --- Modal de captura de lead --- */
.pe-calc-modal[hidden] { display: none; }
.pe-calc-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pe-calc-modal-fondo { position: absolute; inset: 0; background: rgba(11,11,12,.55); }
.pe-calc-modal-caja {
  position: relative; background: var(--pe-white); border-radius: 18px; padding: 32px;
  max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 30px 60px rgba(11,11,12,.3);
}
.pe-calc-modal-caja h3 { margin-bottom: 8px; }
.pe-calc-modal-caja > p { font-size: .86rem; color: var(--pe-gray); margin-bottom: 20px; }
.pe-calc-modal-caja .pe-calc-field { margin-bottom: 14px; }
.pe-calc-modal-cerrar {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--pe-gray-light); background: var(--pe-white); color: var(--pe-gray);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.pe-calc-consentimiento { font-size: .74rem; color: var(--pe-gray); align-items: flex-start; margin-bottom: 18px; }
.pe-calc-consentimiento input { margin-top: 2px; }
.pe-calc-consentimiento a { color: var(--pe-navy); text-decoration: underline; }
.pe-calc-modal-error { color: var(--pe-calc-rojo); font-size: .8rem; margin-bottom: 14px; font-weight: 600; }
.pe-calc-modal-error[hidden] { display: none; }

/* --- Comparador de propiedades --- */
.pe-calc-comparador-vacio { font-size: .92rem; color: var(--pe-gray); margin-bottom: 18px; }
.pe-calc-comparador-scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--pe-gray-light); border-radius: 14px; }
.pe-calc-comparador-tabla { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--pe-white); }
.pe-calc-comparador-tabla th, .pe-calc-comparador-tabla td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--pe-gray-light); white-space: nowrap; }
.pe-calc-comparador-tabla th:first-child, .pe-calc-comparador-tabla td:first-child { text-align: left; font-weight: 700; white-space: normal; }
.pe-calc-comparador-tabla thead th {
  font-family: var(--pe-font-display); font-weight: 800; font-size: .88rem; background: var(--pe-off-white);
}
.pe-calc-comparador-ciudad { font-size: .7rem; font-weight: 400; color: var(--pe-gray); }
.pe-calc-comparador-mejor { background: var(--pe-calc-verde-bg); color: var(--pe-calc-verde); font-weight: 800; }
.pe-calc-comparador-badge {
  display: inline-block; margin-left: 4px; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--pe-calc-verde); color: var(--pe-white); padding: 2px 6px; border-radius: var(--pe-radius-pill);
  vertical-align: middle;
}
.pe-calc-comparador-alerta { color: var(--pe-calc-rojo); font-weight: 700; }

@media (max-width: 980px) {
  .pe-calc-form { column-count: 2; }
}
@media (max-width: 660px) {
  .pe-calc-form { column-count: 1; }
}

/* --- En tablet/celular la barra de pestañas ya no flota abajo: las
   calculadoras se eligen desde el menú "Herramientas" (botón flotante abajo a
   la izquierda, ver inc/herramientas.php). La barra fija se veía sobre toda la
   página —incluso con el bloque cerrado— y confundía con los otros menús. --- */
@media (max-width: 860px) {
  .pe-calc-shell { flex-direction: column; gap: 0; }
  .pe-calc-sidebar { display: none; }
  /* Espacio para que el botón flotante no tape el último botón/tarjeta. */
  .pe-calc-main { padding-bottom: 88px; }
}
@media (max-width: 760px) {
  .pe-calc { padding: 22px 18px; }
  .pe-calc-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pe-calc-mejora-fila { grid-template-columns: 74px 1fr 32px; }
}
@media (max-width: 480px) {
  .pe-calc-cards { grid-template-columns: 1fr 1fr; }
  .pe-calc-card-valor { font-size: 1.08rem; } /* en 2 columnas angostas, montos largos ("$ 16.808.500") no caben en una línea a 1.3rem */
  .pe-calc-acciones { flex-direction: column; }
  .pe-calc-acciones .pe-btn { width: 100%; justify-content: center; }
  .pe-calc-modal-caja { padding: 24px; }
}

/* ==========================================================================
   15. PAGINACIÓN, EMPTY STATES, UTILS
   ========================================================================== */
.pe-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 50px; }
.pe-pagination a, .pe-pagination span { padding: 10px 16px; border: 1px solid var(--pe-gray-light); font-size: .85rem; border-radius: var(--pe-radius-pill); }
.pe-pagination .current { background: var(--pe-navy); color: var(--pe-white); border-color: var(--pe-navy); }
.pe-empty { padding: 60px 0; text-align: center; color: var(--pe-gray); }

/* Resultados de búsqueda (search.php): accesos rápidos a Ubicaciones y
   Redes sociales, como pastillas — el mismo tratamiento discreto que ya
   usa .pe-anchor-nav en la ficha de propiedad. */
.pe-search-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pe-search-chip {
  display: inline-flex; align-items: center;
  font-size: .82rem; font-weight: 700; color: var(--pe-navy);
  padding: 10px 20px; border-radius: var(--pe-radius-pill);
  background: var(--pe-off-white); border: 1px solid var(--pe-gray-light);
  transition: var(--pe-transition);
}
.pe-search-chip:hover { background: var(--pe-navy); border-color: var(--pe-navy); color: var(--pe-white); }

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .pe-nav { gap: 22px; }
  .pe-nav a { font-size: .84rem; }
  .pe-header-actions .pe-phone { display: none; }
}
@media (max-width: 860px) {
  .pe-nav { display: none; }
  .pe-header-actions .pe-btn { display: none; }
  .pe-footer-grid { grid-template-columns: 1fr 1fr; }
  .pe-property-body { grid-template-columns: 1fr; }
  .pe-agent-contact-card { position: static; }
  .pe-sidebar-sticky { position: static; }
  .pe-agent-hero { grid-template-columns: 1fr; }

  /* Galería en tablet/móvil: la foto principal arriba a ancho completo y las
     4 miniaturas (la última con "+N Fotos / Ver todas las fotos") en una
     fila debajo — ya no se ocultan ni quedan desalineadas. Un pequeño
     padding arriba evita que la foto principal quede pegada/cortada contra
     el encabezado. */
  .pe-gallery-section { padding: 10px 0 0; }
  .pe-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    gap: 4px;
  }
  .pe-gallery > :first-child { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
  .pe-gallery > a.pe-gallery-item:not(:first-child) { grid-row: 2; aspect-ratio: 1 / 1; }
  .pe-gallery-mobile-cta { display: none; }
}
@media (max-width: 600px) {
  .pe-footer-grid { grid-template-columns: 1fr; }
  .pe-form-grid { grid-template-columns: 1fr; }
  .pe-section { padding: 58px 0; }
  /* En celular el título va en hasta 2 renglones (no en 1 como en
     computador — no entraría) — por eso se anula aquí el "nowrap" de
     arriba. El subtítulo se hace bastante más chico y angosto que antes
     para que quede como un bloque compacto y centrado debajo, y el título
     sea claramente lo primero que se lee. */
  .pe-hero h1 {
    font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; max-width: 360px;
    white-space: normal; text-overflow: clip; overflow: visible; text-wrap: balance;
  }
  .pe-hero-sub { font-size: .9rem; max-width: 300px; margin-top: 10px; }
  .pe-hero-tabs a { padding: 7px 14px; font-size: .86rem; }
  .pe-single-hero { padding: 40px 0 28px; }
  .pe-single-hero h1 { font-size: 1.7rem; }
  .pe-single-hero .pe-price { font-size: 1.6rem; }
  .pe-property-summary { padding: 20px 0 24px; margin-bottom: 24px; }
  .pe-subnav { flex-direction: column; align-items: stretch; gap: 14px; }
  .pe-action-row { flex-direction: column; }
  .pe-action-row .pe-btn { width: 100%; justify-content: center; }
  .pe-anchor-nav { gap: 16px; overflow-x: auto; }
  .pe-media-promo-inner { padding: 32px 24px; }
  .pe-media-promo-inner h2 { font-size: 1.7rem; }


}

/* Menú de las tres rayitas (rediseño 10 oct 2026).
   Celular: pantalla completa. Computador (>860px): panel lateral derecho de
   420px con fondo oscurecido, para no tapar toda la página. */
.pe-mn-backdrop {
  display: none; position: fixed; inset: 0; z-index: 199;
  background: rgba(8, 20, 45, .55);
}
.pe-mn-backdrop.is-open { display: block; }
.pe-mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  height: 100vh; height: 100dvh;
  background: var(--pe-header-bg); color: var(--pe-white);
  padding: 20px 22px 28px; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pe-mobile-nav.is-open { display: flex; flex-direction: column; }
.pe-mobile-nav > * { flex-shrink: 0; }
@media (min-width: 861px) {
  .pe-mobile-nav { left: auto; width: 420px; max-width: 100%; box-shadow: -18px 0 50px rgba(0,0,0,.25); }
  .pe-mobile-nav.is-open { animation: pe-mn-in .28s cubic-bezier(.22,.68,0,1) both; }
}
@keyframes pe-mn-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pe-mobile-nav.is-open { animation: none; } }
.pe-mobile-nav a { color: var(--pe-white); text-decoration: none; }
.pe-mn-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; }
.pe-mn-title { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pe-mn-top-actions { display: flex; align-items: center; gap: 10px; }
.pe-mn-main { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.14); }
.pe-mn-main a { display: block; padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,.14); }
.pe-mn-main strong { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.pe-mn-main span { display: block; margin-top: 3px; font-size: .86rem; color: rgba(255,255,255,.72); }
.pe-mn-main a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.pe-mn-block { padding: 18px 0 4px; }
.pe-mn-label { display: block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.pe-mn-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pe-mobile-nav a.pe-mn-chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 42px; padding: 8px 10px; font-size: .86rem; font-weight: 700;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  transition: background .2s ease;
}
.pe-mobile-nav a.pe-mn-chip:hover { background: rgba(255,255,255,.2); }
.pe-mobile-nav a.pe-mn-more { display: inline-block; margin-top: 12px; font-size: .86rem; font-weight: 700; color: rgba(255,255,255,.9); }
.pe-mn-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.pe-mn-links a { display: block; padding: 10px 0; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.88); }
.pe-mn-links a:hover { color: var(--pe-white); text-decoration: underline; text-underline-offset: 4px; }
.pe-mobile-nav a.pe-mn-wa {
  display: flex; align-items: center; justify-content: center;
  margin-top: auto; min-height: 50px; padding: 12px 18px;
  background: #25D366; color: #08311a; border-radius: 999px;
  font-weight: 800; font-size: .98rem;
}
.pe-mn-links { margin-bottom: 22px; }
.pe-mobile-nav .pe-lang-switch { margin: 0; }
/* Íconos de redes sociales (Instagram, YouTube, TikTok, LinkedIn) — círculos
   con borde, mismo tratamiento visual que el resto de botones del menú. */
.pe-social-icons { display: flex; gap: 10px; }
/* Selector reforzado (.pe-mobile-nav .pe-social-icons a en vez de solo
   .pe-social-icons a) para ganarle siempre a la regla genérica ".pe-mobile-nav a"
   sin depender del orden en que aparezcan en el archivo. */
.pe-mobile-nav .pe-social-icons a,
.pe-social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); color: var(--pe-white);
  padding: 0; text-transform: none; letter-spacing: 0; font-size: 1rem;
}
.pe-social-icons a svg { width: 18px; height: 18px; }
.pe-social-icons a:hover { background: rgba(255,255,255,.12); }
.pe-mobile-nav-social { margin-top: 20px; padding-bottom: 12px; }
.pe-mobile-nav-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  width: 42px; height: 42px;
  color: var(--pe-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   Botón flotante de WhatsApp (todo el sitio)
   ========================================================================== */
.pe-wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 150; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .2s ease; }
.pe-wa-float:hover { transform: scale(1.06); color: #fff; }
.pe-wa-float:focus-visible { outline: 3px solid #7fb0ff; outline-offset: 3px; }
/* Las páginas Vender y Marketing ya traen su propio botón: no mostrar dos. */
body:has(.mv-wa-float) .pe-wa-float { display: none; }
/* Que no tape modales, el bloqueo de scroll ni el portal. */
body.pe-scroll-lock .pe-wa-float { display: none; }
@media (max-width: 600px) {
  .pe-wa-float { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .pe-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .pe-footer-bottom a { margin: 0 9px; display: inline-block; padding: 6px 0; }
}
@media print { .pe-wa-float { display: none; } }

/* ==========================================================================
   Calculadoras de inversión — modo paso a paso (assets/js/calc-wizard.js)
   ========================================================================== */
.pe-wz .pe-calc-form { column-count: 1 !important; max-width: 660px; width: 100%; margin: 0 auto; }
.pe-wz .pe-calc-seccion.pe-wz-off { display: none !important; }
.pe-wz .pe-calc-seccion {
  background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 22px;
  padding: 28px 28px 24px; box-shadow: 0 14px 36px rgba(11,11,12,.07); margin: 0;
  animation: peWzIn .28s ease;
}
@keyframes peWzIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pe-wz .pe-calc-seccion-titulo { margin-bottom: 18px; }
.pe-wz .pe-calc-seccion-titulo-texto { font-family: var(--pe-font-display); font-size: 1.25rem; font-weight: 800; color: var(--pe-black); }
.pe-wz .pe-calc-seccion-icono { width: 40px; height: 40px; border-radius: 12px; }
.pe-wz .pe-calc-seccion > .pe-calc-field, .pe-wz .pe-calc-seccion > .pe-calc-credito-detalle { margin-bottom: 20px; }
.pe-wz .pe-calc-field label { font-size: .78rem; letter-spacing: .03em; color: var(--pe-black); margin-bottom: 8px; }
.pe-wz .pe-calc-field input[type="text"], .pe-wz .pe-calc-field input[type="number"],
.pe-wz .pe-calc-field input[type="tel"], .pe-wz .pe-calc-field input[type="email"], .pe-wz .pe-calc-field select {
  padding: 15px 16px; font-size: 1rem; border-radius: 14px; background: var(--pe-off-white); border-color: transparent;
}
.pe-wz .pe-calc-field input:focus, .pe-wz .pe-calc-field select:focus { background: var(--pe-white); border-color: var(--pe-navy); }
.pe-wz .pe-calc-field-ayuda { font-size: .8rem; line-height: 1.5; }
.pe-wz .pe-calc-field-error { font-size: .8rem; }
.pe-wz .pe-calc-field:not(.pe-wz-touched) .pe-calc-field-error { display: none !important; }

.pe-wz-head { max-width: 660px; width: 100%; margin: 0 auto 18px; }
.pe-wz-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pe-wz-calc strong { display: block; font-family: var(--pe-font-display); font-size: 1.05rem; color: var(--pe-black); }
.pe-wz-calc span { display: block; font-size: .8rem; color: var(--pe-gray); }
.pe-wz-count { font-size: .78rem; font-weight: 700; color: var(--pe-navy); background: rgba(30,90,168,.1); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.pe-wz-bar { height: 6px; background: var(--pe-gray-light); border-radius: 99px; overflow: hidden; }
.pe-wz-bar i { display: block; height: 100%; width: 0; background: var(--pe-navy); border-radius: 99px; transition: width .35s ease; }
.pe-wz-dots { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pe-wz-dots::-webkit-scrollbar { display: none; }
.pe-wz-dots li { flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: var(--pe-gray); background: var(--pe-white); border: 1px solid var(--pe-gray-light); border-radius: 999px; padding: 5px 11px; }
.pe-wz-dots li.is-done { color: var(--pe-navy); border-color: rgba(30,90,168,.35); cursor: pointer; }
.pe-wz-dots li.is-done::before { content: "✓ "; }
.pe-wz-dots li.is-now { color: var(--pe-white); background: var(--pe-navy); border-color: var(--pe-navy); }

.pe-wz-nav { max-width: 660px; width: 100%; margin: 4px auto 0; display: flex; gap: 12px; }
.pe-wz-nav button {
  flex: 1; border: 0; border-radius: 16px; padding: 16px 18px; font-family: var(--pe-font-body);
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: var(--pe-transition);
}
.pe-wz-back { background: var(--pe-off-white); color: var(--pe-black); flex: 0 0 34% !important; }
.pe-wz-back:disabled { opacity: .45; cursor: default; }
.pe-wz-next { background: var(--pe-navy); color: var(--pe-white); box-shadow: 0 10px 22px rgba(30,90,168,.28); }
.pe-wz-next:hover { background: var(--pe-navy-deep); }
.pe-wz-next.is-final { background: var(--pe-calc-verde); box-shadow: 0 10px 22px rgba(47,125,82,.28); }

.pe-wz:not(.pe-wz-is-res) .pe-calc-resultados { display: none !important; }
.pe-wz.pe-wz-is-res .pe-calc-form, .pe-wz.pe-wz-is-res .pe-wz-nav { display: none !important; }
.pe-wz-reshead {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--pe-navy); color: var(--pe-white); border-radius: 20px; padding: 18px 22px;
}
.pe-wz-reslabel { display: block; font-size: .75rem; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.pe-wz-restitle { font-family: var(--pe-font-display); font-size: 1.25rem; }
.pe-wz-resbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-wz-resbtns button { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: var(--pe-white); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.pe-wz-resbtns button:hover { background: rgba(255,255,255,.2); }
.pe-calc-sidebar.pe-wz-pulse { box-shadow: 0 0 0 4px rgba(30,90,168,.35), 0 10px 28px rgba(11,11,12,.18); }

@media (max-width: 860px) {
  .pe-wz-nav { position: sticky; bottom: 92px; z-index: 50; background: rgba(243,241,234,.92); backdrop-filter: blur(8px); padding: 10px; border-radius: 20px; }
  .pe-wz .pe-calc-seccion { padding: 22px 18px 18px; border-radius: 18px; }
  .pe-wz-head { margin-bottom: 14px; }
}
/* Calculadoras paso a paso: que nada se salga de la pantalla en celular. */
@media (max-width: 860px) {
  .pe-calc-shell { align-items: stretch !important; }
  .pe-calc-main { width: 100%; max-width: 100%; min-width: 0; }
  .pe-wz-head, .pe-wz-nav, .pe-calc-layout, .pe-calc-form, .pe-calc-toolbar { max-width: 100%; min-width: 0; }
  .pe-wz .pe-calc-seccion { min-width: 0; }
}
@media (max-width: 760px) {
  .pe-calc.pe-wz { padding: 16px 12px; }
  .pe-wz .pe-calc-seccion { padding: 20px 16px 16px; }
}
/* Celular: la página nunca se desplaza hacia los lados.
   "clip" no rompe los elementos fijos/pegajosos (sticky); en navegadores
   viejos que no lo soportan se usa "hidden". */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
/* Selector de idioma (Polylang) */
.pe-lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55); color: #fff !important; font-weight: 700;
  font-size: .8rem; letter-spacing: .04em; text-decoration: none !important; margin-right: 8px;
}
.pe-lang-switch:hover { background: rgba(255,255,255,.15); }


/* ==========================================================================
   Menú "Herramientas" (botón flotante abajo a la izquierda, todo el sitio)
   ========================================================================== */
.pe-hm { position: fixed; left: 18px; bottom: 18px; z-index: 150; }
.pe-hm-fab {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pe-header-bg, var(--pe-navy)); color: #fff;
  font-family: var(--pe-font-body); font-size: .86rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(11,11,12,.28); transition: transform .2s ease, box-shadow .2s ease;
}
.pe-hm-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.pe-hm-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11,11,12,.32); }
.pe-hm-fab:focus-visible { outline: 3px solid rgba(30,90,168,.45); outline-offset: 3px; }
.pe-hm.is-open .pe-hm-fab { box-shadow: 0 0 0 4px rgba(30,90,168,.22), 0 10px 30px rgba(11,11,12,.28); }

.pe-hm-backdrop {
  position: fixed; inset: 0; z-index: -1; background: rgba(11,11,12,.38);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.pe-hm.is-open .pe-hm-backdrop { opacity: 1; visibility: visible; }

.pe-hm-panel {
  position: absolute; left: 0; bottom: 70px; width: 348px; max-width: calc(100vw - 36px);
  max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--pe-white); color: var(--pe-black); border-radius: 24px; padding: 14px 12px 12px;
  box-shadow: 0 24px 60px rgba(11,11,12,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: bottom left;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.pe-hm.is-open .pe-hm-panel { opacity: 1; visibility: visible; transform: none; }
.pe-hm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 4px 8px 12px; }
.pe-hm-head strong { display: block; font-family: var(--pe-font-display); font-size: 1.05rem; font-weight: 800; }
.pe-hm-head span { font-size: .78rem; color: var(--pe-gray); }
.pe-hm-close { border: 0; background: var(--pe-off-white); width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--pe-gray); cursor: pointer; flex-shrink: 0; }
.pe-hm-close:hover { background: var(--pe-gray-light); color: var(--pe-black); }
.pe-hm-group { padding-top: 6px; }
.pe-hm-label { display: block; padding: 8px 10px 6px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pe-gray); }
.pe-hm-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; color: var(--pe-black); transition: background .15s ease; }
.pe-hm-item:hover, .pe-hm-item:focus-visible { background: var(--pe-off-white); outline: none; }
.pe-hm-ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; background: rgba(30,90,168,.10); color: var(--pe-navy); }
.pe-hm-ico svg { width: 20px; height: 20px; }
.pe-hm-item:hover .pe-hm-ico { background: var(--pe-navy); color: #fff; }
.pe-hm-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pe-hm-txt strong { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.pe-hm-txt span { font-size: .75rem; color: var(--pe-gray); line-height: 1.3; }
.pe-hm-go { font-size: 1.3rem; color: var(--pe-gray); line-height: 1; }
@media (max-width: 600px) {
  .pe-hm { left: 12px; bottom: 12px; }
  .pe-hm-fab { height: 50px; padding: 0 18px 0 14px; }
  .pe-hm-panel { position: fixed; left: 12px; right: 12px; bottom: 74px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pe-hm-fab, .pe-hm-panel, .pe-hm-backdrop { transition: none; }
}
/* El botón flotante "Herramientas" (y el de WhatsApp) no deben tapar el final del pie de página. */
@media (max-width: 860px) {
  .pe-footer { padding-bottom: 88px; }
}

/* ==========================================================================
   LEGAL — casillas de aceptación, aviso de cookies y páginas legales (v2.5.0)
   ========================================================================== */
.pe-legal { margin-top: 20px; }
.pe-legal-aviso { font-size: .76rem; line-height: 1.55; color: var(--pe-gray); margin: 0 0 12px; }
.pe-legal-aviso a, .pe-legal-check a { text-decoration: underline; color: inherit; }
.pe-section-dark .pe-legal-aviso { color: rgba(255,255,255,.62); }
.pe-section-dark .pe-legal-check a { color: var(--pe-white); }
.pe-form .pe-legal .pe-form-consent { margin-top: 10px; }
.pe-form .pe-legal .pe-form-consent:first-of-type { margin-top: 0; }
.pe-legal-opcional em { font-style: normal; opacity: .65; }
/* Newsletter: el texto va alineado a la izquierda aunque la sección esté centrada. */
.pe-newsletter .pe-legal { text-align: left; max-width: 620px; margin: 16px auto 18px; }
.pe-newsletter .pe-form .pe-form-consent { background: var(--pe-white); }
/* Calculadora (modal) */
.pe-legal-calc { margin: 6px 0 18px; }
.pe-legal-calc .pe-legal-aviso { color: var(--pe-gray); }
.pe-legal-calc .pe-calc-consentimiento { margin-bottom: 10px; font-weight: 500; line-height: 1.5; }
/* Visita (panel azul) */
.pe-legal-tour { margin: 4px 0 10px; }
.pe-legal-tour .pe-tour-consent { margin-bottom: 10px; line-height: 1.5; }
#pe-tour-form .pe-legal input[type="checkbox"] {
  flex-shrink: 0; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; border-radius: 3px; accent-color: var(--pe-white);
}
/* Pie de página */
.pe-footer-legal a { margin-left: 18px; }
@media (max-width: 860px) { .pe-footer-legal a { margin: 0 9px; display: inline-block; padding: 6px 0; } }

/* Aviso de cookies */
.pe-cookies {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 170;
  width: min(760px, calc(100% - 28px)); box-sizing: border-box;
  display: flex; gap: 18px; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-radius: 16px;
  background: var(--pe-black-soft); color: rgba(255,255,255,.88);
  box-shadow: 0 14px 40px rgba(0,0,0,.35); font-size: .82rem; line-height: 1.5;
}
.pe-cookies[hidden] { display: none; }
.pe-cookies p { margin: 0; flex: 1; }
.pe-cookies strong { color: var(--pe-white); margin-right: 4px; }
.pe-cookies a { color: var(--pe-white); text-decoration: underline; }
.pe-cookies-btns { display: flex; gap: 10px; flex-shrink: 0; }
.pe-cookies-btn {
  border-radius: var(--pe-radius-pill); padding: 10px 18px; font-size: .8rem; font-weight: 700; cursor: pointer;
  font-family: var(--pe-font-body); border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--pe-white);
  transition: var(--pe-transition); white-space: nowrap;
}
.pe-cookies-btn:hover { background: rgba(255,255,255,.12); }
.pe-cookies-btn.pe-cookies-todas { background: var(--pe-white); color: var(--pe-navy-deep); border-color: var(--pe-white); }
.pe-cookies-btn.pe-cookies-todas:hover { background: var(--pe-off-white); }
@media (max-width: 640px) {
  .pe-cookies { flex-direction: column; align-items: stretch; bottom: 10px; padding: 14px 16px; gap: 12px; }
  .pe-cookies-btns { justify-content: stretch; }
  .pe-cookies-btn { flex: 1; }
}

/* Páginas legales */
.pe-legal-doc .pe-legal-meta { color: var(--pe-gray); font-size: .85rem; margin: 0 0 18px; }
.pe-legal-doc .pe-legal-indice { background: var(--pe-off-white); border-radius: 14px; padding: 18px 22px; margin: 0 0 30px; }
.pe-legal-doc .pe-legal-indice ol { margin: 10px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.pe-legal-doc .pe-legal-indice li { margin-bottom: 4px; break-inside: avoid; }
.pe-legal-doc .pe-legal-indice a { text-decoration: none; }
.pe-legal-doc .pe-legal-indice a:hover { text-decoration: underline; }
.pe-legal-doc h2.pe-section-title { margin-top: 34px; scroll-margin-top: 110px; }
.pe-legal-doc a { color: var(--pe-navy); text-decoration: underline; }
.pe-legal-doc code { background: var(--pe-off-white); padding: 1px 6px; border-radius: 4px; }
.pe-legal-tabla-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--pe-gray-light); border-radius: 12px; }
.pe-legal-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
.pe-legal-tabla th, .pe-legal-tabla td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--pe-gray-light); }
.pe-legal-tabla th { background: var(--pe-off-white); font-weight: 700; }
.pe-legal-tabla tr:last-child td { border-bottom: 0; }
.pe-legal-admin-nota { background: #fff7e0; border: 1px solid #f0d58a; border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; color: #6b5200; }
@media (max-width: 640px) { .pe-legal-doc .pe-legal-indice ol { columns: 1; } }