/* Regla obligatoria de Alpine.js: sin esto, x-cloak no hace nada y cualquier
   elemento con esa directiva se ve un instante antes de que Alpine cargue y
   lo oculte. No existía en ningún CSS del proyecto (ni aquí ni en el build de
   Tailwind del admin); el overlay del modal de "Contactar a un agente"
   (position:fixed, pantalla completa) la necesitaba para no destellar y
   bloquear los clics durante ese instante. */
[x-cloak] { display: none !important; }

/* ==========================================================================
   VARIABLES (Design System - from Elementor Kit post-19)
   ========================================================================== */
:root {
    --color-primary: #1F5A99;
    --color-secondary: #6A7F91;
    --color-text: #5C5C5C;
    --color-accent: #31BFAD;
    --color-blue: #2563EB;
    --color-light-blue: #E8F0FA;
    --color-dark-blue: #153A6D;
    --color-mid-blue: #005AB6;
    --color-white: #ffffff;
    --color-border: #e0e0e0;
    --font-primary: "IBM Plex Sans", Sans-serif;
    --font-secondary: "Inter", Sans-serif;
    --container-max-width: 1140px;
    /* Altura del header y margen blanco alrededor del slider. El slider sube
       exactamente --alto-header, así que ambas capas comparten borde superior. */
    --alto-header: 80px;
    --margen-marco: 12px;
    /* Ancho de la pestaña blanca y porción visible de ella por debajo de
       1280px (0.7 = 70%); el resto se sale por el borde izquierdo. Sin unidad
       para poder multiplicarlo por el ancho en el calc(). */
    --pestana-ancho: 495px;
    --pestana-visible: 0.7;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    /* Marco blanco de la página: es el margen que se ve alrededor del slider */
    padding: var(--margen-marco);
    padding-bottom: 0;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 500; line-height: 1.2; margin-bottom: 16px; }
h1 { font-size: 56px; }
h2 { font-size: 48px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
p { margin-bottom: 16px; }
a { color: inherit; text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    transition: border-color 0.3s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-mid-blue);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* CAPA 2 — la pestaña blanca. Su borde superior coincide con el del slider
   porque el header tiene altura fija conocida y el slider sube exactamente
   esa misma cantidad (ver --alto-header). Antes el slider restaba 80px fijos
   a una altura de header que variaba con el ancho, y por eso el margen
   superior se evaporaba en pantallas medianas. */
.site-header {
    position: relative;
    z-index: 100;
    height: var(--alto-header);
    background-image: url('/img/top_bg_logo2.svg');
    /* 1px por encima del borde del slider, para que no asome una línea de
       fondo entre ambas capas */
    background-position: center -1px;
    background-repeat: no-repeat;
    background-size: 550px auto;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.53;
    z-index: 0;
}

.header-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    flex-wrap: wrap;
    min-height: 80px;
    padding: 8px 20px;
}

.header-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 35%;
    padding-right: 10%;
}

.nav-menu {
    display: flex;
    background-color: var(--color-dark-blue);
    border-radius: 25px;
    gap: 4px;
    padding: 4px 6px;
}

.nav-menu li a {
    display: block;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-light-blue);
    padding: 4px 18px;
    transition: color 0.3s;
    text-transform: none;
    white-space: nowrap;
}

.nav-menu li a:hover {
    color: var(--color-accent);
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-top: -20px;
}

.header-logo img {
    width: 100%;
    max-width: 335px;
    height: 60px;
    object-fit: contain;
}

.header-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 35%;
    padding-left: 10%;
}

.btn-publish {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 8px 20px;
    border-radius: 25px;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-publish:hover {
    color: var(--color-white);
    box-shadow: 0px 0px 10px 0px rgba(11, 140, 182, 0.5);
    transform: scale(1.05);
}

/* Fila que alinea el botón de publicar con el de acceso (login/logout) */
.header-cta-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* El formulario de logout no debe alterar la alineación: solo envuelve al botón */
.header-logout-form {
    display: flex;
    margin: 0;
}

/* Botón redondo de acceso. Alto igual a la caja de .btn-publish
   (16px de línea + 16px de padding vertical ≈ 38px). */
.btn-header-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-header-login svg {
    width: 18px;
    height: 18px;
}
.btn-header-login:hover {
    color: var(--color-white);
    box-shadow: 0px 0px 10px 0px rgba(11, 140, 182, 0.5);
    transform: scale(1.05);
}

/* ---------- Menú de cuenta (usuario con sesión iniciada) ----------
   Sustituye al botón suelto de cerrar sesión: mismo botón redondo, pero
   despliega el acceso al panel. Así no se añaden elementos al header. */
.header-cuenta {
    position: relative;
    flex-shrink: 0;
}
.header-cuenta-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    padding: 6px;
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.header-cuenta-menu[hidden] { display: none; }
.header-cuenta-menu a,
.header-cuenta-menu button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.header-cuenta-menu a:hover,
.header-cuenta-menu button:hover {
    background: var(--color-light-blue);
    color: var(--color-primary);
}
/* La salida, separada del resto para no pulsarla sin querer. */
.header-cuenta-menu form {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #E5E7EB;
}

.menu-toggle {
    display: none;
    padding: 8px;
    background: none;
    border: none;
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
    fill: var(--color-text);
}

.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
    display: none;
    width: 100%;
}

.mobile-nav ul {
    background: var(--color-dark-blue);
    padding: 16px;
    border-radius: 0 0 12px 12px;
    /* En columna para poder reordenar los elementos con 'order'. Tableta y
       móvil comparten este mismo marcado, así que es la única forma de darles
       órdenes distintos sin duplicar el HTML. */
    display: flex;
    flex-direction: column;
}

/* Botones fijos: no se gestionan desde el panel y conservan su sitio.
   Los enlaces gestionados usan del 10 en adelante, así que quedan siempre
   entre el bloque de arriba y el de acceso. */
.mobile-nav-panel    { order: -1; }
.mobile-nav-publicar { order: 0; }
.mobile-nav-registro { order: 1; }
.mobile-nav-acceso   { order: 999; }

.mobile-nav li a {
    display: block;
    color: var(--color-light-blue);
    padding: 10px 16px;
    font-size: 16px;
}

/* "Publique un negocio" dentro del menú: oculto por defecto (está en el
   header); solo aparece en pantallas muy estrechas, destacado como CTA. */
.mobile-nav-publicar { display: none; }
.mobile-nav-publicar a {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ---------- Header Search Button (lupa) - Type B pages ---------- */
.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--color-dark-blue);
    border-radius: 50%;
    color: var(--color-light-blue);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}
.header-search-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.header-search-btn svg {
    width: 16px;
    height: 16px;
}

/* El header antiguo sin hero (Type B) ya no lo usa ninguna página pública:
   listado, ficha y páginas de contenido usan HEADER2 / HEADER3, que son
   copias del header de la portada y conservan su fondo y disposición. */

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    /* CAPA 1 — el slider sube exactamente la altura del header, así que ambos
       arrancan en la misma línea. El margen superior blanco lo da el padding
       del body, no el sobrante de esta resta. */
    margin-top: calc(-1 * var(--alto-header));
    /* Sin overflow:hidden aquí: recortaba el desplegable del buscador cuando
       se extiende hacia abajo. El recorte a las esquinas redondeadas lo hacen
       ahora el propio slider y su capa oscura (border-radius:inherit). */
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}

.hero-slideshow .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: kenBurnsIn 10s ease infinite alternate;
}

.hero-slideshow .slide.active {
    opacity: 1;
}

@keyframes kenBurnsIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-dark-blue);
    opacity: 0.25;
    z-index: 1;
    border-radius: inherit;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 100px 20px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-wrapper {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.operation-buttons {
    display: flex;
    gap: 8px;
    margin: 18px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.op-btn {
    background: rgba(0, 56, 104, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    font-family: var(--font-secondary);
}

.op-btn.active,
.op-btn:hover {
    background: #1a2847;
    border-color: #1a2847;
    color: white;
}

/* Dropdown de operación con la estética del sitio (no un <select> nativo, que
   abre un desplegable del sistema imposible de estilizar). Oculto por defecto;
   sustituye a los chips en ≤1024px (ver media query tablet). */
.op-dropdown {
    display: none;
    position: relative;
    /* Eleva todo el componente por encima del recuadro blanco del buscador,
       que va después en el DOM y si no tapaba el desplegable */
    z-index: 20;
    width: max-content;
    max-width: 100%;
    margin: 18px auto;
}

/* Botón cerrado: idéntico al chip/select original. No se le cambia el aspecto,
   ni en hover ni al abrir: la flecha va como imagen de fondo, como antes. */
.op-dropdown-toggle {
    display: inline-block;
    padding: 8px 40px 8px 18px;
    background-color: rgba(0, 56, 104, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='white' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* Lista desplegable: fondo azul oscuro del sitio, esquinas redondeadas,
   borde blanco y opciones separadas por una línea de 1px */
.op-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 92vw;
    background: var(--color-dark-blue);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 20;
}
.op-dropdown-menu li button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--color-light-blue);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
/* Separador de 1px entre opciones (no en la última) */
.op-dropdown-menu li:not(:last-child) button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.op-dropdown-menu li button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
/* Animación de apertura (Alpine añade estas clases al entrar) */
.op-dd-enter { transition: opacity 0.18s ease, transform 0.18s ease; }
.op-dd-enter-start { opacity: 0; transform: translateX(-50%) translateY(-6px); }

.search-controls-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    background: white;
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.search-country-wrapper {
    flex: 0 0 15%;
    min-width: 200px;
}

.search-country-select,
.search-sector-select {
    width: 100%;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-secondary);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.search-country-select:hover,
.search-country-select:focus,
.search-sector-select:hover,
.search-sector-select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 90, 153, 0.1);
}

.search-sector-wrapper {
    flex: 0 0 20%;
    min-width: 220px;
}

.search-input-main-wrapper {
    flex: 1;
    position: relative;
    min-width: 340px;
}

.search-input-main {
    width: 100%;
    height: 100%;
    padding: 12px 50px 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-secondary);
    transition: all 0.2s ease;
}

.search-input-main:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 90, 153, 0.1);
}

.search-icon-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-primary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon-btn:hover {
    color: #0d4a7a;
    transform: translateY(-50%) scale(1.1);
}

/* ==========================================================================
   HEADER2 - Hero de la pagina de resultados
   Copia del hero de la portada. Solo cambian dos cosas: los botones de tipo
   de operacion se sustituyen por el H1, y los selects de la barra blanca se
   sustituyen por los chips de filtros aplicados + el buscador.

   HEADER3 (paginas de contenido) reutiliza estas mismas reglas: es HEADER2
   sin chips, con el titulo de la pagina actual y solo el buscador.
   ========================================================================== */
/* Algo mas bajo que el de la portada, para no empujar los resultados */
.hero-listado {
    min-height: 240px;
}
.hero-listado .hero-content {
    padding: 85px 20px 20px 20px;
}
/* En la portada son los tres selects los que dan ancho a la barra blanca.
   Aquí el contenido es menor, así que se fija el ancho para que la barra
   mantenga la misma presencia que en la portada. */
.hero-listado .hero-search-container {
    width: 100%;
}

/* Titulo H1, en el lugar que ocupaban los botones de operacion */
.hero-listado-titulo {
    font-family: var(--font-primary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
    text-align: center;
    margin: 0 0 14px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Zona de chips dentro de la barra blanca. Si no hay filtros aplicados este
   contenedor no se imprime y el buscador ocupa todo el ancho de la barra. */
.hero-chips {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.hero-chips::-webkit-scrollbar {
    display: none;
}

.chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 7px 7px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* La (x) va dentro de un circulo, como el resto de controles redondeados */
.chip-filtro-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    transition: background-color 0.2s ease;
}
.chip-filtro-x:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

.chip-limpiar {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-mid-blue);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 6px 14px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.chip-limpiar:hover {
    color: var(--color-mid-blue);
    border-color: var(--color-mid-blue);
    background-color: var(--color-light-blue);
}

/* ==========================================================================
   SEARCH MODAL (Type B pages)
   ========================================================================== */
.search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.search-modal-overlay.active {
    display: flex;
}
.search-modal {
    background: var(--color-white);
    border-radius: 20px;
    padding: 32px;
    max-width: 980px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.25s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-secondary);
    transition: all 0.3s;
    cursor: pointer;
}
.search-modal-close:hover {
    background: var(--color-light-blue);
    color: var(--color-dark-blue);
}
.search-modal-close svg {
    width: 20px;
    height: 20px;
}
.search-modal .operation-buttons {
    justify-content: center;
}
.search-modal .op-btn {
    background: var(--color-light-blue);
    color: var(--color-dark-blue);
    border-color: var(--color-border);
}
.search-modal .op-btn.active,
.search-modal .op-btn:hover {
    background: var(--color-dark-blue);
    border-color: var(--color-dark-blue);
    color: white;
}
.search-modal .search-controls-row {
    box-shadow: none;
    border: 1px solid var(--color-border);
}

/* ==========================================================================
   LISTING CARDS (unified - canonical from index.php)
   ========================================================================== */
.listing-card {
    flex: 1;
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: 16px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.listing-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-image {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 15px 15px 0 0;
    padding: 16px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.card-badge {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-white);
    padding: 8px;
    border-radius: 8px;
    align-self: flex-start;
}

.card-price {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    color: #E8F0FA;
    background-color: #2563EB;
    padding: 4px 10px 4px 10px;
    border-radius: 8px;
    align-self: flex-end;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.96);
}

.card-body {
    padding: 20px;
    padding-bottom: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-location {
    font-size: 14px;
    color: var(--color-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-location-icon {
    width: 12px;
    height: 12px;
    fill: var(--color-secondary);
    flex-shrink: 0;
}

.card-title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-desc {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

.card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.card-ref {
    font-size: 13px;
    color: var(--color-secondary);
}

.card-sector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-primary);
}

.card-sector svg {
    width: 16px;
    height: 16px;
    fill: var(--color-primary);
}

/* ==========================================================================
   LISTINGS SECTION (index.php - 3 Cards)
   ========================================================================== */
.listings-section {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 40px 20px;
}

.listings-inner {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* ==========================================================================
   CTA - VIEW ALL
   ========================================================================== */
.cta-section {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.cta-banner .btn-contact {
  display: inline-block;
  padding: 12px 30px;
  background-color: var(--color-light-blue);
  color: var(--color-mid-blue);
  font-family: "Inter", Sans-serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s;
  flex-shrink: 0;
}

.cta-banner .btn-contact:hover {
  /*opacity: 0.9;*/
  color: #fff;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    background-color: var(--color-primary);
    padding: 12px 28px;
    border-radius: 6px;
    transition: all 0.3s;
}

.btn-view-all svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.btn-view-all:hover {
    color: var(--color-white);
    background-color: #28a99a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   PRICING SECTION
   ========================================================================== */
.pricing-section {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 60px 20px;
}

.pricing-header {
    text-align: center;
    margin-bottom: 48px;
}

.pricing-header h2 {
    font-family: var(--font-primary);
    font-size: 48px;
    font-weight: 500;
    color: var(--color-primary);
}

.pricing-subtitle {
    font-family: var(--font-secondary);
    font-size: 16px;
    color: var(--color-text);
    max-width: 700px;
    margin: 0 auto;
}

.pricing-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.price-card {
    flex: 1;
    max-width: 360px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.price-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.plan-name {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.plan-icon {
    margin: 0 auto 20px;
}

.plan-icon img {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.plan-price {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 12px;
}

/* Precio de los planes con importe: el número manda, la moneda lo acompaña y
   la duración queda a su lado en pequeño. Si no caben en una línea, la
   duración baja a la siguiente. */
.plan-price-monto {
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}
.plan-price-moneda {
    font-size: 18px;
    font-weight: 600;
}
.plan-price-periodo {
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-secondary);
    white-space: nowrap;
}

.plan-desc {
    font-size: 15px;
    color: var(--color-text);
    margin-bottom: 24px;
}

.plan-features {
    text-align: left;
    margin-bottom: 28px;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--color-text);
    padding: 6px 0;
}

.plan-features svg {
    width: 16px;
    height: 16px;
    fill: var(--color-accent);
    flex-shrink: 0;
}

.btn-plan {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 12px 28px;
    border-radius: 6px;
    transition: all 0.3s;
    margin-top: auto;
    text-align: center;
    width: 100%;
    /* La tarjeta "Plan Asistido" usa un <button> (abre un modal) en vez de un
       <a>; el botón necesita este reseteo para verse idéntico al enlace. */
    border: none;
    cursor: pointer;
}

.btn-plan:hover {
    color: var(--color-white);
    background-color: #28a99a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   MODAL "CONTACTAR A UN AGENTE" (tarjeta Plan Asistido)
   ========================================================================== */
.modal-agente-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(21, 58, 109, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-agente-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: 16px;
    padding: 32px;
    text-align: left;
}

.modal-agente-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.modal-agente-cerrar:hover {
    background: var(--color-light-blue);
    color: var(--color-primary);
}

.modal-agente-titulo {
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin: 0 0 8px;
}

.modal-agente-subtitulo {
    font-size: 14px;
    color: var(--color-text);
    margin: 0 0 20px;
}

@media (max-width: 767px) {
    .modal-agente-panel { padding: 24px 20px; }
}

/* ==========================================================================
   CTA BANNER SECTION
   ========================================================================== */
.cta-banner {
  max-width: 1140px;
  margin: 0 auto 40px;
  padding: 0;
}

.cta-banner .inner {
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark-blue));
  border-radius: 16px;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-banner .cta-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.cta-banner .cta-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner .cta-text {
  flex: 1;
}

.cta-banner .cta-text h4 {
  font-family: "IBM Plex Sans", Sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}

.cta-banner .cta-text p {
  font-family: "Inter", Sans-serif;
  font-size: 16px;
  color:  var(--color-border);
  margin: 0;
}



.cta-banner .btn-contact:hover {
  opacity: 0.9;
  color: var(--color-primary);
}


/* ==========================================================================
   BENEFITS / FEATURES
   ========================================================================== */
.benefits-section {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 60px 20px 20px;
    text-align: center;
}

.benefits-section h2 {
    font-family: var(--font-primary);
    font-size: 48px;
    font-weight: 500;
    color: var(--color-primary);
}

.features-section {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.features-inner {
    display: flex;
    gap: 24px;
}

.feature-box {
    flex: 1;
    text-align: center;
    padding: 20px;
}

.feature-box figure {
    margin: 0 auto 16px;
    width: 80px;
    height: 80px;
}

.feature-box figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-box h3 {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.feature-box p {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
}

/* ==========================================================================
   CONTACT BANNER
   ========================================================================== */
.btn-contact {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 12px 28px;
    border-radius: 6px;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-contact:hover {
    color: var(--color-white);;
    background-color: #28a99a;
    transform: translateY(-2px);
}

/* ==========================================================================
   PAGE: LISTADOS (body.page-listados)
   ========================================================================== */
/* El body y el .header-inner de la página de resultados usan los mismos
   valores base que la portada: HEADER2 es una copia de su header y necesita
   el mismo margen lateral para que la hero conserve las esquinas redondeadas. */

.listados-wrapper {
    max-width: var(--container-max-width);
    margin: 24px auto 0;
    padding: 0 20px;
}
/* Ensanchar el contenedor en monitores grandes para ganar columnas en .card-row
   (mismos breakpoints que el carrusel de destacados de la portada) */
@media(min-width:1450px){
    .listados-wrapper { max-width: 1650px; }
}
@media(min-width:1800px){
    .listados-wrapper { max-width: 2000px; }
}

.listados-main {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
}

/* Sidebar */
.listados-sidebar {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
}
/* Botón "Filtros" y botón de cerrar: solo existen para el panel deslizable
   de tablet/móvil, ocultos en desktop donde el sidebar siempre es visible */
.btn-filtros-toggle,
.sidebar-close-btn {
    display: none;
}
.sidebar-heading {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
    line-height: 1.2;
}
.sidebar-divider {
    border: none;
    border-top: 1.5px solid var(--color-mid-blue);
    margin: 6px 0;
}

/* Sidebar icon lists */
.sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}
.sidebar-list li {
    margin: 0;
}
.sidebar-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: 8px;
    transition: color 0.2s, background-color 0.2s;
}
.sidebar-list li a:hover {
    color: var(--color-mid-blue);
    background-color: var(--color-light-blue);
}
/* Filtro seleccionado: fondo azul + texto blanco (el icono hereda currentColor) */
.sidebar-list li a.is-active {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 500;
}
.sidebar-list li a.is-active:hover {
    color: #fff;
}
.sidebar-list li a svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Filtro de una sola fila con interruptor on/off (Verificados).
   Apagado: fondo blanco con borde gris. Encendido: azul principal. */
.filtro-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--color-text);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.filtro-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}
.filtro-toggle.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 500;
}
.filtro-toggle.is-active:hover {
    color: var(--color-white);
}

.filtro-toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background-color: #cfd6dd;
    transition: background-color 0.2s;
}
.filtro-toggle.is-active .filtro-toggle-switch {
    background-color: rgba(255, 255, 255, 0.45);
}

.filtro-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.2s;
}
.filtro-toggle.is-active .filtro-toggle-knob {
    left: 18px;
}

.sidebar-list--operaciones { gap: 2px; }
.sidebar-list--operaciones li a { line-height: 26px; }

.sidebar-list--sectores { gap: 2px; }
.sidebar-list--sectores li a { line-height: 26px; }

.sidebar-list--paises { gap: 4px; }
.sidebar-list--paises li a { line-height: 24px; }

/* Content area */
.listados-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Sort bar */
.sort-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 10px;
}
.sort-bar__results {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
}
.sort-bar__select-wrapper {
    position: relative;
}
.sort-bar__select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--color-secondary);
    border-radius: 8px;
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-white);
    cursor: pointer;
    width: auto;
    min-width: 200px;
    appearance: auto;
}

/* Card grid: sin chunk() en servidor — el CSS decide las columnas por breakpoint
   y flex-grow (heredado de .listing-card { flex:1 }) estira cualquier fila
   incompleta para que nunca queden huecos en blanco, en ningún ancho de pantalla. */
.card-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-bottom: 20px;
}
.card-row .listing-card { flex: 1 1 calc(33.333% - 13.34px); } /* 3 columnas, 1025-1449px */
@media(min-width:1450px){
    .card-row .listing-card { flex: 1 1 calc(25% - 15px); } /* 4 columnas */
}
@media(min-width:1800px){
    .card-row .listing-card { flex: 1 1 calc(20% - 16px); } /* 5 columnas */
}

/* Pagination */
.pagination {
    text-align: center;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-primary);
    padding: 16px 0;
}
.pagination a {
    color: var(--color-primary);
    padding: 0 4px;
}
.pagination a:hover {
    color: var(--color-dark-blue);
    text-decoration: underline;
}

/* ==========================================================================
   PAGE: FICHA PRODUCTO (body.page-ficha)
   ========================================================================== */
/* Repetía los valores del marco y, por especificidad, pisaba los del body:
   la ficha acababa con 30px de aire arriba en vez de los 12 del resto. */
body.page-ficha {
    padding: var(--margen-marco);
    padding-bottom: 0;
}

.page-ficha main {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb */
.breadcrumb {
    padding: 12px 0;
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--color-secondary);
}
.breadcrumb a {
    color: var(--color-mid-blue);
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb span {
    margin: 0 4px;
}

/* Product title */
.product-title {
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 20px;
    line-height: 1.3;
}

h1.product-title {
    font-size: 42px !important;
    line-height: 1.5;
}

/* Product layout (two columns) */
.product-main {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-bottom: 30px;
}
.product-gallery {
    flex: 0 0 55%;
    max-width: 55%;
}
.product-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* La galería de la ficha vive ahora en la sección GALERÍA DE LA FICHA DE
   NEGOCIO, al final de este archivo (visor deslizable, miniaturas y modal).
   Las reglas .gallery-main y .gallery-thumbs se retiraron el 19/08/2026. */

/* Product sidebar info */
.product-price {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 16px;
}
.verified-badge {
    display: inline-flex;
    margin-bottom: 16px;
}
.verified-badge svg {
    fill: var(--color-white);
    flex-shrink: 0;
}

/* Share icons */
.share-icons {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
/* Se incluye 'button' porque "copiar enlace" no navega a ningún sitio: es una
   acción, así que semánticamente debe ser un botón, no un enlace. */
.share-icons a,
.share-icons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--color-white);
    transition: opacity 0.3s;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.share-icons a:hover,
.share-icons button:hover {
    opacity: 0.85;
    color: var(--color-white);
}
.share-icons a svg,
.share-icons button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.share-fb { background-color: #1877F2; }
.share-li { background-color: #0A66C2; }
.share-email { background-color: var(--color-secondary); }
.share-wa { background-color: #25D366; }
.share-tg { background-color: #0088CC; }
.share-x { background-color: #000000; }
.share-link { background-color: #555; transition: background-color .3s, opacity .3s; }
/* Confirmación visual: al copiar, el botón se pone verde durante 2 segundos */
.share-link.copiado { background-color: #25A55F; }

/* Favorites */
.btn-favorite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 20px;
    cursor: pointer;
    transition: color 0.3s;
}
.btn-favorite:hover {
    color: var(--color-mid-blue);
}
/* Fila de acciones de la ficha: favoritos y, para el administrador, editar.
   El margen inferior vive aquí y no en el botón, para que ambos queden
   alineados en la misma línea. */
.acciones-ficha {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.acciones-ficha .btn-favorite {
    margin-bottom: 0;
}
.btn-editar-ficha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--color-blue);
    border-radius: 8px;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s;
}
.btn-editar-ficha:hover {
    background-color: var(--color-light-blue);
}
.btn-favorite svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Detail list */
.product-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-secondary);
    font-size: 14px;
    line-height: 1.5;
}
.detail-row svg {
    width: 16px;
    height: 16px;
    fill: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.detail-label {
    font-weight: 600;
    color: var(--color-dark-blue);
    min-width: 80px;
}
.detail-value {
    color: var(--color-text);
}

/* Tabs */
.product-tabs {
    margin-bottom: 30px;
}
.tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
}
.tabs-nav button {
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-secondary);
    padding: 12px 24px;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}
.tabs-nav button:hover {
    color: var(--color-primary);
}
.tabs-nav button.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.tab-content {
    display: none;
    font-family: var(--font-secondary);
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
}
.tab-content.active {
    display: block;
}
.tab-content h3 {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-top: 20px;
    margin-bottom: 10px;
}
.tab-content h3:first-child {
    margin-top: 0;
}
.tab-content p {
    margin-bottom: 12px;
}
.tab-content ul {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: 12px;
}
.tab-content ul li {
    margin-bottom: 6px;
}

/* Contact section */
.contact-section {
    display: flex;
    flex-direction: row;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
}
.contact-form-wrapper {
    flex: 1;
    padding: 24px;
    background-color: var(--color-light-blue);
}
.contact-form-wrapper h3 {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 16px;
}
.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.form-row input,
.form-row select {
    flex: 1;
     padding: 8px;

}
.form-group {
    margin-bottom: 12px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    background-color: var(--color-white);
    padding: 8px;
}
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.form-label {
    display: block;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-blue);
    margin-bottom: 4px;
}
.form-label .req {
    color: #DC2626;
}
.btn-send {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-send:hover {
    background-color: var(--color-dark-blue);
}

/* Advisor card */
.advisor-card {
    flex: 0 0 280px;
    padding: 24px;
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.advisor-card h3 {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 16px;
}
.advisor-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}
.advisor-name {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark-blue);
    margin-bottom: 8px;
}
.advisor-social {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    justify-content: center;
}
.advisor-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--color-primary);
    color: var(--color-white);
    transition: background-color 0.3s;
}
.advisor-social a:hover {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}
.advisor-social a svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.advisor-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--color-text);
    align-items: center;
}
.advisor-contact a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}
.advisor-contact a:hover {
    color: var(--color-primary);
}
.advisor-contact svg {
    width: 14px;
    height: 14px;
    fill: var(--color-primary);
    flex-shrink: 0;
}

/* Similar listings */
.similar-section {
    margin-bottom: 40px;
}
.similar-section h2 {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 20px;
}
.similar-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    border-top: 4px solid var(--color-secondary);
    border-radius: 50px 50px 0 0;
    margin-top: 50px;
    margin-bottom: 0;
    background-color: rgba(31, 90, 153, 0.16);
}

.footer-main {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 40px 20px 20px;
}

.footer-grid {
    display: flex;
    gap: 20px;
    border-radius: 50px 50px 0 0;
}

.footer-col {
    flex: 1;
    padding: 24px 10px;
}

/* Marca y Operaciones llevan ancho fijo; Sectores y Países se reparten el resto.
   Van después de .footer-col a propósito: los dos divs llevan también esa clase
   y con la misma especificidad gana la regla declarada más abajo.
   En tablet y móvil siguen mandando las media queries del final del archivo. */
.footer-brand {
    flex: 0 0 20%;
}

.footer-col-operaciones {
    flex: 0 0 25%;
}

/* Ojo: el ancho del logo marca el mínimo real de su columna. Al ser un ítem
   flex con min-width:auto, .footer-brand no puede encoger por debajo de él,
   así que con 240px su flex-basis del 20% no llega a cumplirse en pantallas
   de escritorio pequeñas: la columna se queda en unos 260px. */
.footer-logo img {
    width: 100%;
    max-width: 240px;
    margin-bottom: 12px;
}

.footer-desc {
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 16px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-secondary);
    border-radius: 50%;
    padding: 0.4em;
    transition: all 0.3s;
}

/* El glifo va a 16px para conservar la proporción del círculo de 28px
   y dejar sitio al padding de 0.4em */
.social-icons a svg {
    width: 16px;
    height: 16px;
    fill: var(--color-white);
}

.social-icons a:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

.footer-title {
    font-family: var(--font-secondary);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.footer-links {
    margin-bottom: 0;
}

.footer-links li {
    padding: 2px 0;
}

.footer-links li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-secondary);
    transition: color 0.3s;
}

.footer-links li a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid var(--color-primary);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    flex-shrink: 0;
}

.footer-links li a:hover {
    color: var(--color-primary);
}


.footer-divider {
    border-top: 1px solid var(--color-secondary);
    margin: 10px 0;
}

/* Footer bottom */
.footer-bottom {
    border-top: 1px solid var(--color-text);
    margin: 0 20px;
}

.footer-bottom-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    padding: 0 20px;
}

.copyright {
    font-family: var(--font-secondary);
    font-size: 14px;
    color: var(--color-text);
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    font-family: var(--font-secondary);
    font-size: 12px;
    color: var(--color-dark-blue);
    transition: color 0.3s;
}

.footer-legal a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   RESPONSIVE: ESCRITORIO ESTRECHO  (1279px y por debajo)
   De 1280px hacia arriba el header se ve correcto y no debe tocarse: por eso
   el corte es 1279 y no 1280. Va antes que las media queries de tablet y
   móvil porque, al solaparse los rangos, manda la última declarada.
   ========================================================================== */
@media (max-width: 1279px) {
    /* Disposición: [pestaña + logo] a la izquierda, acciones a la derecha.
       El menú horizontal y el botón redondo de acceso se refunden en la
       hamburguesa, que hereda el sitio que ocupaba el de login. */
    .header-nav { display: none; }
    .btn-header-login,
    .header-logout-form { display: none; }

    .header-inner {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 16px;
        /* Sin el tope de 1140px: por encima de ~1164px el contenedor empezaba
           a centrarse y arrastraba el logo hacia la derecha, mientras la
           pestaña seguía anclada al borde de la ventana. Así ambos mantienen
           la misma distancia al borde en todo el tramo. */
        max-width: none;
    }

    /* Logo pegado a la izquierda, sobre la parte visible de la pestaña */
    .header-logo {
        order: 0;
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-start;
        margin-top: 0;
        margin-left: calc(-1 * var(--logo-extra-x));
    }

    /* Acciones a la derecha. Se suben 15px para equilibrarlas con el logo,
       que queda en la parte alta de la pestaña (si no, cuelgan más abajo). */
    .header-cta {
        order: 1;
        flex: 0 0 auto;
        width: auto;
        padding-left: 0;
        align-items: flex-end;
        transform: translateY(-10px);
    }

    /* Mismo círculo que tenía el botón de acceso, para ocupar su lugar */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(38px * var(--factor-botones));
        height: calc(38px * var(--factor-botones));
        flex-shrink: 0;
        padding: 0;
        border-radius: 50%;
        background-color: var(--color-primary);
        transition: all 0.3s;
    }
    .menu-toggle svg { width: calc(18px * var(--factor-botones)); height: calc(18px * var(--factor-botones)); fill: var(--color-white); }
    .menu-toggle:hover {
        box-shadow: 0px 0px 10px 0px rgba(11, 140, 182, 0.5);
        transform: scale(1.05);
    }

    /* El botón de publicar encoge con el mismo factor que la hamburguesa */
    .btn-publish {
        font-size: calc(16px * var(--factor-botones));
        padding: calc(8px * var(--factor-botones)) calc(20px * var(--factor-botones));
    }

    /* Pestaña a escala reducida y desplazada a la izquierda: se sale por ese
       borde y queda a la vista la proporción de --pestana-visible.
       El eje Y se queda SIEMPRE en -1px: subirla recorta la curvatura y
       estropea el acabado. */
    :root {
        --pestana-ancho: 495px;
        /* Desplazamientos finos de este tramo, ajustables en un solo sitio:
           cuánto se corre la pestaña y el logo hacia la izquierda. */
        --pestana-extra-x: 40px;
        --logo-extra-x: 8px;
        /* Reducción de los botones (publicar + hamburguesa): 1 por encima de
           580px, baja suave hasta 0.75 (-25%) al llegar a 320px. */
        --factor-botones: clamp(0.75, calc(0.75 + 0.25 * (100vw - 320px) / 260px), 1);
    }

    .site-header {
        background-size: var(--pestana-ancho) auto;
        background-position: calc((var(--pestana-visible) - 1) * var(--pestana-ancho) - var(--pestana-extra-x)) -1px;
    }

    /* El logo se centra en la altura real de la pestaña, no en la del header:
       la proporción del SVG es 8.376:1. El margen negativo lleva el borde
       superior de esta caja al de la pestaña (medido: sin él quedaba 4px por
       debajo), y align-items la centra dentro. */
    .header-logo {
        align-self: flex-start;
        height: calc(var(--pestana-ancho) / 8.376);
        margin-top: -13px;
        align-items: center;
    }

    /* Logo más pequeño para que quepa dentro de la parte plana de la pestaña */
    .header-logo img {
        width: 250px;
        max-width: 250px;
        height: auto;
    }

    /* El panel desplegable se ancla bajo el header, que ya no hace saltos de línea */
    .mobile-nav.open {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        width: 280px;
        max-width: calc(100% - 32px);
        z-index: 60;
    }
    .mobile-nav ul { border-radius: 12px; }

    /* Presentación de tableta (561-1279px): cada enlace gestionado toma el
       orden y la visibilidad que le asignó el panel para este tramo. */
    .mobile-nav .nav-gestionado {
        order: var(--orden-tableta, 10);
        display: var(--ver-tableta, list-item);
    }

    .mobile-nav-salir {
        display: block;
        width: 100%;
        text-align: left;
        color: var(--color-light-blue);
        padding: 10px 16px;
        font-size: 16px;
        font-family: inherit;
    }
}

/* ==========================================================================
   RESPONSIVE: TABLET
   ========================================================================== */
@media (max-width: 1024px) {
    /* Marco blanco algo más estrecho en pantallas pequeñas */
    :root { --margen-marco: 8px; }

    /* Los chips se apilarían en varias filas: se sustituyen por el dropdown */
    .operation-buttons { display: none; }
    .op-dropdown { display: block; }

    h2 { font-size: 36px; }
    .pricing-header h2, .benefits-section h2 { font-size: 36px; }

    /* El header se configura por completo en la media query de 1279px. Las
       reglas que había aquí (display:block en .menu-toggle, order y flex del
       logo, wrap del inner) iban después en el archivo y la pisaban: por eso
       el icono de la hamburguesa se salía de su círculo por debajo de 1024. */

    .listings-inner { flex-direction: column; }
    .pricing-cards { flex-direction: column; align-items: center; }
    .price-card { max-width: 100%; width: 100%; }
    .features-inner { flex-wrap: wrap; }
    .feature-box { flex: 0 0 calc(50% - 12px); }

    .footer-grid { flex-wrap: wrap; }
    .footer-brand { flex: 0 0 100%; }
    .footer-col { flex: 0 0 calc(33.333% - 14px); }

    .search-controls-row { flex-wrap: wrap; }
    .search-country-wrapper, .search-sector-wrapper { flex: 1 1 45%; min-width: 0; }
    .search-input-main-wrapper { flex: 1 1 100%; order: 3; }

    /* HEADER2 tablet: chips en su propia fila, encima del buscador */
    .hero-listado-titulo { font-size: 34px; }
    .hero-chips { flex: 1 1 100%; order: 1; }

    /* Listados tablet: el sidebar de filtros ya no se apila ocupando todo el
       ancho — pasa a ser un panel deslizable, oculto por defecto, que se abre
       con el botón "Filtros" y cubre la pantalla completa mientras está abierto. */
    .listados-main { flex-direction: column; }
    .listados-sidebar {
        display: none;
        flex: none;
        width: 100%;
    }
    .listados-sidebar.sidebar-abierto {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: var(--color-white);
        padding: 20px;
        overflow-y: auto;
    }
    .btn-filtros-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        margin-bottom: 16px;
        padding: 10px 16px;
        background: var(--color-primary);
        color: var(--color-white);
        border: none;
        border-radius: 8px;
        font-family: var(--font-secondary);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: auto;
        margin-bottom: 16px;
        background: var(--color-light-blue);
        color: var(--color-primary);
        border: none;
        border-radius: 50%;
        cursor: pointer;
    }
    .card-row { flex-wrap: wrap; }
    /* flex-grow:1 (no 0 0 fijo) para que una tarjeta huérfana al final se estire
       y ocupe el ancho completo en vez de quedar sola con la mitad en blanco */
    .card-row .listing-card { flex: 1 1 calc(50% - 10px); }

    /* Ficha tablet */
    .product-main { flex-direction: column; }
    .product-gallery { flex: none; max-width: 100%; }
    .contact-section { flex-direction: column; }
    .advisor-card { flex: none; }
    .similar-row { flex-wrap: wrap; }
    .similar-row .listing-card { flex: 0 0 calc(50% - 10px); }
}

/* ==========================================================================
   RESPONSIVE: MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 20px; }
    .pricing-header h2, .benefits-section h2 { font-size: 28px; }

    /* El salto de -40px descolgaba el slider 40px por debajo del header y
       rompía la alineación de las capas: sube lo mismo que en el resto de
       anchos, la altura del header. */
    .hero-section { border-radius: 20px; }

    .operation-buttons { flex-direction: column; gap: 8px; }
    .op-btn { width: 100%; text-align: center; }

    /* padding-top >= altura del header (~88px) para que el contenido no se
       monte con el header; 82px deja ~20px de aire bajo el header */
    .hero-content { padding: 82px 20px 40px; }

    .search-controls-row { flex-direction: column; gap: 10px; }
    .search-country-wrapper, .search-sector-wrapper, .search-input-main-wrapper {
        flex: 1 1 100%; width: 100%; min-width: 0;
    }

    /* HEADER2 movil: los chips no se apilan, se desplazan en horizontal para
       que la barra blanca no crezca y descuadre la hero */
    .hero-listado { min-height: 220px; }
    .hero-listado .hero-content { padding: 82px 20px 20px 20px; }
    .hero-listado-titulo { font-size: 26px; margin-bottom: 10px; }
    .hero-chips {
        flex: 1 1 100%;
        width: 100%;
        align-self: stretch;
        justify-content: flex-start;
    }

    .features-inner { flex-direction: column; }
    .feature-box { flex: 0 0 100%; }

    .footer-grid { flex-direction: column; }
    .footer-col { flex: 0 0 100%; }

    .footer-bottom-inner {
        flex-direction: column-reverse;
        padding: 20px;
        gap: 12px;
        text-align: center;
    }

    .footer-legal { flex-wrap: wrap; justify-content: center; }

    .copyright {
        text-align: center;
    }

    /* Listados mobile */
    .listados-main { padding: 0; }
    .card-row { flex-direction: column; gap: 16px; }
    .card-row .listing-card { flex: none; width: 100%; }
    .sort-bar { flex-direction: column; align-items: flex-start; }

    /* Ficha mobile */
    .product-title { font-size: 22px; }
    .product-price { font-size: 26px; }
    .form-row { flex-direction: column; gap: 12px; }
    .similar-row { flex-direction: column; }
    .similar-row .listing-card { flex: none; width: 100%; }

    /* Search modal mobile */
    .search-modal { padding: 20px; border-radius: 16px; }
}

/* ==========================================================================
   RESPONSIVE: MÓVIL ESTRECHO  (560px y por debajo)
   Con el logo a tamaño completo (250px), por debajo de ~560px ya no caben
   logo + "Publique un negocio" + hamburguesa sin comprimir el logo. El botón
   de publicar sale del header y entra en el menú (destacado), dejándole el
   espacio al logo.
   ========================================================================== */
@media (max-width: 560px) {
    .header-cta .btn-publish { display: none; }
    .mobile-nav-publicar { display: list-item; }

    /* Presentación de móvil (560px o menos): el mismo desplegable, pero con
       el orden y la visibilidad propios de este tramo. */
    .mobile-nav .nav-gestionado {
        order: var(--orden-movil, 10);
        display: var(--ver-movil, list-item);
    }
}

/* ==========================================================================
   CONTENIDO DE LAS PÁGINAS (/p/{slug})
   El contenido lo escribe el administrador con el editor de /admin/paginas,
   así que llega como HTML libre: encabezados, listas, enlaces, tablas,
   imágenes. Sin estas reglas el navegador lo pintaba plano (los h2 con el
   mismo tamaño que un párrafo y las listas sin viñetas), porque la hoja no
   tenía estilos para el HTML suelto dentro de una tarjeta.
   Todo va acotado a .pagina-contenido: no afecta a las tarjetas de negocio.
   ========================================================================== */
.pagina-contenido {
    flex: 1 1 100%;
    width: 100%;
    padding: 32px 36px;
    display: block;          /* la tarjeta de negocio es flex column; aquí estorba */
    cursor: default;
}

/* La tarjeta de negocio se eleva al pasar el ratón porque es clicable.
   Esta no lo es. */
.pagina-contenido:hover {
    transform: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.pagina-imagen-destacada {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 28px;
}

.pagina-contenido h1,
.pagina-contenido h2,
.pagina-contenido h3,
.pagina-contenido h4 {
    font-family: var(--font-primary);
    color: var(--color-primary);
    line-height: 1.3;
    margin: 28px 0 12px;
}
.pagina-contenido > :first-child { margin-top: 0; }

.pagina-contenido h1 { font-size: 30px; font-weight: 700; }
.pagina-contenido h2 { font-size: 25px; font-weight: 700; }
.pagina-contenido h3 { font-size: 20px; font-weight: 600; }
.pagina-contenido h4 { font-size: 17px; font-weight: 600; }

.pagina-contenido p,
.pagina-contenido li {
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
}
.pagina-contenido p { margin: 0 0 16px; }

.pagina-contenido ul,
.pagina-contenido ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.pagina-contenido ul { list-style: disc; }
.pagina-contenido ol { list-style: decimal; }
.pagina-contenido li { margin-bottom: 6px; }

.pagina-contenido a {
    color: var(--color-blue);
    text-decoration: underline;
}
.pagina-contenido a:hover { color: var(--color-dark-blue); }

.pagina-contenido strong { font-weight: 700; color: var(--color-primary); }

.pagina-contenido blockquote {
    margin: 20px 0;
    padding: 12px 20px;
    border-left: 4px solid var(--color-accent);
    background: var(--color-light-blue);
    border-radius: 0 8px 8px 0;
}
.pagina-contenido blockquote p:last-child { margin-bottom: 0; }

.pagina-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.pagina-contenido hr {
    border: none;
    border-top: 1px solid var(--color-secondary);
    margin: 28px 0;
}

/* Las tablas pueden ser más anchas que la columna: se desplazan dentro de su
   propia caja en vez de desbordar la página. */
.pagina-contenido table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-family: var(--font-secondary);
    font-size: 15px;
}
.pagina-contenido th,
.pagina-contenido td {
    border: 1px solid var(--color-secondary);
    padding: 10px 12px;
    text-align: left;
    color: var(--color-text);
}
.pagina-contenido th {
    background: var(--color-light-blue);
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 767px) {
    .pagina-contenido { padding: 20px; }
    .pagina-contenido h1 { font-size: 25px; }
    .pagina-contenido h2 { font-size: 21px; }
    .pagina-contenido h3 { font-size: 18px; }
}

/* Tarjetas "Tres formas de trabajar con nosotros" (página Nosotros).
   Acotado a .pagina-contenido: no afecta a otras páginas de contenido. */
.pagina-contenido .tres-formas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* Sin align-items: por defecto ("stretch") las 2 tarjetas de la fila
       igualan su altura a la más alta, sin importar cuánto texto tenga cada
       una ni el ancho de pantalla. La tarjeta ancha, sola en su fila, no se
       ve afectada. */
    margin: 24px 0 32px;
}

/* La tercera tarjeta ("Contrata a un agente") tiene bastante más contenido
   que las otras dos: ocupa el ancho completo en vez de forzar 3 columnas
   iguales, que dejaban un hueco vacío enorme bajo las tarjetas cortas. */
.pagina-contenido .tres-formas-card-ancha {
    grid-column: 1 / -1;
}

.pagina-contenido .tres-formas-dual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 700px) {
    .pagina-contenido .tres-formas-dual { grid-template-columns: 1fr; }
}

.pagina-contenido .tres-formas-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s, transform 0.25s;
}
.pagina-contenido .tres-formas-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* Título e ícono en la misma fila, ícono a la derecha: apilados (ícono
   arriba, título abajo) dejaban un hueco vacío a la derecha del ícono. */
.pagina-contenido .tres-formas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pagina-contenido .tres-formas-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-light-blue);
    color: var(--color-primary);
}
.pagina-contenido .tres-formas-icono svg {
    width: 20px;
    height: 20px;
}

.pagina-contenido .tres-formas-card h3 { margin: 0; }
.pagina-contenido .tres-formas-card p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .pagina-contenido .tres-formas-grid { grid-template-columns: 1fr; }
}

/* CTA de cierre al final de una página de contenido */
.pagina-contenido .cta-pagina {
    text-align: center;
    margin: 36px 0 4px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}
/* ".pagina-contenido a" (enlaces del texto corrido) tiene más especificidad
   que ".btn-view-all" solo: sin este override el botón se veía como un
   enlace azul subrayado en vez de un botón. */
.pagina-contenido a.btn-view-all {
    color: var(--color-white);
    text-decoration: none;
}
.pagina-contenido a.btn-view-all:hover {
    color: var(--color-white);
}

/* Trampa antirrobots del formulario de contacto de la ficha.
   Se oculta fuera de la pantalla en lugar de con display:none, porque algunos
   robots descartan los campos ocultos de la forma evidente. Para una persona
   es invisible e inalcanzable con el tabulador. */
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   FRAGMENTOS DE LISTADO EN PÁGINAS DE CONTENIDO
   Bloques de publicaciones que el administrador inserta dentro del texto con
   [listado='001']. Se pintan con la misma tarjeta que el buscador.
   Los anchos del carrusel deben coincidir con calcularVisibles() del
   componente Alpine: 1 tarjeta ≤768px, 2 ≤1024px, 3 ≤1449px, 4 ≤1799px, 5 arriba.
   ========================================================================== */
.fragmento-listado {
    margin: 28px 0;
    /* El contenido de la página va dentro de una tarjeta con padding; el
       fragmento respira igual que un párrafo. */
    clear: both;
}

/* ---------- Rejilla ----------
   El administrador elige 2, 3 o 4 columnas para escritorio. Por debajo se
   reducen solas: 2 en tableta y 1 en móvil, sea cual sea lo elegido. */
.fragmento-rejilla {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fragmento-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fragmento-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fragmento-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .fragmento-rejilla,
    .fragmento-rejilla--2,
    .fragmento-rejilla--3,
    .fragmento-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .fragmento-rejilla,
    .fragmento-rejilla--2,
    .fragmento-rejilla--3,
    .fragmento-rejilla--4 { grid-template-columns: 1fr; }
}

/* La tarjeta dentro de la rejilla no necesita el ancho fijo del listado */
.fragmento-rejilla .listing-card {
    width: 100%;
    margin: 0;
    height: 100%;
}

/* ---------- Carrusel ---------- */
.fragmento-carrusel {
    position: relative;
    overflow: visible;
}

/* Igual que en la portada: estas reglas no pueden ir inline porque Alpine
   reemplaza el atributo style completo al aplicar el translateX. */
.fragmento-carrusel .listings-inner {
    gap: 0;
    flex-wrap: nowrap;
    flex-direction: row;
}

/* Cuántas tarjetas se ven a la vez. El administrador elige el valor de
   escritorio, que llega inline como --cols-escritorio; por debajo se reduce
   solo, igual que en la rejilla: 2 en tableta y 1 en móvil.
   Se usan dos variables porque una propiedad declarada inline no se puede
   sobrescribir desde una media query: --cols sí, porque vive solo en el CSS. */
.fragmento-carrusel {
    --cols: var(--cols-escritorio, 3);
}

.fragmento-carrusel .listings-slide {
    flex: 0 0 auto;
    width: calc(100% / var(--cols));
    padding: 0 10px;
    box-sizing: border-box;
    /* El slide es flex para que la tarjeta se estire hasta su altura. Sin esto
       la tarjeta es nieta del contenedor flex y conserva su altura natural, así
       que unas quedan más altas que otras. En el listado no pasa porque ahí la
       tarjeta sí es hija directa del contenedor flex (.card-row). */
    display: flex;
}

.fragmento-carrusel .listing-card {
    width: 100%;
    margin: 0;
    /* Todas las tarjetas de la fila con la misma altura, como en el listado */
    height: 100%;
}

/* Que la altura se reparta igual aunque el texto de una sea más largo */
.fragmento-carrusel .listings-inner { align-items: stretch; }

@media (max-width: 1024px) {
    .fragmento-carrusel { --cols: 2; }
}

@media (max-width: 768px) {
    .fragmento-carrusel { --cols: 1; }
}

/* ---------- Aislamiento del contenido de la página ----------
   Las tarjetas del fragmento se inyectan DENTRO de .pagina-contenido, así que
   heredaban los estilos pensados para el texto libre del editor: al título le
   caía `margin: 28px 0 12px` y 25px de tamaño por ser un <h2>, y a los párrafos
   `margin-bottom: 16px` y 16px de tamaño. Resultado: el doble de separación
   entre la ubicación y el título que en el buscador.
   Aquí se devuelven los valores propios de la tarjeta. La especificidad
   (0,3,0) supera a la de las reglas del contenido (0,1,1). */
.pagina-contenido .fragmento-listado .card-title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1.3;
    margin: 0 0 12px;
}

.pagina-contenido .fragmento-listado .card-location {
    font-family: var(--font-secondary);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-secondary);
    margin: 0 0 8px;
}

.pagina-contenido .fragmento-listado .card-desc {
    font-family: var(--font-secondary);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 16px;
}

.pagina-contenido .fragmento-listado .card-ref,
.pagina-contenido .fragmento-listado .card-sector {
    font-family: var(--font-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Los enlaces de la tarjeta no llevan el subrayado ni el color del texto libre */
.pagina-contenido .fragmento-listado a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   PÁGINAS DE ERROR (404, 403, 419, 429, 500, 503)
   Todas comparten la misma plantilla: el código grande, un título que dice
   qué pasó en lenguaje llano y una salida clara. Nunca se deja al visitante
   sin a dónde ir.
   ========================================================================== */

.pagina-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 64px 20px 80px;
    max-width: 620px;
    margin: 0 auto;
}

.pagina-error-codigo {
    font-family: var(--font-primary);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-light-blue);
    letter-spacing: -2px;
}

.pagina-error-titulo {
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: -12px;
}

.pagina-error-texto {
    font-size: 16px;
    color: var(--color-text);
    margin-top: 16px;
}

.pagina-error-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

.pagina-error-boton {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    transition: background-color 0.2s ease;
}

.pagina-error-boton:hover { background-color: var(--color-dark-blue); }

.pagina-error-boton-secundario {
    background-color: transparent;
    color: var(--color-secondary);
    border-color: var(--color-border);
}

.pagina-error-boton-secundario:hover {
    background-color: var(--color-light-blue);
    color: var(--color-primary);
}

/* El detalle técnico (identificador de la incidencia) va discreto: le sirve a
   quien nos escriba para reportarlo, no al visitante que solo quiere salir. */
.pagina-error-referencia {
    margin-top: 28px;
    font-size: 13px;
    color: var(--color-secondary);
}

@media (max-width: 640px) {
    .pagina-error-codigo { font-size: 88px; }
    .pagina-error-titulo { font-size: 22px; }
    .pagina-error-acciones { flex-direction: column; width: 100%; }
    .pagina-error-boton { width: 100%; }
}

/* Respaldo del botón «copiar enlace» de la ficha: solo aparece si el navegador
   no permite copiar al portapapeles. Sustituye al prompt del navegador. */
.copiar-fallo {
    flex-basis: 100%;
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-secondary);
}

.copiar-fallo input {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    font-family: var(--font-secondary);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

/* ==========================================================================
   GALERÍA DE LA FICHA DE NEGOCIO
   Visor deslizable + miniaturas de navegación + modal a tamaño completo.
   El desplazamiento lo hace el navegador con scroll-snap: en el móvil el gesto
   es el nativo y no hay arrastre programado.
   ========================================================================== */

.galeria-visor {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.galeria-pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* La barra de desplazamiento estorba: el visor se maneja con el dedo,
       las flechas o las miniaturas. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.galeria-pista::-webkit-scrollbar { display: none; }

.galeria-foto {
    flex: 0 0 100%;
    width: 100%;
    height: 360px;
    object-fit: cover;
    scroll-snap-align: start;
    cursor: zoom-in;
    display: block;
}

.galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background-color 0.2s ease, opacity 0.2s ease;
    z-index: 2;
}

.galeria-flecha:hover { background: var(--color-white); }
.galeria-flecha:disabled { opacity: 0.35; cursor: default; }
.galeria-flecha-izq { left: 12px; }
.galeria-flecha-der { right: 12px; }

.galeria-contador {
    position: absolute;
    right: 12px;
    bottom: 12px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white);
    font-size: 12px;
    z-index: 2;
}

.galeria-miniaturas {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.galeria-miniaturas img {
    flex: 0 0 auto;
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.galeria-miniaturas img:hover { opacity: 1; }

.galeria-miniaturas img.activa {
    border-color: var(--color-primary);
    opacity: 1;
}

/* ---------- Modal a tamaño completo ---------- */

.galeria-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.galeria-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

/* Aquí la foto se ve entera, sin recortar: es lo que salva a las verticales,
   que en el visor quedan cortadas para que todas compartan el mismo alto. */
.galeria-modal-foto {
    position: relative;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    z-index: 1;
}

.galeria-modal-cerrar {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.galeria-modal-cerrar:hover { background: rgba(255, 255, 255, 0.28); }

.galeria-modal-contador {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    z-index: 2;
}

@media (max-width: 768px) {
    .galeria-foto { height: 260px; }

    /* En el móvil se pasa con el dedo: las flechas sobran y tapan la foto. */
    .galeria-flecha { display: none; }

    .galeria-miniaturas img { width: 64px; height: 48px; }
    .galeria-modal { padding: 12px; }
    .galeria-modal-foto { max-height: 82vh; }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES (/faqs)
   Bloque que inyecta el shortcode [faqs] dentro de .pagina-contenido. Dos
   columnas: el índice de categorías a la izquierda y las respuestas a la
   derecha. Por debajo de 900px se apila y el índice pasa arriba.
   El despliegue se anima con grid-template-rows (0fr → 1fr): así la altura
   real la calcula el navegador y no hace falta ni JavaScript ni un max-height
   inventado que corte los textos largos.
   ========================================================================== */
.faqs {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 28px;
}

/* ---------- Índice de categorías ---------- */
.faqs-indice {
    position: sticky;
    top: 96px;                 /* deja pasar el header fijo */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.faqs-categoria {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.faqs-categoria:hover { background: var(--color-light-blue); }

.faqs-categoria.is-activa {
    background: var(--color-primary);
    color: var(--color-white);
}

.faqs-categoria-nombre { flex: 1; }

.faqs-categoria-cuenta {
    flex-shrink: 0;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--color-light-blue);
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-mid-blue);
    text-align: center;
}

.faqs-categoria.is-activa .faqs-categoria-cuenta {
    background: rgba(255, 255, 255, 0.22);
    color: var(--color-white);
}

/* Caja que se despliega con las preguntas de la categoría abierta */
.faqs-lista-caja {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.faqs-lista-caja.is-abierta { grid-template-rows: 1fr; }

/* El contenido libre de la página pone viñetas y sangría a cualquier <ul>
   (.pagina-contenido ul { list-style: disc; padding-left: 24px }). El índice
   es una navegación, no una lista de texto: aquí se le quitan. */
.pagina-contenido .faqs-lista {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagina-contenido .faqs-lista li {
    margin: 0;
    list-style: none;
}

.faqs-pregunta-enlace {
    display: block;
    width: 100%;
    padding: 7px 14px 7px 16px;
    border: none;
    border-left: 2px solid var(--color-border);
    background: transparent;
    font-family: var(--font-secondary);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-secondary);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.faqs-pregunta-enlace:hover { color: var(--color-blue); }

.faqs-pregunta-enlace.is-activa {
    border-left-color: var(--color-accent);
    color: var(--color-blue);
    font-weight: 600;
}

/* ---------- Panel de respuestas ---------- */
.faqs-panel { min-width: 0; }

/* El título de la categoría: el h2 del contenido libre es más grande y con
   más margen del que pide esta cabecera. */
.pagina-contenido .faqs-seccion-titulo {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-light-blue);
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
}

.faqs-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--color-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.faqs-item:hover { border-color: #c9d6e4; }

.faqs-item.is-abierta {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* El h3 aquí es solo el envoltorio accesible del botón: sin estilos propios */
.pagina-contenido .faqs-item-titulo {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.faqs-item-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 15px 18px;
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary);
    text-align: left;
    cursor: pointer;
}

.faqs-item-texto { flex: 1; }

.faqs-item-flecha {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-secondary);
    transition: transform 0.25s ease, color 0.2s;
}

.faqs-item.is-abierta .faqs-item-flecha {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faqs-item-respuesta {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.faqs-item.is-abierta .faqs-item-respuesta { grid-template-rows: 1fr; }

.faqs-item-cuerpo { overflow: hidden; }

/* El texto de la respuesta va dentro de .pagina-contenido y hereda sus
   márgenes de párrafo; aquí se ajusta al recuadro. */
.pagina-contenido .faqs-item-cuerpo > :first-child { margin-top: 0; }

.pagina-contenido .faqs-item-cuerpo p,
.pagina-contenido .faqs-item-cuerpo li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
}

.pagina-contenido .faqs-item-cuerpo p {
    margin: 0 18px 14px;
    padding: 0;
}

.pagina-contenido .faqs-item-cuerpo ul {
    margin: 0 18px 14px;
    padding-left: 22px;
}

.pagina-contenido .faqs-item-cuerpo li { margin-bottom: 5px; }

.pagina-contenido .faqs-item-cuerpo > :last-child { margin-bottom: 18px; }

.pagina-contenido .faqs-item-cuerpo a {
    color: var(--color-blue);
    text-decoration: underline;
}

/* ---------- Aviso de cierre ---------- */
.faqs-ayuda {
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: 10px;
    background: var(--color-light-blue);
    text-align: center;
}

.pagina-contenido .faqs-ayuda-titulo {
    margin: 0 0 4px;
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary);
}

.pagina-contenido .faqs-ayuda-texto {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--color-secondary);
}

.faqs-ayuda-boton {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 6px;
    background: var(--color-primary);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    transition: background-color 0.2s;
}

/* Los enlaces del contenido libre van subrayados; este es un botón. */
.pagina-contenido .faqs-ayuda-boton {
    color: var(--color-white);
    text-decoration: none;
}

.faqs-ayuda-boton:hover { background: var(--color-dark-blue); }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 900px) {
    .faqs {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* Arriba y sin pegarse: en una columna el índice acompaña, no navega */
    .faqs-indice {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 6px;
        border-radius: 10px;
        background: #f7fafd;
    }

    /* Las preguntas ya están completas en el panel de abajo: en una sola
       columna repetirlas obligaría a pasar por delante de 50 enlaces para
       llegar a la primera respuesta. */
    .faqs-lista-caja { display: none; }

    .faqs-categoria { padding: 10px 12px; }
}

@media (max-width: 600px) {
    .faqs-categoria { font-size: 14px; }

    .faqs-item-cabecera {
        padding: 13px 14px;
        font-size: 15px;
    }

    .pagina-contenido .faqs-item-cuerpo p,
    .pagina-contenido .faqs-item-cuerpo ul { margin-left: 14px; margin-right: 14px; }

    .pagina-contenido .faqs-seccion-titulo { font-size: 19px; }

    .faqs-ayuda { padding: 18px 16px; }
}

/* ==========================================================================
   PÁGINA DE CONTACTO: formulario y conversación privada del visitante
   ========================================================================== */
.contacto-form {
    margin-top: 32px;
    padding: 24px;
    background-color: var(--color-light-blue);
    border-radius: 12px;
}
.pagina-contenido .contacto-form h3 {
    margin: 0 0 16px;
    color: var(--color-dark-blue);
}
.contacto-campo {
    flex: 1;
    min-width: 0;
}
.contacto-form input,
.contacto-form select,
.contacto-form textarea {
    padding: 8px;
    background-color: var(--color-white);
}
.pagina-contenido .contacto-ayuda,
.pagina-contenido .contacto-error {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
}
.pagina-contenido .contacto-ayuda { color: var(--color-secondary); }
.pagina-contenido .contacto-error { color: #DC2626; }
.contacto-captcha { margin-bottom: 12px; }
.contacto-form .btn-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.contacto-aviso {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 14px;
}
.contacto-aviso--exito { background-color: #dcfce7; border-color: #bbf7d0; color: #166534; }
.contacto-aviso--error { background-color: #fee2e2; border-color: #fecaca; color: #991b1b; }
.contacto-aviso--neutro { background-color: #f3f4f6; border-color: var(--color-border); color: var(--color-text); }

.pagina-contenido .contacto-hilo-datos {
    font-size: 13px;
    color: var(--color-secondary);
}
.contacto-hilo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contacto-hilo-mensaje {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 10px;
}
.contacto-hilo-mensaje--visitante {
    align-self: flex-end;
    background-color: var(--color-light-blue);
}
.contacto-hilo-mensaje--equipo {
    align-self: flex-start;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
}
.pagina-contenido .contacto-hilo-autor {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark-blue);
}
.contacto-hilo-autor span {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-secondary);
}
.pagina-contenido .contacto-hilo-texto { margin: 0; }

@media (max-width: 600px) {
    .contacto-form { padding: 16px; }
    .contacto-hilo-mensaje { max-width: 100%; }
}

/* El captcha mide 300px fijos y en un teléfono no cabe en la caja: se reduce
   a escala. El margen negativo compensa el hueco que deja al encogerse. */
@media (max-width: 480px) {
    .contacto-captcha {
        transform: scale(0.76);
        transform-origin: left top;
        margin-bottom: -4px;
    }
}

/* ==========================================================================
   PÁGINA DE AGENTES: listado de Agentes SVN en cuadrícula o en filas
   ========================================================================== */
.agentes { padding-bottom: 40px; }

.agentes-vacio {
    font-size: 15px;
    color: var(--color-secondary);
}

.agentes-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.agentes-total {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark-blue);
}

/* Selector de vista: dos botones unidos, el activo relleno */
.agentes-vistas {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.agentes-vista-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.agentes-vista-btn + .agentes-vista-btn { border-left: 1px solid var(--color-border); }
.agentes-vista-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.agentes-vista-btn:hover { color: var(--color-primary); }
.agentes-vista-btn--activa,
.agentes-vista-btn--activa:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* --- Cuadrícula (vista por defecto) --- */
.agentes-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.agente-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    /* Al llegar por un ancla, la tarjeta no queda tapada por la cabecera fija */
    scroll-margin-top: calc(var(--alto-header) + 32px);
}
/* Agente al que apunta el enlace (/agentes#nombre-del-agente) */
.agente-card:target {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(49, 191, 173, 0.3);
}

.agente-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.agente-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Iniciales de quien no ha subido foto */
.agente-foto span {
    font-family: var(--font-primary);
    font-size: 56px;
    font-weight: 600;
    color: var(--color-primary);
}

.agente-datos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.agente-nombre {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-dark-blue);
}

.agente-contacto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}
.agente-contacto a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.agente-contacto a:hover { color: var(--color-primary); }
.agente-contacto svg {
    width: 14px;
    height: 14px;
    fill: var(--color-primary);
    flex-shrink: 0;
}

.agente-paises,
.agente-metodos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.agente-paises li { display: flex; }
.agente-paises img {
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* País sin bandera ni icono propio: va con su nombre */
.agente-pais-texto,
.agente-metodos li {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-dark-blue);
    background-color: var(--color-light-blue);
    border-radius: 999px;
}
.agente-metodos img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* En cuadrícula no se muestra el total de publicaciones */
.agente-publicaciones { display: none; }

/* --- Filas --- */
.agentes-lista--filas { grid-template-columns: 1fr; }

.agentes-lista--filas .agente-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 24px;
}
/* La foto ocupa todo el alto de la fila, separada de los bordes por el
   relleno de la tarjeta */
.agentes-lista--filas .agente-foto {
    aspect-ratio: auto;
    min-height: 150px;
}
.agentes-lista--filas .agente-datos { justify-content: center; }

.agentes-lista--filas .agente-publicaciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 150px;
    padding-left: 24px;
    border-left: 1px solid var(--color-border);
}
.agente-publicaciones-titulo {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
}
.agente-publicaciones-total {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
}

@media (max-width: 600px) {
    .agentes-lista { grid-template-columns: 1fr; }

    /* En el teléfono la fila se queda con foto y datos; el total de
       publicaciones baja a una franja propia debajo */
    .agentes-lista--filas .agente-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 16px;
    }
    .agentes-lista--filas .agente-foto { min-height: 96px; }
    .agentes-lista--filas .agente-foto span { font-size: 32px; }
    /* Junto a la foto solo cabe el nombre: el contacto, los países y los
       métodos de pago bajan a todo el ancho para que el correo no se parta */
    .agentes-lista--filas .agente-datos { display: contents; }
    .agentes-lista--filas .agente-nombre { align-self: center; }
    .agentes-lista--filas .agente-contacto,
    .agentes-lista--filas .agente-paises,
    .agentes-lista--filas .agente-metodos { grid-column: 1 / -1; }
    .agentes-lista--filas .agente-publicaciones {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        min-width: 0;
        padding: 12px 0 0;
        border-left: none;
        border-top: 1px solid var(--color-border);
    }
    .agentes-lista--filas .agente-publicaciones-total { font-size: 28px; }
}