
.an-svg-bg-active::before {
    display: none !important;
}
.an-svg-fill svg path,
.an-svg-fill svg circle,
.an-svg-fill svg rect,
.an-svg-fill svg polyline,
.an-svg-fill svg ellipse {
    transform-box: fill-box;
}

:root{

}

/* En móvil se oculta la barra de admin de WordPress y su margin-top.
   782px es el corte que usa WordPress para pasar la barra a 46px.
   html:root hace falta porque WP imprime "html { margin-top: 46px !important }"
   en wp_head, o sea después de este archivo: con la misma especificidad ganaría la suya */
@media screen and (max-width: 782px) {
    html:root {
        margin-top: 0 !important;
    }
    body.admin-bar #wpadminbar {
        display: none;
    }
}

@media (min-width: 1191px) {
    body.admin-bar > header{
        top: 32px;
    }
}


/* ── Loader Locus: L°CUS + apertura por el º ─────────────────
   --u = 1px del GIF original (L°CUS a 240px de altura de mayúscula),
   así las medidas de diseño se copian tal cual */
.b-loader {
    --b-loader-fg: #F0F0F0;
    --b-loader-cap: clamp(36px, 10.8vw, 61px);
    --b-loader-cap-ratio: 0.754; /* JS lo mide con la fuente real */
    --b-loader-dx: 0;            /* JS: centrado horizontal del bloque L°CUS (en u) */
    --b-loader-dy: 0;
    --u: calc(var(--b-loader-cap) / 240);

    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    color: var(--b-loader-fg);
    font-family: "Futura", sans-serif;
    font-weight: bold; /* en la web "bold" = Futura Std Book, el peso del GIF */
    pointer-events: all;
}

.b-loader__filters {
    position: absolute;
    width: 0;
    height: 0;
}

.b-loader__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* fondo de la web (#919380) con su overlay (#0C0C0C al 38%) ya aplicado */
    background-color: var(--b-loader-veil, #5E6054);
}

.b-loader__ring {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    background-color: var(--b-loader-fg);
}

/* Fondo de la intro: imagen propia, con el mismo oscurecido que el slider */
.b-loader__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.b-loader__bg:empty {
    display: none;
}
.b-loader__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #0C0C0C;
    opacity: 0.38;
}
.an-slider__intro-img {
    display: none;
}
.b-loader__bg .an-slider__intro-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Escena 1 del CodePen: lo que hay debajo (slider) pasado por el filtro de agua */
.b-loader__water {
    position: absolute;
    inset: 0;
    z-index: 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.has-backdrop-url .b-loader__water {
    backdrop-filter: url(#b-loader-water);
}

/* 1fr | º | 1fr: el º se queda centrado aunque cambie el ancho de los dígitos */
.b-loader__word {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    width: calc(2000 * var(--u));
    transform: translate(
        calc(-50% + var(--b-loader-dx) * var(--u)),
        calc(-50% + var(--b-loader-dy) * var(--u))
    );
    /* el GIF usa una Futura más gruesa que la de la web: se engorda con stroke (+9u de trazo) */
    font-size: calc((var(--b-loader-cap) - 9 * var(--u)) / var(--b-loader-cap-ratio));
    -webkit-text-stroke: calc(9 * var(--u)) currentColor;
    paint-order: stroke fill;
    line-height: 1;
    white-space: nowrap;
    visibility: hidden;
}
.b-loader__left {
    position: relative;
    justify-self: end;
}
.b-loader__right {
    display: flex;
    align-items: baseline;
    justify-self: start;
}
.b-loader__char[data-final="S"] {
    margin-left: calc(20 * var(--u)); /* el kerning U-S de la fuente las junta más que en el GIF */
}

.b-loader__deg {
    position: relative;
    z-index: 1; /* al crecer pasa por encima de las letras */
    display: inline-block;
    width: calc(102 * var(--u));
    height: var(--b-loader-cap);
    margin: 0 calc(21 * var(--u)) 0 calc(32 * var(--u));
}
.b-loader__deg svg {
    position: absolute;
    left: 0;
    top: calc(2 * var(--u));
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    fill: currentColor;
    fill-rule: evenodd; /* el hueco del º (más fino, como el del logo) va en el mismo sentido que el contorno */
    transform-origin: 50% 50%;
}

.b-loader__coords {
    position: absolute;
    left: calc(-10 * var(--u));
    top: calc(100% + 52 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(22 * var(--u));
    font-size: calc(53 * var(--u) / var(--b-loader-cap-ratio));
    -webkit-text-stroke: calc(2 * var(--u)) currentColor;
    line-height: 1;
    letter-spacing: calc(-1.4 * var(--u));
}
.b-loader__coord {
    visibility: hidden;
}
.b-loader__coord-deg {
    margin: 0 calc(10 * var(--u)); /* en el GIF el ° va separado de los números */
}

/* MADRID - SEVILLA - MARBELLA: abajo del todo, a la misma distancia del borde que el logo
   del header del borde superior (1% de padding del header + 10px del contenedor).
   Por debajo del º (z 3) para que al crecer pase por encima */
.b-loader__cities {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    bottom: calc(1vw + 10px + var(--an-bottom-lift));
    text-align: center;
    font-size: calc(98 * var(--u));
    font-weight: 300;
    letter-spacing: calc(6 * var(--u));
    line-height: 1;
    text-box: trim-both cap alphabetic;
    white-space: nowrap;
    visibility: hidden;
}

html.has-loader-lock,
html.has-loader-lock body {
    overflow: hidden;
}

/* Header y titulares con entrada de intro (clases an-header / an-intro-text en Elementor).
   Las clases están en toda la web, pero esto solo actúa en la home */
body.home:has(> .b-loader) .an-header,
body.home:has(> .b-loader) .an-intro-text {
    visibility: hidden;
}

/* En la home manda el JS: se anulan las animaciones de entrada de Elementor
   (en el resto de páginas siguen funcionando tal cual). La clase elementor-invisible
   se quita desde el JS, no con visibility, para no pelear con la regla de arriba */
body.home .an-header .animated,
body.home .an-intro-text.animated {
    animation: none;
}


/* ── AN Slider: Swiper fade + textos con SplitText ──────────── */
.an-slider {
    --an-slider-justify: flex-end;
    --an-slider-text-align: right;
    position: relative;
}

/* En contenedores en fila ocupa el hueco libre, como el widget Slides de Elementor */
.e-con > .elementor-widget-an_slider {
    flex-grow: var(--container-widget-flex-grow);
}

/* .an-slider delante: el CSS de Swiper (.swiper { position: relative; z-index: 1 }) carga después */
.an-slider .an-slider__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* "Fondo de la sección": las imágenes cubren el contenedor principal (e-parent)
   y el texto se queda en el sitio del widget */
.an-slider.an-slider--media-section .an-slider__media {
    z-index: -1;
}
.e-con.e-parent:has(.an-slider--media-section) {
    isolation: isolate;
}
.an-slider.an-slider--media-section,
.e-con.e-child:has(.an-slider--media-section),
.elementor-widget-an_slider:has(.an-slider--media-section) {
    position: static;
}

/* "Dentro del widget" */
.an-slider--media-widget {
    height: 100vh;
}
.an-slider--media-widget .an-slider__captions {
    position: relative;
    z-index: 1;
    height: 100%;
}

.an-slider__media .swiper-wrapper,
.an-slider__slide,
.an-slider__slide picture {
    height: 100%;
}
.an-slider__slide picture,
.an-slider .an-slider__img {
    display: block;
    width: 100%;
}
/* .an-slider delante: gana a .elementor img { height: auto } */
.an-slider .an-slider__img {
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.an-slider__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: #0C0C0C;
    opacity: 0.38;
    pointer-events: none;
}

/* La sección del slider ocupa exactamente la altura visible: sin scroll en la home.
   dvh se ajusta a lo que se ve de verdad (svh dejaría una franja al esconderse las barras
   del navegador y lvh dejaría contenido tapado) */
.e-con.e-parent:has(.an-slider--media-section) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}
.e-con.e-parent:has(.an-slider--media-section) > .e-con {
    min-height: 0;
}
/* El espaciador cede altura cuando el contenido no cabe, en vez de forzar scroll */
.e-con.e-parent:has(.an-slider--media-section) .elementor-widget-spacer {
    flex: 0 1 var(--spacer-size, auto);
    min-height: 0;
}
.e-con.e-parent:has(.an-slider--media-section) .elementor-spacer,
.e-con.e-parent:has(.an-slider--media-section) .elementor-spacer-inner {
    height: 100%;
    min-height: 0;
}
/* La barra de administración de WordPress se descuenta (solo la ves logueado) */
@media (min-width: 783px) {
    body.admin-bar .e-con.e-parent:has(.an-slider--media-section) {
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }
}

/* Lo que falta para "subir un poco" los textos de abajo sobre la distancia del logo (hero e intro) */
:root {
    --an-bottom-lift: 30px;
}

/* Fila de abajo (titular + textos del slider): pegada al borde inferior, a la misma distancia
   que el logo del header tiene del borde superior (1% de padding del header + 10px del contenedor).
   text-box recorta el interlineado: lo que se mide es la línea base del texto */
.e-con.e-parent:has(.an-slider--media-section) {
    --an-edge: calc(1vw + 10px + var(--an-bottom-lift));
}
.e-con.e-parent:has(.an-slider--media-section) > .e-con:has(.elementor-widget-an_slider) {
    flex-grow: 1;
}
.e-con.e-parent:has(.an-slider--media-section) .e-con:has(> .elementor-widget-an_slider) {
    --padding-bottom: var(--an-edge);
    margin-top: auto;
    align-items: flex-end;
}
.e-con.e-parent:has(.an-slider--media-section) .an-slider__captions {
    align-items: end;
}
.e-con.e-parent:has(.an-slider--media-section) .an-intro-text .elementor-heading-title,
.e-con.e-parent:has(.an-slider--media-section) .an-slider__title {
    text-box: trim-end cap alphabetic;
}

/* Todos los textos en la misma celda: el cambio de slide no mueve el layout */
.an-slider__captions {
    display: grid;
    align-items: center;
    justify-content: var(--an-slider-justify);
}
.an-slider__caption {
    grid-area: 1 / 1;
    text-align: var(--an-slider-text-align);
    white-space: nowrap;
    visibility: hidden;
}
.an-slider__title {
    display: block;
    line-height: 1.3;
    text-decoration: none;
}
