/* garantia.css — estilos propios de la página de Garantía. */ /* ── Reveal on scroll ────────────────────────────────────────────────────── Patrón seguro: el estado oculto SOLO se aplica si el JS agregó `.js-reveal` al (y si el usuario no pidió reduced-motion). Sin JS → contenido visible. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); will-change: opacity, transform; } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; } } /* ── Hero blueprint: clearance para el navbar fixed "content" (~136px desktop) ── blueprint-band (catalogo.css) trae 6rem/7rem, pensado para el navbar más bajo del catálogo. Acá lo subimos para que el contenido no quede tapado. */ .garantia-hero.blueprint-band { padding-top: 8rem; padding-bottom: 3rem; } /* El hero es más grande que la banda del catálogo → el sheen barre más rápido para sentirse premium (override solo acá, no toca catalogo.css). */ .garantia-hero .blueprint-sheen { animation-duration: 4.5s; } @media (min-width: 768px) { .garantia-hero.blueprint-band { padding-top: 9.5rem; padding-bottom: 4rem; } } /* ── Simulador de garantía: slider de meses ───────────────────────────────── catalogo.css ya estiliza TODOS los input[type="range"] del sitio en azul (#2563eb, del filtro de precios). Ese selector de atributo gana en especificidad sobre una clase suelta, por eso aquí se califica con `input[type="range"].sim-range` — si no, el pulgar sale azul en una página cuya identidad es teal. ───────────────────────────────────────────────── */ input[type="range"].sim-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 9999px; background: #e2e8f0; outline: none; cursor: pointer; } .dark input[type="range"].sim-range { background: #334155; } input[type="range"].sim-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(to bottom right, #0d9488, #06b6d4); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(6, 182, 212, 0.45); cursor: pointer; transition: transform 0.15s; } input[type="range"].sim-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(to bottom right, #0d9488, #06b6d4); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(6, 182, 212, 0.45); cursor: pointer; transition: transform 0.15s; } .dark input[type="range"].sim-range::-webkit-slider-thumb { border-color: #1e293b; } .dark input[type="range"].sim-range::-moz-range-thumb { border-color: #1e293b; } input[type="range"].sim-range::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type="range"].sim-range::-moz-range-thumb:hover { transform: scale(1.15); } input[type="range"].sim-range:focus-visible::-webkit-slider-thumb { outline: 2px solid #0d9488; outline-offset: 3px; } input[type="range"].sim-range:focus-visible::-moz-range-thumb { outline: 2px solid #0d9488; outline-offset: 3px; } input[type="range"].sim-range:disabled { cursor: not-allowed; } input[type="range"].sim-range:disabled::-webkit-slider-thumb { background: #94a3b8; box-shadow: none; transform: none; } input[type="range"].sim-range:disabled::-moz-range-thumb { background: #94a3b8; box-shadow: none; transform: none; } /* Sin flechas en el campo de monto: rompen la alineación del prefijo "S/". */ .sim-num::-webkit-outer-spin-button, .sim-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sim-num { -moz-appearance: textfield; } @media (prefers-reduced-motion: reduce) { input[type="range"].sim-range::-webkit-slider-thumb, input[type="range"].sim-range::-moz-range-thumb { transition: none; } } /* Campo de fecha del simulador: el indicador nativo del calendario queda pegado al borde derecho (por defecto lo separa el padding del input) y toma el color del tema en vez de quedar invisible sobre fondo oscuro. */ .sim-date::-webkit-calendar-picker-indicator { margin-right: -0.125rem; padding: 0.375rem; border-radius: 0.5rem; cursor: pointer; opacity: 0.55; transition: opacity 0.15s, background-color 0.15s; } .sim-date::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: rgba(148, 163, 184, 0.18); } .sim-date::-webkit-datetime-edit { padding: 0; }