/* ═══════════════════════════════════════════════════════════════════ HONDA MOTOS — CSS PROPIO ═══════════════════════════════════════════════════════════════════ Tailwind resuelve el 95% del sitio desde las clases del HTML. Este archivo lleva SOLO lo que Tailwind no puede expresar: 1. CAPA CRÍTICA — carga instantánea, sin esperar al CDN de Tailwind. Evita que el header salte mientras Tailwind compila en el navegador. 2. VARIABLES DE LAYOUT — alto del nav y ancho máximo, que se usan con calc() en varios lugares. 3. COMPONENTES COMPLEJOS — scrollbars, degradados a rayas y transiciones encadenadas que en utilidades serían ilegibles. Regla del proyecto: si se puede hacer con una clase de Tailwind, va en el HTML, no acá. ═══════════════════════════════════════════════════════════════════ */ /* ══ 1. VARIABLES DE LAYOUT ═══════════════════════════════════════ */ :root { --nav-h: 68px; --max: 1280px; } @media (max-width: 768px) { :root { --nav-h: 58px; } } /* ══ 2. CAPA CRÍTICA ══════════════════════════════════════════════ Se aplica antes de que Tailwind termine de compilar. Reserva el espacio del header y fija la tipografía base para que no haya salto. */ html { scroll-behavior: smooth; } body { margin: 0; font-family: "Barlow", system-ui, sans-serif; background: #fff; color: #111; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* El header es transparente sobre el hero, así que solo reservamos su altura para que el contenido no se desplace al compilar. */ #nav { height: var(--nav-h); display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; z-index: 999; background: transparent; transition: background .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1); } /* Dos comportamientos del header, según la página, tal como se aprobaron: - Home (data-nav="fixed"): acompaña el scroll y toma fondo al bajar. - Producto (por defecto): se va con el scroll, porque después aparece la barra sticky del modelo y dos barras fijas se pisarían. */ body[data-nav="fixed"] #nav { position: fixed; } body[data-nav="fixed"] #nav.scrolled { background: rgba(8, 8, 8, .96); backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } /* Los partials entran por JS. Mientras no llegan, el hueco del header ya está reservado y el del footer se mantiene en silencio. */ [data-include]:empty { min-height: var(--nav-h); } [data-include="footer-full"]:empty, [data-include="footer-compact"]:empty { min-height: 0; } /* ══ 3. UTILIDADES DE PROYECTO ════════════════════════════════════ */ /* Contenedor estándar. Es .wrap en los bocetos; se conserva el nombre para que la comparación lado a lado con bocetos/ sea directa. */ .wrap { max-width: var(--max); margin-inline: auto; padding-inline: 22px; } @media (min-width: 768px) { .wrap { padding-inline: 32px; } } @media (min-width: 1024px) { .wrap { padding-inline: 48px; } } /* ══ 4. COMPONENTES COMPLEJOS ═════════════════════════════════════ */ /* ── Scrollbar fina, en cualquier eje ───────────────────────────── */ .scroll-thin { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; } .scroll-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; } .scroll-thin::-webkit-scrollbar-track { background: transparent; } /* ── Carrusel horizontal (galería y accesorios de las páginas de producto) ── */ .scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .scroll-x::-webkit-scrollbar { height: 6px; } .scroll-x::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; } .scroll-x::-webkit-scrollbar-track { background: transparent; } /* Oculta la barra por completo (barra sticky del modelo en móvil) */ .scroll-x--hidden { scrollbar-width: none; } .scroll-x--hidden::-webkit-scrollbar { display: none; } /* ── Placeholder a rayas de los modelos sin foto ────────────────── */ .ph-stripes { background: repeating-linear-gradient(135deg, #191919 0 10px, #212121 10px 20px); } /* ── Fondo degradado de las fotos de modelo del mega-menú ───────── */ .mega-photo-bg { background: linear-gradient(0deg, rgb(209, 209, 209) 0%, rgb(247, 247, 247) 100%); } /* ── Mega-menú: apertura y cierre ───────────────────────────────── */ /* Son tres elementos que transicionan juntos (panel, backdrop y chevron del trigger). Encadenarlos con utilidades sería frágil. */ .mega-panel { opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .28s ease, transform .28s ease; } .mega-panel.is-open { opacity: 1; pointer-events: all; transform: translateY(0); } .mega-backdrop { opacity: 0; pointer-events: none; transition: opacity .25s ease; } .mega-backdrop.is-open { opacity: 1; pointer-events: all; } /* Los modelos se muestran en grilla y se reacomodan en varias filas aprovechando el alto de la caja. La columna de categorías mide unos 700px, así que el panel derecho tiene espacio vertical de sobra: desplazarse en horizontal con flechas dejaba media caja vacía. */ .mega-cat-section { display: none; } .mega-cat-section.is-visible { display: grid; } .mega-trigger svg { transition: transform .18s; } .mega-trigger.is-active svg { transform: rotate(180deg); } /* ── Drawer móvil ───────────────────────────────────────────────── */ .mobile-drawer { transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .mobile-drawer.is-open { transform: translateX(0); } /* Burger → X */ .burger span { transition: transform .25s, opacity .2s; } .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Reveal on scroll ───────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ══ 5. PÁGINAS DE PRODUCTO ═══════════════════════════════════════ Lo que las páginas de modelo necesitan y una utilidad no expresa. Se agrega a medida que cada sección lo pide; si algo se puede escribir en el HTML, se escribe en el HTML. */ /* ── Hero: zoom lento del fondo al terminar de cargar ───────────── */ /* Son dos estados encadenados sobre el mismo elemento (escala inicial + transición de 8s que dispara js/producto.js al añadir .cargado). En utilidades habría que escribir la transición y el estado final en dos lugares distintos. */ .hero-zoom { transform: scale(1.04); transition: transform 8s ease; } .cargado .hero-zoom { transform: scale(1); } /* ── Select del formulario de cotización ────────────────────────── */ /* Dos cosas que una utilidad no alcanza: la flecha como data-URI (entre llaves de Tailwind quedaría ilegible, y el SVG lleva comillas y #) y el color de las