/* ===================================================
   VEYRON IA - Segumar | Light Theme (Red & White)
   Consistente con el sitio principal segumar.com.ar
   =================================================== */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

:root {
    /* Brand */
    --red-primary:   #d32f2f;
    --red-dark:      #b71c1c;
    --red-light:     #ff6659;
    --red-glow:      rgba(211, 47, 47, 0.28);
    --red-subtle:    rgba(211, 47, 47, 0.07);

    /* Surfaces — light theme */
    --bg-primary:    #ffffff;
    --bg-secondary:  #f5f5f5;
    --bg-tertiary:   #eeeeee;
    --bg-card:       #ffffff;
    --bg-card-hover: #fafafa;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.14);

    /* Text */
    --text-primary:   #1a1a1a;
    --text-secondary: #555555;
    --text-muted:     #888888;

    /* Dark strip (hero, footer, CTA) */
    --dark-bg:       #111111;
    --dark-bg2:      #0a0a0a;
    --dark-border:   rgba(255,255,255,0.08);

    /* Spacing */
    --section-padding: 100px;
    --container-max: 1200px;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;

    /* Motion */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.text-accent { color: var(--red-primary); }

/* ---------- SECTION TAG ---------- */
.section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--red-primary);
    margin-bottom: 16px; padding: 6px 16px;
    background: var(--red-subtle);
    border: 1px solid rgba(211, 47, 47, 0.15);
    border-radius: 100px;
}
.section-tag--light {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800; line-height: 1.15;
    letter-spacing: -0.02em; margin-bottom: 20px;
    color: var(--text-primary);
}
.section-desc {
    font-size: 1.0625rem; color: var(--text-secondary);
    line-height: 1.7; max-width: 600px;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeLeft { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeRight{ from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse    { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.8);opacity:0} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes scrollDown { 0%{transform:translateY(0);opacity:1} 50%{transform:translateY(8px);opacity:.5} 100%{transform:translateY(0);opacity:1} }
@keyframes glow {
    0%,100%{ box-shadow:0 0 20px var(--red-glow),0 0 60px rgba(211,47,47,.1); }
    50%    { box-shadow:0 0 30px var(--red-glow),0 0 80px rgba(211,47,47,.2); }
}
@keyframes particleFloat {
    0%  { opacity:0; transform:translateY(100%) scale(0); }
    10% { opacity:.6; }
    90% { opacity:.2; }
    100%{ opacity:0; transform:translateY(-100vh) scale(1); }
}

[data-animate] { opacity:0; transform:translateY(30px); }
[data-animate].is-visible { animation-fill-mode:forwards; }
[data-animate="fade-up"].is-visible    { animation:fadeUp    0.8s var(--ease-out) forwards; }
[data-animate="fade-left"].is-visible  { animation:fadeLeft  0.8s var(--ease-out) forwards; }
[data-animate="fade-right"].is-visible { animation:fadeRight 0.8s var(--ease-out) forwards; }


/* ══════════════════════════════════════════
   NAVBAR — blanca, igual al sitio principal
   ══════════════════════════════════════════ */
.navbar {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    padding: 0; height: 76px;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.4s var(--ease-smooth);
}
.navbar--scrolled {
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    height: 66px;
}
.navbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
}

/* Logo */
.navbar__logo { display: flex; align-items: center; }
.navbar__logo-img {
    height: 42px; width: auto; object-fit: contain;
    /* PNG tiene el logo en rojo/negro — se ve bien sobre blanco */
    filter: none;
    transition: opacity 0.3s var(--ease-smooth);
}
.navbar__logo:hover .navbar__logo-img { opacity: 0.85; }

/* Nav links */
.navbar__menu {
    display: flex; align-items: center; gap: 4px;
}
.navbar__link {
    font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-primary); padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: all 0.25s var(--ease-smooth);
    position: relative;
}
.navbar__link::after {
    content: ''; position: absolute; bottom: 2px; left: 14px;
    width: 0; height: 2px; background: var(--red-primary);
    transition: width 0.25s var(--ease-smooth);
}
.navbar__link:hover { color: var(--red-primary); background: var(--red-subtle); }
.navbar__link:hover::after { width: calc(100% - 28px); }

.navbar__link--cta {
    background: var(--red-primary); color: white;
    border-radius: var(--radius-sm); padding: 8px 18px;
}
.navbar__link--cta::after { display: none; }
.navbar__link--cta:hover {
    background: var(--red-dark); color: white;
    transform: translateY(-1px); box-shadow: 0 4px 16px var(--red-glow);
}

/* Mobile toggle */
.navbar__toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 4px; z-index:1001;
}
.navbar__toggle span {
    display: block; width: 24px; height: 2.5px;
    background: var(--text-primary); border-radius: 2px;
    transition: all 0.3s var(--ease-smooth);
}
.navbar__toggle.is-active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.navbar__toggle.is-active span:nth-child(2) { opacity:0; }
.navbar__toggle.is-active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }


/* ══════════════════════════════════════════
   HERO — fondo oscuro (igual hero del index)
   ══════════════════════════════════════════ */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    padding: 120px 0 80px; overflow: hidden;
    background-color: var(--dark-bg);
    border-bottom: 4px solid var(--red-primary);
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg-img {
    width:100%; height:100%; object-fit:cover;
    opacity:0.20; filter:brightness(0.5) contrast(1.05);
}
.hero__overlay {
    position:absolute; inset:0;
    background:
        linear-gradient(135deg,rgba(10,10,12,0.93) 0%,rgba(10,10,12,0.65) 55%,rgba(211,47,47,0.10) 100%);
}
.hero__content {
    position:relative; z-index:1;
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center; gap:60px;
}
.hero__badge {
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.8125rem; font-weight:600; letter-spacing:0.06em;
    color:var(--red-light); padding:8px 18px;
    background:rgba(211,47,47,0.12);
    border:1px solid rgba(211,47,47,0.18); border-radius:100px;
    margin-bottom:24px;
}
.hero__badge-dot {
    width:8px; height:8px; background:var(--red-primary);
    border-radius:50%; animation:pulse 2s ease-in-out infinite;
}
.hero__title {
    font-family:var(--font-display);
    font-size:clamp(2.5rem,5vw,4rem); font-weight:900;
    line-height:1.08; letter-spacing:-0.03em; margin-bottom:24px;
    color:#ffffff;
}
.hero__title-line         { display:block; color:#ffffff; }
.hero__title-line--accent { color:var(--red-primary); }
.hero__desc {
    font-size:1.1rem; color:rgba(255,255,255,0.6);
    line-height:1.7; margin-bottom:36px; max-width:520px;
}
.hero__actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero__visual  { display:flex; justify-content:center; align-items:center; }
.hero__totem-wrapper {
    position:relative; max-width:360px;
    animation:float 6s ease-in-out infinite;
}
.hero__totem-glow {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:300px; height:300px;
    background:radial-gradient(circle,var(--red-glow) 0%,transparent 70%);
    border-radius:50%; filter:blur(60px); z-index:-1;
}
.hero__totem-img {
    position:relative; z-index:1;
    filter:drop-shadow(0 20px 60px rgba(0,0,0,0.55));
    max-height:580px; object-fit:contain;
}
.hero__scroll {
    position:absolute; bottom:30px; left:50%;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,0.35); font-size:0.72rem;
    letter-spacing:0.1em; text-transform:uppercase;
}
.hero__scroll-line {
    width:1px; height:30px;
    background:linear-gradient(to bottom,rgba(255,255,255,0.35),transparent);
    animation:scrollDown 2s ease-in-out infinite;
}


/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-primary); font-size:0.9375rem; font-weight:700;
    padding:14px 28px; border-radius:var(--radius-md); border:none;
    cursor:pointer; transition:all 0.3s var(--ease-smooth);
    text-decoration:none; white-space:nowrap; text-transform:uppercase;
    letter-spacing:0.5px;
}
.btn__icon { width:18px; height:18px; flex-shrink:0; }
.btn__icon--right { margin-left:2px; }

.btn--primary {
    background:var(--red-primary); color:white;
    box-shadow:0 4px 20px var(--red-glow);
}
.btn--primary:hover {
    background:var(--red-dark); transform:translateY(-2px);
    box-shadow:0 8px 30px var(--red-glow);
}
/* Outline en hero (fondo oscuro) */
.btn--outline {
    background:transparent; color:#ffffff;
    border:1.5px solid rgba(255,255,255,0.25);
}
.btn--outline:hover {
    border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05);
    transform:translateY(-2px);
}
/* Outline en secciones claras */
.btn--outline-dark {
    background:transparent; color:var(--text-primary);
    border:1.5px solid var(--border-medium);
}
.btn--outline-dark:hover {
    border-color:var(--red-primary); color:var(--red-primary);
    background:var(--red-subtle); transform:translateY(-2px);
}
.btn--outline-light {
    background:transparent; color:white;
    border:1.5px solid rgba(255,255,255,0.25);
}
.btn--outline-light:hover {
    border-color:white; background:rgba(255,255,255,0.06); transform:translateY(-2px);
}
.btn--lg { padding:16px 32px; font-size:1rem; }
.btn--glow { animation:glow 3s ease-in-out infinite; }


/* ══════════════════════════════════════════
   STATS — barra roja debajo del hero
   ══════════════════════════════════════════ */
.stats {
    background:var(--red-primary);
    border-top:none; border-bottom:none;
    padding:32px 0;
}
.stats__inner {
    display:flex; align-items:center; justify-content:center;
    gap:40px; flex-wrap:wrap;
}
.stats__item { text-align:center; min-width:140px; }
.stats__prefix, .stats__number, .stats__suffix {
    font-family:var(--font-display);
    font-size:2.4rem; font-weight:900; color:#ffffff; line-height:1;
}
.stats__label {
    display:block; margin-top:6px; font-size:0.78rem;
    color:rgba(255,255,255,0.75); font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em;
}
.stats__divider {
    width:1px; height:44px;
    background:rgba(255,255,255,0.25);
}


/* ══════════════════════════════════════════
   ABOUT — sección blanca
   ══════════════════════════════════════════ */
.about {
    padding:var(--section-padding) 0;
    background:var(--bg-primary);
    position:relative; overflow:hidden;
}
.about::before {
    content:''; position:absolute; top:-200px; left:-200px;
    width:500px; height:500px;
    background:radial-gradient(circle,rgba(211,47,47,0.03) 0%,transparent 70%);
    border-radius:50%;
}
.about__inner {
    display:grid; grid-template-columns:1fr 1fr;
    gap:80px; align-items:center;
}
.about__image-wrapper {
    position:relative; border-radius:var(--radius-xl); overflow:hidden;
    background:var(--bg-secondary);
    border:1.5px solid var(--border-subtle);
    box-shadow:0 12px 40px rgba(0,0,0,0.10);
}
.about__image {
    width:100%; aspect-ratio:4/5; object-fit:cover;
    transition:transform 0.6s var(--ease-out);
}
.about__image-wrapper:hover .about__image { transform:scale(1.03); }
.about__image-badge {
    position:absolute; bottom:20px; left:20px;
    display:flex; align-items:center; gap:8px; padding:10px 18px;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
    border-radius:var(--radius-md); border:1px solid var(--border-subtle);
    font-size:0.875rem; font-weight:700; color:var(--red-primary);
    box-shadow:0 4px 16px rgba(0,0,0,0.10);
}
.about__image-badge-icon { font-size:1.2rem; }
.about__text {
    font-size:1.0625rem; color:var(--text-secondary);
    line-height:1.75; margin-bottom:16px;
}
.about__pillars {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:14px; margin-top:32px;
}
.about__pillar {
    text-align:center; padding:18px 10px;
    border-radius:var(--radius-md); background:var(--bg-secondary);
    border:1.5px solid var(--border-subtle);
    transition:all 0.3s var(--ease-smooth);
}
.about__pillar:hover {
    border-color:var(--red-primary);
    background:var(--red-subtle);
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(211,47,47,0.10);
}
.about__pillar-icon { width:34px; height:34px; margin:0 auto 10px; color:var(--red-primary); }
.about__pillar-icon svg { width:100%; height:100%; fill:currentColor; }
.about__pillar span {
    font-size:0.78rem; font-weight:700; color:var(--text-primary);
    text-transform:uppercase; letter-spacing:0.06em;
}


/* ══════════════════════════════════════════
   FEATURES — sección gris claro
   ══════════════════════════════════════════ */
.features {
    padding:var(--section-padding) 0;
    background:var(--bg-secondary); position:relative;
}
.features__header { text-align:center; margin-bottom:56px; }
.features__header .section-desc { margin:0 auto; }
.features__grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}

.feature-card {
    position:relative; padding:32px;
    border-radius:var(--radius-lg); background:var(--bg-card);
    border:1.5px solid var(--border-subtle);
    transition:all 0.4s var(--ease-smooth); overflow:hidden;
}
.feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--red-primary),transparent);
    opacity:0; transition:opacity 0.4s var(--ease-smooth);
}
.feature-card:hover {
    border-color:var(--red-primary);
    transform:translateY(-5px);
    box-shadow:0 16px 48px rgba(0,0,0,0.10);
}
.feature-card:hover::before { opacity:1; }

.feature-card--large {
    grid-row:span 2; display:flex; flex-direction:column;
}
.feature-card--large .feature-card__image {
    flex:1; margin-top:20px;
    border-radius:var(--radius-md); overflow:hidden;
}
.feature-card--large .feature-card__image img {
    width:100%; height:100%; object-fit:cover; border-radius:var(--radius-md);
}

.feature-card__icon-wrap {
    width:52px; height:52px; margin-bottom:20px; padding:12px;
    border-radius:var(--radius-sm); background:var(--red-subtle);
    border:1px solid rgba(211,47,47,0.12);
}
.feature-card__icon-wrap svg { width:100%; height:100%; }

.feature-card__title {
    font-family:var(--font-display); font-size:1.2rem;
    font-weight:700; margin-bottom:10px; color:var(--text-primary);
}
.feature-card__desc { font-size:0.9375rem; color:var(--text-secondary); line-height:1.65; }

.feature-card--cta {
    background:linear-gradient(145deg,rgba(211,47,47,0.07),rgba(211,47,47,0.02));
    border-color:rgba(211,47,47,0.18);
    display:flex; align-items:center; justify-content:center; text-align:center;
}
.feature-card--cta .feature-card__title { font-size:1.3rem; margin-bottom:12px; }
.feature-card--cta .feature-card__desc  { margin-bottom:20px; }


/* ══════════════════════════════════════════
   APP SECTION — blanca
   ══════════════════════════════════════════ */
.app-section {
    padding:var(--section-padding) 0;
    background:var(--bg-primary); overflow:hidden; position:relative;
}
.app-section__inner {
    display:grid; grid-template-columns:1fr 1fr;
    gap:80px; align-items:center;
}
.app-section__features {
    margin-top:32px; display:flex; flex-direction:column; gap:14px;
}
.app-section__features li {
    display:flex; align-items:center; gap:14px; font-size:1rem;
    color:var(--text-secondary); padding:12px 16px;
    border-radius:var(--radius-sm); background:var(--bg-secondary);
    border:1.5px solid var(--border-subtle);
    transition:all 0.3s var(--ease-smooth);
}
.app-section__features li:hover {
    background:var(--red-subtle); border-color:var(--red-primary);
    transform:translateX(6px); color:var(--text-primary);
}
.app-section__features li svg { width:20px; height:20px; flex-shrink:0; }
.app-section__visual { display:flex; justify-content:center; }
.app-section__phone {
    max-width:400px; position:relative;
    animation:float 6s ease-in-out infinite; animation-delay:-3s;
}
.app-section__phone img {
    border-radius:var(--radius-xl);
    box-shadow:0 24px 60px rgba(0,0,0,0.18);
    border:1.5px solid var(--border-subtle);
}


/* ══════════════════════════════════════════
   BENEFITS — gris
   ══════════════════════════════════════════ */
.benefits {
    padding:var(--section-padding) 0;
    background:var(--bg-secondary);
}
.benefits__header { text-align:center; margin-bottom:48px; }
.benefits__tabs {
    display:flex; justify-content:center; gap:8px; margin-bottom:48px;
}
.benefits__tab {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-primary); font-size:0.9375rem; font-weight:700;
    padding:12px 28px; border-radius:var(--radius-md);
    background:var(--bg-card); border:1.5px solid var(--border-subtle);
    color:var(--text-secondary); cursor:pointer;
    transition:all 0.3s var(--ease-smooth);
    text-transform:uppercase; letter-spacing:0.4px;
}
.benefits__tab svg { width:20px; height:20px; }
.benefits__tab:hover { border-color:var(--red-primary); color:var(--red-primary); background:var(--red-subtle); }
.benefits__tab--active { background:var(--red-primary); border-color:var(--red-primary); color:white; }
.benefits__tab--active:hover { background:var(--red-dark); border-color:var(--red-dark); color:white; }

.benefits__panel { display:none; }
.benefits__panel--active { display:block; animation:fadeUp 0.5s var(--ease-out); }

.benefits__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.benefit-card {
    padding:28px; border-radius:var(--radius-lg);
    background:var(--bg-card); border:1.5px solid var(--border-subtle);
    transition:all 0.4s var(--ease-smooth);
}
.benefit-card:hover {
    border-color:var(--red-primary); transform:translateY(-5px);
    box-shadow:0 16px 40px rgba(0,0,0,0.09);
}
.benefit-card__icon {
    width:44px; height:44px; padding:10px;
    border-radius:var(--radius-sm); background:var(--red-subtle);
    color:var(--red-primary); margin-bottom:16px;
}
.benefit-card__icon svg { width:100%; height:100%; }
.benefit-card__title {
    font-family:var(--font-display); font-size:1.1rem;
    font-weight:700; margin-bottom:8px; color:var(--text-primary);
}
.benefit-card__desc { font-size:0.9rem; color:var(--text-secondary); line-height:1.6; }


/* ══════════════════════════════════════════
   HOW IT WORKS — blanca
   ══════════════════════════════════════════ */
.how-it-works {
    padding:var(--section-padding) 0;
    background:var(--bg-primary); position:relative;
}
.how-it-works__header { text-align:center; margin-bottom:64px; }
.how-it-works__timeline {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:24px; position:relative;
}
.how-it-works__timeline::before {
    content:''; position:absolute;
    top:36px; left:calc(12.5% + 12px); right:calc(12.5% + 12px);
    height:2px;
    background:linear-gradient(90deg,var(--red-primary),var(--red-dark),var(--red-primary));
    opacity:0.25;
}
.how-it-works__step { text-align:center; position:relative; }
.how-it-works__step-number {
    display:inline-flex; align-items:center; justify-content:center;
    width:72px; height:72px; border-radius:50%;
    background:var(--bg-secondary); border:2px solid var(--red-primary);
    font-family:var(--font-display); font-size:1.5rem; font-weight:800;
    color:var(--red-primary); margin-bottom:24px;
    position:relative; z-index:1;
    transition:all 0.3s var(--ease-smooth);
}
.how-it-works__step:hover .how-it-works__step-number {
    background:var(--red-primary); color:white;
    box-shadow:0 0 28px var(--red-glow); transform:scale(1.1);
}
.how-it-works__step-content h3 {
    font-family:var(--font-display); font-size:1.2rem;
    font-weight:700; margin-bottom:10px; color:var(--text-primary);
}
.how-it-works__step-content p {
    font-size:0.9rem; color:var(--text-secondary); line-height:1.65;
}


/* ══════════════════════════════════════════
   CTA SECTION — oscura (igual que brand-bar)
   ══════════════════════════════════════════ */
.cta-section {
    position:relative; padding:var(--section-padding) 0;
    background:var(--dark-bg); overflow:hidden;
    border-top:4px solid var(--red-primary);
}
.cta-section__bg    { position:absolute; inset:0; }
.cta-section__particles { position:absolute; inset:0; }
.cta-section__inner { position:relative; z-index:1; text-align:center; }
.cta-section__content { max-width:700px; margin:0 auto; }
.cta-section__title {
    font-family:var(--font-display);
    font-size:clamp(2rem,4vw,3rem); font-weight:800;
    line-height:1.2; margin-bottom:20px; color:#ffffff;
}
.cta-section__desc {
    font-size:1.0625rem; color:rgba(255,255,255,0.6);
    line-height:1.7; margin-bottom:36px;
}
.cta-section__actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }


/* ══════════════════════════════════════════
   FOOTER — oscuro
   ══════════════════════════════════════════ */
.footer {
    background:#111111; border-top:1px solid rgba(255,255,255,0.06);
    padding:60px 0 0;
}
.footer__top {
    display:flex; justify-content:space-between; gap:60px;
    padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.footer__brand { max-width:350px; }

/* Logo en footer — invertir a blanco */
.footer .navbar__logo-img {
    filter:brightness(0) invert(1);
    height:38px;
}

.footer__tagline {
    margin-top:16px; font-size:0.9rem;
    color:rgba(255,255,255,0.4); line-height:1.65;
}
.footer__links { display:flex; gap:60px; }
.footer__col h4 {
    font-family:var(--font-display); font-size:0.85rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em;
    color:rgba(255,255,255,0.85); margin-bottom:16px;
    padding-bottom:8px; border-bottom:2px solid var(--red-primary);
    display:inline-block;
}
.footer__col ul { display:flex; flex-direction:column; gap:10px; }
.footer__col a { font-size:0.9rem; color:rgba(255,255,255,0.4); transition:color 0.25s; }
.footer__col a:hover { color:var(--red-primary); }
.footer__bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 0; font-size:0.8rem; color:rgba(255,255,255,0.25);
}
.footer__powered { font-weight:600; }


/* ══════════════════════════════════════════
   FLOATING WHATSAPP
   ══════════════════════════════════════════ */
.whatsapp-float {
    position:fixed; bottom:28px; right:28px; z-index:999;
    width:60px; height:60px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px rgba(37,211,102,0.38);
    transition:all 0.3s var(--ease-smooth);
    opacity:0; transform:scale(0) translateY(20px);
}
.whatsapp-float.is-visible { opacity:1; transform:scale(1) translateY(0); }
.whatsapp-float:hover {
    transform:scale(1.1) translateY(-2px);
    box-shadow:0 8px 30px rgba(37,211,102,0.5);
}
.whatsapp-float__pulse {
    position:absolute; inset:-4px; border-radius:50%;
    border:2px solid #25D366; animation:pulse 2.5s ease-in-out infinite;
}
.whatsapp-float__icon { width:28px; height:28px; color:white; }
.whatsapp-float__tooltip {
    position:absolute; right:calc(100% + 12px); top:50%;
    transform:translateY(-50%) scale(0.9);
    white-space:nowrap; background:#1a1a1a; color:white;
    font-size:0.8rem; font-weight:500; padding:8px 16px;
    border-radius:var(--radius-sm);
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    opacity:0; pointer-events:none; transition:all 0.3s var(--ease-smooth);
}
.whatsapp-float__tooltip::after {
    content:''; position:absolute; right:-6px; top:50%;
    transform:translateY(-50%); border:6px solid transparent;
    border-left-color:#1a1a1a; border-right:none;
}
.whatsapp-float:hover .whatsapp-float__tooltip { opacity:1; transform:translateY(-50%) scale(1); }


/* ══════════════════════════════════════════
   PARTICLES
   ══════════════════════════════════════════ */
.cta-particle {
    position:absolute; width:4px; height:4px;
    background:var(--red-primary); border-radius:50%;
    opacity:0; animation:particleFloat 8s linear infinite;
}


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width:1024px) {
    :root { --section-padding:80px; }
    .hero__content { grid-template-columns:1fr; text-align:center; gap:40px; }
    .hero__desc     { margin:0 auto 36px; }
    .hero__actions  { justify-content:center; }
    .hero__visual   { order:-1; }
    .hero__totem-wrapper { max-width:280px; }
    .hero__totem-img    { max-height:380px; }
    .about__inner   { grid-template-columns:1fr; gap:48px; }
    .about__visual  { max-width:500px; margin:0 auto; }
    .app-section__inner { grid-template-columns:1fr; gap:48px; }
    .app-section__visual{ order:-1; }
    .app-section__phone { max-width:300px; }
    .features__grid { grid-template-columns:repeat(2,1fr); }
    .feature-card--large{ grid-row:span 1; }
    .benefits__grid { grid-template-columns:repeat(2,1fr); }
    .how-it-works__timeline { grid-template-columns:repeat(2,1fr); gap:40px; }
    .how-it-works__timeline::before { display:none; }
}

@media (max-width:768px) {
    :root { --section-padding:60px; }

    /* Mobile nav — panel lateral blanco */
    .navbar__menu {
        position:fixed; top:0; right:-100%; width:100%; max-width:300px;
        height:100vh; height:100dvh;
        background:#ffffff; flex-direction:column; align-items:stretch;
        padding:90px 24px 32px; gap:0;
        transition:right 0.4s var(--ease-out);
        border-left:4px solid var(--red-primary);
        overflow-y:auto; box-shadow:-5px 0 30px rgba(0,0,0,0.12);
    }
    .navbar__menu.is-open { right:0; }
    .navbar__menu li { border-bottom:1px solid var(--border-subtle); }
    .navbar__menu li:last-child { border-bottom:none; margin-top:16px; }
    .navbar__link {
        display:block; width:100%; padding:16px 4px;
        font-size:1rem; color:var(--text-secondary);
        text-align:left; border-radius:0;
    }
    .navbar__link::after { display:none; }
    .navbar__link:hover { color:var(--red-primary); background:none; }
    .navbar__link--cta {
        display:block; width:100%;
        padding:14px 20px; text-align:center;
        border-radius:var(--radius-md); font-size:1rem;
    }
    .navbar__toggle { display:flex; }

    .hero { min-height:auto; padding:110px 0 60px; }
    .hero__title { font-size:clamp(2rem,7vw,3rem); }
    .hero__scroll { display:none; }
    .stats__inner { gap:20px; }
    .stats__divider { display:none; }
    .stats__prefix,.stats__number,.stats__suffix { font-size:2rem; }
    .about__pillars { grid-template-columns:repeat(2,1fr); }
    .features__grid { grid-template-columns:1fr; }
    .benefits__grid { grid-template-columns:1fr; }
    .benefits__tabs { flex-direction:column; align-items:stretch; }
    .benefits__tab  { justify-content:center; }
    .how-it-works__timeline { grid-template-columns:1fr; gap:32px; }
    .footer__top    { flex-direction:column; gap:40px; }
    .footer__links  { gap:40px; }
    .footer__bottom { flex-direction:column; gap:8px; text-align:center; }
    .cta-section__actions { flex-direction:column; align-items:center; }
    .whatsapp-float { bottom:20px; right:20px; width:52px; height:52px; }
    .whatsapp-float__tooltip { display:none; }
}

@media (max-width:480px) {
    .container { padding:0 16px; }
    .hero__actions { flex-direction:column; width:100%; }
    .hero__actions .btn { width:100%; }
    .hero__totem-wrapper { max-width:220px; }
    .hero__totem-img { max-height:300px; }
    .about__pillars { grid-template-columns:repeat(2,1fr); gap:10px; }
    .about__pillar  { padding:14px 8px; }
    .feature-card   { padding:24px; }
    .stats__inner {
        display:grid; grid-template-columns:1fr 1fr; gap:16px;
    }
}