/* ============================================================================ site-nav.css — ÚNICA fuente de verdad de la cabecera/navegación de Carricoche. La usa la home (inyectada por el bootstrap de index.html) y TODAS las páginas públicas. El markup canónico es

…

. Sin JavaScript: el menú móvil es un

nativo. - Home: sin clase -> navbar fija, fondo transparente que se vuelve sólido al hacer scroll (lo pinta hero-redesign.js vía --cc-scroll-progress). - Resto de páginas: -> navbar sticky y sólida desde arriba (no hay hero detrás) + flecha .cc-site-back para volver. ========================================================================== */ :root { --cc-hero-paper: #f4eddd; --cc-hero-ink: #201811; --cc-hero-accent: var(--accent, #6e2430); --cc-hero-blue: #17384c; } .cc-inminer-hero__navbar { position: fixed; z-index: 50; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; /* Background/border stay edge-to-edge (full width); the nav content itself is capped to the same 2400px column as the hero stage, via padding, so both line up instead of the links drifting off to one corner on wide monitors. */ padding: 22px max(clamp(34px, 3.4vw, 54px), calc((100vw - 2400px) / 2)); background: rgba(244, 237, 221, calc(var(--cc-scroll-progress, 0) * 0.96)); backdrop-filter: blur(calc(var(--cc-scroll-progress, 0) * 10px)); -webkit-backdrop-filter: blur(calc(var(--cc-scroll-progress, 0) * 10px)); border-bottom: 1px solid rgba(32, 24, 17, calc(var(--cc-scroll-progress, 0) * 0.16)); } .cc-inminer-hero__nav { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 38px); font-family: 'Raleway', Arial, sans-serif; } .cc-inminer-hero__nav a { position: relative; padding: 14px 4px; color: #5e5447; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; transition: color 180ms ease, transform 180ms ease; } .cc-inminer-hero__nav a:hover, .cc-inminer-hero__nav a:focus-visible, .cc-inminer-hero__nav a.is-active { color: var(--cc-hero-accent); transform: translateY(-1px); } .cc-inminer-hero__nav a.is-active::after { content: ''; position: absolute; right: 4px; bottom: 5px; left: 4px; height: 2px; background: var(--cc-hero-accent); } .cc-inminer-hero__nav a.cc-inminer-hero__nav-pill { margin-left: 4px; padding: 11px 16px; border: 1px solid rgba(32, 24, 17, 0.12); border-radius: 999px; color: var(--cc-hero-ink); background: rgba(255, 255, 255, 0.72); text-transform: none; box-shadow: 0 0 0 rgba(32, 24, 17, 0); transition: color 180ms ease, transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .cc-inminer-hero__nav a.cc-inminer-hero__nav-pill:hover, .cc-inminer-hero__nav a.cc-inminer-hero__nav-pill:focus-visible { color: var(--cc-hero-ink); background: #fff; border-color: rgba(32, 24, 17, 0.22); transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 22px rgba(32, 24, 17, 0.16); } .cc-inminer-hero__nav a:focus-visible, .cc-inminer-hero__mobile-menu summary:focus-visible, .cc-site-back:focus-visible { outline: 2px solid var(--cc-hero-accent); outline-offset: 4px; } .cc-inminer-hero__mobile-menu { display: none; } /* ---- Modo página interna: sticky + sólida desde arriba, y flecha de volver --- */ body.cc-site-nav .cc-inminer-hero__navbar { position: sticky; background: rgba(244, 237, 221, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(32, 24, 17, 0.16); } .cc-site-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 10px clamp(14px, 3.4vw, 40px) 0; color: #8a8175; transition: color 180ms ease, transform 180ms ease; } .cc-site-back svg { width: 22px; height: 22px; display: block; } .cc-site-back:hover, .cc-site-back:focus-visible { color: var(--cc-hero-accent); transform: translateX(-3px); } /* ---- Tablet: nav un poco más compacta (igual que la home) ---- */ @media (max-width: 1120px) and (min-width: 821px) { .cc-inminer-hero__nav { gap: 18px; } .cc-inminer-hero__nav a { font-size: 10px; } } /* ---- Móvil: se oculta la nav horizontal y aparece el menú

---- */ @media (max-width: 820px) { .cc-inminer-hero__navbar { justify-content: flex-start; padding: 14px 16px; } .cc-inminer-hero__nav { display: none; } .cc-inminer-hero__mobile-menu { position: relative; z-index: 10; display: block; } .cc-inminer-hero__mobile-menu summary { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(32, 24, 17, 0.18); border-radius: 14px; color: var(--cc-hero-ink); background: rgba(255, 255, 255, 0.18); cursor: pointer; list-style: none; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease; } .cc-inminer-hero__mobile-menu summary:hover, .cc-inminer-hero__mobile-menu summary:focus-visible { background: #fff; border-color: rgba(32, 24, 17, 0.3); transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px rgba(32, 24, 17, 0.18); } .cc-inminer-hero__mobile-menu[open] summary { background: #fff; box-shadow: 0 10px 22px rgba(32, 24, 17, 0.18); } .cc-inminer-hero__mobile-menu summary::-webkit-details-marker { display: none; } .cc-inminer-hero__mobile-menu summary img { width: 29px; height: 29px; } .cc-inminer-hero__mobile-menu > nav { position: absolute; top: 64px; left: 0; width: min(280px, calc(100vw - 44px)); display: grid; padding: 12px; border: 1px solid rgba(32, 24, 17, 0.15); border-radius: 12px; background: #fffaf1; box-shadow: 0 18px 46px rgba(32, 24, 17, 0.16); } .cc-inminer-hero__mobile-menu nav a { padding: 13px 11px; border-radius: 8px; border-bottom: 1px solid rgba(32, 24, 17, 0.1); color: var(--cc-hero-ink); font-family: 'Raleway', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, letter-spacing 180ms ease; } .cc-inminer-hero__mobile-menu nav a:hover, .cc-inminer-hero__mobile-menu nav a:focus-visible { color: var(--cc-hero-accent); background: rgba(110, 36, 48, 0.07); transform: translateX(3px); letter-spacing: 0.11em; } .cc-inminer-hero__mobile-menu nav a:last-child { border-bottom: 0; color: var(--cc-hero-accent); } } @media (prefers-reduced-motion: reduce) { .cc-inminer-hero__navbar, .cc-inminer-hero__navbar *, .cc-inminer-hero__navbar *::before, .cc-inminer-hero__navbar *::after, .cc-site-back { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } }