/* ================================================================ JH TALLER MULTIMARCA — Hoja de estilos principal Enfoque: mobile-first (los estilos base son para móvil y los @media amplían hacia pantallas grandes). Dirección visual: "garage premium" — carbón + rojo + blanco. ================================================================ */ /* ---------------------------------------------------------------- 1. VARIABLES DE DISEÑO Toda la identidad visual sale de aquí: si un día quieres ajustar el tono de rojo, lo cambias en UNA línea. ---------------------------------------------------------------- */ :root { /* Colores corporativos */ --rojo: #e10600; /* rojo racing: botones, acentos, titulares clave */ --rojo-oscuro: #b00500; /* hover de botones y degradados */ --negro: #0d0d0f; /* fondo principal */ --carbon: #16161a; /* fondo de secciones alternas */ --carbon-claro: #1f1f26; /* tarjetas y superficies elevadas */ --blanco: #ffffff; --gris-texto: #b8b8c0; /* texto secundario sobre fondo oscuro */ --borde: rgba(255, 255, 255, 0.08); /* bordes sutiles de tarjetas */ /* Tipografías (cargadas en el ) */ --fuente-titulos: 'Archivo Black', 'Arial Black', sans-serif; --fuente-cuerpo: 'Inter', 'Segoe UI', Arial, sans-serif; /* Medidas reutilizables */ --ancho-maximo: 1120px; /* ancho máximo del contenido */ --radio: 12px; /* redondeo estándar de tarjetas y botones */ --altura-header: 64px; /* Sombra roja para dar "brillo" a los CTA */ --sombra-cta: 0 4px 24px rgba(225, 6, 0, 0.35); } /* ---------------------------------------------------------------- 2. RESET BÁSICO Y ESTILOS GLOBALES ---------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* scroll suave al pulsar anclas del menú */ scroll-padding-top: var(--altura-header); /* compensa el header fijo al navegar por anclas */ } body { font-family: var(--fuente-cuerpo); background-color: var(--negro); color: var(--blanco); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* Contenedor centrado que usan todas las secciones */ .contenedor { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: 20px; } /* Accesibilidad: si el usuario tiene activado "reducir movimiento" en su sistema, desactivamos todas las animaciones. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ---------------------------------------------------------------- 3. BOTONES Grandes y pulsables con el dedo (mínimo 48px de alto en táctil). --principal = rojo (pedir cita por chat, el CTA estrella) --secundario = borde blanco (llamar, opción secundaria) ---------------------------------------------------------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: none; border-radius: var(--radio); font-family: var(--fuente-cuerpo); font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .boton:active { transform: scale(0.97); /* feedback táctil al pulsar */ } .boton--principal { background-color: var(--rojo); color: var(--blanco); box-shadow: var(--sombra-cta); } .boton--principal:hover { background-color: var(--rojo-oscuro); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(225, 6, 0, 0.5); } .boton--secundario { background-color: transparent; color: var(--blanco); border: 2px solid rgba(255, 255, 255, 0.3); } .boton--secundario:hover { border-color: var(--blanco); background-color: rgba(255, 255, 255, 0.06); } /* Versión grande para el hero */ .boton--grande { min-height: 56px; padding: 14px 28px; font-size: 1.05rem; } /* ---------------------------------------------------------------- 4. HEADER FIJO Siempre visible: logo + Llamar (secundario) + Pedir cita (principal). ---------------------------------------------------------------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--altura-header); background-color: rgba(13, 13, 15, 0.9); backdrop-filter: blur(10px); /* efecto cristal al hacer scroll */ -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); } .header__contenido { height: var(--altura-header); display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Logo: cuadrado rojo "JH" + nombre en dos líneas */ .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blanco); flex-shrink: 0; } /* Óvalo J&H del logo (SVG inline en el HTML) */ .logo__marca { display: flex; align-items: center; } /* Logo original (img/logo.jpg). Como el archivo tiene fondo blanco, lo mostramos como una "pegatina" redondeada. */ .logo__marca img { height: 42px; width: auto; display: block; border-radius: 8px; } /* El óvalo SVG de respaldo solo aparece si falta el logo original (el atributo hidden no oculta SVG en todos los navegadores, por eso lo forzamos aquí con CSS). */ .logo__marca svg[hidden], .logo__marca img[hidden] { display: none; } .logo__texto { font-size: 0.72rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; } .header__acciones { display: flex; align-items: center; gap: 10px; } /* En el header los botones son un poco más compactos */ .header .boton { min-height: 44px; padding: 10px 16px; font-size: 0.9rem; } /* En móviles pequeños el botón "Llamar" se reduce a solo el icono para dejar sitio al CTA principal (que nunca se recorta). */ @media (max-width: 520px) { .boton--telefono { padding: 10px 12px; } .boton--telefono__texto { display: none; } } /* En móvil, el CTA del header se acorta a "Pedir cita" */ @media (max-width: 640px) { .texto-cta-extra { display: none; } } /* En pantallas muy estrechas, el nombre junto al logo se oculta: queda el óvalo J&H, que ya identifica la marca */ @media (max-width: 380px) { .logo__texto { display: none; } .header .boton { padding: 10px 12px; font-size: 0.85rem; } } /* ---------------------------------------------------------------- 5. HERO Fondo carbón con franjas diagonales rojas animadas (eco de la fachada real del taller) + titular progresivo + badge 4.9. ---------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; /* padding-top compensa el header fijo */ padding: calc(var(--altura-header) + 56px) 0 72px; background: radial-gradient(ellipse at 70% 20%, rgba(225, 6, 0, 0.12), transparent 55%), linear-gradient(180deg, var(--carbon) 0%, var(--negro) 100%); } /* Franjas diagonales tipo señalética de taller. Se generan solo con CSS (repeating-linear-gradient) y se mueven muy despacio. Es una capa decorativa: aria-hidden en el HTML. */ .hero__franjas { position: absolute; top: 0; right: -30%; width: 80%; height: 100%; background: repeating-linear-gradient( -55deg, transparent 0px, transparent 42px, rgba(225, 6, 0, 0.07) 42px, rgba(225, 6, 0, 0.07) 74px ); /* Máscara: las franjas se desvanecen hacia el centro para no ensuciar la zona del texto */ -webkit-mask-image: linear-gradient(to left, black 30%, transparent 95%); mask-image: linear-gradient(to left, black 30%, transparent 95%); animation: deslizar-franjas 24s linear infinite; pointer-events: none; } @keyframes deslizar-franjas { from { transform: translateX(0); } to { transform: translateX(105px); } /* un ciclo exacto del patrón: bucle perfecto */ } .hero__contenido { position: relative; /* por encima de las franjas */ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } /* --- Badge de reseñas 4.9 (elemento "wow") ---------------------- */ .badge-resenas { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background-color: var(--carbon-claro); border: 1px solid rgba(225, 6, 0, 0.4); border-radius: 999px; color: var(--blanco); text-decoration: none; font-size: 0.95rem; position: relative; overflow: hidden; /* Entrada con rebote (definida más abajo) */ animation: entrada-rebote 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards; } .badge-resenas strong { font-size: 1.1rem; color: #ffc107; /* dorado de estrella, único color fuera de la paleta: es el estándar de Google */ } .badge-resenas__separador { color: var(--gris-texto); } .badge-resenas:hover { border-color: var(--rojo); } /* Brillo que recorre el badge una vez tras entrar */ .badge-resenas::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: brillo 1.2s ease-out 1s 1; } @keyframes brillo { from { left: -80%; } to { left: 130%; } } @keyframes entrada-rebote { from { opacity: 0; transform: translateY(16px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --- Titular progresivo ----------------------------------------- */ .hero__titulo { font-family: var(--fuente-titulos); font-size: clamp(2.1rem, 8vw, 4rem); /* escala fluida: grande en escritorio, contenido en móvil */ line-height: 1.08; text-transform: uppercase; letter-spacing: 0.01em; } .hero__titulo em { font-style: normal; color: var(--rojo); } /* Cada línea del hero entra con un pequeño retardo escalonado */ .hero__linea { display: block; animation: entrada-linea 0.6s ease-out backwards; } .hero__linea--1 { animation-delay: 0.35s; } .hero__linea--2 { animation-delay: 0.5s; } .hero__linea--3 { animation-delay: 0.7s; } .hero__linea--4 { animation-delay: 0.85s; } .hero__linea--5 { animation-delay: 1s; } @keyframes entrada-linea { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero__subtitulo { font-size: 1.1rem; color: var(--gris-texto); max-width: 34rem; } .hero__subtitulo strong { color: var(--blanco); } /* Beneficio clave: cita por chat sin llamadas */ .hero__beneficio { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--blanco); } .hero__beneficio svg { color: var(--rojo); flex-shrink: 0; } .hero__botones { display: flex; flex-direction: column; /* en móvil, botones apilados a ancho completo */ gap: 12px; width: 100%; margin-top: 8px; } .hero__botones .boton { width: 100%; } /* En pantallas medianas los botones van en fila */ @media (min-width: 640px) { .hero__botones { flex-direction: row; width: auto; } .hero__botones .boton { width: auto; } } @media (min-width: 900px) { .hero { padding: calc(var(--altura-header) + 96px) 0 110px; } } /* ---------------------------------------------------------------- 6. SECCIONES — estructura común a todas ---------------------------------------------------------------- */ .seccion { padding: 72px 0; } /* Fondo alterno para dar ritmo visual al hacer scroll */ .seccion--alterna { background-color: var(--carbon); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); } /* Etiqueta pequeña roja sobre el título (p. ej. "SERVICIOS") */ .seccion__etiqueta { display: inline-flex; align-items: center; gap: 10px; color: var(--rojo); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } /* Rayita roja decorativa delante de la etiqueta */ .seccion__etiqueta::before { content: ''; width: 28px; height: 3px; background-color: var(--rojo); /* Inclinada, como las franjas del hero y la fachada */ transform: skewX(-20deg); } .seccion__titulo { font-family: var(--fuente-titulos); font-size: clamp(1.6rem, 5vw, 2.4rem); text-transform: uppercase; line-height: 1.15; margin: 12px 0 8px; } .seccion__intro { color: var(--gris-texto); max-width: 36rem; margin-bottom: 8px; } /* Enlaces/botones de texto en rojo dentro de párrafos */ .enlace-rojo, .enlace-chat { color: var(--rojo); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* .enlace-chat es un