/* ============================================================
   Ajustes propios sobre la plantilla Outdoor (Riba Pitxot CMS)
   ============================================================ */

/* ---- Norma tipográfica por defecto: Poppins (vía tema), 300 normal / 700 negrita ---- */
body { font-weight: 300; }
strong, b { font-weight: 700; }

/* ---- Modo interior con scroll (páginas de texto y casas) ---- */
body.interior, html:has(body.interior) { height: auto; overflow-y: auto; overflow-x: hidden; }
body.interior #main { position: relative; height: auto; min-height: 100%; opacity: 1; }
body.interior #wrapper { position: relative; height: auto; min-height: 100vh; }
body.interior .content-holder { position: relative; height: auto; min-height: 100vh; padding: 150px 90px 140px; text-align: left; }
@media (max-width: 1600px) {
    body.interior .content-holder { padding: 120px 30px 120px; }
}

/* ---- Logo: capa fija, por encima de TODAS las capas, sin desplazar nada ---- */
/* Alto por variable de tema; en móvil usa su propia variable (tamaño responsive editable). */
.site-logo { position: fixed; top: var(--logo-top, 18px); left: var(--logo-left, 90px); z-index: 9999; display: flex; align-items: center; height: var(--logo-size, 50px); }
.site-logo img { height: 100%; width: auto; max-width: none; display: block; }
.site-logo-text { font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: 26px; color: var(--heading, #232D38); white-space: nowrap; line-height: 1; }
@media (max-width: 1600px) { .site-logo { top: var(--logo-top-mobile, 14px); left: var(--logo-left-mobile, 20px); height: var(--logo-size-mobile, 40px); } }

/* ---- Selector de idioma: un globo que despliega los idiomas (ocupa 1, no 4) ---- */
.lang-holder { position: absolute; top: 28px; right: 90px; z-index: 30; }
.lang-toggle { display: flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; padding: 6px 4px; color: var(--text, #232D38); font-weight: 700; font-size: 12px; letter-spacing: 1px; font-family: inherit; line-height: 1; }
.lang-toggle .fa-globe { font-size: 19px; }
.lang-cur { text-transform: uppercase; }
.lang-toggle:hover { color: var(--accent); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; margin: 0; padding: 6px 0; list-style: none; background: var(--bg, #fff); box-shadow: 0 10px 34px rgba(0,0,0,.16); border-radius: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.lang-holder.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li a { display: block; padding: 9px 20px; color: var(--text, #232D38); font-size: 13px; letter-spacing: .4px; text-transform: none; text-decoration: none; white-space: nowrap; }
.lang-menu li a:hover, .lang-menu li a.active { color: var(--fill-text, #fff); background: var(--fill, #232D38); }
@media (min-width: 1601px) { .nav-holder { margin-right: 96px !important; } }
@media (max-width: 1600px) {
    /* Hamburguesa centrada, idiomas a la derecha, y las 3 rayas iguales de largas */
    .nav-button-holder { left: 50% !important; right: auto !important; transform: translateX(-50%); top: 26px !important; }
    .nav-button span:first-child { width: 100% !important; }
    .lang-holder { top: 24px; right: 22px; }
}

/* ---- Estilos aplicados en los editores (Quill): tienen prioridad sobre las clases de la plantilla ----
   Los estilos inline (familia/tamaño/grosor/color/fondo) ya salen con !important desde el editor.
   La alineación y la sangría son clases ql-* que la plantilla NO define en el front: las forzamos aquí. */
.ql-align-center { text-align: center !important; }
.ql-align-right { text-align: right !important; }
.ql-align-justify { text-align: justify !important; }
.ql-align-left { text-align: left !important; }
img.ql-align-center { display: block; margin-left: auto; margin-right: auto; }
img.ql-align-right { display: block; margin-left: auto; }
img.ql-align-left { display: block; margin-right: auto; }
.ql-indent-1 { padding-left: 3em; }  .ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }  .ql-indent-4 { padding-left: 12em; }
.ql-indent-5 { padding-left: 15em; } .ql-indent-6 { padding-left: 18em; }
.ql-indent-7 { padding-left: 21em; } .ql-indent-8 { padding-left: 24em; }

/* ---- Contenedor de texto centrado ---- */
.text-content { max-width: 860px; margin: 0 auto; text-align: left; }
.text-content h1 { font-size: 3em; font-weight: 300; color: #232D38; margin-bottom: 10px; letter-spacing: -0.5px; }
.text-content .sub { text-transform: uppercase; letter-spacing: 3px; font-size: .8em; color: #999; margin-bottom: 40px; }
.text-content h2, .text-content h3 { color: #232D38; font-weight: 500; margin: 1.4em 0 .5em; }
.text-content p, .text-content li { font-size: 14px; font-weight: 300; line-height: 1.85; color: #4a4a4a; }
.text-content strong, .text-content b { font-weight: 700; }
.text-content a { color: var(--accent, #1B66AF); text-decoration: underline; }

/* ---- Recuadro destacado (perk): p. ej. Es Gelat en el mismo edificio ---- */
.perk-box { margin: 34px 0; padding: 22px 26px; border: 1px solid var(--accent, #2E5D3E); border-radius: 8px; background: rgba(46, 93, 62, .045); }
.perk-box h3 { margin: 0 0 10px; color: var(--accent, #2E5D3E) !important; font-weight: 700; font-size: 1.2em; }
.perk-box p { margin: 0 0 8px; }
.perk-box a { display: inline-block; margin-top: 4px; color: var(--accent, #2E5D3E); font-weight: 700; text-decoration: none; }
.perk-box a:hover { text-decoration: underline; }

/* ---- Página de ubicación (On som): mapa + cómo llegar ---- */
.location-map { max-width: 1040px; margin: 44px auto 0; }
.rp-map { width: 100%; height: 440px; border: 0; border-radius: 6px; display: block; background: #e9e7e2; }
.rp-map-consent { display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #2f3d33 0%, #1b241f 100%); }
.rp-map-consent .mc-inner { max-width: 460px; padding: 30px; color: #fff; }
.rp-map-consent .mc-inner i { font-size: 34px; color: var(--accent, #2f6b4f); display: block; margin-bottom: 14px; }
.rp-map-consent .mc-inner p { color: rgba(255,255,255,.9); font-weight: 300; font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.map-directions { margin-top: 24px; }
.map-directions .md-title { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: .85em; color: var(--text, #232D38); margin-bottom: 14px; }
.map-directions .md-title i { color: var(--accent, #2E5D3E); margin-right: 6px; }
.md-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.dir-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--accent, #2E5D3E); border-radius: 4px; color: var(--accent, #2E5D3E); background: transparent; text-decoration: none; font-size: .95em; line-height: 1.2; transition: background .2s, color .2s; }
.dir-btn:hover { background: var(--accent, #2E5D3E); color: #fff; }
.dir-btn i { font-size: 1.1em; }
@media (max-width: 600px) { .rp-map { height: 320px; } .md-btns { flex-direction: column; } .dir-btn { justify-content: flex-start; } }

/* ---- Guía (plantilla Directorio): tarjetas de negocios/lugares ---- */
.directory { max-width: 1120px; margin: 26px auto 0; }
.dir-cat { font-size: 1.6em; font-weight: 300; color: var(--heading, #232D38); margin: 42px 0 18px; padding-bottom: 8px; border-bottom: 1px solid #e6e2da; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.dir-card { border: 1px solid #e6e2da; border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.dir-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.dir-card:hover .dir-photo img { transform: scale(1.04); }
.dir-media .dir-extra { display: none; }   /* extras solo en el lightbox */
.dir-body { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.dir-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dir-head h3 { margin: 0; font-size: 1.15em; font-weight: 700; color: var(--heading, #232D38); }
.dir-rating { flex: none; font-weight: 700; font-size: .78em; color: #fff; background: var(--accent, #2E5D3E); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.dir-sub { font-size: 13px; color: #8a8a8a; margin-top: -3px; }
.dir-meta { list-style: none; margin: 3px 0 0; padding: 0; font-size: 13px; color: #555; }
.dir-meta li { display: flex; gap: 9px; align-items: flex-start; margin: 5px 0; }
.dir-meta li i { color: var(--accent, #2E5D3E); width: 15px; text-align: center; margin-top: 3px; flex: none; }
.dir-meta a { color: #555; text-decoration: none; }
.dir-meta a:hover { color: var(--accent, #2E5D3E); text-decoration: underline; }
.dir-maps { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent, #2E5D3E); text-decoration: none; }
.dir-maps:hover { text-decoration: underline; }
@media (max-width: 640px) { .dir-grid { grid-template-columns: 1fr; } }
.text-content img { max-width: 100%; margin: 1.5em 0; }
.page-sep { width: 60px; height: 2px; background: #232D38; margin: 26px 0 34px; }

.house-book { margin-top: 26px; }

/* ===== Ficha CLÁSICA: diseño limpio tipo folleto (hero a sangre + cuerpo 2 columnas + galería) =====
   Diseño propio (el usuario permite elegir diseño; la info es la misma que en portfolio). Evita la
   colisión con el logo fijo (el título va centrado sobre el hero, no arriba-izquierda). ===== */
.house-classic .house-classic-hero { position: relative; margin: 0 -90px 54px; height: 62vh; min-height: 440px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.house-classic .hc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.house-classic .house-classic-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.58) 100%); z-index: 1; }
.house-classic .hc-hero-inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 24px 7vh; max-width: 1040px; }
/* Tamaño/margen base del banner clásico (idéntico al slider: 80px título / 18px subtítulo; el CMS lo sobreescribe). */
/* Cuerpo: descripción + panel de información */
.house-classic .house-classic-body { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
/* Sin panel de información (alojamiento sin características): una sola columna centrada, no media vacía. */
.house-classic .house-classic-body.no-info { grid-template-columns: 1fr; max-width: 820px; }
.house-classic .hc-desc .hc-intro { font-size: 1.5em; line-height: 1.55; color: var(--heading, #232D38); font-weight: 300; margin: 0 0 .8em; }
.house-classic .hc-desc p { font-size: 1.15em; line-height: 1.9; color: #4a4a4a; }
.house-classic .hc-info { background: #f7f6f4; padding: 32px 34px; }
.house-classic .hc-info h3 { margin: 0 0 18px; font-family: var(--font-heading); color: var(--heading, #232D38); font-weight: 500; font-size: 1.35em; }
.house-classic .hc-features { list-style: none; margin: 0; padding: 0; }
.house-classic .hc-features li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid #e6e3df; color: #333; font-size: 1.02em; }
.house-classic .hc-features li:last-child { border-bottom: 0; }
.house-classic .hc-features li img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.house-classic .hc-features li i { color: var(--accent); width: 26px; text-align: center; flex: none; }
/* Apartado CONTENIDO (significado del nombre) en el panel de info de la clásica */
.house-classic .hc-info .hc-content { margin-top: 24px; padding-top: 22px; border-top: 1px solid #e6e3df; }
.house-classic .hc-info .hc-content h3 { margin: 0 0 12px; font-family: var(--font-heading); color: var(--heading, #232D38); font-weight: 500; font-size: 1.3em; }
.house-classic .hc-info .hc-content p { font-size: 1.02em; line-height: 1.75; color: #4a4a4a; margin: 0 0 .8em; }
/* Galería a sangre (rejilla de 3, cover, con zoom intense) */
.house-classic .house-classic-gallery { margin: 72px -90px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.house-classic .hc-gal-cell { position: relative; aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in; }
.house-classic .hc-gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.house-classic .hc-gal-cell:hover img { transform: scale(1.05); }
.house-classic .hc-gal-cell i { position: absolute; right: 14px; bottom: 12px; color: #fff; opacity: 0; transition: .3s; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.house-classic .hc-gal-cell:hover i { opacity: 1; }
.house-classic .hc-gal-cell.is-media { cursor: default; background: #000; display: flex; align-items: center; justify-content: center; }
.house-classic .hc-gal-cell video { width: 100%; height: 100%; object-fit: cover; }
.house-classic .hc-gal-cell audio { width: 92%; }
@media (max-width: 1064px) {
    .house-classic .house-classic-hero { margin: 0 -30px 40px; height: 52vh; }
    .house-classic .house-classic-gallery { margin: 54px -30px 0; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .house-classic .house-classic-body { grid-template-columns: 1fr; gap: 34px; }
    .house-classic .house-classic-gallery { grid-template-columns: 1fr; }
}

/* Galería de PÁGINAS/ARTÍCULOS (rejilla con zoom intense). Nota: reusa la clase .zoomimage de la
   plantilla (botón circular 60px), así que hay que neutralizar sus estilos de botón aquí. */
.house-gallery { max-width: 1300px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.house-gallery .zoomimage { position: relative; top: auto; right: auto; width: auto; height: auto; background: transparent; border-radius: 0; overflow: hidden; aspect-ratio: 4/3; cursor: zoom-in; }
/* La plantilla pone opacity:0 al <img> de .zoomimage (allí es solo el disparador invisible del zoom, con un
   .respimg hermano visible). En estas galerías ESE img ES la imagen visible → hay que devolverle opacity:1. */
.house-gallery .zoomimage img { float: none; opacity: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.house-gallery .zoomimage:hover img { transform: scale(1.06); }
.house-gallery .zoomimage i { position: absolute; right: 12px; bottom: 12px; color: #fff; opacity: 0; transition: .3s; }
.house-gallery .zoomimage:hover i { opacity: 1; }
/* Galería: celdas de vídeo/audio (no son imágenes con zoom) */
.house-gallery .zoomimage.is-media { cursor: default; display: flex; align-items: center; justify-content: center; background: #000; }
.house-gallery .zoomimage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.house-gallery .zoomimage audio { width: 92%; }
/* Hero de página/artículo en vídeo */
.text-content video.hero-media { width: 100%; margin: 1.5em 0; display: block; }

/* ===== Ficha PORTFOLIO (plantilla portfolio-single8): usa el CSS de la plantilla tal cual.
   Aquí SOLO se adapta lo imprescindible a nuestra shell interior (content-holder relativo en vez de
   absoluto height:100%) y el icono SVG de cada característica. Nada de diseño inventado. ===== */
.house-portfolio .big-index.full-height { height: calc(100vh - 290px); min-height: 460px; }   /* nuestra shell padea 150+140 */
/* la plantilla llena el fondo con .fs-wrapper (abs); aquí el slider llena el media-container igual */
.house-portfolio .media-container { position: absolute; inset: 0; }
.house-portfolio .media-container .hero-slider,
.house-portfolio .media-container .hero-slider .item { height: 100%; }
.house-portfolio .hero-title { text-align: center; }   /* la plantilla centra el título del héroe */
/* Banner del héroe (título + subtítulo): MISMO estilo en ambas plantillas. Todo (color, tamaño, grosor y
   sombra del título y de la frase) se controla POR CASA con las variables acc-title / acc-phrase que
   inyecta la ficha (ContentModel.HeroStyleVars). Los fallbacks son el estilo por defecto. */
/* !important porque la plantilla fija algunas de estas propiedades con !important (p. ej. .hero-title h3 color). */
.house-portfolio .hero-title h2,
.house-classic .hc-hero-inner h1 { color: var(--acc-title-color, #fff) !important; font-family: var(--font-heading); font-weight: var(--acc-title-weight, 100) !important; font-size: var(--acc-title-size, 80px) !important; line-height: 1.05; margin: 0; text-shadow: var(--acc-title-shadow, 0 2px 20px rgba(0, 0, 0, .45)) !important; }
.house-portfolio .hero-title .subtitle,
.house-classic .hc-hero-inner .hc-subtitle { color: var(--acc-phrase-color, #fff) !important; opacity: 1 !important; font-family: var(--font-body); font-style: normal; font-weight: var(--acc-phrase-weight, 300) !important; font-size: var(--acc-phrase-size, 18px) !important; text-shadow: var(--acc-phrase-shadow, 0 1px 14px rgba(0, 0, 0, .5)) !important; }
.house-classic .hc-hero-inner .hc-subtitle { line-height: 1.5; margin-top: 20px; }
/* Móvil: si la casa fija un tamaño móvil se usa; si no, se adapta solo (min con vw) para que no se corte. */
@media (max-width: 767px) {
    .house-portfolio .hero-title h2,
    .house-classic .hc-hero-inner h1 { font-size: var(--acc-title-size-mobile, min(var(--acc-title-size, 80px), 13vw)) !important; }
    .house-portfolio .hero-title .subtitle,
    .house-classic .hc-hero-inner .hc-subtitle { font-size: var(--acc-phrase-size-mobile, min(var(--acc-phrase-size, 18px), 4.6vw)) !important; }
}
/* Botón de reserva del héroe: layout base; relleno+opacidad, filete y color de texto los fija el CMS (inline).
   Centrado con margin auto (bloque ajustado al contenido) para que quede centrado pase lo que pase. */
.house-portfolio .hero-book-btn { display: block; width: fit-content; max-width: 90%; margin: 28px auto 0; padding: 13px 36px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: center; cursor: pointer; transition: opacity .2s; }
.house-portfolio .hero-book-btn:hover { opacity: .8; }
/* Botón encima de la descripción: botón estándar de la web (.rp-btn) */
.house-portfolio .acc-book-top { display: inline-flex; margin: 0 0 26px; }
/* Flecha de bajada centrada: la plantilla usa left/right en px fijos que no cuadran en nuestro ancho.
   OJO: la plantilla ya la centra con margin-left:-20px; hay que anularlo o se descentra 20px (doble centrado). */
.house-portfolio .custom-scroll-link { left: 50%; right: auto; width: 40px; margin-left: 0; transform: translateX(-50%); }
.house-portfolio .custom-scroll-link i { display: block; width: 100%; text-align: center; }
/* La imagen del slider entra en COVER en una caja de proporción fija (nuestras fotos tienen proporciones
   distintas; la plantilla se veía uniforme solo porque sus placeholders eran todos 1600×1070). Así los
   controles caen SOBRE la foto, no en un hueco blanco. */
.house-portfolio .custom-slider .item { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.house-portfolio .custom-slider .item .respimg { width: 100%; height: 100%; object-fit: cover; }
.house-portfolio .vertical-gallery .box-item a { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.house-portfolio .vertical-gallery .box-item img.respimg { width: 100%; height: 100%; object-fit: cover; }
/* Vídeos en el slider y en la galería del portfolio: ocupan la misma caja (cover), con controles. */
.house-portfolio .custom-slider .item video.respimg { display: block; background: #000; }
.house-portfolio .vertical-gallery .box-item.is-media { aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.house-portfolio .vertical-gallery .box-item.is-media video.respimg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* En project-details la plantilla usa un <i> (40px). Nuestras features llevan icono SVG: se coloca en esa ranura. */
.house-portfolio .project-details li img { position: absolute; top: 10px; left: 0; width: 30px; height: 30px; object-fit: contain; }
/* Panel derecho fijado (scroll-to-fixed): el footer es position:fixed (90px pegado abajo) y el panel
   se fija a top:90, así que debe caber ENTRE ambos. --fixbox-max lo calcula rp.js con la altura real del
   footer (y se recalcula en resize); el fallback descuenta 90 (top) + 90 (footer) + 20 (aire). Con scroll
   interno se ve SIEMPRE todo (descripción + info + botón) sin meterse bajo el footer ni cortarse. */
.house-portfolio .fix-box.scroll-to-fixed-fixed { max-height: var(--fixbox-max, calc(100vh - 200px)); overflow-y: auto; overflow-x: hidden; padding-right: 10px; }
.house-portfolio .fix-box.scroll-to-fixed-fixed::-webkit-scrollbar { width: 7px; }
.house-portfolio .fix-box.scroll-to-fixed-fixed::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 4px; }
/* Tipografía: outdoor usa Georgia serif cursiva en el subtítulo del héroe y en las etiquetas del INFO.
   Aquí se usan las fuentes del tema (las mismas de la home) — se quita el serif/cursiva. */
.house-portfolio .hero-title h3.subtitle { font-family: var(--font-body); font-style: normal; }
.house-portfolio .pd-holder h5 { font-family: var(--font-body); font-style: normal; font-weight: 400; }

/* Controles del slider (a petición): el EXPAND sin círculo (solo el icono), y las FLECHAS translúcidas
   con blur (cristal esmerilado) en vez de negro sólido → blanco. */
.house-portfolio .custom-slider .zoomimage { background: transparent; }
.house-portfolio .custom-slider .zoomimage img.intense { opacity: 0; }         /* oculta el thumb; sigue siendo el disparador del zoom */
/* Icono del expand: centrado en su cuadro de 60px (por defecto quedaba a la izquierda), para que rote
   SOBRE SU EJE y no describa un arco. */
.house-portfolio .custom-slider .zoomimage i { text-align: center; transform-origin: center center; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
/* Flechas: translúcidas con blur (cristal), y el icono centrado en el círculo (no en el borde). */
.house-portfolio .custom-slider-holder a.prev-slide,
.house-portfolio .custom-slider-holder a.next-slide {
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    color: #fff;
    text-align: center;
}
.house-portfolio .custom-slider-holder a.prev-slide i,
.house-portfolio .custom-slider-holder a.next-slide i { display: inline-block; width: 100%; }
.house-portfolio .custom-slider-holder .customNavigation a:hover {
    background: rgba(0, 0, 0, .45);
    color: #fff;
}
/* Dots: la plantilla los centra con .owl-controls (owl v1); nuestro tema usa owl v2 (.owl-dots).
   Se posicionan centrados abajo, sobre la foto, como en la plantilla. */
.house-portfolio .custom-slider-holder { position: relative; }
.house-portfolio .custom-slider-holder .owl-dots {
    position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3;
    text-align: center; line-height: 1;
}
.house-portfolio .custom-slider-holder .owl-dot { display: inline-block; }
@media (max-width: 1064px) {
    .house-portfolio .big-index.full-height { height: 68vh; min-height: 380px; }
}
/* Audio dentro de páginas/artículos */
.content-audio { margin: 26px 0; }
.content-audio audio { width: 100%; max-width: 520px; }

/* ---- Medios de vídeo/audio en la portada ---- */
/* Vídeo de fondo: mismo encaje que la imagen de fondo (.bg) */
video.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Imagen de fondo responsive (<img class="bg"> con srcset): encaja igual que el fondo CSS */
img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Audio de portada: reproductor pequeño y fijo (abajo-derecha, sin pisar el icono de cookies) */
/* Reproductor: SOLO los controles (sin relleno, sin filete, sin sombra). Va DENTRO del footer como elemento
   flex, así copyright · audio · menú se reparten el ancho y NUNCA se solapa con el menú (en ningún tamaño). */
footer.has-audio { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
footer.has-audio .policy-box, footer.has-audio .footer-social { float: none; }
footer.has-audio .to-top { position: fixed; }
.home-audio { flex: 0 0 auto; line-height: normal; }
.home-audio audio { display: block; width: 280px; height: 40px; background: none; }
.home-audio audio::-webkit-media-controls-enclosure { background: transparent; box-shadow: none; }
.home-audio audio::-webkit-media-controls-panel { background: transparent; box-shadow: none; }
/* Cuando copyright · audio · menú NO caben en una fila, el footer pasa a columna centrada y CRECE en alto,
   así el menú NUNCA se corta ni se pierde (a ≤756 la plantilla ya oculta el copyright). */
@media (max-width: 1080px) {
    footer.has-audio { flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: auto; min-height: 90px; padding-top: 14px; padding-bottom: 14px; line-height: 1.4; }
    footer.has-audio .policy-box { text-align: center; }
    footer.has-audio .footer-social { margin: 0; }
    footer.has-audio .footer-social ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
    footer.has-audio .footer-social li { float: none; }
    .home-audio audio { width: 240px; }
}

/* ---- Botón estilo plantilla ---- */
.rp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; background: var(--fill, #232D38); color: var(--fill-text, #fff) !important; text-transform: uppercase; letter-spacing: 2px; font-size: .78em; font-weight: 700; transition: background .25s; text-decoration: none !important; }
.rp-btn:hover { background: color-mix(in srgb, var(--fill, #232D38) 82%, #000); }

/* ---- Home: alojamientos ---- */
/* MOSAICO = Multi Slider index3 (usa la estructura fija de la plantilla). Sin filigranas: */
.home-index3 .hero-text-holder:before, .home-index3 .hero-text-holder:after { display: none !important; }
.home-index3 .separator-image { display: none !important; }
.home-index3 .hero-grid .overlay { display: none !important; }   /* fotos naturales, sin pantalla oscura */
.home-index3 .hero-text .item { display: flex !important; flex-direction: column; align-items: center; padding: 0 12px; }
.home-index3 .ht-phrase { color: var(--phrase-color, #fff); font-size: var(--phrase-size, 15px); font-weight: var(--phrase-weight, 400); text-transform: uppercase; letter-spacing: .28em; margin-bottom: 16px; text-shadow: var(--phrase-shadow, 0 1px 12px rgba(0,0,0,.55)); }
.home-index3 .ht-name { color: var(--name-color, #fff); font-size: var(--name-size, 46px); font-weight: var(--name-weight, 300); line-height: 1.05; font-family: var(--font-heading, sans-serif); text-shadow: var(--name-shadow, 0 2px 20px rgba(0,0,0,.55)); }
.home-index3 .ht-name:hover { opacity: .85; }
/* El carrusel central muestra SOLO el alojamiento activo: recorta cualquier clon/vecino */
.home-index3 .slide-title-holder,
.home-index3 .hero-text-holder,
.home-index3 .hero-text,
.home-index3 .hero-text .owl-stage-outer { max-width: 100vw; overflow: hidden; }
.home-index3 .hero-text .item { max-width: 100vw; box-sizing: border-box; }
/* overflow-wrap como red de seguridad (solo parte si de verdad no cabe), sin cortar a media palabra por defecto */
.home-index3 .ht-phrase, .home-index3 .ht-name { max-width: 92vw; overflow-wrap: break-word; }
/* Responsive: el texto se adapta, encoge y NO se desborda ni se solapa con el del contiguo */
@media (max-width: 768px) {
    /* Tamaño móvil del texto (mosaico): si se define (--*-size-mobile) se usa; si no, ajuste automático */
    .home-index3 .ht-name { font-size: var(--name-size-mobile, min(var(--name-size, 46px), 7.4vw)); letter-spacing: .03em; }
    .home-index3 .ht-phrase { font-size: var(--phrase-size-mobile, min(var(--phrase-size, 15px), 3.4vw)); letter-spacing: .14em; margin-bottom: 10px; }
}

/* PANTALLA COMPLETA = paneles con scroll */
.home-fs .content-holder { padding: 100px 14px 100px !important; text-align: center; }
.home-accs.fullscreen { display: grid; gap: 4px; grid-template-columns: 1fr; }
.home-fs .home-acc { height: calc(100vh - 190px); min-height: 520px; }
/* HOME 3 = Rejilla: todos los alojamientos a la vez, uno al lado de otro */
.home-grid .content-holder { padding: 100px 14px 100px !important; text-align: center; }
.home-accs.grid { display: grid; gap: 4px; grid-auto-rows: 1fr; height: calc(100vh - 200px); min-height: 480px; }
.home-grid .home-acc { height: 100%; }
.home-acc { position: relative; display: block; overflow: hidden; }
.home-acc .hero-slider, .home-acc .hero-slider .item { height: 100%; }
.home-acc .hero-slider .item { position: relative; }
.home-acc .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6s ease; }
.home-acc:hover .bg { transform: scale(1.06); }
.home-acc .overlay { position: absolute; inset: 0; background: rgba(var(--fill-rgb, 12,26,40), .34); transition: background .35s; z-index: 2; pointer-events: none; }
.home-acc:hover .overlay { background: rgba(var(--fill-rgb, 12,26,40), .5); }
.home-acc-caption { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; pointer-events: none; }
.home-acc-caption .acc-phrase { color: var(--phrase-color, #fff); font-size: var(--phrase-size, 15px); font-weight: var(--phrase-weight, 400); text-transform: uppercase; letter-spacing: .28em; margin-bottom: 14px; line-height: 1.4; text-shadow: var(--phrase-shadow, none); }
.home-acc-caption .acc-name { color: var(--name-color, #fff); font-size: var(--name-size, 46px); font-weight: var(--name-weight, 300); margin: 0; line-height: 1.05; font-family: var(--font-heading, sans-serif); text-shadow: var(--name-shadow, none); }
/* Tamaño móvil en grid/fullscreen: va DESPUÉS de la base para que gane (misma especificidad) */
@media (max-width: 768px) {
    .home-acc-caption .acc-name { font-size: var(--name-size-mobile, min(var(--name-size, 46px), 8vw)); }
    .home-acc-caption .acc-phrase { font-size: var(--phrase-size-mobile, min(var(--phrase-size, 15px), 4vw)); }
}
@media (max-width: 900px) {
    .home-accs.grid { height: auto; grid-template-columns: 1fr 1fr !important; }
    .home-grid .home-acc { height: 46vh; min-height: 300px; }
}
@media (max-width: 600px) {
    .home-accs.grid { grid-template-columns: 1fr !important; }
    .home-grid .home-acc { height: 60vh; }
    .home-fs .home-acc { height: 72vh; }
}

/* ---- Home con franja de contenido (texto intro + reseñas) debajo del escaparate ---- */
/* Con contenido extra la portada es SCROLLABLE: el escaparate ocupa la 1ª pantalla y el contenido va debajo. */
body.home-has-extra, html:has(body.home-has-extra) { height: auto !important; overflow-y: auto !important; overflow-x: hidden; }
/* Mosaico (Home 1): el escaparate es normalmente position:absolute y #main/#wrapper height:0.
   Con franja extra lo devolvemos al flujo: 1ª pantalla completa y la franja fluye debajo. */
body.home-has-extra.home-index3wrap #main,
body.home-has-extra.home-index3wrap #wrapper { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
body.home-has-extra.home-index3wrap .content-holder.home-index3 { position: relative !important; top: auto !important; left: auto !important; height: 100vh !important; }
/* Rejilla / pantalla completa (Home 3 / Home 2) ya son interior (scroll normal); solo aseguramos 1ª pantalla. */
body.home-has-extra.home-grid .content-holder, body.home-has-extra.home-fs .content-holder { min-height: 100vh; }
.home-extra { display: flow-root; position: relative; z-index: 6; background: var(--bg, #fff); color: var(--text, #232D38); }
.home-extra-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.home-intro { padding: 90px 0 44px; text-align: center; }
.home-intro h2 { font-family: var(--font-body, sans-serif); font-weight: 300; font-size: 1.95em; line-height: 1.55; color: var(--heading, #232D38); margin: 0; }
.home-intro h2 strong { font-weight: 600; }
.home-reviews { padding: 30px 0 100px; }
.home-reviews .reviews-heading { text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-bottom: 34px; font-size: .95em; color: var(--text, #232D38); }
.home-reviews .reviews-static, .home-reviews .reviews-live { max-width: 100%; margin: 0 auto; }

/* ---- Carrusel de reseñas: reestiliza el snapshot de TrustIndex como tarjetas premium con flechas ---- */
/* Anula el layout de "slider" de la plantilla de TrustIndex; montamos scroll horizontal propio. */
.home-reviews .ti-widget, .home-reviews .ti-widget-container, .home-reviews .ti-reviews-container { all: unset; display: block; }
.home-reviews .reviews-static { position: relative; }
.rp-reviews { position: relative; }
/* El carrusel real es .ti-reviews-container-wrapper (padre directo de las tarjetas) */
.home-reviews .ti-reviews-container-wrapper {
    display: flex !important; gap: 30px; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 10px 6px 26px; margin: 0 !important; list-style: none; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    width: auto !important; transform: none !important; align-items: stretch;
}
.home-reviews .ti-reviews-container-wrapper::-webkit-scrollbar { display: none; }

/* Tarjeta */
.home-reviews .ti-review-item {
    all: unset; box-sizing: border-box; display: block !important; flex: 0 0 380px !important; width: 380px !important; max-width: 380px; scroll-snap-align: start;
    background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 28px 30px 26px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05); font-family: var(--font-body); color: #333; float: none !important;
}
.home-reviews .ti-inner { display: flex; flex-direction: column; gap: 14px; }

/* Cabecera: avatar + nombre/fecha + logo de la fuente */
.home-reviews .ti-review-header { display: flex; align-items: center; gap: 12px; }
.home-reviews .ti-profile-img { order: 0; flex: none; }
.home-reviews .ti-profile-img img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.home-reviews .ti-profile-details { order: 1; flex: 1 1 auto; min-width: 0; }
.home-reviews .ti-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #222; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-reviews .ti-date { font-size: 12px; color: #9a9a9a; margin-top: 2px; }
.home-reviews .ti-platform-icon { order: 2; flex: none; position: relative; }
.home-reviews .ti-platform-icon img { width: 22px; height: 22px; display: block; }
.home-reviews .ti-tooltip, .home-reviews .ti-verified-tooltip, .home-reviews .ti-read-more,
.home-reviews .ti-controls, .home-reviews .ti-controls-line, .home-reviews .ti-widget .ti-prev,
.home-reviews .ti-widget .ti-next, .home-reviews .ti-rating-text, .home-reviews .ti-verified-review,
.home-reviews .scss-content, .home-reviews .ti-header, .home-reviews .ti-footer, .home-reviews style,
.home-reviews .ti-widget-info, .home-reviews .ti-load-more, .home-reviews noscript,
.home-reviews .ti-review-image, .home-reviews .ti-review-images { display: none !important; }

/* Estrellas */
.home-reviews .ti-stars { display: flex; flex-wrap: nowrap; gap: 1px; }
.home-reviews .ti-stars img { width: 16px; height: 16px; }

/* Texto (extracto uniforme) */
.home-reviews .ti-review-text-container { font-size: 13.5px; line-height: 1.55; color: #4a4a4a; font-weight: 300;
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.home-reviews .ti-review-text-container b, .home-reviews .ti-review-text-container strong { font-weight: 600; }

/* Flechas de navegación (las inserta rp.js) */
.rp-reviews-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid #e3e3e3; background: #fff; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: #444; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    font-size: 26px; line-height: 1; padding-bottom: 3px; transition: background .15s, color .15s, border-color .15s, opacity .15s; }
.rp-reviews-nav:hover { background: var(--accent, #4a7c59); border-color: var(--accent, #4a7c59); color: #fff; }
.rp-reviews-nav.prev { left: -14px; }
.rp-reviews-nav.next { right: -14px; }
.rp-reviews-nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
    .home-reviews .ti-review-item { flex-basis: 82vw; max-width: 82vw; }
    .rp-reviews-nav.prev { left: 2px; } .rp-reviews-nav.next { right: 2px; }
}
@media (max-width: 768px) {
    .home-extra-inner { padding: 0 22px; }
    .home-intro { padding: 60px 0 30px; } .home-intro h2 { font-size: 1.4em; }
    .home-reviews { padding: 20px 0 70px; }
}

/* ---- Editor de Inicio: selector de layout ---- */
.layout-choice { display: flex; gap: 14px; flex-wrap: wrap; }
.layout-choice .lc-opt { flex: 1; min-width: 240px; border: 2px solid var(--a-border); border-radius: 10px; padding: 16px; cursor: pointer; font-weight: 400; }
.layout-choice .lc-opt.sel { border-color: var(--a-accent); background: #eef4f8; }
.layout-choice .lc-opt input { margin-right: 8px; }

/* ---- Formulario de contacto ---- */
.contact-form { max-width: 640px; margin: 30px auto 0; text-align: left; }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: .72em; color: #999; margin: 16px 0 6px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 13px 15px; border: 1px solid #ddd; background: #fff; font-family: inherit; font-size: 1.15em; color: #333; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #232D38; outline: none; }
.contact-ok { background: #eef7f0; border: 1px solid #cfe8d6; color: #2c7a4b; padding: 14px 18px; margin-bottom: 20px; font-size: 1.05em; }
.contact-err { color: #b23b3b; font-size: 1em; }
@media (max-width: 620px) { .contact-form .cf-row { grid-template-columns: 1fr; } }
/* Aceptación de condiciones + privacidad (en ambas plantillas de contacto) */
.contact-form .cf-accept { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; text-transform: none; letter-spacing: 0; font-size: .92em; font-weight: 300; color: #555; line-height: 1.5; cursor: pointer; }
.contact-form .cf-accept input { width: auto; margin: 3px 0 0; flex: none; }
.contact-form .cf-accept a { color: var(--accent); text-decoration: underline; }
.contact-form .cf-send { margin-top: 22px; }

/* ---- Slider full de la página On som / Ubicación (mismo tipo que el héroe de los alojamientos) ---- */
.loc-hero { position: relative; margin: -150px -90px 60px; height: 100vh; overflow: hidden; background: #14181c; }
@media (max-width: 1600px) { .loc-hero { margin: -120px -30px 46px; } }
.loc-hero .media-container { position: absolute; inset: 0; overflow: hidden; }
.loc-hero .hero-slider, .loc-hero .hero-slider .item { height: 100%; }
.loc-hero .hero-slider .item .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-hero .loc-hero-empty { position: absolute; inset: 0; background: linear-gradient(135deg, #2f3d33 0%, #1b241f 100%); }
.loc-hero::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.55) 100%); }
.loc-hero .loc-hero-title { position: absolute; z-index: 4; left: 0; right: 0; bottom: 13vh; text-align: center; padding: 0 24px; }
.loc-hero .loc-hero-title h2 { color: #fff; font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.2em, 4.5vw, 4.2em); margin: 0; text-shadow: 0 2px 22px rgba(0,0,0,.55); }
.loc-hero .loc-hero-scroll { position: absolute; z-index: 4; bottom: 30px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 28px; opacity: .9; transition: opacity .2s; animation: locBounce 2s infinite; }
.loc-hero .loc-hero-scroll:hover { opacity: 1; }
@keyframes locBounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ---- Contacto 2: foto a pantalla completa + dos columnas (estructura propia, robusta en 4K) ---- */
.contact2-page .content-holder { padding: 0 !important; min-height: 0; }
.rp-contact2 { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rp-c2-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
video.rp-c2-bg { object-fit: cover; }
.rp-c2-bg.is-empty { background: linear-gradient(135deg, #2f3d33 0%, #1b241f 100%); }
.rp-c2-overlay { position: absolute; inset: 0; background: rgba(18, 22, 27, .55); }
.rp-c2-inner { position: relative; z-index: 2; width: 100%; max-width: 1520px; margin: 0 auto; padding: 150px 6vw 100px; }
.rp-c2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rp-c2-left { color: #fff; }
.rp-c2-left h1 { color: #fff; font-family: var(--font-heading); font-weight: 500; font-size: clamp(2em, 3vw, 3.2em); margin: 0; }
.rp-c2-sep { width: 60px; height: 2px; background: var(--accent); margin: 18px 0 32px; }
.rp-c2-left p { color: rgba(255,255,255,.9); font-weight: 300; font-size: clamp(1em, 1.05vw, 1.2em); line-height: 1.85; }
.rp-c2-list { list-style: none; margin: 30px 0 0; padding: 0; max-width: 460px; }
.rp-c2-list li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,.16); font-weight: 300; font-size: 1.05em; }
.rp-c2-list li:last-child { border-bottom: 0; }
.rp-c2-list li i { color: var(--accent); width: 20px; text-align: center; margin-top: 4px; flex: none; }
.rp-c2-list a { color: #fff; text-decoration: none; }
.rp-c2-list a:hover { color: var(--accent); }
.rp-c2-right { background: rgba(255,255,255,.97); padding: 40px 42px 44px; max-width: 620px; width: 100%; justify-self: end; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.rp-c2-right .contact-form { margin: 0; max-width: none; }
.rp-c2-right #contacto { margin: 0; }
@media (max-width: 1100px) {
    .rp-c2-grid { grid-template-columns: 1fr; gap: 40px; max-width: 640px; margin: 0 auto; }
    .rp-c2-right { justify-self: stretch; max-width: none; }
    .rp-c2-inner { padding: 130px 24px 80px; }
}

/* ==== Blog + fichas de artículo: MARKUP/CSS/JS de Outdoor tal cual (portfolio.html, portfolio2.html,
   blog-single.html, portfolio-single.html). Aquí SOLO overrides de color y tipografía (Poppins). ==== */
.article-single-page.interior .content-holder { padding: 0; }   /* fichas a sangre (el héroe pasa bajo la cabecera) */
/* El top se calcula a partir del tamaño REAL del logo (configurable) para que la rejilla nunca quede
   por debajo de la cabecera; laterales 90px como el masonry original de la plantilla (no a sangre).
   Responsive: en >1600px el logo usa su tamaño de escritorio; en ≤1600px su tamaño móvil. */
.blog-page.interior .content-holder { --hdr-clear: calc(var(--logo-top, 35px) + var(--logo-size, 200px) + 55px); }
@media (max-width: 1600px) {
    .blog-page.interior .content-holder { --hdr-clear: calc(var(--logo-top-mobile, 14px) + var(--logo-size-mobile, 74px) + 45px); }
}
.blog-masonry-page.interior .content-holder { padding: var(--hdr-clear) 90px 60px; }
.blog-horizontal-page.interior .content-holder { padding: var(--hdr-clear) 40px 40px; }
/* === MASONRY (portfolio2): TODAS las celdas EXACTAMENTE IGUALES, como el ejemplo de Outdoor ===
   Cada foto es una caja cuadrada idéntica con object-fit:cover (no una masonry irregular por aspecto).
   Como cada .gallery-item mide 25% (mismo ancho) y la img es 1:1, las celdas quedan todas del mismo tamaño.
   El texto del hover va CENTRADO como en el ejemplo (Outdoor lo hereda de body{text-align:center}; nuestro
   interior lo fuerza a la izquierda). */
.blog-masonry-page .gallery-items .box-item { display: block; width: 100%; }
.blog-masonry-page .gallery-items .box-item a { display: block; width: 100%; }
.blog-masonry-page .gallery-items .box-item a img {
    width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important;
    object-fit: cover !important; object-position: center !important;
    max-width: none !important; max-height: none !important; display: block !important;
}
.blog-masonry-page .gallery-item .grid-item,
.blog-masonry-page .gallery-item .grid-item h3,
.blog-masonry-page .gallery-item .grid-item span { text-align: center !important; }
/* Horizontal: el JS de la plantilla (initgalheight) fija la altura del wrap = ventana − header − footer,
   SIN contar nuestro offset del logo, y desborda. Forzamos la altura disponible real (!important gana al
   estilo inline del JS); así initgalheight/a() calculan img = alto − subtítulo y el subtítulo cabe holgado. */
.blog-horizontal-page .content.full-height,
.blog-horizontal-page .resize-carousel-holder,
.blog-horizontal-page .p_horizontal_wrap { height: calc(100vh - var(--hdr-clear) - 155px) !important; min-height: 300px; }
/* === TODAS LAS FOTOS, EL MISMO TAMAÑO EXACTO, pase lo que pase ===
   Alto Y ancho por cálculo DIRECTO del viewport (no % del padre, no depende del JS de la plantilla, ni de
   packery, ni de si la foto es vertical/horizontal, ni del momento de carga). object-fit:cover rellena la
   caja recortando lo justo. Con !important gana a cualquier estilo inline. Resultado: tres cajas idénticas. */
.blog-horizontal-page #portfolio_horizontal_container .portfolio_item { height: 100% !important; width: auto !important; }
.blog-horizontal-page #portfolio_horizontal_container .portfolio_item img {
    height: calc(100vh - var(--hdr-clear) - 275px) !important;
    width:  calc((100vh - var(--hdr-clear) - 275px) * 1.5) !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important;
    flex: 0 0 auto !important;
}
/* El texto blanco del overlay va CENTRADO como en la plantilla (Outdoor lo hereda de body{text-align:center};
   nuestro interior fuerza text-align:left, así que lo restauramos aquí). El subtítulo negro sigue a la izq. */
.blog-horizontal-page .port-desc .grid-item,
.blog-horizontal-page .port-desc .grid-item h3,
.blog-horizontal-page .port-desc .grid-item span { text-align: center; }
/* La categoría del subtítulo (span) en Outdoor lleva left:-10px porque su contenido son enlaces <a> con
   padding-left:10px; la nuestra es texto plano, así que ese -10px + overflow:hidden del item CORTA la 1ª letra.
   La devolvemos a su sitio (y quitamos el desplazamiento del posible <a> interno). */
.blog-horizontal-page .port-subtitle span { left: 0; }
.blog-horizontal-page .port-subtitle span a { padding-left: 0; }
.blog-page .filter-holder { padding: 0; }
.article-single.content.full-height { position: relative; }
/* La flecha de bajar del héroe (.sect-scroll) centra su icono heredando body{text-align:center} de Outdoor;
   nuestro interior lo fuerza a left y descuadra el icono respecto a la línea vertical (su :before, en left:50%).
   Lo devolvemos a center para que la doble flecha quede justo bajo la línea. */
body.interior .sect-scroll { text-align: center; }
/* Tipografía de marca en los títulos del listado y color de acento en las categorías */
.gallery-items .grid-item h3 a, .portfolio_item .port-desc h3 a, .portfolio_item .port-subtitle h3 a { font-family: var(--font-heading); }
.gallery-items .grid-item span, .portfolio_item .port-subtitle span { color: var(--accent); }

/* ---- Filtros del blog: posición configurable en /Admin/Blog; NUNCA se solapan con el logo/cabecera ---- */
/* Sin botón (por defecto): barra horizontal de filtros, colocada arriba y por debajo de la cabecera. */
.blog-page .filter-holder.column-filter { position: static; top: auto; left: auto; bottom: auto; width: auto; height: auto; z-index: 30; margin: 0 0 34px; padding: 0 40px; }
.blog-page .gallery-filters { position: static; float: none; width: auto; padding: 0; background: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.blog-page .gallery-filters a.gallery-filter { display: inline-block; float: none; width: auto; padding: 6px 2px; margin: 0; background: none; color: #999; text-transform: uppercase; letter-spacing: 2px; font-size: .74em; font-weight: 700; border-bottom: 2px solid transparent; }
.blog-page .gallery-filters a.gallery-filter:hover { color: var(--heading, #232D38); }
.blog-page .gallery-filters a.gallery-filter-active, .blog-page .gallery-filters a.gallery-filter_active { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.blog-filter-top-center .filter-holder { text-align: center; }  .blog-filter-top-center .gallery-filters { justify-content: center; }
.blog-filter-top-left   .filter-holder { text-align: left; }    .blog-filter-top-left   .gallery-filters { justify-content: flex-start; }
.blog-filter-top-right  .filter-holder { text-align: right; }   .blog-filter-top-right  .gallery-filters { justify-content: flex-end; }
/* Con botón: se conserva el desplegable negro de la plantilla, pero centrado/alineado y despegado del logo. */
.blog-page .filter-holder .filter-button { position: relative; float: none; display: inline-block; width: auto; height: auto; line-height: normal; padding: 14px 26px; }
.blog-page .filter-holder .gallery-filters.hid-filter { display: none; position: static; background: var(--fill, #232D38); padding: 20px; margin-top: 4px; }
.blog-page .filter-holder .gallery-filters.hid-filter a.gallery-filter { color: #fff; display: block; width: 100%; }
/* Título vertical lateral (si se activa): que no pise el logo */
.blog-page .fixed-title { top: 50vh; }
.gallery-filters a.gallery-filter-active, .gallery-filters a.gallery-filter_active { color: var(--accent); }
/* Ficha blog-single */
.article-blog-single .parallax-section h2 { font-family: var(--font-heading); }
/* Banner del artículo: SIN la pantalla oscura (.overlay = #000 opacity:.2) NI el degradado negro
   (.parallax-section:before = linear-gradient a rgba(0,0,0,.75)) de la plantilla. */
.article-blog-single .art-parallax .overlay { display: none; }
.article-blog-single .art-parallax:before { display: none; content: none; background: none; }
/* Banner del artículo: color/tamaño/grosor/sombra de título, subtítulo, fecha y categoría — POR ARTÍCULO
   (variables --art-* generadas desde la ficha). !important porque la plantilla fija colores de .tag/h2/.subtitle. */
.article-blog-single .art-parallax .container h2 { color: var(--art-title-color, #fff) !important; font-family: var(--art-title-font, var(--font-heading)) !important; font-weight: var(--art-title-weight, 700) !important; font-size: var(--art-title-size, 80px) !important; text-shadow: var(--art-title-shadow, none) !important; }
.article-blog-single .art-parallax .container .subtitle { color: var(--art-sub-color, #fff) !important; opacity: 1 !important; font-family: var(--art-sub-font, var(--font-body)) !important; font-weight: var(--art-sub-weight, 300) !important; font-size: var(--art-sub-size, 20px) !important; text-shadow: var(--art-sub-shadow, none) !important; }
.article-blog-single .art-parallax .blog-title,
.article-blog-single .art-parallax .blog-title li,
.article-blog-single .art-parallax .blog-title li:first-child .tag { color: var(--art-date-color, #fff) !important; font-family: var(--art-date-font, inherit) !important; text-shadow: var(--art-date-shadow, none) !important; }
.article-blog-single .art-parallax .blog-title li:last-child .tag { color: var(--art-cat-color, #fff) !important; font-family: var(--art-cat-font, inherit) !important; text-shadow: var(--art-cat-shadow, none) !important; }
@media (max-width: 768px) {
    .article-blog-single .art-parallax .container h2 { font-size: var(--art-title-size-mobile, min(var(--art-title-size, 80px), 13vw)) !important; }
    .article-blog-single .art-parallax .container .subtitle { font-size: var(--art-sub-size-mobile, var(--art-sub-size, 20px)) !important; }
}
/* Fuentes/orígenes al final del contenido — tipografía/tamaño/grosor/color de atribución y URL (por artículo). */
.article-single .art-sources { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .10); }
.article-single .art-sources .art-sources-title { margin: 0 0 14px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: #232d38; letter-spacing: .3px; }
.article-single .art-sources .art-src { margin: 0 0 10px; line-height: 1.4; }
.article-single .art-sources .src-attr { display: block; font-family: var(--art-src-attr-font, var(--font-body)); font-size: var(--art-src-attr-size, 14px); font-weight: var(--art-src-attr-weight, 700); color: var(--art-src-attr-color, #232d38); }
.article-single .art-sources .src-url { display: block; font-family: var(--art-src-url-font, var(--font-body)); font-size: var(--art-src-url-size, 13px); font-weight: var(--art-src-url-weight, 300); color: var(--art-src-url-color, #6d6f6e); word-break: break-word; text-decoration: none; }
.article-single .art-sources .src-url:hover { text-decoration: underline; }
/* Crédito del audio (atribución + URL) — mismo estilo que las fuentes; en artículos hereda sus variables --art-src-* */
.audio-credit { margin-top: 8px; }
.audio-credit .src-attr { display: block; font-family: var(--art-src-attr-font, var(--font-body)); font-size: var(--art-src-attr-size, 14px); font-weight: var(--art-src-attr-weight, 700); color: var(--art-src-attr-color, #232d38); }
.audio-credit .src-url { display: block; font-family: var(--art-src-url-font, var(--font-body)); font-size: var(--art-src-url-size, 13px); font-weight: var(--art-src-url-weight, 300); color: var(--art-src-url-color, #6d6f6e); word-break: break-word; text-decoration: none; }
.audio-credit .src-url:hover { text-decoration: underline; }
/* Bajo el reproductor flotante del footer: compacto y centrado */
.home-audio .audio-credit { margin-top: 5px; max-width: 280px; text-align: center; }
.home-audio .audio-credit .src-attr { font-size: 12px; }
.home-audio .audio-credit .src-url { font-size: 11px; }

/* ── Atribuciones de imágenes: tooltip (hover) + pie del lightbox — estilo global (Ajustes → Tema) ── */
#rp-imgtip {
    position: fixed; z-index: 99999; pointer-events: none; max-width: 340px;
    background: var(--imgtip-bg, rgba(17, 17, 17, .88)); padding: 8px 11px; border-radius: 7px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
#rp-imgtip .rp-tip-title {
    display: block; line-height: 1.3; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--imgtip-title-font, var(--font-body)); font-size: var(--imgtip-title-size, 12px);
    font-weight: var(--imgtip-title-weight, 700); color: var(--imgtip-title-color, #fff); text-shadow: var(--imgtip-title-shadow, none);
}
#rp-imgtip .rp-tip-attr {
    display: block; line-height: 1.3;
    font-family: var(--imgtip-attr-font, var(--font-body)); font-size: var(--imgtip-attr-size, 12px);
    font-weight: var(--imgtip-attr-weight, 300); color: var(--imgtip-attr-color, #e8e8e8); text-shadow: var(--imgtip-attr-shadow, none);
}
/* Pie del lightbox: spans propios dentro del figcaption de Intense y del .lg-sub-html de lightGallery */
.rp-lb-ttl {
    display: block; line-height: 1.25; margin-bottom: 6px;
    font-family: var(--imglb-title-font, var(--font-heading)); font-size: var(--imglb-title-size, 22px);
    font-weight: var(--imglb-title-weight, 700); color: var(--imglb-title-color, #fff); text-shadow: var(--imglb-title-shadow, none);
}
.rp-lb-detail {
    display: block; line-height: 1.5;
    font-family: var(--imglb-detail-font, var(--font-body)); font-size: var(--imglb-detail-size, 14px);
    font-weight: var(--imglb-detail-weight, 300); color: var(--imglb-detail-color, #eaeaea); text-shadow: var(--imglb-detail-shadow, none);
}
.rp-lb-detail .rp-lb-cap, .rp-lb-detail .rp-lb-attr, .rp-lb-detail .rp-lb-src, .rp-lb-detail .rp-lb-lic {
    display: block; color: inherit; font: inherit; text-shadow: inherit; word-break: break-word;
}
.rp-lb-detail a { color: inherit; text-decoration: underline; }
.article-blog-single .blog-text { font-family: var(--font-body); }
.art-hero-empty { background: linear-gradient(135deg, #2f3d33 0%, #1b241f 100%); }
/* Ficha blog-single → bloque de medios: slider (estilo apartamentos) O galería, elegible en el CMS.
   El slider reusa el MISMO aspecto que el de los alojamientos (.house-portfolio): foto en COVER a proporción
   fija (los controles caen sobre la foto), flechas de cristal (blur), dots centrados abajo, expand centrado. */
.article-blog-single .blog-media { float: left; width: 100%; margin-bottom: 44px; }
.article-blog-single .blog-text { clear: both; }
.article-blog-single .custom-slider-holder { position: relative; float: left; width: 100%; }
.article-blog-single .custom-slider .item { position: relative; height: 560px; overflow: hidden; }
@media (max-width: 768px) { .article-blog-single .custom-slider .item { height: 300px; } }
.article-blog-single .custom-slider .item .respimg { width: 100%; height: 100%; object-fit: cover; }
.article-blog-single .custom-slider .item video.respimg { display: block; background: #000; }
.article-blog-single .custom-slider .zoomimage { background: transparent; }
.article-blog-single .custom-slider .zoomimage img.intense { opacity: 0; }
.article-blog-single .custom-slider .zoomimage i { text-align: center; transform-origin: center center; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.article-blog-single .custom-slider-holder a.prev-slide,
.article-blog-single .custom-slider-holder a.next-slide { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); color: #fff; text-align: center; }
.article-blog-single .custom-slider-holder a.prev-slide i,
.article-blog-single .custom-slider-holder a.next-slide i { display: inline-block; width: 100%; }
.article-blog-single .custom-slider-holder .customNavigation a:hover { background: rgba(0, 0, 0, .45); color: #fff; }
.article-blog-single .custom-slider-holder .owl-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center; line-height: 1; }
.article-blog-single .custom-slider-holder .owl-dot { display: inline-block; }
/* Modo galería: rejilla de fotos a proporción fija con lightbox, como en los alojamientos. */
.article-blog-single .art-gallery .box-item a { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.article-blog-single .art-gallery .box-item img.respimg { width: 100%; height: 100%; object-fit: cover; }
.article-blog-single .art-gallery .box-item.is-media { aspect-ratio: 3 / 2; overflow: hidden; background: #000; }
.article-blog-single .art-gallery .box-item.is-media video.respimg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---- Ficha blog-single: DOS COLUMNAS (revista) — media a un lado, texto al otro, sin ocupar todo ----
   La plantilla dejaba col-md-8 (media+texto apilados) y col-md-4 vacía. Aquí el <article> es una FILA de
   dos columnas: media (56%) a la izquierda, texto a la derecha. Se llena el ancho SIN que el media lo ocupe todo. */
.article-blog-single .column-container { max-width: 1320px; }
.article-blog-single .art-blog-col { float: none; width: 100%; max-width: 100%; margin: 0 auto; padding-left: 0; padding-right: 0; }
.article-blog-single article { display: flex; flex-wrap: wrap; gap: 50px; align-items: flex-start; max-width: 100%; }
/* Media (galería/slider) a la DERECHA, texto a la izquierda (solo invierte el orden; todo lo demás igual). */
.article-blog-single .blog-media { flex: 0 0 56%; width: 56%; max-width: 56%; margin: 0; order: 2; }
.article-blog-single .blog-text { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; float: none; order: 1; }
/* DIVIDIR EL TEXTO EN DOS COLUMNAS: la 1ª es la que ya existe (izquierda) y la 2ª empieza DEBAJO de
   .blog-media. CSS puro no puede colocar la galería/slider al inicio de la 2ª columna (el float se confina
   a su columna), así que rp.js mete .blog-media al inicio de esa 2ª columna. Solo divide el texto. */
.article-blog-single article.rp-mag { display: block; }
.article-blog-single article.rp-mag .blog-media { flex: none; width: auto; max-width: none; margin: 0 0 18px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.article-blog-single article.rp-mag .blog-text { column-count: 2; column-gap: 46px; column-fill: balance; }
.article-blog-single article.rp-mag .blog-text > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
.article-blog-single article.rp-mag .custom-slider .item { height: 340px; }
/* El panel de fondo fijo (.sections-bg) NO debe interceptar clics: en la maqueta a 2 columnas quedaba por
   encima del disparador del lightbox del slider. Es decorativo, así que se hace transparente al ratón. */
.article-blog-single .sections-bg { pointer-events: none; }
.article-blog-single .blog-text > p:first-of-type { font-size: 1.18em; line-height: 1.72; color: var(--heading, #232d38); }
.article-blog-single .art-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; float: none; }
.article-blog-single .art-gallery .box-item { width: 100%; padding: 0; float: none; }
/* Responsive: MARGEN LATERAL COHERENTE. Antes el texto/las fotos iban a sangre (sin aire para leer). Se
   fuerza padding lateral en el contenedor de la ficha (media + texto) y en el texto del portfolio-single. */
/* Escritorio (>1064): el texto es "sticky" para que acompañe a la galería alta y no deje un vacío muerto. */
@media (min-width: 1065px) {
    .article-blog-single .blog-text { position: sticky; top: 96px; align-self: flex-start; }
}
/* Portfolio-single: la sección no debe forzar 100vh en responsive (dejaba hueco antes del texto). */
@media (max-width: 1600px) {
    .article-portfolio-single.content.full-height { height: auto !important; min-height: 0; }
}
/* SOLO en el rango de la galería OWL horizontal (1037–1600, con el panel de info ya apilado): la owl mostraba
   las fotos a su altura natural dentro de una caja alta (window−header−footer) → gran hueco vacío debajo. Se
   fija una altura de banda y las fotos la llenan (cover); el texto va justo debajo. (En ≤1036 la galería es
   vertical y NO se toca la altura, o se recortaría a una sola foto.) */
@media (min-width: 1037px) and (max-width: 1600px) {
    .article-portfolio-single .resize-carousel-holder,
    .article-portfolio-single #gallery_horizontal,
    .article-portfolio-single #gallery_horizontal .owl-stage-outer,
    .article-portfolio-single #gallery_horizontal .owl-stage,
    .article-portfolio-single #gallery_horizontal .owl-item { height: 440px !important; }
    .article-portfolio-single #gallery_horizontal .horizontal_item,
    .article-portfolio-single #gallery_horizontal .horizontal_item .zoomimage { height: 440px !important; }
    .article-portfolio-single #gallery_horizontal .horizontal_item img,
    .article-portfolio-single #gallery_horizontal .horizontal_item .zoomimage img { height: 440px !important; width: 100% !important; object-fit: cover !important; }
}
/* ≤1036 (la galería ya no es owl): se ANULA el posicionamiento absoluto de isotope/packery y las fotos se
   apilan a su altura natural → la caja se ajusta a las fotos (adiós caja alta con hueco vacío debajo). */
@media (max-width: 1036px) {
    .article-portfolio-single.content.full-height,
    .article-portfolio-single .resize-carousel-holder,
    .article-portfolio-single .vis-info { padding-bottom: 0 !important; margin-bottom: 0 !important; }
    .article-portfolio-single #gallery_horizontal { height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr; gap: 6px; }
    .article-portfolio-single #gallery_horizontal > * { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; float: none !important; margin: 0 !important; }
    .article-portfolio-single #gallery_horizontal .horizontal_item .zoomimage { position: relative !important; height: auto !important; display: block; }
    .article-portfolio-single #gallery_horizontal .horizontal_item img { position: relative !important; width: 100% !important; height: auto !important; display: block; }
}
/* Tablet/móvil (≤1064): se APILA (media arriba a todo el ancho, texto debajo) para NO dejar una columna
   vacía enorme al lado del texto corto. Con márgenes laterales coherentes. */
@media (max-width: 1064px) {
    .article-blog-single #artsec .container.column-container { width: 100%; max-width: none; padding: 0; }
    .article-blog-single #artsec .row { margin-left: 0; margin-right: 0; }
    .article-blog-single .art-blog-col { padding-left: 34px; padding-right: 34px; }
    .article-blog-single article { display: block; }
    .article-blog-single .blog-media { width: 100%; max-width: 100%; margin: 0 0 30px; }
    .article-blog-single .blog-text { width: 100%; }
    /* Portfolio-single en responsive: sin 100vh forzado (dejaba un hueco enorme entre la galería y el texto)
       y menos padding en el texto. */
    .article-portfolio-single.content.full-height { height: auto; min-height: 0; }
    .article-portfolio-text { padding: 12px 34px 44px; }
}
@media (max-width: 560px) {
    .article-blog-single .art-blog-col { padding-left: 20px; padding-right: 20px; }
    .article-portfolio-text { padding-left: 20px; padding-right: 20px; }
}
/* Contador del listado: SE REPONE, bien alineado (los dos números pegados a su separador, con acento). */
.blog-page .count-folio { right: 15px; width: 96px; color: var(--text, #232d38); font-weight: 700; }
.blog-page .count-folio .num-album { text-align: right; padding-right: 7px; color: var(--accent); }
.blog-page .count-folio .all-album { text-align: left; padding-left: 7px; }
.blog-page .count-folio:before { background: #ccc; }
/* La ficha NO debe forzar 100vh en la zona de contenido: con texto corto dejaba un hueco blanco gigante
   antes del footer (aire noventero vertical). La altura del contenido se ajusta a lo que hay. El héroe
   (parallax) mantiene su altura de pantalla; solo se recorta el vacío del final. */
.article-blog-single.content.full-height { height: auto; min-height: 0; }
.article-blog-single #artsec { padding: 60px 0 96px; height: auto; min-height: 0; }
/* Ficha portfolio-single */
.article-portfolio-single .fixed-info-container h3, .article-portfolio-single .fixed-info-container h4 { font-family: var(--font-heading); }
.article-portfolio-single .project-details h5 a { color: var(--accent); }
/* Más aire entre la galería horizontal y el texto (estaba muy pegado). El texto DEBE caer bajo la galería
   (la plantilla flota .content, así que sin clear el texto se sube y se solapa con el panel de info). El
   hueco se da con PADDING (el margin-top lo absorbe la clearance del float); padding-bottom para librar el
   footer fijo (90px). Así el texto baja con aire y la página hace scroll para verlo entero.
   OJO: solo en ESCRITORIO. En responsive (≤1064) la galería se apila sobre el texto y esos 64/130px
   dejaban un hueco enorme; allí manda la regla del media query (padding: 12px 34px 44px). */
.article-portfolio-text { clear: both; }
@media (min-width: 1065px) {
    .article-portfolio-text { padding-top: 64px; padding-bottom: 130px; }
}

/* ---- Listado de artículos ---- */

/* ---- Listado de artículos ---- */
.art-grid { max-width: 1200px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; text-align: left; }
.art-card { background: #fff; border: 1px solid #eee; }
.art-card .thumb { aspect-ratio: 3/2; background: #eee; overflow: hidden; }
.art-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-card .body { padding: 20px; }
.art-card h3 { color: var(--heading, #232D38); font-weight: 500; margin: 0 0 8px; }
.art-card .date { color: #999; font-size: .85em; text-transform: uppercase; letter-spacing: 1px; }

/* ---- Aviso de cookies ---- */
.cookie-banner { position: fixed; left: 90px; right: 90px; bottom: 100px; z-index: 9500; background: rgba(var(--fill-rgb, 20,28,38), .97); color: var(--fill-text, #fff); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cookie-banner.hidden { display: none; }
.cookie-banner p { margin: 0; font-size: 1.05em; max-width: 70ch; text-align: left; }
.cookie-banner .cookie-more { color: var(--fill-text, #fff); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; margin-left: 6px; }
.cookie-banner .cookie-more:hover { opacity: .8; }

/* ---- Tabla de cookies (página de cookies) — estilo Riba Pitxot ---- */
.cookies-live-title { margin-top: 1.6em; }
.rp-cookies-live { margin-top: 10px; }
.rp-cookies-live .ck-heading { font-family: var(--font-heading); color: var(--heading, #232D38); font-weight: 500; font-size: 1.12em; margin: 34px 0 12px; }
.rp-cookies-live .ck-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e6e3df; }
.rp-cookies-live .ck-table { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 300; min-width: 720px; background: #fff; }
.rp-cookies-live .ck-table th { background: var(--accent, #2f6b4f); color: #fff; font-weight: 700; text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.rp-cookies-live .ck-table td { padding: 11px 12px; border-top: 1px solid #ececec; color: #4a4a4a; vertical-align: top; line-height: 1.55; }
.rp-cookies-live .ck-table tr:nth-child(even) td { background: #faf9f7; }
.rp-cookies-live .ck-table code { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: 12px; color: var(--heading, #232D38); word-break: break-word; }
.rp-cookies-live .ck-domain { color: #999; font-size: 11px; }
.rp-cookies-live .ck-val { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rp-cookies-live .ck-val--empty, .rp-cookies-live .ck-val--na { font-style: italic; color: #999; font-family: inherit; }
.rp-cookies-live .ck-empty { text-align: center; font-style: italic; color: #999; padding: 18px; }
.rp-cookies-live .ck-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.rp-cookies-live .ck-status--active { background: color-mix(in srgb, var(--accent, #2f6b4f) 16%, #fff); color: color-mix(in srgb, var(--accent, #2f6b4f) 78%, #000); }
.rp-cookies-live .ck-status--inactive { background: #eee; color: #888; }
.rp-cookies-live .ck-footnote { margin-top: 16px; font-size: 12px; font-weight: 300; color: #888; line-height: 1.7; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions button { padding: 10px 22px; text-transform: uppercase; letter-spacing: 1px; font-size: .72em; font-weight: 700; cursor: pointer; background: transparent; color: var(--fill-text, #fff); border: 1px solid color-mix(in srgb, var(--fill-text, #fff) 55%, transparent); }
.cookie-actions button.acc { background: var(--fill-text, #fff); color: var(--fill, #232D38); border-color: var(--fill-text, #fff); }
/* Icono persistente para reabrir/cambiar la decisión de cookies */
.cookie-reopen { position: fixed; left: 20px; bottom: 20px; z-index: 9400; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: var(--fill, #232D38); color: var(--fill-text, #fff); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: background .2s, transform .2s; }
.cookie-reopen:hover { background: color-mix(in srgb, var(--fill, #232D38) 82%, #000); transform: translateY(-2px); }
.cookie-reopen .fa { font-size: 18px; }
.cookie-reopen .cookie-ico { width: 22px; height: 22px; display: block; }
@media (max-width: 1064px) { .cookie-banner { left: 20px; right: 20px; bottom: 84px; } .cookie-reopen { left: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* ---- Páginas de estado/error (404, 4xx, 5xx): «foto a pantalla» como Contact 2, sin formulario ---- */
body.status-page #wrapper { padding: 0; }
body.status-page::before, body.status-page::after, body.status-page .left-decor, body.status-page .right-decor { display: none; }
.rp-status { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.rp-status-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
video.rp-status-bg { object-fit: cover; }
.rp-status-bg.is-empty { background: linear-gradient(135deg, #2f3d33 0%, #1b241f 100%); }
.rp-status-overlay { position: absolute; inset: 0; background: rgba(18, 22, 27, .6); }
.rp-status-inner { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0 auto; padding: 150px 24px 100px; color: #fff; }
.rp-status-code { display: inline-block; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 3px; opacity: .8; margin-bottom: 14px; }
.rp-status-h { color: #fff; font-family: var(--font-heading); font-size: clamp(28px, 5vw, 52px); font-weight: 700; margin: 0 0 12px; line-height: 1.12; }
.rp-status-sub { color: rgba(255, 255, 255, .85); font-size: 16px; margin: 0 0 30px; }
.rp-status-opts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.rp-status-btn { display: inline-block; padding: 12px 22px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 4px; color: #fff; text-decoration: none; font-family: var(--font-heading); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; transition: background .2s, border-color .2s; }
.rp-status-btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
@media (max-width: 700px) { .rp-status-inner { padding: 120px 20px 70px; } .rp-status-btn { padding: 11px 16px; } }

/* ================= Agenda de eventos (calendario tipo Google) ================= */
body.events-page .content-holder { max-width: none; padding-left: 30px; padding-right: 30px; }
.rp-events { width: 100%; font-family: var(--font-body); }
.rp-ev-wrap { display: flex; gap: 22px; align-items: flex-start; }
.rp-ev-left { flex: 0 0 230px; }
.rp-ev-cal { flex: 1 1 auto; min-width: 0; }
.rp-ev-right { flex: 0 0 400px; }
@media (max-width: 1320px) { .rp-ev-right { flex-basis: 340px; } .rp-ev-left { flex-basis: 210px; } }
@media (max-width: 1080px) {
    .rp-ev-wrap { flex-wrap: wrap; }
    .rp-ev-left { flex: 1 1 100%; order: 1; display: flex; gap: 16px; align-items: flex-start; }
    .rp-ev-left .rp-ev-search, .rp-ev-left .rp-ev-cats { margin-bottom: 0; }
    .rp-ev-left .rp-ev-search { flex: 1 1 auto; }
    .rp-ev-left .rp-ev-cats { flex: 0 0 auto; }
    .rp-ev-cal { flex: 1 1 100%; order: 2; }
    .rp-ev-right { flex: 1 1 100%; order: 3; }
    .rp-ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
    .rp-ev-cards-h { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .rp-ev-left { flex-direction: column; } .rp-ev-left .rp-ev-cats { width: 100%; } }

/* Cabecera */
.rp-ev-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-ev-nav { display: flex; align-items: center; gap: 8px; }
.rp-ev-nav .rp-ev-today { padding: 8px 16px; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; }
.rp-ev-nav .rp-ev-prev, .rp-ev-nav .rp-ev-next { width: 34px; height: 34px; border: 1px solid #d9d9d9; border-radius: 50%; background: #fff; cursor: pointer; font-size: 20px; line-height: 1; color: #555; }
.rp-ev-nav .rp-ev-today:hover, .rp-ev-nav .rp-ev-prev:hover, .rp-ev-nav .rp-ev-next:hover { border-color: var(--accent); color: var(--accent); }
.rp-ev-title { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-left: 6px; text-transform: capitalize; }
.rp-ev-views { display: inline-flex; border: 1px solid #d9d9d9; border-radius: 8px; overflow: hidden; }
.rp-ev-views button { padding: 8px 15px; border: 0; border-left: 1px solid #ececec; background: #fff; cursor: pointer; font-size: 13px; color: #444; }
.rp-ev-views button:first-child { border-left: 0; }
.rp-ev-views button.on { background: var(--accent); color: #fff; }

/* Rejilla mensual */
.rp-ev-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #ececec; gap: 1px; }
.rp-ev-dow { background: #fafafa; text-align: center; padding: 8px 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #999; }
.rp-ev-cell { background: #fff; min-height: 108px; padding: 6px; cursor: pointer; position: relative; transition: background .12s; }
.rp-ev-cell:hover { background: #f5faf6; }
.rp-ev-cell.muted { background: #fbfbfb; }
.rp-ev-cell.muted .rp-ev-num { color: #c4c4c4; }
.rp-ev-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; font-size: 13px; color: #333; }
.rp-ev-cell.today .rp-ev-num { background: var(--accent); color: #fff; font-weight: 700; }
.rp-ev-cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
/* Celda del mes: alto FIJO. El número queda arriba y los eventos van en un contenedor que hace scroll
   vertical si no caben (no se ensancha ni se estira la celda). */
.rp-ev-grid > .rp-ev-cell { height: 118px; display: flex; flex-direction: column; overflow: hidden; }
.rp-ev-grid > .rp-ev-cell > .rp-ev-num { align-self: flex-start; flex: none; }
.rp-ev-chips { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-top: 2px; display: flex; flex-direction: column; gap: 2px; }
.rp-ev-chips::-webkit-scrollbar { width: 6px; }
.rp-ev-chips::-webkit-scrollbar-thumb { background: #d3d3d3; border-radius: 3px; }
/* Chip de evento: el texto ENVUELVE a las líneas que hagan falta (no se recorta ni fuerza el ancho de la celda). */
.rp-ev-chip { display: block; padding: 2px 6px 2px 8px; border-radius: 4px; background: rgba(0,0,0,.035); font-size: 11.5px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; position: relative; }
.rp-ev-chip i { position: absolute; left: 2px; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: var(--c); }
.rp-ev-chip.more { background: none; color: #888; padding-left: 6px; }
.rp-ev-chip.more i { display: none; }

/* Vista anual */
.rp-ev-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 26px; }
.rp-ev-ymtitle { font-family: var(--font-heading); font-weight: 700; margin-bottom: 8px; cursor: pointer; text-transform: capitalize; }
.rp-ev-ymtitle:hover { color: var(--accent); }
.rp-ev-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.rp-ev-mini-grid .rp-ev-dow { padding: 3px 0; font-size: 9px; background: none; }
.rp-ev-cell.mini { min-height: 0; padding: 2px 0; text-align: center; }
.rp-ev-cell.mini:hover { background: #f5faf6; }
.rp-ev-cell.mini .rp-ev-num { min-width: 24px; height: 22px; font-size: 11px; }
.rp-ev-cell.mini .rp-ev-dots { display: flex; gap: 2px; justify-content: center; margin-top: -2px; }
.rp-ev-cell.mini .rp-ev-dots i { width: 5px; height: 5px; border-radius: 50%; }
.rp-ev-cell.mini.has .rp-ev-num { font-weight: 700; }

/* Vista semanal */
.rp-ev-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #ececec; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; }
.rp-ev-wcol { background: #fff; min-height: 260px; }
.rp-ev-whead { padding: 8px; text-align: center; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #888; cursor: pointer; }
.rp-ev-whead b { font-size: 16px; color: #333; }
.rp-ev-wcol.today .rp-ev-whead b { color: var(--accent); }
.rp-ev-wcol.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.rp-ev-witem { margin: 5px; padding: 5px 8px; border-left: 3px solid var(--c); background: rgba(0,0,0,.03); border-radius: 4px; font-size: 12px; cursor: pointer; }
.rp-ev-witem:hover { background: rgba(0,0,0,.06); }

/* Vista diaria */
.rp-ev-dayview { display: flex; flex-direction: column; gap: 8px; }
.rp-ev-dayitem { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #eee; border-left: 4px solid var(--c); border-radius: 8px; cursor: pointer; }
.rp-ev-dayitem:hover { background: #fafafa; }
.rp-ev-dtime { font-weight: 700; min-width: 88px; }
.rp-ev-dcat { color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.rp-ev-dname { font-family: var(--font-heading); }
.rp-ev-empty, .rp-ev-hint { color: #999; padding: 16px 0; }

/* Sidebar */
.rp-ev-search { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.rp-ev-cats { border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
.rp-ev-cats-h { font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 8px; }
.rp-ev-catrow { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; }
.rp-ev-catrow input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--c); cursor: pointer; }
.rp-ev-cat-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.rp-ev-cat-lb { font-size: 14px; }

/* Fichas del día */
.rp-ev-cards-h { font-family: var(--font-heading); font-weight: 700; font-size: 17px; margin: 4px 0 12px; text-transform: capitalize; }
.rp-ev-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: #fff; }
.rp-ev-cmedia { position: relative; aspect-ratio: 16 / 10; background: #f0f0f0; }
.rp-ev-cmedia a:first-child { display: block; width: 100%; height: 100%; }
.rp-ev-cmedia img, .rp-ev-cmedia video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.rp-ev-cmedia a:not(:first-child) { display: none; }
.rp-ev-cbody { padding: 13px 15px 15px; }
.rp-ev-ccat { display: inline-block; color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; margin-right: 6px; }
.rp-ev-cwhen { font-size: 13px; color: var(--accent); font-weight: 700; }
.rp-ev-ctitle { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 8px 0 4px; }
.rp-ev-ctitle a { color: inherit; }
.rp-ev-ctitle a:hover { color: var(--accent); }
.rp-ev-cmore { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 700; font-size: 13px; }
.rp-ev-cmore i { margin-left: 3px; }
.rp-ev-csub { color: #777; font-size: 13px; margin: 0 0 6px; }
.rp-ev-caddr { font-size: 12.5px; color: #888; margin: 4px 0; }
.rp-ev-cdesc { font-size: 13px; margin-top: 8px; }
.rp-ev-cdesc p { font-size: 13px; }
.rp-ev-clinks { display: flex; gap: 8px; margin-top: 12px; }
.rp-ev-clinks a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-radius: 50%; color: #666; }
.rp-ev-clinks a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Tooltip por día — SIN transparencias, legible */
.rp-ev-tip { position: absolute; z-index: 99999; pointer-events: none; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.22); padding: 10px 12px; width: 280px; max-width: 90vw; }
.rp-ev-tip-day { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: #333; margin-bottom: 8px; text-transform: capitalize; }
.rp-ev-tip-row { display: flex; gap: 9px; align-items: center; padding: 4px 0; }
.rp-ev-tip-row img, .rp-ev-tip-noimg { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; background: #eee; }
.rp-ev-tip-txt { min-width: 0; }
.rp-ev-tip-title { display: block; font-size: 12.5px; font-weight: 700; color: #222; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ev-tip-cat { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #888; }
.rp-ev-tip-cat i { width: 9px; height: 9px; border-radius: 3px; }
.rp-ev-tip-more { font-size: 11px; color: #999; margin-top: 5px; }

/* Ajustes móvil del mes/semana */
@media (max-width: 620px) {
    body.events-page .content-holder { padding-left: 14px; padding-right: 14px; }
    .rp-ev-cell { min-height: 62px; padding: 3px; }
    .rp-ev-grid > .rp-ev-cell { height: 96px; }
    .rp-ev-num { min-width: 22px; height: 22px; font-size: 12px; }
    .rp-ev-chip { font-size: 10px; padding: 1px 4px 1px 7px; }
    .rp-ev-dow { font-size: 9px; padding: 6px 0; }
    .rp-ev-title { font-size: 18px; }
    .rp-ev-head { gap: 10px; }
    .rp-ev-week { grid-template-columns: 1fr; }
    .rp-ev-wcol { min-height: 0; }
}

/* ============ Ficha pública de un evento (/{lang}/{slug}) ============ */
.rp-eventpage { max-width: 900px; margin: 0 auto; }
.rp-eventpage-hero { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 26px; }
.rp-eventpage-hero > img, .rp-eventpage-hero > video.bg { width: 100%; height: 440px; object-fit: cover; display: block; }
.rp-eventpage-hero-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 34px 26px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.15) 55%, transparent); }
.rp-eventpage-hero-in h1 { color: #fff; margin: 10px 0 6px; font-size: 34px; line-height: 1.12; }
.rp-eventpage-head { text-align: center; margin: 6px 0 26px; }
.rp-eventpage-head h1 { margin: 12px 0 6px; }
.rp-eventpage-cat { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 12px;
    border-radius: 999px; letter-spacing: .5px; text-transform: uppercase; }
.rp-eventpage-when { font-size: 14px; font-weight: 300; opacity: .96; }
.rp-eventpage-when i { margin-right: 6px; }
.rp-eventpage-head .rp-eventpage-when { color: var(--accent); opacity: 1; }
.rp-eventpage-sub { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.rp-eventpage-info { list-style: none; padding: 16px 0 0; margin: 20px 0 0; border-top: 1px solid #ececec;
    display: flex; flex-wrap: wrap; gap: 8px 28px; }
.rp-eventpage-info li { font-size: 13.5px; font-weight: 300; color: #555; }
.rp-eventpage-info i { margin-right: 6px; color: var(--accent); }
.rp-eventpage-info a { color: var(--accent); }
.rp-eventpage-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 24px 0; }
.rp-eventpage-gallery a { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; }
.rp-eventpage-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.rp-eventpage-gallery a:hover img { transform: scale(1.05); }
.rp-eventpage-back { margin-top: 26px; }
.rp-eventpage-back a { color: var(--accent); font-weight: 700; font-size: 14px; }
.rp-eventpage-back i { margin-right: 5px; }
@media (max-width: 620px) {
    .rp-eventpage-hero > img, .rp-eventpage-hero > video.bg { height: 260px; }
    .rp-eventpage-hero-in { padding: 20px; }
    .rp-eventpage-hero-in h1 { font-size: 24px; }
}

/* ============ Listado SEO de eventos (bajo el calendario) ============ */
.rp-ev-seo { margin: 44px 0 8px; border-top: 1px solid #ececec; padding-top: 28px; }
.rp-ev-seo-h { font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.rp-ev-seo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; }
.rp-ev-seo-item { display: flex; gap: 0; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
.rp-ev-seo-thumb { flex: 0 0 190px; }
.rp-ev-seo-thumb a, .rp-ev-seo-thumb img { display: block; width: 100%; height: 100%; }
.rp-ev-seo-thumb img { min-height: 150px; object-fit: cover; }
.rp-ev-seo-txt { padding: 14px 16px 15px; min-width: 0; }
.rp-ev-seo-cat { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.rp-ev-seo-when { color: var(--accent); font-weight: 700; font-size: 13px; margin: 7px 0 1px; }
.rp-ev-seo-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 2px 0 6px; }
.rp-ev-seo-title a { color: inherit; }
.rp-ev-seo-title a:hover { color: var(--accent); }
.rp-ev-seo-desc { font-size: 13.5px; font-weight: 300; color: #666; margin: 0 0 8px; }
.rp-ev-seo-more { color: var(--accent); font-weight: 700; font-size: 13px; }
.rp-ev-seo-more i { margin-left: 3px; }
@media (max-width: 680px) {
    .rp-ev-seo-list { grid-template-columns: 1fr; }
    .rp-ev-seo-item { flex-direction: column; }
    .rp-ev-seo-thumb { flex: none; }
    .rp-ev-seo-thumb img { min-height: 180px; max-height: 220px; }
}

/* ============ FAQ pública (acordeón) ============ */
.rp-faq { max-width: 840px; margin: 14px 0; }
.rp-faq-item { border: 1px solid #ececec; border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.rp-faq-item summary { cursor: pointer; padding: 15px 46px 15px 18px; font-family: var(--font-heading); font-weight: 700;
    font-size: 15px; list-style: none; position: relative; }
.rp-faq-item summary::-webkit-details-marker { display: none; }
.rp-faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    color: var(--accent); font-size: 20px; line-height: 1; }
.rp-faq-item[open] summary::after { content: '\2013'; }
.rp-faq-item summary:hover { color: var(--accent); }
.rp-faq-a { padding: 0 18px 16px; font-size: 14px; font-weight: 300; color: #555; line-height: 1.65; }
.rp-faq-a a { color: var(--accent); }

/* Ficha de evento: botón "Volver a eventos" (pill) + enlaces como botones circulares (como las tarjetas del calendario) */
a.rp-ev-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #d9d9d9;
    border-radius: 999px; background: #fff; color: #444; font-weight: 700; font-size: 13.5px; text-decoration: none; }
a.rp-ev-back:hover { border-color: var(--accent); color: var(--accent); }
.rp-eventpage > a.rp-ev-back { margin-bottom: 18px; }
.rp-eventpage-addr { font-size: 14px; font-weight: 300; color: #555; margin: 18px 0 8px; }
.rp-eventpage-addr i { color: var(--accent); margin-right: 6px; }
.rp-eventpage-links { margin: 12px 0 6px; }
/* El footer del template es position:fixed (90px pegado abajo) y en el modo interior el content-holder
   queda a 100vh fijo, así que su padding-bottom no genera scroll. En un evento corto (sin galería) la fila
   de iconos de contacto es lo último y quedaba tapada/cortada por el footer. Damos aire bajo el contenido
   de la ficha para que el scroll llegue a mostrar lo último por encima del footer. */
body.event-single-page .rp-eventpage { padding-bottom: 140px; }

/* ============ Filtro por categoría (barra estilo artículos) — guía y eventos ============ */
.rp-catfilter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 6px 0 32px; }
.rp-catfilter a { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 700; color: #9a9a9a;
    text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; cursor: pointer; }
.rp-catfilter a:hover { color: #555; }
.rp-catfilter a.on { color: var(--accent); border-bottom-color: var(--accent); }
/* En el calendario de eventos la barra va alineada a la izquierda, sobre la rejilla */
.rp-ev-catbar { justify-content: flex-start; margin: 0 0 16px; }