/* ============================================================
   Facturantes 2026 — Design System (rediseño)
   Tokens claro/oscuro, base, animaciones y componentes.
   ============================================================ */

:root {
    --bg: #F7F8FA; --surface: #FFFFFF; --surface2: #EDF1F5; --sunk: #F2F5F8;
    --ink: #0C273F; --ink2: #5B6B7C; --ink3: #8B9AA9;
    --line: rgba(12, 39, 63, .13); --line2: rgba(12, 39, 63, .06);
    --navy: #203C60; --navyInk: #2C5077; --accentInk: #2C5077;
    --cta: #FFCC29; --ctaInk: #0C273F; --ctaHover: #E5A403;
    --red: #B81D2E; --onNavy: #FFFFFF;
    --chip: rgba(32, 60, 96, .07); --glow: rgba(71, 118, 160, .16); --dot: rgba(32, 60, 96, .10);
    --band: #E7ECF1;
    --shadow: 0 1px 2px rgba(12, 39, 63, .06), 0 12px 32px -12px rgba(12, 39, 63, .18);
    --shadowLg: 0 2px 4px rgba(12, 39, 63, .05), 0 40px 80px -32px rgba(12, 39, 63, .30);
    --logoFilter: none; --logoLight: block; --logoDark: none;
}

html[data-om-theme="dark"] {
    --bg: #0A2036; --surface: #163251; --surface2: #1D3E60; --sunk: #0C273F;
    --ink: #FFFFFF; --ink2: #C6D5E3; --ink3: #8CA7C0;
    --line: rgba(255, 255, 255, .13); --line2: rgba(255, 255, 255, .06);
    --navy: #163251; --navyInk: #FFD45A; --accentInk: #FFCC29;
    --cta: #FFCC29; --ctaInk: #0C273F; --ctaHover: #FFD45A;
    --red: #D8416C; --onNavy: #FFFFFF;
    --chip: rgba(255, 255, 255, .08); --glow: rgba(71, 118, 160, .30); --dot: rgba(255, 255, 255, .09);
    --band: #0E2334;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --shadowLg: 0 2px 4px rgba(0, 0, 0, .3), 0 40px 80px -32px rgba(0, 0, 0, .8);
    --logoFilter: brightness(1.9) contrast(1.05); --logoLight: none; --logoDark: block;
}

* { box-sizing: border-box; }

.v2026 {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Rubik, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

.v2026 a { color: var(--accentInk); text-decoration: none; }
.v2026 a:hover { color: var(--ink); }
.v2026 h1, .v2026 h2, .v2026 h3, .v2026 h4 {
    margin: 0; font-family: Rubik, system-ui, sans-serif; letter-spacing: -.02em; line-height: 1.06;
}
.v2026 p { margin: 0; }

/* ---------- Keyframes ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ring { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -10px); } }
@keyframes float2 { 0%, 100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-18px) rotate(1.6deg); } }
@keyframes orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes aura { 0%, 100% { opacity: .4; transform: scale(.94); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes sparkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10px, -14px) scale(1.06); } 100% { transform: translate(-8px, 8px) scale(.96); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 41, .34); } 50% { box-shadow: 0 0 34px 6px rgba(255, 204, 41, .28); } }

/* ---------- Scroll reveal ---------- */
.v2026 [data-anim] {
    opacity: 0; transform: translateY(22px);
    transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1);
}
.v2026 [data-anim][data-in="1"] { opacity: 1; transform: none; }
.v2026 [data-anim="left"] { transform: translateX(-64px); }
.v2026 [data-anim="right"] { transform: translateX(64px); }
.v2026 [data-anim="left"][data-in="1"], .v2026 [data-anim="right"][data-in="1"] { transform: none; }

/* ---------- Cards ---------- */
.v2026 [data-card] {
    position: relative; overflow: hidden;
    transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, box-shadow .32s;
}
.v2026 [data-card]:hover {
    transform: translateY(-6px); border-color: var(--accentInk);
    box-shadow: 0 18px 50px -12px var(--glow), var(--shadowLg);
}

/* ---------- Glow CTA ---------- */
.v2026 [data-glow] { animation: glowPulse 2.6s ease-in-out infinite; }
.v2026 [data-glow]:hover { animation: none; transform: translateY(-2px) scale(1.015); }

/* ---------- Nav underline ---------- */
.v2026 [data-nav] { position: relative; }
.v2026 [data-nav]::after {
    content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
    background: var(--accentInk); transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.v2026 [data-nav]:hover::after { transform: scaleX(1); }
.v2026 [data-nav][data-active="true"] { color: var(--ink); background: var(--chip); }

.v2026 a, .v2026 button { transition: background-color .2s, color .2s, border-color .2s, opacity .2s; }

/* ---------- Responsive nav ---------- */
.v2026 [data-m="burger"] { display: none; }
.v2026 [data-m="nav"] { display: flex; }
@media (max-width: 1240px) {
    .v2026 [data-m="nav"], .v2026 [data-m="login"] { display: none; }
    .v2026 [data-m="burger"] { display: grid; }
}
@media (max-width: 1100px) {
    .v2026 [data-m="herocard"] { width: min(430px, 76%) !important; margin-right: auto; }
}
@media (max-width: 720px) {
    .v2026 [data-m="herocard"] { width: 100% !important; }
}

/* ---------- Chat del hero ---------- */
.v2026 .chat-msg {
    font-size: 13.5px; line-height: 1.45; padding: 10px 13px; max-width: 88%;
    animation: pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.v2026 .chat-user {
    align-self: flex-end; background: var(--navy); color: var(--onNavy);
    border-radius: 14px 14px 4px 14px;
}
.v2026 .chat-bot {
    align-self: flex-start; background: var(--sunk); border: 1px solid var(--line2); color: var(--ink);
    border-radius: 14px 14px 14px 4px; line-height: 1.5;
}
.v2026 .chat-dots {
    align-self: flex-start; display: flex; gap: 5px; background: var(--sunk);
    border: 1px solid var(--line2); padding: 13px; border-radius: 14px 14px 14px 4px;
}
.v2026 .chat-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); animation: blink 1s infinite;
}
.v2026 .chat-dots span:nth-child(2) { animation-delay: .2s; }
.v2026 .chat-dots span:nth-child(3) { animation-delay: .4s; }

/* ---------- Acordeones (details/summary) ---------- */
.v2026 summary { list-style: none; cursor: pointer; }
.v2026 summary::-webkit-details-marker { display: none; }
.v2026 details[open] .om-plus { transform: rotate(45deg); }

/* ---------- Régimen (planes) ---------- */
.v2026 [data-reg-btn].reg-active { color: var(--ctaInk); background: var(--cta); border-color: var(--cta); }
.v2026 [data-reg-result] { display: none; }
.v2026 [data-reg-result].reg-show { display: grid; }

/* ---------- Grilla de planes: 5 en una fila (escritorio), responsive ---------- */
.v2026 .plans-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    align-items: stretch;
}
.v2026 .plans-grid > div { padding: 22px !important; }
@media (max-width: 1180px) { .v2026 .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .v2026 .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .v2026 .plans-grid { grid-template-columns: 1fr; } }

/* ---------- Tabs (control de tu negocio) ---------- */
.v2026 [data-tab-btn].tab-active {
    color: var(--ctaInk); background: var(--cta); border-color: var(--cta);
}
.v2026 [data-tab-panel] { display: none; }
.v2026 [data-tab-panel].tab-show { display: block; animation: pop .3s ease both; }

/* ---------- Facturito (burbuja de chat) ---------- */
.v2026 .fbot-chip {
    font-size: 12px; font-weight: 600; color: var(--navyInk);
    background: var(--chip); border: 1px solid var(--line);
    padding: 7px 11px; border-radius: 999px; cursor: pointer;
}
.v2026 .fbot-chip:hover { border-color: var(--accentInk); color: var(--ink); }

/* ---------- Responsive / móvil ---------- */
html { overflow-x: clip; }
body.v2026 { overflow-x: clip; max-width: 100%; }
.v2026 img, .v2026 svg { max-width: 100%; }
.v2026 [data-mobile-menu] { display: none; }
.v2026 [data-mobile-menu].open { display: flex; }

/* Usamos el wordmark completo; el iso queda oculto */
.v2026 .logo-iso { display: none !important; }

@media (max-width: 720px) {
    /* Encabezado más compacto en móvil */
    .v2026 header > div:first-child { gap: 10px !important; height: 62px !important; }
    /* Logo completo más pequeño para que no tape el menú */
    .v2026 .logo-full { height: 23px !important; }
    /* Botón "Prueba gratis" más compacto en móvil */
    .v2026 [data-m="login"] + a { padding: 9px 13px !important; font-size: 13.5px !important; }
    /* Reducir tamaños decorativos que empujan el layout */
    .v2026 [data-m="herocard"] { box-shadow: var(--shadow) !important; }

    /* Filas "Sistemas propios / Servicios a medida": titulo + flecha arriba, descripcion completa debajo */
    .v2026 .sol-row { align-items: center !important; row-gap: 6px !important; }
    .v2026 .sol-title { flex: 1 1 auto !important; }
    .v2026 .sol-arrow { order: 2; }
    .v2026 .sol-desc { flex: 1 1 100% !important; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .v2026 [data-anim] { opacity: 1; transform: none; transition: none; }
    .v2026 [data-card]:hover { transform: none; }
    .v2026 * { animation: none !important; }
}