/* ============================================
   IMPORTS Y VARIABLES
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* Colores de estado. Estaban sueltos por el archivo: #b02a37 escrito a mano
       en tres sitios, el ámbar en un style= inline y el verde solo dentro del
       botón de WhatsApp. Aquí quedan con nombre para poder reutilizarlos. */
    --rojo:  #b02a37;
    --ambar: #e0a800;
    --verde: #1da851;
    /* Versiones OSCURAS para texto. Las de arriba son para fondos, bordes e
       iconos, donde basta 3:1; como color de texto sobre blanco se quedan muy
       cortas (el celeste da 2.3:1, el ámbar 2.15:1). Estas pasan el 4.5:1 que
       exige el texto normal y son las que usa el panel de administración. */
    --azul-texto-suave: #1f6d82; /* 5.9:1 — sustituye a --azulSecundario en texto */
    --ambar-texto: #8a6500;      /* 5.3:1 */
    --verde-texto: #14803d;      /* 5.0:1 */
    --tipografia: "Nunito", sans-serif;
    --tipografia2: "Poppins", sans-serif;
    --blanco: white;
    --azul: #006690;
    --azulSecundario: #50b8d1;
    --negro: rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --border-radius-sm: 12px;
    --border-radius-md: 20px;
    --border-radius-lg: 30px;
    --border-radius-xl: 40px;
}

/* ============================================
   BASE Y LAYOUT
   ============================================ */
body {
    background: var(--blanco);
    overflow-x: hidden;
}
main {
    padding-top: 8%;
}
body.home-page main {
    padding-top: 0;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
.texto {
    font-family: var(--tipografia2);
    color: var(--azul);
    font-weight: 200;
    font-size: 20px;
    line-height: 1.6;
}
.titulos {
    font-family: var(--tipografia);
    color: var(--azul);
    font-size: clamp(1.2rem, 3vw, 2.1rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.titulos-seccion {
    font-family: var(--tipografia);
    color: var(--azulSecundario);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 500;
    margin-bottom: 1rem;
}
.texto-lead {
    font-family: var(--tipografia2);
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 200;
    line-height: 1.4;
}

/* ============================================
   DIVISOR DECORATIVO
   ============================================ */
.divisor-personalizado {
    width: 20%;
    height: 4px;
    background: var(--azulSecundario);
    border: none;
    margin: 2rem auto;
    border-radius: 4px;
    transition: width var(--transition-base);
}
.divisor-personalizado:hover {
    width: 120px;
}
body.home-page main > div.divisor-personalizado:first-of-type {
    width: 45%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--azulSecundario), transparent);
}

/* ============================================
   BOTONES
   ============================================ */
.btnMejorado {
    font-family: var(--tipografia);
    font-size: clamp(1rem, 3vw, 1.3rem);
    background: var(--blanco);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 2rem;
    transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    border: 2px solid transparent;
    font-weight: 500;
    display: inline-block;
    text-align: center;
}
.btnMejorado:hover {
    background: var(--azul);
    color: var(--blanco);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   CARDS Y IMÁGENES
   ============================================ */
.servicio-card {
    background: var(--blanco);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    position: relative;
}
.servicio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}
.servicio-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

/* Anclas bajo la navegación fija: que el destino no quede tapado al saltar */
#servicios,
#solicitar-asesoria,
#contactar,
.servicio-card[id] {
    scroll-margin-top: 110px;
}

/* .icono a secas no lo lleva hoy ningún elemento, pero se conserva a propósito:
   los nombres de icono llegan desde la base de datos y desde campos EDITABLES
   del panel (includes/ficha-detalles.php los pinta como class="bi <?= $icono ?>"),
   así que un valor mal capturado podría reintroducir la clase. */
.icono {
    color: var(--azulSecundario);
    transition: transform var(--transition-base);
    font-size: 30px;
}
.icono:hover {
    transform: scale(1.1);
}

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
    animation: fadeInUp 0.8s ease forwards;
}

/* Formulario: envío con animación */
@keyframes formEnviadoEntrada {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes formCheckPop {
    from { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    to { transform: scale(1); opacity: 1; }
}
.form-enviado-exito {
    text-align: center;
    padding: 1.5rem 1rem;
    animation: formEnviadoEntrada 0.55s cubic-bezier(0.22, 0.9, 0.35, 1) both;
}
.form-enviado-exito .bi-check-circle-fill {
    display: inline-block;
    font-size: 3.2rem;
    color: var(--azulSecundario);
    animation: formCheckPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

/* Selector de "¿Cómo desea ser contactado?" como chips interactivos */
.medio-contacto-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.medio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.medio-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.55rem 1.15rem;
    border-radius: 50px;
    border: 1.5px solid rgba(0, 102, 144, 0.25);
    color: var(--azul);
    background: var(--blanco);
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.medio-chip:hover { border-color: var(--azulSecundario); transform: translateY(-2px); }
.medio-input:checked + .medio-chip {
    background: var(--azul);
    color: var(--blanco);
    border-color: var(--azul);
    transform: scale(1.06);
    box-shadow: var(--shadow-md);
}
.medio-input:focus-visible + .medio-chip {
    outline: 2px solid var(--azulSecundario);
    outline-offset: 2px;
}

/* "Hablemos de su propiedad" (inicio.php): encapsulado */
.cierre-contacto-card {
    background: rgba(80, 184, 209, 0.05);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-xl);
    padding: 3rem 2.5rem;
}

/* Vías directas de contacto (contacto.php): van en la columna de al lado del
   formulario, apiladas y en horizontal. Toda la tarjeta es un enlace, así que
   el ícono se invierte al pasar el cursor para marcar que es accionable. */
.contacto-lateral {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
}
/* El rótulo hereda de .titulos-seccion un font-size de hasta 1.25rem, casi el
   mismo que el título de abajo: el encabezado crecía a 74px y empujaba las
   tarjetas hacia el fondo de la columna. Aquí va como sobretítulo pequeño,
   así el bloque queda compacto y pegado a su contenido. */
.contacto-lateral-encabezado { margin-bottom: 0.35rem; }
.contacto-lateral-encabezado .titulos-seccion {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

/* Tarjeta de cobertura que cierra la columna. No es un enlace, así que va con
   fondo azul sólido en vez de blanco: remata la columna y la distingue de las
   tres tarjetas accionables de arriba. */
.contacto-cobertura {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: auto;
    padding: 1.05rem 1.25rem;
    background: linear-gradient(150deg, var(--azul) 0%, #004d6e 100%);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}
.contacto-cobertura-icono {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.contacto-cobertura-icono i { font-size: 1.1rem; color: #ffffff; }
.contacto-cobertura-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contacto-cobertura-titulo {
    font-family: var(--tipografia2);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--azulSecundario);
}
.contacto-cobertura-texto {
    font-family: var(--tipografia2);
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

/* WhatsApp con su verde de marca: es la vía que más se busca y así se
   distingue de un golpe entre las tres tarjetas. */
.contacto-card-whatsapp .contacto-card-icono {
    background: rgba(37, 211, 102, 0.14);
    border-color: rgba(37, 211, 102, 0.4);
}
.contacto-card-whatsapp .contacto-card-icono i { color: #1da851; }
.contacto-card-whatsapp:hover { border-color: #25d366; }
.contacto-card-whatsapp:hover .contacto-card-icono { background: #1da851; }
.contacto-card-whatsapp:hover .contacto-card-icono i { color: #ffffff; }
.contacto-card-whatsapp:hover .contacto-card-flecha { color: #1da851; }
/* Mientras el número siga siendo de relleno, el aviso va en ámbar. La clase la
   pone PHP según WHATSAPP_ES_FICTICIO (en vez de :has(), que no soportan todos
   los navegadores). */
/* Doble clase a propósito: .contacto-card-nota se define más abajo en este
   archivo y con una sola clase ganaría por orden. */
.contacto-card-nota.contacto-card-nota-alerta { color: #8a6508; }
.contacto-card-nota.contacto-card-nota-alerta i { color: #b8860b; }

.contacto-card {
    background: var(--blanco);
    border: 1.5px solid rgba(80, 184, 209, 0.4);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.contacto-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--azulSecundario);
}
/* Variante en fila: ícono a la izquierda, datos al centro, flecha al final */
.contacto-card-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}
.contacto-card-icono {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(80, 184, 209, 0.12);
    border: 1px solid rgba(0, 102, 144, 0.15);
    transition: background-color var(--transition-base);
}
.contacto-card-icono i {
    font-size: 1.4rem;
    color: var(--azulSecundario);
    transition: color var(--transition-base);
}
.contacto-card:hover .contacto-card-icono { background: var(--azul); }
.contacto-card:hover .contacto-card-icono i { color: var(--blanco); }
.contacto-card-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.contacto-card-titulo {
    font-family: var(--tipografia2);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--azulSecundario);
}
.contacto-card-dato {
    font-family: var(--tipografia);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--azul);
    line-height: 1.3;
}
/* El correo es la cadena más larga de la tarjeta: administracion@videjo.mx son
   24 caracteres y a 0.98rem se partía en dos renglones en móvil, dejando una
   sola letra colgando en el segundo ("...videjo.m" / "x"), que se lee como un
   error del sitio.
   Se resuelve con clamp() en vez de una media query: el tamaño se encoge solo
   entre 320px y 480px de ancho y vuelve a 0.98rem en cuanto hay sitio, así que
   sigue valiendo aunque el correo cambie otra vez por uno más largo.
   El word-break se queda como red de seguridad: si algún día no cupiera ni
   así, es preferible que parta a que desborde la tarjeta. */
.contacto-card-dato-correo {
    font-size: clamp(0.8rem, 3.4vw, 0.98rem);
    word-break: break-word;
}
.contacto-card-nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-family: var(--tipografia2);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--azulSecundario);
}
.contacto-card-flecha {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--azulSecundario);
    opacity: 0.5;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.contacto-card:hover .contacto-card-flecha { opacity: 1; transform: translateX(3px); }
@keyframes spinnerGirar {
    to { transform: rotate(360deg); }
}
.spinner-enviar {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinnerGirar 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: -2px;
}
.btn-enviando { opacity: 0.75; pointer-events: none; }

/* ============================================
   NAVEGACIÓN
   ============================================ */
.navegacion {
    position: fixed;
    width: 100%;
    background: var(--blanco);
    z-index: 1600;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.navegacion .container-fluid {
    display: flex;
    align-items: center;
}
.navegacion .navbar,
.navegacion .navbar-nav,
.navegacion .nav-item {
    margin-left: 0;
}
.navegacion .navbar-nav.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.navegacion .navbar-nav.mx-auto .nav-item {
    margin: 0 0.35rem;
}
.navegacion .nav-contacto {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Botones del menú */
.nav-btn {
    position: relative;
    font-family: var(--tipografia2);
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.1rem !important;
    margin: 0 0.25rem;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
    letter-spacing: 0.4px;
    color: var(--azul);
}
.nav-btn:hover {
    color: var(--azulSecundario) !important;
    background: rgba(0, 102, 144, 0.1);
    transform: translateY(-2px);
}
.nav-btn.colorNav,
.nav-btn.active {
    color: var(--azulSecundario) !important;
    background: rgba(80, 184, 209, 0.16);
}

/* Botón Contacto */
.nav-contacto { margin-left: 1rem; }
.nav-btn-contacto {
    display: inline-flex !important;
    align-items: center;
    background: rgba(0, 102, 144, 0.08) !important;
    border: 1.5px solid rgba(0, 102, 144, 0.25);
    color: var(--azul) !important;
    padding: 0.55rem 1.3rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    font-family: var(--tipografia2);
    font-size: 1rem !important;
}
.nav-btn-contacto:hover {
    background: var(--azul) !important;
    color: white !important;
    border-color: var(--azul);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.nav-btn-contacto i { font-size: 0.95rem; }

/* Menú transparente en portada */
body.home-page .navegacion {
    background: transparent;
    box-shadow: none;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
body.home-page .navegacion.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
body.home-page .navegacion:not(.scrolled) .nav-btn {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 20, 40, 0.55);
}
body.home-page .navegacion:not(.scrolled) .nav-btn:hover {
    color: #d6f2fb !important;
    background: rgba(255, 255, 255, 0.15);
}
body.home-page .navegacion:not(.scrolled) .nav-btn.colorNav,
body.home-page .navegacion:not(.scrolled) .nav-btn.active {
    color: #9be1f7 !important;
    background: rgba(255, 255, 255, 0.12);
}
body.home-page .navegacion:not(.scrolled) .nav-btn-contacto {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15) !important;
    text-shadow: 0 1px 4px rgba(0, 20, 40, 0.55);
}
body.home-page .navegacion:not(.scrolled) .nav-btn-contacto:hover {
    background: #ffffff !important;
    color: var(--azul) !important;
    text-shadow: none;
}
body.home-page .navegacion:not(.scrolled) .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
body:not(.home-page) .navegacion {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Logo */
.logo-img { transition: filter 0.4s ease, width 0.4s ease; }
body:not(.home-page) .logo-img,
body.home-page .navegacion.scrolled .logo-img { mix-blend-mode: multiply; }
body.home-page .navegacion:not(.scrolled) .logo-img {
    filter: brightness(0) invert(1);
    mix-blend-mode: normal;
}

/* Dropdown de Propiedades */
.nav-dropdown { position: relative; }
.nav-dropdown .dropdown-toggle::after {
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s ease;
}
.nav-dropdown:hover .dropdown-toggle::after,
.nav-dropdown.show .dropdown-toggle::after {
    opacity: 1;
    transform: rotate(180deg);
}
.dropdown-propiedades {
    position: absolute !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 102, 144, 0.15);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xl);
    padding: 0.6rem 0.4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-dropdown:hover .dropdown-propiedades,
.nav-dropdown.show .dropdown-propiedades {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown-header-small {
    font-family: var(--tipografia2);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--azulSecundario);
    padding: 0.6rem 1rem 0.3rem;
    display: flex;
    align-items: center;
}
.dropdown-propiedades .dropdown-item {
    font-family: var(--tipografia2);
    font-size: 0.92rem;
    color: var(--azul);
    padding: 0.55rem 1rem;
    border-radius: 8px;
    margin: 0 0.3rem;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.dropdown-propiedades .dropdown-item i {
    color: var(--azulSecundario);
    font-size: 1rem;
    width: 18px;
}
.dropdown-propiedades .dropdown-item:hover {
    background: rgba(0, 102, 144, 0.1);
    color: var(--azul);
    transform: translateX(3px);
}
.dropdown-item-ver-todas {
    background: rgba(80, 184, 209, 0.1) !important;
    font-weight: 600;
    justify-content: space-between;
    margin-top: 0.4rem !important;
    padding: 0.6rem 1rem !important;
}
.dropdown-item-ver-todas:hover {
    background: var(--azul) !important;
    color: white !important;
    transform: scale(1.02) !important;
}
.dropdown-item-ver-todas:hover i { color: white; }
.dropdown-divider-custom {
    height: 1px;
    background: rgba(0, 102, 144, 0.12);
    margin: 0.4rem 1rem;
}

/* ============================================
   HERO DE /NOSOTROS (FOTO + OVERLAY)
   ============================================ */
.nosotros-hero,
.servicios-hero {
    margin: 1.5rem clamp(12px, 3vw, 40px) 0;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}
.nosotros-hero {
    background-image: url('/IMG/fondo-nosotros.jpg');
    background-size: cover;
    background-position: center;
}
/* Mismo velo de color de marca que el hero de inicio (.hero-overlay):
   tiñe la foto en vez de dejarla cruda, sin recurrir a desenfoque. */
.nosotros-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0, 102, 144, 0.55) 0%, rgba(80, 184, 209, 0.5) 100%);
    z-index: 1;
}

/* ============================================
   HERO DE /ACTIVIDADES (FOTO + VELO CLARO)
   ============================================ */
/* El encuadre se sube al 32%: la foto trae un marco de ventana oscuro que
   cruza a ~72% de su altura, y con 'center' ese marco caía justo en el borde
   inferior del hero (que es corto y ancho) mientras las cabezas quedaban
   cortadas arriba. A 32% se ve la banda de luz y las siluetas, y el marco
   oscuro queda fuera del recorte.
   background-size NO se toca: sigue en cover. */
.servicios-hero {
    background-image: url('/IMG/fondo-servicios.jpg');
    background-size: cover;
    background-position: center 32%;
}
/* Velo oscuro sobre la foto para que el texto blanco se lea. Se aligeró de
   0.62/0.48 a 0.42/0.30: deja ver mucho más la fotografía y el título sigue
   legible gracias a su text-shadow. Si en alguna foto el texto costara leerse,
   estos dos valores son los que hay que subir. */
.servicios-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0, 25, 40, 0.42) 0%, rgba(0, 25, 40, 0.30) 100%);
    z-index: 1;
}

/* ============================================
   PÁGINA /SERVICIOS
   Espaciado generoso (80px entre secciones) y un solo estilo de tarjeta.
   ============================================ */
.servicios-seccion { padding: 80px 0; }
.servicios-seccion-acordeones { padding-top: 0; }
.servicios-encabezado { text-align: center; margin-bottom: 3rem; }
.servicios-encabezado-apoyo { max-width: 640px; margin-left: auto; margin-right: auto; }

/* --- Hero compacto: el buscador es el protagonista --- */
/* Padding inferior menor que el superior: el párrafo de apoyo ya aporta su
   propio margen abajo (antes separaba del buscador, que se quitó), así que
   sin esto el hero queda cargado hacia abajo. */
.servicios-hero-compacto {
    display: flex;
    align-items: center;
    padding: 4.5rem 0 2.5rem;
    min-height: 0;
}
.servicios-hero-titulo {
    font-family: var(--tipografia);
    font-weight: 700;
    line-height: 1.15;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    color: #ffffff;
    margin-bottom: 0.85rem;
    text-shadow: 0 2px 12px rgba(0, 20, 35, 0.5);
}
.servicios-hero-apoyo {
    font-family: var(--tipografia2);
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
    margin: 0 auto 2.25rem;
    line-height: 1.6;
    text-shadow: 0 1px 8px rgba(0, 20, 35, 0.5);
}
/* --- Barra de pestañas por audiencia (sticky bajo la navegación) --- */
.servicios-tabs-barra {
    position: sticky;
    /* La navegación del sitio es fija; este top la libra para que la barra no
       quede debajo de ella al pegarse. */
    top: 84px;
    z-index: 25;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(80, 184, 209, 0.3);
    transition: box-shadow var(--transition-base);
}
.servicios-tabs-barra.pegada { box-shadow: 0 6px 20px rgba(0, 40, 70, 0.12); }
.servicios-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.servicios-tabs::-webkit-scrollbar { display: none; }
.servicios-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 0.55rem 1.15rem;
    border: 1.5px solid transparent;
    border-radius: 50px;
    background: transparent;
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.servicios-tab i { font-size: 0.95rem; }
.servicios-tab:hover { background: rgba(80, 184, 209, 0.14); }
/* Pestaña activa con el color de acento */
.servicios-tab.activa {
    background: var(--azulSecundario);
    border-color: var(--azulSecundario);
    color: #ffffff;
}

/* --- Rejilla de categorías: 3 / 2 / 1 columnas ---
   Flexbox en vez de grid a propósito: con grid, las categorías que sobran en
   el último renglón (son 5, así que quedan 2) se pegaban a la izquierda y
   dejaban un hueco vacío a la derecha. Con flex-wrap + justify-content:center
   ese renglón incompleto queda centrado.
   El ancho de cada tarjeta se calcula a mano porque las tarjetas no crecen
   (flex-grow: 0): si crecieran, las 2 del último renglón se estirarían hasta
   ocupar todo el ancho en vez de centrarse. */
.servicios-categorias-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.categoria-card { flex: 0 1 calc((100% - 3rem) / 3); }
@media (max-width: 991px) {
    .categoria-card { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 575px) {
    .categoria-card { flex-basis: 100%; }
}
.categoria-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    background: var(--blanco);
    border: 1px solid rgba(80, 184, 209, 0.35);
    /* Mismo redondeo que las tarjetas de servicio del acordeón */
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 8px rgba(0, 40, 70, 0.05);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.categoria-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0, 40, 70, 0.14);
    border-color: var(--azulSecundario);
}
.categoria-card-icono {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    background: rgba(80, 184, 209, 0.12);
}
.categoria-card-icono i { font-size: 1.5rem; color: var(--azulSecundario); }
.categoria-card-nombre {
    font-family: var(--tipografia);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--azul);
    margin-bottom: 0.45rem;
}
.categoria-card-resumen {
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    color: var(--azulSecundario);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.categoria-card-conteo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--azul);
}
.categoria-card-conteo i { transition: transform var(--transition-base); }
.categoria-card:hover .categoria-card-conteo i { transform: translateX(4px); }

.servicios-vacio {
    margin: 2.5rem 0 0;
    text-align: center;
    font-family: var(--tipografia2);
    color: var(--azul);
}
.servicios-vacio i { color: var(--azulSecundario); margin-right: 6px; }
.servicios-vacio a { color: var(--azulSecundario); font-weight: 600; }

/* --- Acordeones por categoría --- */
.acordeon-bloque { margin-bottom: 3rem; scroll-margin-top: 150px; }
.acordeon-bloque:last-child { margin-bottom: 0; }
/* Título de categoría resaltado: ícono en cuadro de color, nombre más grande
   y contador de servicios al final, todo sobre una línea divisoria. Antes era
   un renglón de texto que se perdía entre las tarjetas. */
.acordeon-bloque-titulo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--tipografia);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    color: var(--azul);
    margin-bottom: 1.35rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid rgba(80, 184, 209, 0.35);
}
.acordeon-bloque-icono {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--azul) 0%, #004d6e 100%);
    box-shadow: 0 4px 12px rgba(0, 102, 144, 0.25);
}
.acordeon-bloque-icono i { font-size: 1.25rem; color: #ffffff; }
.acordeon-bloque-nombre { flex: 1; min-width: 0; line-height: 1.25; }
/* Cuántos servicios trae la categoría, como insignia al extremo derecho */
.acordeon-bloque-conteo {
    flex-shrink: 0;
    min-width: 34px;
    padding: 0.25rem 0.7rem;
    border-radius: 50px;
    background: rgba(80, 184, 209, 0.18);
    border: 1px solid rgba(80, 184, 209, 0.45);
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--azul);
}
/* --- Riel de categoría: una sola línea que corre por FUERA de las tarjetas,
   de la primera a la última del bloque, y termina en un punto redondeado —
   no una línea por tarjeta, sino una por categoría. Vive en la columna que
   abre el padding-left de la lista; position:relative en .acordeon-lista es
   lo que le da su propio sistema de coordenadas top/bottom para medir "de la
   primera tarjeta a la última", sin importar cuál esté abierta o cerrada. */
/* padding-bottom extra: le da a la lista un tramo de aire DESPUÉS de la
   última tarjeta para que el riel y el punto rematen debajo de ella, no
   pegados a su borde inferior (que es donde terminaba la lista sin este
   padding). */
/* Rejilla y no columna: los servicios sin desglose son filas cortas y caben
   de a dos por renglón, que con 35 trámites acorta muchísimo la página. Las
   tarjetas desplegables siguen ocupando el ancho completo (regla de abajo). */
.acordeon-lista {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem;
    padding-left: 34px;
    padding-bottom: 26px;
}
.acordeon-item:not(.servicio-simple) { grid-column: 1 / -1; }
/* El filtrado por audiencia oculta con el atributo hidden, y .servicio-simple
   trae su propio display:flex que lo pisaría. */
.acordeon-item[hidden] { display: none; }
.acordeon-lista::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 6px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--azulSecundario) 0%, var(--azul) 100%);
}
/* El punto es el remate del riel: mismo eje horizontal que la línea (centro
   en 12px) y un aro tenue alrededor para que se lea como marcador, no como
   una mancha. Con bottom:0 queda al fondo del padding-bottom de la lista, es
   decir debajo de la última tarjeta, no pegado a su borde. */
.acordeon-lista::after {
    content: '';
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--azul);
    box-shadow: 0 0 0 4px rgba(0, 102, 144, 0.16);
}
/* Cada servicio son DOS piezas apiladas, no una caja con cosas adentro:
   la cabecera (una tapa redondeada por sus cuatro lados) y el cuerpo (una caja
   un poco más angosta, recta arriba porque se mete debajo de la tapa, y
   redondeada abajo). El .acordeon-item en sí es solo el envoltorio: sin fondo
   ni borde propios, para que la forma de la tarjeta la den esas dos piezas. */
.acordeon-item {
    scroll-margin-top: 150px;
    transition: transform var(--transition-base);
}
.acordeon-item:hover { transform: translateY(-3px); }
/* Abierta la tarjeta no se levanta: ya es alta y el desplazamiento al pasar
   el cursor sobre un panel desplegado se siente como un salto. */
.acordeon-item.abierto { transform: none; }

/* --- Servicio sin desglose: una fila-cápsula, no una tarjeta desplegable.
   Toda la fila es el enlace al formulario, así que se puede hacer clic en
   cualquier punto y no solo en el botón.
   Los fondos van en color sólido y no en rgba: el botón que aparece al pasar
   el cursor se funde con este mismo color (ver el degradado de más abajo), y
   con un rgba encima de blanco ese empalme no coincidiría. */
.servicio-simple {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 8px 8px 18px;
    border-radius: 999px;
    background: #e8f6f9;
    color: var(--azul);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 64, 90, 0.05);
    transition: background var(--transition-fast), box-shadow var(--transition-base);
}
.servicio-simple:hover {
    background: #d5eef4;
    color: var(--azul);
    box-shadow: 0 10px 24px rgba(0, 64, 90, 0.13);
}
.servicio-simple-icono {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--azulSecundario);
}
/* Un solo renglón con puntos suspensivos: los nombres del catálogo llegan a
   69 caracteres y antes se partían en varias líneas o quedaban cortados a la
   mitad de una palabra contra la franja. Recortar con "…" deja claro que el
   texto sigue, y mantiene todas las filas de la misma altura. */
.servicio-simple-nombre {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--tipografia);
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.2px;
}
/* La franja del lado derecho: fondo BLANCO, no un tono de la misma familia
   que la cápsula. Antes arrancaba en el mismo color que la fila en hover para
   fundir el borde, y el efecto era el contrario al buscado — la franja
   desaparecía justo al pasar el mouse. El blanco la separa del fondo en los
   dos estados, y es el mismo recurso que usan las cajitas de "Qué incluye".
   Va en el flujo (no posicionada): así el nombre, que es de una sola línea con
   puntos suspensivos, cede ancho cuando la franja se despliega en vez de
   quedar tapado por ella. */
.servicio-simple-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 64, 90, 0.1);
    overflow: hidden;
    white-space: nowrap;
    transition: box-shadow var(--transition-base);
}
.servicio-simple:hover .servicio-simple-cta { box-shadow: 0 5px 14px rgba(0, 64, 90, 0.18); }
.servicio-simple-cta-flecha {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--azul);
    color: #ffffff;
    font-size: 0.9rem;
    transition: transform var(--transition-base);
}
/* La animación arranca por la flecha y termina en el texto: la flecha se
   mueve de inmediato y el texto se despliega con un retraso, detrás de ella. */
.servicio-simple:hover .servicio-simple-cta-flecha { transform: translateX(2px); }
.servicio-simple-cta-texto {
    order: 1;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    font-family: var(--tipografia2);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--azul);
    transition: max-width var(--transition-base) 0.1s,
                opacity var(--transition-fast) 0.15s,
                padding var(--transition-base) 0.1s;
}
.servicio-simple:hover .servicio-simple-cta-texto {
    max-width: 200px;
    opacity: 1;
    padding: 0 11px 0 15px;
}
/* Sin animación para quien la pidió apagada en su sistema: la franja se queda
   siempre desplegada, que es el estado legible. */
@media (prefers-reduced-motion: reduce) {
    .servicio-simple-cta-texto {
        max-width: 200px;
        opacity: 1;
        padding: 0 11px 0 15px;
        transition: none;
    }
}
/* --- Cabecera: la tapa de la tarjeta. Ocupa todo el ancho del item (por eso
   es MÁS ANCHA que el cuerpo, que va metido 12px por lado) y va redondeada por
   sus cuatro esquinas. Se pinta siempre, en los dos estados: es la pieza que
   da la forma de arriba de la tarjeta. Cerrada va en un tono suave y abierta
   se intensifica, que es la diferencia entre "no resaltado" y "resaltado".
   position + z-index la dejan por encima del cuerpo, así su esquina inferior
   redondeada se ve recortada contra la caja de abajo en vez de al revés. */
.acordeon-cabecera {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border: none;
    border-radius: 16px;
    background: rgba(80, 184, 209, 0.17);
    text-align: left;
    cursor: pointer;
    font-family: var(--tipografia);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--azul);
    box-shadow: 0 2px 8px rgba(0, 64, 90, 0.07);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.acordeon-cabecera:hover { background: rgba(80, 184, 209, 0.26); }
.acordeon-item.abierto .acordeon-cabecera {
    background: rgba(80, 184, 209, 0.38);
    box-shadow: 0 4px 14px rgba(0, 64, 90, 0.13);
}
.acordeon-item.abierto .acordeon-cabecera:hover { background: rgba(80, 184, 209, 0.46); }
.acordeon-item.abierto .acordeon-icono,
.acordeon-item.abierto .acordeon-nombre { color: var(--azul); }
.acordeon-icono { color: var(--azulSecundario); font-size: 1.25rem; flex-shrink: 0; }
/* Nombre del servicio: único renglón de la cabecera, sin dividirlo con la
   pista debajo — la pista se mudó junto al botón de abrir/cerrar. */
.acordeon-nombre {
    flex: 1;
    min-width: 0;
    /* Comparte línea base con la pista (ver .acordeon-pista): los dos textos
       se apoyan en el mismo renglón aunque tengan tamaños distintos. */
    align-self: baseline;
    line-height: 1.35;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 0.2px;
}
/* Pista de "aquí abajo hay más", ahora junto al botón de abrir/cerrar (no
   debajo del título): cambia de texto cuando la tarjeta ya está abierta.
   Va con aria-hidden en el HTML porque para lectores de pantalla ese estado
   ya lo comunica el aria-expanded del botón. */
.acordeon-pista {
    flex-shrink: 0;
    /* align-self: baseline en vez del align-items: center de la cabecera: la
       pista es bastante más chica que el título, y centrada ópticamente
       quedaba flotando por debajo de él en vez de sobre el mismo renglón.
       El ícono y el botón redondo siguen centrados, que es como se ven bien.
       El margen izquierdo se suma al gap de 12px de la cabecera para separarla
       un poco más del título sin alejarla del botón. */
    align-self: baseline;
    margin-left: 0.55rem;
    font-family: var(--tipografia2);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--azulSecundario);
    transition: color var(--transition-fast);
}
.acordeon-cabecera:hover .acordeon-pista { color: var(--azul); }
.acordeon-item.abierto .acordeon-pista { color: var(--azul); }
/* Los dos rótulos se alternan según el estado de la tarjeta. Van con la misma
   forma de selector (.acordeon-pista .x) a propósito: si el que da la forma
   fuera solo `.acordeon-pista > span`, pesaría más que un `.acordeon-pista-abierta`
   suelto y el "Ocultar" se vería también en las tarjetas cerradas. */
.acordeon-pista .acordeon-pista-abierta { display: none; }
.acordeon-item.abierto .acordeon-pista .acordeon-pista-cerrada { display: none; }
.acordeon-item.abierto .acordeon-pista .acordeon-pista-abierta { display: inline; }
/* La flecha va dentro de un botón redondo y con el trazo engrosado: el chevron
   de Bootstrap Icons es de línea muy fina y se perdía en el renglón.
   -webkit-text-stroke engrosa el glifo mismo (Chrome, Edge y Safari). */
.acordeon-flecha {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(80, 184, 209, 0.14);
    color: var(--azul);
    font-size: 1rem;
    -webkit-text-stroke: 1.1px currentColor;
    transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}
.acordeon-cabecera:hover .acordeon-flecha { background: rgba(80, 184, 209, 0.28); }
.acordeon-item.abierto .acordeon-flecha {
    transform: rotate(180deg);
    background: var(--azul);
    color: #ffffff;
}
/* Progressive enhancement: por defecto el cuerpo está ABIERTO, así que sin
   JavaScript (o antes de que cargue) todo el contenido se lee y se indexa.
   servicios.js marca <html> con .js-servicios y a partir de ahí los cuerpos
   arrancan colapsados y solo se abre el que tenga .abierto.
   max-height en píxeles (medido por JS con scrollHeight), no grid-template-rows
   con fr: animar un grid-template-rows entre 0fr/1fr no colapsa el panel en
   algunos navegadores, porque para poder interpolar el motor necesita resolver
   el tamaño intrínseco del contenido en ambos extremos y eso anula el permiso
   de "tamaño mínimo automático = 0" que da overflow:hidden. Con max-height en
   px no hay esa ambigüedad: colapsa siempre y además anima igual de bien. */
/* El cuerpo es la caja de abajo: 12px más angosta por lado que la cabecera,
   recta arriba (se mete debajo de la tapa) y redondeada abajo.
   Cerrada NO desaparece: el min-height la deja como una franja delgada de
   22px, que es donde vive la marca de punto y raya. Lo que colapsa es el
   contenido de adentro, no esta caja. */
.acordeon-cuerpo {
    position: relative;
    margin: 0 12px;
    min-height: 22px;
    border-radius: 0 0 16px 16px;
    background: rgba(80, 184, 209, 0.09);
    overflow: hidden;
}
/* Marca de "aquí hay contenido plegado": el punto y la rayita dentro de la
   franja. Solo se ven con la tarjeta cerrada; al abrir se desvanecen, porque
   ahí el contenido ya está a la vista. Los dos van centrados en los 22px de
   la franja (5px de alto -> top 9; 3px de alto -> top 10). */
.acordeon-cuerpo::before,
.acordeon-cuerpo::after {
    content: '';
    position: absolute;
    background: var(--azul);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--transition-base);
}
.acordeon-cuerpo::before {
    left: 18px;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.acordeon-cuerpo::after {
    left: 29px;
    top: 10px;
    width: 16px;
    height: 3px;
    border-radius: 999px;
}
.acordeon-item.abierto .acordeon-cuerpo::before,
.acordeon-item.abierto .acordeon-cuerpo::after { opacity: 0; }
/* Progressive enhancement: sin JavaScript el contenido queda desplegado, así
   que todo se lee y se indexa. servicios.js marca <html> con .js-servicios y
   a partir de ahí arranca colapsado; el máximo real en píxeles lo pone el
   mismo script como estilo en línea, a partir del alto del contenido.
   max-height en px y no grid-template-rows con fr: animar 0fr/1fr no colapsa
   el panel en algunos navegadores, porque para interpolar el motor necesita
   resolver el tamaño intrínseco del contenido en ambos extremos y eso anula
   el "tamaño mínimo automático = 0" que da overflow:hidden. */
.acordeon-cuerpo-interior {
    overflow: hidden;
    max-height: none;
    padding: 4px 26px 22px 26px;
    transition: max-height var(--transition-base), padding var(--transition-base);
}
/* El padding vertical también se pliega. Es necesario, no cosmético: un
   max-height de 0 no puede comprimir el padding (ni con box-sizing:border-box,
   donde la caja se queda en padding+borde como mínimo), así que sin esto el
   contenido cerrado seguiría ocupando sus 26px y la franja no mediría lo que
   dice su min-height. */
.js-servicios .acordeon-cuerpo-interior {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.js-servicios .acordeon-item.abierto .acordeon-cuerpo-interior {
    padding-top: 4px;
    padding-bottom: 22px;
}

/* El contenido desplegado iba como texto plano sobre blanco y se veía muy
   básico. Ahora la descripción lleva un fondo propio y cada punto de "Qué
   incluye" es su propia cajita: así los renglones de distinto largo se ven
   como una rejilla intencional y no como texto que se desacomoda.
   Sin borde: lo que la distingue del cuerpo es solo el tono de fondo y las
   esquinas redondeadas por los 4 lados, no una línea — el resaltado ya lo
   aporta la cabecera, así que aquí el borde marcado se sentía de más. */
.acordeon-descripcion {
    font-family: var(--tipografia2);
    font-size: 0.97rem;
    color: var(--azul);
    line-height: 1.7;
    margin-bottom: 1.4rem;
    padding: 0.95rem 1.15rem;
    background: rgba(80, 184, 209, 0.07);
    border-radius: 14px;
}
/* "QUÉ INCLUYE" también es un título: va más marcado y con su propio punto de
   color, no solo como un rótulo tenue. */
.acordeon-incluye-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tipografia2);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: 0.9rem;
}
.acordeon-incluye-titulo::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--azulSecundario);
}
/* Línea que continúa después del rótulo, para que no quede flotando solo */
.acordeon-incluye-titulo::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(80, 184, 209, 0.5), transparent);
}
/* Columnas más anchas (320px): con 280px salían hasta 4 columnas y los textos
   cortos quedaban perdidos con mucho aire a la derecha.
   Flexbox en vez de grid a propósito: con grid, cuando la última fila no se
   llena (p. ej. 5 cuadros en filas de 3), los que sobran quedan pegados a la
   izquierda con un hueco vacío a la derecha. Con flex-wrap + justify-content:
   center esa fila incompleta queda centrada en vez de colgada a un lado. */
.acordeon-incluye {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}
.acordeon-incluye li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 320px;
    max-width: 420px;
    padding: 0.8rem 1rem;
    background: var(--blanco);
    border: 1px solid rgba(80, 184, 209, 0.18);
    border-left: 2px solid rgba(80, 184, 209, 0.45);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 40, 70, 0.04);
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--azul);
    line-height: 1.45;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.acordeon-incluye li:hover {
    border-color: var(--azulSecundario);
    border-left-color: var(--azul);
    background: rgba(80, 184, 209, 0.07);
    box-shadow: 0 4px 12px rgba(0, 40, 70, 0.08);
}
/* La palomita pasa de un ícono suelto y tenue a una insignia redonda */
.acordeon-incluye i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--azulSecundario);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Un solo botón primario en toda la página, y su contraparte de contorno */
.btn-servicio-primario {
    font-size: 0.95rem !important;
    padding: 0.7rem 1.6rem !important;
    background: var(--azul);
    color: #ffffff;
    border: 2px solid var(--azul);
}
.btn-servicio-primario:hover { background: var(--azulSecundario); border-color: var(--azulSecundario); color: #ffffff; }
.btn-servicio-secundario {
    font-size: 0.95rem !important;
    padding: 0.7rem 1.6rem !important;
    background: transparent;
    color: var(--azul);
    border: 2px solid var(--azul);
}

/* --- Franja de destacados: fondo oscuro para cortar la página --- */
.servicios-destacados {
    padding: 80px 0;
    background: linear-gradient(155deg, var(--azul) 0%, #004055 100%);
    margin: 0 clamp(12px, 3vw, 40px);
    border-radius: var(--border-radius-xl);
}
.servicios-destacados-encabezado { text-align: center; margin-bottom: 3rem; }
.servicios-destacados-etiqueta {
    display: block;
    font-family: var(--tipografia2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--azulSecundario);
    margin-bottom: 0.6rem;
}
.servicios-destacados-titulo {
    font-family: var(--tipografia);
    font-weight: 600;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    color: #ffffff;
    margin: 0;
}
.servicios-destacados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 991px) {
    .servicios-destacados-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .servicios-destacados-grid { grid-template-columns: 1fr; }
}
.destacado-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    text-decoration: none;
    transition: background-color var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.destacado-card:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-6px);
}
.destacado-card-icono {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
}
.destacado-card-icono i { font-size: 1.35rem; color: #ffffff; }
.destacado-card-nombre {
    font-family: var(--tipografia);
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}
.destacado-card-enlace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--azulSecundario);
}
.destacado-card-enlace i { transition: transform var(--transition-base); }
.destacado-card:hover .destacado-card-enlace i { transform: translateX(4px); }

/* --- CTA final --- */
.servicios-cta-final { padding: 80px 0; }
.servicios-cta-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2.5rem;
    background: rgba(80, 184, 209, 0.06);
    border: 1.5px solid rgba(80, 184, 209, 0.35);
    border-radius: var(--border-radius-xl);
}
.servicios-cta-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* --- WhatsApp siempre a mano en móvil --- */
.whatsapp-flotante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    width: 54px;
    height: 54px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--azul);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 40, 70, 0.35);
    transition: transform var(--transition-base), background-color var(--transition-base);
}
.whatsapp-flotante i { font-size: 1.6rem; }
.whatsapp-flotante:hover { background: var(--azulSecundario); color: #ffffff; transform: scale(1.06); }
@media (max-width: 991px) {
    .whatsapp-flotante { display: flex; }
    .servicios-seccion { padding: 56px 0; }
    .servicios-destacados { padding: 56px 0; }
    .servicios-cta-final { padding: 56px 0; }
    .servicios-tabs-barra { top: 0; }
}
@media (max-width: 575px) {
    .servicios-cta-card { padding: 2.25rem 1.4rem; }
    .servicios-cta-botones .btn { width: 100%; }
    /* La columna del riel se angosta en pantallas chicas y el padding y los
       márgenes que dependen de ella la siguen, para no dejar un hueco de más. */
    .acordeon-lista { padding-left: 26px; }
    .acordeon-lista::before { left: 7px; }
    .acordeon-lista::after { left: 3px; }
    .acordeon-cabecera { padding: 12px 14px; gap: 8px; border-radius: 14px; }
    /* El cuerpo se mete menos por lado en pantallas chicas, y su padding
       iguala al de la cabecera (8 + 14 = 22 = 8 + 14) para que el texto del
       contenido siga alineado con el del título. */
    .acordeon-cuerpo { margin: 0 8px; border-radius: 0 0 14px 14px; }
    /* Solo los laterales: el padding vertical lo maneja el plegado de arriba. */
    .acordeon-cuerpo-interior { padding-left: 14px; padding-right: 14px; }
    .acordeon-nombre { font-size: 1rem; }
    /* Una sola columna: dos no caben, y el minmax de 420px con el carril de
       26px se desbordaría del ancho disponible. */
    .acordeon-lista { grid-template-columns: 1fr; }
    /* Sin hover que valga en táctil, el botón se queda siempre desplegado; y
       ya desplegado necesita más hueco reservado a la derecha. */
    .servicio-simple { padding: 12px 14px; flex-wrap: wrap; }
    /* En una sola columna angosta el recorte con puntos suspensivos dejaría
       ilegible casi todo el catálogo, así que aquí el nombre sí se parte en
       varias líneas y la franja se va completa al renglón de abajo. */
    .servicio-simple-nombre { white-space: normal; overflow: visible; text-overflow: clip; }
    .servicio-simple-cta {
        order: 3;
        width: 100%;
        margin-top: 10px;
        justify-content: flex-end;
    }
    .servicio-simple-cta-texto { max-width: 200px; opacity: 1; padding: 0 11px 0 15px; }
    /* Con el título, la pista y el botón en el mismo renglón ya no cabe el
       rótulo completo junto al chevron sin apretar la tarjeta: se oculta y
       basta con el título y la flecha para saber que hay más contenido. */
    .acordeon-pista { display: none; }
    .categoria-card { padding: 20px; }
}

/* ============================================
   HERO (VIDEO + OVERLAY + BUSCADOR)
   ============================================ */
.hero-fondo {
    min-height: 100vh;
    padding-top: 100px;
    display: flex;
    align-items: center;
    position: relative;
}
/* El recorte del fondo vive AQUÍ y no en .hero-fondo. El video necesita que se
   le recorte —viene con transform: scale(1.07) y sin recorte asoma unos 50px
   por cada lado, lo que provoca desplazamiento horizontal y lo pinta encima de
   la sección siguiente—, pero un overflow: hidden en la sección entera también
   cortaba la lista de opciones de los filtros del buscador: el buscador es el
   último elemento del hero, así que al abrir un filtro solo se veía la primera
   opción y las demás quedaban fuera de la caja, sin ningún error de por medio.
   Con el recorte en este marco, el video sigue igual y la lista puede salir. */
.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    filter: saturate(1.15) brightness(0.95);
    transform: scale(1.07);
    will-change: transform;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0, 102, 144, 0.55) 0%, rgba(80, 184, 209, 0.5) 100%);
    z-index: 1;
}
.hero-fondo .container-fluid { z-index: 2; position: relative; }
.hero-fondo .d-inline-flex {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 102, 144, 0.2);
}
.hero-fondo h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 30, 50, 0.55);
}
.hero-fondo h1 span { color: #9be1f7 !important; }
.hero-fondo p {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 20, 40, 0.5);
}

/* Buscador */
.buscador-container {
    max-width: 850px;
    width: 100%;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 60px;
    border: 1px solid rgba(0, 102, 144, 0.15);
    box-shadow: 0 8px 32px rgba(0, 40, 70, 0.18);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.buscador-container:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 40px rgba(0, 40, 70, 0.25);
}
.buscador-form { padding: 0.25rem; }
.campo-busqueda { flex: 1 1 auto; min-width: 140px; }
/* Solo .form-control: en la barra ya no queda ningún <select> nativo, los dos
   filtros son .filtro-select. Este bloque viste el campo de ubicación, que es
   el único <input> que queda, y su gemelo visual es .filtro-select-boton. */
.buscador-form .form-control {
    padding: 0.65rem 1.2rem;
    /* La misma tipografía que .filtro-select-boton: los dos filtros y el campo
       de ubicación conviven en la misma barra, y sin esto el campo de texto
       heredaba la del sistema y la barra salía con dos tipografías. */
    font-family: var(--tipografia2);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--azul) !important;
    background: rgba(0, 102, 144, 0.06) !important;
    border: 1px solid rgba(0, 102, 144, 0.2);
    border-radius: 50px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.buscador-form .form-control::placeholder {
    color: rgba(0, 102, 144, 0.55);
    font-weight: 400;
}
.buscador-form .form-control:focus {
    background: rgba(0, 102, 144, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(80, 184, 209, 0.25);
    outline: none;
}
.btn-buscar {
    background: var(--azul);
    color: white;
    border: none;
    font-family: var(--tipografia2);
    padding: 0.65rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.btn-buscar:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.45);
    background: #0056b3;
}
/* En fila, el botón "Buscar" se queda con su propio ancho y no con la base del
   100% que le da w-100. Con esa base se llevaba 231px de los 826 disponibles en
   la portada (y 342px de 1278 en /propiedades), y los campos quedaban tan
   angostos que el rótulo del filtro salía cortado con puntos suspensivos:
   "Tipo de operación" mide 138px y a 1024px de ventana solo había 117px de
   hueco. Ese defecto ya existía en /propiedades; se corrige en las dos, que es
   además lo que las deja iguales. Fuera de fila (menos de 992px) el botón sigue
   a todo lo ancho, que es lo que se quiere con el formulario apilado. */
@media (min-width: 992px) {
    .buscador-form .btn-buscar { flex: 0 0 auto; width: auto !important; }
}
/* La barra del hero no hereda el tope de 850px: repartidos entre cuatro
   controles tampoco alcanzaban para los rótulos. */
.hero-fondo .buscador-container { max-width: 1000px; }

/* ============================================
   CARRUSEL DE PROPIEDADES
   ============================================ */
.titulo-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0.85rem 2.5rem;
    border-radius: 18px;
    background: rgba(80, 184, 209, 0.12);
    border: 1px solid rgba(0, 102, 144, 0.2);
    color: var(--azul);
    font-family: var(--tipografia);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.titulo-pill i { color: var(--azulSecundario); font-size: 1.3rem; }

.slider-propiedades {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 0 0;
}
.slider-track {
    display: flex;
    gap: 1.5rem;
    will-change: transform;
    transition: transform 0.65s cubic-bezier(0.22, 0.9, 0.35, 1);
}
.slider-slide {
    flex: 0 0 auto;
    position: relative;
    width: min(540px, 95%);
    opacity: 0.45;
    transform: scale(0.94);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.slider-slide.activa { opacity: 1; transform: scale(1); }
.slider-slide.clon { pointer-events: none; }

/* ---- Tamaño y uniformidad de las tarjetas del carrusel ----
   La tarjeta llegaba a 730px de alto en una ventana de 900: ocupaba la pantalla
   casi completa y el bloque se veía desproporcionado frente al resto de la
   portada. Estas reglas la bajan alrededor de un 13%.
   Todo va acotado a .slider-slide y NO a .galeria-img en general, porque esa
   misma clase la usan la galería de la ficha de propiedad (520px en escritorio)
   y la variante compacta de "Propiedades recientes" (225px), que no cambian. */
.slider-slide { width: min(470px, 92%); }
.slider-slide .galeria-inmueble { padding: 12px; }
/* El fondo desenfocado ocupa el mismo recuadro que la foto, asi que su inset
   tiene que seguir al padding de cada variante de galeria. */
.slider-slide .galeria-inmueble::before { inset: 12px; border-radius: 16px; }
.slider-slide .galeria-img { height: 270px; border-radius: 16px; }
/* El título salía a 33.6px —el tope del clamp de .titulos— dentro de una
   tarjeta: más grande que los encabezados de varias secciones de la página. */
.slider-slide .tendencia-cuerpo h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); }

/* Las tarjetas medían 648, 695 y 730px según cuántas amenidades tuviera cada
   propiedad, así que la sección brincaba de alto al avanzar el carrusel.
   .slider-track ya es flex, o sea que el SLIDE se estiraba solo hasta el más
   alto; lo que no se estiraba era la tarjeta de dentro, que era display: block.
   Con esta cadena de flex la tarjeta llena el slide y margin-top: auto manda
   los botones al fondo, así que todas las tarjetas los alinean a la misma
   altura y el alto de la sección deja de moverse. */
.slider-slide .tarjeta-inmueble {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tendencia-cuerpo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.4rem 1.4rem;
}
.tendencia-acciones { margin-top: auto; }

.tarjeta-inmueble {
    background: var(--blanco);
    border: 2px solid var(--azulSecundario);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 30px rgba(0, 102, 144, 0.14);
    overflow: hidden;
    transition: box-shadow 0.65s ease;
}
.slider-slide.activa .tarjeta-inmueble {
    box-shadow: 0 25px 60px rgba(0, 102, 144, 0.28);
}

/* Galería de imágenes */
/* La foto se muestra COMPLETA, no recortada. Antes iba con object-fit: cover, y
   con las fotografías reales del local —verticales, de 960x1280— el recuadro
   horizontal se comía el 60% de cada imagen. Con "contain" se ve entera, y el
   espacio que sobra a los lados lo llena una copia desenfocada de la propia foto
   (el ::before de abajo), que es como resuelven esto los portales inmobiliarios:
   la foto no se mutila y el recuadro no queda con barras muertas.
   Funciona igual con fotos horizontales, así que sirve para todo el catálogo. */
.galeria-inmueble {
    position: relative;
    padding: 14px;
    overflow: hidden; /* recorta el halo que el desenfoque deja fuera del recuadro */
}
/* El fondo desenfocado. --foto-actual la escribe slider.js cada vez que cambia
   la imagen visible; sin JS (o con una sola foto) simplemente no se pinta. */
.galeria-inmueble::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 20px;
    background-image: var(--foto-actual);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.15) brightness(0.92);
    transform: scale(1.08); /* tapa los bordes que el desenfoque deja translúcidos */
    z-index: 0;
    pointer-events: none;
}
.galeria-img {
    display: none;
    position: relative;
    z-index: 1; /* por encima del fondo desenfocado, por debajo de flechas y puntos (z-index 3) */
    width: 100%;
    height: 320px;
    object-fit: contain;
    border-radius: 20px;
}
.galeria-img.activa { display: block; }
.galeria-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--azulSecundario);
    background: rgba(255, 255, 255, 0.65);
    color: var(--azul);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.galeria-btn:hover { background: var(--azul); color: var(--blanco); }
.galeria-btn-izq { left: 26px; }
.galeria-btn-der { right: 26px; }
.galeria-btn i { font-size: 1rem; line-height: 1; }
.galeria-dots {
    position: absolute;
    bottom: 26px;
    right: 50px;
    display: flex;
    gap: 6px;
    z-index: 3;
}
.galeria-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    transition: background 0.3s ease;
}
.galeria-dot.activa { background: var(--azul); }

/* Badges y precio */
.propiedad-media { position: relative; }
.propiedad-badge {
    position: absolute;
    top: 26px;
    left: 26px;
    z-index: 2;
    background: var(--azul);
    color: #ffffff;
    font-family: var(--tipografia2);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    border-radius: 50px;
}
.propiedad-precio {
    position: absolute;
    bottom: 26px;
    left: 26px;
    z-index: 2;
    /* El badge flota sobre la foto en position:absolute, así que no tiene un
       ancho que lo contenga: sin este tope, un texto largo se sale de la
       tarjeta por la derecha en la rejilla de 4 columnas. */
    max-width: calc(100% - 52px);
    background: rgba(255, 255, 255, 0.95);
    color: var(--azul);
    font-family: var(--tipografia);
    font-weight: 800;
    font-size: 1.15rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--border-radius-sm);
}
/* "a tratar": el precio está pero es negociable. Va como segunda línea dentro
   de la misma píldora y no pegado al monto, porque "$75,000/mes · a tratar" en
   un solo renglón no cabe en la rejilla de 4 columnas — así el ancho de la
   píldora lo sigue marcando la cifra. Va en minúsculas y con menos peso a
   propósito: es una acotación al precio, no un segundo precio. */
.precio-a-tratar {
    display: block;
    margin-top: 1px;
    font-family: var(--tipografia2);
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-transform: none;
    opacity: 0.75;
}

/* Propiedad sin precio cargado: "Precio a consultar" es tres veces más largo
   que "$14,500/mes" y además no es una cifra que deba gritar, así que baja de
   tamaño en vez de comerse el ancho de la foto. */
.propiedad-precio.es-consultar {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.45rem 0.95rem;
}

/* Specs y extras */
.propiedad-ubicacion {
    font-family: var(--tipografia2);
    color: var(--azulSecundario);
    font-size: 0.95rem;
    font-weight: 500;
}
.propiedad-specs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.propiedad-spec {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(80, 184, 209, 0.12);
    border: 1px solid rgba(80, 184, 209, 0.35);
    color: var(--azul);
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 500;
}
.propiedad-spec i { color: var(--azulSecundario); }

/* Tarjetas de "Propiedades recientes" (inicio): la misma galería del
   carrusel, pero achicada porque aquí viven 4 por fila en vez de una. */
.tarjeta-inmueble-compacta {
    display: flex;
    flex-direction: column;
    border: 1.5px solid rgba(80, 184, 209, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tarjeta-inmueble-compacta:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--azulSecundario);
}
/* Un poco más anchas que las 4 columnas por defecto de Bootstrap. */
@media (min-width: 992px) {
    .container-recientes { max-width: 1080px; }
}
@media (min-width: 1200px) {
    .container-recientes { max-width: 1260px; }
}
@media (min-width: 1400px) {
    .container-recientes { max-width: 1400px; }
}
.tarjeta-inmueble-compacta .galeria-inmueble { padding: 12px; }
.tarjeta-inmueble-compacta .galeria-inmueble::before { inset: 12px; border-radius: 16px; }
.tarjeta-inmueble-compacta .galeria-img { height: 225px; border-radius: 16px; }
.tarjeta-inmueble-compacta .galeria-btn { width: 32px; height: 32px; }
.tarjeta-inmueble-compacta .galeria-btn-izq { left: 20px; }
.tarjeta-inmueble-compacta .galeria-btn-der { right: 20px; }
.tarjeta-inmueble-compacta .galeria-btn i { font-size: 0.9rem; }
.tarjeta-inmueble-compacta .galeria-dots { bottom: 20px; right: 40px; }
.tarjeta-inmueble-compacta .propiedad-badge {
    top: 20px;
    left: 20px;
    font-size: 0.75rem;
    padding: 0.4rem 0.9rem;
}
.tarjeta-inmueble-compacta .propiedad-precio {
    bottom: 20px;
    left: 20px;
    max-width: calc(100% - 40px);
    font-size: 1.1rem;
    padding: 0.45rem 1rem;
}
.tarjeta-inmueble-compacta .propiedad-precio.es-consultar { font-size: 0.85rem; }
.tarjeta-inmueble-compacta .card-body { flex: 1; }
@media (max-width: 767px) {
    .tarjeta-inmueble-compacta .galeria-img { height: 260px; }
}
.propiedad-extras {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.propiedad-extras li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    color: var(--azul);
}
.propiedad-extras i { color: var(--azulSecundario); }
.btn-inmueble { font-size: 0.95rem !important; padding: 0.55rem 1.4rem !important; }

/* Flechas del carrusel */
.slider-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid var(--azulSecundario);
    background: rgba(255, 255, 255, 0.9);
    color: var(--azul);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.slider-flecha i {
    font-size: 1.6rem;
    line-height: 1;
    color: inherit !important;
    -webkit-text-stroke: 2px currentColor;
}
.slider-flecha:hover {
    background: var(--azul) !important;
    border-color: var(--azul) !important;
    color: var(--blanco) !important;
    transform: translateY(-50%) scale(1.07);
}
.slider-flecha:active { transform: translateY(-50%) scale(0.95); }
/* Las flechas se colocan a partir de la mitad del slide, así que los 235px son
   la mitad del nuevo ancho (470px): al angostar la tarjeta hay que recalcularlo
   o las flechas quedan flotando lejos de ella. */
.slider-flecha-izq { left: calc(50% - min(235px, 46%) - 68px); right: auto; }
.slider-flecha-der { right: calc(50% - min(235px, 46%) - 68px); left: auto; }

/* Puntitos de navegación */
.slider-dots {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 1.8rem 0 2.4rem;
}
.slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50px;
    background: rgba(0, 102, 144, 0.25);
    transition: background-color 0.3s ease, width 0.3s ease;
}
.slider-dot.activa { background: var(--azul); width: 28px; }

/* Línea tope al final */
.linea-tope-carrusel {
    position: absolute;
    left: calc(100% + 40px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.linea-tope-carrusel.visible { opacity: 1; }
.linea-tope-carrusel::before {
    content: '';
    width: 2px;
    height: 90px;
    background: linear-gradient(to bottom, transparent, var(--azulSecundario) 30%, var(--azul) 50%, var(--azulSecundario) 70%, transparent);
    border-radius: 2px;
}
.linea-tope-carrusel span {
    font-family: var(--tipografia2);
    font-size: 0.7rem;
    color: var(--azulSecundario);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ============================================
   SECCIÓN SERVICIOS (fondo suave)
   ============================================ */
.nosotros-seccion {
    background: rgba(80, 184, 209, 0.06);
    margin: 1.5rem clamp(12px, 3vw, 40px);
    border-radius: var(--border-radius-xl);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
}

/* --- "Servicios para su propiedad" (portada): misma paleta oscura que
   "Los más solicitados" de /servicios; los recuadros llevan más relleno. --- */
.nosotros-seccion.servicios-propiedad-seccion {
    background: linear-gradient(155deg, var(--azul) 0%, #004055 100%);
    border: none;
}
.servicios-propiedad-seccion .titulos { color: #ffffff; }
.servicios-propiedad-seccion .texto { color: rgba(255, 255, 255, 0.92); }
.servicios-propiedad-seccion .servicio-card {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
}
.servicios-propiedad-seccion .servicio-card:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   SECCIÓN "NUESTRA HISTORIA" (estilo class.com.mx)
   ============================================ */
.historia-seccion {
    position: relative;
    padding: 110px 0;
    background-image: url('/IMG/infondo.jpg');
    background-size: cover;
    background-position: center;
    margin: 1.5rem clamp(12px, 3vw, 40px);
    border-radius: var(--border-radius-xl);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    overflow: hidden;
}
.historia-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    border-radius: 24px;
    padding: 3rem 2.75rem;
    max-width: 620px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.historia-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2.2rem;
}
.historia-logo img { height: 44px; width: auto; }
.historia-logo-linea {
    width: 1px;
    height: 44px;
    background: rgba(0, 102, 144, 0.25);
}
.historia-logo-texto {
    font-family: var(--tipografia2);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--azul);
    line-height: 1.4;
}
.historia-texto {
    font-family: var(--tipografia2);
    font-size: 1.05rem;
    line-height: 1.8;
    color: #3d4a52;
    margin-bottom: 2.2rem;
}
.historia-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tipografia2);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--azul);
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}
.historia-link:hover { color: var(--azulSecundario); gap: 12px; }

/* ============================================
   PÁGINA /PROPIEDADES (filtros + mapa + cards)
   ============================================ */
/* Divisor vertical que conecta el párrafo del encabezado con el título, en
   vez de dejarlo flotando solo del lado derecho sin relación visual. */
@media (min-width: 992px) {
    .propiedades-hero-parrafo {
        border-left: 3px solid var(--azulSecundario);
        padding-left: 1.75rem;
    }
}
.filtros-card {
    background: var(--blanco);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.75rem;
}
.filtros-card-resaltada {
    border: 1.5px solid var(--azulSecundario);
    box-shadow: 0 0 0 4px rgba(80, 184, 209, 0.14), var(--shadow-lg);
}
.filtros-card .form-label { color: var(--azul); font-weight: 600; margin-bottom: 0.4rem; }
.filtros-card .form-select,
.filtros-card .form-control { border-color: rgba(0, 102, 144, 0.25); color: var(--azul); }
.filtros-card .form-select:focus,
.filtros-card .form-control:focus {
    border-color: var(--azulSecundario);
    box-shadow: 0 0 0 3px rgba(80, 184, 209, 0.2);
}
.mapa-container {
    position: relative;
    /* Leaflet posiciona sus capas internas (tiles, marcadores, controles) con
       z-index de hasta 1000 sobre un <div> que no tiene z-index propio, así
       que sin esto se cuelan por encima de los desplegables del buscador de
       abajo. Con position+z-index aquí, ese contexto de apilamiento queda
       contenido dentro del mapa y no puede salirse. */
    z-index: 1;
    border: 1.5px solid rgba(80, 184, 209, 0.35);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-height: 420px;
}
.mapa-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

/* Tarjetita del marcador del mapa de /propiedades (Leaflet) */
.leaflet-popup-content-wrapper { padding: 0; border-radius: var(--border-radius-sm); overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 220px !important; }
.mapa-popup img { display: block; width: 100%; height: 110px; object-fit: cover; }
.mapa-popup-body { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 4px; }
.mapa-popup-badge {
    align-self: flex-start;
    background: var(--azul);
    color: #ffffff;
    font-family: var(--tipografia2);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    margin-bottom: 2px;
}
.mapa-popup-body strong { font-family: var(--tipografia); color: var(--azul); font-size: 0.95rem; line-height: 1.3; }
.mapa-popup-zona { font-family: var(--tipografia2); color: var(--azulSecundario); font-size: 0.8rem; }
.mapa-popup-precio { font-family: var(--tipografia); color: var(--azul); font-weight: 800; font-size: 1rem; margin-top: 2px; }
.mapa-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--azulSecundario);
    font-family: var(--tipografia2);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    margin-top: 4px;
    transition: gap 0.25s ease, color 0.25s ease;
}
.mapa-popup-link:hover { color: var(--azul); gap: 10px; }
/* Lo único propio de la barra de /propiedades: ancho completo, borde más
   definido y quedar por encima del mapa. Los campos son los mismos que en el
   hero de la portada (includes/buscador-filtros.php arma las dos barras), así
   que todo lo demás vive en las reglas generales de .buscador-form. */
.buscador-container-propiedades {
    max-width: 100%;
    border: 1.5px solid rgba(80, 184, 209, 0.35);
    /* La barra va por encima del mapa: si no, la lista desplegable queda
       tapada por las capas internas de Leaflet que vienen justo debajo. */
    position: relative;
    z-index: 20;
}
/* Resumen que sustituye al mapa cuando hay una búsqueda activa: dice cuántos
   resultados hubo, con qué filtros, y ofrece volver al listado completo. */
.busqueda-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.busqueda-resumen-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.busqueda-resumen-conteo {
    font-family: var(--tipografia);
    font-weight: 700;
    color: var(--azul);
    font-size: 1.05rem;
    margin-right: 0.25rem;
}
.busqueda-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(80, 184, 209, 0.15);
    border: 1px solid rgba(80, 184, 209, 0.45);
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
}
.busqueda-limpiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--azulSecundario);
    text-decoration: none;
    transition: color var(--transition-base);
}
.busqueda-limpiar:hover { color: var(--azul); text-decoration: underline; }

/* El icono por campo NO va acotado a /propiedades: el buscador del hero de la
   portada usa la misma barra. Acotado, el <i> se quedaba en position: static,
   se pintaba como un glifo suelto en su propio renglón encima del campo y cada
   campo crecía unos 25px de alto, mientras el botón seguía reservando el hueco
   del icono con su padding-left. */
.buscador-form .campo-busqueda-icono { position: relative; }
.buscador-form .campo-busqueda-icono > i {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--azulSecundario);
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 2;
}
.buscador-form .campo-busqueda-icono .form-control {
    padding-left: 2.5rem;
}
/* Desplegable propio de los filtros (no es un <select> nativo: Chrome en
   Windows dibuja esa lista con el widget del sistema operativo e ignora el
   CSS de los <option>). El botón conserva la píldora del buscador y la lista
   copia el estilo del menú "Propiedades" del nav (.dropdown-propiedades). */
.filtro-select { position: relative; width: 100%; }
.filtro-select-boton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Holgura para el rótulo: "Tipo de operación" mide 138px y con el relleno
       de antes (1.2rem a la derecha y 0.5rem de separación de la flecha) el
       hueco quedaba justo al pixel en anchos cercanos a los 992px, así que
       aparecían puntos suspensivos. Estos ~8px lo despegan del límite. */
    gap: 0.35rem;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    font-family: var(--tipografia2);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    color: var(--azul);
    background: rgba(0, 102, 144, 0.06);
    border: 1px solid rgba(0, 102, 144, 0.2);
    border-radius: 50px;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.filtro-select-boton:hover {
    background: rgba(0, 102, 144, 0.1);
    border-color: var(--azulSecundario);
}
.filtro-select-boton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(80, 184, 209, 0.25);
}
.filtro-select.abierto .filtro-select-boton {
    background: rgba(0, 102, 144, 0.1);
    border-color: var(--azulSecundario);
    box-shadow: 0 0 0 3px rgba(80, 184, 209, 0.25);
}
.filtro-select-valor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filtro-select-valor.es-placeholder { color: rgba(0, 102, 144, 0.55); font-weight: 400; }
.filtro-select-flecha {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--azulSecundario);
    transition: transform var(--transition-base);
}
.filtro-select.abierto .filtro-select-flecha { transform: rotate(180deg); }
.filtro-opciones {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    /* Sin min-width: el left/right a 0 ya le da exactamente el ancho de su
       píldora. Con el mínimo de 210px que tenía, en ventanas cercanas a los
       1024px la lista sobresalía ~10px por la derecha del campo al que
       pertenece y la primera opción se partía en dos renglones. */
    min-width: 0;
    /* Red de seguridad para pantallas muy bajas (un teléfono en horizontal):
       la lista se desplaza dentro de sí misma en lugar de dejar opciones fuera
       de la vista. El tope no se fija aquí porque depende del hueco que haya en
       ese momento: se lo calcula /JS/filtros-select.js al abrirla. */
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.6rem 0.4rem;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(80, 184, 209, 0.45);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    z-index: 60;
}
.filtro-select.abierto .filtro-opciones {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* La lista abre hacia arriba cuando abajo no cabe. La clase la pone
   /JS/filtros-select.js midiendo el hueco real, igual que la ventanita de las
   tarjetas decide su lado. Hace falta por el buscador del hero de la portada:
   ahí el buscador es el último elemento de una sección de 100vh, así que bajo
   el campo nunca quedan más de unos 98px de pantalla y la lista de "Tipo de
   inmueble" mide unos 250px — se abriría fuera de la vista. En /propiedades
   sobra sitio hacia abajo y esta clase no se aplica. */
.filtro-select.abre-arriba .filtro-opciones {
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateY(6px);
}
.filtro-select.abre-arriba.abierto .filtro-opciones { transform: translateY(0); }
.filtro-opcion {
    width: calc(100% - 0.6rem);
    margin: 0 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-family: var(--tipografia2);
    font-size: 0.92rem;
    text-align: left;
    color: var(--azul);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.filtro-opcion i { color: var(--azulSecundario); font-size: 1rem; width: 18px; flex-shrink: 0; }
/* .resaltada es el "por aquí vas" del teclado: al recorrer la lista con las
   flechas el foco se queda en la píldora (ver /JS/filtros-select.js), así que
   hace falta marcar la opción de otra forma. Se pinta igual que el hover para
   que ratón y teclado se lean como lo mismo. */
.filtro-opcion:hover,
.filtro-opcion.resaltada {
    background: rgba(0, 102, 144, 0.1);
    transform: translateX(3px);
}
.filtro-opcion.activa {
    background: var(--azulSecundario);
    color: #ffffff;
    font-weight: 600;
}
.filtro-opcion.activa i { color: #ffffff; }
.propiedad-card {
    position: relative;
    background: var(--blanco);
    border: 1.5px solid rgba(80, 184, 209, 0.4);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.propiedad-card:hover,
.propiedad-card.popover-activo {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--azulSecundario);
    /* El hover mueve la tarjeta con transform, lo que crea su propio contexto
       de apilamiento: sin este z-index, la ventanita flotante (z-index: 30)
       queda atrapada dentro de ese contexto y se pinta debajo de la tarjeta
       vecina en vez de encima. */
    z-index: 40;
}
.propiedad-card .propiedad-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

/* Ventana flotante con mapa y detalles: semi-transparente y del lado
   izquierdo de la tarjeta por default; propiedades.js mide el espacio
   disponible en cada hover y agrega .popover-derecha si no cabe a la
   izquierda, así nunca queda cortada por el borde de la pantalla. */
.propiedad-popover {
    position: absolute;
    top: 10px;
    right: calc(100% + 14px);
    left: auto;
    width: min(300px, 88vw);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 2px solid var(--azulSecundario);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xl);
    padding: 0.9rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 30;
}
.propiedad-popover.popover-derecha {
    right: auto;
    left: calc(100% + 14px);
    transform: translateX(8px);
}
.propiedad-card:hover .propiedad-popover,
.propiedad-card.popover-activo .propiedad-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}
/* La flecha que apunta a la tarjeta: un cuadrito girado 45° con SUS DOS
   LADOS EXTERIORES llevando el mismo borde de 2px que la ventana, en vez del
   triángulo de color de fondo que se plantaba encima del marco y se veía como
   una muesca rota. El fondo va sólido para tapar el tramo de borde de la
   ventana que queda detrás de la flecha. */
.propiedad-popover::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -9px;
    width: 15px;
    height: 15px;
    background: #ffffff;
    border-top: 2px solid var(--azulSecundario);
    border-right: 2px solid var(--azulSecundario);
    transform: rotate(45deg);
}
.propiedad-popover.popover-derecha::after {
    right: auto;
    left: -9px;
    border-top: 0;
    border-right: 0;
    border-bottom: 2px solid var(--azulSecundario);
    border-left: 2px solid var(--azulSecundario);
}
.popover-mapa { border-radius: var(--border-radius-sm); overflow: hidden; margin-bottom: 0.6rem; }
.popover-mapa iframe { display: block; width: 100%; height: 140px; border: 0; background: #e9ecef; }
.popover-direccion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--azul);
    text-decoration: none;
    margin-bottom: 0.6rem;
}
.popover-direccion:hover { color: var(--azulSecundario); text-decoration: underline; }
.popover-detalles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.popover-detalles li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-family: var(--tipografia2);
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--azul);
}
.popover-detalles i { color: var(--azulSecundario); flex-shrink: 0; margin-top: 1px; }

/* Portada de una propiedad que existe pero a la que todavía no se le cargan
   fotografías: se muestra el logo. Con el object-fit: cover de una foto normal
   el logo se recorta y queda ilegible, así que aquí se muestra entero y
   centrado sobre un fondo suave. A propósito NO usa el lienzo cuadriculado de
   .proxima-lienzo: esa textura significa "todavía no hay propiedad de este
   tipo", y aquí la propiedad sí existe — lo que falta son las fotos.
   El !important es porque el alto y el object-fit de estas portadas viajan en
   un style inline en las plantillas, que gana por especificidad. */
.portada-sin-foto {
    object-fit: contain !important;
    padding: 1.75rem;
    background: rgba(80, 184, 209, 0.08);
}
/* En el popup del mapa la portada mide 110px de alto: con el relleno normal se
   comería la mitad y el logo saldría diminuto. */
.mapa-popup img.portada-sin-foto { padding: 0.6rem; }

/* ============================================
   TARJETA "PRÓXIMAMENTE" (/propiedades)
   ============================================ */
/* Se pinta una por cada tipo de inmueble que todavía no tiene nada publicado.
   Va montada sobre .propiedad-card a propósito: hereda el borde de 1.5px, el
   radio de 30px, --shadow-md y el mismo hover de siempre. Así se lee como una
   hermana más de la rejilla y no como un error de la página; todo lo de abajo
   son solo las diferencias.
   El borde se deja SÓLIDO como el de las reales: un borde punteado se ve desde
   la otra punta de la pantalla y rompe el parentesco, que es lo que más caro
   sale. La señal de "esto todavía no es una propiedad" la dan el badge, la
   falta de foto y el texto, que es donde sí se puede decir sin gritar.
   Nota: esta tarjeta no lleva .propiedad-popover, y propiedades.js ya está
   escrito con `if (popover)` e `if (iframe ...)`, así que no truena ni carga
   un iframe de Maps de más. */
.propiedad-card-proxima {
    /* .propiedad-card no fija altura y el stretch de Bootstrap llega a la .col
       y ahí se detiene. Como esta tarjeta tiene menos que contar que una ficha
       real, sin esto quedaría más corta y el renglón se vería cojo. */
    height: 100%;
    /* Para cuando cae sola en una fila nueva y no tiene a quién igualarse. */
    min-height: 430px;
    display: flex;
    flex-direction: column;
    /* Velo de acento que se disuelve hacia el blanco: la única licencia de
       fondo, y sale de la paleta. Ningún color nuevo. */
    background: linear-gradient(180deg, rgba(80, 184, 209, 0.04), var(--blanco) 42%);
}
.propiedad-card-proxima > .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Los botones se van al fondo: cuando la tarjeta estira para igualar el
   renglón quedan exactamente a la altura del "Agendar visita" de las tarjetas
   reales de al lado, y la fila se lee pareja aunque el contenido sea distinto. */
.proxima-acciones { margin-top: auto; }

/* Lienzo que sustituye a la fotografía. Los 190px no son un número bonito: son
   el alto exacto que la <img> de una tarjeta real trae en su style inline
   (pages/propiedades.php). El badge está anclado a top:26px de este bloque, así
   que con cualquier otra altura dejaría de alinearse con las tarjetas vecinas,
   que es lo que más rápido delata un placeholder mal hecho.
   El fondo es papel de plano: dos rejillas finas de --azul al 7% sobre un
   degradado de la paleta. Cero imágenes, así que no hay nada que descargar ni
   nada que se vea pixeleado a 1920px. El velo radial blanco va en la PRIMERA
   capa (queda encima) para apagar la rejilla justo donde cae el badge. */
.proxima-lienzo {
    flex: 0 0 190px;
    height: 190px;
    background-color: rgba(80, 184, 209, 0.07);
    background-image:
        radial-gradient(circle at 38% 45%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 62%),
        linear-gradient(rgba(0, 102, 144, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 144, 0.07) 1px, transparent 1px),
        linear-gradient(140deg, rgba(80, 184, 209, 0.16), rgba(0, 102, 144, 0.05));
    background-size: 100% 100%, 22px 22px, 22px 22px, 100% 100%;
}
/* Silueta del tipo, con el mismo icono bi-* que ya usan el nav y los filtros.
   Se sale del lienzo por la derecha y por abajo a propósito: el recorte que le
   hace el overflow de .propiedad-media la convierte en marca de agua de una
   lámina. Al 13% se queda por debajo del texto en la jerarquía. */
.proxima-silueta {
    position: absolute;
    right: -0.75rem;
    bottom: -1.75rem;
    font-size: 8rem;
    line-height: 1;
    color: var(--azul);
    opacity: 0.13;
    pointer-events: none;
}

/* Mismo cuerpo de letra que el título de una tarjeta real; allá va en un style
   inline, aquí en la hoja para no repetir el clamp en cada tarjeta. */
.proxima-titulo { font-size: clamp(1rem, 1.6vw, 1.15rem); }

/* En :root no hay ningún gris de texto (--negro es una sombra rgba, no un
   color), y atenuar el azul lo baja de 4.5:1 de contraste. Así que este texto
   secundario se distingue por TAMAÑO y FAMILIA, no por un color deslavado —
   que es lo que ya hacen .popover-detalles y .propiedad-extras. Tampoco se
   reutiliza .propiedad-ubicacion: su --azulSecundario sobre blanco no alcanza
   AA para un párrafo. */
.proxima-nota {
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--azul);
}

/* Son los botones del sitio (.btnMejorado + .btn-inmueble); estos modificadores
   solo traen a la hoja los colores que en las tarjetas reales viajan en un
   style inline. No se les cambia el color al hover: .btnMejorado:hover ya pinta
   de --azul y sube 3px, y ese lift con sombra es señal suficiente. Se descartó
   mandar el hover a --azulSecundario porque blanco sobre #50b8d1 da 2.3:1 y
   reprueba AA. */
.btn-proxima-solido {
    background: var(--azul);
    color: var(--blanco);
    border-color: transparent;
}
/* El fantasma es el mismo "Agendar visita" de las tarjetas reales. .btnMejorado
   ya trae un borde de 2px transparente, así que ponerlo aquí no cambia el
   tamaño ni desalinea el par de botones. */
.btn-proxima-fantasma {
    background: transparent;
    color: var(--azul);
    border: 2px solid var(--azul);
}
/* Bootstrap dibuja su anillo de foco con una variable que solo definen sus
   variantes (.btn-primary y compañía); como aquí el botón es .btn a secas, esa
   sombra se queda en nada y al navegar con teclado no se vería el foco. Se
   resuelve con outline —no con box-shadow— para que no lo tape el borde de 2px,
   y con offset para que se apoye en el blanco de la tarjeta, que es donde de
   verdad se ve. */
.btn-proxima-solido:focus-visible,
.btn-proxima-fantasma:focus-visible {
    outline: 3px solid var(--azulSecundario);
    outline-offset: 3px;
}
/* Bootstrap trae .btn { --bs-btn-hover-border-color: transparent } y su regla
   .btn:focus-visible pinta el borde con esa variable — con dos clases, así que
   le gana a .btn-proxima-fantasma y el borde azul desaparecía justo al navegar
   con teclado. En las tarjetas reales no pasa porque ahí el borde va en un
   style inline; aquí hay que devolverlo a mano. */
.btn-proxima-fantasma:focus-visible,
.btn-proxima-fantasma:hover {
    border-color: var(--azul);
}

/* Pantallas chicas: la tarjeta pasa a ancho completo y el lienzo se vuelve muy
   panorámico, así que la silueta se achica para no comérselo. La altura de
   190px NO se toca: es el ancla que mantiene el badge alineado con el de las
   tarjetas de arriba y de abajo. */
@media (max-width: 575px) {
    .proxima-silueta { font-size: 6.5rem; bottom: -1.25rem; }
}

/* Quien pidió menos movimiento conserva el cambio de borde y de sombra del
   hover —el aviso de "esto responde" no se pierde—, pero sin el brinco, que es
   la parte que marea. Está acotado a la tarjeta nueva porque es código nuevo:
   extenderlo a toda .propiedad-card cambiaría el comportamiento de un
   componente que ya está en producción, y eso es otra decisión. */
@media (prefers-reduced-motion: reduce) {
    .propiedad-card.propiedad-card-proxima:hover,
    .propiedad-card-proxima .btn-proxima-solido:hover,
    .propiedad-card-proxima .btn-proxima-fantasma:hover {
        transform: none;
    }
}

/* ============================================
   FICHA DE PROPIEDAD (/propiedad/{slug})
   ============================================ */
/* Fila superior: ruta de navegación a la izquierda, "Compartir" a la derecha. */
.ficha-barra-superior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.ficha-compartir-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0.5rem 1.15rem;
    border-radius: 50px;
    border: 1.5px solid rgba(80, 184, 209, 0.6);
    background: var(--blanco);
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.ficha-compartir-btn:hover {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--blanco);
    transform: translateY(-2px);
}
.ficha-compartir-btn i { font-size: 0.9rem; }

.ficha-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--tipografia2);
    font-size: 0.85rem;
}
.ficha-breadcrumb a {
    color: var(--azulSecundario);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
}
.ficha-breadcrumb a:hover { color: var(--azul); text-decoration: underline; }
.ficha-breadcrumb i { font-size: 0.6rem; color: rgba(0, 102, 144, 0.35); }
.ficha-breadcrumb span { color: var(--azul); font-weight: 600; }

/* La foto principal ocupa todo el ancho del contenedor (~1000px), así que
   necesita bastante altura para no quedar como una franja panorámica: con
   360px el recorte de object-fit se comía casi toda la imagen y se veía
   estirada. 520px la deja cerca de 2:1, un encuadre natural para fotos de
   inmuebles, y la tira de miniaturas sigue cabiendo completa al lado. */
@media (min-width: 768px) {
    .ficha-galeria .galeria-img {
        height: 520px;
    }
}
.ficha-galeria .galeria-img { cursor: pointer; }

/* Botón "Ver todas (N)" sobre la galería: abre el lightbox con todas las fotos */
.ver-todas-fotos {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 20, 35, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 0.55rem 1.1rem;
    border-radius: 50px;
    font-family: var(--tipografia2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.ver-todas-fotos:hover { background: rgba(0, 20, 35, 0.85); transform: translateY(-2px); }

/* Precio anclado a la derecha de la fila del título (ms-lg-auto) y resaltado:
   es el dato que más pesa en la decisión, así que va con más fuerza visual
   que el badge de operación o el título. */
.ficha-precio-badge {
    display: inline-flex;
    align-items: center;
    background: var(--azul);
    color: #ffffff;
    font-family: var(--tipografia);
    font-weight: 800;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    padding: 0.5rem 1.4rem;
    border-radius: 50px;
    box-shadow: var(--shadow-md);
}
/* En la ficha el badge es un inline-flex holgado y con su propio renglón, así
   que ahí la nota cabe AL LADO del monto en vez de debajo, separada por una
   línea. (Nunca coincide con .es-consultar: precio_es_a_tratar() exige que haya
   cifra, así que el fondo siempre es el azul sólido y la línea blanca contrasta.) */
.ficha-precio-badge .precio-a-tratar {
    display: inline;
    margin: 0 0 0 0.6rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.45);
}

/* Sin precio cargado el badge deja de ser el dato más fuerte de la fila: se
   achica para no empujar el título fuera del renglón y se pinta en hueco,
   porque es una invitación a preguntar, no una cifra. */
.ficha-precio-badge.es-consultar {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 700;
    background: transparent;
    color: var(--azul);
    border: 2px solid var(--azulSecundario);
    box-shadow: none;
}

/* Galería principal + tira de miniaturas al lado */
.ficha-galeria-wrap {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.ficha-galeria-principal { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* Botones de la galería principal: más grandes y más separados del borde
   que en los carruseles chicos (tarjetas), donde este mismo .galeria-btn
   se queda en su tamaño normal. */
/* Las flechas de la foto principal van más robustas que las del carrusel de
   la portada: aquí la foto es grande y el botón se perdía encima de ella.
   Borde más grueso, fondo menos translúcido y una sombra suave para que se
   despeguen de la imagen sea clara u oscura. El icono crece con el botón,
   que en un icono de fuente es lo que engrosa el trazo. */
.ficha-galeria .galeria-btn {
    width: 58px;
    height: 58px;
    border-width: 3px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 14px rgba(0, 32, 48, 0.2);
}
.ficha-galeria .galeria-btn i { font-size: 1.6rem; }
.ficha-galeria .galeria-btn-izq { left: 36px; }
.ficha-galeria .galeria-btn-der { right: 36px; }
/* Las miniaturas se REPARTEN la altura de la foto principal (flex: 1 1 0) en
   vez de tener una altura fija con scroll: así la tira siempre cabe completa
   al lado, sin barra de desplazamiento, sea cual sea el número de fotos. */
.galeria-miniaturas {
    flex: 0 0 96px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.galeria-miniatura {
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    width: 96px;
    border-radius: var(--border-radius-sm);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.25s ease, border-color 0.25s ease;
}
.galeria-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria-miniatura:hover { opacity: 0.9; }
.galeria-miniatura.activa { opacity: 1; border-color: var(--azulSecundario); }
@media (max-width: 767px) {
    .ficha-galeria-wrap { flex-direction: column; }
    /* En móvil la foto se ve mucho más angosta, así que la flecha se recorta
       un poco para no comerse el encuadre; conserva el borde grueso, que es
       lo que de verdad la hace legible sobre la imagen. */
    .ficha-galeria .galeria-btn { width: 46px; height: 46px; }
    .ficha-galeria .galeria-btn i { font-size: 1.25rem; }
    .ficha-galeria .galeria-btn-izq { left: 22px; }
    .ficha-galeria .galeria-btn-der { right: 22px; }
    /* En columna la tira pasa a ser una fila debajo de la foto: se acomoda en
       varios renglones (wrap) en lugar de desplazarse en horizontal. */
    .galeria-miniaturas {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
    .galeria-miniatura { flex: 0 0 auto; width: 84px; height: 64px; }
}

/* Vías de contacto directo, debajo del formulario de la ficha: para quien
   prefiere llamar o escribir en lugar de llenar campos. */
/* El bloque de contactos se ancla al fondo del panel: cuando la tarjeta del
   formulario se estira para emparejar con la columna de al lado, el alto
   sobrante cae en la separación natural entre el formulario y los contactos,
   no como hueco muerto al final. El padding conserva la separación mínima
   de siempre cuando no hay nada que repartir. */
.ficha-contactos-directos {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(0, 102, 144, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ficha-contactos-titulo {
    font-family: var(--tipografia2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--azulSecundario);
    margin-bottom: 0.15rem;
}
.ficha-contacto-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(80, 184, 209, 0.35);
    background: rgba(80, 184, 209, 0.07);
    text-decoration: none;
    transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.ficha-contacto-item:hover {
    background: rgba(80, 184, 209, 0.16);
    border-color: var(--azulSecundario);
    transform: translateX(3px);
}
.ficha-contacto-item > i {
    font-size: 1.1rem;
    color: var(--azulSecundario);
    flex-shrink: 0;
}
.ficha-contacto-item span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ficha-contacto-item strong {
    font-family: var(--tipografia2);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--azul);
    word-break: break-word;
}
.ficha-contacto-item small {
    font-family: var(--tipografia2);
    font-size: 0.76rem;
    color: var(--azulSecundario);
}

/* Tarjeta de la Descripción */
.ficha-descripcion-card { }
.ficha-descripcion-texto p:last-child { margin-bottom: 0; }
.ficha-clave {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 102, 144, 0.2);
    font-family: var(--tipografia2);
    font-size: 0.8rem;
    color: var(--azulSecundario);
}
.ficha-clave strong { color: var(--azul); }

/* Grid de especificaciones (Características de la propiedad) */
/* Las columnas necesitan caber la etiqueta más larga ("2 Estacionamientos",
   "Construcción: 220 m²") en un solo renglón: con 150px el texto se partía y
   dejaba el número huérfano arriba de la palabra, desalineando la tarjeta
   frente a sus vecinas. */
.ficha-especificaciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 0.9rem;
}
.especificacion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: rgba(80, 184, 209, 0.08);
    border: 1px solid rgba(80, 184, 209, 0.25);
    border-radius: var(--border-radius-sm);
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
}
.especificacion-item i { color: var(--azulSecundario); font-size: 1.15rem; flex-shrink: 0; }

/* Ficha técnica: los datos duros del inmueble (uso de suelo, servicios
   contratados, tomas de agua...). Etiqueta arriba en versalitas y valor abajo,
   en vez de dos columnas: los rótulos largos como "Ventilación e iluminación
   natural" no caben al lado del valor en la columna angosta de la ficha. */
.ficha-datos {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
}
.ficha-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(80, 184, 209, 0.28);
}
.ficha-dato:last-child { padding-bottom: 0; border-bottom: 0; }
.ficha-dato dt {
    font-family: var(--tipografia2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--azulSecundario);
}
.ficha-dato dd {
    margin: 0;
    font-family: var(--tipografia2);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--azul);
}

/* Distribución de espacios: una tarjeta por zona del inmueble. Reutiliza el
   mismo relleno y borde de acento que .alrededor-item usaba antes, para que la
   sección se sienta parte de la ficha y no un bloque traído de otro sitio. */
.zona-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    background: rgba(80, 184, 209, 0.07);
    border: 1px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-sm);
}
.zona-card-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid rgba(80, 184, 209, 0.3);
    font-family: var(--tipografia);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--azul);
}
.zona-card-titulo i { color: var(--azulSecundario); font-size: 1.15rem; flex-shrink: 0; }
.zona-card-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.zona-card-lista li {
    position: relative;
    padding-left: 0.95rem;
    font-family: var(--tipografia2);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--azul);
}
/* Viñeta dibujada a mano: un <li> con list-style no permite darle color propio
   al punto sin ::marker, que Safari soportó tarde. */
.zona-card-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--azulSecundario);
}

/* "Qué hay alrededor": cada categoría es un enlace a la búsqueda en el mapa.
   El mínimo de 180px (y no 200) es para que las 6 categorías quepan en un solo
   renglón ahora que la tarjeta va a lo ancho de la página. */
.ficha-alrededor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}
.alrededor-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 0.9rem;
    background: rgba(80, 184, 209, 0.07);
    border: 1px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.alrededor-item > i:first-child {
    color: var(--azulSecundario);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.alrededor-item span { flex: 1; min-width: 0; }
/* Nombre del lugar arriba y su distancia o nota abajo, en la misma tesitura
   que los contactos directos del formulario (strong + small apilados). */
.alrededor-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.alrededor-texto strong {
    font-weight: 600;
    line-height: 1.25;
}
.alrededor-texto small {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--azulSecundario);
    line-height: 1.3;
}
/* La flecha de "abre en otra pestaña" se insinúa y se afirma en el hover */
.alrededor-flecha {
    font-size: 0.7rem;
    color: var(--azulSecundario);
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity var(--transition-base);
}
.alrededor-item:hover {
    background: rgba(80, 184, 209, 0.16);
    border-color: var(--azulSecundario);
    transform: translateX(3px);
}
.alrededor-item:hover .alrededor-flecha { opacity: 1; }

/* Grid de amenidades / características destacadas */
.ficha-amenidades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.7rem 1rem;
}
/* Cada amenidad es un chip con su propio icono representativo (llave, cochera,
   seguridad... ver icono_amenidad() en helpers.php), con el mismo lenguaje
   visual que los lugares de "Qué hay alrededor": así las dos tarjetas se leen
   como hermanas aunque una hable del inmueble y la otra del entorno. */
.amenidad-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.7rem 0.9rem;
    background: rgba(80, 184, 209, 0.07);
    border: 1px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
}
.amenidad-item i { color: var(--azulSecundario); font-size: 1.15rem; flex-shrink: 0; }

/* Lightbox de la galería completa: fondo oscuro a pantalla completa,
   navegación con flechas/teclado y contador "3 / 7". */
.lightbox-galeria {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 18, 32, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 2000;
}
.lightbox-galeria.visible { opacity: 1; visibility: visible; }
.lightbox-imagen-wrap { position: relative; max-width: min(88vw, 1100px); }
.lightbox-imagen-wrap img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    margin: 0 auto;
    border-radius: var(--border-radius-md);
    object-fit: contain;
    box-shadow: var(--shadow-xl);
}
.lightbox-contador {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: #ffffff;
    font-family: var(--tipografia2);
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.lightbox-cerrar,
.lightbox-flecha {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.25s ease;
    z-index: 5;
}
.lightbox-cerrar:hover,
.lightbox-flecha:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-cerrar {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}
.lightbox-flecha {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
}
.lightbox-flecha-izq { left: 24px; }
.lightbox-flecha-der { right: 24px; }
@media (max-width: 576px) {
    .lightbox-flecha { width: 42px; height: 42px; font-size: 1.15rem; }
    .lightbox-flecha-izq { left: 10px; }
    .lightbox-flecha-der { right: 10px; }
    .lightbox-cerrar { top: 12px; right: 12px; }
}

/* Toast "enlace copiado": fijo y oculto por defecto; compartir.js le
   pone/quita .visible durante 2.8s */
.toast-compartir {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(16px);
    display: flex;
    align-items: center;
    background: var(--azul);
    color: var(--blanco);
    font-family: var(--tipografia2);
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 2000;
}
.toast-compartir i {
    color: var(--azulSecundario);
}
.toast-compartir.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   FOOTER (versión final: azul claro + fondo)
   ============================================ */
footer {
    position: relative;
    background-color: #eaf6fb;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
footer > .container { position: relative; z-index: 2; }
footer h6,
footer p,
footer span,
footer .small {
    color: var(--azul) !important;
}
footer a { color: var(--azul) !important; }
footer a:hover { color: var(--azulSecundario) !important; }
footer i { color: var(--azulSecundario) !important; }
footer .border-bottom { border-color: rgba(0, 102, 144, 0.25) !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1250px) {
    .linea-tope-carrusel { display: none; }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .navegacion .navbar-nav.mx-auto .nav-item { margin: 0 0.15rem; }
    .nav-btn { padding: 0.5rem 0.8rem !important; font-size: 0.95rem; }
}
@media (max-width: 991px) {
    main { padding-top: 19%; }
    .navbar-nav { margin: 1rem 0; padding-top: 5%; padding-bottom: 4%; }
    .nav-btn, .nav-btn-contacto { width: 100%; justify-content: center; margin: 0.2rem 0; }
    .nav-contacto { margin-left: 0; margin-top: 0.5rem; }
    .dropdown-propiedades {
        position: static !important;
        transform: none;
        width: 100%;
        background: rgba(0, 102, 144, 0.05);
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: var(--border-radius-sm);
        padding: 0.3rem 0;
        margin: 0.3rem 0;
    }
    .historia-seccion { padding: 70px 0; }
    .historia-card { padding: 2.2rem 1.6rem; }
}
@media (max-width: 768px) {
    .servicio-card .card-body { padding: 1.5rem; }
    .divisor-personalizado { margin: 1.5rem auto; }
}
@media (max-width: 767px) {
    .galeria-img { height: 280px; }
}
@media (max-width: 576px) {
    .buscador-container { border-radius: 20px; padding: 1rem; }
    /* Con el dedo, 41.6px de alto quedan justos y las opciones van pegadas una
       a otra: en móvil se les da un renglón más de alto para no tocar la de al
       lado por error. */
    .filtro-opcion { padding: 0.7rem 1rem; }
}
/* ============================================
   "NUESTRO ENFOQUE" (nosotros.php) — LÁMINA EDITORIAL
   La foto no acompaña al texto: lo sostiene. Se ancla con sticky mientras el
   mosaico pasa por delante, y el texto se le monta encima.
   Este bloque va AL FINAL del archivo a propósito: .enfoque-colofon-btn:hover y
   .enfoque-divisor:hover empatan en especificidad con .btnMejorado:hover y
   .divisor-personalizado:hover, y solo ganan por orden de aparición.
   ============================================ */
.enfoque-editorial-seccion { padding: 60px 0; }
.enfoque-editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }

/* --- Rejilla asimétrica: la foto se queda con 5 de 12 columnas. Que NO sean
   6 y 6 es lo que hace que se lea como página de revista. --- */
@media (min-width: 992px) {
    .enfoque-editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 2rem; }
    /* stretch explícito: la lámina ocupa las DOS filas de la rejilla, así que
       su carril mide lo que miden placa y mosaico juntos. De ahí saca la foto
       su altura (height: 100%) y por eso las dos columnas terminan parejas. */
    .enfoque-lamina  { grid-column: 1 / 6;  grid-row: 1 / 3; align-self: stretch; }
    .enfoque-placa   { grid-column: 6 / 13; grid-row: 1; align-self: start; }
    .enfoque-mosaico { grid-column: 6 / 13; grid-row: 2; align-self: start; }
}

/* --- El marco de la foto --- */
.enfoque-lamina { margin: 0; min-width: 0; }
.enfoque-lamina-marco {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    /* La proporción se decide por breakpoint y no aquí: en escritorio la foto
       llena su carril (bloque de 992px), y al apilarse pasa a apaisada —16/10 y
       4/3 en móvil—. Ver esas dos media queries; entre las dos cubren todos los
       anchos, así que una proporción base sería letra muerta. */
    background: #0b3d54;   /* color de espera mientras carga la foto */
}
/* En escritorio la foto LLENA su carril, en alto y en ancho, para que las dos
   columnas de la composición empiecen y terminen a la misma altura.
   Antes el aspect-ratio 2/3 mandaba junto con un max-height de 70vh: en una
   ventana de 900px eso topaba la foto en 630px de alto y, por la proporción,
   la encogía a 420px de ancho dentro de un carril de 517 — quedaban 97px de
   hueco a su derecha y la columna de texto la rebasaba 194px por abajo.
   Al llenar el carril el anclado (position: sticky) se queda sin recorrido, así
   que se retira: sin desplazamiento posible solo sería complejidad muerta. El
   recorte lo sigue resolviendo object-fit: cover con su object-position. */
@media (min-width: 992px) {
    .enfoque-lamina-marco {
        aspect-ratio: auto;
        max-height: none;
        height: 100%;
    }
}
.enfoque-lamina-lente { position: absolute; inset: 0; transition: transform 1.1s ease; }
.enfoque-lamina-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 78% horizontal: cúpula grande sangrando por la derecha, torre central en
       el eje, ciudad al fondo. ESTE es el número a mover si el recorte no
       convence. 45% vertical: conserva cielo y no se come el follaje. */
    object-position: 78% 45%;
}
/* Velo en dos tiempos: tinte de marca leve sobre toda la foto (el mismo recurso
   de .nosotros-hero-overlay, para que no se lea "cruda") y un degradado opaco
   en la base, que es donde va la frase en blanco. Si la cita costara leerse, el
   0.94 del primer tramo es lo que hay que subir. */
.enfoque-lamina-velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 58, 84, 0.94) 0%, rgba(0, 66, 95, 0.66) 26%,
                        rgba(0, 102, 144, 0.10) 52%, rgba(0, 102, 144, 0) 100%),
        linear-gradient(160deg, rgba(0, 102, 144, 0.16) 0%, rgba(80, 184, 209, 0.12) 100%);
}
.enfoque-lamina-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.75rem 1.6rem 1.9rem;
    z-index: 2;
}
.enfoque-lamina-regla {
    display: block;
    width: 44px;
    height: 3px;
    margin-bottom: 0.9rem;
    border-radius: 3px;
    background: var(--azulSecundario);
    transition: width var(--transition-base);
}
.enfoque-lamina-cita {
    margin: 0;
    font-family: var(--tipografia);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.3;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 20, 35, 0.55);
}

/* --- La placa: el único solape de la composición --- */
.enfoque-placa {
    position: relative;
    z-index: 3;
    background: var(--blanco);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 18px 44px rgba(0, 40, 70, 0.12);
    padding: 2.25rem 2.25rem 2rem;
}
/* La placa ya NO sangra sobre la foto. Tenía un margin-left negativo de
   -7.5rem para montarse 80px encima, pero eso la dejaba sobresaliendo 120px a
   la izquierda de las piezas del mosaico: la columna derecha tenía dos bordes
   izquierdos distintos y se leía descuadrada. Ahora placa y mosaico arrancan en
   la misma línea, pegada al canto derecho de la foto. */
@media (min-width: 1200px) {
    .enfoque-placa { padding: 2rem 2.4rem 1.8rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .enfoque-placa { padding: 1.8rem 1.9rem 1.6rem; }
}
/* El rótulo reutiliza .titulos-seccion, igual que NUESTRA ACTIVIDAD y NUESTROS
   PRINCIPIOS; aquí solo se le ajusta el tamaño y el espaciado de letra, que en
   esas dos secciones iban en un style inline. */
.enfoque-rotulo {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.enfoque-titulo { margin: 0.6rem 0 0; }
/* .divisor-personalizado viene con width:20% y márgenes auto; aquí va corto y a
   la izquierda. Se re-declara el :hover para que no salte a los 120px. */
.enfoque-divisor { width: 64px; margin: 1.1rem 0 1.25rem; }
.enfoque-divisor:hover { width: 96px; }
.enfoque-entradilla {
    margin: 0;
    font-family: var(--tipografia2);
    font-weight: 300;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--azul);
}

/* --- El mosaico: colocación explícita pieza por pieza --- */
.enfoque-mosaico { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* Fuera de toda media query: si solo se declarara en 992px o más, en tableta el
   colofón caería en una celda de la rejilla de 2 columnas y el botón quedaría
   a media anchura. */
.enfoque-colofon { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .enfoque-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enfoque-pieza-eje { grid-column: 1 / -1; }
}
/* 992-1199: 4 columnas y no 6. Con 6 las piezas menores quedan tan angostas que
   el texto se parte en cuatro renglones. */
@media (min-width: 992px) and (max-width: 1199px) {
    .enfoque-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
    .enfoque-pieza-eje { grid-column: 1 / -1; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(2) { grid-column: 1 / 3; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(3) { grid-column: 3 / 5; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(4) { grid-column: 1 / 3; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(5) { grid-column: 3 / 5; }
}
/* 1200 o más: rejilla de 6 columnas. Las piezas iban con margin-top de
   desfase (1.25rem, 0.75rem, 0.35rem) para "romper la reja", pero cada una
   arrancaba y terminaba a distinta altura y el conjunto se leía desordenado.
   Ahora van a la reja: dos filas limpias —01 grande con 02 al lado, y 03/04/05
   abajo— y align-items: stretch para que las piezas de una misma fila midan
   igual y sus bordes inferiores coincidan. */
@media (min-width: 1200px) {
    .enfoque-mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
    .enfoque-pieza-eje { grid-column: 1 / 5; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(2) { grid-column: 5 / 7; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(3) { grid-column: 1 / 3; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(4) { grid-column: 3 / 5; }
    .enfoque-mosaico > .enfoque-pieza:nth-child(5) { grid-column: 5 / 7; }
}

/* Cada pieza es un enlace entero a su categoría en /servicios, igual que las
   filas de esa página: así el hover que las levanta lleva a algún lado y quien
   navega con teclado tiene algo que enfocar. */
.enfoque-pieza {
    position: relative;
    display: block;
    text-decoration: none;
    /* min-width obligatorio: los items de grid traen min-width:auto y una
       palabra larga desbordaría la columna. */
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    padding: 1.15rem 1.25rem 1rem;
    background: var(--blanco);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 8px rgba(0, 40, 70, 0.05);
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                border-color var(--transition-base), filter var(--transition-base);
}
/* La pieza eje es el negocio central. La jerarquía la dan el tamaño y el color,
   no un ícono más grande. Mismo degradado que .acordeon-bloque-icono. */
.enfoque-pieza-eje {
    background: linear-gradient(150deg, var(--azul) 0%, #004d6e 100%);
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 102, 144, 0.22);
    padding: 1.45rem 1.6rem 1.3rem;
}
/* Cifra fantasma: el recurso que convierte cinco cajas en un índice editorial.
   El relleno va aparte del contorno: si el navegador ignorara
   -webkit-text-stroke, el número se sigue viendo como tinte. */
.enfoque-cifra {
    position: absolute;
    top: 0.5rem;
    right: 0.85rem;
    font-family: var(--tipografia);
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: rgba(80, 184, 209, 0.14);
    -webkit-text-stroke: 1.5px rgba(80, 184, 209, 0.34);
    pointer-events: none;
    user-select: none;
}
.enfoque-pieza-eje .enfoque-cifra {
    color: rgba(255, 255, 255, 0.13);
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.30);
}
.enfoque-pieza-icono { font-size: 1.35rem; color: var(--azulSecundario); }
.enfoque-pieza-eje .enfoque-pieza-icono { color: #9be1f7; }   /* el celeste que ya usa el h1 del hero */
/* position:relative en título, apoyo y flecha: van por encima de la cifra. */
.enfoque-pieza-titulo {
    position: relative;
    margin: 0.45rem 0 0.3rem;
    font-family: var(--tipografia);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--azul);
}
.enfoque-pieza-eje .enfoque-pieza-titulo { color: #ffffff; font-size: 1.3rem; }
/* Peso 400 y color --azul, no el 200 de .texto ni el --azulSecundario de
   .categoria-card-resumen: ese celeste sobre blanco da 2.2:1 y no pasa AA; en
   --azul son 5.9:1. Desviación deliberada de la tarjeta de /servicios. */
.enfoque-pieza-apoyo {
    position: relative;
    margin: 0;
    font-family: var(--tipografia2);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--azul);
}
.enfoque-pieza-eje .enfoque-pieza-apoyo { color: rgba(255, 255, 255, 0.88); }
.enfoque-pieza-flecha {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 0.6rem;
    color: var(--azulSecundario);
    font-size: 1rem;
    opacity: 0.45;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.enfoque-pieza-eje .enfoque-pieza-flecha { color: #9be1f7; }
/* El anillo de foco va en blanco sobre la pieza eje: el --azulSecundario se
   pierde contra su degradado oscuro. */
.enfoque-pieza:focus-visible { outline: 3px solid var(--azulSecundario); outline-offset: 3px; }
.enfoque-pieza-eje:focus-visible { outline-color: #ffffff; }
.enfoque-pieza:focus-visible .enfoque-pieza-flecha { opacity: 1; transform: translateX(4px); }

/* --- Colofón: remata el mosaico y sostiene el CTA. Usa la receta de
   .cierre-contacto-card (inicio.php) para que el cierre sea el mismo patrón
   de la casa y no una raya suelta con un botón. --- */
.enfoque-colofon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 0.5rem;
    padding: 1.15rem 1.5rem;
    background: rgba(80, 184, 209, 0.05);
    border: 1.5px solid rgba(80, 184, 209, 0.3);
    border-radius: var(--border-radius-lg);
}
.enfoque-colofon-texto {
    margin: 0;
    font-family: var(--tipografia);
    font-weight: 600;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--azul);
}
/* El botón traía sus colores en un style inline; aquí van en la hoja. */
.enfoque-colofon-btn { background: var(--azul); color: var(--blanco); flex-shrink: 0; }
.enfoque-colofon-btn:hover { background: var(--azulSecundario); color: var(--blanco); }

/* --- Entrada al hacer scroll ---
   El estado oculto SOLO existe si el script cargó (clase js-nosotros en <html>,
   mismo recurso que js-servicios en /servicios): sin JS no se esconde nada. */
.js-nosotros .enfoque-revelar {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.9, 0.35, 1);
}
.js-nosotros .enfoque-revelar.a-la-vista { opacity: 1; transform: none; }
/* El escalonado va aquí y no en un style inline, por la CSP script-src 'self'. */
.js-nosotros .enfoque-mosaico > .enfoque-revelar:nth-child(2) { transition-delay: 0.07s; }
.js-nosotros .enfoque-mosaico > .enfoque-revelar:nth-child(3) { transition-delay: 0.14s; }
.js-nosotros .enfoque-mosaico > .enfoque-revelar:nth-child(4) { transition-delay: 0.21s; }
.js-nosotros .enfoque-mosaico > .enfoque-revelar:nth-child(5) { transition-delay: 0.28s; }
.js-nosotros .enfoque-mosaico > .enfoque-revelar:nth-child(6) { transition-delay: 0.35s; }

/* --- Hover: solo con ratón. En táctil el :hover se queda pegado tras el toque
   y dejaría medio mosaico apagado. El atenuado usa FILTER y no OPACITY para no
   pelearse con la opacity que anima la entrada (son propiedades distintas). --- */
@media (hover: hover) and (pointer: fine) {
    .enfoque-lamina-marco:hover .enfoque-lamina-lente { transform: scale(1.06); }
    .enfoque-lamina-marco:hover .enfoque-lamina-regla { width: 78px; }
    .enfoque-mosaico:hover .enfoque-pieza:not(:hover) { filter: opacity(0.62) saturate(0.7); }
    .enfoque-mosaico .enfoque-pieza:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 34px rgba(0, 40, 70, 0.14);
        border-color: var(--azulSecundario);
    }
    .enfoque-pieza-eje:hover { box-shadow: 0 20px 40px rgba(0, 102, 144, 0.28); }
    .enfoque-pieza:hover .enfoque-pieza-flecha { opacity: 1; transform: translateX(4px); }
}

/* --- Guiño opcional: donde el navegador liga animaciones al scroll, la foto
   hace una panorámica de un 2.2% arriba y abajo. Donde no, no ocurre nada y la
   composición es idéntica. Va sobre la <img> y el hover sobre .lente: así se
   componen en vez de pisarse. --- */
@supports (animation-timeline: view()) {
    @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
        @keyframes enfoquePanoramica {
            from { transform: scale(1.06) translateY(-2.2%); }
            to   { transform: scale(1.06) translateY(2.2%); }
        }
        .enfoque-lamina-img {
            animation: enfoquePanoramica linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}

/* --- 991px o menos: una columna. El solape sobrevive pero en vertical: la placa
   sube sobre el borde inferior de la foto. El solape real = |margin| menos el
   row-gap de 2rem, o sea 48px, y JUSTO ahí abajo va la cita: por eso el pie
   recibe 48px extra de padding inferior, para que la frase suba por encima de
   la placa en vez de quedar medio tapada. --- */
@media (max-width: 991px) {
    .enfoque-editorial-seccion { padding: 56px 0; }
    /* Sin tocar el position: el anclado solo existe dentro de su media query de
       992px, así que aquí ya vale el relative de la regla base. Ponerlo en
       static rompería el velo y la cita, que se posicionan contra este marco. */
    .enfoque-lamina-marco { aspect-ratio: 16 / 10; max-height: none; }
    .enfoque-lamina-img { object-position: 74% 50%; }
    .enfoque-lamina-pie { padding-bottom: calc(1.9rem + 3.5rem); }
    .enfoque-placa { margin: -5rem 1rem 0; z-index: 3; }
}
@media (max-width: 575px) {
    .enfoque-editorial-seccion { padding: 44px 0; }
    .enfoque-lamina-marco { aspect-ratio: 4 / 3; }   /* a 16/10 la banda queda tan baja que las cúpulas no se leen */
    .enfoque-lamina-img { object-position: 72% 48%; }
    /* Mismo cálculo del solape que arriba, con el padding chico de móvil. */
    .enfoque-lamina-pie { padding: 1.25rem 1.1rem calc(1.35rem + 3.5rem); }
    .enfoque-placa { margin: -5rem 0.5rem 0; padding: 1.6rem 1.35rem 1.4rem; }
    .enfoque-cifra { font-size: 2.6rem; top: 0.35rem; right: 0.6rem; }
    .enfoque-colofon { flex-direction: column; align-items: stretch; padding: 1.35rem 1.25rem; }
    .enfoque-colofon-btn { width: 100%; }
}

/* --- Movimiento reducido: todo quieto y en su estado legible. --- */
@media (prefers-reduced-motion: reduce) {
    .js-nosotros .enfoque-revelar,
    .js-nosotros .enfoque-revelar.a-la-vista { opacity: 1; transform: none; transition: none; }
    .enfoque-pieza,
    .enfoque-lamina-lente,
    .enfoque-lamina-regla,
    .enfoque-pieza-flecha { transition: none; }
    .enfoque-mosaico .enfoque-pieza:hover,
    .enfoque-lamina-marco:hover .enfoque-lamina-lente { transform: none; }
    .enfoque-lamina-img { animation: none; }
}

/* ============================================
   "OTRAS PROPIEDADES DISPONIBLES" (ficha)
   ============================================ */
/* Eran tarjetas de foto + título + colonia, y de distinto alto entre sí: la
   .row estira la columna, pero .propiedad-card es display:block y no llenaba
   esa altura, así que una propiedad con la colonia en una línea quedaba más
   corta que otra con la colonia en tres. Ahora la tarjeta llena la columna,
   el llamado a la acción se ancla abajo y todas terminan a la misma altura.
   De paso muestran el tipo de inmueble y un par de datos, para que se parezcan
   a las del catálogo en vez de quedarse en una miniatura suelta. */
.otra-propiedad {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* la foto respeta el radio de la tarjeta */
}
.otra-propiedad-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Etiqueta del tipo, arriba del título: ubica al visitante antes de leer el
   nombre, que no siempre dice de qué se trata ("La Purísima", "Santa Ana"). */
.otra-propiedad-tipo {
    align-self: flex-start;
    margin-bottom: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    background: rgba(0, 102, 144, 0.08);
    color: var(--azul);
    font-family: var(--tipografia2);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
/* El título es el enlace de la tarjeta (.stretched-link), así que hereda color
   y pierde el subrayado para que siga leyéndose como título. */
.otra-propiedad-titulo a {
    color: inherit;
    text-decoration: none;
}
.otra-propiedad:hover .otra-propiedad-titulo a { color: var(--azulSecundario); }
/* Dos líneas como tope: sin esto una colonia larga como la de La Purísima
   empujaba el resto de la tarjeta y volvía a desnivelar la fila. */
.otra-propiedad-zona {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
}
/* Anclado abajo: es lo que iguala visualmente el final de todas las tarjetas. */
.otra-propiedad-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tipografia2);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--azul);
}
.otra-propiedad-cta i { transition: transform var(--transition-base); }
.otra-propiedad:hover .otra-propiedad-cta { color: var(--azulSecundario); }
.otra-propiedad:hover .otra-propiedad-cta i { transform: translateX(4px); }

/* Columna izquierda de la fila Características/Amenidades + Ubicación de la
   ficha: en flex y con la última tarjeta creciendo, para que la columna
   siempre termine a la misma altura que el mapa de al lado. Sin esto, una
   propiedad con pocas amenidades dejaba un hueco muerto bajo su columna
   mientras la otra seguía de largo. El gap replica el gutter g-4 de la fila. */
.ficha-columna-flex {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ficha-columna-flex > .filtros-card:last-child { flex: 1 1 auto; }

/* ============================================
   REPARTO DEL ALTO SOBRANTE EN LA FICHA
   ============================================ */
/* Las filas de la ficha emparejan sus tarjetas por altura, y la que crece
   recibe alto de sobra. Estas reglas deciden QUÉ hace cada tarjeta con él:
   centrar su contenido o repartirlo entre renglones, para que se lea como
   aire de diseño y nunca como un hueco muerto al fondo. */

/* La última tarjeta de una columna flex (Características bajo la Descripción,
   Ficha técnica bajo Amenidades) se vuelve columna para poder repartir. */
.ficha-columna-flex > .filtros-card:last-child {
    display: flex;
    flex-direction: column;
}
/* Chips de Características y rejilla de Amenidades: centrados en vertical,
   así el sobrante se parte mitad arriba y mitad abajo. */
.ficha-columna-flex > .filtros-card:last-child .ficha-especificaciones,
.ficha-columna-flex > .filtros-card:last-child .ficha-amenidades {
    margin-top: auto;
    margin-bottom: auto;
}
/* Tabla de la Ficha técnica: si le toca crecer, los renglones se espacian
   uniformemente en lugar de amontonarse arriba. */
.ficha-columna-flex .ficha-datos {
    flex: 1 1 auto;
    justify-content: space-evenly;
}
/* Párrafo de las tarjetas de nota (sociedad, servicios excluidos): centrado
   cuando su tarjeta se estira para emparejar con la vecina de fila. */
.nota-detalle {
    margin-top: auto;
    margin-bottom: auto;
}
/* Zonas de la distribución de espacios: la lista reparte sus puntos en el
   alto de la tarjeta, para que una zona de 2 equipos no termine con un
   vacío al fondo junto a una de 3. */
.zona-card-lista {
    flex: 1 1 auto;
    justify-content: space-evenly;
}

/* La tarjeta del formulario es columna flex solo para que el bloque de
   contactos de arriba pueda anclarse al fondo con margin-top: auto. */
#contactar {
    display: flex;
    flex-direction: column;
}
/* Separación mínima entre el formulario (o el mensaje de éxito) y los
   contactos: antes vivía en el margin-top de .ficha-contactos-directos,
   que ahora es auto; el auto SUMA el sobrante encima de este mínimo. */
#contactar form,
#contactar .form-enviado-exito {
    margin-bottom: 1.5rem;
}

/* ============================================
   BANNER DE CONSENTIMIENTO DE COOKIES
   ============================================ */
/* Barra fija al pie que acompaña a todas las páginas hasta que el visitante
   responde. El z-index la deja por encima del botón flotante de WhatsApp
   (z-index: 60) y por debajo de la navegación fija (1600) y del lightbox de la
   ficha (2000): es un aviso, no una ventana modal, y no tiene por qué tapar lo
   que ya estaba en pantalla ni bloquear la navegación mientras se decide. */
.cookies-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1500;
    background: var(--blanco);
    border-top: 1px solid rgba(80, 184, 209, 0.35);
    /* Solo las esquinas de arriba: las de abajo se salen de la pantalla. */
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.25rem;
    /* Sin fill-mode a propósito: con "both" el último fotograma se quedaría
       pegado y ganaría al transform de .cookies-banner-oculto, dejando la
       barra clavada en pantalla al pulsar un botón. */
    animation: cookiesBannerEntrada var(--transition-base);
}
@keyframes cookiesBannerEntrada {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* Estado de salida: el JS lo pone al decidir y quita el elemento del DOM
   cuando termina la transición. */
.cookies-banner-oculto {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.cookies-banner-interior {
    /* Mismo ancho útil que el .container de Bootstrap en escritorio, para que
       el texto del aviso arranque a la altura del contenido de la página. */
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.cookies-banner-icono {
    font-size: 1.6rem;
    color: var(--azulSecundario);
    flex-shrink: 0;
}
.cookies-banner-texto {
    margin: 0;
    font-family: var(--tipografia2);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--azul);
}
.cookies-banner-acciones {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex-shrink: 0;
}
/* Los dos botones comparten clase porque son el MISMO botón: mismo tamaño,
   mismo color, mismo peso. Un "rechazar" en gris pálido junto a un "aceptar"
   en azul empuja la respuesta, y una respuesta empujada no vale como
   consentimiento. Por eso aquí no hay variante principal ni secundaria. */
.cookies-banner-btn {
    font-family: var(--tipografia);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--blanco);
    background: var(--azul);
    border: 2px solid var(--azul);
    border-radius: var(--border-radius-md);
    padding: 0.5rem 1.4rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.cookies-banner-btn:hover {
    background: var(--azulSecundario);
    border-color: var(--azulSecundario);
    color: var(--blanco);
    transform: translateY(-2px);
}
.cookies-banner-btn:focus-visible {
    outline: 3px solid rgba(80, 184, 209, 0.55);
    outline-offset: 2px;
}
/* "Ver detalle" es enlace y no botón porque no decide nada: solo lleva al
   aviso completo. Subrayado para que se lea como enlace aunque esté pegado a
   dos botones. */
.cookies-banner-enlace {
    font-family: var(--tipografia);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--azul);
    text-decoration: underline;
    white-space: nowrap;
}
.cookies-banner-enlace:hover { color: var(--azulSecundario); }

/* Mientras el banner está a la vista se reserva su alto al final de la página.
   El alto lo mide el JS y lo publica en --alto-banner-cookies porque cambia
   con el ancho de pantalla (en móvil los botones se apilan) y con la longitud
   del texto: fijarlo aquí a ojo dejaría un hueco de más o taparía el pie.
   El botón de WhatsApp sube lo mismo, conservando su separación de 18px. */
body.con-banner-cookies { padding-bottom: var(--alto-banner-cookies, 0px); }
/* OJO: esta regla PARECE global y no lo es. El banner lo pinta
   includes/footer.php en TODAS las páginas, pero el botón de WhatsApp solo
   existe en pages/servicios.php y además solo se enciende por debajo de 991px
   (más arriba está en display:none), así que en la práctica solo actúa en
   /servicios y en móvil.
   NO borrarla: ahí sí hace su trabajo, y sin ella el banner tapa el botón. Si
   algún día el botón debe salir en todo el sitio, se mueve de servicios.php a
   footer.php — y entonces hay que revisar que no se solape con el lightbox de
   la ficha ni con el panel /admin. */
body.con-banner-cookies .whatsapp-flotante {
    bottom: calc(18px + var(--alto-banner-cookies, 0px));
    transition: bottom var(--transition-base), transform var(--transition-base), background-color var(--transition-base);
}

@media (max-width: 767px) {
    .cookies-banner { padding: 0.9rem 1rem; }
    /* El icono y el texto se quedan en el primer renglón y las acciones bajan
       enteras al segundo. */
    .cookies-banner-interior { flex-wrap: wrap; }
    .cookies-banner-texto { font-size: 0.9rem; }
    .cookies-banner-acciones {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Apilados y a ancho completo: en un móvil dos botones lado a lado quedan
       tan angostos que la etiqueta se parte, y los dos deben seguir siendo
       igual de fáciles de pulsar. */
    .cookies-banner-btn { flex: 1 1 100%; }
    .cookies-banner-enlace { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .cookies-banner { animation: none; }
    .cookies-banner-oculto { transition: none; }
    .cookies-banner-btn { transition: none; }
    .cookies-banner-btn:hover { transform: none; }
    body.con-banner-cookies .whatsapp-flotante { transition: none; }
}

/* ============================================
   AVISO DE COOKIES (/privacidad)
   ============================================ */
/* La tabla de cookies reutiliza .filtros-card como contenedor y la tabla de
   Bootstrap; aquí solo se le pone la tipografía y el color del sitio, que la
   hoja de Bootstrap deja en gris de sistema. */
.privacidad-tabla {
    font-family: var(--tipografia2);
    color: var(--azul);
    margin-bottom: 0;
}
.privacidad-tabla th {
    font-family: var(--tipografia);
    font-weight: 600;
    color: var(--azul);
    border-bottom: 2px solid rgba(80, 184, 209, 0.45);
}
.privacidad-tabla td {
    font-weight: 300;
    vertical-align: top;
}
/* El nombre técnico de la cookie se lee como código: es literal y hay que
   poder copiarlo tal cual para buscarlo en el navegador. */
.privacidad-cookie-nombre {
    font-family: ui-monospace, "Cascadia Code", "Courier New", monospace;
    font-weight: 600;
    white-space: nowrap;
}
/* Estado actual de la decisión, arriba del botón para cambiarla. */
.privacidad-estado {
    font-family: var(--tipografia2);
    font-size: 1rem;
    color: var(--azul);
}
.privacidad-estado strong { font-weight: 600; }

/* ============================================
   PANEL · AVISO DE COMPRIMIR ANTES DE SUBIR
   ============================================ */
/* Acompaña a los campos de foto en el alta y la edición de propiedades. El
   asterisco marca el campo desde su etiqueta y este bloque lo explica. */
.aviso-comprimir-marca {
    color: #b02a37;
    font-weight: 700;
}
.aviso-comprimir {
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 3px solid var(--azulSecundario);
    background: rgba(0, 102, 144, 0.05);
    border-radius: 0 6px 6px 0;
    font-family: var(--tipografia2);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--azulSecundario);
}
.aviso-comprimir strong { color: var(--azul); }



/* ============================================
   PANEL DE ADMINISTRACIÓN — Servicios y estadísticas
   ============================================
   Estilos de /admin/servicios-ranking. Se separan del resto porque esa
   pantalla no la ve ningún visitante: son reglas de herramienta, no de sitio.

   LA REGLA DE LOS BOTONES, que el usuario puede repetir en voz alta:
   el AZUL MACIZO quiere decir «esto lo va a notar su cliente». Nada más lo
   lleva. Antes había siete botones con style= inline y cuatro eran el mismo
   azul haciendo cosas distintas repartidas por 6400 px de página: esa era la
   causa de perderse, y no se arregla con más color sino con menos igualdad. */

/* 1. Variables de estado que faltan (se AÑADEN al :root de la línea 6, no se toca ninguna de las que ya están) */
/* 2. Casillas y radios con el color de la casa: Bootstrap los pinta con su
      propio azul #0d6efd, que es de otra marca. Tiene que alcanzar a las 84
      casillas de la tabla, que viven en .panel-cajon-cuerpo, y a los 9 radios,
      que viven en .filtros-card. Antes el selector era solo .filtros-card y
      dejaba las 84 casillas de la tabla con el azul de Bootstrap: en la misma
      pantalla convivían dos azules para el mismo tipo de control. */
.filtros-card .form-check-input:checked,
.panel-cajon .form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }
.filtros-card .form-check-input:focus,
.panel-cajon .form-check-input:focus { border-color: var(--azulSecundario); box-shadow: 0 0 0 3px rgba(80, 184, 209, 0.25); }

/* 3. Botones del panel. Tres niveles y una regla: el macizo significa
      "esto lo va a notar su cliente". */
.btn-panel-publicar, .btn-panel-guardar, .btn-panel-peligro {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--tipografia); font-size: 1rem; font-weight: 600;
    padding: 0.7rem 1.6rem; border-radius: var(--border-radius-md);
    text-decoration: none; cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-panel-publicar { background: var(--azul); color: var(--blanco); border: 2px solid var(--azul); box-shadow: var(--shadow-md); }
.btn-panel-publicar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--blanco); }
.btn-panel-guardar { background: var(--blanco); color: var(--azul); border: 2px solid var(--azul); }
.btn-panel-guardar:hover { background: var(--azul); color: var(--blanco); }
.btn-panel-peligro { background: var(--blanco); color: var(--rojo); border: 2px solid var(--rojo); }
.btn-panel-peligro:hover { background: var(--rojo); color: var(--blanco); }
.btn-panel-suave {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--tipografia2); font-size: 0.9rem; font-weight: 600;
    color: var(--azul-texto-suave); background: none; border: 0; padding: 0.4rem 0.2rem;
    text-decoration: none; cursor: pointer; transition: color var(--transition-base);
}
.btn-panel-suave:hover { color: var(--azul); text-decoration: underline; }
/* Bootstrap borra su anillo de foco en .btn sin variante, así que el foco de
   teclado desaparecía. El anillo va en --azul (6.4:1 sobre blanco) y no en el
   celeste, que a 2.3:1 casi no se distingue del fondo. */
.btn-panel-publicar:focus-visible, .btn-panel-guardar:focus-visible,
.btn-panel-peligro:focus-visible, .btn-panel-suave:focus-visible {
    outline: 3px solid var(--azul); outline-offset: 3px;
}
.btn-panel-publicar:disabled, .btn-panel-guardar:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-panel-micro { display: block; margin-top: 6px; font-family: var(--tipografia2); font-size: 0.78rem; color: var(--azul-texto-suave); }

/* 4. Cajas de aviso en tres tonos. Sustituyen a los style= inline de las
      líneas 638, 645 y 632, y al gris del aviso de lectura fallida. */
.panel-aviso {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 1rem 1.25rem; margin-bottom: 1rem;
    border-radius: var(--border-radius-sm); border-left: 4px solid var(--azulSecundario);
    background: rgba(80, 184, 209, 0.10);
    font-family: var(--tipografia2); font-size: 0.95rem; color: var(--azul);
}
.panel-aviso i { font-size: 1.15rem; line-height: 1.4; }
.panel-aviso-exito   { border-left-color: var(--verde); background: rgba(29, 168, 81, 0.09); }
.panel-aviso-atencion{ border-left-color: var(--ambar); background: rgba(224, 168, 0, 0.10); }
.panel-aviso-error   { border-left-color: var(--rojo);  background: rgba(176, 42, 55, 0.08); }
.panel-aviso-error strong { color: var(--rojo); }

/* 5. Tablero: la rejilla de las cuatro franjas. */
.panel-tablero { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.panel-franja-titulo { font-family: var(--tipografia); font-size: 1.15rem; font-weight: 700; color: var(--azul); margin: 0.6rem 0 0.2rem; }
.panel-franja-donde { font-family: var(--tipografia2); font-size: 0.85rem; color: var(--azul-texto-suave); margin-bottom: 0.9rem; }
.panel-franja-lista { font-family: var(--tipografia2); font-size: 0.9rem; color: var(--azul); padding-left: 1.2rem; margin: 0; }
.panel-franja-lista li { margin-bottom: 4px; }
.panel-franja-nueva { font-weight: 700; }
/* La sugerencia NO es una columna gemela: es una franja inferior que solo
   aparece cuando existe, para que la tarjeta no nazca medio vacía mientras
   todavía no hay visitas medidas. */
.panel-franja-sugerencia { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(80, 184, 209, 0.5); }
.panel-franja-estado { display: inline-flex; align-items: center; gap: 7px; font-family: var(--tipografia2); font-size: 0.88rem; font-weight: 600; margin-top: 0.9rem; }
.panel-franja-estado.al-dia { color: var(--verde-texto); }
.panel-franja-estado.pendiente { color: var(--ambar-texto); }
.panel-franja-estado.sin-datos { color: var(--azul-texto-suave); }
.panel-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--azul); display: inline-block; }

/* 6. Cajones. Son <details> nativos: se abren sin JavaScript, sus campos se
      envían aunque estén cerrados y el navegador puede abrirlos solo para
      enseñar un error de validación. Se les quita el triangulito del sistema
      y se les pone la tapa celeste del acordeón del sitio público. */
/* SIN overflow: hidden. Parece inofensivo —solo recortaría el fondo de la
   tapa a las esquinas redondeadas— pero cualquier overflow distinto de
   visible convierte a este <details> en el contenedor de scroll al que se
   anclan los position:sticky de dentro. Con él puesto, ni la cabecera de la
   tabla ni la barra de guardado se pegan nunca, y no salta ningún error: solo
   dejan de funcionar. El redondeo se resuelve en la tapa y en el cuerpo. */
.panel-cajon { border: 1.5px solid rgba(80, 184, 209, 0.3); border-radius: var(--border-radius-lg); background: var(--blanco); box-shadow: var(--shadow-md); margin-bottom: 1.25rem; }
.panel-cajon > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1.1rem 1.5rem; background: rgba(80, 184, 209, 0.17); border-radius: calc(var(--border-radius-lg) - 2px); font-family: var(--tipografia); font-size: 1.1rem; font-weight: 700; color: var(--azul); transition: background-color var(--transition-fast); }
.panel-cajon[open] > summary { border-radius: calc(var(--border-radius-lg) - 2px) calc(var(--border-radius-lg) - 2px) 0 0; }
.panel-cajon > summary::-webkit-details-marker { display: none; }
.panel-cajon > summary:hover { background: rgba(80, 184, 209, 0.3); }
.panel-cajon > summary:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }
.panel-cajon-flecha { transition: transform var(--transition-base); color: var(--azulSecundario); }
.panel-cajon[open] > summary .panel-cajon-flecha { transform: rotate(180deg); }
.panel-cajon-apoyo { display: block; font-family: var(--tipografia2); font-size: 0.85rem; font-weight: 400; color: var(--azul); margin-top: 3px; }
.panel-cajon-cuerpo { padding: 1.5rem; }
.panel-subcajon { border-top: 1px solid rgba(80, 184, 209, 0.25); }
/* Al quitarle el triangulito del sistema, un sub-cajón cerrado se lee como un
   título cualquiera y nadie descubre que hay algo dentro. La flecha vuelve
   como ::after, girada cuando está abierto, y el foco de teclado se marca
   igual que en los cajones grandes: sin esto, quien navega con Tab no ve
   dónde está y no puede abrirlos. */
.panel-subcajon > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0.8rem 0.4rem; border-radius: var(--border-radius-sm); font-family: var(--tipografia); font-weight: 600; color: var(--azul); transition: background-color var(--transition-fast); }
.panel-subcajon > summary::-webkit-details-marker { display: none; }
.panel-subcajon > summary::after { content: "\f282"; font-family: "bootstrap-icons"; font-weight: 400; color: var(--azulSecundario); transition: transform var(--transition-base); }
.panel-subcajon[open] > summary::after { transform: rotate(180deg); }
.panel-subcajon > summary:hover { background: rgba(80, 184, 209, 0.10); }
.panel-subcajon > summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* 7. Tabla del panel. Hereda tipografía de .privacidad-tabla y añade lo que
      falta: cabecera pegajosa, filas alternas y el filete de "hoy se ve". */
.panel-tabla th { position: sticky; top: 84px; z-index: 5; background: var(--blanco); }
.panel-tabla tbody tr:nth-child(even) { background: rgba(0, 102, 144, 0.03); }
.panel-tabla tr.panel-fila-activa { box-shadow: inset 3px 0 0 var(--azulSecundario); }
.panel-col-marca { width: 92px; text-align: center; }
.panel-col-num { text-align: right; white-space: nowrap; }
/* El nowrap es para los NÚMEROS, no para sus rótulos. Con los rótulos en una
   sola línea, «La eligieron en el formulario» impone un ancho mínimo que
   desbordaba la tabla 6 px fuera de la pantalla; ahora el título se parte en
   varias líneas y el número de abajo sigue entero. */
.panel-tabla th.panel-col-num { white-space: normal; max-width: 105px; font-size: 0.78rem; line-height: 1.25; vertical-align: bottom; }
.panel-tabla-grupo { font-family: var(--tipografia2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--azul-texto-suave); }

/* 8. Barra de guardado pegajosa. El botón viaja con la vista en vez de
      esperar al final de 42 filas. Mismo truco que .servicios-tabs-barra. */
/* El bottom NO es 0 fijo: mientras el aviso de cookies siga sin responder,
   está fijo abajo con z-index 1500 y tapa 78 px de esta barra, de modo que el
   clic en «Guardar mis marcas» se lo lleva el aviso y no pasa nada — sin un
   solo mensaje. consentimiento.js publica --alto-banner-cookies en el <body>
   mientras el aviso existe y la quita al responderlo, así que la barra se
   apoya encima y vuelve sola al borde cuando desaparece. */
.panel-acciones { position: sticky; bottom: var(--alto-banner-cookies, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.25rem -1.5rem -1.5rem; padding: 1rem 1.5rem; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(80, 184, 209, 0.3); border-radius: 0 0 calc(var(--border-radius-lg) - 2px) calc(var(--border-radius-lg) - 2px); }
.panel-acciones.pegada { box-shadow: 0 -6px 20px rgba(0, 40, 70, 0.10); }
.panel-contador { font-family: var(--tipografia2); font-size: 0.85rem; color: var(--azul-texto-suave); }

/* 9. Ayudas de los nueve números: el rango sale de la frase y se va a su
      propia pastilla, porque un rango es un dato, no un consejo. */
.panel-rango { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 50px; background: rgba(0, 102, 144, 0.07); font-family: var(--tipografia2); font-size: 0.72rem; font-weight: 600; color: var(--azul-texto-suave); }

/* 10. Estados vacíos y microtexto, hoy repetidos como <p class="small" style="..."> */
.panel-vacio { font-family: var(--tipografia2); font-size: 0.88rem; color: var(--azul-texto-suave); font-style: italic; }

/* 11. Móvil: el tablero a una columna y se ocultan SOLO las columnas de
       números; nombre, Fijar arriba y No destacar nunca se ocultan. */
/* Contenedor de scroll de la tabla. En escritorio NO recorta nada, para que la
   cabecera pegajosa siga anclada a la ventana; por debajo de 992 px se
   convierte en contenedor con scroll lateral.

   El intento anterior fue esconder las cinco columnas de números en pantallas
   estrechas, y salió mal de dos maneras a la vez: no bastaba —con las dos
   columnas de casillas a 92 px fijos, la tabla seguía midiendo 475 px dentro
   de un hueco de 316 px en un teléfono— y como body lleva overflow-x: hidden,
   el sobrante no daba barra de scroll: simplemente quedaba fuera de la
   pantalla. En un móvil, 81 de las 84 casillas eran IMPOSIBLES de tocar y
   nada lo delataba. Encima escondía para siempre unos contadores que antes
   del rediseño sí se alcanzaban deslizando, porque la tabla iba dentro de
   .table-responsive.

   Con scroll lateral vuelven a estar todas las columnas al alcance en
   cualquier ancho, que es como estaba antes. */
.panel-tabla-scroll { overflow: visible; }

@media (max-width: 991px) {
    .panel-tablero { grid-template-columns: 1fr; }
    .panel-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Dentro de un contenedor con scroll el sticky se ancla a ESE contenedor,
       que no hace scroll vertical, así que no se pegaría nunca. Se apaga aquí
       y se dice, en vez de dejarlo puesto aparentando funcionar. Tampoco se
       echa de menos: antes se pegaba a top:0, o sea justo detrás de la
       navegación fija (90 px), donde no se veía igual. */
    .panel-tabla th { position: static; }
}
@media (max-width: 767px) {
    /* El cuerpo del cajón y la barra pegajosa tienen que usar el MISMO
       margen, o la barra queda flotando con 9 px de aire a cada lado y sus
       esquinas no casan con las del cajón. */
    .panel-cajon-cuerpo { padding: 1rem; }
    .panel-acciones { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* 12. Arreglo aparte: .btnMejorado en reposo es fondo blanco con borde
       transparente, así que en /admin/propiedades los botones "Editar" y
       "Ocultar" no se ven hasta pasar el ratón.

       Se hace con una clase EXPLÍCITA y no con .btnMejorado:not([style]),
       que es como estaba escrito antes. Aquel selector parecía acotado al
       panel y no lo estaba: alcanzaba a los seis .btnMejorado sin style= del
       sitio público y dejaba descoloridos los botones fantasma de
       /propiedades y /servicios, le ponía un aro oscuro al hover de otros
       cuatro y anulaba —por ir en la última línea del archivo, que gana los
       empates— el parche de foco de teclado de .btn-proxima-fantasma
       (líneas 2756-2764). Además dependía de la AUSENCIA de un atributo:
       cualquiera que añadiese un style= por otro motivo apagaba el borde sin
       saber por qué. */
.btnMejorado-contorno { border-color: rgba(0, 102, 144, 0.35); }

/* 13. La tabla del panel NO va envuelta en .table-responsive de Bootstrap.
       Ese div es overflow-x:auto, y un overflow distinto de visible lo
       convierte en el contenedor de scroll al que se ancla el sticky: la
       cabecera pegajosa de arriba dejaría de pegarse y nada lo delataría.
       El ancho se resuelve escondiendo las columnas de números en pantallas
       estrechas (regla 11), nunca el nombre ni las dos casillas. */

/* NOTA para quien siga: las clases de abajo YA EXISTEN en este archivo y se
   reutilizan tal cual en el panel, no hay que volver a escribirlas:
   .filtros-card (tarjetas, línea 2213), .filtros-card-resaltada (modificador
   de la anterior, 2220 — OJO, sí la usa gente: ficha-detalles.php, /contacto,
   /privacidad y la ficha de propiedad, así que no se puede retocar a gusto
   del panel), .busqueda-chip (insignias, 2322), .titulo-pill (1706),
   .titulos-seccion (62), .aviso-comprimir (4151), .privacidad-tabla (4112,
   presupone la .table de Bootstrap encima) y .busqueda-limpiar (2334, el
   molde del botón suave). */

/* ============================================
   PANEL DE ADMINISTRACIÓN — Listado de propiedades (/admin/propiedades)
   ============================================
   Reutiliza el mismo sistema de botones y tabla del panel de servicios para
   que las dos pantallas del panel se vean como una sola cosa. Solo añade lo
   que esa pantalla no tenía: un botón pequeño para las acciones de cada fila y
   una pastilla de estado. */

/* Botón pequeño: mismo aspecto que .btn-panel-* pero para caber tres veces en
   una fila de tabla. Se combina: class="btn-panel-guardar btn-panel-sm". */
.btn-panel-sm { padding: 0.4rem 0.95rem; font-size: 0.85rem; border-radius: var(--border-radius-sm); gap: 6px; }

/* Pastilla de estado (Publicada / Oculta). El punto de color se lee de un
   vistazo sin depender solo del texto. */
.panel-estado { display: inline-flex; align-items: center; gap: 7px; padding: 0.28rem 0.75rem; border-radius: 50px; font-family: var(--tipografia2); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.panel-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.panel-estado.publicada { background: rgba(29, 168, 81, 0.12); color: var(--verde-texto); }
.panel-estado.publicada::before { background: var(--verde); }
.panel-estado.oculta { background: rgba(0, 40, 70, 0.06); color: #566169; }
.panel-estado.oculta::before { background: #9aa7ad; }

/* Columna de acciones: que los botones no se estrujen ni se separen de más. */
.panel-acciones-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* La barra de título del panel: título a la izquierda, acciones a la derecha,
   y en móvil se apilan sin apretarse. */
.panel-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.panel-cabecera-acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }