/* iFixPro: estilos propios (además de Tailwind) */
:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* entradas y respuestas al toque */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* movimiento dentro de la pantalla */
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);     /* hojas y selector deslizante (curva tipo iOS) */

    /* Escala slate (la usa Tailwind, ver js/tailwind.config.js). Modo oscuro = escala estándar */
    --s-50: 248 250 252;  --s-100: 241 245 249; --s-200: 226 232 240; --s-300: 203 213 225;
    --s-400: 148 163 184; --s-500: 100 116 139; --s-600: 71 85 105;   --s-700: 51 65 85;
    --s-800: 30 41 59;    --s-900: 15 23 42;    --s-950: 2 6 23;
    --page: 11 17 32;                                  /* fondo de la página */
    color-scheme: dark;
}

/* Modo claro: la escala se invierte (los "800" son tarjetas blancas, los "300" texto oscuro) */
html[data-theme="light"] {
    --s-50: 2 6 23;       --s-100: 15 23 42;    --s-200: 30 41 59;    --s-300: 51 65 85;
    --s-400: 71 85 105;   --s-500: 100 116 139; --s-600: 148 163 184; --s-700: 222 228 236;
    --s-800: 255 255 255; --s-900: 241 245 249; --s-950: 248 250 252;
    --page: 244 247 251;
    color-scheme: light;
}

body {
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
    background-color: rgb(var(--page));
    color: #f8fafc;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;   /* montos y contadores alineados */
    overflow-wrap: break-word;            /* nombres o modelos largos no rompen la caja */
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
/* El espaciado depende del tamaño: los títulos grandes se aprietan, el texto chico respira */
h1 { letter-spacing: -0.03em; line-height: 1.1; }
.text-\[10px\], .text-\[11px\] { letter-spacing: 0.01em; }

/* ---------- Encabezado: material translúcido; la línea inferior aparece solo al desplazar ---------- */
header.sticky {
    background-color: rgb(var(--page) / 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: transparent;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
header.sticky[data-scrolled] {
    border-bottom-color: rgb(var(--s-700) / 0.7);
    box-shadow: 0 10px 30px -22px rgb(2 6 23 / 0.45);
}

/* ---------- Selector Cotizar / Mi orden: una pastilla que se desliza a la pestaña activa ---------- */
.seg { position: relative; isolation: isolate; }
.seg-indicator {
    position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; z-index: -1;
    border-radius: 6px; background: #0284c7; pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px -4px rgba(14, 165, 233, 0.6);
    transition: translate 420ms var(--ease-sheet), width 420ms var(--ease-sheet);
}
.seg.no-anim .seg-indicator { transition: none; }
.seg [aria-pressed="true"] { color: #fff !important; }

/* ---------- Cambio de tema: fundido suave en vez de un salto brusco de brillo ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease; }
p, li { text-wrap: pretty; }

/* Fondo con profundidad: dos luces suaves fijas detrás de todo el contenido */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 32rem at 12% -8%, rgba(14, 165, 233, 0.13), transparent 70%),
        radial-gradient(48rem 28rem at 100% 8%, rgba(16, 185, 129, 0.07), transparent 70%),
        radial-gradient(40rem 24rem at 50% 110%, rgba(14, 165, 233, 0.06), transparent 70%);
}

/* Las franjas de portada dejan ver esa luz y suman una cuadrícula casi invisible */
section.bg-gradient-to-b {
    background-image:
        linear-gradient(to bottom, rgb(var(--page) / 0.55), rgb(var(--page) / 0.15) 60%, rgb(var(--page) / 0.55)),
        linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
            mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

/* Chips de confianza de la portada del cotizador */
.trust-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 500; color: rgb(var(--s-300));
    background: rgb(var(--s-900) / 0.6);
    border: 1px solid rgb(var(--s-700) / 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.trust-chip svg { width: 0.875rem; height: 0.875rem; color: #38bdf8; }

/* Las tablas con desplazamiento propio no estiran la página (etiquetas sr-only absolutas) */
.overflow-x-auto { position: relative; }

/* Superficies: borde de luz interior y sombra teñida del fondo */
.bg-slate-800\/80.rounded-2xl, .bg-slate-900.rounded-2xl {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -28px rgba(2, 6, 23, 0.7);
}

/* Respuesta táctil al presionar: el escalado también se anima (Tailwind no lo incluye en su transition) */
button, a[role="button"] {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;
    transition-duration: 160ms;
    transition-timing-function: var(--ease-out);
}
button:not(:disabled):active, a[role="button"]:active { scale: 0.97; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Botones primarios: borde de luz arriba y resplandor de marca */
button.from-brand-600, button.bg-brand-600 {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px -10px rgba(14, 165, 233, 0.6);
}
button.from-emerald-600, button[class*="!bg-emerald-600"] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px -10px rgba(16, 185, 129, 0.6);
}

/* Campos: el foco ilumina el borde con un halo en vez de cortar de golpe */
input, textarea, select {
    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

/* Foco visible solo con teclado */
:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; border-radius: 10px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* Entrada de vistas y ventanas */
/* translate/scale independientes: no pisan los transform de Tailwind (centrado del aviso, etc.) */
@keyframes riseIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes popIn { from { opacity: 0; translate: 0 6px; scale: 0.98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.view-enter > *, .view-enter > div > main > * { animation: riseIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.view-enter > *:nth-child(2), .view-enter > div > main > *:nth-child(2) { animation-delay: 70ms; }
.view-enter > *:nth-child(3), .view-enter > div > main > *:nth-child(3) { animation-delay: 140ms; }
[id^="modal-"]:not(.hidden) { animation: fadeIn 180ms ease-out both; }
[id^="modal-"]:not(.hidden) > div { animation: popIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#toast:not(.hidden) { animation: popIn 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Móvil: la pestaña activa muestra su nombre */
@media (max-width: 639px) {
    [role="group"][aria-label="Cambiar vista"] button[aria-pressed="true"] span.hidden { display: inline; }
    [role="group"][aria-label="Cambiar vista"] > * { white-space: nowrap; }
    #brand-subtitle { display: none; }
}
/* Teléfonos angostos con el botón del recibo visible: queda el logo, se oculta la palabra */
@media (max-width: 420px) {
    header.sticky:has(#btn-header-receipt:not(.hidden)) #brand-word { display: none; }
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgb(var(--s-800));
}
::-webkit-scrollbar-thumb {
    background: rgb(var(--s-700));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--s-600));
}

/* Pulse animation for active status */
@keyframes statusPing {
    75%, 100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
.animate-status-ping {
    animation: statusPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Burbujas del chat: solo la nueva entra, y el indicador "escribiendo" late */
.chat-in { animation: popIn 220ms var(--ease-out) both; }
@keyframes typingDot { 0%, 60%, 100% { opacity: 0.3; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
.typing-dot { width: 5px; height: 5px; border-radius: 999px; background: rgb(var(--s-400)); animation: typingDot 1.1s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 140ms; }
.typing-dot:nth-child(3) { animation-delay: 280ms; }

/* Línea de progreso del estado de la reparación */
#stepper-fill { transition: transform 700ms var(--ease-in-out); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    button:active { scale: 1; }
    .animate-spin { animation: spin 1s linear infinite !important; }   /* el spinner es información, no adorno */
}

/* Canvas for signature */
#sig-canvas {
    touch-action: none;
    cursor: crosshair;
}

/* ---------- Interruptor de tema ---------- */
#theme-toggle .icon-sun { display: none; }
html[data-theme="light"] #theme-toggle .icon-sun { display: block; }
html[data-theme="light"] #theme-toggle .icon-moon { display: none; }

/* ---------- Modo claro: ajustes que la escala invertida no resuelve sola ---------- */
/* Texto blanco de títulos pasa a oscuro, salvo sobre fondos de color (botones, avatares, burbujas) */
html[data-theme="light"] .text-white:not([class*="bg-brand"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-sky"]):not([class*="bg-amber"]):not([class*="bg-violet"]):not([class*="bg-indigo"]):not([class*="from-"]),
html[data-theme="light"] [class*="hover:text-white"]:hover:not([class*="bg-brand"]):not([class*="bg-emerald"]):not([class*="from-"]) {
    color: rgb(var(--s-100));
}
/* Textos de color pensados para fondo oscuro: versiones con contraste sobre blanco */
html[data-theme="light"] .text-emerald-400, html[data-theme="light"] .text-emerald-300 { color: #047857; }
html[data-theme="light"] .text-amber-300, html[data-theme="light"] .text-amber-400 { color: #b45309; }
html[data-theme="light"] .text-rose-400, html[data-theme="light"] .text-rose-300, html[data-theme="light"] .text-rose-100 { color: #be123c; }
html[data-theme="light"] .text-sky-100, html[data-theme="light"] .text-sky-300 { color: #0369a1; }
html[data-theme="light"] .text-violet-300, html[data-theme="light"] .text-indigo-300 { color: #4f46e5; }
html[data-theme="light"] .text-brand-300, html[data-theme="light"] .text-brand-400 { color: #0369a1; }
html[data-theme="light"] .hover\:text-brand-100:hover { color: #0c4a6e; }
html[data-theme="light"] .text-brand-500 { color: #0284c7; }
html[data-theme="light"] .bg-clip-text.text-transparent { color: transparent; }
html[data-theme="light"] .bg-gradient-to-r.from-brand-300 { --tw-gradient-from: #0369a1 var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"] .bg-slate-950\/80, html[data-theme="light"] .bg-slate-950\/90 { background-color: rgb(15 23 42 / 0.45); }
html[data-theme="light"] .shadow-xl, html[data-theme="light"] .shadow-2xl { --tw-shadow-color: rgb(15 23 42 / 0.12); }
html[data-theme="light"] .bg-slate-800\/80.rounded-2xl, html[data-theme="light"] .bg-slate-900.rounded-2xl {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 40px -26px rgba(15, 23, 42, 0.28);
}
html[data-theme="light"] body::before {
    background:
        radial-gradient(60rem 32rem at 12% -8%, rgba(14, 165, 233, 0.12), transparent 70%),
        radial-gradient(48rem 28rem at 100% 8%, rgba(16, 185, 129, 0.07), transparent 70%);
}
html[data-theme="light"] .trust-chip { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
html[data-theme="light"] .trust-chip svg { color: #0284c7; }
html[data-theme="light"] ::selection { background: #bae6fd; color: #0c4a6e; }

/* ---------- Código QR del recibo ---------- */
.receipt-qr { display: inline-block; background: #fff; padding: 6px; border-radius: 8px; line-height: 0; }
.receipt-qr svg { width: 84px; height: 84px; display: block; }

/* ---------- Comparador antes / después ---------- */
.compare { --pos: 50%; position: relative; overflow: hidden; border-radius: 0.75rem; background: rgb(var(--s-900)); user-select: none; touch-action: pan-y; }
.compare img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; pointer-events: none; }
.compare .compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare .compare-handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
    background: #fff; box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.25); pointer-events: none;
}
.compare .compare-handle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 4px 14px rgba(2, 6, 23, 0.4);
}
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:focus-within .compare-handle::after { outline: 2px solid #38bdf8; outline-offset: 2px; }
.compare .compare-tag {
    position: absolute; top: 0.5rem; padding: 0.15rem 0.5rem; border-radius: 999px; pointer-events: none;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(4px);
}

/* ---------- Móvil: las ventanas suben desde abajo como hojas, y se cierran deslizándolas ---------- */
.sheet-grabber { display: none; }
@keyframes sheetIn { from { translate: 0 100%; } to { translate: 0 0; } }
@media (max-width: 639px) {
    [id^="modal-"]:not(#modal-lightbox) { align-items: flex-end; padding: 0; }
    [id^="modal-"]:not(#modal-lightbox) > div {
        width: 100%; max-width: none; max-height: 92dvh;
        border-radius: 22px 22px 0 0; border-bottom-width: 0;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }
    [id^="modal-"]:not(#modal-lightbox):not(.hidden) > div { animation: sheetIn 460ms var(--ease-sheet) both; }
    .sheet-grabber {
        display: block; height: 30px; margin: -1.25rem -1.5rem 0.5rem; touch-action: none; cursor: grab;
    }
    .sheet-grabber::before {
        content: ""; display: block; width: 38px; height: 5px; margin: 12px auto 0;
        border-radius: 999px; background: rgb(var(--s-600));
    }
}

/* ---------- Accesibilidad: menos transparencia y más contraste cuando el sistema lo pide ---------- */
@media (prefers-reduced-transparency: reduce) {
    header.sticky { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgb(var(--page)); }
    [class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
    :root { --s-700: 100 116 139; --s-400: 203 213 225; }
    html[data-theme="light"] { --s-700: 100 116 139; --s-400: 30 41 59; }
    header.sticky { border-bottom-color: rgb(var(--s-700)); }
}

/* =====================================================================
   Portada, capa de movimiento y detalles finos
   Regla general: solo se anima transform/opacity (y filter en cruces cortos);
   cada animación responde a algo (entrar, cambiar de estado, confirmar).
   ===================================================================== */

/* ---------- Grano: textura casi invisible que le quita lo "plano" al degradado ---------- */
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] body::after { opacity: 0.022; }

/* ---------- Portada ---------- */
.hero { isolation: isolate; }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgb(var(--s-400) / 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--s-400) / 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 30% 10%, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse 75% 85% at 30% 10%, #000 25%, transparent 75%);
}
.hero-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hero-aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.hero-aurora span:nth-child(1) { width: 48rem; height: 32rem; left: -14rem; top: -16rem; background: radial-gradient(closest-side, rgba(14, 165, 233, 0.30), transparent); animation: drift1 26s ease-in-out infinite alternate; }
.hero-aurora span:nth-child(2) { width: 38rem; height: 28rem; right: -12rem; top: -8rem; background: radial-gradient(closest-side, rgba(16, 185, 129, 0.16), transparent); animation: drift2 32s ease-in-out infinite alternate; }
.hero-aurora span:nth-child(3) { width: 32rem; height: 24rem; left: 38%; bottom: -18rem; background: radial-gradient(closest-side, rgba(56, 189, 248, 0.16), transparent); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(9rem, 4rem, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-7rem, 5rem, 0) scale(0.9); } }
@keyframes drift3 { to { transform: translate3d(-9rem, -3rem, 0) scale(1.12); } }
html[data-theme="light"] .hero-aurora span { opacity: 0.6; }
/* Fuera de la pantalla no se gasta batería animando la portada */
.hero.is-offscreen *, .hero.is-offscreen *::before, .hero.is-offscreen *::after { animation-play-state: paused !important; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 500; color: rgb(var(--s-300));
    background: rgb(var(--s-900) / 0.55); border: 1px solid rgb(var(--s-700) / 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 999px; background: #34d399; flex-shrink: 0; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #34d399; animation: statusPing 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* "tu equipo": un brillo que cruza una sola vez al cargar */
.text-shine {
    background: linear-gradient(100deg, #7dd3fc 0%, #0ea5e9 38%, #38bdf8 44%, #f0f9ff 50%, #38bdf8 56%, #7dd3fc 62%, #0ea5e9 100%);
    background-size: 250% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 1.8s var(--ease-out) 300ms both;
}
html[data-theme="light"] .text-shine {
    background-image: linear-gradient(100deg, #0284c7 0%, #0369a1 38%, #0284c7 44%, #7dd3fc 50%, #0284c7 56%, #0284c7 62%, #0369a1 100%);
}
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.btn-hero, .btn-hero-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.25rem; border-radius: 0.9rem; font-size: 0.9rem; font-weight: 600;
    transition-property: filter, box-shadow, border-color, background-color, scale;
    transition-duration: 180ms; transition-timing-function: var(--ease-out);
}
.btn-hero {
    color: #fff; background: linear-gradient(180deg, #0ea5e9, #0284c7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(14, 165, 233, 0.55), 0 12px 32px -12px rgba(14, 165, 233, 0.75);
}
.btn-hero-ghost {
    color: rgb(var(--s-200)); background: rgb(var(--s-900) / 0.6); border: 1px solid rgb(var(--s-700));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (hover: hover) and (pointer: fine) {
    .btn-hero:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(56, 189, 248, 0.7), 0 16px 40px -12px rgba(14, 165, 233, 0.9); }
    .btn-hero-ghost:hover { border-color: rgb(var(--s-500)); background: rgb(var(--s-800) / 0.8); }
}

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 34rem; }
.hero-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.2rem; padding-left: 0.9rem; border-left: 1px solid rgb(var(--s-700)); }
.hero-stats dd { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: rgb(var(--s-50)); }
.hero-stats dt { font-size: 0.72rem; line-height: 1.3; color: rgb(var(--s-400)); }
@media (max-width: 639px) { .hero-stats dd { font-size: 1.35rem; } .hero-stats > div { padding-left: 0.7rem; } }

/* Ilustración del teléfono: inclinado en 3D; el mouse lo mueve con un resorte (js/efectos.js) */
.hero-visual { position: relative; height: 440px; perspective: 1200px; display: flex; align-items: center; justify-content: center; }
.hv-tilt { position: relative; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-16deg) rotateZ(2deg); will-change: transform; }
.hv-phone {
    position: relative; width: 232px; height: 404px; border-radius: 44px; padding: 10px;
    background: linear-gradient(145deg, #3b4a5f, #0f172a 42%, #1e293b);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 60px 90px -36px rgba(2, 6, 23, 0.95), 0 30px 70px -40px rgba(14, 165, 233, 0.6);
}
html[data-theme="light"] .hv-phone { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 50px 80px -36px rgba(15, 23, 42, 0.55), 0 30px 70px -40px rgba(14, 165, 233, 0.5); }
.hv-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: radial-gradient(130% 70% at 50% 0%, #0c4a6e 0%, #0b1120 62%); }
.hv-island { position: absolute; top: 20px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 999px; background: #000; z-index: 3; }
.hv-scan {
    position: absolute; left: 0; right: 0; top: -90px; height: 90px; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, 0.14) 70%, rgba(125, 211, 252, 0.5));
    border-bottom: 1px solid rgba(186, 230, 253, 0.85);
    animation: hvScan 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes hvScan {
    0% { transform: translateY(0); opacity: 0; }
    5% { opacity: 1; }
    34% { transform: translateY(480px); opacity: 1; }
    38%, 100% { transform: translateY(480px); opacity: 0; }
}
.hv-ui { position: relative; z-index: 2; height: 100%; padding: 56px 14px 16px; display: flex; flex-direction: column; gap: 10px; color: #e2e8f0; font-size: 11px; }
.hv-head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.16); }
.hv-head b { display: block; font-size: 13px; color: #fff; letter-spacing: -0.01em; }
.hv-head small { display: block; font-size: 10.5px; color: #94a3b8; }
.hv-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(14, 165, 233, 0.2); color: #7dd3fc; flex-shrink: 0; }
.hv-lines { display: flex; flex-direction: column; gap: 7px; }
.hv-lines li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(148, 163, 184, 0.1); color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-lines li svg { color: #38bdf8; flex-shrink: 0; }
.hv-total { margin-top: auto; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(14, 165, 233, 0.12)); border: 1px solid rgba(52, 211, 153, 0.35); }
.hv-total small { display: block; font-size: 10px; color: #94a3b8; }
.hv-total b { display: block; font-size: 22px; font-weight: 800; color: #34d399; letter-spacing: -0.02em; }
.hv-cta { text-align: center; padding: 10px; border-radius: 12px; font-weight: 600; font-size: 12px; color: #fff; background: linear-gradient(180deg, #0ea5e9, #0284c7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
/* La pantalla "arma" el estimado: pasa el escáner, aparecen las líneas, luego el total */
.hv-lines li, .hv-total, .hv-cta { animation: hvIn 6s var(--ease-out) infinite both; }
.hv-lines li:nth-child(2) { animation-delay: 0.16s; }
.hv-lines li:nth-child(3) { animation-delay: 0.32s; }
.hv-total { animation-delay: 0.55s; }
.hv-cta { animation-delay: 0.75s; }
@keyframes hvIn {
    0%, 36% { opacity: 0; transform: translateY(8px); }
    44%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: none; }
}
.hv-chip {
    position: absolute; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: rgb(var(--s-100));
    background: rgb(var(--s-800) / 0.8); border: 1px solid rgb(var(--s-600) / 0.5);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px -18px rgba(2, 6, 23, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: hvFloat 7s ease-in-out infinite;
}
html[data-theme="light"] .hv-chip { box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.35); }
/* Las etiquetas flotan a los lados sin tapar lo que "escribe" la pantalla */
.hv-chip-1 { top: 30px; left: -118px; transform: translateZ(70px); }
.hv-chip-2 { top: 168px; right: -138px; transform: translateZ(90px); animation-delay: -2.4s; }
.hv-chip-3 { bottom: 34px; left: -128px; transform: translateZ(50px); animation-delay: -4.7s; }
/* Pantallas de escritorio angostas: la ilustración se achica para no cortarse */
@media (max-width: 1279px) { .hero-visual { scale: 0.86; } }
@keyframes hvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ---------- Luz que sigue al cursor en el borde de las tarjetas (solo con mouse) ---------- */
.spot:not(#quote-result) { position: relative; }
.spot-glow { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms ease; }
.spot-glow[data-on] { opacity: 1; }
.spot-glow::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(56, 189, 248, 0.75), rgba(56, 189, 248, 0.1) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.spot-glow::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(56, 189, 248, 0.055), transparent 60%); }
html[data-theme="light"] .spot-glow::before { background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(2, 132, 199, 0.55), rgba(2, 132, 199, 0.08) 45%, transparent 70%); }
html[data-theme="light"] .spot-glow::after { background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(14, 165, 233, 0.05), transparent 60%); }

/* ---------- Aparición al desplazar (solo si el JS la activó: sin JS todo se ve) ---------- */
html.js-reveal [data-reveal] {
    opacity: 0; translate: 0 16px;
    transition: opacity 600ms var(--ease-out), translate 750ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
html.js-reveal [data-reveal].is-revealed { opacity: 1; translate: 0 0; }

/* ---------- Pasos del cotizador: el número se convierte en ✓ al completarlo ---------- */
.step-badge {
    position: relative; width: 1.75rem; height: 1.75rem; border-radius: 999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem;
    color: #7dd3fc; background: rgba(14, 165, 233, 0.15); border: 1px solid rgba(14, 165, 233, 0.3);
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
html[data-theme="light"] .step-badge { color: #0369a1; }
.step-badge .step-num { transition: opacity 160ms ease, scale 220ms var(--ease-out), filter 220ms ease; }
.step-badge .step-check {
    position: absolute; width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 360ms var(--ease-out) 90ms;
}
.step-badge[data-done] { background: #10b981; border-color: #34d399; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); }
.step-badge[data-done] .step-num { opacity: 0; scale: 0.5; filter: blur(2px); }
.step-badge[data-done] .step-check { stroke-dashoffset: 0; }

/* Lista de pasos en la tarjeta vacía del estimado */
.todo { display: flex; flex-direction: column; gap: 0.6rem; }
.todo li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; color: rgb(var(--s-400)); transition: color 200ms ease; }
.todo li .step-badge { width: 1.4rem; height: 1.4rem; font-size: 0.68rem; }
.todo li .step-badge .step-check { width: 11px; height: 11px; }
.todo li[data-done] { color: rgb(var(--s-200)); }

/* ---------- Opciones (fallas, calidad, tiendas) ---------- */
.choice-icon {
    width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    color: rgb(var(--s-400)); background: rgb(var(--s-800)); border: 1px solid rgb(var(--s-700));
}
.choice-icon svg { width: 1rem; height: 1rem; }
[aria-pressed="true"] > .choice-icon { color: #fff; background: #0ea5e9; border-color: #38bdf8; box-shadow: 0 6px 16px -6px rgba(14, 165, 233, 0.75); }
/* Solo la opción recién elegida responde (no las que ya estaban marcadas al redibujar) */
.just-picked { animation: pickRing 520ms var(--ease-out); }
.just-picked .opt-dot, .just-picked > .choice-icon { animation: dotIn 280ms var(--ease-out) both; }
@keyframes pickRing { from { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45); } to { box-shadow: 0 0 0 9px rgba(14, 165, 233, 0); } }
@keyframes dotIn { from { scale: 0.4; opacity: 0; } to { scale: 1; opacity: 1; } }

/* Total del estimado: borde con degradado para que sea lo primero que se lee */
.total-box {
    border: 1px solid transparent;
    background:
        linear-gradient(rgb(var(--s-900) / 0.92), rgb(var(--s-900) / 0.92)) padding-box,
        linear-gradient(135deg, rgba(52, 211, 153, 0.6), rgba(56, 189, 248, 0.35) 50%, rgb(var(--s-700)) 85%) border-box;
}
.save-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 11px; font-weight: 600; color: #6ee7b7; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 999px; padding: 0.1rem 0.5rem; }
html[data-theme="light"] .save-pill { color: #047857; }

/* Cambio de contenido del estimado (otro modelo u otra falla): desenfoque breve que une los dos estados */
.swap-in { animation: swapIn 340ms var(--ease-out) backwards; }
@keyframes swapIn { from { opacity: 0.3; filter: blur(6px); translate: 0 6px; } }

/* ---------- Éxito: el ✓ se dibuja (evento poco frecuente: aquí sí cabe un poco de alegría) ---------- */
.success-mark { width: 56px; height: 56px; animation: popIn 380ms var(--ease-out) both; }
.success-mark circle { fill: rgba(16, 185, 129, 0.12); stroke: rgba(52, 211, 153, 0.5); stroke-width: 1.5; }
.success-mark path { fill: none; stroke: #34d399; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 520ms var(--ease-out) 220ms forwards; }
html[data-theme="light"] .success-mark path { stroke: #059669; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }

/* Botón con dos estados que se cruzan (copiar → copiado) */
.swap-btn { display: inline-grid; place-items: center; }
.swap-btn > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.4rem; transition: opacity 180ms ease, filter 180ms ease, scale 220ms var(--ease-out); }
.swap-btn > :last-child { opacity: 0; filter: blur(4px); scale: 0.9; }
.swap-btn[data-state="on"] > :first-child { opacity: 0; filter: blur(4px); scale: 0.9; }
.swap-btn[data-state="on"] > :last-child { opacity: 1; filter: none; scale: 1; }

/* Buscar → Buscando…: el texto se cruza con el indicador, el botón no cambia de tamaño */
.btn-loading { display: grid; place-items: center; }
.btn-loading > * { grid-area: 1 / 1; transition: opacity 180ms ease, filter 180ms ease, scale 220ms var(--ease-out); }
.btn-loading .btn-busy { display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0; filter: blur(4px); scale: 0.94; }
.btn-loading[data-loading] .btn-label { opacity: 0; filter: blur(4px); scale: 0.94; }
.btn-loading[data-loading] .btn-busy { opacity: 1; filter: none; scale: 1; }
.btn-loading[data-loading]:disabled { opacity: 1; cursor: progress; }
.spinner { width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spinner 600ms linear infinite; }
@keyframes spinner { to { rotate: 360deg; } }

/* Código de orden: se ve en mayúsculas mientras se escribe (la consulta igual lo convierte) */
.code-input { text-transform: uppercase; letter-spacing: 0.04em; }
.code-input::placeholder { text-transform: none; letter-spacing: 0; }

/* ---------- Mi orden: anillo de avance ---------- */
.progress-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.progress-ring svg { width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.ring-track { fill: none; stroke: rgb(var(--s-700)); stroke-width: 4.5; }
.ring-bar {
    fill: none; stroke: url(#ring-grad); stroke-width: 4.5; stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset 1100ms var(--ease-in-out);
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.45));
}
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring-label b { font-size: 1.15rem; font-weight: 800; color: rgb(var(--s-50)); }
.ring-label small { font-size: 9px; color: rgb(var(--s-400)); margin-top: 2px; }

/* Línea de tiempo: el paso actual late; los pasos se encienden cuando la barra los alcanza */
.step-node { transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, color 300ms ease; }
.step-node-active { position: relative; }
.step-node-active::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 2px solid rgba(56, 189, 248, 0.55); animation: halo 2.2s var(--ease-out) infinite; pointer-events: none; }
@keyframes halo { from { opacity: 0.9; scale: 0.8; } to { opacity: 0; scale: 1.35; } }
.step-pop { animation: stepPop 420ms var(--ease-out) backwards; }
@keyframes stepPop { from { scale: 0.6; opacity: 0.2; } }

/* Historial: el evento más nuevo late */
.log-dot-new::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: statusPing 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ---------- Mi orden vacío: cómo funciona + recibo de ejemplo ---------- */
.how-steps { display: flex; flex-direction: column; gap: 0.85rem; }
.how-steps li { display: flex; gap: 0.75rem; align-items: flex-start; }
.how-steps li > span {
    width: 1.5rem; height: 1.5rem; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: #7dd3fc; background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.3);
}
html[data-theme="light"] .how-steps li > span { color: #0369a1; }
.how-steps b { display: block; font-size: 0.875rem; font-weight: 600; color: rgb(var(--s-100)); }
.how-steps small { display: block; font-size: 0.78rem; color: rgb(var(--s-400)); }
.mini-receipt {
    position: relative; width: 270px; padding: 20px; border-radius: 16px; rotate: -3deg; margin-top: 28px;
    background: rgb(var(--s-950)); border: 1px solid rgb(var(--s-700));
    box-shadow: 0 30px 60px -30px rgba(2, 6, 23, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="light"] .mini-receipt { box-shadow: 0 24px 50px -28px rgba(15, 23, 42, 0.35); }
.mr-line { height: 6px; border-radius: 99px; background: rgb(var(--s-700) / 0.8); }
.mr-code {
    position: relative; padding: 5px 9px; border-radius: 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700;
    color: rgb(var(--s-50)); background: rgba(14, 165, 233, 0.14); box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.75);
}
.mr-ping { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.9); animation: halo 2.4s var(--ease-out) infinite; }
.mr-hint {
    position: absolute; right: -6px; top: -36px; rotate: 3deg; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px;
    font-size: 11px; font-weight: 600; color: #7dd3fc; background: rgb(var(--s-900)); border: 1px solid rgba(56, 189, 248, 0.4);
}
html[data-theme="light"] .mr-hint { color: #0369a1; }

/* ---------- Aviso flotante: entra y sale por abajo (mismo lado) ---------- */
#toast:not(.hidden) { animation: toastIn 420ms var(--ease-out) both; }
#toast[data-closing] { animation: toastOut 200ms var(--ease-out) both; pointer-events: none; }
@keyframes toastIn { from { opacity: 0; translate: 0 calc(100% + 1.5rem); scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes toastOut { to { opacity: 0; translate: 0 45%; scale: 0.97; } }
#toast-text.text-swap { animation: textSwap 260ms var(--ease-out); }
@keyframes textSwap { from { opacity: 0.2; filter: blur(3px); } }

/* ---------- Ventanas: también salen (más rápido de lo que entran) ---------- */
[id^="modal-"][data-closing] { animation: fadeOut 180ms ease-out both; pointer-events: none; }
[id^="modal-"][data-closing] > div { animation: popOut 180ms var(--ease-out) both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popOut { to { opacity: 0; translate: 0 6px; scale: 0.98; } }
@media (max-width: 639px) {
    [id^="modal-"]:not(#modal-lightbox)[data-closing] > div { animation: sheetOut 260ms var(--ease-sheet) both; }
}
@keyframes sheetOut { to { translate: 0 100%; } }

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: spinner 1s linear infinite !important; }   /* informa que algo carga */
    .success-mark path { stroke-dashoffset: 0; }
    html.js-reveal [data-reveal] { opacity: 1; translate: 0 0; }
    .hv-tilt { transform: rotateX(8deg) rotateY(-16deg) rotateZ(2deg) !important; }
    .hv-lines li, .hv-total, .hv-cta { opacity: 1; }
}

/* Print styling for receipts */
@media print {
    body * {
        visibility: hidden;
    }
    #printable-receipt, #printable-receipt * {
        visibility: visible;
    }
    #printable-receipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #000 !important;
        background: #fff !important;
        padding: 20px;
    }
    /* En papel todo va en negro sobre blanco, sin importar el tema de la pantalla */
    #printable-receipt *:not(.receipt-qr):not(.receipt-qr *) {
        color: #000 !important;
        background: transparent !important;
        border-color: #cbd5e1 !important;
    }
    .no-print {
        display: none !important;
    }
}