/*
Theme Name: ERA Max Theme
Author: ACL Consultores
Version: 1.6.19
Text Domain: era-max-theme
Description: Tema clásico con looks (Nativo, Principal, DistProp). Tipografía, paleta, nav overlay y color por preset; sin plantillas de página si Plantillas ON está activo. Sin footer legal (vive en plantillas).
*/

/* ============================================================
   0. @font-face — fuentes locales pre-empaquetadas
   ============================================================ */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/red-hat-display-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/red-hat-display-400-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/red-hat-display-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/red-hat-display-600-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   1. VARIABLES — compartidas (no cromáticas / no tipográficas)
   Las variables de color y tipografía se inyectan por preset
   vía body.era-preset-* (inc/era-presets.php → inline CSS).
   ============================================================ */
:root {
    --era-radius:         0.375rem;
    --era-radius-sm:      0.5rem;
    --era-radius-lg:      0.625rem;
    /* Forma ERA en imágenes: 3 esquinas suaves + inferior derecha más marcada (rem, no %). */
    --era-radius-img:     1.25rem 1.25rem 3.75rem 1.25rem;
    /* Forma ERA: 3 esquinas suaves + inferior derecha marcada (como CTA corporativo). */
    --era-radius-btn:     0.375rem 0.375rem 1.25rem 0.375rem;
    --era-header-height:  4rem;
    --era-news-ink:       #250e62;
}

/* ============================================================
   2. RESET Y BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--era-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--era-ink);
    background-color: var(--era-white);
}

/* ============================================================
   3. TIPOGRAFÍA
   Selectores con body[class*="era-preset-"] para ganar a los
   estilos globales de theme.json (:root :where(h1) → #C8102E).
   ============================================================ */
body[class*="era-preset-"] h1,
body[class*="era-preset-"] h2,
body[class*="era-preset-"] h3,
body[class*="era-preset-"] h4,
body[class*="era-preset-"] h5,
body[class*="era-preset-"] h6 {
    font-family: var(--era-font-heading);
    font-weight: var(--era-heading-weight, 600);
    line-height: 1.2;
    color: var(--era-heading-color);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
    color: var(--era-ink-light);
}

body[class*="era-preset-"] a:where(:not(.wp-element-button)) {
    color: var(--era-navy);
    text-decoration: none;
}

body[class*="era-preset-"] a:where(:not(.wp-element-button)):hover {
    color: var(--era-primary);
    text-decoration: underline;
}

/* ============================================================
   4. CABECERA
   ============================================================ */
.site-header {
    background-color: var(--era-white);
    border-bottom: 1px solid var(--era-border);
    height: var(--era-header-height, 64px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__inner {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 clamp(1.25rem, 3vw, 2rem);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    box-sizing: border-box;
}

.site-header__zone {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.site-header__zone--left {
    justify-content: flex-start;
    margin-right: auto;
}

.site-header__zone--center {
    justify-content: center;
}

.site-header__zone--right {
    justify-content: flex-end;
    margin-left: auto;
}

/* Si el branding está en left, forzar pegado al inicio */
.site-header__zone--left .site-branding {
    margin-right: auto;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.site-branding--below_logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.site-header__zone--center .site-branding--below_logo {
    align-items: center;
}

.site-header__zone--right .site-branding--below_logo {
    align-items: flex-end;
}

.site-branding .site-title {
    font-family: var(--era-font-heading);
    font-size: 1.625rem; /* +30% sobre 1.25rem */
    font-weight: 700;
    color: var(--era-primary);
    text-decoration: none;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-branding .site-title:hover {
    color: var(--era-primary-dark);
    text-decoration: none;
}

.site-branding img,
.site-branding .custom-logo {
    height: var(--era-logo-size, 40px);
    max-height: var(--era-logo-size, 40px);
    width: auto;
    display: block;
}

/* ============================================================
   5. NAVEGACIÓN — interlineado sencillo (1.2)
   ============================================================ */
.main-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 1.15rem;
    line-height: 1.2;
}

.main-navigation ul li a {
    display: block;
    padding: 0.15rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--era-ink-light);
    border-radius: var(--era-radius);
    transition: color .15s, background-color .15s;
    text-decoration: none;
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus-visible,
.main-navigation ul li.current-menu-item > a {
    color: var(--era-primary);
    background-color: var(--era-primary-tint);
    text-decoration: underline;
    text-underline-offset: 0.28em;
}

/* ============================================================
   5b. BLOQUE NAVEGACIÓN (todos los menús wp_navigation)
   Interlineado sencillo: line-height 1.2 + gap/padding vertical bajo.
   ============================================================ */
.wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation .wp-block-page-list {
    gap: 0.1rem 1.35rem;
    line-height: 1.2;
}

.wp-block-navigation {
    padding-block: 0.15rem;
    line-height: 1.2;
}

.wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item__content {
    line-height: 1.2;
}

.wp-block-navigation .wp-block-navigation-item__content {
    padding-block: 0.15rem;
    padding-inline: 0.2rem;
    text-decoration: none;
    text-underline-offset: 0.32em;
    text-decoration-thickness: 1.5px;
    transition: opacity 0.16s ease;
}

.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
    text-decoration: underline;
    text-decoration-color: currentColor;
    opacity: 0.82;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .era-ficha-modelo--actual > .wp-block-navigation-item__content {
    text-decoration: underline;
    text-decoration-color: currentColor;
    font-weight: 600;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-block: 0.2rem;
    padding-inline: 0.75rem;
    line-height: 1.2;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
    gap: 0.25rem 1rem;
    line-height: 1.2;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding-block: 0.25rem;
    line-height: 1.2;
}

/* ============================================================
   6. CONTENIDO PRINCIPAL
   ============================================================ */
.site-main {
    width: 100%;
    padding: 2.5rem 1.5rem;
}

body[class*="era-preset-"] .entry-title {
    font-family: var(--era-font-heading);
    font-weight: var(--era-heading-weight, 600);
    color: var(--era-heading-color);
    margin-bottom: 1.5rem;
}

/* En portada el título de sección lo aporta [era_promociones]. */
body.home .entry-header,
body.home .entry-title {
    display: none;
}

.entry-content {
    color: var(--era-ink-light);
}

/* Imágenes de contenido — esquinas redondeadas ERA (como banners corporativos). */
.entry-content img,
.pon-content-wrap img,
.epmax-part img,
.wp-block-image img,
.wp-block-gallery img,
.wp-block-media-text__media img,
.wp-block-post-featured-image img,
.epmax-featured-image img,
.site-main .wp-caption img,
.site-main figure:not(.site-branding) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--era-radius-img);
}

/* Sin redondeo: logos de cabecera e iconos del sistema. */
.site-branding img,
.site-branding .custom-logo,
img.custom-logo,
.emoji,
.avatar {
    border-radius: 0;
}

/* Ancho completo / amplio (Gutenberg align-wide) */
.entry-content .alignwide {
    max-width: min(100%, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.entry-content .alignfull,
.pon-content-wrap .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

.entry-content .alignfull > *,
.pon-content-wrap .alignfull > * {
    box-sizing: border-box;
}

/* ============================================================
   7. BOTONES
   ============================================================ */
button,
.btn,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-element-button {
    display: inline-block;
    background-color: var(--era-btn-bg, var(--era-primary));
    color: var(--era-white);
    border: none;
    padding: 0.6rem 1.25rem;
    font-family: var(--era-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--era-radius-btn);
    cursor: pointer;
    transition: background-color .15s, transform .1s, box-shadow .15s;
    text-decoration: none;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--era-btn-bg-hover, var(--era-primary-dark));
}

button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
.wp-block-button__link:active,
.wp-element-button:active {
    background-color: var(--era-btn-bg-hover, var(--era-primary-dark));
    transform: translateY(1px);
    box-shadow: none;
}

button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--era-navy-tint);
}

.btn-navy {
    background-color: var(--era-navy);
}

.btn-navy:hover {
    background-color: var(--era-navy-dark);
}

.btn-navy:active {
    background-color: var(--era-navy-dark);
    transform: translateY(1px);
    box-shadow: none;
}

.btn-navy:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--era-navy-tint);
}

.btn-outline {
    background-color: transparent;
    color: var(--era-primary);
    border: 1.5px solid var(--era-primary);
}

.btn-outline:hover {
    background-color: var(--era-primary-tint);
}

.btn-outline:active {
    background-color: var(--era-primary-tint);
    transform: translateY(1px);
    box-shadow: none;
}

.btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--era-primary-tint);
}

/* ------------------------------------------------------------
   Un ENLACE con clase de botón conserva el aspecto del botón.

   La regla general de enlaces del tema (`body[class*="era-preset-"] a`, §4) es
   más específica que `.btn`: le devolvía al enlace su color de enlace
   (`--era-navy`) y, al pasar el ratón, el subrayado y el rojo `--era-primary`.
   Sobre un botón relleno eso deja el texto en azul marino y, con el ratón
   encima, en el mismo rojo del fondo (ilegible). Aquí se reafirma el color de
   cada variante sobre los enlaces; el aspecto de los botones no cambia.
   ------------------------------------------------------------ */
body[class*="era-preset-"] a.btn,
body[class*="era-preset-"] a.btn:hover,
body[class*="era-preset-"] a.btn:active,
body[class*="era-preset-"] a.btn:focus-visible {
    color: var(--era-white);
    text-decoration: none;
}

body[class*="era-preset-"] a.btn-outline,
body[class*="era-preset-"] a.btn-outline:hover,
body[class*="era-preset-"] a.btn-outline:active,
body[class*="era-preset-"] a.btn-outline:focus-visible {
    color: var(--era-primary);
    text-decoration: none;
}

body[class*="era-preset-"] a.btn-navy,
body[class*="era-preset-"] a.btn-navy:hover,
body[class*="era-preset-"] a.btn-navy:active,
body[class*="era-preset-"] a.btn-navy:focus-visible {
    color: var(--era-white);
    text-decoration: none;
}

/* ============================================================
   8. FORMULARIOS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.55rem 0.85rem;
    font-family: var(--era-font-body);
    font-size: 0.95rem;
    color: var(--era-ink);
    background-color: var(--era-white);
    border: 1px solid var(--era-border);
    border-radius: var(--era-radius);
    transition: border-color .15s;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--era-navy);
    box-shadow: 0 0 0 3px var(--era-navy-tint);
}

/* ============================================================
   9. PIE DE PÁGINA
   ============================================================ */
.site-footer {
    background-color: var(--era-ink);
    color: var(--era-muted);
    padding: 2rem 1.5rem;
    font-size: 0.875rem;
    margin-top: 4rem;
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--era-border);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--era-white);
    text-decoration: none;
}

/* ============================================================
   10. UTILIDADES
   ============================================================ */
.text-primary   { color: var(--era-primary); }
.text-navy      { color: var(--era-navy); }
.text-muted     { color: var(--era-muted); }

.bg-primary     { background-color: var(--era-primary); }
.bg-primary-tint{ background-color: var(--era-primary-tint); }
.bg-navy        { background-color: var(--era-navy); }
.bg-navy-tint   { background-color: var(--era-navy-tint); }
.bg-surface     { background-color: var(--era-surface); }

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--era-radius-img);
}

.badge-primary {
    background-color: var(--era-primary-tint);
    color: var(--era-primary-dark);
}

.badge-navy {
    background-color: var(--era-navy-tint);
    color: var(--era-navy-dark);
}

/* ============================================================
   11. MENÚ LATERAL (fvppt-sidebar-menu)
   ============================================================ */
.fvppt-sidebar-menu {
    list-style: none;
    padding: 1rem 0.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fvppt-sidebar-menu li a {
    display: block;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background-color: var(--era-btn-bg, var(--era-primary));
    color: var(--era-white);
    font-family: var(--era-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--era-radius-btn);
    text-decoration: none;
    transition: background-color .15s, transform .1s;
}

.fvppt-sidebar-menu li a:hover {
    background-color: var(--era-btn-bg-hover, var(--era-primary-dark));
    text-decoration: none;
    color: var(--era-white);
}

.fvppt-sidebar-menu li a:active {
    background-color: var(--era-btn-bg-hover, var(--era-primary-dark));
    transform: translateY(1px);
}

.fvppt-sidebar-menu li.current-menu-item > a {
    background-color: var(--era-btn-bg-hover, var(--era-primary-dark));
}

/* ============================================================
   12. NAV OVERLAY + skip-link (pie legal del tema eliminado)
   ============================================================ */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--era-nav-overlay-bg, var(--era-navy, #0B3279)) !important;
    color: var(--era-nav-overlay-color, var(--era-white, #fff));
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    color: var(--era-nav-overlay-color, var(--era-white, #fff)) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus {
    color: var(--era-nav-link-hover, var(--era-primary-light, #E8415A)) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--era-nav-overlay-color, var(--era-white, #fff));
}
/*
 * Overlay móvil: alineación del Customizer (default izquierda).
 * El core copia items-justified-* al ul interno y reescribe
 * --navigation-layout-justification-setting; hay que resetear
 * en .is-menu-open en content, container e items — no en la barra PC.
 */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .items-justified-center,
.wp-block-navigation__responsive-container.is-menu-open .items-justified-left,
.wp-block-navigation__responsive-container.is-menu-open .items-justified-space-between {
    --navigation-layout-justification-setting: var(--era-nav-overlay-align-items, flex-start);
    --navigation-layout-justify: var(--era-nav-overlay-justify, flex-start);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    align-items: var(--era-nav-overlay-align-items, flex-start) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    justify-content: var(--era-nav-overlay-justify, flex-start) !important;
    padding-inline: clamp(1.25rem, 5vw, 2rem);
    padding-block: 1rem 2rem;
    box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a {
    padding-inline: 0.15rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a {
    text-align: var(--era-nav-overlay-text-align, left) !important;
}
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.75rem 1rem;
    background: var(--era-navy, #0B3279);
    color: var(--era-white, #fff);
    text-decoration: none;
}
.skip-link.screen-reader-text:focus {
    left: 0.5rem;
    top: 0.5rem;
}

.site-header .menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--era-radius-sm, 4px);
    background: transparent;
    color: inherit;
    font-family: var(--era-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .site-header {
        position: relative;
    }

    .site-header__inner {
        padding: 0 1rem;
    }

    .main-navigation:not(.is-open) {
        display: none;
    }

    .site-header .menu-toggle {
        display: inline-flex;
    }

    .site-header .main-navigation.is-open {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 1000;
        padding: 1rem;
        background: var(--era-nav-overlay-bg, var(--era-navy, #0B3279));
        color: var(--era-nav-overlay-color, var(--era-white, #fff));
    }

    .site-header .main-navigation.is-open a {
        color: var(--era-nav-overlay-color, var(--era-white, #fff));
    }

    .site-main {
        padding: 1.5rem 1rem;
    }

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.35rem; }
}

@media (min-width: 769px) {
    .site-header .menu-toggle {
        display: none;
    }
}

/*
 * Cabeceras EPMAX en móvil (≤600px = breakpoint del overlay del bloque Navegación):
 * fila 1 = logo (+ título solo si la plantilla ya lo trae)
 * fila 2 = bocadillo del menú
 * No se fuerza título en cabeceras que no lo tienen.
 */
@media (max-width: 600px) {
	.epmax-blog-header {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: center;
		justify-content: stretch;
		column-gap: 0.75rem;
		row-gap: 0.5rem;
		flex-wrap: unset;
	}

	.epmax-blog-header__logo {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.epmax-blog-header__main {
		display: contents;
	}

	.epmax-blog-header__main > .wp-block-heading {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		margin: 0;
		text-align: left !important;
	}

	.epmax-blog-header__nav,
	.epmax-blog-header .wp-block-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		justify-content: center;
	}

	.epmax-blog-header .wp-block-navigation__responsive-container-open {
		margin-inline: auto;
	}

	.epmax-site-header {
		display: grid !important;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		align-items: center;
		justify-items: stretch;
		gap: 0.5rem;
		flex-wrap: unset;
	}

	.epmax-site-header__logo {
		grid-row: 1;
		justify-self: start;
		margin: 0;
	}

	.epmax-site-header__nav-wrap {
		grid-row: 2;
		width: 100%;
		margin: 0 !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.epmax-site-header > .wp-block-navigation,
	.epmax-site-header__nav {
		grid-row: 2;
		width: 100%;
		justify-content: center;
	}

	.epmax-site-header .wp-block-navigation__responsive-container-open {
		margin-inline: auto;
	}

	.epmax-site-header__nav-wrap > .wp-block-separator {
		display: none;
	}

	/* Home: solo nav en la barra; no se inventa logo/título. */
	.era-home-cabecera__nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.era-home-cabecera__nav .wp-block-navigation__responsive-container-open {
		margin-inline: auto;
	}
}

/* ============================================================
   Archivo de categoría — cards (formato editorial, sin acoplar plugins)
   ============================================================ */
.era-cat-archive {
	--era-cat-red: #C8102E;
	--era-cat-text: #1e293b;
	--era-cat-muted: #64748b;
	--era-cat-meta: #94a3b8;
	--era-cat-radius: 8px 8px 60px 8px;
	box-sizing: border-box;
	width: 100%;
	max-width: min(100%, 1200px);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
	font-family: "Red Hat Display", system-ui, sans-serif;
	color: var(--era-cat-text);
}

.era-cat-archive *,
.era-cat-archive *::before,
.era-cat-archive *::after {
	box-sizing: border-box;
}

.era-cat-archive__header {
	margin: 0 0 2rem;
}

.era-cat-archive__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--era-cat-red);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.era-cat-archive__description {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--era-cat-muted);
}

.era-cat-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	width: 100%;
	margin: 0;
}

.era-cat-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
}

.era-cat-card__image-link {
	display: block;
	overflow: hidden;
	border-radius: var(--era-cat-radius);
	margin: 0 0 12px;
}

.era-cat-card__image,
.era-cat-card__image-link img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.515;
	object-fit: cover;
}

.era-cat-card__image-fallback {
	display: block;
	width: 100%;
	aspect-ratio: 1.515;
	background: #f1f5f9;
	border-radius: var(--era-cat-radius);
}

.era-cat-card__content {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.era-cat-card__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.18px;
	text-transform: uppercase;
}

.era-cat-card__title a {
	color: var(--era-cat-red);
	text-decoration: none;
}

.era-cat-card__title a:hover,
.era-cat-card__title a:focus-visible {
	text-decoration: underline;
}

.era-cat-card__meta {
	font-size: 0.75rem;
	color: var(--era-cat-meta);
}

.era-cat-card__excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--era-cat-muted);
}

.era-cat-card__excerpt p {
	margin: 0;
}

.era-cat-card__more {
	margin-top: 0.25rem;
	color: var(--era-cat-red);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.75rem;
}

.era-cat-card__more:hover,
.era-cat-card__more:focus-visible {
	text-decoration: underline;
}

.era-cat-archive__pagination {
	margin-top: 2.5rem;
}

.era-cat-archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
}

.era-cat-archive__pagination .page-numbers {
	display: inline-block;
	min-width: 2rem;
	padding: 0.35rem 0.55rem;
	text-align: center;
	text-decoration: none;
	border: 1px solid #c3c4c7;
	color: var(--era-cat-text);
	font-size: 0.9rem;
}

.era-cat-archive__pagination .page-numbers.current {
	background: var(--era-cat-red);
	border-color: var(--era-cat-red);
	color: #fff;
}

.era-cat-archive__empty {
	margin: 0;
	color: var(--era-cat-muted);
}

@media (max-width: 900px) {
	.era-cat-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.era-cat-archive {
		padding: 1rem 1rem 2.5rem;
	}

	.era-cat-archive__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* ============================================================
   ERA PORTAL — FICHAS DE PROPIEDAD (tarjetas de resultado)
   Aspecto de ficha, como la referencia: superficie propia, esquinas
   suaves, sombra que la separa del fondo y aire interior. Reutiliza
   los tokens del tema (--era-white, --era-border, --era-radius*,
   --era-primary, --era-ink*), de modo que cada preset conserva su
   identidad. Los tokens llevan respaldo por si un preset no los define.
   ============================================================ */

.era-portal-card {
	display: flex;
	flex-direction: column;
	overflow: hidden; /* la imagen respeta las esquinas de la ficha */
	background-color: var(--era-white, #ffffff);
	border: 1px solid var(--era-border, #dcdcdc);
	border-radius: var(--era-radius-lg, 0.625rem);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Al pasar el ratón o enfocar, la ficha se separa un poco más del fondo. */
.era-portal-card:hover,
.era-portal-card:focus-within {
	border-color: var(--era-navy-tint, #b6c6d2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.13);
}

/* Imagen: misma proporción en todas las fichas para que la rejilla cuadre. */
.era-portal-card__media {
	display: block;
}

.era-portal-card__media img,
.era-portal-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Dentro de la ficha manda la esquina de la ficha: la forma ERA de imagen
	   (--era-radius-img) parte el borde superior y descuadra la tarjeta. */
	border-radius: 0;
}

/* Cuerpo: aire interior y jerarquía de la referencia (precio primero). */
.era-portal-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 1.1rem 1.15rem;
}

.era-portal-card__price {
	margin: 0;
	font-family: var(--era-font-heading, inherit);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--era-heading-color, var(--era-ink, #1a1a1a));
}

.era-portal-card__operation {
	margin: 0;
	color: var(--era-primary, #C8102E);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.era-portal-card__title {
	margin: 0.2rem 0 0;
	font-size: 1.1rem;
	line-height: 1.3;
}

.era-portal-card__title a {
	text-decoration: none;
}

.era-portal-card__title a:hover,
.era-portal-card__title a:focus-visible {
	text-decoration: underline;
}

.era-portal-card__location,
.era-portal-card__reference,
.era-portal-card__agency {
	margin: 0;
	color: var(--era-ink-light, #5b6570);
	font-size: 0.9rem;
	line-height: 1.45;
}

/* Características en línea y separadas, como el «2 beds 2 baths 970 sq ft.» */
.era-portal-card__features {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.65rem;
	margin: 0.45rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
	font-weight: 600;
}

.era-portal-card__features li + li::before {
	content: "·";
	margin-right: 0.5rem;
	color: var(--era-muted, #6b6b6b);
	font-weight: 400;
}

.era-portal-card__link {
	margin: 0.6rem 0 0;
}

.era-portal-card__link a {
	color: var(--era-primary, #C8102E);
	font-weight: 600;
	text-decoration: none;
}

.era-portal-card__link a:hover,
.era-portal-card__link a:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.era-portal-card {
		transition: none;
	}
}

/* ============================================================
   ERA PORTAL — FORMULARIO DE FILTROS (panel lateral)
   La maquetación de la caja la aporta era-portal-layout.css; aquí va la
   PRESENTACIÓN de los grupos y campos, que no existía: sin ella el
   navegador dibujaba los <fieldset> con su marco de fábrica (marco gris y
   la leyenda mordiendo el borde), apilaba los campos en una sola columna y
   los desplegables salían sin flecha (el tema aplica «appearance: none»).
   Reutiliza los tokens del tema (--era-border, --era-ink*, --era-primary*,
   --era-radius*), así que cada preset conserva su identidad; el foco usa el
   rojo corporativo porque el tema lo pinta en azul para el resto del sitio.
   ============================================================ */

/* Grupos: fuera el marco de fábrica; separador fino y aire entre bloques. */
.era-portal-panel .era-portal-filters__group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    margin: 0;
    padding: 0 0 1.15rem;
    border: 0;
    border-bottom: 1px solid var(--era-border);
}

.era-portal-panel .era-portal-filters__group + .era-portal-filters__group {
    padding-top: 1.15rem;
}

.era-portal-panel .era-portal-filters__group:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Título del grupo: ocupa la fila completa y manda en la jerarquía. */
.era-portal-panel .era-portal-filters__group > legend {
    grid-column: 1 / -1;
    padding: 0;
    font-family: var(--era-font-heading);
    font-size: 1.05rem;
    font-weight: var(--era-heading-weight, 600);
    line-height: 1.3;
    color: var(--era-heading-color, var(--era-ink, #1a1a1a));
}

/* Campos: etiqueta pequeña encima y control a todo el ancho de su celda. */
.era-portal-panel .era-portal-filters__field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.era-portal-panel .era-portal-filters__field > span:first-child {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--era-ink-light, #5b6570);
}

/* Campos sueltos que necesitan la fila entera: orden y referencia. */
.era-portal-panel .era-portal-filters__group--order > .era-portal-filters__field,
.era-portal-panel .era-portal-filters__group--relations > .era-portal-filters__field:last-child {
    grid-column: 1 / -1;
}

/* Controles: misma caja y misma altura en listas, textos y números. */
.era-portal-panel .era-portal-filters__field select,
.era-portal-panel .era-portal-filters__field input[type="text"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    background-color: var(--era-white);
    color: var(--era-ink);
    border: 1px solid var(--era-border);
    border-radius: var(--era-radius);
    font-family: var(--era-font-body);
    font-size: 0.95rem;
}

/* Flecha propia del desplegable: «appearance: none» elimina la del sistema. */
.era-portal-panel .era-portal-filters__field select {
    padding-right: 2.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235b6570' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 0.7rem auto;
    cursor: pointer;
}

/* Foco de los campos: rojo corporativo, no el azul del resto del tema. */
.era-portal-panel .era-portal-filters__field select:focus,
.era-portal-panel .era-portal-filters__field input:focus {
    border-color: var(--era-primary);
    box-shadow: 0 0 0 3px var(--era-primary-tint);
}

/* Cabecera: el título manda y «Cerrar» deja de competir como segundo rojo. */
.era-portal-panel .era-portal-panel__head {
    padding: 1rem 1rem 0.9rem;
    border-bottom: 1px solid var(--era-border);
}

.era-portal-panel .era-portal-panel__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--era-heading-color, var(--era-ink, #1a1a1a));
}

.era-portal-panel .era-portal-panel__close {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    background-color: transparent;
    color: var(--era-ink);
    border: 1px solid var(--era-border);
    border-radius: var(--era-radius-btn);
    font-size: 0.85rem;
    font-weight: 500;
}

.era-portal-panel .era-portal-panel__close:hover,
.era-portal-panel .era-portal-panel__close:active {
    background-color: var(--era-primary-tint);
    color: var(--era-primary);
    border-color: var(--era-primary);
    transform: none;
}

/* Acciones: limpiar a la izquierda y aplicar con todo el peso a la derecha. */
.era-portal-panel .era-portal-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--era-border);
}

.era-portal-panel .era-portal-filters__submit {
    flex: 1 1 12rem;
    min-height: 2.75rem;
}

.era-portal-panel .era-portal-filters__clean {
    color: var(--era-ink-light, #5b6570);
    font-weight: 600;
    text-decoration: none;
}

.era-portal-panel .era-portal-filters__clean:hover,
.era-portal-panel .era-portal-filters__clean:focus-visible {
    color: var(--era-primary);
    text-decoration: underline;
}

/* Panel estrecho o móvil: una sola columna, sin apretar los campos. */
@media (max-width: 480px) {
    .era-portal-panel .era-portal-filters__group {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   ERA PORTAL — PAGINACIÓN DE RESULTADOS
   El plugin entrega la paginación como una lista de enlaces
   (<nav class="era-portal-pagination"><ul><li><a>…) que conserva los filtros
   en la URL; sin presentación el navegador la dibujaba con viñetas, en columna
   y ocupando el ancho completo de la columna de fichas. Aquí se convierte en
   una fila de botones centrada bajo el listado, con la página actual en el rojo
   corporativo y el foco con el mismo anillo que los campos del panel. Sólo
   presentación: el marcado, los enlaces y sus estados los pone el plugin.
   ============================================================ */

/* Respiro respecto a la última fila de fichas (vista de listado y de mapa). */
.era-portal-pagination {
    margin-top: 2rem;
}

/* Fila centrada: los elementos de la lista pierden viñeta y sangría. */
.era-portal-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.era-portal-pagination li {
    margin: 0;
}

/* Botón de página: caja mínima cuadrada para que «1» y «37» midan igual.
   El color del texto lo pone el tema (el azul marino de los enlaces, que pasa
   a rojo al enfocar), así que aquí sólo se dibuja la caja. */
.era-portal-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.7rem;
    background-color: var(--era-white);
    border: 1px solid var(--era-border);
    border-radius: var(--era-radius);
    font-family: var(--era-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.era-portal-pagination a:hover,
.era-portal-pagination a:focus-visible {
    background-color: var(--era-primary-tint);
    border-color: var(--era-primary);
    color: var(--era-primary);
    outline: none;
}

/* Página actual: el único bloque relleno, para no confundirla con el resto. */
.era-portal-pagination a[aria-current="page"] {
    background-color: var(--era-primary);
    border-color: var(--era-primary);
    color: var(--era-white);
}

.era-portal-pagination a[aria-current="page"]:hover,
.era-portal-pagination a[aria-current="page"]:focus-visible {
    background-color: var(--era-primary);
    border-color: var(--era-primary);
    color: var(--era-white);
}

/* Recorte de páginas (…): mismo hueco que un botón, sin caja. */
.era-portal-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    color: var(--era-ink-light, #5b6570);
    line-height: 1;
}

/* Móvil: botones algo más pequeños para que las páginas quepan en una fila. */
@media (max-width: 560px) {
    .era-portal-pagination {
        margin-top: 1.5rem;
    }

    .era-portal-pagination ul {
        gap: 0.3rem;
    }

    .era-portal-pagination a,
    .era-portal-pagination__gap {
        min-width: 2.25rem;
        min-height: 2.25rem;
    }
.era-portal-pagination a {
    padding: 0.35rem 0.55rem;
    font-size: 0.85rem;
}
}

/* ============================================================
ERA PORTAL — FICHA DE PROPIEDAD
Presentación de la ficha que entrega el plugin (breadcrumb, cabecera,
barra resumen, galería a pantalla completa, descripción, características,
planos, ubicación, contacto y similares). El orden y el contenido los pone
el plugin; aquí sólo se dibuja, reutilizando los tokens del tema
(--era-primary, --era-navy, --era-ink*, --era-border, --era-radius*,
--era-font-*) para que cada preset conserve su identidad.
============================================================ */

/* La ficha ocupa todo el ancho: el carrusel va de borde a borde y las
   secciones de texto se centran en un contenedor de 1200 px. */
.era-portal--ficha {
width: 100%;
padding: 0 0 3rem;
color: var(--era-ink, #1a1a1a);
}

.era-portal-ficha__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

/* --- Ruta de navegación --------------------------------------------- */

.era-portal-breadcrumb {
margin-bottom: 1rem;
font-size: 0.85rem;
}

.era-portal-breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
color: var(--era-ink-light, #5b6570);
}

.era-portal-breadcrumb__item + .era-portal-breadcrumb__item::before {
content: "›";
margin-right: 0.35rem;
color: var(--era-border, #dcdcdc);
}

.era-portal-breadcrumb__link {
text-decoration: none;
}

.era-portal-breadcrumb__text[aria-current="page"] {
color: var(--era-ink, #1a1a1a);
font-weight: 600;
}

/* --- Cabecera ------------------------------------------------------- */

.era-portal-ficha__header {
margin-bottom: 1.25rem;
}

/* El título visible vive en la barra superior; aquí sólo queda el texto para
   lectores de pantalla. */
.era-portal-ficha__title.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.era-portal-ficha__title {
margin: 0;
font-family: var(--era-font-heading, inherit);
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
font-weight: var(--era-heading-weight, 600);
line-height: 1.15;
color: var(--era-heading-color, var(--era-ink, #1a1a1a));
}

/* --- Barra resumen: precio, datos clave y acceso a las fotos -------- */

.era-portal-overview {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
background-color: var(--era-surface, #f5f6f8);
border: 1px solid var(--era-border, #dcdcdc);
border-radius: var(--era-radius-lg, 0.625rem);
}

.era-portal-overview__facts {
min-width: 0;
}

.era-portal-overview__price {
margin: 0;
font-family: var(--era-font-heading, inherit);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
color: var(--era-primary, #C8102E);
}

.era-portal-overview__list {
margin: 0.25rem 0 0;
color: var(--era-ink-light, #5b6570);
font-size: 0.95rem;
}

.era-portal-overview__photos-button {
display: inline-block;
padding: 0.6rem 1.25rem;
background-color: var(--era-btn-bg, var(--era-primary, #C8102E));
color: var(--era-white, #fff);
font-family: var(--era-font-body, inherit);
font-size: 0.9rem;
font-weight: 500;
border: none;
border-radius: var(--era-radius-btn, 0.375rem);
cursor: pointer;
transition: background-color 0.15s;
}

.era-portal-overview__photos-button:hover {
background-color: var(--era-btn-bg-hover, var(--era-primary-dark, #a20d25));
}

.era-portal-overview__photos-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--era-primary-tint, #f4d2d8);
}

/* --- Carrusel de fotos ---------------------------------------------- */

/* Carrusel a ancho completo, pegado a la barra superior. */
.era-portal-gallery {
    width: 100%;
    margin: 0 0 1.5rem;
}

.era-portal-gallery__stage {
    position: relative;
    width: 100%;
    margin: 0 0 0.5rem;
    background-color: var(--era-surface, #f5f6f8);
    overflow: hidden;
}

.era-portal-gallery__main {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Flechas del carrusel: sobre la foto, en círculo oscuro. */
.era-portal-gallery__nav,
.era-portal-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--era-white, #fff);
    background-color: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s;
}

.era-portal-gallery__nav:hover,
.era-portal-gallery__nav:focus-visible,
.era-portal-lightbox__nav:hover,
.era-portal-lightbox__nav:focus-visible {
    background-color: rgba(0, 0, 0, 0.72);
    outline: none;
}

.era-portal-gallery__nav--prev,
.era-portal-lightbox__nav--prev {
    left: 0.75rem;
}

.era-portal-gallery__nav--next,
.era-portal-lightbox__nav--next {
    right: 0.75rem;
}

.era-portal-gallery__counter {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    margin: 0;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    color: var(--era-white, #fff);
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: var(--era-radius, 0.375rem);
}

.era-portal-gallery__zoom {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-family: var(--era-font-body, inherit);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--era-white, #fff);
    background-color: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: var(--era-radius, 0.375rem);
    cursor: pointer;
    transition: background-color 0.15s;
}

.era-portal-gallery__zoom:hover,
.era-portal-gallery__zoom:focus-visible {
    background-color: rgba(0, 0, 0, 0.72);
    outline: none;
}

/* Tira de miniaturas: fila con desplazamiento horizontal. Se centra cuando
   cabe y se desplaza de lado cuando no. */
.era-portal-gallery__thumbs {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0 1rem 0.5rem;
    list-style: none;
    overflow-x: auto;
}

.era-portal-gallery__thumb,
.era-portal-lightbox__thumb {
    display: block;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    background: none;
    border: 2px solid transparent;
    border-radius: var(--era-radius-sm, 0.5rem);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s;
}

.era-portal-gallery__thumb img,
.era-portal-lightbox__thumb img {
    display: block;
    width: 100px;
    height: 75px;
    object-fit: cover;
}

.era-portal-gallery__thumb:hover,
.era-portal-gallery__thumb:focus-visible,
.era-portal-gallery__thumb[aria-current="true"],
.era-portal-lightbox__thumb:hover,
.era-portal-lightbox__thumb:focus-visible,
.era-portal-lightbox__thumb[aria-current="true"] {
    border-color: var(--era-primary, #C8102E);
    outline: none;
}

/* --- Visor a pantalla completa -------------------------------------- */

body.era-portal-gallery-open {
    overflow: hidden;
}

.era-portal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    overflow-y: auto;
    background-color: var(--era-white, #fff);
}

.era-portal-lightbox[hidden] {
    display: none;
}

.era-portal-lightbox__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.era-portal-lightbox__image {
    max-width: min(1100px, 100%);
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--era-radius, 0.375rem);
}

.era-portal-lightbox__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.era-portal-lightbox__counter {
    margin: 0;
    text-align: center;
    color: var(--era-ink-light, #5b6570);
    font-size: 0.9rem;
}

.era-portal-lightbox__close {
    align-self: center;
    padding: 0.6rem 1.5rem;
    background-color: transparent;
    color: var(--era-primary, #C8102E);
    border: 1.5px solid var(--era-primary, #C8102E);
    border-radius: var(--era-radius-btn, 0.375rem);
    font-family: var(--era-font-body, inherit);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

.era-portal-lightbox__close:hover,
.era-portal-lightbox__close:focus-visible {
    background-color: var(--era-primary-tint, #f4d2d8);
    outline: none;
}

/* --- Columnas: contenido y lateral de contacto ---------------------- */

.era-portal-ficha__columns {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
gap: 2rem;
align-items: start;
}

.era-portal-ficha__main {
min-width: 0;
}

.era-portal-ficha__aside {
position: sticky;
top: 1.5rem;
min-width: 0;
}

.era-portal-ficha__section {
margin-bottom: 2.25rem;
}

.era-portal-section__title {
margin: 0 0 1rem;
padding-bottom: 0.5rem;
font-family: var(--era-font-heading, inherit);
font-size: 1.25rem;
font-weight: var(--era-heading-weight, 600);
line-height: 1.3;
color: var(--era-heading-color, var(--era-ink, #1a1a1a));
border-bottom: 1px solid var(--era-border, #dcdcdc);
}

/* --- Descripción ---------------------------------------------------- */

.era-portal-description {
color: var(--era-ink-light, #5b6570);
line-height: 1.75;
}

/* --- Características en dos columnas -------------------------------- */

.era-portal-details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 1.5rem;
margin: 0;
}

.era-portal-details__row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--era-border, #dcdcdc);
}

.era-portal-details__label {
margin: 0;
color: var(--era-ink-light, #5b6570);
}

.era-portal-details__value {
margin: 0;
font-weight: 600;
text-align: right;
}

/* --- Planos --------------------------------------------------------- */

.era-portal-plan__figure {
margin: 0;
}

.era-portal-plan__image {
max-width: 100%;
height: auto;
border: 1px solid var(--era-border, #dcdcdc);
border-radius: var(--era-radius, 0.375rem);
}

/* --- Ubicación ------------------------------------------------------ */

.era-portal-location__text,
.era-portal-location__address {
margin: 0 0 0.5rem;
color: var(--era-ink-light, #5b6570);
}

/* --- Contacto ------------------------------------------------------- */

.era-portal-contact {
padding: 1.25rem;
background-color: var(--era-surface, #f5f6f8);
border: 1px solid var(--era-border, #dcdcdc);
border-radius: var(--era-radius-lg, 0.625rem);
}

.era-portal-contact__agent,
.era-portal-contact__agency {
margin-bottom: 1rem;
}

.era-portal-contact__photo,
.era-portal-contact__logo {
max-width: 120px;
height: auto;
margin-bottom: 0.5rem;
border-radius: var(--era-radius, 0.375rem);
}

.era-portal-contact__name {
margin: 0;
font-family: var(--era-font-heading, inherit);
font-size: 1.05rem;
font-weight: 600;
}

.era-portal-contact__position,
.era-portal-contact__address {
margin: 0.15rem 0 0;
color: var(--era-ink-light, #5b6570);
font-size: 0.9rem;
}

.era-portal-contact__phone {
margin: 0.35rem 0 0;
font-weight: 600;
}

.era-portal-contact__fallback {
margin: 0 0 1rem;
color: var(--era-ink-light, #5b6570);
}

.era-portal-contact__form {
margin-top: 1rem;
}

.era-portal-contact__iframe {
display: block;
width: 100%;
border: 0;
border-radius: var(--era-radius, 0.375rem);
}

/* --- Última actualización ------------------------------------------- */

.era-portal-ficha__updated {
margin: 0;
color: var(--era-ink-light, #5b6570);
font-size: 0.85rem;
font-style: italic;
}

/* --- Similares ------------------------------------------------------ */

.era-portal-similar {
padding-top: 1.5rem;
border-top: 1px solid var(--era-border, #dcdcdc);
}

/* --- Ajustes de ancho ----------------------------------------------- */

@media (max-width: 991px) {
.era-portal-ficha__columns {
    grid-template-columns: minmax(0, 1fr);
}

.era-portal-ficha__aside {
    position: static;
}
}

@media (max-width: 560px) {
.era-portal-details {
    grid-template-columns: minmax(0, 1fr);
}

.era-portal-ficha__container {
    padding: 0 0.75rem;
}

.era-portal-overview {
    flex-direction: column;
    align-items: stretch;
}

.era-portal-lightbox {
    padding: 1rem;
}

.era-portal-lightbox__image {
    max-height: 55vh;
}

.era-portal-gallery__nav,
.era-portal-lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.4rem;
}
}