/* ==========================================================================
   winter.css — Ambientación de invierno
   --------------------------------------------------------------------------
   Solo se carga cuando mb_temporada() === 'winter' (functions.php). Con el zip
   de verano no existe: no hay que acordarse de quitar nada en primavera.

   Cinco piezas, aprobadas por el socio el 18-sep-2026 sobre una preview:
     A · Portada fría: tono frío, niebla y copos (hero-home.php + winter-snow.js)
     B · Cinta de temporada arriba del todo, en toda la web (header.php)
     C · "Winter edition" en las tarjetas de experiencia (routes-data.php y
         season-collections.php)
     D · "Colección invierno" y foto con marco escarchado (home-experiences.php
         y season-collections.php)
     E · Bloque "Tu experiencia en invierno" (template-parts/winter-tips.php)

   El dorado sigue siendo el color de la marca. El azul hielo solo acompaña:
   frío fuera, calor dentro.

   Móvil: nada de backdrop-filter ni animaciones de layout. El header ya tuvo
   tirones por eso (ver main.css, .site-header.is-scrolled).
   ========================================================================== */

:root {
    --mb-ice:    #D6EAF5;
    --mb-ice-2:  #9CC3DA;
    --mb-wbar-h: 36px;
}

.mb-copo { display: inline-block; flex: none; vertical-align: -2px; }


/* ── B · Cinta de temporada ───────────────────────────────────────────────
   Va DENTRO de la cabecera fija. La cabecera crece lo que mide la cinta, así
   que se baja todo el contenido esa misma medida: el hero y el resto quedan
   exactamente como en verano, solo 36 px más abajo.
   .mb-wbar-on (y no .mb-winter) porque en las páginas de reserva no hay cinta
   y ahí no hay que bajar nada (mb_wbar_visible). */
body.mb-wbar-on { padding-top: var(--mb-wbar-h); }

/* El hueco de arriba de la cabecera lo pone ahora la cinta. */
body.mb-wbar-on .site-header { padding-top: 0; }

.mb-wbar {
    position:        relative;
    z-index:         1;               /* por encima del degradado de .site-header::before */
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    height:          var(--mb-wbar-h);
    max-height:      var(--mb-wbar-h);
    margin-bottom:   22px;            /* = el padding-top que tenía la cabecera */
    padding:         0 16px;
    overflow:        hidden;
    white-space:     nowrap;
    font-size:       12.5px;
    line-height:     1;
    color:           #DCE9F1;
    text-decoration: none;
    background:      linear-gradient(90deg, #0c161d 0%, #13212b 50%, #0c161d 100%);
    border-bottom:   1px solid rgba(156, 195, 218, .22);
    transition:      max-height .35s ease, margin .35s ease, opacity .25s ease;
}
.mb-wbar:hover,
.mb-wbar:focus-visible { color: #fff; }
.mb-wbar:hover .mb-wbar__cta,
.mb-wbar:focus-visible .mb-wbar__cta { color: #F2CB8A; }
.mb-wbar:focus-visible { outline: 2px solid var(--mb-ice-2); outline-offset: -3px; }

.mb-wbar__copo { width: 14px; height: 14px; color: var(--mb-ice-2); vertical-align: 0; }
.mb-wbar__t    { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mb-ice); }
.mb-wbar__sep  { opacity: .35; }
.mb-wbar__cta  { color: var(--color-accent); font-weight: 600; transition: color .2s ease; }

/* Al bajar se recoge y la cabecera vuelve a ser la compacta de siempre. */
body.mb-wbar-on .site-header.is-scrolled .mb-wbar {
    max-height:          0;
    margin-bottom:       14px;        /* = el padding-top de la cabecera compacta */
    opacity:             0;
    border-bottom-width: 0;
}

/* Móvil: una sola línea — rótulo y enlace. */
@media (max-width: 700px) {
    .mb-wbar { gap: 10px; }
    .mb-wbar__sep,
    .mb-wbar__txt { display: none; }
}
/* En táctil no se anima el alto de un elemento fijo (mismo criterio que el header). */
@media (hover: none) and (pointer: coarse) {
    .mb-wbar { transition: none; }
}


/* ── A · Portada fría ─────────────────────────────────────────────────────
   El texto del hero NO cambia (decisión del 18-sep). Solo el punto del rótulo
   pasa a azul hielo. */
body.mb-winter .hero__eyebrow-dot {
    background: var(--mb-ice-2);
    box-shadow: 0 0 12px rgba(156, 195, 218, .8);
}

/* El fondo de respaldo (se ve antes de que cargue el vídeo) era un degradado
   cálido; en invierno, frío. */
body.mb-winter .hero__bg::before {
    background: linear-gradient(150deg, #07131b 0%, #000000 55%, #060810 100%);
}

.hero__cold,
.hero__mist,
.hero__snow {
    position:       absolute;
    inset:          0;
    z-index:        3;                /* entre .hero__overlay (2) y .hero__glow (4) */
    pointer-events: none;
}
.hero__snow { width: 100%; height: 100%; }

/* Tono frío. En escritorio, mezcla de color (quita el calor sin oscurecer) y un
   punto menos de saturación en el vídeo. */
.hero__cold {
    background: linear-gradient(180deg,
        rgba(62, 110, 150, .34) 0%,
        rgba(30, 62, 90, .22)   55%,
        rgba(12, 24, 36, .40)   100%);
    mix-blend-mode: color;
}
@media (hover: hover) {
    body.mb-winter .hero__video { filter: saturate(.7); }
}
/* En táctil, un velo normal: más barato de pintar sobre un vídeo. */
@media (hover: none) {
    .hero__cold {
        mix-blend-mode: normal;
        background: linear-gradient(180deg,
            rgba(40, 80, 115, .20) 0%,
            rgba(20, 45, 68, .14)  60%,
            rgba(10, 20, 30, .22)  100%);
    }
}

/* Niebla: dos capas de degradados suaves que se cruzan muy despacio, a ras del
   suelo. Solo se anima el transform (lo hace la tarjeta gráfica). */
.hero__mist { inset: -10% -30%; will-change: transform; }
.hero__mist--1 {
    background:
        radial-gradient(38% 22% at 30% 74%, rgba(225, 238, 247, .20), transparent 70%),
        radial-gradient(30% 18% at 72% 82%, rgba(225, 238, 247, .14), transparent 70%);
    animation: mb-niebla 46s ease-in-out infinite alternate;
}
.hero__mist--2 {
    background:
        radial-gradient(34% 20% at 55% 64%, rgba(225, 238, 247, .13), transparent 70%),
        radial-gradient(26% 16% at 14% 86%, rgba(225, 238, 247, .17), transparent 70%);
    animation: mb-niebla 70s ease-in-out infinite alternate-reverse;
}
@keyframes mb-niebla {
    from { transform: translate3d(-7%, 0, 0); }
    to   { transform: translate3d(7%, 0, 0); }
}
/* En táctil y con "reducir movimiento", niebla quieta: el ambiente se queda. */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .hero__mist { animation: none; will-change: auto; }
}


/* ── C · Winter edition — tarjetas grandes (/buggy/) ─────────────────────── */
.tour-card--winter::after {           /* ::before ya lo usa el hover dorado */
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    right:          0;
    height:         2px;
    z-index:        4;
    pointer-events: none;
    background:     linear-gradient(90deg, var(--color-accent), var(--mb-ice-2) 60%, transparent);
}
.tour-card__ed {
    display:        flex;
    align-items:    center;
    gap:            6px;
    margin-bottom:  6px;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--mb-ice-2);
}
.tour-card__ed .mb-copo { width: 11px; height: 11px; vertical-align: 0; }

/* Duración en cristal esmerilado. */
.tour-card--winter .tour-card__duration {
    color:         #fff;
    padding:       6px 11px 4px;
    border-radius: 10px;
    background:    rgba(20, 30, 38, .55);
    border:        1px solid rgba(214, 234, 245, .35);
    text-shadow:   0 2px 10px rgba(0, 0, 0, .5);
}
@media (hover: hover) {
    .tour-card--winter .tour-card__duration {
        background:              rgba(255, 255, 255, .10);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
    }
}


/* ── C · Winter edition — mini-tarjetas de la portada ────────────────────── */
.season-exp--winter { box-shadow: inset 0 2px 0 0 rgba(156, 195, 218, .55); }
.season-exp--winter .season-exp__dur {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    color:       #fff;
    background:  rgba(214, 234, 245, .14);
    box-shadow:  inset 0 0 0 1px rgba(214, 234, 245, .35);
}
.season-exp--winter .season-exp__dur .mb-copo { width: 10px; height: 10px; color: var(--mb-ice); vertical-align: 0; }
.season-exp__ed {
    font-size:      .56rem;
    font-weight:    700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--mb-ice-2);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
/* En el móvil las mini-tarjetas miden ~75 px: el texto no cabe y se queda el
   copo de la pastilla, que ya lo dice. */
@media (max-width: 560px) {
    .season-exp__ed { display: none; }
}


/* ── D · Colección de invierno ────────────────────────────────────────────── */
.mb-eyebrow-invierno {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    color:       var(--mb-ice-2);
}
.mb-eyebrow-invierno .mb-copo { width: 13px; height: 13px; vertical-align: 0; }

/* Marco escarchado: una segunda copia de la foto, desenfocada, que solo se ve
   por los bordes gracias a la máscara. Sin backdrop-filter (ver cabecera). */
.season-card__frost {
    position:          absolute;
    inset:             0;
    width:             100%;
    height:            100%;
    object-fit:        cover;
    pointer-events:    none;
    filter:            blur(7px) brightness(1.14) saturate(.55);
    transform:         scale(1.05);   /* el desenfoque deja un halo en el borde */
    -webkit-mask-image: radial-gradient(118% 100% at 50% 50%, transparent 54%, #000 90%);
            mask-image: radial-gradient(118% 100% at 50% 50%, transparent 54%, #000 90%);
}
.season-card__frost-glow {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:
        radial-gradient(118% 100% at 50% 50%, transparent 56%, rgba(226, 240, 250, .40) 100%),
        radial-gradient(38% 50% at 0% 0%,     rgba(226, 240, 250, .28), transparent 70%),
        radial-gradient(38% 50% at 100% 100%, rgba(226, 240, 250, .24), transparent 70%);
    box-shadow:
        inset 0 0 0 1px rgba(214, 234, 245, .28),
        inset 0 0 70px  rgba(214, 234, 245, .18);
}


/* ── E · Tu experiencia en invierno ───────────────────────────────────────── */
.mb-wtips { padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(3rem, 6vw, 4.5rem); }
.mb-wtips__in {
    max-width:     1100px;
    margin-inline: auto;
    padding:       clamp(1.25rem, 3vw, 1.75rem);
    border:        1px solid rgba(156, 195, 218, .28);
    border-radius: 16px;
    background:    linear-gradient(135deg, rgba(28, 48, 62, .55), rgba(14, 20, 26, .9));
}
.mb-wtips__t {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin:         0 0 18px;
    font-family:    var(--font-display);
    font-weight:    400;
    font-size:      clamp(1.4rem, 2.4vw, 1.7rem);
    line-height:    1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color:          var(--color-text-primary, #F5F5F0);
}
.mb-wtips__t .mb-copo { width: 18px; height: 18px; color: var(--mb-ice-2); vertical-align: 0; }
.mb-wtips__g {
    list-style:            none;
    margin:                0;
    padding:               0;
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap:                   18px 24px;
}
.mb-wtips__ico svg { display: block; width: 26px; height: 26px; margin-bottom: 10px; color: var(--color-accent); }
.mb-wtips__i strong { display: block; margin-bottom: 4px; font-size: .95rem; color: var(--mb-ice); }
.mb-wtips__i p { margin: 0; font-size: .85rem; line-height: 1.55; color: #F5F5F0; }