/* inter.css y hero-badges-sitio.css se enlazan en el vía emit_site_public_stylesheets(). */ /* * Authièvre Motors - Estilos Principales * Paleta de colores corporativos */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --neu-font-sans: var(--font-sans); /* Colores corporativos Authièvre Motors */ --color-primary: #ff0000; /* Rojo vibrante */ --color-secondary: #fdc202; /* Amarillo dorado */ --color-neutral: #262626; /* Gris oscuro */ --color-background: #ffffff; /* Blanco puro */ --color-text: #000000; /* Negro puro */ /* Variaciones de colores */ --color-primary-light: #ff3333; --color-primary-dark: #cc0000; --color-secondary-light: #fdd633; --color-secondary-dark: #e6b800; --color-neutral-light: #404040; --color-neutral-dark: #1a1a1a; /* Colores de estado */ --color-success: #28a745; --color-warning: #ffc107; --color-danger: #dc3545; --color-info: #17a2b8; /* Espaciado */ --mobile-padding: 1rem; --tablet-padding: 1.5rem; --desktop-padding: 2rem; /* Tipografía */ --mobile-font-size: 14px; --tablet-font-size: 16px; --desktop-font-size: 18px; } /* Reset y base */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Eliminar flechas de campos numéricos */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } body { font-family: var(--font-sans); font-size: var(--mobile-font-size); line-height: 1.6; color: #ffffff; background: transparent; min-height: 100vh; } /* Inter en todo el sitio (excepto íconos Font Awesome) */ html, body { font-family: var(--font-sans) !important; } * { font-family: var(--font-sans) !important; } .fab, .fas, .far, .fal, .fa, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; } /* Contenedores */ .container { padding: var(--mobile-padding); max-width: 100%; } /* Botones */ .btn { display: inline-block; padding: 12px 16px; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .btn-primary { background-color: var(--color-primary); color: white; } .btn-primary:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); } .btn-secondary { background-color: var(--color-secondary); color: var(--color-text); } .btn-secondary:hover { background-color: var(--color-secondary-dark); transform: translateY(-2px); } /* Responsive */ @media (min-width: 768px) { .container { padding: var(--tablet-padding); } body { font-size: var(--tablet-font-size); } } @media (min-width: 1024px) { .container { padding: var(--desktop-padding); max-width: 1200px; margin: 0 auto; } body { font-size: var(--desktop-font-size); } } /* Estilos adicionales para el nuevo fondo */ main { background-color: transparent; color: var(--color-text); border-radius: 0; margin: 0; padding: 0; box-shadow: none; } .card { background-color: rgba(255, 255, 255, 0.95); color: var(--color-text); border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .bg-light { background-color: rgba(255, 255, 255, 0.9) !important; color: var(--color-text) !important; } /* Contraste AA en textos secundarios (Lighthouse) */ .text-muted { color: #5c5c5c !important; } /* Ajustes para secciones específicas */ .hero-section { background-color: rgba(0, 0, 0, 0.7) !important; color: white !important; } .hero-section h1, .hero-section h2, .hero-section h3, .hero-section p { color: white !important; } /* Estilos para el hero content */ .hero-content { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } .hero-content::before { display: none; } .hero-content .container { position: relative; z-index: 2; } /* ========================== Overlay Scrollbars (fantasma) - Cross-browser (Webkit/Gecko) - No librerías externas - Se muestran en hover o al hacer scroll ========================== */ /* Overlay real no es garantizable en todos los navegadores. Evitamos reservar espacio extra (huecos laterales) */ html { scrollbar-gutter: auto; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(204, 204, 204, 0) transparent; } *:hover { scrollbar-color: rgba(204, 204, 204, 0.5) transparent; } /* Webkit (Chrome/Edge/Safari) */ *::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(204, 204, 204, 0); border-radius: 999px; transition: background-color 0.25s ease; } *:hover::-webkit-scrollbar-thumb { background: rgba(204, 204, 204, 0.5); } /* Evitar flechas visibles en algunos navegadores Webkit */ *::-webkit-scrollbar-button { display: none; } /* Visible durante scroll (clase controlada por JS mínimo) */ .os-scrollbar-show { scrollbar-color: rgba(204, 204, 204, 0.5) transparent; } .os-scrollbar-show::-webkit-scrollbar-thumb { background: rgba(204, 204, 204, 0.5); } /* ========================== Overlay scrollbar visual (no reserva espacio) - Se muestra con JS al hacer scroll - Mantiene track transparente y thumb sutil ========================== */ html, body { scrollbar-width: none; /* Firefox: oculta scrollbar nativa */ } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; } #overlay-scrollbar { position: fixed; top: 0; right: 0; height: 100vh; width: 8px; pointer-events: none; z-index: 99999; opacity: 0; transition: opacity 200ms ease; } #overlay-scrollbar.os-show { opacity: 1; } #overlay-scrollbar-thumb { position: absolute; left: 0; right: 0; background: rgba(204, 204, 204, 0.55); border-radius: 999px; }