/* ===== Design tokens ===== */
:root {
    --font-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
    --blue: #F96B11;
    --sky: #FF8A3D;
    --radius: 25px;
    --radius-sm: 14px;
    --container: 1180px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark theme (default) — cold glacier */
:root, :root[data-theme="dark"] {
    --ink: #0C0C0E;
    --ink-2: #18181B;
    --surface: #141416;
    --card: rgba(255, 255, 255, 0.035);
    --card-border: #2A2A2E;
    --text: #F5F5F7;
    --text-soft: #A1A1A6;
    --text-dim: #86868B;
    --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
    --bg-hero: radial-gradient(1200px 700px at 70% -10%, #1E1E22 0%, var(--ink) 62%);
    --grid-line: rgba(255, 138, 61, 0.05);
    --ghost-bg: rgba(255, 255, 255, 0.05);
    --ghost-bg-hover: rgba(255, 255, 255, 0.09);
    --input-bg: rgba(255, 255, 255, 0.03);
    --slider-track: rgba(255, 255, 255, 0.14);
    --header-bg: rgba(12, 12, 14, 0.72);
    --nav-bg: rgba(12, 12, 14, 0.97);
    --grain-opacity: 0.04;
    --grain-blend: overlay;
    --blob-opacity: 0.5;
    --accent-soft: #FF8A3D;
    --grad: linear-gradient(100deg, #FF8A3D, #F96B11 55%, #FF8A3D 95%);

    /* Proceso: el "encendido" de los pasos. Va en tokens porque el efecto se
       construye distinto en cada tema — sobre fondo oscuro funciona un
       resplandor claro y amplio; sobre fondo claro eso se lava y queda una
       mancha, asi que ahi hay que cerrar el desenfoque y bajar al azul de marca. */
    --step-line: rgba(255, 138, 61, 0.28);
    --step-line-h: 2px;
    /* La tarjeta en oscuro es casi transparente, asi que la linea y la bolita
       van DETRAS y se ven a traves. En claro la tarjeta es blanca opaca y las
       taparia, por eso alli van delante. Es la misma diferencia de fondo, no
       un capricho: la capa correcta depende de si la tarjeta deja pasar luz. */
    --step-z-line: 0;
    --step-z-dot: 1;
    --step-dot: var(--sky);
    --step-dot-glow: 0 0 16px 5px rgba(255, 138, 61, 0.65);
    --step-num-off: 0 8px 20px -8px var(--blue);
    --step-num-on: 0 0 0 7px rgba(255, 138, 61, 0.22), 0 10px 28px -6px var(--sky);
    --step-num-mid: 0 0 0 3px rgba(255, 138, 61, 0.10), 0 8px 22px -6px var(--blue);
}

/* Light theme */
:root[data-theme="light"] {
    --ink: #F5F5F7;
    --ink-2: #EDEDF0;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --card-border: rgba(0, 0, 0, 0.10);
    --text: #1D1D1F;
    --text-soft: #4A4A50;
    --text-dim: #6E6E73;
    --shadow: 0 22px 55px -26px rgba(249, 107, 17, 0.28);
    --bg-hero: radial-gradient(1200px 700px at 70% -10%, #FFEBDC 0%, var(--ink) 62%);
    --grid-line: rgba(249, 107, 17, 0.06);
    --ghost-bg: rgba(0, 0, 0, 0.045);
    --ghost-bg-hover: rgba(0, 0, 0, 0.09);
    --input-bg: rgba(0, 0, 0, 0.03);
    --slider-track: rgba(0, 0, 0, 0.14);
    --header-bg: rgba(255, 255, 255, 0.82);
    --nav-bg: rgba(255, 255, 255, 0.97);
    --grain-opacity: 0;
    --grain-blend: multiply;
    --blob-opacity: 0.30;
    --accent-soft: #F96B11;
    --grad: linear-gradient(100deg, #F96B11, #FF8A3D 55%, #F96B11 95%);

    /* Sobre blanco el resplandor no contrasta: se compensa con densidad, no con
       tamano. Desenfoque mas chico, opacidad mas alta y el azul oscuro de marca
       en vez del cian claro, que sobre blanco es casi invisible. */
    /* Mas fina y menos opaca que en oscuro: aca la linea va DELANTE de una
       tarjeta blanca, no detras de una translucida, asi que con la mitad de
       cuerpo ya se lee — con 2px al 45% pesaba mas que las pelotitas. */
    --step-line: rgba(249, 107, 17, 0.34);
    --step-line-h: 1px;
    --step-z-line: 3;
    --step-z-dot: 3;
    --step-dot: var(--blue);
    --step-dot-glow: 0 0 7px 2px rgba(249, 107, 17, 0.38);
    --step-num-off: 0 6px 16px -6px rgba(249, 107, 17, 0.55);
    --step-num-on: 0 0 0 6px rgba(249, 107, 17, 0.20), 0 8px 20px -4px rgba(249, 107, 17, 0.75);
    --step-num-mid: 0 0 0 3px rgba(249, 107, 17, 0.12), 0 6px 16px -6px rgba(249, 107, 17, 0.55);
}

/* smooth theme transition */
body, .site-header, .sol-card, .feature, .office, .contact-form,
.field input, .field textarea, .stat-block, .site-footer,
.plan-card, .plan-sizer, .plan-helper, .faq-item {
    transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--ink);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.14; font-weight: 500; letter-spacing: -0.01em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.gradient-text {
    background: var(--grad);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }

/* subtle grain/texture overlay for depth */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Scroll progress ===== */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--sky), var(--blue));
    z-index: 1000; transition: width 0.1s linear;
}

/* ===== Header ===== */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 900;
    padding: 18px 0; transition: all 0.35s var(--ease);
}
.site-header.scrolled {
    padding: 10px 0;
    background: var(--header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--card-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
/* El wordmark es 5.9:1 (solo letras), por eso las alturas son mucho menores
   que las del logo anterior, que incluia el simbolo apilado. */
.brand-logo { height: 30px; width: auto; transition: height 0.35s var(--ease); }
.site-header.scrolled .brand-logo { height: 24px; }
/* El logo viene en dos variantes reales (letras claras / letras oscuras).
   En tema claro se intercambia el archivo, no se filtra el mismo. */
:root[data-theme="light"] .brand-logo,
:root[data-theme="light"] .footer-logo { content: url("../images/logo-tulegajo-light.svg"); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
    font-size: 0.92rem; font-weight: 500; color: var(--text-soft);
    padding: 9px 14px; border-radius: 10px; transition: all 0.25s var(--ease);
}
.nav a:hover, .nav a.active { color: var(--text); background: var(--ghost-bg); }
.nav .nav-cta {
    background: transparent; color: var(--text-soft); font-weight: 600;
    border: 1px solid var(--card-border); margin-left: 6px;
}
.nav .nav-cta:hover, .nav .nav-cta.active { color: var(--text); background: var(--ghost-bg); border-color: rgba(255, 138, 61, 0.4); box-shadow: none; }

/* header controls */
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-toggle, .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; border-radius: 10px; cursor: pointer;
    background: var(--ghost-bg); border: 1px solid var(--card-border); color: var(--text-soft);
    transition: all 0.25s var(--ease);
}
.lang-toggle { min-width: 44px; padding: 0 10px; font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; }
.theme-toggle { width: 38px; }
.lang-toggle:hover, .theme-toggle:hover { color: var(--text); border-color: rgba(255, 138, 61, 0.4); background: var(--ghost-bg-hover); transform: translateY(-1px); }

/* theme icon (pure CSS moon/sun) */
.theme-icon { width: 18px; height: 18px; border-radius: 50%; position: relative; background: currentColor; }
:root[data-theme="dark"] .theme-icon { box-shadow: inset -5px -3px 0 0 var(--text); background: transparent; border: 0; }
:root[data-theme="light"] .theme-icon { background: transparent; border: 2px solid currentColor; box-shadow: 0 0 0 2px transparent; }
:root[data-theme="light"] .theme-icon::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    background: radial-gradient(circle, transparent 55%, currentColor 56%, currentColor 60%, transparent 62%);
    -webkit-mask: repeating-conic-gradient(#000 0 12deg, transparent 12deg 45deg);
            mask: repeating-conic-gradient(#000 0 12deg, transparent 12deg 45deg);
}

.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s var(--ease); }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; gap: 9px; justify-content: center;
    /* 10px = el mismo radio que .nav a, para que "Prueba gratis" se vea igual
       en el header y en el cuerpo. Las píldoras (999px) quedan reservadas para
       chips y etiquetas: .eyebrow, .plan-ribbon, .pc-soon. */
    padding: 14px 26px; border-radius: 10px; font-weight: 600; font-size: 0.95rem;
    cursor: pointer; border: 1px solid transparent; transition: all 0.3s var(--ease);
    will-change: transform;
}
.btn-primary { background: var(--grad); background-size: 160% auto; color: #FFFFFF; }
.btn-primary:hover { background-position: 100% center; transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--blue); }
.btn-ghost { background: var(--ghost-bg); color: var(--text); border-color: var(--card-border); }
.btn-ghost:hover { background: var(--ghost-bg-hover); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* ===== Hero ===== */
.hero {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    padding: 150px 0 90px; overflow: hidden;
    background: var(--bg-hero);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.grid-overlay {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 80%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--blob-opacity); }
.blob-1 { width: 460px; height: 460px; background: #F96B11; top: -120px; right: -60px; animation: float 14s ease-in-out infinite; }
.blob-2 { width: 380px; height: 380px; background: #FF8A3D; bottom: -120px; left: -80px; animation: float 18s ease-in-out infinite reverse; }
.blob-3 { width: 300px; height: 300px; background: #E05A00; top: 40%; left: 45%; animation: float 16s ease-in-out infinite; }
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.12); }
}

/* animated cordillera ridge motif */
.hero-ridge { position: absolute; bottom: 0; left: 0; width: 100%; height: min(64vh, 480px); }
.hero-ridge .ridge { transform-box: fill-box; }
.ridge-back { animation: ridge-drift 22s ease-in-out infinite; }
.ridge-front { animation: ridge-drift 16s ease-in-out infinite reverse; }
@keyframes ridge-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-26px); }
}

.hero-content { position: relative; z-index: 1; }
.hero-grid {
    /* La columna de texto se lleva un poco más desde el V4: el titular nuevo
       ("Gestión de personas en una única plataforma, con todo el respaldo
       legal", 70 caracteres contra 63) entra en 5 líneas y empujaba los botones
       35px abajo del pliegue en un portátil de 1280x760. Ensanchar el texto
       angosta la escena, que es lo que marca el alto de la fila. Con
       1.25/0.88 la columna de texto llega a su tope (`max-width: 640px`) y el
       titular vuelve a entrar en CUATRO líneas; la escena baja de 515 a 448px.
       Medido a 1280x760: los botones quedan 50px arriba del pliegue. */
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.88fr);
    gap: 48px; align-items: center;
}
.hero-copy { max-width: 640px; }

/* Escena de producto — estructura 1:1 del hero original:
   login = base (más atrás), home/dashboard encimado, y widgets flotando */
.hero-scene { position: relative; display: grid; place-items: center; min-height: 640px; }
.scene-inner { position: relative; width: 213px; }
.scene-base { display: block; width: 213px; height: auto; filter: drop-shadow(0 34px 62px rgba(0, 0, 0, 0.55)); }
.scene-fig {
    position: absolute; height: auto;
    filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.5));
}
.sc-middle { width: 221px; top: -7%;    right: -104px; animation: floaty 8s ease-in-out infinite 0.4s; }   /* dashboard/home, encimado */
.sc-lt     { width: 113px; top: 4%;     left: -85px;   animation: floaty 5.5s ease-in-out infinite 0.2s; }
.sc-lf     { width: 70px;  top: 22%;    left: -100px;  animation: floaty 6s ease-in-out infinite 0.6s; }   /* calendario */
.sc-lb     { width: 177px; bottom: 17%; left: -48%;    animation: floaty 6.5s ease-in-out infinite 0.3s; }
.sc-rt     { width: 95px;  top: 2%;     right: -60%;   animation: floaty 5s ease-in-out infinite 0.8s; }    /* faceid */
.sc-rb     { width: 122px; bottom: 5%;  right: -60%;   animation: floaty 7.5s ease-in-out infinite 0.5s; }  /* card perfil */

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.eyebrow {
    display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent-soft);
    padding: 7px 16px; border: 1px solid var(--card-border); border-radius: 999px;
    background: rgba(255, 138, 61, 0.07); margin-bottom: 26px;
}
/* El tope fue bajando con cada titular más largo: 4.4rem -> 4rem (V2) ->
   3.8rem (V4). Es la mitad del arreglo; la otra mitad es el reparto de la
   grilla, arriba. Medido a 1280x760, que es el caso apretado: con las dos
   cosas los botones quedan 19px arriba del pliegue. */
.hero-title { font-size: clamp(2.5rem, 6vw, 3.8rem); font-weight: 700; letter-spacing: -0.03em; }
.hero-sub { margin: 24px 0 18px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-soft); max-width: 680px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-top: 60px; padding-top: 38px; border-top: 1px solid var(--card-border);
}
.stat-num {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--text); letter-spacing: -0.02em;
    white-space: nowrap;
}
.stat-label { font-size: 0.86rem; color: var(--text-dim); }

.scroll-hint {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1;
    width: 26px; height: 42px; border: 2px solid var(--card-border); border-radius: 14px;
    display: flex; justify-content: center; padding-top: 8px;
}
.scroll-hint span { width: 4px; height: 8px; background: var(--sky); border-radius: 2px; animation: scrolldot 1.6s infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(-4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ===== Social proof ===== */
.social { padding: 64px 0 40px; overflow: hidden; }
.social-title {
    text-align: center; max-width: 780px; margin: 0 auto 10px;
    font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; color: var(--text);
}
.social-sub { text-align: center; color: var(--text-dim); font-size: 0.92rem; margin: 0 auto 34px; }
.marquee {
    position: relative; display: flex; flex-direction: column; gap: 26px;
    max-width: min(1040px, 92vw); margin: 0 auto;
}
.marquee-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 63s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-chip {
    flex: 0 0 auto; font-family: var(--font-head); font-weight: 600; font-size: 1rem;
    color: var(--text-soft); padding: 12px 26px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--card-border); white-space: nowrap;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.logo-chip:hover { color: var(--text); border-color: rgba(255, 138, 61, 0.4); }
/* logos reales de clientes: monocromo uniforme, adaptado al tema */
/* 88px, el mismo alto que las celdas de /clientes (V3, punto 5): a 64px se
   veian chicos al lado de aquellos. Al crecer 37% el track se alarga otro
   tanto, asi que la duracion sube en la misma proporcion (46s -> 63s) para que
   la cinta no se lea mas rapida que antes. */
.logo-mark {
    flex: 0 0 auto; height: 88px; width: auto; margin: 0 48px;
    filter: brightness(0) invert(1); opacity: 0.62;   /* blanco sobre navy (dark) */
    transition: opacity 0.3s var(--ease);
}
:root[data-theme="light"] .logo-mark { filter: brightness(0); opacity: 0.5; }  /* negro sobre claro */
.logo-mark:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== Sections ===== */
.section { padding: 110px 0; position: relative; }
.section-alt { background: linear-gradient(180deg, var(--ink) 0%, var(--surface) 50%, var(--ink) 100%); }
.section-head { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.kicker {
    display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--sky); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.section-head p { margin-top: 18px; color: var(--text-soft); font-size: 1.05rem; }

/* ===== Soluciones ===== */
.sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sol-card {
    padding: 32px 28px; border-radius: var(--radius); overflow: hidden;
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.sol-card:hover { transform: translateY(-8px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }
.sol-icon {
    width: 66px; height: 66px; border-radius: 16px; display: grid; place-items: center;
    margin-bottom: 22px;
    background: linear-gradient(140deg, rgba(255, 138, 61, 0.16), rgba(249, 107, 17, 0.06));
    border: 1px solid rgba(255, 138, 61, 0.2);
}
.sol-icon .ic { width: 40px; height: 40px; }

/* media con video en hover (placeholder TuLegajo — Diseño rebrandea) */
.sol-media {
    position: relative; margin: -32px -28px 22px; aspect-ratio: 16 / 10;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(140deg, rgba(255, 138, 61, 0.12), rgba(249, 107, 17, 0.03));
    border-bottom: 1px solid var(--card-border);
}
.sol-media .sol-icon { margin: 0; position: relative; z-index: 1; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.sol-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0.45s var(--ease); background: #0C0C0E;
}
.sol-card:hover .sol-video { opacity: 1; }
.sol-card:hover .sol-media .sol-icon { opacity: 0; transform: scale(0.9); }
.sol-icon svg *, .step-icon svg * { transform-box: fill-box; transform-origin: center; }
.sol-card h3 { font-size: 1.22rem; margin-bottom: 10px; }
.sol-card p { color: var(--text-soft); font-size: 0.95rem; }

/* solution icon animations */
.ic-pulse { animation: ic-pulse 3s var(--ease) infinite; transform-origin: 24px 22px; }
.ic-pulse-2 { animation-delay: 0.5s; transform-origin: 44px 26px; }
@keyframes ic-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.ic-gear { transform-origin: 26px 26px; animation: ic-spin 9s linear infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
.ic-chart { stroke-dasharray: 60; stroke-dashoffset: 60; animation: ic-draw 3.5s var(--ease) infinite; }
.ic-flow-line { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ic-draw 3s var(--ease) infinite; }
.ic-flow-line-2 { animation-delay: 0.5s; }
.ic-check { stroke-dasharray: 34; stroke-dashoffset: 34; animation: ic-draw 3.2s var(--ease) infinite; }
@keyframes ic-draw {
    0% { stroke-dashoffset: var(--l, 60); }
    45% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: var(--l, 60); }
}

/* ===== Stats ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat-block {
    text-align: center; padding: 40px 24px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.stat-block:hover { transform: translateY(-6px); border-color: rgba(255, 138, 61, 0.35); }
.stat-num-big {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: -0.02em;
    background: var(--grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    white-space: nowrap;
}
.stat-block-label { display: block; margin-top: 8px; color: var(--text-soft); font-size: 0.95rem; }

/* ===== Proceso / steps ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.step {
    position: relative; padding: 34px 28px; border-radius: var(--radius); text-align: center;
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step:hover { transform: translateY(-8px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }
.step-num {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: #FFFFFF;
    background: var(--grad); background-size: 150% auto; margin: 0 auto 20px;
    box-shadow: var(--step-num-off); position: relative; z-index: 2;
}
.step-icon { width: 88px; height: 88px; margin: 0 auto 18px; }
.step-icon svg { width: 100%; height: 100%; }
.step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.step p { color: var(--text-soft); font-size: 0.95rem; }

/* step icon animations */
.st-send-arrow { animation: st-nudge 2.6s var(--ease) infinite; }
@keyframes st-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.st-ping { animation: ic-pulse 1.8s var(--ease) infinite; transform-origin: 52px 20px; }
.st-notify-card { animation: st-card 3s var(--ease) infinite; transform-origin: 40px 36px; }
@keyframes st-card { 0%, 100% { transform: translateY(2px); opacity: 0.6; } 50% { transform: translateY(0); opacity: 1; } }
.st-sign-stroke { stroke-dasharray: 120; stroke-dashoffset: 120; animation: ic-draw 4s var(--ease) infinite; --l: 120; }

/* ---- Flujo entre pasos: conector + activación secuencial de los números ---- */
.steps::before {
    content: ""; position: absolute; top: 54px; left: 16.6%; right: 16.6%; height: var(--step-line-h);
    z-index: var(--step-z-line);
    /* El hueco del 47.5% al 52.5% es el numero del medio: la linea va de la
       pelotita 1 a la 3 y le pasa por encima. En oscuro no se nota porque la
       linea va detras, pero en claro dibujaria una raya sobre el "2". */
    background: linear-gradient(90deg, transparent,
        var(--step-line) 8%, var(--step-line) 46.5%,
        transparent 47.5%, transparent 52.5%,
        var(--step-line) 53.5%, var(--step-line) 92%, transparent);
}
.steps > .step { z-index: 2; }   /* cards por encima del punto viajero */

/* bolita que viaja por la línea, por detrás de las pelotitas (z-index 1) */
.steps-dot {
    position: absolute; top: 50px; left: 16.6%; width: 11px; height: 11px; margin-left: -5.5px;
    border-radius: 50%; background: var(--step-dot); z-index: var(--step-z-dot);
    box-shadow: var(--step-dot-glow);
    animation: steps-travel 4.2s linear infinite;
}
/*
 * Los cortes de opacidad simulan que la bolita pasa POR DETRAS de cada
 * pelotita. En oscuro pasa por detras de verdad (va en z-index 0/1), pero en
 * claro tiene que ir delante de la tarjeta blanca para verse — y `.step-num`
 * no puede subir por encima porque vive dentro de `.step`, que crea contexto
 * de apilado con `will-change: transform`. Apagarla al cruzar da el mismo
 * resultado a la vista, y en oscuro no se nota porque ahi ya esta tapada.
 * Los cortes son de ~20ms: se leen como oclusion, no como un fundido.
 */
@keyframes steps-travel {
    /* Los cortes de opacidad estan calculados sobre la posicion real de las
       pelotitas (centros en 15.9%, 50% y 84.1% de .steps, radio de solape
       2.25% contando el radio de la bolita). Las rampas son de 0.4-0.5% del
       ciclo (~20ms): se leen como oclusion, no como fundido. Si se cambia el
       ancho de las tarjetas o el tamano de .step-num, hay que rehacerlos. */
    0%, 11% { left: 16.6%; opacity: 0; }   /* arranca escondida detras del 1 */
    12.7%   { opacity: 0; }
    13.2%   { opacity: 1; }                /* sale del 1 */
    41.5%   { opacity: 1; }
    41.9%   { opacity: 0; }                /* entra al 2 (se enciende @42%) */
    44%     { left: 50%; }
    46.3%   { opacity: 0; }
    46.8%   { opacity: 1; }                /* sale del 2 */
    76.1%   { opacity: 1; }
    76.5%   { opacity: 0; }                /* entra al 3 (se enciende @76%) */
    78%     { left: 83.4%; }
    85%     { left: 83.4%; opacity: 0; }
    100%    { left: 16.6%; opacity: 0; }   /* reset invisible */
}

/* la energía "enciende" cada número en secuencia 1 -> 2 -> 3 */
.step-num { animation: step-activate 4.2s var(--ease) infinite; }
/*
 * El pico de step-activate cae al 15% de su ciclo (0.63s). Los delays estan
 * puestos para que ese pico coincida con el instante en que la bolita esta en
 * el centro de cada pelotita: la 1 a 0.46s (11%), la 2 a 1.85s (44%) y la 3 a
 * 3.28s (78%) del recorrido. Antes eran 0 / 1.4 / 2.8 y el destello llegaba
 * ~4% tarde: la bolita ya habia salido del otro lado cuando el numero crecia.
 * delay = instante_deseado - 0.63s   (de ahi el negativo del primero)
 */
.step:nth-of-type(1) .step-num { animation-delay: -0.17s; }
.step:nth-of-type(2) .step-num { animation-delay: 1.22s; }
.step:nth-of-type(3) .step-num { animation-delay: 2.65s; }
@keyframes step-activate {
    0%, 11%, 28%, 100% { box-shadow: var(--step-num-off); transform: scale(1); }  /* normal hasta que llega la bolita (11%) */
    15% { box-shadow: var(--step-num-on); transform: scale(1.17); }  /* se enciende */
    20% { box-shadow: var(--step-num-mid); transform: scale(1.04); }
}

/* ---- Conexión clara hacia el resultado (flecha) ---- */
.step-result { position: relative; margin-top: 52px; }
.step-result-flow {
    position: absolute; left: 50%; top: -50px; transform: translateX(-50%);
    width: 2px; height: 38px; background: linear-gradient(180deg, transparent, var(--sky));
}
.step-result-flow::after {
    content: ""; position: absolute; left: 50%; bottom: -4px;
    width: 11px; height: 11px; border-right: 2.5px solid var(--sky); border-bottom: 2.5px solid var(--sky);
    transform: translateX(-50%) rotate(45deg);
}
.step-result-card {
    display: flex; align-items: center; gap: 30px; padding: 28px 34px;
    border-radius: var(--radius); background: var(--card);
    border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 26px 60px -30px rgba(249, 107, 17, 0.5);
}
.result-doc { flex: 0 0 auto; width: 96px; }
.result-doc .rd { width: 100%; height: auto; }
.result-doc .rd * { transform-box: fill-box; transform-origin: center; }
.result-copy h3 { font-size: 1.3rem; margin: 6px 0 8px; }
.result-copy p { color: var(--text-soft); font-size: 0.96rem; max-width: 640px; }

.rd-sign { stroke-dasharray: 150; stroke-dashoffset: 150; animation: rd-draw 5s var(--ease) infinite; }
.rd-seal { animation: rd-stamp 5s var(--ease) infinite; transform-origin: 92px 96px; }
.rd-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: rd-check 5s var(--ease) infinite; }
@keyframes rd-draw  { 0% { stroke-dashoffset: 150; } 42% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 150; } }
@keyframes rd-stamp { 0%, 44% { transform: scale(0) rotate(-12deg); opacity: 0; } 54% { transform: scale(1.12) rotate(0); opacity: 1; } 60%, 90% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(0) rotate(-12deg); opacity: 0; } }
@keyframes rd-check { 0%, 56% { stroke-dashoffset: 30; } 70%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }

.proceso-cta { text-align: center; margin-top: 52px; }

/* ===== Contact ===== */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
/* La celda del telefono ahora lleva dos controles (prefijo + numero), asi que
   se lleva la parte grande; la de colaboradores es un desplegable y le sobra. */
.contact-form .contact-row { grid-template-columns: 1.35fr 1fr; }
.offices { display: flex; flex-direction: column; gap: 18px; }
.offices .office { flex: 1; }
.office {
    padding: 26px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--card-border); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.office:hover { border-color: rgba(255, 138, 61, 0.35); }
.office-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
/* Banderas reales en SVG inline: nada de emoji (Windows no los renderiza y
   caen a las letras del pais) ni de CDN externo. El viewBox es 3:2, la
   proporcion oficial de las tres. */
.office-head .flag {
    width: 45px; height: 30px; border-radius: 5px; flex-shrink: 0;
    display: block; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    outline: 1px solid rgba(255, 255, 255, 0.14); outline-offset: -1px;
}
:root[data-theme="light"] .office-head .flag {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    outline-color: rgba(0, 0, 0, 0.12);
}
.office-head strong { display: block; font-family: var(--font-head); font-size: 1.15rem; }
.office-head span { color: var(--text-dim); font-size: 0.88rem; }
.office-addr { color: var(--text-soft); font-size: 0.92rem; margin-bottom: 12px; }
.office a { display: inline-flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 0.92rem; margin-right: 18px; transition: color 0.25s; }
.office a:hover { color: var(--sky); }
.office a .ico, .footer-col .ico, .footer-locs .ico { color: var(--sky); flex: 0 0 auto; }

.contact-form {
    padding: 34px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 16px;
    height: 100%;
}
.form-head { margin-bottom: 4px; }
.form-head h3 { font-size: 1.4rem; margin-bottom: 6px; }
.form-head p { color: var(--text-soft); font-size: 0.92rem; }
.field--grow { flex: 1 1 auto; display: flex; min-height: 130px; }
.field--grow textarea { height: 100%; }
.field input, .field textarea {
    width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
    background: var(--input-bg); border: 1px solid var(--card-border);
    color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color 0.25s, background 0.25s;
    resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sky); background: rgba(255, 138, 61, 0.06); }
.field input.invalid, .field textarea.invalid { border-color: #e5634d; }
.form-note { font-size: 0.9rem; text-align: center; min-height: 1.2em; }
.form-note.ok { color: #5fd39a; }
.form-note.err { color: #e5634d; }

/* ===== Prueba / alta de organización ===== */
.trial-sec { position: relative; overflow: hidden; padding-top: 120px; }
.trial-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.trial-bg .blob-1 { top: -120px; left: -80px; }
.trial-bg .blob-2 { bottom: -140px; right: -60px; }
.trial-wrap {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
    max-width: 1040px; margin: 0 auto;
}
.trial-aside { max-width: 460px; }
.trial-title { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; margin: 16px 0 18px; }
.trial-sub { color: var(--text-soft); font-size: 1.02rem; line-height: 1.6; }
.trial-benefits { list-style: none; margin: 26px 0 24px; display: grid; gap: 14px; }
.trial-benefits li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-soft); font-size: 0.98rem; }
.trial-ico { flex: 0 0 auto; margin-top: 1px; }
.trial-trust { display: inline-flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 0.88rem; }
.trial-trust .ico { color: var(--sky); flex: 0 0 auto; }

.trial-card {
    position: relative;
    padding: 36px; border-radius: var(--radius);
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
    border: 1.5px solid transparent;
    box-shadow: var(--shadow);
}
.trial-form { display: flex; flex-direction: column; gap: 16px; }
.trial-form-head { font-family: var(--font-head); font-size: 1.5rem; }
.trial-form .field { display: flex; flex-direction: column; gap: 7px; }
.trial-form .field label {
    font-size: 0.86rem; font-weight: 500; color: var(--text-soft);
    display: flex; align-items: baseline; gap: 7px;
}
.trial-form .taxid-type {
    font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--sky); padding: 1px 7px; border-radius: 999px; background: rgba(255, 138, 61, 0.12);
}
.trial-form .taxid-type:empty { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.select-wrap { position: relative; }
.select-wrap select {
    width: 100%; padding: 14px 40px 14px 16px; border-radius: var(--radius-sm);
    background: var(--input-bg); border: 1px solid var(--card-border);
    color: var(--text); font-family: inherit; font-size: 0.95rem; cursor: pointer;
    appearance: none; -webkit-appearance: none; transition: border-color 0.25s, background 0.25s;
}
.select-wrap select:focus { outline: none; border-color: var(--sky); background: rgba(255, 138, 61, 0.06); }
.select-wrap select.invalid { border-color: #e5634d; }
.select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; }
.field-msg { font-size: 0.78rem; color: #e5634d; min-height: 0.9em; }
.trial-submit { margin-top: 6px; }
.trial-legal { font-size: 0.8rem; color: var(--text-dim); text-align: center; line-height: 1.5; }
.trial-legal a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.trial-legal a:hover { color: var(--sky); }

/* `hidden` no alcanza en elementos con `display: flex`: el display gana. */
.trial-form[hidden], .trial-success[hidden], .contact-form[hidden] { display: none !important; }
/* La pantalla de éxito del contacto reusa el layout y la animación de la del
   alta; lo que le pone la tarjeta es `.contact-form`, que hereda del propio
   formulario al que reemplaza. */
.form-success {
    align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.form-success h2 { font-family: var(--font-head); font-size: 1.5rem; }
.form-success p { color: var(--text-soft); font-size: 0.98rem; line-height: 1.6; max-width: 380px; }
.form-success:focus { outline: none; }
.trial-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 6px; }
.trial-success-badge {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255, 138, 61, 0.12); border: 1.5px solid rgba(255, 138, 61, 0.4);
}
.trial-success h2 { font-family: var(--font-head); font-size: 1.5rem; }
.trial-success p { color: var(--text-soft); font-size: 0.98rem; line-height: 1.6; max-width: 380px; }
.trial-success .btn { margin-top: 6px; }

/* nav CTA primario (Prueba gratis) */
.nav .nav-cta-primary {
    color: #FFFFFF; background: var(--grad); background-size: 200% auto;
    border: 1px solid transparent; box-shadow: 0 8px 22px -10px var(--blue);
}
.nav .nav-cta-primary:hover, .nav .nav-cta-primary.active {
    color: #fff; background: var(--grad); background-size: 200% auto;
    background-position: 100% center; border-color: transparent; box-shadow: 0 10px 26px -8px var(--blue);
}

@media (max-width: 860px) {
    .trial-wrap { grid-template-columns: 1fr; gap: 34px; max-width: 520px; }
    .trial-sec { padding-top: 100px; }
}
@media (max-width: 640px) {
    /* Hay que repetir el selector completo: `.contact-form .contact-row` es
       (0,2,0) y le gana a `.field-row` (0,1,0) aunque esta en un media query.
       Sin esto la fila nunca apilaba, y con el prefijo telefonico adentro el
       campo del numero quedaba en 34px a 390px. */
    .contact-form .contact-row,
    .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .trial-card { padding: 26px 22px; }
}

/* ===== Footer ===== */
.site-footer {
    padding: 72px 0 calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--card-border);
    background:
        radial-gradient(900px 320px at 85% -40%, rgba(255, 138, 61, 0.12), transparent 70%),
        var(--surface);
}
.footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px;
    padding-bottom: 44px; border-bottom: 1px solid var(--card-border);
}
.footer-brand { max-width: 360px; }
.footer-logo { height: 26px; width: auto; opacity: 0.95; margin-bottom: 18px; }
.footer-brand p { color: var(--text-soft); font-size: 0.92rem; }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
    font-family: var(--font-head); font-size: 0.95rem; color: var(--text);
    margin-bottom: 6px;
}
.footer-col a, .footer-locs {
    color: var(--text-soft); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 9px;
    width: fit-content; transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.footer-col a:hover { color: var(--sky); transform: translateX(3px); }

/* Barra inferior: DOS zonas, no cuatro. Con cuatro hijos y `space-between` el
   selector de idioma quedaba de segundo, o sea un boton enmarcado flotando en el
   medio de dos bloques de texto gris; y la nota "Antes TuLegajo" se iba de linea
   sola. Ahora es texto legal a la izquierda (copyright + nota, apilados) y links
   a la derecha, y el selector se mudo a la columna de marca. */
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 14px 32px; padding-top: 26px;
}
.footer-bottom-info { display: flex; flex-direction: column; gap: 5px; }
.copyright, .footer-note { color: var(--text-dim); font-size: 0.85rem; }
.footer-note a { color: var(--text-soft); }
.footer-note a:hover { color: var(--sky); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a { color: var(--text-dim); font-size: 0.85rem; transition: color 0.25s; }
.footer-legal a:hover { color: var(--sky); }

/* redes sociales */
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
    color: var(--text-soft); background: var(--card); border: 1px solid var(--card-border);
    transition: color 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-social a:hover { color: var(--sky); border-color: rgba(255, 138, 61, 0.4); transform: translateY(-2px); }

/* newsletter */
.footer-newsletter {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
    padding-bottom: 32px; margin-bottom: 34px; border-bottom: 1px solid var(--card-border);
}
.footer-newsletter h4 { font-family: var(--font-head); font-size: 1.1rem; }
.footer-newsletter .fn-copy p { color: var(--text-soft); font-size: 0.92rem; margin-top: 4px; }
.fn-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fn-form input {
    padding: 12px 16px; border-radius: var(--radius-sm); min-width: 240px;
    background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text);
    font-family: inherit; font-size: 0.95rem; transition: border-color 0.25s, background 0.25s;
}
.fn-form input::placeholder { color: var(--text-dim); }
.fn-form input:focus { outline: none; border-color: var(--sky); background: rgba(255, 138, 61, 0.06); }
.fn-form input.invalid { border-color: #e5634d; }
.fn-note { flex-basis: 100%; font-size: 0.85rem; min-height: 1em; margin: 0; }
.fn-note.ok { color: #5fd39a; }
.fn-note.err { color: #e5634d; }
@media (max-width: 640px) {
    .footer-newsletter { flex-direction: column; align-items: flex-start; }
    .fn-form { width: 100%; }
    .fn-form input { flex: 1 1 auto; min-width: 0; }
}

/* ===== To top ===== */
/* ===== Andy, el asistente del chat =====
   El lanzador va en azul de marca y no en verde de WhatsApp: no manda directo
   al chat, primero pregunta. El verde queda solo en el boton que si abre
   WhatsApp, donde la asociacion sirve.

   Es el UNICO flotante del sitio: la flecha de "volver arriba" se dio de baja
   el 9-sep-2026 porque el header es fijo y nunca se esconde, el footer tiene el
   menu completo, y dos botones apilados en la misma esquina le restaban
   atencion al que importa. Si alguna vez vuelve un segundo flotante, tienen que
   compartir un eje: alinear por `right` con anchos distintos deja los centros
   corridos la mitad de la diferencia (paso, con 4px de desfase). */
:root {
    /* Todo lo de Andy se apila desde estas dos. La burbuja y el panel se
       calculan a partir del lanzador, no con numeros propios: la version
       anterior tenia la burbuja en un `bottom` fijo escrito para cuando iba AL
       COSTADO, y al moverla arriba quedo METIDA DENTRO del boton en cuanto el
       banner de cookies subia el lanzador. */
    --andy-bottom: 28px;
    --andy-size: 56px;
    --andy-gap: 12px;
}
.andy-launcher {
    position: fixed; right: 28px; bottom: calc(var(--andy-bottom) + env(safe-area-inset-bottom, 0px));
    width: var(--andy-size); height: var(--andy-size); border-radius: 50%; border: 0; cursor: pointer; z-index: 940;
    display: grid; place-items: center; color: #FFFFFF;
    background: var(--grad); background-size: 160% auto;
    box-shadow: 0 14px 34px -10px rgba(249, 107, 17, 0.85);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-position 0.3s var(--ease);
}
.andy-launcher:hover { transform: translateY(-2px) scale(1.05); background-position: 100% center; }
.andy-launcher .andy-ico-close { display: none; }
.andy-launcher.is-open .andy-ico-chat { display: none; }
.andy-launcher.is-open .andy-ico-close { display: block; }

/* Burbuja de aviso de Andy. Aparece a la izquierda del lanzador y no empuja
   nada: es fija, como el boton. */
/* Va ARRIBA del lanzador, no al lado: es donde abre el panel, es la convencion
   de todos los widgets de chat, y a la izquierda no entra en pantallas angostas
   (por eso antes habia un caso especial a 760px que ya no hace falta). */
.andy-teaser {
    position: fixed; right: 28px;
    bottom: calc(var(--andy-bottom) + var(--andy-size) + var(--andy-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 939; display: flex; align-items: center; gap: 4px;
    opacity: 0; transform: translateY(10px) scale(0.96);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.andy-teaser.is-in { opacity: 1; transform: none; }
.andy-teaser-msg {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 10px 15px 10px 11px; border-radius: 999px 999px 6px 999px;   /* cola abajo-derecha, hacia el lanzador */
    background: var(--surface); border: 1px solid var(--card-border);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.6);
    color: var(--text); font-family: inherit; font-size: 0.88rem; font-weight: 500;
    white-space: nowrap; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.andy-teaser-msg:hover { border-color: rgba(255, 138, 61, 0.5); transform: translateY(-1px); }
.andy-teaser-avatar {
    width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    background: var(--grad); background-size: 150% auto; color: #FFFFFF;
    font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
}
.andy-teaser-x {
    width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; border: 1px solid var(--card-border);
    background: var(--surface); color: var(--text-dim); padding: 0;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.andy-teaser-x:hover { color: var(--text); border-color: rgba(255, 138, 61, 0.5); }

/* Halo: corre 3 veces y para. Un boton latiendo sin fin deja de leerse como
   aviso y pasa a ser ruido de fondo. */
.andy-launcher.is-calling::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--sky); pointer-events: none;
    animation: andy-ring 1.8s var(--ease) 3;
}
@keyframes andy-ring {
    0% { opacity: 0.55; transform: scale(0.92); }
    70% { opacity: 0; transform: scale(1.35); }
    100% { opacity: 0; transform: scale(1.35); }
}

.andy-panel {
    position: fixed; right: 28px;
    bottom: calc(var(--andy-bottom) + var(--andy-size) + var(--andy-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 941; width: 320px; max-width: calc(100vw - 40px); padding: 16px;
    border-radius: 18px; background: var(--surface); border: 1px solid var(--card-border);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.65);
    opacity: 0; transform: translateY(10px) scale(0.98);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.andy-panel.is-in { opacity: 1; transform: none; }
.andy-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--card-border); }
.andy-avatar {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    background: var(--grad); background-size: 150% auto; color: #FFFFFF;
    font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
}
.andy-head strong { display: block; font-family: var(--font-head); font-size: 0.95rem; }
.andy-role { display: block; font-size: 0.76rem; color: var(--text-dim); }
.andy-msg { margin: 12px 0 0; font-size: 0.9rem; color: var(--text-soft); line-height: 1.55; }
.andy-msg--ask { color: var(--text); font-weight: 600; margin-top: 10px; }
.andy-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.andy-opt {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    padding: 11px 14px; border-radius: 12px; font-family: inherit; font-size: 0.88rem; font-weight: 500;
    background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text-soft);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.andy-opt:hover { color: var(--text); border-color: rgba(255, 138, 61, 0.45); background: rgba(255, 138, 61, 0.08); }
.andy-opt svg { flex: 0 0 auto; }
.andy-opt--wa { color: var(--text); border-color: rgba(37, 211, 102, 0.4); }
.andy-opt--wa svg { color: #25D366; }
.andy-opt--wa:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.1); }
/* Canales de atencion (rama de soporte de Andy) */
.andy-ch-label {
    display: block; margin: 14px 0 6px; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim);
}
.andy-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.andy-ch {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px;
    color: var(--text-soft); text-decoration: none; font-size: 0.87rem;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
a.andy-ch:hover { background: rgba(255, 138, 61, 0.1); color: var(--text); }
.andy-ch svg { flex: 0 0 auto; color: var(--sky); }
/* El centro de ayuda todavia no existe: se muestra sin enlace y con la
   etiqueta, para que se sepa que el canal viene sin chocar con un dominio
   que no resuelve. */
.andy-ch.is-soon { color: var(--text-dim); cursor: default; }
.andy-ch.is-soon svg { color: var(--text-dim); }
.andy-ch.is-soon em {
    margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky);
    background: rgba(255, 138, 61, 0.14); padding: 3px 7px; border-radius: 999px;
}

.andy-back {
    margin-top: 14px; padding: 8px 0; border: 0; background: none; cursor: pointer;
    color: var(--text-dim); font-family: inherit; font-size: 0.84rem;
}
.andy-back:hover { color: var(--sky); }


/* ===== Interactive effects ===== */
.hero-spotlight {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    transition: opacity 0.6s var(--ease);
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 138, 61, 0.20), transparent 62%);
}
.hero:hover .hero-spotlight { opacity: 1; }

.sol-card, .step, .office { position: relative; transform-style: preserve-3d; will-change: transform; }
.sol-card::after, .step::after, .office::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
    opacity: 0; transition: opacity 0.4s var(--ease);
    background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 138, 61, 0.16), transparent 60%);
}
.sol-card:hover::after, .step:hover::after, .office:hover::after { opacity: 1; }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-copy { max-width: none; }
    .hero-scene { min-height: 420px; order: 2; }
    .sol-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-layout { grid-template-columns: 1fr; }
    /* En dos columnas da igual el orden del DOM, pero apilado las tres oficinas
       quedan antes del formulario: hay que scrollear ~900px para llegar al CTA
       de la seccion. En mobile el formulario va primero. */
    .contact-layout .contact-form { order: -1; }
    .steps { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .steps::before, .steps-dot { display: none; }
    .step-result { max-width: 480px; margin: 24px auto 0; }
    .step-result-card { flex-direction: column; text-align: center; gap: 18px; }
    .result-copy p { margin: 0 auto; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 760px) {
    .menu-toggle { display: flex; }
    .nav {
        position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 320px);
        flex-direction: column; align-items: stretch; justify-content: center; gap: 10px;
        background: var(--nav-bg); backdrop-filter: blur(20px);
        padding: 40px 28px; transform: translateX(100%); transition: transform 0.4s var(--ease);
        border-left: 1px solid var(--card-border);
    }
    .nav.open { transform: translateX(0); }
    .nav a { font-size: 1.05rem; padding: 14px 16px; }
    .nav .nav-cta { text-align: center; margin: 8px 0 0; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
    .hero-scene { min-height: 360px; }
    .hero-float-cal { width: 140px; left: 2%; }
    .hero-float-face { width: 124px; right: 2%; }
    .section { padding: 80px 0; }
    .sol-grid { grid-template-columns: 1fr; }
    /* El video de la tarjeta arranca al hover, que en touch no existe: la banda
       quedaba como un rectangulo vacio de 213px con el icono chico en el medio,
       que se lee como una imagen que no cargo. Se compacta a franja de icono
       (66px + aire) y el video no se renderiza, asi que tampoco se descarga. */
    .sol-media { aspect-ratio: 16 / 5; }
    .sol-video { display: none; }
    .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    :root { --andy-bottom: 20px; --andy-size: 52px; --andy-gap: 10px; }
    .andy-launcher, .andy-teaser, .andy-panel { right: 16px; }
    .andy-teaser-msg { font-size: 0.84rem; padding: 9px 13px 9px 10px; }
}
@media (max-width: 460px) {
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero { padding: 104px 0 56px; }
    /* Las cifras apiladas en una columna heredaban la proporcion de escritorio:
       171px por bloque para un numero y una etiqueta corta. En horizontal el
       dato queda igual de legible y el bloque baja a ~88px. No se pasan a dos
       columnas porque `white-space: nowrap` en el numero desborda a 160px. */
    .stats-grid { grid-template-columns: 1fr; gap: 14px; }
    .stat-block {
        display: flex; align-items: center; gap: 18px;
        text-align: left; padding: 20px 22px;
    }
    .stat-num-big { flex: none; }
    .stat-block-label { margin-top: 0; }

    .contact-form { padding: 24px; }

    /* La escena del hero es una composicion de ancho fijo (base de 213px con
       figuras a ±100px): pensada para una columna ancha, en 390px se sale y se
       recorta contra el borde. Se escala entera en vez de reacomodar piezas. */
    .scene-inner { transform: scale(0.8); }
    .hero-scene { min-height: 320px; }

    /* 80px arriba y abajo por seccion son 160px x 6 secciones en una pagina que
       ya mide 10.000px en telefono. */
    .section { padding: 64px 0; }
    .site-footer { padding-top: 56px; }
}

/* ===== Nosotros page ===== */
/* smaller hero than the home */
.nos-hero {
    position: relative; display: flex; align-items: center;
    min-height: min(72vh, 620px); padding: 170px 0 90px; overflow: hidden;
    background: var(--bg-hero);
}
.nos-hero-content {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 48px; align-items: center;
}
.nos-hero-copy { max-width: 620px; }
.nos-hero-media {
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.7);
}
.nos-video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #0C0C0E; }

/* secciones imagen + texto (equipo / valores) */
.nos-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.nos-split--reverse .nos-split-media { order: 2; }
.nos-split-copy { max-width: 560px; }
.nos-split-media {
    position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--card-border); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.65);
}
.nos-split-media img { width: 100%; height: auto; display: block; transform: scale(1.1); will-change: transform; }
.nos-split-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(155deg, transparent 52%, rgba(12, 12, 14, 0.4));
}
/* dato flotante sobre la imagen del equipo */
.nos-media-badge {
    position: absolute; left: 22px; bottom: 22px; z-index: 2;
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 20px; border-radius: 16px;
    background: rgba(12, 12, 14, 0.62); backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 138, 61, 0.28);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    animation: floaty 6s ease-in-out infinite;
}
.nos-media-badge-num {
    font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; line-height: 1;
    background: var(--grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* el badge flota sobre la foto: colores fijos (no dependen del tema) */
.nos-media-badge-label { font-size: 0.8rem; color: rgba(245, 245, 247, 0.78); max-width: 190px; }
/* lista de valores compacta */
.nos-values-list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.nos-values-list li { display: flex; gap: 18px; align-items: flex-start; }
.val-ic {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(255, 138, 61, 0.16), rgba(249, 107, 17, 0.06));
    border: 1px solid rgba(255, 138, 61, 0.2);
}
.val-ic svg { width: 27px; height: 27px; }
.val-ic svg * { transform-box: fill-box; transform-origin: center; }
.nos-values-list h3 { font-size: 1.12rem; margin-bottom: 5px; }
.nos-values-list p { color: var(--text-soft); font-size: 0.94rem; }

.nos-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em;
    margin-top: 4px;
}
.nos-hero-sub {
    margin-top: 22px; font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--text-soft); max-width: 640px;
}

/* trayectoria stats: 5 columns on wide screens */
.nos-stats { grid-template-columns: repeat(5, 1fr); }

/* valores: 3 cards */
.nos-values { grid-template-columns: repeat(3, 1fr); }

/* certificaciones */
.nos-cert-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    max-width: 860px; margin: 0 auto;
}
.nos-cert-card {
    position: relative; padding: 34px 30px; border-radius: var(--radius);
    background: var(--card); border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 26px 60px -30px rgba(249, 107, 17, 0.5);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nos-cert-card:hover { transform: translateY(-6px); border-color: rgba(255, 138, 61, 0.5); }
/* Sello ISO (V3, punto 4). El acento va por variable y no literal: `--sky`
   sobre blanco se lava, asi que en claro se usa `--blue`, que es la misma regla
   que ya vale para los glows del proceso. */
.cert-seal {
    display: block; margin-bottom: 16px; color: var(--text);
    --seal-accent: var(--sky);
    --seal-fill: rgba(255, 138, 61, 0.08);
}
:root[data-theme="light"] .cert-seal {
    --seal-accent: var(--blue);
    --seal-fill: rgba(249, 107, 17, 0.06);
}
.nos-cert-card:hover .cert-seal { transform: none; }

.nos-cert-badge {
    display: inline-block; font-family: var(--font-head); font-weight: 700;
    font-size: 0.9rem; letter-spacing: 0.02em; color: #FFFFFF;
    padding: 8px 16px; border-radius: 999px; margin-bottom: 18px;
    background: var(--grad); background-size: 160% auto;
    box-shadow: 0 8px 22px -10px var(--blue);
}
.nos-cert-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.nos-cert-card p { color: var(--text-soft); font-size: 0.96rem; }

.nos-cert-points {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px 34px; max-width: 860px; margin: 34px auto 0;
}
.nos-cert-points li {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--text-soft); font-size: 0.96rem;
}
.nos-check { flex: 0 0 auto; }

/* CTA final */
.nos-cta-card {
    position: relative; overflow: hidden; text-align: center;
    max-width: 820px; margin: 0 auto; padding: 56px 40px;
    border-radius: var(--radius); background: var(--card);
    border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 26px 60px -30px rgba(249, 107, 17, 0.5);
}
.nos-cta-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(600px 240px at 50% -30%, rgba(255, 138, 61, 0.16), transparent 70%);
}
.nos-cta-card > * { position: relative; z-index: 1; }
.nos-cta-card h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.nos-cta-card p { margin: 16px auto 28px; max-width: 560px; color: var(--text-soft); font-size: 1.05rem; }

@media (max-width: 980px) {
    .nos-hero-content { grid-template-columns: 1fr; gap: 34px; }
    .nos-hero-copy { max-width: none; }
    .nos-split { grid-template-columns: 1fr; gap: 32px; }
    .nos-split--reverse .nos-split-media { order: 0; }
    .nos-split-copy { max-width: none; }
    .nos-stats { grid-template-columns: repeat(3, 1fr); }
    .nos-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .nos-hero { min-height: auto; padding: 140px 0 70px; }
    .nos-hero-content { grid-template-columns: 1fr; gap: 32px; }
    .nos-hero-copy { max-width: none; }
    .nos-stats { grid-template-columns: repeat(2, 1fr); }
    .nos-values { grid-template-columns: 1fr; }
    .nos-cert-grid { grid-template-columns: 1fr; }
    .nos-cta-card { padding: 40px 24px; }
}
@media (max-width: 460px) {
    .nos-stats { grid-template-columns: 1fr; }
}

/* ===== Planes page ===== */
/* small page hero, reuses hero-bg / blobs / ridge motif */
.plan-hero {
    position: relative; display: flex; align-items: center; text-align: center;
    min-height: min(58vh, 520px); padding: 168px 0 80px; overflow: hidden;
    background: var(--bg-hero);
}
.plan-hero-content { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.plan-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em;
    margin-top: 4px;
}
.plan-hero-sub {
    margin: 22px auto 0; font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--text-soft); max-width: 640px;
}

/* Selector de colaboradores.
   Barra pegajosa sobre la grilla: se queda bajo el header mientras se recorren
   las tarjetas, asi el precio por plan cambia a la vista al mover el slider.
   Reusa --header-bg + blur por el mismo motivo que el header: tiene contenido
   pasando por debajo. */
.plan-sizer {
    position: sticky; top: 70px; z-index: 5;   /* el header compactado mide ~65px */
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    max-width: 1040px; margin: 0 auto 52px; padding: 12px 22px;
    /* 48px abajo no es decoracion: la cinta "Recomendado" sobresale ~15px
       del borde de la tarjeta y la destacada se levanta 12px mas en hover,
       asi que con menos aire la cinta se mete debajo de la barra. */
    border-radius: 999px;
    background: var(--header-bg); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 18px 44px -28px rgba(249, 107, 17, 0.6);
}
.plan-sizer-label {
    flex: 0 0 auto; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-soft);
}
.plan-sizer-out { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px; }
.plan-sizer-value {
    min-width: 62px; text-align: right; line-height: 1;   /* heredaba el 1.65 del body */
    color: var(--text); font-family: var(--font-head); font-weight: 700;
    font-size: 1.35rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.plan-sizer-unit { font-size: 0.9rem; color: var(--text-soft); }

/* El track se pinta con --fill (lo actualiza main.js) porque WebKit no expone
   un pseudo-elemento para la parte recorrida, como si hace Firefox. */
.plan-sizer-range {
    -webkit-appearance: none; appearance: none;
    flex: 1 1 220px; min-width: 160px; height: 20px;
    background: transparent; cursor: pointer;
}
.plan-sizer-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg,
        var(--blue) 0 var(--fill, 33%), var(--slider-track) var(--fill, 33%) 100%);
}
.plan-sizer-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
    background: var(--grad); background-size: 160% auto;
    border: 2px solid var(--surface);
    box-shadow: 0 6px 16px -6px rgba(249, 107, 17, 0.9);
    transition: transform 0.18s var(--ease);
}
.plan-sizer-range::-moz-range-track {
    height: 6px; border-radius: 999px; background: var(--slider-track);
}
.plan-sizer-range::-moz-range-progress {
    height: 6px; border-radius: 999px; background: var(--blue);
}
.plan-sizer-range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--blue); border: 2px solid var(--surface);
    box-shadow: 0 6px 16px -6px rgba(249, 107, 17, 0.9);
    transition: transform 0.18s var(--ease);
}
.plan-sizer-range:active::-webkit-slider-thumb { transform: scale(1.14); }
.plan-sizer-range:active::-moz-range-thumb { transform: scale(1.14); }
.plan-sizer-range:focus { outline: none; }
.plan-sizer-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.35); }
.plan-sizer-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.35); }

/* grilla de planes */
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.plan-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 0 auto; }
.plan-card {
    position: relative; display: flex; flex-direction: column;
    padding: 32px 26px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.plan-card:hover { transform: translateY(-8px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }
.plan-card-head { min-height: 132px; }
.plan-name { font-size: 1.4rem; }
.plan-desc { margin-top: 6px; color: var(--text-soft); font-size: 0.92rem; }
.plan-audience { margin-top: 10px; color: var(--text-dim); font-size: 0.85rem; line-height: 1.45; }
.plan-includes {
    font-size: 0.85rem; font-weight: 600; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--card-border);
}
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 18px 0 26px; flex: 1 1 auto; }
.plan-features li { display: flex; align-items: flex-start; gap: 11px; color: var(--text-soft); font-size: 0.94rem; line-height: 1.45; }
.plan-check { flex: 0 0 auto; margin-top: 3px; }
.plan-cta { margin-top: auto; }

/* tarjeta destacada (Ultimate / Recomendado) */
.plan-card--featured {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--grad) border-box;
    box-shadow: 0 30px 70px -30px rgba(249, 107, 17, 0.6);
    transform: translateY(-6px) scale(1.03);
}
.plan-card--featured::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(420px 220px at 50% -20%, rgba(255, 138, 61, 0.18), transparent 70%);
}
.plan-card--featured > * { position: relative; z-index: 1; }
.plan-card--featured:hover { transform: translateY(-12px) scale(1.03); border-color: transparent; }
.plan-ribbon {
    position: absolute; top: 0; right: 22px; transform: translateY(-50%); z-index: 2;
    font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF;
    padding: 7px 16px; border-radius: 999px;
    background: var(--grad); background-size: 160% auto;
    box-shadow: 0 10px 24px -8px var(--blue);
}

/* caja de precio (calculado o "Consultá tu propuesta") */
.plan-price-box { margin: 18px 0 6px; min-height: 58px; display: flex; flex-direction: column; gap: 3px; }
.plan-price {
    display: inline-block; margin: 0;
    font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.1;
    background: var(--grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-price:empty { display: none; }
/* Precio + ⓘ en la misma fila (solo Essential, que es el que tiene tramo
   gratis). `position: relative` es el ancla del globo. */
.plan-price-line { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.plan-info {
    flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: help;
    display: inline-grid; place-items: center; color: var(--sky);
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.plan-info[hidden] { display: none; }
.plan-info:hover { transform: translateY(-1px); }
.plan-info:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 50%; }
/* El globo abre con hover Y con foco: en touch no hay hover, y un toque da foco
   — sin eso el dato no se puede leer nunca desde un teléfono. */
.plan-tip {
    position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 5;
    width: max-content; max-width: 220px; padding: 8px 11px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.8rem; line-height: 1.45;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--card-border); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.plan-info:hover ~ .plan-tip,
.plan-info:focus ~ .plan-tip { opacity: 1; visibility: visible; transform: none; }
/* Con la ⓘ oculta (planes pagos) el globo no tiene por qué poder abrirse. */
.plan-info[hidden] ~ .plan-tip { display: none; }
.plan-price-note { font-size: 0.82rem; color: var(--text-dim); }
.plan-price-note:empty { display: none; }
/* "Consultá tu propuesta" — only shown when prices are hidden (flag off) */
.plan-price-consulta {
    font-family: var(--font-head); font-weight: 700; font-size: 1.2rem;
    background: var(--grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: none;
}
body[data-prices="off"] .plan-price,
body[data-prices="off"] .plan-price-note { display: none !important; }
body[data-prices="off"] .plan-price-consulta { display: inline-block; }
body[data-prices="off"] #selector { display: none; }

/* Aclaración de impuestos: una sola para las tres tarjetas, debajo de la
   grilla. Con los precios apagados no hay nada que aclarar. */
.plan-taxes {
    margin: 26px auto 0; text-align: center;
    color: var(--text-dim); font-size: 0.85rem;
}
.plan-taxes[hidden] { display: none; }
body[data-prices="off"] .plan-taxes { display: none; }

/* sub-funcionalidades anidadas (Control Horario) */
.plan-feat-group { flex-direction: column; align-items: stretch; gap: 8px; }
.plan-feat-main { display: flex; align-items: flex-start; gap: 11px; }
.plan-subfeatures {
    list-style: none; margin: 0 0 0 29px; padding-left: 14px;
    display: flex; flex-direction: column; gap: 6px;
    border-left: 1px solid var(--card-border);
}
.plan-subfeatures li {
    position: relative; color: var(--text-dim); font-size: 0.85rem; line-height: 1.35;
}
.plan-subfeatures li::before {
    content: ""; position: absolute; left: -15px; top: 0.55em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--sky); opacity: 0.75;
}

/* ===== Tabla comparativa por funcionalidad ===== */
.plan-compare-wrap {
    max-width: 960px; margin: 0 auto; overflow-x: auto;
    border-radius: var(--radius); border: 1px solid var(--card-border);
    background: var(--card);
    box-shadow: 0 26px 60px -34px rgba(249, 107, 17, 0.5);
    -webkit-overflow-scrolling: touch;
}
.plan-compare {
    width: 100%; min-width: 620px; border-collapse: collapse;
    font-size: 0.94rem;
}
.plan-compare thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 16px 18px; text-align: center;
    font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--text);
    background: var(--surface);
    border-bottom: 1px solid var(--card-border);
}
.plan-compare thead th.pc-feature-col {
    text-align: left; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-dim);
}
.plan-compare thead th.pc-col-featured span {
    display: inline-block; padding: 4px 12px; border-radius: 999px; color: #FFFFFF;
    background: var(--grad); background-size: 160% auto;
    box-shadow: 0 8px 20px -10px var(--blue);
}
.plan-compare tbody th[scope="row"] {
    text-align: left; font-weight: 500; color: var(--text-soft);
    padding: 13px 18px;
}
.plan-compare tbody td {
    text-align: center; padding: 13px 18px; width: 120px;
    border-left: 1px solid var(--card-border);
}
.plan-compare tbody tr:nth-child(even) th[scope="row"],
.plan-compare tbody tr:nth-child(even) td { background: rgba(255, 138, 61, 0.03); }
.plan-compare tbody tr { border-top: 1px solid var(--card-border); }
/* grupo/categoría */
.plan-compare tr.pc-group th {
    text-align: left; padding: 15px 18px 9px;
    font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky);
    background: var(--surface);
    border-top: 1px solid var(--card-border);
}
/* columna Profesional destacada */
.plan-compare .pc-col-featured { background: rgba(255, 138, 61, 0.06) !important; }
.plan-compare tbody tr:nth-child(even) td.pc-col-featured { background: rgba(255, 138, 61, 0.09) !important; }
.plan-compare thead th.pc-col-featured { background: linear-gradient(180deg, rgba(255, 138, 61,0.10), var(--surface)); }
/* check incluido */
.plan-compare td[data-yes]::before {
    content: ""; display: inline-block; width: 20px; height: 20px;
    background: var(--grad); background-size: 200% auto;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* no incluido: guion sutil */
.plan-compare td[data-no]::before {
    content: "—"; color: var(--text-dim); opacity: 0.5; font-weight: 600;
}
/* roadmap / próximamente */
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.roadmap-card {
    position: relative; display: flex; flex-direction: column; gap: 14px;
    padding: 30px 26px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.roadmap-card:hover { transform: translateY(-6px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }
.roadmap-card .pc-soon { position: absolute; top: 18px; right: 18px; }
.roadmap-ico {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
    background: rgba(255, 138, 61, 0.10); border: 1px solid rgba(255, 138, 61, 0.28);
}
.roadmap-card h3 { font-family: var(--font-head); font-size: 1.15rem; padding-right: 96px; }
.roadmap-card p { color: var(--text-soft); font-size: 0.94rem; line-height: 1.55; }
@media (max-width: 760px) {
    .roadmap-grid { grid-template-columns: 1fr; gap: 16px; }
    .roadmap-card h3 { padding-right: 96px; }
}

/* próximamente: badge */
.pc-soon {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-family: var(--font-head); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.03em; line-height: 1.2; white-space: nowrap;
    color: var(--sky); background: rgba(255, 138, 61, 0.10);
    border: 1px solid rgba(255, 138, 61, 0.30);
}
/* sub-funcionalidad indentada */
.plan-compare tbody th.pc-sub {
    padding-left: 34px; font-weight: 400; font-size: 0.92em; color: var(--text-dim);
    position: relative;
}
.plan-compare tbody th.pc-sub::before {
    content: ""; position: absolute; left: 20px; top: 50%; width: 7px; height: 1px;
    background: var(--text-dim); opacity: 0.5;
}

/* helper CTA band (reusa el patrón de nos-cta-card) */
.plan-helper {
    position: relative; overflow: hidden; text-align: center;
    max-width: 820px; margin: 0 auto; padding: 56px 40px;
    border-radius: var(--radius); background: var(--card);
    border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 26px 60px -30px rgba(249, 107, 17, 0.5);
}
.plan-helper::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(600px 240px at 50% -30%, rgba(255, 138, 61, 0.16), transparent 70%);
}
.plan-helper > * { position: relative; z-index: 1; }
.plan-helper .kicker { margin-bottom: 10px; }
.plan-helper h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.plan-helper p { margin: 16px auto 28px; max-width: 520px; color: var(--text-soft); font-size: 1.05rem; }

/*
 * La comparativa en telefono: no entra, y ya scrollea dentro de su caja — pero
 * sin ninguna senal, asi que se ve una palabra cortada ("Esenci…") y parece
 * rota. Se congela la columna de funcionalidad para no perder la referencia al
 * desplazarse, y se achican las de planes para que entre mas de una a la vez:
 * la tercera queda recortada a proposito, que es lo que avisa que hay mas.
 */
@media (max-width: 620px) {
    .plan-compare { min-width: 540px; font-size: 0.88rem; }
    .plan-compare thead th { padding: 14px 10px; font-size: 0.92rem; }
    .plan-compare tbody td { width: 96px; padding: 12px 8px; }

    /* El fondo tiene que ser opaco o las columnas pasan por debajo del texto.
       Se repite el selector de filas alternas a proposito: `tr:nth-child(even)
       th[scope="row"]` tiene mas especificidad que `tbody th[scope="row"]` y le
       devolvia el fondo translucido, con los tildes encimados sobre el nombre. */
    .plan-compare thead th.pc-feature-col,
    .plan-compare tbody th[scope="row"],
    .plan-compare tbody tr:nth-child(even) th[scope="row"] {
        position: sticky; left: 0;
        padding-left: 14px; padding-right: 12px;
        background: var(--surface);
    }
    .plan-compare thead th.pc-feature-col { z-index: 3; }
    .plan-compare tbody th[scope="row"],
    .plan-compare tbody tr:nth-child(even) th[scope="row"] { z-index: 1; }
    .plan-compare tr.pc-group th { padding-left: 14px; }
    /* La fila de categoria NO se fija: ocupa todo el ancho con colspan, y una
       celda que ya empieza en 0 y mide lo mismo que la tabla no tiene contra
       que pinnearse — `position: sticky` ahi no hace nada. Se deja scrollear;
       lo que importa es que el nombre de la funcionalidad quede a la vista. */
}

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
    border-radius: var(--radius-sm); background: var(--card);
    border: 1px solid var(--card-border); overflow: hidden;
    transition: border-color 0.3s var(--ease);
}
.faq-item[open] { border-color: rgba(255, 138, 61, 0.4); }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 24px; cursor: pointer; list-style: none;
    font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { flex: 0 0 auto; color: var(--sky); transition: transform 0.3s var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item p { padding: 0 24px 22px; color: var(--text-soft); font-size: 0.96rem; }

/* Salto al formulario de contacto (punto 7 de las observaciones).
   Los 110px de padding de la seccion son aire correcto al scrollear de corrido,
   pero al saltar desde el boton "Solicitar demo" dejan el formulario cortado en
   pantallas 16:9 (1920x1080 => ~950px utiles). El scroll-margin negativo mueve
   SOLO el punto de llegada del ancla, no el layout. */
#contacto { scroll-margin-top: -30px; }
#contacto .section-head { margin-bottom: 36px; }

/* accessible-hidden caption */
.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: 980px) {
    .plan-grid, .plan-grid--3 { grid-template-columns: repeat(2, 1fr); max-width: none; }
    .plan-card--featured, .plan-card--featured:hover { transform: none; }
    .plan-sizer { gap: 14px; padding: 11px 18px; }
}
@media (max-width: 760px) {
    .plan-hero { min-height: auto; padding: 140px 0 60px; }
    /* Sin el label entran el slider y el valor; abajo de 560px la barra se
       parte en dos lineas y se compensa apretando el padding, porque queda
       pegada y cada pixel de alto se lo saca a las tarjetas. */
    .plan-sizer-label { display: none; }
    /* El slider se lleva una fila entera; el valor y la moneda comparten la de
       abajo. Sin esto son tres filas y la barra pegajosa trepa a 117px, que en
       un viewport de 800 se le resta a las tarjetas. */
    .plan-sizer { gap: 8px 14px; padding: 10px 16px; justify-content: center; }
    .plan-sizer-out { margin: 0; }
    .plan-sizer-range { flex-basis: 100%; height: 18px; }
    /* el min-width del numero esta pensado para 3 digitos alineados en
       escritorio; aca solo hace falta que entre, y son los 8px que faltan
       para que el valor y la moneda compartan fila */
    .plan-sizer-value { min-width: 0; }
    .plan-sizer .cselect { width: 168px; }
    .plan-helper { padding: 40px 24px; }
    .plan-compare { font-size: 0.88rem; }
    .plan-compare thead th, .plan-compare tbody th[scope="row"], .plan-compare tbody td { padding: 11px 12px; }
    .plan-compare tbody td { width: 84px; }
}
@media (max-width: 460px) {
    .plan-grid, .plan-grid--3 { grid-template-columns: 1fr; }
    /* a una columna la primera tarjeta es Essential, sin cinta: el hueco
       grande de arriba deja de tener a quien esquivar */
    .plan-sizer { margin-bottom: 26px; }
}

/* ===== Clientes page ===== */
/* small page hero, reuses hero-bg / blobs / ridge motif (like plan-hero) */
.cli-hero {
    position: relative; display: flex; align-items: center; text-align: center;
    min-height: min(56vh, 500px); padding: 168px 0 80px; overflow: hidden;
    background: var(--bg-hero);
}
.cli-hero-content { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }
.cli-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em;
    margin-top: 4px;
}
.cli-hero-sub {
    margin: 22px auto 0; font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--text-soft); max-width: 660px;
}

/* client logo grid (tidy bordered cells, monochrome like .logo-mark) */
.cli-logo-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
    max-width: 1180px; margin: 8px auto 0;
}
/* Punto 9 de las observaciones V2: los logos se veian chicos sobre su
   rectangulo. Los 15 archivos son lienzos de 600x360 con el logo adentro, asi
   que a 44px de alto rendereaban 73px de ancho sobre una celda de 168px — habia
   aire de sobra. Se duplica el alto (44 -> 88px, o sea 147px de ancho) y se
   afloja el padding para que entren sin tocar los bordes. `max-width: 100%`
   sigue siendo el tope: en mobile la celda es mas angosta y el logo se achica
   solo en vez de desbordar. */
.cli-logo-cell {
    display: grid; place-items: center; padding: 20px 14px; border-radius: var(--radius-sm);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cli-logo-cell:hover {
    transform: translateY(-4px); border-color: rgba(255, 138, 61, 0.45);
    box-shadow: 0 16px 40px -18px rgba(255, 138, 61, 0.5), inset 0 0 30px -18px rgba(255, 138, 61, 0.6);
}
.cli-logo-cell img {
    height: 88px; width: auto; max-width: 100%;
    filter: brightness(0) invert(1); opacity: 0.6;   /* blanco sobre navy (dark) */
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
:root[data-theme="light"] .cli-logo-cell img { filter: brightness(0); opacity: 0.55; }  /* negro sobre claro */
.cli-logo-cell:hover img { opacity: 1; transform: scale(1.05); }

/* --- Franja de impacto --- */
.cli-impact-sec { padding: 40px 0; }
.cli-impact {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    padding: 34px 30px; border-radius: var(--radius);
    background: linear-gradient(120deg, rgba(255, 138, 61, 0.08), rgba(249, 107, 17, 0.03));
    border: 1px solid var(--card-border);
}
.cli-impact-item { text-align: center; padding: 0 10px; }
.cli-impact-item + .cli-impact-item { border-left: 1px solid var(--card-border); }
.cli-impact-num {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.02em;
    background: var(--grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cli-impact-lbl { display: block; margin-top: 8px; color: var(--text-soft); font-size: 0.9rem; line-height: 1.45; }

/* --- Mapa de presencia LATAM --- */
.cli-map { display: grid; place-items: center; margin-top: 24px; }
.wm-svg { width: min(100%, 880px); height: auto; display: block; overflow: visible; }
.wm-dots { fill: rgba(170, 170, 176, 0.46); }
.wm-dots-latam { fill: #FF8A3D; fill-opacity: 0.92; filter: drop-shadow(0 0 3px rgba(255, 138, 61, 0.6)); }
.wm-arcs .wm-arc {
    stroke: url(#wmArc); stroke-width: 1.6; stroke-linecap: round;
    stroke-dasharray: 5 9; animation: wmflow 2.4s linear infinite;
}
.wm-arc-reach { opacity: 0.62; stroke-width: 1.4; }
.wm-nodes circle { filter: drop-shadow(0 0 3px rgba(255, 138, 61, 0.8)); opacity: 0.9; }
@keyframes wmflow { to { stroke-dashoffset: -14; } }
.wm-office .md-core { fill: #FFFFFF; filter: drop-shadow(0 0 5px rgba(255, 138, 61, 0.9)); }
.wm-office text { font-family: var(--font-head); font-size: 11px; font-weight: 600; fill: var(--text); }
.md-pulse {
    fill: none; stroke: #FF8A3D; stroke-width: 1.4; transform-box: fill-box; transform-origin: center;
    animation: mapPulse 2.6s ease-out infinite;
}
@keyframes mapPulse {
    0% { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* testimonials */
.cli-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cli-testi-card {
    position: relative; display: flex; flex-direction: column; gap: 20px;
    padding: 34px 30px 30px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cli-testi-card:hover { transform: translateY(-6px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }
.cli-testi-quote-mark {
    font-family: var(--font-head); font-weight: 700; font-size: 3.4rem; line-height: 0.6;
    background: var(--grad); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cli-testi-quote { color: var(--text-soft); font-size: 1rem; line-height: 1.6; flex: 1 1 auto; }
.cli-testi-author { display: flex; align-items: center; gap: 14px; }
.cli-testi-avatar {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; object-position: center 20%;
    border: 2px solid rgba(255, 138, 61, 0.35);
}
.cli-testi-author-text { display: flex; flex-direction: column; gap: 2px; }
.cli-testi-name { font-family: var(--font-head); font-weight: 600; color: var(--text); font-size: 0.98rem; }
.cli-testi-role { color: var(--text-dim); font-size: 0.86rem; }

@media (max-width: 980px) {
    .cli-logo-grid { grid-template-columns: repeat(3, 1fr); }
    .cli-testi-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 760px) {
    .cli-hero { min-height: auto; padding: 140px 0 60px; }
    .cli-impact { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .cli-impact-item + .cli-impact-item { border-left: 0; }
}
@media (max-width: 460px) {
    .cli-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cli-logo-cell { padding: 20px 14px; }
    .cli-logo-cell img { height: 36px; }
}

/* ===== App page ===== */
/* two-column hero, like nosotros hero */
.app-hero {
    position: relative; display: flex; align-items: center;
    min-height: min(78vh, 660px); padding: 170px 0 90px; overflow: hidden;
    background: var(--bg-hero);
}
.app-hero-content {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 56px; align-items: center;
}
.app-hero-copy { max-width: 620px; }
.app-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em;
    margin-top: 4px;
}
.app-hero-sub {
    margin-top: 22px; font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--text-soft); max-width: 560px;
}

/* store download badges */
.app-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.app-badge { display: inline-flex; transition: transform 0.3s var(--ease); }
.app-badge img { height: 48px; width: auto; display: block; border-radius: 10px; }
.app-badge:hover { transform: translateY(-3px); }

/* phone / app visual */
.app-hero-media {
    position: relative; display: flex; justify-content: center; align-items: center;
}
/* La foto del hero trae su propio celular, su fondo y sus esquinas: no se le
   dibuja un marco encima. Solo la sombra, para despegarla del fondo oscuro. */
.app-shot {
    display: block; width: 100%; max-width: 560px; height: auto;
    border-radius: 22px;
    /* La foto es clara y el hero es navy: sin borde queda como un rectangulo
       blanco pegado encima. El borde de 1px frio es el mismo que usan las
       tarjetas del sitio, y la ata al resto del diseno. */
    border: 1px solid rgba(255, 138, 61, 0.22);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}


/* features grid (reuses sol-card look via app-feat-card) */
.app-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.app-feat-card {
    position: relative; padding: 30px 28px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.app-feat-card:hover { transform: translateY(-8px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }
.app-feat-icon {
    width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 20px;
    background: linear-gradient(140deg, rgba(255, 138, 61, 0.16), rgba(249, 107, 17, 0.06));
    border: 1px solid rgba(255, 138, 61, 0.2);
}
.app-feat-icon svg { width: 30px; height: 30px; }
.app-feat-icon svg * { transform-box: fill-box; transform-origin: center; }
.app-feat-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.app-feat-card p { color: var(--text-soft); font-size: 0.95rem; }

/* Tarjeta ancha del ciclo de vida (punto 16 de las observaciones V2).
   Ocupa la fila entera: la grilla es de 3 columnas y con 6 tarjetas quedaba
   exacta, asi que una septima suelta dejaba una fila con un solo elemento.
   Al ser ancha, ademas, las tres etapas entran en linea y se leen como
   secuencia — que es justo lo que hay que comunicar. */
.app-feat-card--wide { grid-column: 1 / -1; }
.app-cycle {
    list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; margin-top: 22px; padding-top: 22px;
    border-top: 1px solid var(--card-border);
}
.app-cycle li { display: flex; flex-direction: column; gap: 5px; }
.app-cycle strong {
    font-family: var(--font-head); font-size: 0.95rem; color: var(--text);
}
/* La flecha marca la secuencia; no va en el primero, y se apaga al apilar
   porque apuntando hacia el costado con las etapas una debajo de otra
   contradice la lectura. */
.app-cycle li + li strong::before {
    content: "→ "; color: var(--sky); opacity: 0.7;
}
.app-cycle span { color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 760px) {
    .app-cycle { grid-template-columns: 1fr; gap: 14px; }
    .app-cycle li + li strong::before { content: none; }
}

/* security block */
.app-sec { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.app-sec-copy { max-width: 560px; }
.app-sec-copy .kicker { margin-bottom: 10px; }
.app-sec-copy h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.app-sec-copy p { margin: 16px 0 0; color: var(--text-soft); font-size: 1.05rem; }
.app-sec-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--sky); font-weight: 600; }
.app-sec-link svg { transition: transform 0.3s var(--ease); }
.app-sec-link:hover svg { transform: translateX(4px); }
.app-sec-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.app-sec-item {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 22px 24px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.app-sec-item:hover { transform: translateY(-4px); border-color: rgba(255, 138, 61, 0.4); }
.app-sec-item-ic {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(255, 138, 61, 0.16), rgba(249, 107, 17, 0.06));
    border: 1px solid rgba(255, 138, 61, 0.2);
}
.app-sec-item-ic svg { width: 24px; height: 24px; }
.app-sec-item span { color: var(--text); font-size: 1rem; font-weight: 500; align-self: center; }

/* download CTA band */
.app-cta-card {
    position: relative; overflow: hidden; text-align: center;
    max-width: 820px; margin: 0 auto; padding: 56px 40px;
    border-radius: var(--radius); background: var(--card);
    border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 26px 60px -30px rgba(249, 107, 17, 0.5);
}
.app-cta-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(600px 240px at 50% -30%, rgba(255, 138, 61, 0.16), transparent 70%);
}
.app-cta-card > * { position: relative; z-index: 1; }
.app-cta-card h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.app-cta-card p { margin: 16px auto 28px; max-width: 560px; color: var(--text-soft); font-size: 1.05rem; }
.app-cta-badges { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }

@media (max-width: 980px) {
    .app-hero-content { grid-template-columns: 1fr; gap: 40px; }
    .app-hero-copy { max-width: none; }
    .app-hero-media { order: -1; }
    .app-feat-grid { grid-template-columns: repeat(2, 1fr); }
    .app-sec { grid-template-columns: 1fr; gap: 34px; }
    .app-sec-copy { max-width: none; }
}
@media (max-width: 760px) {
    .app-hero { min-height: auto; padding: 140px 0 70px; }
    .app-badges { justify-content: flex-start; }
}
@media (max-width: 460px) {
    .app-feat-grid { grid-template-columns: 1fr; }
    .app-cta-card { padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .blob, .scroll-hint span, .gradient-text, .hero-ridge .ridge, .marquee-track,
    .scene-fig,
    .ic-pulse, .ic-pulse-2, .ic-gear, .ic-chart, .ic-flow-line, .ic-check,
    .st-send-arrow, .st-ping, .st-notify-card, .st-sign-stroke,
    .step-num, .steps-dot, .rd-sign, .rd-seal, .rd-check, .nos-media-badge, .md-pulse,
    .andy-launcher.is-calling::after { animation: none !important; }
    .steps-dot, .md-pulse { opacity: 0; }
    .gradient-text { background-position: 0 center; }
    .stat-num-big { background-position: 0 center; }
    .hero-spotlight { display: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .ic-chart, .ic-flow-line, .ic-check, .st-sign-stroke, .rd-sign, .rd-check { stroke-dashoffset: 0; }
    html { scroll-behavior: auto; }
}

/* Turnstile con appearance:interaction-only.
   No alcanza con :empty — el widget siempre inyecta un input oculto, así que la
   caja nunca queda vacía aunque no se vea nada. El margen se ata al <iframe>,
   que es lo único que aparece cuando hay un desafío real. */
.turnstile-box { margin: 0; line-height: 0; }
.turnstile-box:has(iframe) { margin: 4px 0 14px; line-height: normal; }
.fn-form .turnstile-box { grid-column: 1 / -1; }
.fn-form .turnstile-box:has(iframe) { margin: 8px 0 0; }

/* ===== Selector de idioma (3 idiomas: menú, no toggle) ===== */
.lang-switch { position: relative; }
.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 950;
    min-width: 148px; margin: 0; padding: 6px; list-style: none;
    background: var(--nav-bg); border: 1px solid var(--card-border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}
.lang-menu li { margin: 0; }
.lang-menu a {
    display: block; padding: 8px 12px; border-radius: 8px;
    font-size: 0.9rem; color: var(--text-soft);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-menu a:hover { background: var(--ghost-bg); color: var(--text); }
.lang-menu a[aria-current="true"] { color: var(--text); font-weight: 600; }
.lang-menu a[aria-current="true"]::after { content: " ·"; color: var(--sky); }

/* ===== Blog =====
   Las paginas del blog las arma functions/blog/, no el build: estas clases se
   usan solo desde ahi. El envoltorio (header, footer, botones) es el mismo del
   resto del sitio, asi que aca va nada mas lo propio del blog. */

.container-narrow { max-width: 760px; }

.blog-hero { padding-bottom: 0; }
.blog-hero .section-head { margin-bottom: 0; }
.blog-hero .section-head h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }

/* ----- Listado ----- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.blog-card {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-card:hover { transform: translateY(-8px); border-color: rgba(255, 138, 61, 0.4); box-shadow: var(--shadow); }

.bc-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); }
.bc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card:hover .bc-media img { transform: scale(1.04); }
/* Sin imagen destacada: un degrade de marca en vez de un hueco gris. */
.bc-ph { display: block; width: 100%; height: 100%; background: var(--bg-hero); }

.bc-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; flex: 1; }
.bc-meta {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.02em;
}
.bc-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.blog-card h3 { font-size: 1.16rem; line-height: 1.32; }
.blog-card h3 a { color: var(--text); text-decoration: none; }
.blog-card h3 a:hover { color: var(--sky); }
.bc-excerpt {
    margin: 0; color: var(--text-soft); font-size: 0.95rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-more {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px;
    font-size: 0.88rem; font-weight: 600; color: var(--sky);
}
.bc-more svg { transition: transform 0.3s var(--ease); }
.blog-card:hover .bc-more svg { transform: translateX(4px); }

.blog-empty { text-align: center; color: var(--text-soft); padding: 60px 0; }

.blog-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 56px; }
.bp-count { font-size: 0.9rem; color: var(--text-dim); letter-spacing: 0.04em; }

/* ----- Nota ----- */
.post .container { max-width: 760px; }
.post-breadcrumb { margin-bottom: 26px; font-size: 0.9rem; }
.post-breadcrumb a { color: var(--text-dim); text-decoration: none; }
.post-breadcrumb a:hover { color: var(--sky); }
.post h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.post-meta {
    display: flex; align-items: center; gap: 10px; margin: 18px 0 34px;
    font-size: 0.87rem; color: var(--text-dim);
}
.post-hero { margin: 0 0 40px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-border); }
.post-hero img { display: block; width: 100%; height: auto; }

/* Cuerpo del post: HTML que llega de WordPress. Se estila por etiqueta, no por
   clase, porque las clases que trae (wp-block-*, gb-*, has-accent-color) son
   del tema de WordPress y no existen aca. */
.post-body { font-size: 1.06rem; line-height: 1.75; color: var(--text-soft); }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.25em; }
.post-body h2 { margin: 2em 0 0.7em; font-size: clamp(1.35rem, 2.6vw, 1.7rem); color: var(--text); }
.post-body h3 { margin: 1.7em 0 0.6em; font-size: 1.18rem; color: var(--text); }
.post-body h2 strong, .post-body h3 strong { font-weight: inherit; }
.post-body strong { color: var(--text); font-weight: 600; }
.post-body a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--blue); }
.post-body ul, .post-body ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.post-body li { margin-bottom: 0.5em; }
.post-body li::marker { color: var(--sky); }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body figure { margin: 2em 0; }
.post-body figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--text-dim); text-align: center; }
.post-body blockquote {
    margin: 2em 0; padding: 4px 0 4px 22px;
    border-left: 2px solid var(--blue); color: var(--text); font-size: 1.1rem;
}
.post-body hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--card-border); }
/* WordPress usa <mark> para resaltar; sus colores de tema no llegan hasta aca. */
.post-body mark { background: rgba(255, 138, 61, 0.14); color: var(--text); padding: 1px 4px; border-radius: 4px; }
.post-body code {
    font-size: 0.9em; padding: 2px 6px; border-radius: 6px;
    background: var(--ghost-bg); border: 1px solid var(--card-border);
}
.post-body pre { overflow-x: auto; padding: 18px; border-radius: var(--radius-sm); background: var(--ink-2); border: 1px solid var(--card-border); }
.post-body pre code { background: none; border: 0; padding: 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 0.95rem; }
.post-body th, .post-body td { padding: 10px 12px; border-bottom: 1px solid var(--card-border); text-align: left; }
.post-body th { color: var(--text); font-weight: 600; }

.post-cta {
    margin-top: 60px; padding: 34px 32px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
}
.post-cta h2 { font-size: 1.4rem; }
.post-cta p { margin: 12px 0 22px; color: var(--text-soft); }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 980px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .blog-grid { grid-template-columns: 1fr; }
    .post-cta { padding: 26px 22px; }
    .post-cta-actions .btn { flex: 1 1 100%; justify-content: center; }   /* a mitad de ancho, "Solicitar demo" parte en dos lineas */
}

/* ===== Alta de prueba: el logo se arma al confirmar =====
   Único lugar del sitio con la animación de marca. Va acá y no en el header
   porque es el momento en que la persona TERMINÓ algo y no está esperando:
   ahí el movimiento premia en vez de interrumpir. En el header el logo mide
   30px (no se vería el detalle) y, al ser el sitio multipágina, se repetiría
   en cada navegación. */
.trial-success-mark { width: 100%; max-width: 260px; margin-bottom: 4px; }
.trial-logo { width: 100%; height: auto; overflow: visible; color: var(--text); }
.trial-logo .tl-l path:not([fill]), .trial-logo .tl-l polygon { fill: currentColor; }
.trial-logo .tl-p path { fill: currentColor; }

.trial-success.is-in .tl-l, .form-success.is-in .tl-l,
.trial-success.is-in .tl-w, .form-success.is-in .tl-w,
.trial-success.is-in .tl-p, .form-success.is-in .tl-p {
    animation-duration: 2.2s; animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform-box: fill-box; transform-origin: center;
}
.trial-success.is-in .tl-w, .form-success.is-in .tl-w { animation-name: tlWing; transform-origin: 70% 60%; }
.trial-success.is-in .tl-p, .form-success.is-in .tl-p { animation-name: tlPupil; }
.trial-success.is-in .tl-l, .form-success.is-in .tl-l { animation-name: tlRise; }
/* TuLegajo: las 12 piezas del logo suben en cascada, de izquierda a derecha */
.trial-success.is-in .tl-l, .form-success.is-in .tl-l { animation-duration: 1.1s; animation-delay: calc(var(--i, 0) * 0.05s); }

@keyframes tlWing {
    0%   { opacity: 0; transform: translateX(-22%) rotate(-14deg) scale(0.84); }
    40%  { opacity: 1; transform: none; }
    100% { opacity: 1; transform: none; }
}
@keyframes tlPupil {
    0%, 34%   { opacity: 0; transform: scale(0.2); }
    46%       { opacity: 1; transform: scale(1.2); }
    54%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes tlRise {
    0% { opacity: 0; transform: translateY(40%); }
    100%    { opacity: 1; transform: translateY(0); }
}

/* Quien pidió menos movimiento ve el logo quieto, no una pantalla vacía. */
@media (prefers-reduced-motion: reduce) {
    .trial-success.is-in .tl-l, .form-success.is-in .tl-l,
    .trial-success.is-in .tl-w, .form-success.is-in .tl-w,
    .trial-success.is-in .tl-p, .form-success.is-in .tl-p { animation: none; opacity: 1; transform: none; }
    /* El aviso de salida aparece igual: lo que se apaga es el desplazamiento. */
    .exit-card, .exit-pop.is-in .exit-card { transition: none; transform: none; }
}

/* ===== Landings de campaña (/lp/<slug>) =====
   Las arma functions/lp/ mapeando los bloques de Gutenberg. Reusa .post-body
   para la tipografia del cuerpo; aca va solo lo que el blog no necesita. */

.lp-hero { padding-bottom: 0; }
/* El aire de abajo lo pone la imagen, no el encabezado: si la landing no tiene
   imagen destacada, el hero cierra pegado a la primera seccion en vez de dejar
   un hueco de 150px. */
.lp-hero .section-head { margin-bottom: 0; }
.lp-hero-media { margin-top: 44px; }
.lp-hero .section-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.lp-hero-media {
    margin-left: auto; margin-right: auto; max-width: 940px; border-radius: var(--radius);
    overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow);
}
.lp-hero-media img { display: block; width: 100%; height: auto; }

.lp-section { padding: 70px 0; }
.lp-body { font-size: 1.06rem; }
.lp-body > :first-child { margin-top: 0; }
/* En una landing el h2 abre seccion: centrado y mas grande que en una nota. */
.lp-body h2 { text-align: center; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 0.9em; }
.lp-body h2 + p { text-align: center; color: var(--text-soft); }

.lp-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 32px 0 8px; }
/* .lp-actions vive dentro de .post-body, que subraya y recolorea todos los <a>.
   Sin esto los botones salen subrayados y con el color del texto de enlace. */
.lp-body .lp-actions a { text-decoration: none; }
.lp-body .lp-actions .btn-primary { color: #fff; }
.lp-body .lp-actions .btn-ghost { color: var(--text); }

/* Columnas de Gutenberg -> tarjetas. auto-fit para que 2, 3 o 4 columnas
   funcionen sin que marketing tenga que pensar en breakpoints. */
.lp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin: 34px 0; }
.lp-col {
    padding: 26px 24px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.lp-col:hover { transform: translateY(-6px); border-color: rgba(255, 138, 61, 0.4); }
.lp-col > :first-child { margin-top: 0; }
.lp-col > :last-child { margin-bottom: 0; }
.lp-col h2, .lp-col h3 { text-align: left; font-size: 1.15rem; color: var(--text); margin-bottom: 0.5em; }
.lp-col img { border-radius: var(--radius-sm); }

.lp-cta .contact-form { max-width: 620px; margin: 0 auto; }
.lp-alt { margin-top: 22px; text-align: center; color: var(--text-soft); font-size: 0.95rem; }
.lp-alt a { color: var(--sky); }

@media (max-width: 620px) {
    .lp-section { padding: 52px 0; }
    .lp-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ===== Banner de cookies =====
   Barra abajo, por encima del boton de WhatsApp. No bloquea la pagina: en LATAM
   el modelo es aviso + opcion de rechazar, no consentimiento previo. */
.cookie-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--header-bg); backdrop-filter: blur(16px);
    border-top: 1px solid var(--card-border);
    transform: translateY(100%); transition: transform 0.32s var(--ease);
}
.cookie-bar.is-in { transform: translateY(0); }
.cookie-bar.is-out { transform: translateY(100%); }
.cookie-text { margin: 0; font-size: 0.9rem; color: var(--text-soft); max-width: 640px; }
.cookie-text a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn { padding: 10px 22px; font-size: 0.9rem; }
/* mientras esta la barra, los flotantes se corren para no quedar debajo */
/* Con el banner arriba solo se mueve el offset base: la burbuja y el panel se
   recalculan solos. Antes cada uno tenia su propio numero y la burbuja quedaba
   dentro del boton. */
body:has(.cookie-bar:not(.is-out)) { --andy-bottom: 96px; }
@media (max-width: 640px) {
    .cookie-bar { gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .cookie-text { font-size: 0.84rem; }
    .cookie-actions { width: 100%; }
    .cookie-btn { flex: 1 1 0; padding: 10px 12px; }
}

/* ===== Aviso de salida (punto 6 de las observaciones V2) =====
   Aparece cuando el cursor se va de la pagina por arriba. Es un modal y no una
   barra a proposito: el pedido es que "aparezca un aviso", y la intencion de
   irse ya esta declarada — a diferencia de la burbuja de Andy, que interrumpe a
   alguien que sigue leyendo.
   z-index 945: arriba de Andy (939-941) y DEBAJO del banner de cookies (950).
   Ese orden es a proposito: la primera visita casi siempre tiene el banner en
   pantalla, y si el aviso se le pusiera encima el velo dejaria la decision de
   cookies sin poder tocarse. Asi el banner queda por arriba del velo, visible
   y clickeable, y el aviso igual aparece — que es lo que se pidio. */
.exit-pop {
    position: fixed; inset: 0; z-index: 945;
    display: grid; place-items: center; padding: 20px;
    background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.26s var(--ease);
}
.exit-pop.is-in { opacity: 1; }
.exit-card {
    position: relative; width: min(460px, 100%); padding: 34px 30px 30px;
    border-radius: var(--radius); text-align: center;
    background: var(--surface); border: 1px solid rgba(255, 138, 61, 0.30);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.3s var(--ease);
}
.exit-pop.is-in .exit-card { transform: none; }
.exit-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(520px 200px at 50% -20%, rgba(255, 138, 61, 0.16), transparent 70%);
}
.exit-card > * { position: relative; z-index: 1; }
.exit-title { font-size: 1.5rem; margin-bottom: 12px; }
.exit-text { color: var(--text-soft); font-size: 0.98rem; margin-bottom: 24px; }
.exit-actions { display: flex; flex-direction: column; gap: 10px; }
.exit-actions .btn { justify-content: center; }
.exit-x {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--text-dim);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.exit-x:hover { color: var(--text); background: rgba(255, 138, 61, 0.12); }
@media (max-width: 460px) {
    .exit-card { padding: 30px 20px 24px; }
    .exit-title { font-size: 1.3rem; }
}

/* Pais en la barra de precios. La moneda se deriva de aca y NO se ofrece como
   opcion: un toggle ARS|USD al lado del precio pone las dos monedas a la vista
   e invita a calcular el tipo de cambio implicito. Asi cada visitante ve una
   sola, la suya. Es el mismo componente que el pais del alta. */
.plan-sizer .cselect { flex: 0 0 auto; width: 190px; }
.plan-sizer .cselect-btn {
    padding: 9px 34px 9px 12px; font-size: 0.88rem; border-radius: 999px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.plan-sizer .cselect-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.plan-sizer .cselect-list { width: 240px; left: auto; right: 0; }

/* ===== Desplegable con bandera (paises y prefijo telefonico) =====
   El <select> nativo sigue siendo la fuente de verdad: conserva name, value,
   la validacion propia del formulario y la serializacion de postForm(). Este
   componente lo espeja, porque un <option> nativo no puede mostrar una imagen.
   Si el JS no corre, queda el select nativo funcionando. */
.cselect { position: relative; }
.cselect-native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.cselect-btn {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 14px 40px 14px 16px; border-radius: var(--radius-sm);
    background: var(--input-bg); border: 1px solid var(--card-border);
    color: var(--text); font-family: inherit; font-size: 0.95rem; cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
}
.cselect-btn:hover { border-color: rgba(255, 138, 61, 0.4); }
.cselect-btn:focus-visible,
.cselect[data-open="true"] .cselect-btn { outline: none; border-color: var(--sky); background: rgba(255, 138, 61, 0.06); }
.cselect-btn.invalid { border-color: #e5634d; }
.cselect-ph { color: var(--text-dim); }
.cselect-list {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
    max-height: 264px; overflow-y: auto; padding: 6px; margin: 0; list-style: none;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--radius-sm); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.55);
}
.cselect-opt {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: 8px; cursor: pointer; font-size: 0.93rem; color: var(--text-soft);
}
.cselect-opt:hover, .cselect-opt.active { background: rgba(255, 138, 61, 0.12); color: var(--text); }
.cselect-opt[aria-selected="true"] { color: var(--text); font-weight: 600; }
.cselect-dial { margin-left: auto; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* variante compacta: el prefijo pegado al campo de telefono */
.phone-row { display: flex; gap: 8px; }
.phone-row .cselect { flex: 0 0 auto; }
.phone-row input[type="tel"] { flex: 1 1 auto; min-width: 0; }

.cselect--dial .cselect-btn { padding: 14px 26px 14px 10px; gap: 6px; white-space: nowrap; }
.cselect--dial .select-caret { right: 8px; }
.cselect--dial .cselect-list { left: 0; right: auto; width: 290px; }
@media (max-width: 460px) { .cselect--dial .cselect-list { width: min(290px, 78vw); } }

/* ===== Panel de idioma + país =====
   Un control, dos elecciones independientes. El país se muestra como lista con
   scroll y no como otro desplegable: un menú dentro de un menú es incómodo. */
.lang-toggle { display: inline-flex; align-items: center; gap: 7px; }
.lang-toggle .flag-ic { width: 18px; height: 13px; }
.locale-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
    width: 276px; padding: 12px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--card-border);
    box-shadow: 0 26px 56px -22px rgba(0, 0, 0, 0.6);
}
/* Dos modificadores separados a proposito, porque son dos ejes distintos:
   `--up` es hacia donde abre y **lo decide el JS al abrir**, midiendo el lugar
   que hay; `--left` es el anclaje horizontal y es fijo por posicion en la
   pagina. Estaban en una sola clase, y con eso volteando la direccion vertical
   se movia tambien el anclaje horizontal — en el header, que esta anclado a la
   derecha, eso lo tiraba fuera de pantalla por el otro lado. */
.locale-panel--up { top: auto; bottom: calc(100% + 8px); }
/* En el pie el control esta contra el borde izquierdo: anclado a la derecha el
   panel se sale de pantalla. */
.locale-panel--left { right: auto; left: 0; }
.locale-sec + .locale-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.locale-label {
    display: block; margin-bottom: 8px; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
/* Los tres chips se reparten la fila. `flex-wrap` es la red de seguridad: si
   algun idioma futuro no entra, baja de linea en vez de salirse del panel —
   que es lo que pasaba con "Português" a 250px de ancho. */
.locale-langs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.locale-langs li { flex: 1 1 auto; }
.locale-langs a {
    display: block; padding: 7px 8px; border-radius: 999px; font-size: 0.84rem;
    text-align: center; white-space: nowrap;
    color: var(--text-soft); background: var(--input-bg); text-decoration: none;
}
.locale-langs a:hover { color: var(--text); }
.locale-langs a[aria-current] { background: var(--grad); background-size: 160% auto; color: #FFFFFF; font-weight: 600; }
.locale-countries {
    list-style: none; margin: 0; padding: 0; max-height: 212px; overflow-y: auto;
}
.locale-countries button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 7px 9px; border: 0; border-radius: 8px; background: transparent;
    color: var(--text-soft); font-family: inherit; font-size: 0.88rem; cursor: pointer;
}
.locale-countries button:hover { background: rgba(255, 138, 61, 0.12); color: var(--text); }
.locale-countries button[aria-current] { color: var(--text); font-weight: 600; background: rgba(255, 138, 61, 0.14); }
.locale-hint { margin: 9px 2px 0; font-size: 0.74rem; color: var(--text-dim); line-height: 1.4; }
.lang-switch--footer { position: relative; }
/* En el pie va dentro de la columna de marca, debajo de las redes: es el otro
   control del footer y juntos leen como un grupo. El margen lo separa de los
   iconos para que no parezca una cuarta red social. */
.footer-brand .lang-switch--footer { margin-top: 22px; }

/* ===== Banderas =====
   PNG de 40px de ancho embebidos en base64: 22 paises, 5.8 KB en total.
   Van aca y no como archivos sueltos por dos razones: un desplegable de paises
   dispararia 22 peticiones al abrirse, y los SVG oficiales pesan 1.3 MB juntos
   (los escudos de Bolivia, Ecuador, Mexico y Espana son de altisimo detalle).
   Se dibujan con background-image porque un <option> nativo no admite <svg>. */
.flag-ic {
    display: inline-block; width: 20px; height: 15px; flex: 0 0 auto;
    border-radius: 2px; background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}
.flag-ic[data-c="ar"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAMAAAB0BpxXAAAAOVBMVEX////dsWLs1rTw3sb9/Pzlw43qpQ10rN/R4/Tz5tHcr27iuW7q0Kb68+j39fHfmxX79ez78uLani6jcieqAAAAWElEQVQ4y+3SwQ2AMAhAUaCAUmpb3X9YB9AIB4/955cQCLAlgwU/4Z4MHrERGUMYF6lVSgynoKq3M4Tdh+rlPYQH4VBsM55tglUMEtsYlbet03dc//gLvAEAIhV4te0c2QAAAABJRU5ErkJggg==")}
.flag-ic[data-c="bo"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAilBMVEUAcC3XeSHLwzfgvzECcS7TIRLp3jrTIBHw5Tzw5T3hkynu40HezzjX0Hfn3lLHYx7RLhOzwUWMViTRXRzORhTPUxpIjnaMmT9PVyNupZbc1zeYp1JUmHxknHrVYh7NeiXklirVYR/csUq6si9tnXfcqTlJjzuHg0xtnyzRp1SStScxhXoxhH3azls8d0O5AAAAgklEQVQ4y+3QSRKCQAwFUJLGBnpgngdRFBTQ+1+PvV1lWLDkL1Ovksq3nH25WCc8Brq/4dp9RMbUMyCXxauMJCeg9GGci1IPvS//bxSpaqqqwfRGnIasXr/6U2dAwHuC7fJuMbkSUISs66YnCwX1NQRxnscB0PWgYkyhWc/O2Cc8Bm4tcRiKrQyBiQAAAABJRU5ErkJggg==")}
.flag-ic[data-c="br"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAMAAAAkyw3kAAAAkFBMVEUAlED/ywAwJoEOlzwemjdQSI83oDHjxQZKpC2fthhGN3NAM3VZU5fywAjEmyQ/NYf5yQFoU101K4OVd0OvuRRzdKTSwQuOshx8ryFjqifCvQ+p0MFGP4y8w8q+0tKXrLjwyATrxwXltRC+lyhkXp+JdW12XlWkgji0uM+rqnXr8vDS593K4tmZflSJj7ROQ3x/jyqZAAAA70lEQVQ4y82T2RKCMAxFTaEKBSwUcQEUF9y3//87IwVxpEp9cbyPmTNZbpJO56/U7WphxghgZLRzVg9QPasFM20oZX9MOpmDFwaOE4QeLCbv08UAfUYKsT5AbKq5sY8ceQhJf6zyZIiNeawGmYeB4atThhxiPzsektku4i6SW8VQ0hOAtStE6kZZMkVyI2NPTpmDypOqMo2SLGVVdGA2QAchLtnLKWqAdemAins+eifzaaN0PUzICTYniurpWb2hwp6lQzjFjJzQnC5V9lSGr8ppXC5Wbwx/WeH1wwr1j+KLM9M/XPkKvs4r6D/Xz3QDO1IMs+uu/zEAAAAASUVORK5CYII=")}
.flag-ic[data-c="cl"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAALVBMVEUAMqD////aKRzsk41tLV2qut9FabkfS6vEz+mOpdVZesL7/P7Z4PEuV7HBcH2oC8C/AAAAQklEQVQoz2NgAANWQWTAQJJgATbBBkxB9mU70zBVThQ8jinIIY3FTJ6MBZiCBQwXKHI8pqALGPgZIwMGJSxgJAsCAK+OORxJT/LKAAAAAElFTkSuQmCC")}
.flag-ic[data-c="co"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAD1BMVEUAMIfIEC7/zQCWGER/fkQonp92AAAAHklEQVQoz2NQwgIYRrKgCxbAMLDAGAtgEMQC6CYIAA/lM811RVp8AAAAAElFTkSuQmCC")}
.flag-ic[data-c="cr"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAMAAAC/Wk/yAAAASFBMVEXaKRzmbWTiV03uw7bfRTrpgHg0dVgAFIn////68u/Dv5iNwctUbqT3zMnVsX7bvYWMdFWtydituJGxz9+LdVjl17WnsIzi1rUJ3ngAAAAAVElEQVQoz9XTNxKAMAxEUTkJ1pl8/5tSUrKdx79+jaSRLGQyEK5kI+GXD8ELkcV2wBKwPPt9FQIiphRBwKqqWgnozpy7I6BBazDM2D/rmeHWE/zMC2lRFHFmx68xAAAAAElFTkSuQmCC")}
.flag-ic[data-c="cu"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAAV1BMVEXLFRX99PT0zMzRMDDNHR1oHk/cX18AKo////8LJ4ftq6ulGCv55eWCHECRGje/FRu4FiDWR0dOIV8gJnsyJHDli4v209Pqn5/YUVHjf3/vtbXYT0/cY2OqWtszAAAAdElEQVQoz5WTSRaAIAxDg1QU5xHH+59TH+pSid2w6AfaNEXVJ1QAiC0JoulIEMgHEgRMkX7HA0JGxYGAzsLgIv5ooxDo9vvV0n40I+t5QZmLrN9U9dmzOA0GjCZniK8hG2TmmqHl+SE4OULSFKzNSOOyq3AAcaUUYNcc1uUAAAAASUVORK5CYII=")}
.flag-ic[data-c="do"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAYFBMVEXOESbvsLequcrAyNMzV4Krucvvr7YALWL////YQFHp8ui7nJeIrZHywMa6X2RndneXPDiptJ+0usNmc4Xp3d6rzq2QvpV0NjDu4uO0xbJ+PDZOkmSZkJOPhIeLa4ZCUWdBVNTcAAAAY0lEQVQ4y+3QNxbAIAxEQWwc1uTgHO9/S/eooaLil3rTaNmY1gJAw0gVFoZdGkcI0FMaQxr/YrScnCkUyhopMuDq70ctGfDw5r1UBpSnc5ukkLyndyFmTsagew0A0JN5KywMfxKuFf6lvzb6AAAAAElFTkSuQmCC")}
.flag-ic[data-c="ec"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA7VBMVEX/3QD72wkiYZzpzxqBllAPVqL42QEDTqLtHCSyKETivAhZfWlwi1rdyhyMcTVfgmS2J0DVvTxuVCOvkRrw1iUwaI+IahrduSBARHxrVz2/oQXjsCDIvht7klJiRRuZuhicoTyQoXmqMUifciarxx1rtVWOo0BnhXY7eoaCq4aQrHKv0tx6lo/wzgWFl2I1UoDcwi2pkj68tiZkb2HWuBJ8YRNjV2aAYjPApUVCcXiiWlxcXY9eoIzBtyNWi0I6bHyiY2Gkf4Gdgld4mG6Ao56AoJWgkH9Ch3WBy+Avg5+0oIb0+fpohYGmgYAKcZVq2NRJAAAAwklEQVQ4y+3Mxw6CQBhG0QEElA6KCCIde++99/b+j6MuBcO4Nt7NJPOd/AD8e1YTmwCIGIwRnGoMhi1JSiehlEqv1Z5GERCHKIRmJBFCQaJdCtM9q1xmzS6Wij6Y9WLbUmk3N7OQk1Terlwqx02eCi6x92b0uVqlr3u+HRgA+V5ucfNPU381YgJDCNJO8X4oOjwM8vpkWSiMMywNgShmc67L1VkUAnFUtvodRkZxCCRxEs80Xk8QJsIJwodPEP+yn4IPXesen6UX1vkAAAAASUVORK5CYII=")}
.flag-ic[data-c="sv"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXCAMAAABODP0nAAAASFBMVEU/dL+Bxn5su3/v8ev+/PH/+dzR5rT///8AR6v/+ub65qjk7cCiwqaRyaGRxKSLr8kunKb/99Rysqi43Lb/9tOJy4SCtrScsrAoyayNAAAAV0lEQVQoz+3SOQ7AMAhEUYPBDt6z3/+mOQBScJ/8Er1mJNwymfsmnC6qjsRM6qohe09ebEh7T6kHMaG0gvWuNlxhG+MCG1I4S4NM9hgJiJn1mOn+f3zrATKHGaAVn4jNAAAAAElFTkSuQmCC")}
.flag-ic[data-c="gt"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAZCAMAAAB0BpxXAAAAaVBMVEX///+6yqvv4p39/v309vH6+/nU3shJl9DC3O/u8emer4Pg6NrC0LfK1MGNmVN2lFzt6+qoupeXqn7NxbPn7uKMpHLczqiDjGHl6t+Lfl+itpC8ypf+/Orc4d7k2bKAbE7t3ZHo1oT17LVMH8IaAAAAb0lEQVQ4y+3StxaAMAgFUFINiS2x9/L/H+kaJ3Rw863c4cEBkjgGopjbCH74DgpA9QSmmagKxVISWn3unKFXBJQBZs61HJGAzkLLj6n2FKwbrNq1cYWmOuqNlYsdMnKZMuSO5Z2k7yh7ofB/s6/gBbVpFumu4BL+AAAAAElFTkSuQmCC")}
.flag-ic[data-c="hn"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUBAMAAAANaGKIAAAAG1BMVEX///8AvOQ/zOrZ9fvp+v33/f+17PiX5PQvyOky4WdkAAAAQ0lEQVQY02MQxAIY6CaohAUwQIEBiGBmQAHMIiDS0QBFkDWAgS0BRKIABwb2AgYWNO0tINIDTXsCiGSDacfqpAENJQDF4xmB6xfoAQAAAABJRU5ErkJggg==")}
.flag-ic[data-c="mx"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXCAMAAABODP0nAAAAh1BMVEUAaEfOESb///+qzMHvrrXR0rWKYUHe4dHy7+fW069pPyP8/PnBxKJwra/ur7a2upL19ezm28vRtKOng3HIrHHnzserlmmSblSgelzQ6OJRkpB4VDxkRjXDs4r889m4296Bp6mfZj9/Tie5r6i7083Dtq7b2MLcwpGUlI+Ogmu5iVulyszYwIRdbSBmAAAAfElEQVQoz+XTtxbCMAxAUUMid+P0XihpkPz/92U1A0dkzpvvIh2JEDfv6nS7uJHf0D8TVGH0oOkfUCQfKiVHYTe1RSOfMQYD1c60LmiuEKhTveVNPb4sAsVgljV7xyEgkENpqsrcgWHDMCiTrBeAr4drFtngbNdzHH5/4Q77sAk1toKo3AAAAABJRU5ErkJggg==")}
.flag-ic[data-c="ni"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYBAMAAAB6qqLzAAAALVBMVEX///8AZ8b7+e3+/Pb69uS71y/S6b328dbG4/Ti79Hc8/nS2cfz68apw6ipw6mOpAaKAAAAQUlEQVQY02MQxAIYBqEgHDibMGAAFqvFBzAEVXgfGGEIFuzoZsEQZA4NNcAQZJqWqYAhyK7A7IBpvZIKgj1EwhMA6OYdAQk/YCkAAAAASUVORK5CYII=")}
.flag-ic[data-c="pa"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAPFBMVEX////v6+7+/v72xMaCkKr59/ntio7aEhoHI1fsiIzeLDNabI9sfJvjS1Hvlpr62dpCV38aNGSvuMmwucl/ZNIqAAAAdklEQVQ4y8WRSQ6AMAwDm5Qk3aAs//8rPSIRCV+AOY9sKwnBwRzCi6IIKB47KNaKiLSmwUqPInNLqTFS3batIRu5ElUkUYbE8u1nJod8R0NycGs+FnsHRVVEJM2lZKXnxFjMSgSqeTFboI2z5hkRZdRG+engF055BhJCvUli6QAAAABJRU5ErkJggg==")}
.flag-ic[data-c="py"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAWBAMAAABAoMODAAAAMFBMVEX////VKx4AOKi/zen1ycbn5+fK1M36+vrd3d3BxsPLy8vL5NPm8cva7Mmixq/wxcJuOnMrAAAAQUlEQVQY02MQxAIYBlbQBQb8v8CZDHAQtpQBA7BOmxmAIVj55lw6hmBV7rV2TO3dWzG1M0S0ItjGWACDEhYwsIIA+cwvu1UljOIAAAAASUVORK5CYII=")}
.flag-ic[data-c="pe"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbAgMAAABzfiX9AAAACVBMVEXZECP////zsLY4yROxAAAAFklEQVQY02NgYGBQDQ2NYICAUSYuJgAGeB8eIlqm5wAAAABJRU5ErkJggg==")}
.flag-ic[data-c="pr"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAY1BMVEXuAAAARP/////2gID7wMAJSf1lJpMDQvwvYvs+Mr0cWP/Z4/+QGmXUBxwTPuvfBA/09v9eiP+nvv+9z//CDC/J1/8SUP9Rf/+Qrf/MqMuHZLnyf4J5nP9zmP/5+v98n/9IeP8Vsp8pAAAApUlEQVQ4y42U2xqCIBCEHQs5ZYmmdrb3f8qIz8gLkZkLuOD/ll1ml0LXBSfI6sSBkMcDB3rpMwkCVU2CELf7bksRBFRXbmgBAqMlQYhHkwPdvJs2A/Yqpnrdr2kGTTnF+xNWfak+BG/GH7pqVTi5eM6aRVU6AQ6+WPfH0hHd62m7fI7+agXRDkTVIi7Zd6SdCXpzXpPdQ/ajJDucnBlyCtm5Zn+KD3vCCQEzZfQiAAAAAElFTkSuQmCC")}
.flag-ic[data-c="uy"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAAXVBMVEUAOKj////49e/+/v6sdxHQ2u/EnE2yfQu8iAvo28Xz7OLn0qHJoUj9+/vMqF7axJvgsA/hy5S3hRfGlAriz7Hv5dL06crWuHWeaAzFmS7qvg/Or365jU2vg0DsvQ+//7dBAAAAjklEQVQ4y+2SNxLDMAwEBRBmBqOig/7/TL1ApDxjjxtvvcXdAQNcZHhLZMMRTV+0KK2XE1qA23AKAGCQW6EYULTF0S2aNOngp7aIr5XqXpVH0c4Ypar3tOvix7Yo5k2nlGh9dlqbxREppbIz7YyMMlMpWXKnNVh2Dz+H/o4gHEcwn7z1JfGHfOfD/63POADLigdTMxtMRwAAAABJRU5ErkJggg==")}
.flag-ic[data-c="ve"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbBAMAAAD8PtBdAAAAMFBMVEXPFCsAJH3/zAACI3z9ygELLYPN0+VTbKcqR5La3+s+WZyjr8+mstHv8vcfP42DlcCkRU/4AAAAUUlEQVQoz2NwUsIAKgxDRdBQEAMIwwVFT60JRBeU33dr7euPaILRiYGiYkdRBcUSESRcMLwQRIqXIgtKzIBo7GxEEhSdChGMDER1Eoo7hzIAAApBMYrXtxjsAAAAAElFTkSuQmCC")}
.flag-ic[data-c="es"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAApVBMVEX6vQCtFRnBPxP3tgCkSRTxsQC9miCtkjL3ugDcdwrVkwndpwauUEi3k3ecLQyvGx01YomtXy3Zhha+gw+4LiCzn4jKeBKyYgjmoAOkXUK/RhC1kJmmKh+0oKCbYwN5OAWWHxSVi0HypQNcdGsDAgC9g1j6vgSWhnLfsSXCn169cE24eBuaNwzQaiOYagW8bxWIOhqoKhPLdq4yUHR+UgVZLWaBHkAs3esWAAAAk0lEQVQ4y+WTVxLDIAxESQwBAwb33tKc3sv9j5YbWJp8JvurNzsrzYpMkCI/BU6RIt9phqIcJSOpEGBu7c2WA+iXOWmbtTmTACh42PdelSgwp+d2nXdvTjuAc3X5vL6qJo4XQEZ9qd8PXaR7yDE5GFOf6XbNRrmB8cgcKaUraJm5z4NiE4RLH3FyIUaG6Pb85XN9AIg9CvrV7UGSAAAAAElFTkSuQmCC")}
.flag-ic[data-c="pt"]{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAbCAMAAAA5zj1cAAAA3lBMVEX/AAAAZgDjeAn6AAAEYwDcogDtUwqbtwDmXhr5QT76fHz+/v62xOLf5PJ6pgC/zgCpvAD1LwCYswCjuADuYyutwwD6MC/1ZwDXxADjjADuSgDsAADllgDkqgDo3wDkswDvIwDZ1wDSqQBclgDopwDpxADoaxJ+rADcjwreTADrNwCKqwA1fgBRhgDM0gAZbQDq6gDrOgD8EhLvRAr22M3qk1L6OTbsfip4lMmZrNg7hADjFADRggDyBADkmDXcvzH0dFOTrhryRjl9jiS2ozbcXEvrMwAAWgDz9fry9PltbfP7AAAA0ElEQVQ4y+XTxxKCQBAEUNgl56CIAZUgihkQzDn//w95t8rBs/b5naZ7CPItxKf8MKRGEf4CDstl0+s47SLYNaj7KKqvexUYDjTuhuMY9zkvhOBkOg0ZIcsEJtzYGICKMbZ4UZJE3toiBoAGq3ElUZbFEkdXEQDH7ATNF8vlYo7ajg1AljXz/CnLD4unG1UA+gp11WeSNNMPnaAGQMo1zygVhBTtm806dEdFHVxOScLvWi5d0Iw2JI+9fq1RKep6paoaHbT0b9bjM/j/fuYzfAEwIRPN3DfXmAAAAABJRU5ErkJggg==")}