/* ═══════ 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 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,"); 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{width:5px;height:5px;border-right:1px solid currentColor; border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px); transition:transform .3s ease,color .18s ease;flex:none;opacity:.7} .lang-switch.open .lang-caret{transform:rotate(-135deg) translateY(-1px)} .lang-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:132px;z-index:1200; background:#FBF9F4;border:1px solid rgba(26,26,26,.12); box-shadow:0 18px 40px -26px rgba(26,26,26,.6); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .3s ease,transform .3s ease,visibility 0s .3s} .lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none; transition:opacity .3s ease,transform .3s ease,visibility 0s 0s} .lang-menu a{display:block;padding:10px 16px;text-decoration:none; font-family:'Quicksand',sans-serif;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:rgba(26,26,26,.72); border-bottom:1px solid rgba(26,26,26,.07);transition:background .25s ease,color .25s ease} .lang-menu a:last-child{border-bottom:none} .lang-menu a:hover{background:rgba(184,151,96,.12);color:#1a1a1a} .lang-menu a.is-current{color:#6E1F25;font-weight:600} .lang-menu a.is-current::before{content:'· ';color:#B89760} /* sobre la portada, donde el menú va en blanco */ body.homepage .lang-current{color:#fff}