/* ============================================================
   EFECTOS (Jávea, Pedreguer y portada)
   Van con js/efectos.js. Cada apartado se puede borrar por separado.
   Todo se apaga solo si el sistema pide menos movimiento (al final).
   ============================================================ */

/* ---------- 1. Entrada de cada componente ----------
   El JS pone .sb-entra y el efecto a lo que aún no se ve, y .sb-entra--visible
   al llegar a ello. Después quita todas las clases, para que vuelvan las
   transiciones propias de cada pieza (el hover de las tarjetas). */
.sb-entra {
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: var(--sb-retraso, 0s);
}

.sb-entra--sube      { opacity: 0; transform: translateY(40px); }
.sb-entra--izquierda { opacity: 0; transform: translateX(-50px); }
.sb-entra--derecha   { opacity: 0; transform: translateX(50px); }
.sb-entra--zoom      { opacity: 0; transform: scale(0.9); }
.sb-entra--crece     { transform: scaleX(0); }
.sb-entra--destapa   { clip-path: inset(0 0 100% 0); }

/* Lo que entra desde un lado no debe ensanchar la página en el móvil */
main {
    overflow-x: clip;
}

.sb-entra.sb-entra--visible {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

/* ---------- 2. Cabecera ----------
   Se esconde al bajar, vuelve al subir y echa más sombra al separarse del
   principio de la página. */
.header-sticky {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.header-sticky.sb-oculta {
    transform: translateY(-100%);
}

.header-sticky.sb-con-sombra {
    box-shadow: 0 6px 24px rgba(0, 37, 113, 0.15);
}

/* ---------- 3a. Línea de progreso ---------- */
.sb-progreso {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #1282C7, #0ea5e9);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 1001;
    pointer-events: none;
}

/* ---------- 3b. Sección activa en el menú ----------
   Raya blanca debajo del enlace de la sección que se está viendo. La misma
   raya se dibuja al pasar el ratón. */
.center-menu a {
    position: relative;
}

.center-menu a::after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 14px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.center-menu a:hover::after,
.center-menu a.sb-activo::after {
    transform: scaleX(1);
}

/* ---------- 3c. Botón de volver arriba ----------
   Encima del botón de WhatsApp, alineado con él. */
.sb-arriba {
    position: fixed;
    right: 25px;
    bottom: 92px;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: #1282C7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.sb-arriba[hidden] {
    display: none;
}

.sb-arriba.sb-visible {
    opacity: 1;
    transform: none;
}

/* Materialize pinta de verde agua cualquier botón con el foco */
.sb-arriba:focus {
    background-color: #1282C7;
}

.sb-arriba:hover {
    background: #0d5a94;
    transform: translateY(-3px);
}

.sb-arriba:focus-visible {
    outline: 3px solid #0ea5e9;
    outline-offset: 3px;
}

/* Flecha hacia arriba: un ángulo hecho con dos bordes */
.sb-arriba__flecha {
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;
    transform: rotate(45deg);
}

/* ---------- 4. Carrusel: entrada del texto y paralaje ---------- */
@keyframes sbSube {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}

.carousel-caption h2 {
    animation: sbSube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

.carousel-caption h5 {
    animation: sbSube 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}

/* La foto va algo más grande para que al moverse nunca se vea el borde */
.sb-paralaje .carousel-item img {
    transform: scale(1.2);
    will-change: transform;
}

/* ---------- 5. Portada (elegir centro) ---------- */
@keyframes sbBaja {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: none; }
}

@keyframes sbAparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.center-logo img {
    animation: sbBaja 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.sede-panel {
    animation: sbAparece 1s ease backwards;
}

.sede-panel + .sede-panel {
    animation-delay: 0.15s;
}

.sede-content > * {
    animation: sbSube 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.sede-content > :nth-child(1) { animation-delay: 0.3s; }
.sede-content > :nth-child(2) { animation-delay: 0.45s; }
.sede-content > :nth-child(3) { animation-delay: 0.6s; }

.sede-panel + .sede-panel .sede-content > :nth-child(1) { animation-delay: 0.45s; }
.sede-panel + .sede-panel .sede-content > :nth-child(2) { animation-delay: 0.6s; }
.sede-panel + .sede-panel .sede-content > :nth-child(3) { animation-delay: 0.75s; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .sb-entra,
    .header-sticky,
    .sb-arriba,
    .center-menu a::after {
        transition: none !important;
    }

    .sb-entra {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .header-sticky.sb-oculta {
        transform: none;
    }

    .carousel-caption h2,
    .carousel-caption h5,
    .center-logo img,
    .sede-panel,
    .sede-content > * {
        animation: none !important;
    }
}

/* ---------- Scroll suave (Lenis, js/scroll-suave.js) ----------
   Las reglas que pide Lenis, menos la que desactiva los clics en los iframe:
   esa dejaría el mapa de Google sin poder moverse. */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}