/* ════════════════════════════════════════════════ encabezado.css — Universolibro Mobile-first · Menú hamburguesa 100% CSS ════════════════════════════════════════════════ BREAKPOINTS: móvil → < 640px tablet → ≥ 640px desktop → ≥ 768px LÓGICA CSS-ONLY: #menu-toggle (checkbox) es el primer hijo de . Sus siblings directos ~ son .nav-overlay y .nav-panel. :checked activa el overlay y desliza el panel. ════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════ 1. CHECKBOX DE ESTADO — completamente oculto ════════════════════════════════════════════════ */ .menu-toggle { position: fixed; opacity: 0; width: 0; height: 0; pointer-events: none; z-index: -1; } /* ════════════════════════════════════════════════ 2. OVERLAY — fondo oscuro detrás del panel ════════════════════════════════════════════════ */ .nav-overlay { display: block; position: fixed; inset: 0; z-index: 900; background: transparent; visibility: hidden; cursor: default; /* Transición: visible → invisible con delay en visibility */ transition: background var(--tr-l), visibility 0s linear var(--tr-l); } /* Menú abierto → overlay oscuro */ .menu-toggle:checked ~ .nav-overlay { background: rgba(0,0,0,.52); visibility: visible; transition: background var(--tr-l), visibility 0s; } /* Sin panel en escritorio */ @media (min-width: 768px) { .nav-overlay { display: none !important; } } /* ════════════════════════════════════════════════ 3. PANEL LATERAL — desliza desde la derecha ════════════════════════════════════════════════ */ .nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: min(86vw, 320px); display: flex; flex-direction: column; overflow: hidden; background: var(--c-fondo); box-shadow: var(--sh-xl); /* Estado cerrado: fuera de pantalla + invisible */ transform: translateX(100%); visibility: hidden; transition: transform var(--tr-l), visibility 0s linear var(--tr-l); } /* Estado abierto */ .menu-toggle:checked ~ .nav-panel { transform: translateX(0); visibility: visible; transition: transform var(--tr-l), visibility 0s; } /* Sin panel en escritorio */ @media (min-width: 768px) { .nav-panel { display: none !important; } } /* ── Cabecera del panel ── */ .nav-panel__cabecera { display: flex; align-items: center; justify-content: space-between; padding: var(--s-md) var(--s-lg); background: var(--c-rojo); flex-shrink: 0; } .nav-panel__marca { font-family: var(--f-titulo); font-weight: 900; font-size: var(--t-lg); color: #fff; letter-spacing: -0.01em; } .nav-panel__cerrar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; /* área táctil */ border-radius: var(--r-sm); color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); cursor: pointer; transition: background var(--tr-r), color var(--tr-r); } .nav-panel__cerrar:hover, .nav-panel__cerrar:focus-visible { background: rgba(255,255,255,.28); color: #fff; } /* ── Cuerpo scrolleable ── */ .nav-panel__cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--c-borde) transparent; } /* ── Título de grupo ── */ .nav-panel__grupo { padding: var(--s-xs) var(--s-lg); font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-xs); color: var(--c-texto-tenue); letter-spacing: .09em; text-transform: uppercase; background: var(--c-fondo-suave); border-bottom: 1px solid var(--c-borde-suave); } /* ── Enlace del panel ── */ .nav-panel__enlace { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-md) var(--s-lg); font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-base); color: var(--c-texto); border-bottom: 1px solid var(--c-borde-suave); transition: background var(--tr-r), color var(--tr-r), padding-left var(--tr-r); } .nav-panel__enlace:hover, .nav-panel__enlace:focus-visible { background: var(--c-fondo-suave); color: var(--c-rojo); padding-left: calc(var(--s-lg) + var(--s-xs)); } .nav-panel__ico { font-size: 1.1rem; flex-shrink: 0; width: 26px; text-align: center; } .nav-panel__flecha { margin-left: auto; flex-shrink: 0; color: var(--c-texto-tenue); transition: transform var(--tr-r), color var(--tr-r); } .nav-panel__enlace:hover .nav-panel__flecha, .nav-panel__enlace:focus-visible .nav-panel__flecha { transform: translateX(3px); color: var(--c-rojo); } /* Divisor entre grupos */ .nav-panel__divisor { margin: var(--s-xs) 0; border-top-color: var(--c-borde); } /* ── Animación escalonada de ítems al abrir ── */ @media (prefers-reduced-motion: no-preference) { .menu-toggle:checked ~ .nav-panel .nav-panel__enlace { animation: item-entra 0.28s var(--tr-n) both; } /* nth-child cubre los 10 ítems del panel */ .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(1) { animation-delay: .05s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(2) { animation-delay: .08s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(3) { animation-delay: .11s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(4) { animation-delay: .14s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(5) { animation-delay: .17s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(6) { animation-delay: .20s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(7) { animation-delay: .23s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(8) { animation-delay: .26s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(9) { animation-delay: .29s } .menu-toggle:checked ~ .nav-panel .nav-panel__enlace:nth-child(10) { animation-delay: .32s } } @keyframes item-entra { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: translateX(0) } } /* ── Pie del panel: CTA WhatsApp ── */ .nav-panel__pie { padding: var(--s-md) var(--s-lg); border-top: 1px solid var(--c-borde); background: var(--c-fondo-suave); flex-shrink: 0; } .nav-panel__ws { display: flex; align-items: center; justify-content: center; gap: var(--s-sm); width: 100%; padding: 0.7rem var(--s-md); background: var(--c-verde-ws); color: #fff; font-family: var(--f-titulo); font-weight: 800; font-size: var(--t-base); border-radius: var(--r-md); transition: background var(--tr-r), transform var(--tr-r), box-shadow var(--tr-r); } .nav-panel__ws:hover, .nav-panel__ws:focus-visible { background: var(--c-verde-ws-h); box-shadow: 0 4px 14px rgba(37,211,102,.38); transform: translateY(-1px); } .nav-panel__ws:active { transform: translateY(0); } .nav-panel__nota { margin-top: var(--s-xs); text-align: center; font-size: var(--t-xs); color: var(--c-texto-tenue); } /* ════════════════════════════════════════════════ 4. ENCABEZADO ════════════════════════════════════════════════ */ .encabezado { position: sticky; top: 0; z-index: 500; width: 100%; background: var(--c-fondo); border-bottom: 1px solid var(--c-borde); box-shadow: var(--sh-sm); transition: box-shadow var(--tr-n); } /* Sombra más profunda al hacer scroll (clase añadida por JS) */ .encabezado--scroll { box-shadow: var(--sh-md); } /* ════════════════════════════════════════════════ 5. FILA SUPERIOR: logo · buscador · whatsapp ════════════════════════════════════════════════ */ .enc-fila { display: flex; align-items: center; gap: var(--s-sm); height: var(--h-enc-fila); } /* ════════════════════ LOGO ════════════════════ ESTRATEGIA: • La es el logo. Siempre visible si la ruta existe. • El eslogan en texto es aria-hidden="true" → solo decorativo. • Si la imagen falla → onerror muestra el SVG inline #logo-svg. • Sin texto "Universolibro" visible en ningún momento (vive solo en el alt de la img para lectores de pantalla). */ /* LOGO — columna vertical: ┌─────────────┐ │ [IMAGEN] │ ← protagonista, tamaño libre │ eslogan │ ← debajo, solo desde 640px └─────────────┘ */ .enc-logo { display: flex; flex-direction: column; /* imagen arriba · eslogan abajo */ align-items: flex-start; justify-content: center; flex-shrink: 0; min-height: 44px; gap: 2px; } /* Imagen del logo: sin restricción de tamaño externa, su propio ancho/alto natural manda */ .enc-logo__img { width: auto; height: clamp(44px, 6vw, 64px); /* solo altura fluida */ max-width: none; object-fit: contain; flex-shrink: 0; display: block; } /* SVG de respaldo — oculto hasta que la img falle */ .enc-logo__svg { flex-shrink: 0; } /* Bloque que contiene el eslogan */ .enc-logo__bloque { display: none; /* oculto en móvil */ } /* Eslogan: solo texto, no compite con la imagen */ .enc-logo__eslogan { display: block; font-family: var(--f-cuerpo); font-size: clamp(0.62rem, 0.9vw, 0.72rem); line-height: 1; color: var(--c-texto-tenue); white-space: nowrap; } /* Desde 640px: mostrar eslogan debajo del logo */ @media (min-width: 640px) { .enc-logo__bloque { display: block; } } /* ════════════════════ BUSCADOR ════════════════════ */ .enc-busqueda { flex: 1; /* ocupa el espacio disponible */ min-width: 0; position: relative; display: flex; align-items: center; } /* Lupa: posicionada sobre el campo */ .enc-busqueda__lupa { position: absolute; left: clamp(0.5rem, 1.5vw, 0.75rem); top: 50%; transform: translateY(-50%); color: var(--c-texto-tenue); pointer-events: none; flex-shrink: 0; } /* Campo de búsqueda */ .enc-busqueda__campo { width: 100%; /* Altura fluida */ height: clamp(38px, 5vw, 46px); /* Espacio para lupa izquierda y botón derecha */ padding-left: clamp(2rem, 4vw, 2.25rem); padding-right: clamp(5rem, 8vw, 6.5rem); padding-block: 0; font-family: var(--f-cuerpo); font-size: var(--t-sm); color: var(--c-texto); background: var(--c-fondo-suave); border: 1.5px solid var(--c-borde); border-radius: var(--r-pill); outline: none; transition: border-color var(--tr-r), box-shadow var(--tr-r), background var(--tr-r); } .enc-busqueda__campo::placeholder { color: var(--c-texto-tenue); } /* Estado foco: contraste WCAG AA */ .enc-busqueda__campo:focus { border-color: var(--c-rojo); background: var(--c-fondo); box-shadow: 0 0 0 3px rgba(139,0,0,.14); } /* Botón "Buscar" — a la derecha del campo */ .enc-busqueda__boton { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: clamp(30px, 4vw, 36px); padding-inline: clamp(0.625rem, 1.5vw, 1rem); font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-xs); color: #fff; background: var(--c-rojo); border-radius: var(--r-pill); white-space: nowrap; min-width: auto; /* override del reset de área táctil */ min-height: auto; transition: background var(--tr-r), transform var(--tr-r); } .enc-busqueda__boton:hover, .enc-busqueda__boton:focus-visible { background: var(--c-rojo-hover); } .enc-busqueda__boton:active { transform: translateY(-50%) scale(0.97); } /* ════════════════════ WHATSAPP ════════════════════ Oculto en móvil (< 768px) Visible desde tablet/desktop */ .enc-whatsapp { display: none; /* móvil: oculto */ align-items: center; gap: var(--s-xs); flex-shrink: 0; height: clamp(38px, 5vw, 46px); padding-inline: clamp(0.75rem, 1.5vw, 1.125rem); font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sm); color: #fff; background: var(--c-verde-ws); border-radius: var(--r-pill); white-space: nowrap; transition: background var(--tr-r), box-shadow var(--tr-r), transform var(--tr-r); } .enc-whatsapp:hover, .enc-whatsapp:focus-visible { background: var(--c-verde-ws-h); box-shadow: 0 4px 12px rgba(37,211,102,.35); transform: translateY(-1px); } .enc-whatsapp:active { transform: translateY(0); } @media (min-width: 768px) { .enc-whatsapp { display: flex; } } /* ════════════════════════════════════════════════ 6. BARRA DE NAVEGACIÓN SECUNDARIA ════════════════════════════════════════════════ */ .enc-nav { background: var(--c-rojo); height: var(--h-enc-nav); overflow: hidden; } .enc-nav__lista { display: flex; align-items: center; height: 100%; gap: 0; overflow-x: auto; scrollbar-width: none; } .enc-nav__lista::-webkit-scrollbar { display: none; } /* En desktop: ítems centrados */ @media (min-width: 768px) { .enc-nav__lista { justify-content: center; } } /* ── Ítem de navegación ── */ .enc-nav__item { display: inline-flex; align-items: center; height: var(--h-enc-nav); /* Padding fluido */ padding-inline: clamp(0.5rem, 1.8vw, 1rem); font-family: var(--f-titulo); font-weight: 700; font-size: clamp(0.72rem, 1vw, 0.8125rem); color: rgba(255,255,255,.88); white-space: nowrap; position: relative; transition: color var(--tr-r), background var(--tr-r); } /* Línea dorada inferior en hover/focus */ .enc-nav__item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--c-amarillo); transform: scaleX(0); transform-origin: center; transition: transform var(--tr-n); } .enc-nav__item:hover, .enc-nav__item:focus-visible { color: #fff; background: rgba(255,255,255,.10); } .enc-nav__item:hover::after, .enc-nav__item:focus-visible::after { transform: scaleX(1); } /* En móvil: ítems de categoría ocultos, solo hamburguesa */ @media (max-width: 767px) { .enc-nav__lista > li:not(.enc-nav__ham-wrap) { display: none; } } /* ════════════════════════════════════════════════ 7. HAMBURGUESA — solo en < 768px ════════════════════════════════════════════════ */ /* Wrapper empuja la hamburguesa a la derecha */ .enc-nav__ham-wrap { margin-left: auto; display: flex; align-items: center; /* Ocultar en escritorio */ } @media (min-width: 768px) { .enc-nav__ham-wrap { display: none; } } /* Label que actúa como botón */ .enc-hamburguesa { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; /* área táctil mínima */ height: 44px; cursor: pointer; border-radius: var(--r-sm); transition: background var(--tr-r); } .enc-hamburguesa:hover { background: rgba(255,255,255,.15); } /* Las tres líneas */ .enc-hamburguesa__l { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transform-origin: center; transition: transform var(--tr-n), opacity var(--tr-r), width var(--tr-n); } /* Animación a X cuando el menú está abierto (selector ~ funciona porque encabezado es sibling del checkbox) */ .menu-toggle:checked ~ .encabezado .enc-hamburguesa__l:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle:checked ~ .encabezado .enc-hamburguesa__l:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-toggle:checked ~ .encabezado .enc-hamburguesa__l:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ════════════════════════════════════════════════ 8. MODO OSCURO — ajustes del encabezado ════════════════════════════════════════════════ */ [data-tema="oscuro"] .encabezado { background: var(--c-fondo); border-color: var(--c-borde); } [data-tema="oscuro"] .enc-busqueda__campo { background: var(--c-fondo-suave); color: var(--c-texto); border-color: var(--c-borde); } [data-tema="oscuro"] .enc-busqueda__campo:focus { background: #1E1E1E; } [data-tema="oscuro"] .nav-panel { background: var(--c-fondo); } [data-tema="oscuro"] .nav-panel__cabecera { background: var(--c-rojo-oscuro); } [data-tema="oscuro"] .nav-panel__enlace { border-color: var(--c-borde); } [data-tema="oscuro"] .nav-panel__enlace:hover { background: var(--c-fondo-suave); }