/* La fuente Montserrat se carga con en el de cada página, no con @import: así no bloquea el primer renderizado (mejor Core Web Vitals). */ /* --------------------------------------------------------------- Tokens --------------------------------------------------------------- */ :root { --navy: #16324F; --navy-dark: #0F2439; --navy-soft: #E8EEF4; --red: #C1272D; --red-dark: #A11F24; --red-soft: #FBECEC; --text: #4A5568; --text-dark: #16324F; --text-light: #8A97A6; --body: #FFFFFF; --light: #F7F9FB; --border: #E6EAEF; --shadow: 0 15px 60px rgba(62, 62, 62, .10); --shadow-hover: 0 15px 60px rgba(22, 50, 79, .20); --radius: 12px; --radius-sm: 6px; } /* --------------------------------------------------------------- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--body); overflow-x: hidden; } img { max-width: 100%; height: auto; vertical-align: middle; } a { color: inherit; text-decoration: none; transition: .2s ease; } a:hover { color: var(--red); } ::selection { background: var(--navy); color: #fff; } h1, h2, h3, h4, h5, h6 { color: var(--text-dark); font-weight: 700; line-height: 1.2; margin: 0 0 1rem; } h1 { font-size: 50px; font-weight: 800; } h2 { font-size: 42px; font-weight: 800; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 18px; } p { margin: 0 0 1rem; } /* --------------------------------------------------------------- Layout --------------------------------------------------------------- */ .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; } .section { position: relative; padding: 80px 0; } .section-sm { padding: 50px 0; } /* Dos secciones del mismo color pegadas: la primera cede su padding inferior para que se lean como un solo bloque y no como un hueco vacío. */ .section-joined { padding-bottom: 0; } /* Secciones alternas: retícula técnica muy tenue. Da textura y ritmo sin robarle protagonismo al contenido — el fondo claro sigue dominando. */ .section-light { background-color: var(--light); background-image: radial-gradient(circle, rgba(22, 50, 79, .07) 1px, transparent 1px); background-size: 26px 26px; } /* El contenido nunca se lee sobre la retícula cruda: se difumina en los bordes. */ .section-light::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(247, 249, 251, .92) 35%, transparent 100%); } .section-light > .container { position: relative; z-index: 1; } .section-head { max-width: 620px; margin: 0 auto 50px; text-align: center; } .section-head p { color: var(--text-light); margin-bottom: 0; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } .grid { display: grid; gap: 30px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* --------------------------------------------------------------- Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 16px; font-weight: 600; padding: 13px 30px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: .2s ease; white-space: nowrap; } .btn-sm { font-size: 14px; padding: 10px 22px; } .btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; } .btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; } .btn-accent { background: var(--red); border-color: var(--red); color: #fff; } .btn-accent:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; } .btn-outline { background: transparent; border-color: var(--border); color: var(--text-dark); } .btn-outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; } /* --------------------------------------------------------------- Navigation --------------------------------------------------------------- */ .navbar { position: sticky; top: 0; z-index: 9997; background: #fff; padding: 15px 0; transition: .2s ease; } .navbar.is-scrolled { box-shadow: var(--shadow); } .navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .navbar-brand img { width: 165px; } .navbar-menu { display: flex; align-items: center; gap: 8px; } .navbar-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .navbar-links a { display: block; padding: 8px 16px; font-size: 15px; white-space: nowrap; font-weight: 500; color: var(--text-dark); } .navbar-links a:hover, .navbar-links a.is-active { color: var(--red); } .navbar-cta { margin-left: 12px; } .navbar-burger { display: none; width: 44px; height: 44px; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .navbar-burger span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--navy); transition: .2s ease; } /* --------------------------------------------------------------- Hero --------------------------------------------------------------- */ .hero { position: relative; padding: 80px 0 70px; background: radial-gradient(900px 380px at 85% 0%, var(--navy-soft), transparent 70%), var(--body); } /* Misma retícula que las secciones claras, desvanecida hacia el centro para que el titular siempre caiga sobre blanco limpio. */ .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(22, 50, 79, .08) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 65% 70% at 45% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 65% 70% at 45% 50%, transparent 30%, #000 100%); } .hero .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; } .hero h1 { margin-bottom: 20px; } .hero h1 span { color: var(--red); } .hero-lead { font-size: 18px; color: var(--text); max-width: 520px; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; margin: 0; padding: 0; /* Mismo ancho que el párrafo del hero: así el punto largo, que va solo en su renglón, queda centrado respecto a los dos de arriba. */ max-width: 520px; } .hero-trust li.is-wide { width: 100%; justify-content: center; } .hero-trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-dark); } .hero-trust svg { flex: none; color: var(--red); } /* Columna derecha del hero: el sello de "somos de Matamoros" sobre el panel. Va en rojo porque la cercanía es un argumento de venta local. */ .hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--red); background: var(--red-soft); padding: 7px 15px; border-radius: 999px; } .hero-badge svg { flex: none; } .hero-side .hero-panel { width: 100%; } /* Panel visual del hero: los niveles de mantenimiento */ .hero-panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; } .hero-panel-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .hero-panel-head strong { font-size: 15px; color: var(--text-dark); } .pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--red); background: var(--red-soft); padding: 5px 12px; border-radius: 999px; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } /* Escalera de mantenimientos dentro del panel: nombre del nivel a la izquierda, precio de entrada a la derecha. Sin descripciones a propósito — el detalle de cada nivel está a un clic, en el botón del pie del panel. */ .plan-list { list-style: none; margin: 0 0 22px; padding: 0; } .plan-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--border); } .plan-list li:last-child { border-bottom: 0; } .plan-name { display: flex; align-items: center; /* Con wrap: en pantallas angostas el sello baja bajo el nombre en vez de empujar la fila (y con ella todo el ancho de la página). */ flex-wrap: wrap; gap: 8px 10px; font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--text-dark); } .plan-tag { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--red); padding: 3px 9px; border-radius: 999px; } .plan-cost { flex: none; text-align: right; font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--navy); } .plan-cost small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); } /* El nivel más pedido se despega del resto con la banda roja de marca. */ .plan-list li.is-top { border-bottom: 0; border-left: 3px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--light); /* Sin padding a la derecha: así los precios de las cuatro filas quedan alineados aunque esta lleve fondo. */ padding: 15px 0 15px 14px; margin: 6px 0; } /* Cierra el panel: el detalle nivel por nivel está en /mantenimiento. */ .plan-cta { display: block; width: 100%; text-align: center; } .hero-panel-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-light); background: var(--light); border-radius: var(--radius-sm); padding: 12px 14px; } .hero-panel-foot svg { flex: none; color: var(--navy); } /* --------------------------------------------------------------- Cards --------------------------------------------------------------- */ /* Logros / respaldo: tarjetas centradas con medalla, presentan el respaldo del taller como "logros" en vez de simples viñetas. */ .award { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 42px 30px 34px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } /* Franja de acento arriba (azul -> rojo de la marca) */ .award::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--red)); } .award:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } /* Medalla: círculo navy con halo rojo sutil */ .award-badge { position: relative; display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 24px; border-radius: 50%; color: #fff; background: linear-gradient(150deg, #234a6e, var(--navy)); box-shadow: 0 12px 26px rgba(22, 50, 79, .28); } .award-badge::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(193, 39, 45, .28); } .award-badge svg { width: 34px; height: 34px; } .award h3 { font-size: 20px; margin-bottom: 10px; } .award p { color: var(--text-light); font-size: 15px; margin-bottom: 0; max-width: 32ch; } /* --------------------------------------------------------------- Escaneo inicial: el servicio de entrada. Va en una tarjeta ancha sobre la rejilla de paquetes porque es el punto de partida, no una opción más entre seis. --------------------------------------------------------------- */ .entry { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 40px; } .entry-media { position: relative; min-height: 240px; background: var(--navy-dark); } .entry-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .entry-badge { position: absolute; top: 16px; left: 16px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red); padding: 7px 14px; border-radius: 999px; } .entry-body { padding: 24px 30px; } .entry-body .eyebrow { margin-bottom: 8px; } .entry-body h3 { font-size: 25px; font-weight: 800; margin-bottom: 8px; } .entry-body > p { font-size: 15px; color: var(--text-light); margin-bottom: 14px; } /* Qué se hace en el escaneo. A dos columnas para no estirar la tarjeta. */ .entry-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; list-style: none; margin: 0 0 16px; padding: 0; } .entry-list li { position: relative; padding: 0 0 4px 24px; font-size: 14px; } .entry-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1272D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 9px 9px no-repeat; } /* Dos precios según el año del vehículo. */ .entry-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .entry-price { background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } .entry-price .amount { display: block; font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.1; } .entry-price .amount small { font-size: 12px; font-weight: 600; color: var(--text-light); } .entry-price span:last-child { display: block; font-size: 13px; color: var(--text-light); margin-top: 4px; } .entry-note { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--text-dark); background: var(--red-soft); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 16px; } .entry-note svg { flex: none; margin-top: 2px; color: var(--red); } .entry-note p { margin: 0; } .entry .btn { padding: 11px 26px; } /* Agendar el escaneo + salir a la página de diagnóstico. Los dos botones deben caber en una sola línea dentro de la columna, de ahí el padding más corto. */ .entry-actions { display: flex; flex-wrap: wrap; gap: 12px; } .entry-actions .btn { padding: 11px 20px; font-size: 15px; } /* --------------------------------------------------------------- Paquetes --------------------------------------------------------------- */ .pkg { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: .2s ease; } .pkg:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } /* Banda superior con una franja de la imagen del servicio. Va enmarcada dentro de la tarjeta, no a sangre: los renders son oscuros y pegarlos al borde contra el fondo claro genera un corte duro. Con el marco blanco alrededor el bloque oscuro se lee como un panel intencional. */ .pkg-media { position: relative; /* 16:9, igual que el recorte de las imágenes: así el navegador no vuelve a recortarlas por su cuenta y se ve exactamente el encuadre elegido. */ aspect-ratio: 16 / 9; margin: 14px 14px 0; border-radius: 8px; background: var(--navy-dark); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .pkg-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .pkg:hover .pkg-media img { transform: scale(1.05); } .pkg-featured { border-top: 4px solid var(--red); } .pkg-badge { position: absolute; top: 12px; right: 12px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--red); padding: 6px 12px; border-radius: 999px; } .pkg-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 30px; } .pkg h3 { font-size: 20px; margin-bottom: 18px; } .pkg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } .pkg-price .from { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 2px; } .pkg-price .amount { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; } .pkg-price .currency { font-size: 13px; font-weight: 600; color: var(--text-light); } .pkg-list { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; } .pkg-list li { position: relative; padding: 0 0 10px 26px; font-size: 15px; } .pkg-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1272D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } .pkg .btn { width: 100%; } /* Niveles de mantenimiento en el inicio: misma tarjeta que los paquetes pero sin imagen. La jerarquía la da el kicker, que dice qué agrega cada nivel sobre el anterior. */ .pkg-plan .pkg-body { padding: 26px 24px 28px; } .pkg-plan h3 { font-size: 22px; margin-bottom: 14px; } .pkg-kicker { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--navy); background: var(--navy-soft); padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; } .pkg-kicker.is-top { text-transform: uppercase; letter-spacing: .07em; color: #fff; background: var(--red); } .pkg-note { text-align: center; font-size: 14px; color: var(--text-light); margin: 24px 0 0; } /* Garantía del diagnóstico. Va pegada a los precios a propósito: es ahí donde el cliente duda si vale la pena pagar, y esto es lo que elimina esa duda. */ .guarantee { display: flex; align-items: center; gap: 22px; background: #fff; border-radius: var(--radius); border-left: 5px solid var(--red); box-shadow: var(--shadow); padding: 26px 30px; margin-top: 40px; } .guarantee-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--red-soft); color: var(--red); } .guarantee h3 { font-size: 20px; margin-bottom: 4px; } .guarantee p { font-size: 15px; color: var(--text-light); margin: 0; } @media (max-width: 767px) { .guarantee { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; } } /* --------------------------------------------------------------- Niveles de mantenimiento --------------------------------------------------------------- */ /* Tabla comparativa: los 4 niveles y todos los servicios juntos. El punto rojo marca dónde aparece cada servicio (lo que agrega ese nivel); lo heredado va en azul apagado. Se llena sola, sin columnas medio vacías. */ .cmp { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .cmp-scroll { overflow-x: auto; } .cmp-table { width: 100%; min-width: 720px; /* fuerza el scroll horizontal en móvil */ border-collapse: collapse; font-size: 15px; } /* Cabecera: cada nivel en un bloque azul de marca, con medidor y precio. */ .cmp-table thead th { vertical-align: middle; text-align: center; padding: 11px 14px; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; } /* La esquina se integra a la banda azul y queda fija al hacer scroll lateral, como título de la columna de servicios. */ .cmp-table thead .cmp-corner { position: sticky; left: 0; z-index: 2; text-align: left; } .cmp-table thead .cmp-tier.is-top { box-shadow: inset 0 4px 0 var(--red); } /* Prime */ .cmp-corner-label { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: #fff; } .cmp-tier-name { display: block; font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .cmp-tier-price { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); } .cmp-tier-price strong { font-size: 15px; font-weight: 800; color: #fff; } /* Cuerpo. La primera columna (servicio) queda fija al hacer scroll lateral. */ .cmp-table tbody th { position: sticky; left: 0; z-index: 1; text-align: left; padding: 13px 18px; font-size: 14px; font-weight: 500; color: var(--navy); background: #fff; } .cmp-table tbody td { text-align: center; padding: 13px 14px; } .cmp-table tbody tr + tr th, .cmp-table tbody tr + tr td { border-top: 1px solid var(--border); } /* Subtítulo bajo el nombre del servicio (aclaraciones). */ .cmp-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-light); } /* Encabezado de grupo: banda clara a todo lo ancho con la categoría en rojo. */ .cmp-table .cmp-group th { position: static; text-align: left; padding: 9px 18px; background: var(--light); color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* Un solo estilo para todo lo incluido: círculo rojo con palomita blanca. */ .tick { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } /* Cortesía: mismo círculo rojo, con el ícono de regalo. */ .cmp-table td.gift .tick { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") center / 13px 13px no-repeat; } .cmp-table td.no::before { content: "–"; color: var(--border); font-weight: 700; } /* Pie: un solo selector de paquete + botón Agendar, en vez de cuatro botones. */ .cmp-table tfoot td { padding: 22px 18px; background: #fff; border-top: 1px solid var(--border); } .cmp-choose { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .cmp-choose label { font-weight: 700; color: var(--navy); } .cmp-choose select { font-family: inherit; font-size: 15px; color: var(--text-dark); padding: 12px 14px; min-width: 240px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: .2s ease; } .cmp-choose select:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); } /* Texto solo para lectores de pantalla. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 560px) { .cmp-table { font-size: 14px; } .cmp-table thead th { padding: 16px 8px; } .cmp-table tbody th { padding: 12px; max-width: 160px; } } /* Vista interactiva de niveles para celular: recuadros seleccionables en lugar de la tabla con scroll horizontal. Se eligen un nivel y se muestra qué incluye. script.js la construye leyendo la misma tabla (única fuente de datos); por eso arranca oculta y solo se muestra en el breakpoint de móvil. */ .tier-picker { display: none; } .tier-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; background: var(--light); border-bottom: 1px solid var(--border); } .tier-tab { display: flex; flex-direction: column; gap: 3px; padding: 13px 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; text-align: left; cursor: pointer; transition: .2s ease; } .tier-tab.is-top { border-top: 3px solid var(--red); } .tier-tab-name { font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); } .tier-tab-price { font-size: 12px; font-weight: 600; color: var(--text-light); } .tier-tab.is-active { background: var(--navy); border-color: var(--navy); box-shadow: var(--shadow); } .tier-tab.is-active .tier-tab-name { color: #fff; } .tier-tab.is-active .tier-tab-price { color: rgba(255, 255, 255, .75); } .tier-panel { padding: 22px 18px 26px; } .tier-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .tier-panel-name { font-size: 18px; font-weight: 800; text-transform: uppercase; color: var(--navy); } .tier-panel-price { font-size: 15px; font-weight: 800; color: var(--navy); white-space: nowrap; } .tier-group { margin-top: 16px; } .tier-group-name { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; } .tier-feats { list-style: none; margin: 0; padding: 0; } .tier-feats li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; } .tier-feats li::before { content: ""; flex: none; margin-top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } .tier-feat-text { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-dark); line-height: 1.4; } .tier-feat-text small { display: block; font-size: 12px; font-weight: 400; color: var(--text-light); } .tier-badge { flex: none; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } .tier-badge.is-new { color: var(--red); background: var(--red-soft); } .tier-badge.is-gift { color: var(--navy); background: var(--navy-soft); } .tier-cta { width: 100%; margin-top: 22px; } /* La tabla solo se oculta si el JS ya construyó el picker (clase .has-picker). Así, si script.js no corre (caché vieja, error), se ve la tabla como respaldo en lugar de un hueco en blanco. */ @media (max-width: 700px) { .cmp.has-picker .cmp-scroll { display: none; } .cmp.has-picker .tier-picker { display: block; } } /* --------------------------------------------------------------- Servicios sueltos (aceite, bujías, inyectores, cuerpo de aceleración) --------------------------------------------------------------- */ .svc { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: .2s ease; } .svc:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .svc-media { /* Igual que las imágenes generadas (600x1000): el navegador no las recorta. */ aspect-ratio: 3 / 5; background: var(--navy-dark); overflow: hidden; } .svc-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .svc:hover .svc-media img { transform: scale(1.05); } .svc-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } /* Dos líneas fijas: los nombres largos no deben desalinear la descripción respecto a las tarjetas vecinas. */ .svc-body h3 { min-height: 46px; font-size: 18px; margin-bottom: 6px; } .svc-body p { flex: 1; font-size: 14px; color: var(--text-light); margin-bottom: 16px; } .svc-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; } .svc-price .from { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); } .svc-price .amount { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1; } /* Servicio sin precio de lista: se cotiza según el motor. */ .svc-price .quote { font-size: 16px; font-weight: 700; color: var(--navy); } .svc .btn { width: 100%; } /* --------------------------------------------------------------- Complementos --------------------------------------------------------------- */ .addon { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 18px; transition: .2s ease; } .addon:hover { border-color: transparent; box-shadow: var(--shadow); } .addon svg { color: var(--red); margin-bottom: 12px; } .addon span { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); line-height: 1.4; } .grid-5 { grid-template-columns: repeat(5, 1fr); } /* --------------------------------------------------------------- Proceso --------------------------------------------------------------- */ .process { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; } /* Línea de progreso: la posiciona el JS entre el primer y el último punto. Track apagado + relleno que se llena paso a paso (--p va de 0 a 1). */ .flow-line { position: absolute; z-index: 0; border-radius: 999px; background: var(--border); --p: 0; } .flow-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--red)); transform-origin: left center; transform: scaleX(var(--p)); transition: transform .55s ease; } /* En pantallas chicas la línea es vertical y se llena de arriba a abajo */ .flow-line.is-vertical .flow-fill { background: linear-gradient(180deg, var(--navy), var(--red)); transform-origin: center top; transform: scaleY(var(--p)); } .pstep { position: relative; z-index: 1; text-align: center; } .pstep-dot { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 24px; border-radius: 50%; background: #fff; border: 2px solid var(--border); color: var(--navy); font-weight: 800; transition: border-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease; } .pstep-dot svg { width: 24px; height: 24px; } .pstep-body { position: relative; opacity: .55; transition: opacity .45s ease; } /* Título con alto reservado para 2 líneas: así todos los títulos ocupan lo mismo y los párrafos de todas las columnas arrancan a la misma altura. */ .pstep h3 { font-size: 19px; margin-bottom: 8px; min-height: 2.4em; } .pstep p { color: var(--text-light); font-size: 15px; margin-bottom: 0; } /* "LA META" va fuera del flujo, flotando encima del título de la meta, para que ese título quede alineado con los demás y no los empuje hacia abajo. */ .pstep-tag { position: absolute; bottom: 100%; left: 0; right: 0; margin: 0 0 5px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); } /* Estado activo: el JS lo enciende paso a paso al entrar en pantalla */ .pstep.is-on .pstep-body { opacity: 1; } .pstep.is-on .pstep-dot { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(22, 50, 79, .28); transform: scale(1.06); } .pstep-goal.is-on .pstep-dot { background: var(--red); border-color: var(--red); box-shadow: 0 8px 22px rgba(193, 39, 45, .30); } /* Sin animación disponible: todo encendido y relleno completo */ .process.no-anim .pstep-body { opacity: 1; } .process.no-anim .flow-line { --p: 1; } .process.no-anim .flow-fill { transition: none; } .process.no-anim .pstep-dot, .process.no-anim .pstep .pstep-body { transition: none; } /* --------------------------------------------------------------- Por qué / split --------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .check-list { list-style: none; margin: 0; padding: 0; } .check-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); } .check-list li:last-child { border-bottom: 0; } .check-list svg { flex: none; margin-top: 3px; color: var(--red); } .check-list strong { display: block; color: var(--text-dark); margin-bottom: 2px; } .check-list span { font-size: 15px; color: var(--text-light); } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .stat { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; text-align: center; } .stat strong { display: block; font-size: 32px; font-weight: 800; color: var(--navy); line-height: 1.1; margin-bottom: 6px; } .stat span { font-size: 14px; color: var(--text-light); } /* --------------------------------------------------------------- FAQ --------------------------------------------------------------- */ .faq { max-width: 820px; margin: 0 auto; } .faq-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 22px 26px; background: none; border: 0; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--text-dark); text-align: left; cursor: pointer; } .faq-q:hover { color: var(--red); } .faq-q svg { flex: none; color: var(--red); transition: transform .25s ease; } .faq-item.is-open .faq-q svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-a p { padding: 0 26px 24px; margin: 0; color: var(--text-light); font-size: 15px; } /* --------------------------------------------------------------- Páginas legales (aviso de privacidad) --------------------------------------------------------------- */ .legal { max-width: 780px; margin: 0 auto; color: var(--text); } .legal h2 { font-size: 22px; font-weight: 700; margin: 32px 0 10px; } .legal p { margin: 0 0 14px; } .legal ul { margin: 0 0 14px; padding-left: 22px; } .legal li { margin-bottom: 6px; } .legal a { color: var(--red); font-weight: 600; } .legal a.btn { color: #fff; } .legal-updated { font-size: 14px; color: var(--text-light); } .legal-back { margin-top: 32px; } /* --------------------------------------------------------------- CTA --------------------------------------------------------------- */ .cta { position: relative; overflow: hidden; background: var(--navy); border-radius: var(--radius); padding: 60px; text-align: center; color: #fff; } /* Trazos de circuito con terminal redondo: el mismo motivo que sale del logotipo. Van en las esquinas, detrás del texto. */ .cta::before, .cta::after { content: ""; position: absolute; width: 340px; height: 150px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='150' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M40 25h280'/%3E%3Cpath d='M90 60h230'/%3E%3Cpath d='M20 95h300'/%3E%3Cpath d='M110 130h210'/%3E%3Ccircle cx='40' cy='25' r='5' fill='%23ffffff' fill-opacity='0.16' stroke='none'/%3E%3Ccircle cx='90' cy='60' r='5' fill='%23ffffff' fill-opacity='0.16' stroke='none'/%3E%3Ccircle cx='20' cy='95' r='5' fill='%23ffffff' fill-opacity='0.16' stroke='none'/%3E%3Ccircle cx='110' cy='130' r='5' fill='%23ffffff' fill-opacity='0.16' stroke='none'/%3E%3C/svg%3E") no-repeat; } /* Espejo izquierda/derecha, centrado en vertical: el motivo enmarca el contenido por igual en ambos lados para que se lea centrado. */ .cta::before { top: 50%; left: -60px; transform: translateY(-50%) scaleX(-1); } .cta::after { top: 50%; right: -60px; transform: translateY(-50%); } .cta .container, .cta h2, .cta p, .cta .cta-actions { position: relative; z-index: 1; } .cta h2 { color: #fff; margin-bottom: 12px; } .cta p { color: rgba(255, 255, 255, .75); max-width: 560px; margin: 0 auto 30px; } .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .cta .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; } .cta .btn-ghost:hover { background: #fff; border-color: #fff; color: var(--navy); } /* Botón blanco sólido: resalta sobre el fondo navy del CTA. */ .cta .btn-white { background: #fff; border-color: #fff; color: var(--navy); } .cta .btn-white:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); color: var(--navy); } /* --------------------------------------------------------------- Página de contacto --------------------------------------------------------------- */ .page-head { background: var(--light); padding: 60px 0; text-align: center; border-bottom: 1px solid var(--border); } .page-head h1 { font-size: 42px; margin-bottom: 10px; } .page-head p { color: var(--text-light); margin: 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: start; } .info-list { list-style: none; margin: 0 0 30px; padding: 0; } .info-list li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); } .info-list li:last-child { border-bottom: 0; } .info-list .info-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--navy-soft); color: var(--navy); } .info-list strong { display: block; font-size: 14px; color: var(--text-dark); margin-bottom: 2px; } .info-list a, .info-list span { font-size: 15px; color: var(--text-light); display: block; } .info-list a:hover { color: var(--red); } .form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; } .form-group input, .form-group select, .form-group textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--text-dark); padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: .2s ease; } .form-group textarea { min-height: 120px; resize: vertical; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); } .form-card .btn { width: 100%; } .form-note { font-size: 13px; color: var(--text-light); text-align: center; margin: 16px 0 0; } .map-wrap { position: relative; } .map { border: 0; width: 100%; height: 380px; display: block; } /* Botón para volver a centrar el taller si el visitante se movió por el mapa. Va sobre el iframe (esquina superior derecha, donde el embed no pone controles). */ .map-recenter { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(193, 39, 45, .35); transition: background .2s, border-color .2s, transform .2s; } .map-recenter:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); } .map-recenter svg { flex: none; } @media (max-width: 600px) { .map-recenter { top: 12px; right: 12px; padding: 8px 12px 8px 10px; font-size: 13px; } } /* --------------------------------------------------------------- Footer --------------------------------------------------------------- */ .footer { background: var(--light); border-top: 1px solid var(--border); padding: 60px 0 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; } .footer-brand img { width: 175px; margin-bottom: 18px; } .footer-brand p { font-size: 15px; color: var(--text-light); max-width: 320px; } .footer h4 { font-size: 16px; font-weight: 700; margin-bottom: 18px; } .footer-links { list-style: none; margin: 0; padding: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { font-size: 15px; color: var(--text-light); } .footer-links a:hover { color: var(--red); } .footer-contact { list-style: none; margin: 0; padding: 0; } .footer-contact li { display: flex; gap: 10px; font-size: 15px; color: var(--text-light); margin-bottom: 12px; } .footer-contact svg { flex: none; margin-top: 4px; color: var(--red); } .social { display: flex; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; } .social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--navy); color: #fff; } .social a:hover { background: var(--red); color: #fff; } .footer-bottom { border-top: 1px solid var(--border); padding: 22px 0; text-align: center; font-size: 14px; color: var(--text-light); } .footer-bottom p { margin: 0; } /* Aviso flotante de estado. Tiene dos estados que el JS alterna con la clase .is-open según la hora real de Matamoros: - abierto: azul de marca, punto verde que late, invita a llamar. - cerrado: apagado, punto gris, indica que no hay servicio y lleva a WhatsApp. Se apila encima del botón de WhatsApp. */ .call-float { position: fixed; right: 22px; bottom: 22px; z-index: 9998; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 44px); background: #EDF1F5; color: var(--text-dark); padding: 10px 20px 10px 14px; border-radius: 999px; box-shadow: 0 10px 30px rgba(22, 50, 79, .18); } .call-float.is-open { background: var(--navy); color: #fff; box-shadow: 0 10px 30px rgba(22, 50, 79, .35); } .call-float:hover { transform: translateY(-2px); } .call-float:hover { color: var(--text-dark); } .call-float.is-open:hover { color: #fff; background: var(--navy-dark); } .call-float-icon { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(22, 50, 79, .08); color: var(--text-light); } .call-float.is-open .call-float-icon { background: rgba(255, 255, 255, .12); color: #fff; } /* Punto de estado: gris fijo cerrado, verde que late abierto. */ .call-float-icon::after { content: ""; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-light); border: 2px solid #EDF1F5; } .call-float.is-open .call-float-icon::after { background: #25D366; border-color: var(--navy); animation: call-pulse 2s ease-in-out infinite; } @keyframes call-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } } .call-float-text { display: flex; flex-direction: column; line-height: 1.2; } .call-float-text small { font-size: 11px; font-weight: 500; color: var(--text-light); } .call-float.is-open .call-float-text small { color: rgba(255, 255, 255, .8); } .call-float-text strong { font-size: 15px; font-weight: 700; } /* El texto correcto según el estado. Por defecto (cerrado) se ve el de cerrado. */ .call-float .when-open { display: none; } .call-float .when-closed { display: flex; flex-direction: column; } .call-float.is-open .when-open { display: flex; flex-direction: column; } .call-float.is-open .when-closed { display: none; } /* Versión corta del aviso: solo se usa en móvil (ver el bloque de 767px). */ .call-short { display: none; } /* Widget de ubicación: va encima del aviso de llamada. El botón es pequeño y discreto; al tocarlo despliega una tarjeta con los datos del taller y, dentro, el botón para abrir Google Maps si el visitante lo desea. */ .map-widget { position: fixed; right: 22px; bottom: 92px; /* justo encima del aviso de llamada (~60px de alto) */ z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } /* Mismo lenguaje de color que el aviso de llamada: gris apagado con el taller cerrado, azul de marca cuando está abierto. script.js sincroniza .is-live con el mismo horario que usa el aviso de llamada, así ambos flotantes van iguales. */ .map-float { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 9px; background: #EDF1F5; color: var(--text-dark); font-family: inherit; font-size: 13px; font-weight: 700; border: 0; border-radius: 999px; box-shadow: 0 8px 24px rgba(22, 50, 79, .16); cursor: pointer; transition: .2s ease; } .map-float.is-live { background: var(--navy); color: #fff; box-shadow: 0 8px 24px rgba(22, 50, 79, .3); } .map-float:hover { transform: translateY(-2px); } .map-float.is-live:hover { background: var(--navy-dark); } .map-float-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(22, 50, 79, .08); color: var(--text-light); } .map-float.is-live .map-float-icon { background: rgba(255, 255, 255, .12); color: #fff; } /* Tarjeta con los datos del taller. Aparece encima del botón al abrir. */ .map-card { position: relative; width: 268px; max-width: calc(100vw - 44px); background: #fff; border-radius: 14px; box-shadow: 0 14px 44px rgba(22, 50, 79, .22); padding: 18px 18px 16px; display: none; } .map-widget.is-open .map-card { display: block; animation: map-in .18s ease; } @keyframes map-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .map-card-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: var(--light); border: 0; border-radius: 50%; color: var(--text-light); cursor: pointer; transition: .2s ease; } .map-card-close:hover { background: var(--border); color: var(--text-dark); } .map-card-title { display: block; font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 12px; padding-right: 26px; } .map-card-info { list-style: none; margin: 0 0 16px; padding: 0; } .map-card-info li { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--text); margin-bottom: 10px; } .map-card-info li:last-child { margin-bottom: 0; } .map-card-info svg { flex: none; margin-top: 2px; color: var(--red); } .map-card-info a { color: var(--text); font-weight: 600; } .map-card-info a:hover { color: var(--red); } .map-card-cta { width: 100%; } @media (prefers-reduced-motion: reduce) { .call-float-icon::after { animation: none; } } /* En el celular los dos flotantes tapaban demasiado contenido: se compactan y se pegan uno al otro en la esquina, con etiqueta corta ("Llamar" / "Cerrado · WhatsApp" / "Ubicación") para que se siga entendiendo qué hace cada uno. */ @media (max-width: 767px) { .call-float { right: 12px; bottom: 12px; gap: 8px; padding: 6px 14px 6px 6px; } .call-float-icon { width: 30px; height: 30px; } .call-float-icon svg { width: 16px; height: 16px; } .call-float-icon::after { width: 9px; height: 9px; } .call-float-text small, .call-float-text strong { display: none; } .call-short { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; } .map-widget { right: 12px; bottom: 62px; /* pegado al aviso de estado, que mide ~42px */ gap: 8px; } .map-float { padding: 6px 13px 6px 6px; font-size: 12.5px; } .map-float-icon { width: 26px; height: 26px; } } /* --------------------------------------------------------------- Reveal al hacer scroll --------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } /* --------------------------------------------------------------- Responsive --------------------------------------------------------------- */ @media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } /* Con "Inicio" son 6 enlaces + el botón: se aprieta el menú antes de que algún enlace se parta en dos líneas. */ .navbar-links a { padding: 8px 10px; font-size: 14.5px; } } @media (max-width: 991px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } /* Proceso: se apila como línea de tiempo vertical (punto | texto) */ .process { grid-template-columns: 1fr; gap: 30px; } .pstep { display: grid; grid-template-columns: 52px 1fr; gap: 20px; text-align: left; align-items: start; } .pstep-dot { margin: 0; } .pstep-body { padding-top: 6px; } /* Apilado vertical: el título vuelve a alto natural y el tag al flujo normal */ .pstep h3 { min-height: 0; } .pstep-tag { position: static; margin: 0 0 6px; } .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; } .entry { grid-template-columns: 1fr; } .entry-media { min-height: 240px; } .entry-body { padding: 32px 26px; } /* Al apilarse, primero el titular y el CTA; el panel de paquetes va debajo. */ .hero-side { order: 1; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 767px) { h1, .page-head h1 { font-size: 34px; font-weight: 700; } h2 { font-size: 30px; font-weight: 700; } .section { padding: 60px 0; } .hero { padding: 50px 0; } .grid-2, .grid-3, .grid-4, .stat-grid, .form-row, .footer-grid { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: repeat(2, 1fr); } .cta { padding: 40px 24px; } .form-card { padding: 26px; } .navbar-burger { display: block; } .navbar-menu { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; box-shadow: var(--shadow); padding: 12px 20px 20px; display: none; } .navbar-menu.is-open { display: flex; } .navbar-links { flex-direction: column; align-items: stretch; } .navbar-links a { padding: 12px 0; border-bottom: 1px solid var(--border); } .navbar-cta { margin: 16px 0 0; } .navbar-cta .btn { width: 100%; } } /* --------------------------------------------------------------- Contacto: acciones y respuesta del formulario --------------------------------------------------------------- */ /* WhatsApp y "Cómo llegar" lado a lado; se apilan en pantallas chicas. */ .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 480px) { .contact-actions { flex-direction: column; } .contact-actions .btn { width: 100%; } } /* Mensaje tras enviar el formulario. Vacío no ocupa espacio, así que no provoca saltos de maquetación al aparecer. */ .form-status { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; } .form-status:empty { display: none; } .form-status.is-ok { color: var(--navy); font-weight: 600; } .form-status.is-warn { padding: 12px 14px; border-radius: 8px; background: var(--red-soft, #fdeaea); color: var(--red); font-weight: 600; } .form-status a { color: inherit; text-decoration: underline; } /* --------------------------------------------------------------- Accesibilidad --------------------------------------------------------------- */ /* Enlace de salto: invisible hasta que recibe el foco con Tab. Permite a quien navega con teclado saltarse la barra y llegar directo al contenido. */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 10000; padding: 12px 20px; background: var(--navy); color: #fff; font-weight: 600; border-radius: 0 0 8px 8px; transition: top .18s ease; } .skip-link:focus { top: 0; } /* Foco visible y consistente. El anillo por defecto del navegador se pierde sobre el footer azul y sobre los botones de color; este se ve en ambos. :focus-visible solo se activa al navegar con teclado, así que hacer clic con el mouse no deja el contorno pegado. */ a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; } .footer a:focus-visible, .btn-primary:focus-visible, .call-float:focus-visible { outline-color: #fff; } /* Las anclas (#paquetes, #proceso, #nosotros, #faq) quedaban tapadas por la barra fija: el navegador las alineaba al borde superior de la ventana, justo debajo de la navbar. Este margen reserva su altura. */ :target, #paquetes, #proceso, #nosotros, #faq, #servicios, #mantenimiento, #complementos, #contenido { scroll-margin-top: 92px; } @media (max-width: 767px) { :target, #paquetes, #proceso, #nosotros, #faq, #servicios, #mantenimiento, #complementos, #contenido { scroll-margin-top: 78px; } }