/* =====================================================================
 *  ESTILOS DEL TEMA VERANO — Intranet MOS
 *  Portados del plugin de WordPress "MOS Portal Verano".
 * ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Segoe UI', 'Poppins', Arial, sans-serif;
    color: #1f2d3d;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Fondo veraniego de la página ---------- */
body.mos-verano-activo {
    background: linear-gradient(180deg, #6fc3e8 0%, #aee3f5 28%, #e9f8ff 55%, #fdf3d6 85%, #fbe6b3 100%) fixed;
}

/* ---------- Contenedor del portal ---------- */
.mos-verano-portal {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 16px 18px 40px;
    z-index: 1;
}

/* ---------- Ambiente decorativo ---------- */
.mvp-ambiente { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mvp-nube { position: absolute; font-size: 44px; opacity: .9; animation: mvp-nube-mueve 26s linear infinite; }
.mvp-nube-1 { top: 28px; left: -10%; }
.mvp-nube-2 { top: 80px; left: -25%; font-size: 38px; animation-duration: 34s; animation-delay: 4s; }
@keyframes mvp-nube-mueve { from { transform: translateX(0); } to { transform: translateX(130vw); } }
.mvp-gaviota { position: absolute; font-size: 24px; opacity: .7; animation: mvp-gaviota-vuela 18s linear infinite; }
.mvp-gaviota-1 { top: 60px; left: -8%; animation-delay: 2s; }
@keyframes mvp-gaviota-vuela {
    0%   { transform: translateX(0) translateY(0); }
    50%  { transform: translateX(60vw) translateY(-18px); }
    100% { transform: translateX(120vw) translateY(0); }
}

/* ---------- Hero / cabecera (escena playa canaria) ---------- */
.mvp-hero {
    position: relative;
    /* Más estrecho que la rejilla: la escena se estira menos y el sol y las
       montañas mantienen su forma. */
    max-width: 940px;
    margin: 0 auto 26px;
    border-radius: 26px;
    overflow: hidden;
    min-height: 280px;
    padding: 30px 24px 62px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, #8fd3ef 0%, #bfe6f2 55%, #ffe6c2 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 26px 50px -14px rgba(40, 90, 130, 0.42), 0 8px 20px -8px rgba(30, 70, 120, 0.26);
}

/* SVG que ocupa toda la escena, por detrás del contenido */
.mvp-ocean { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* Movimiento horizontal de las olas (bucle sin costuras: 360 = 1 longitud de onda) */
.mvp-wv { animation: mvp-waveX linear infinite; will-change: transform; }
.mvp-wv1 { animation-duration: 12s; }
.mvp-wv2 { animation-duration: 18s; animation-direction: reverse; }
.mvp-wv3 { animation-duration: 24s; }
.mvp-foam { animation: mvp-waveX 26s linear infinite; }
@keyframes mvp-waveX {
    from { transform: translateX(0); }
    to   { transform: translateX(-360px); }
}

/* Vaivén vertical suave del mar */
.mvp-sea-bob { animation: mvp-bob 6s ease-in-out infinite; transform-origin: center; }
@keyframes mvp-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* Sol con brillo palpitante */
.mvp-sun { animation: mvp-sunGlow 8s ease-in-out infinite; transform-origin: center; }
@keyframes mvp-sunGlow {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 1; }
}

/* ---------- 🌘 Eclipse (solo el día configurado en ECLIPSE) ---------- */
/* La luna cruza despacio: va del máximo parcial al total y vuelve. */
.mvp-luna { animation: mvp-luna-pasa 70s ease-in-out infinite alternate; }
@keyframes mvp-luna-pasa {
    from { transform: translate(8px, 6px); }
    to   { transform: translate(-8px, -6px); }
}
.mvp-corona { animation: mvp-corona-late 6s ease-in-out infinite; }
@keyframes mvp-corona-late { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* La playa se queda a media luz, como en un eclipse de verdad */
.mvp-en-eclipse .mvp-ocean { filter: saturate(.62) brightness(.74); }
.mvp-en-eclipse::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(120% 90% at 84% 24%, rgba(12,20,45,0) 28%, rgba(10,16,38,.52) 100%);
}
.mvp-eclipse-chapa {
    display: inline-block; margin: 12px 0 0;
    padding: 6px 17px; border-radius: 999px;
    background: rgba(12,20,45,.55);
    border: 1px solid rgba(255,231,168,.5);
    color: #ffe9a8; font-size: 14px; font-weight: 700; letter-spacing: .2px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
}

/* Palmeras que se mecen */
.mvp-palm {
    position: absolute; bottom: 6px; font-size: 54px; z-index: 1;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));
    transform-origin: bottom center;
}
.mvp-palm-l { left: 14px; animation: mvp-sway 5s ease-in-out infinite; }
.mvp-palm-r { right: 14px; transform: scaleX(-1); animation: mvp-swayR 6s ease-in-out infinite; }
@keyframes mvp-sway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}
@keyframes mvp-swayR {
    0%, 100% { transform: scaleX(-1) rotate(-3deg); }
    50%      { transform: scaleX(-1) rotate(3deg); }
}
/* Palmeras extra repartidas por la playa */
.mvp-palm-2 { left: 21%; font-size: 38px; bottom: 3px; animation: mvp-sway 5.6s ease-in-out infinite; }
.mvp-palm-3 { left: 39%; font-size: 32px; bottom: 5px; animation: mvp-swayR 6.4s ease-in-out infinite; }
.mvp-palm-4 { left: 55%; font-size: 35px; bottom: 2px; animation: mvp-sway 5.2s ease-in-out infinite; }

/* 🛍️ Tienda MOS en la playa */
.mvp-tienda { position: absolute; right: 46px; bottom: 6px; z-index: 2; width: 98px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.22)); }
.mvp-tienda svg { width: 100%; height: auto; display: block; }

/* ☁️ Etiquetas-nube con el nombre de cada isla */
.mvp-isla {
    position: absolute; z-index: 2;
    transform: translateX(-50%);
    padding: 6px 15px;
    background: #fff; color: #3a6f8c;
    font-size: 13px; font-weight: 700; letter-spacing: .2px;
    border-radius: 999px; white-space: nowrap;
    box-shadow: 0 6px 14px rgba(30,70,110,.18);
    animation: mvp-isla-flota 7s ease-in-out infinite;
}
.mvp-isla::before, .mvp-isla::after { content: ""; position: absolute; background: #fff; border-radius: 50%; z-index: -1; }
.mvp-isla::before { width: 20px; height: 20px; left: 12px; top: -8px; }
.mvp-isla::after  { width: 28px; height: 28px; right: 14px; top: -12px; }
@keyframes mvp-isla-flota { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

/* Contenido por encima de la escena */
.mvp-hero-content { position: relative; z-index: 3; }

/* Logo dentro de un panel blanco, flotando suavemente */
.mvp-hero-logo { animation: mvp-floaty 5s ease-in-out infinite; }
@keyframes mvp-floaty {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(-1.5deg); }
}
/* El PNG del logo ya trae margen blanco propio: el panel lleva poco relleno. */
.mvp-hero-logo img {
    display: block;
    max-height: 104px; width: auto; max-width: 300px;
    padding: 2px 10px;
    background: rgba(255,255,255,.95);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(20,60,90,.22);
    margin: 0 auto;
}
/* Logo de texto si no se configura LOGO_URL */
.mvp-hero-logo-texto {
    font-size: 52px; font-weight: 800; letter-spacing: -1px; line-height: 1;
    color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.mvp-hero-logo-texto span { display: block; font-size: 17px; font-weight: 600; letter-spacing: 6px; opacity: .85; margin-top: 2px; }
.mvp-hero-titulo { color: #fff; font-size: 27px; font-weight: 800; margin: 16px 0 0; text-shadow: 0 3px 12px rgba(10, 40, 70, 0.55), 0 1px 2px rgba(10,40,70,0.4); }

/* ---------- 📣 Aviso dentro del hero ---------- */
.mvp-aviso {
    display: flex; align-items: flex-start; gap: 14px;
    max-width: 660px; margin: 18px auto 0;
    padding: 14px 20px;
    text-align: left;
    background: rgba(255,255,255,.95);
    border-radius: 16px;
    border-left: 5px solid #E8663C;
    box-shadow: 0 14px 30px rgba(20,60,90,.28);
    color: #1f2d3d;
    animation: mvp-aviso-in .55s ease both;
}
@keyframes mvp-aviso-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mvp-aviso-icono {
    font-size: 30px; line-height: 1.1; flex: 0 0 auto;
    animation: mvp-aviso-late 2.6s ease-in-out infinite;
}
@keyframes mvp-aviso-late { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.mvp-aviso-texto { flex: 1; min-width: 0; }
.mvp-aviso-titulo { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; color: #1f2d3d; }
.mvp-aviso-fechas {
    display: inline-block; margin-top: 6px;
    padding: 3px 12px; border-radius: 999px;
    background: #fdece4; color: #c2451c;
    font-size: 13px; font-weight: 800; letter-spacing: .2px;
}
.mvp-aviso-msg { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #4a5c6e; }

/* ---------- Accesos rápidos ---------- */
.mvp-accesos { display: flex; flex-direction: column; gap: 16px; }
.mvp-fila { display: grid; gap: 16px; }
.mvp-fila-4 { grid-template-columns: repeat(4, 1fr); }
.mvp-fila-3 { grid-template-columns: repeat(3, 1fr); max-width: 880px; margin: 0 auto; width: 100%; }
.mvp-fila-2 { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin: 0 auto; width: 100%; }
.mvp-fila-1 { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; width: 100%; }

.mvp-btn {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 18px;
    border-radius: 18px;
    text-decoration: none;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.7);
    border-left: 5px solid var(--mvp-acento);
    box-shadow: 0 8px 22px rgba(40,70,120,.13);
    color: #1f2d3d;
    font-weight: 700; font-size: 15px;
    transition: transform .22s cubic-bezier(.4,1.4,.5,1), box-shadow .22s, background .22s;
    overflow: hidden;
}
.mvp-btn::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, var(--mvp-acento) 0%, transparent 60%);
    opacity: 0; transition: opacity .22s;
}
.mvp-btn:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 34px rgba(40,70,120,.22);
    background: #fff;
}
.mvp-btn:focus-visible { outline: 3px solid #1f6f8b; outline-offset: 3px; }
.mvp-btn:hover::before { opacity: .08; }
.mvp-btn-icon {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    font-size: 22px; border-radius: 12px;
    background: color-mix(in srgb, var(--mvp-acento) 16%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mvp-acento) 25%, transparent);
}
.mvp-btn-icon img { max-width: 30px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.mvp-btn-label { position: relative; z-index: 1; flex: 1; line-height: 1.25; }
.mvp-btn-flecha {
    position: relative; z-index: 1;
    font-size: 24px; font-weight: 700; color: var(--mvp-acento);
    opacity: .55; transition: transform .22s, opacity .22s;
}
.mvp-btn:hover .mvp-btn-flecha { transform: translateX(4px); opacity: 1; }

/* ---------- Frase del pie ---------- */
.mvp-frase {
    margin-top: 28px;
    text-align: center;
    padding: 18px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1f6f8b 0%, #2a9d8f 100%);
    color: #fff; font-weight: 700; font-size: 17px;
    box-shadow: 0 10px 26px rgba(31,111,139,.3);
}

/* ---------- Modal de los accesos protegidos ---------- */
.mvp-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 35, 60, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    justify-content: center; align-items: center;
    z-index: 100000;
}
.mvp-modal.mvp-abierto { display: flex; }
.mvp-modal-caja {
    background: #fff;
    padding: 26px 30px;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    text-align: center;
    width: 360px; max-width: 90vw;
    animation: mvp-modal-in .25s ease;
}
@keyframes mvp-modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.mvp-modal-caja h3 { margin: 0 0 16px; color: #1f2d3d; font-size: 19px; }
.mvp-modal-caja input {
    padding: 11px 13px; font-size: 16px; width: 100%;
    border: 1px solid #cbd5e1; border-radius: 10px; margin-bottom: 12px;
    font-family: inherit;
}
.mvp-modal-caja input:focus { outline: none; border-color: #2c7be5; box-shadow: 0 0 0 3px rgba(44,123,229,.18); }
.mvp-modal-error { margin: 0 0 12px; color: #c0392b; font-size: 14px; font-weight: 600; }
.mvp-modal-btns { display: flex; gap: 10px; }
.mvp-modal-btns button { flex: 1; padding: 11px; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 15px; font-family: inherit; transition: filter .2s; }
.mvp-modal-btns button:hover { filter: brightness(1.06); }
.mvp-modal-btns button[disabled] { opacity: .6; cursor: progress; }
.mvp-modal-ok { background: linear-gradient(135deg, #ff8a3d, #ff5e7e); color: #fff; }
.mvp-modal-cancel { background: #e2e8f0; color: #334155; }

/* =====================================================================
 *  📐 AJUSTE A PANTALLA (sin scroll)
 *  El portal ocupa exactamente el alto visible. El hero se estira/encoge
 *  y los botones usan medidas fluidas. Solo se activa si hay alto
 *  suficiente; en móvil o pantallas muy bajas, comportamiento normal.
 * ===================================================================== */
@media (min-width: 781px) and (min-height: 560px) {
    body.mos-verano-activo { overflow-x: hidden; }

    .mos-verano-portal {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        height: 100dvh;
        padding-top: clamp(6px, 1.4vh, 16px);
        padding-bottom: clamp(6px, 1.4vh, 16px);
        overflow: hidden;
    }

    /* El banner se encoge si hace falta, pero nunca se estira para rellenar
       la pantalla: así conserva su proporción de postal. */
    .mos-verano-portal .mvp-hero {
        flex: 0 1 auto;
        /* Sin ancho explícito, el margen auto impide que el flex item se
           estire y el banner se encogería al tamaño de su contenido. */
        width: 100%;
        min-height: clamp(210px, 29vh, 285px);
        max-height: clamp(240px, 34vh, 330px);
        padding: clamp(12px, 2.4vh, 30px) 24px clamp(22px, 5vh, 62px);
        margin-bottom: clamp(8px, 1.6vh, 26px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mos-verano-portal .mvp-hero-content { width: 100%; }

    .mos-verano-portal .mvp-hero-logo img {
        max-height: clamp(52px, 11.5vh, 104px);
        padding: clamp(2px, .4vh, 4px) clamp(8px, 1.4vw, 12px);
    }
    .mos-verano-portal .mvp-hero-logo-texto { font-size: clamp(30px, 5vh, 52px); }
    .mos-verano-portal .mvp-hero-titulo { font-size: clamp(18px, 2.9vh, 27px); margin-top: clamp(8px, 1.6vh, 16px); }

    /* El aviso también se ajusta al alto disponible */
    .mos-verano-portal .mvp-aviso {
        margin-top: clamp(8px, 1.8vh, 18px);
        padding: clamp(8px, 1.4vh, 14px) clamp(14px, 2vw, 20px);
        gap: clamp(9px, 1.4vh, 14px);
    }
    .mos-verano-portal .mvp-aviso-icono { font-size: clamp(21px, 3.1vh, 30px); }
    .mos-verano-portal .mvp-aviso-titulo { font-size: clamp(13.5px, 1.75vh, 16px); }
    .mos-verano-portal .mvp-aviso-fechas { font-size: clamp(11.5px, 1.4vh, 13px); margin-top: clamp(3px, .6vh, 6px); }
    .mos-verano-portal .mvp-aviso-msg { font-size: clamp(11.5px, 1.45vh, 13.5px); margin-top: clamp(4px, .8vh, 8px); }

    .mos-verano-portal .mvp-accesos { flex: 0 0 auto; gap: clamp(6px, 1.3vh, 16px); }
    .mos-verano-portal .mvp-fila { gap: clamp(6px, 1.3vh, 16px); }

    .mos-verano-portal .mvp-btn {
        padding: clamp(8px, 1.5vh, 18px) 16px;
        gap: clamp(8px, 1.2vh, 12px);
        font-size: clamp(13px, 1.6vh, 15px);
        border-radius: clamp(12px, 1.8vh, 18px);
    }
    .mos-verano-portal .mvp-btn-icon {
        width: clamp(30px, 4.4vh, 44px);
        height: clamp(30px, 4.4vh, 44px);
        flex: 0 0 clamp(30px, 4.4vh, 44px);
        font-size: clamp(16px, 2.3vh, 22px);
    }
    .mos-verano-portal .mvp-btn-icon img { max-width: 70%; max-height: 70%; }

    .mos-verano-portal .mvp-frase {
        flex: 0 0 auto;
        margin-top: clamp(8px, 1.8vh, 28px);
        padding: clamp(8px, 1.5vh, 18px) 24px;
        font-size: clamp(14px, 1.9vh, 17px);
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .mvp-fila-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mvp-fila-4, .mvp-fila-3, .mvp-fila-2 { grid-template-columns: 1fr; }
    .mvp-hero { padding: 40px 18px 72px; }
    .mvp-hero-logo-texto { font-size: 42px; }
    .mvp-hero-titulo { font-size: 23px; }
    /* Menos recargado en móvil: en un banner tan estrecho las etiquetas de
       las islas se pisaban entre ellas y con el logo. */
    .mvp-tienda { width: 92px; right: 12px; }
    .mvp-isla { display: none; }
    .mvp-palm-3, .mvp-palm-4 { display: none; }
    .mvp-aviso { flex-direction: column; align-items: center; text-align: center; padding: 14px 16px; }
    .mvp-aviso-titulo { font-size: 14.5px; }
    .mvp-aviso-msg { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .mvp-nube, .mvp-gaviota,
    .mvp-wv, .mvp-foam, .mvp-sea-bob, .mvp-sun, .mvp-palm, .mvp-hero-logo, .mvp-isla,
    .mvp-luna, .mvp-corona,
    .mvp-aviso, .mvp-aviso-icono, .mvp-modal-caja { animation: none !important; }
    .mvp-btn { transition: none; }
}