/* ═══════ CONTACT PANEL — full-viewport sliding behavior (same as home) ═══════ */
@media (min-width: 1024px) {
    footer.contactPanel > div {
        width: 100vw !important;
        right: -100vw !important;
    }
    .openContact .contactPanel > div,
    body.openContact .contactPanel > div {
        right: 0 !important;
    }
}

/* Kill the black translucent backdrop — the full-viewport panel makes it redundant
   and on some pages it was sitting on top of (or competing visually with) the panel. */
.bgContactPanel,
body.openContact .bgContactPanel,
.openContact .bgContactPanel {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    right: -100% !important;
}

/* ═══════ TOP MENU: Quicksand font, black text, no underlines, no active indicator, UK flag for English ═══════
   El oro del ratón. Los rótulos se tiñen de #c5ad91 al pasar por encima, con
   un fundido de 0,18 s: lo justo para que se vea el cambio y no para que el
   menú parezca lento. Con el botón apretado el oro baja un punto, y el enlace
   ya visitado se queda en negro —aquí no hay nada que marcar como leído—.
   Los dos iconos de la derecha (Instagram y área privada) no entran: su
   rótulo va a cuerpo 0 y lo que se ve es un SVG de fondo, que ya tiene su
   propio hover en js/follow-panel.js. */

.menu-container .menu-items a,
.menu-container .menu-items .menu-item,
.menu-container .menu-items span,
.menu-mobile a,
.menu-mobile .menu-item {
    font-family: 'Quicksand', sans-serif !important;
    color: #000000 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration-line: none !important;
    transition: color 0.18s ease !important;
}

/* el oro, al pasar por encima o al llegar con el tabulador */
.menu-container .menu-items a:hover,
.menu-container .menu-items a:focus,
.menu-container .menu-items .menu-item:hover,
.menu-container .menu-items .menu-item:focus,
.menu-container .menu-items span:hover,
.menu-container .menu-items span:focus,
.menu-container .menu-items .lang-switch:hover .lang-current,
.menu-container .menu-items .lang-switch:hover .lang-current span,
.menu-container .menu-items .lang-switch:hover .lang-caret,
.menu-container .menu-items .lang-current:focus-visible,
.menu-container .menu-items .lang-current:focus-visible span,
.menu-mobile a:hover,
.menu-mobile a:focus,
.menu-mobile .menu-item:hover {
    color: #c5ad91 !important;
}

/* con el botón apretado, un oro más bajo */
.menu-container .menu-items a:active,
.menu-container .menu-items .menu-item:active,
.menu-container .menu-items span:active,
.menu-mobile a:active {
    color: #a98d67 !important;
}

/* visitado: negro, como el resto */
.menu-container .menu-items a:visited,
.menu-mobile a:visited {
    color: #000000 !important;
}

/* sin subrayados en ningún estado */
.menu-container .menu-items a:hover,
.menu-container .menu-items a:focus,
.menu-container .menu-items a:active,
.menu-container .menu-items a:visited,
.menu-container .menu-items .menu-item:hover,
.menu-container .menu-items .menu-item:focus,
.menu-container .menu-items span:hover,
.menu-mobile a:hover,
.menu-mobile a:focus,
.menu-mobile a:active,
.menu-mobile a:visited,
.menu-mobile .menu-item:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration-line: none !important;
}

/* El selector de idioma es un botón, no un enlace, así que no lo alcanzan las
   reglas de arriba: la sigla hereda su color y la flecha va con currentColor,
   de modo que los dos se tiñen a la vez que el botón. */
.menu-container .menu-items .lang-current,
.menu-container .menu-items .lang-current span {
    transition: color 0.18s ease !important;
}

/* Kill the ::after that the inline Tailwind classes use as the "active page" indicator line */
.menu-container .menu-items a::after,
.menu-container .menu-items .menu-item::after,
.menu-container .menu-items span::after,
.menu-mobile a::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* Replace "English" text with a UK flag icon — works on .menu-flag-en (span trigger)
   and also on legacy <a href="home_en.html"> for backwards compatibility. */
.menu-container .menu-flag-en,
.menu-container a[href$="home_en.html"] {
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}
.menu-container .menu-flag-en::before,
.menu-container a[href$="home_en.html"]::before {
    content: '';
    display: inline-block;
    width: 26px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><path d='M0 0h60v30H0z' fill='%23012169'/><path d='M0 0l60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/><path d='M0 0l60 30M60 0L0 30' stroke='%23C8102E' stroke-width='4'/><path d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/><path d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/></svg>");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.menu-container .menu-flag-en:hover::before,
.menu-container a[href$="home_en.html"]:hover::before {
    transform: scale(1.08);
}


/* ═══════════════════════════════════════════════════════════════════
   LOGO DE CABECERA
   El wordmark de Valdecamellas tiene proporcion 5,08:1 frente al 4,3:1
   del logotipo anterior, de modo que al mismo ancho ocupa mas esquina.
   Se reduce para que respire y no compita con el menu.
   ═══════════════════════════════════════════════════════════════════ */
.logo_head,
.logo_head_black{max-width:176px!important}
@media (min-width:1280px){
  .logo_head,
  .logo_head_black{max-width:194px!important}
}
@media (max-width:1023px){
  .logo_head,
  .logo_head_black{max-width:148px!important}
}


/* ═══════════════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA
   Ocupa el sitio del antiguo rótulo "English", que no cambiaba de
   idioma sino que abría el panel de contacto.
   ═══════════════════════════════════════════════════════════════════ */
.lang-switch{position:relative;display:inline-block;margin:0 .75rem;vertical-align:middle}
.lang-current{display:inline-flex;align-items:center;gap:6px;background:none;border:none;
  padding:0 0 .1rem;cursor:pointer;font-family:'Quicksand',sans-serif;font-size:14px;
  letter-spacing:.06em;color:inherit;line-height:1}
.lang-caret{display:none}      /* ya no hay desplegable que anunciar: la sigla abre la ventana */
.lang-menu{display:none!important}  /* el desplegable de antes, por si queda alguno en caché */
/* sobre la portada, donde el menú va en blanco */
body.homepage .lang-current{color:#fff}

/* ══ LA VENTANA DE IDIOMA ══════════════════════════════════
   En un teléfono el desplegable era un menú minúsculo colgando de una
   sigla de dos letras: se abría medio fuera de la vista, se cerraba al
   primer roce y tenía aire de menú de hace quince años. Aquí se abre en
   el centro de la pantalla, con los tres idiomas en su propia lengua y
   sitio de sobra para el dedo. La monta js/lang-switch.js. Desde el
   01-10-2026 también en escritorio: el desplegable no gustaba, y en El
   vuelo se quedaba por debajo de las capas de la escena. Va por encima
   de todo salvo la cortina de las transiciones (100000). */
html.lang-abierta { overflow: hidden; }
.lang-modal {
    position: fixed;
    inset: 0;
    z-index: 99000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 17, 14, .55);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .28s ease;
}
.lang-modal[hidden] { display: none; }
.lang-modal.abierta { opacity: 1; }

.lang-modal-caja {
    position: relative;
    box-sizing: border-box;          /* igual en todas las páginas, lleven Tailwind o no */
    width: 100%;
    max-width: 340px;
    padding: 34px 26px 26px;
    background: #FAF7EE;
    border: 1px solid rgba(184, 151, 96, .55);
    box-shadow: 0 24px 60px rgba(20, 17, 14, .28);
    transform: translateY(10px) scale(.98);
    transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.lang-modal.abierta .lang-modal-caja { transform: none; }

.lang-modal-titulo {
    margin: 0 0 18px;
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #8A6F3C;
    text-align: center;
}

/* cada idioma, un renglón alto: se elige con el dedo, no con el ratón */
.lang-modal-caja > a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 4px 14px;
    border-top: 1px solid rgba(26, 26, 26, .09);
    text-decoration: none;
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
    transition: color .22s ease, -webkit-text-fill-color .22s ease;
}
.lang-modal-caja > a:last-of-type { border-bottom: 1px solid rgba(26, 26, 26, .09); }
.lang-modal-caja > a .lm-nombre {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px;
    line-height: 1;
}
.lang-modal-caja > a .lm-cod {
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(26, 26, 26, .42);
    -webkit-text-fill-color: rgba(26, 26, 26, .42);
}
.lang-modal-caja > a:hover,
.lang-modal-caja > a:focus-visible {
    color: #6E1F25;
    -webkit-text-fill-color: #6E1F25;
}
.lang-modal-caja > a:focus-visible { outline: 2px solid #6E1F25; outline-offset: 2px; }

/* el que ya está puesto: con su punto de oro delante */
.lang-modal-caja > a.is-current .lm-nombre { color: #8A6F3C; -webkit-text-fill-color: #8A6F3C; }
.lang-modal-caja > a.is-current .lm-nombre::before {
    content: '· ';
    color: #B89760;
    -webkit-text-fill-color: #B89760;
}

.lang-modal-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(26, 26, 26, .5);
    cursor: pointer;
    transition: color .22s ease;
}
.lang-modal-cerrar svg { width: 18px; height: 18px; display: block; }
.lang-modal-cerrar:hover { color: #6E1F25; }
.lang-modal-cerrar:focus-visible { outline: 2px solid #6E1F25; outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
    .lang-modal, .lang-modal-caja { transition: none; }
    .lang-modal-caja { transform: none; }
}


/* ══ EL GLOBO DEL IDIOMA ═══════════════════════════════════
   En el cajon movil la sigla «ES» quedaba al lado del icono redondo de
   Instagram sin decir gran cosa y sin pegar con el. Alli el boton pasa a
   ser un globo terraqueo, del mismo cuerpo que el otro icono, y la
   pastilla se vuelve un circulo igual. En escritorio se queda la sigla,
   que ahi hay sitio y es mas informativa.

   La sigla no se borra, se aparta de la vista: es lo que dice el idioma
   que hay puesto, y el globo no puede decirlo. */
.lang-globo { display: none; }

@media (hover: none), (pointer: coarse), (max-width: 900px) {
    .lang-globo { display: block; width: 18px; height: 18px; }
    .lang-current .lang-sigla,
    .lang-current .lang-caret {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .lang-current { gap: 0; }
}


/* ══ EL MENÚ QUE CABE ══════════════════════════════════════
   js/follow-panel.js mide el hueco entre el logo y el borde y pone en
   --menu-fs la letra que cabe. Todo lo del menú cuelga de ella: el
   cuerpo de los rótulos, el aire entre ellos (en em, antes eran 12 px
   fijos) y la sigla del idioma. Un solo renglón siempre. Si ni así
   cabe, body.menu-plegado lo cambia por la barra con hamburguesa. */
@media (min-width: 1024px) {
    .menu-container .menu-items {
        font-size: var(--menu-fs, 16px) !important;
        white-space: nowrap !important;
    }
    .menu-container .menu-items > a.menu-item:not(.menu-instagram):not(.menu-private) {
        font-size: 1em !important;
        letter-spacing: var(--menu-ls, .2em) !important;
        margin-left: var(--menu-mx, .75em) !important;
        margin-right: var(--menu-mx, .75em) !important;
    }
    .menu-container .lang-switch { margin: 0 var(--menu-mx, .75em) !important; }
    .menu-container .lang-current { font-size: .875em !important; }
}
body.menu-plegado .menu-container,
body.menu-plegado main > a[href="index.html"][data-no-swup],
body.menu-plegado .marca-sitio,
body.menu-plegado nav.menu-mobile { display: none !important; }
body.menu-plegado .mm-bar { display: flex !important; }

/* ══ «EL VUELO», FUERA DEL MENÚ ═══════════════════════════
   Decisión de Edu (30-09-2026): la entrada «El vuelo» no se enseña en el
   menú ni en el cajón del móvil. A la página se llega por su secreto: tres
   clics seguidos sobre el milano que cruza a veces La Casa (winery_en.html)
   la abren. La página sigue publicada en vuelo.html. */
.menu-container a[href$="vuelo.html"],
.mm-drawer a[href$="vuelo.html"],
.menu-mobile a[href$="vuelo.html"] { display: none !important; }