/* ==========================================================
   FX — Capa de mejoras visuales (capa extra, no reemplaza nada)
   Respetan prefers-reduced-motion vía variables.css
   ========================================================== */

::selection { background: rgba(61, 123, 255, 0.22); color: var(--text); }

/* Barra de progreso de scroll (inyectada por fx.js) */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--accent-gradient);
    box-shadow: 0 0 12px rgba(61, 123, 255, 0.5);
    z-index: 300;
    pointer-events: none;
}

/* Navbar: se "asienta" al hacer scroll (más opaco + sombra) */
.navbar {
    transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.navbar.scrolled {
    background: var(--nav-bg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
    border-bottom-color: var(--border-strong);
}

/* Auroras del hero: dos focos de luz que derivan lentamente */
.hero { position: relative; isolation: isolate; }
.hero::before {
    content: '';
    position: absolute;
    inset: -12% -6%;
    z-index: -1;
    background:
        radial-gradient(ellipse 38% 32% at 16% 22%, var(--bg-glow-blue), transparent 70%),
        radial-gradient(ellipse 34% 26% at 84% 14%, var(--bg-glow-violet), transparent 70%);
    filter: blur(24px);
    animation: aurora-drift 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes aurora-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(-1%, -2%, 0) scale(0.97); }
}

/* Título del hero: el degradado se desplaza (shimmer sutil) */
.hero-title .grad {
    background-size: 200% auto;
    animation: grad-shift 7s ease-in-out infinite;
}
@keyframes grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Enlaces de navegación y footer: subrayado que se dibuja al pasar */
.navbar-links a:not(.btn),
.footer-links a {
    position: relative;
}
.navbar-links a:not(.btn)::after,
.footer-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--accent-cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease);
}
.navbar-links a:not(.btn):hover::after,
.navbar-links a:not(.btn):focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
    transform: scaleX(1);
}

/* Botón secundario: leve halo al pasar */
.btn-outline:hover { box-shadow: 0 0 0 1px rgba(61, 123, 255, 0.3); }

/* Tarjetas de testimonio: línea de acento que se dibuja al pasar */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 3px; width: 100%;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.testimonial-card:hover::before { transform: scaleX(1); }

/* FAQ: la respuesta aparece suavemente al abrir */
.faq-item[open] .faq-answer { animation: faq-in 0.35s var(--ease); }
@keyframes faq-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Caja de newsletter: resplandor sutil al pasar */
.newsletter-box { transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.newsletter-box:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-soft), 0 0 50px rgba(61, 123, 255, 0.16);
}

/* Aparición suave del formulario flotante de WhatsApp */
.wa-float { animation: wa-in 0.6s var(--ease) 0.4s backwards; }
@keyframes wa-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   GLASSMORPHISM — superficie translúcida sobre orbes
   ========================================================== */

/* Orbes de fondo para que el vidrio tenga algo que refractar */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42vw 42vw at 12% 16%, var(--bg-glow-blue), transparent 70%),
        radial-gradient(36vw 36vw at 88% 20%, var(--bg-glow-violet), transparent 70%),
        radial-gradient(32vw 32vw at 72% 90%, var(--bg-glow-cyan), transparent 70%),
        radial-gradient(26vw 26vw at 18% 86%, var(--bg-glow-emerald), transparent 70%);
    animation: orb-drift 22s ease-in-out infinite alternate;
}
@keyframes orb-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/* Retícula de puntos sutil para romper el plano */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--glass-dot) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.5;
}

/* Receta base: panel de vidrio */
.glass,
.terminal,
.services-tabs,
.project-card,
.price-card,
.process-step,
.guarantee-band,
.compare,
.testimonial-card,
.newsletter-box,
.calc,
.contact-form,
.cta-band,
.faq-item,
.about-stats,
.about-terminal,
.demo,
.trust-strip,
.pay-modal,
.nf-terminal,
.ecommerce-feature,
.scale-feature,
.why-item,
.team-card,
.blog-card,
.service-feature,
.engineering-card,
.service-price-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-bottom-color: rgba(125, 145, 180, 0.30);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    box-shadow: var(--shadow-3d), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

/* Elevación al pasar el cursor: el cristal se despega del fondo */
.project-card,
.price-card,
.team-card,
.process-step,
.blog-card,
.service-feature,
.engineering-card,
.service-price-card,
.why-item {
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.project-card:hover,
.price-card:hover,
.team-card:hover,
.process-step:hover,
.blog-card:hover,
.service-feature:hover,
.engineering-card:hover,
.service-price-card:hover,
.why-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(46, 68, 108, 0.16), 0 12px 26px rgba(61, 91, 140, 0.24), 0 28px 60px rgba(41, 63, 105, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Barras y "chrome" internos: vidrio más denso */
.terminal-bar,
.terminal-top,
.terminal-chrome,
.services-tab-list,
.demo-bar,
.nf-bar {
    background: var(--glass-fill);
    border-color: var(--glass-border);
}

/* Paneles internos con mucho texto: vidrio más opaco para legibilidad */
.demo-sidebar,
.demo-main,
.pos-cart,
.kpi,
.calc-group,
.calc-result {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border);
}

/* Navbar: refuerza el desenfoque */
.navbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.navbar.scrolled {
    background: var(--nav-bg);
}
.navbar-links.open {
    background: var(--nav-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Enlaces de contacto y FAQ como chips de vidrio */
.contact-link {
    background: var(--glass-fill);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}
.contact-link:hover { background: var(--glass-bg-strong); }
.faq-item {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}
.faq-item[open] { background: var(--glass-bg); }

/* Inputs y selects: fondo de vidrio */
.form-row input,
.form-row textarea,
.form-row select,
.newsletter-form input[type="email"],
.demo-search {
    background: var(--glass-fill);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Botones: borde superior luminoso para "espesor" */
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* Ajuste de perfiles: hover con vidrio más opaco */
.project-card:hover,
.price-card:hover,
.testimonial-card:hover,
.process-step:hover {
    background: var(--glass-bg-strong);
}

/* Sin soporte de backdrop-filter: superficies casi opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass,
    .terminal,
    .services-tabs,
    .project-card,
    .price-card,
    .process-step,
    .guarantee-band,
    .compare,
    .testimonial-card,
    .newsletter-box,
    .calc,
    .contact-form,
    .cta-band,
    .faq-item,
    .about-stats,
    .about-terminal,
    .demo,
    .trust-strip,
    .pay-modal,
    .nf-terminal {
        background: var(--bg-raised);
    }
    body::before,
    body::after { opacity: 0.35; }
}

/* ==========================================================
   RESPONSIVE — pantalla completa sin desbordes
   ========================================================== */
@media (max-width: 640px) {
    .container { padding-inline: var(--space-sm); }
    .hero { padding-block: var(--space-lg) var(--space-xl); }
    .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .hero-meta { gap: var(--space-sm); }
    .terminal-body { min-height: 220px; }
}
@media (max-width: 400px) {
    .container { padding-inline: 1rem; }
    .hero-meta > div { width: 100%; }
}

/* Hero a pantalla completa en desktop (descontando la navbar fija) */
@media (min-width: 992px) {
    .hero { min-height: calc(100vh - var(--nav-height)); min-height: calc(100svh - var(--nav-height)); display: flex; align-items: center; }
    .hero > .container { flex: 1; }
}

/* ==========================================================
   CONFIANZA — cintillo de beneficios
   ========================================================== */
.trust-wrap { padding-block: 0 0; }
.trust-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.85rem;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
}
.trust-item:last-child { border-right: none; }
.trust-check {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(34, 211, 168, 0.14);
    color: var(--success);
    font-size: 0.78rem;
}
@media (max-width: 960px) {
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
    .trust-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .trust-item:nth-child(2n) { border-right: none; }
    .trust-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 520px) {
    .trust-strip { grid-template-columns: 1fr; }
    .trust-item { border-right: none; }
}

/* ==========================================================
   CONFIANZA — proceso de trabajo
   ========================================================== */
.process-grid { --bs-gutter-x: var(--space-sm); }
.process-step {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.process-step::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 3px; width: 100%;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.process-step:hover {
    transform: translateY(-5px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-soft);
}
.process-step:hover::before { transform: scaleX(1); }
.process-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-cyan);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-xs);
}
.process-step h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: var(--space-2xs);
}
.process-step p { font-size: 0.88rem; color: var(--text-muted); }

/* ==========================================================
   CONFIANZA — garantías / nuestra palabra
   ========================================================== */
.guarantee-band {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    padding: var(--space-lg);
}
.guarantee-band::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 45% at 50% 0%, var(--bg-glow-blue), transparent 70%);
    opacity: 0.55;
}
.guarantee-band .section-head { position: relative; margin-bottom: var(--space-md); }
.guarantee-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}
.guarantee-item {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.guarantee-icon {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--accent-cyan);
}
.guarantee-icon svg { width: 20px; height: 20px; }
.guarantee-item strong {
    font-family: var(--font-display);
    color: var(--text);
}
.guarantee-item p { font-size: 0.88rem; color: var(--text-muted); }
@media (max-width: 900px) {
    .guarantee-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .guarantee-grid { grid-template-columns: 1fr; }
    .guarantee-band { padding: var(--space-md); }
}

/* ==========================================================
   COMPARATIVA — plantillas vs a medida
   ========================================================== */
.compare {
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-highlight);
}
.compare-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}
.compare-table th,
.compare-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--glass-border);
}
.compare-table tr:last-child td,
.compare-table tr:last-child th { border-bottom: none; }
.compare-table thead th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    padding-block: var(--space-xs);
}
.compare-table th.compare-feature,
.compare-table td:first-child {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.compare-table td:not(:first-child) { color: var(--text-muted); }
.compare-table th.compare-winner,
.compare-table td.compare-winner {
    color: var(--accent-cyan);
    background: var(--glass-fill);
}

/* Móvil: cada fila se convierte en una tarjeta apilada (sin deslizar) */
@media (max-width: 800px) {
    .compare { overflow: visible; border: none; background: transparent; box-shadow: none; }
    .compare-table { min-width: 0; display: block; }
    .compare-table thead { display: none; }
    .compare-table tbody { display: block; }
    .compare-table tr {
        display: block;
        margin-bottom: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
        backdrop-filter: blur(var(--glass-blur)) saturate(150%);
        box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-highlight);
    }
    .compare-table tr:last-child { margin-bottom: 0; }
    .compare-table th.compare-feature {
        display: block;
        white-space: normal;
        font-family: var(--font-display);
        font-size: 1.05rem;
        padding: 0 0 var(--space-2xs);
        margin-bottom: var(--space-2xs);
        border-bottom: 1px solid var(--glass-border);
    }
    .compare-table td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        padding: var(--space-2xs) 0;
        border: none;
        white-space: normal;
        font-weight: 400;
        color: var(--text-muted) !important;
    }
    .compare-table td:first-child {
        white-space: normal;
        color: var(--text-muted) !important;
    }
    .compare-table td::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-dim);
    }
    .compare-table td.compare-winner {
        color: var(--accent-cyan) !important;
        background: transparent;
    }
}

/* ==========================================================
   PRECIOS — planes de mantenimiento
   ========================================================== */
.pricing-sub {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: var(--space-xl);
    margin-bottom: 0;
}
.pricing-sub em { font-style: normal; color: var(--accent-cyan); }
.price-card.featured {
    position: relative;
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-soft), 0 0 40px rgba(61, 123, 255, 0.15);
}

/* ==========================================================
   CONTACTO — métodos de pago y seguridad
   ========================================================== */
.payment-block { margin-top: var(--space-md); }
.payment-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: var(--space-xs);
}
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}
.payment-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}
.payment-note {
    margin-top: var(--space-xs);
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.6;
}
.contact-link .icon { display: inline-flex; }
.contact-link .icon svg { width: 20px; height: 20px; color: var(--accent-cyan); }

/* ==========================================================
   FOOTER — línea de seguridad
   ========================================================== */
.footer-secure {
    margin-top: var(--space-md);
    text-align: center;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-dim);
}

/* ==========================================================
   CALCULADORA DE PRESUPUESTO
   ========================================================== */
.calc {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-raised);
    padding: var(--space-md);
    max-width: 900px;
    margin-inline: auto;
}
.calc-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-md);
}
.calc-form { display: flex; flex-direction: column; gap: var(--space-md); }
.calc-group { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.calc-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: var(--space-xs);
}
.calc-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease);
}
.calc-option:hover { color: var(--text); }
.calc-option input { accent-color: var(--accent-cyan); flex-shrink: 0; }
.calc-option:has(input:checked) { color: var(--text); }
.calc-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-md);
    align-self: start;
    min-width: 220px;
}
.calc-result-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.calc-total {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent-cyan);
    line-height: 1.1;
}
.calc-note { font-size: 0.82rem; color: var(--text-muted); }
@media (max-width: 760px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-result { width: 100%; }
}

/* ==========================================================
   PÁGINA 404
   ========================================================== */
.nf-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    text-align: center;
}
.nf-terminal {
    width: min(480px, 100%);
    text-align: left;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    font-family: var(--font-mono);
}
.nf-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.nf-bar > span:not(.nf-path) { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.nf-bar > span:nth-child(1) { background: #ff5f57; }
.nf-bar > span:nth-child(2) { background: #febc2e; }
.nf-bar > span:nth-child(3) { background: #28c840; }
.nf-path { margin-left: auto; font-size: 0.7rem; color: var(--text-dim); }
.nf-code {
    margin: 0;
    padding: var(--space-md);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.nf-prompt { color: var(--accent-cyan); }
.nf-error { color: #ff6b6b; }
.nf-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 10vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--accent-cyan);
    text-shadow: 0 0 40px rgba(15, 163, 201, 0.35);
}
.nf-sub { color: var(--text-muted); }
.nf-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }

/* ==========================================================
   TRANSICIÓN DE PÁGINA — deslizamiento con rebote (gelatina)
   ========================================================== */

/* Fondo estable durante la transición (evita parpadeo blanco) */
::view-transition-group(root) {
    background-color: #EDF2FA;
}

/* Adelante: la actual sale a la izquierda, la nueva entra por la derecha */
::view-transition-old(root) {
    animation: vt-out-left 3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
    animation: vt-in-right 3s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

/* Atrás (volver a Crisan): la actual sale a la derecha,
   la nueva se revela desde la izquierda */
html.vt-to-home::view-transition-old(root) {
    animation-name: vt-out-right;
}
html.vt-to-home::view-transition-new(root) {
    animation-name: vt-in-left;
}

@keyframes vt-out-left {
    from { transform: translateX(0); opacity: 1; }
    40%  { transform: translateX(-12%); opacity: 1; }
    to   { transform: translateX(-45%); opacity: 1; }
}
@keyframes vt-in-right {
    0%   { transform: translateX(45%); opacity: 0; }
    30%  { transform: translateX(10%); opacity: 0.3; }
    70%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes vt-out-right {
    from { transform: translateX(0); opacity: 1; }
    40%  { transform: translateX(12%); opacity: 1; }
    to   { transform: translateX(45%); opacity: 1; }
}
@keyframes vt-in-left {
    0%   { transform: translateX(-45%); opacity: 0; }
    30%  { transform: translateX(-10%); opacity: 0.3; }
    70%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}