/* ============================================================
   SCANVIVE — style.css
   Versión: 2.0 — Optimizado para todos los dispositivos
   Breakpoints: 320 · 480 · 600 · 768 · 900 · 1200px
   Paleta: Rojo #D72638 · Negro #0D0D0D · Cian #00D4FF
   Fuentes: Rajdhani · Exo 2 · Share Tech Mono
   ============================================================ */

/* ── VARIABLES ── */
:root {
    --red:        #D72638;
    --red-dk:     #a81e2c;
    --red-lt:     #fdf1f2;
    --cyan:       #00D4FF;
    --cyan-dk:    #0099bb;
    --black:      #0D0D0D;
    --dark:       #111111;
    --dark2:      #181818;
    --gray:       #1E1E1E;
    --gray2:      #2A2A2A;
    --gray3:      #3A3A3A;
    --white:      #FFFFFF;
    --text-d:     #E8E8E8;
    --muted-d:    #666666;
    --green:      #00C853;
    --purple:     #9C6FDE;
    --border-d:   #242424;

    --font-display: 'Rajdhani', 'Arial Black', sans-serif;
    --font-body:    'Exo 2', sans-serif;
    --font-mono:    'Share Tech Mono', 'Courier New', monospace;

    --radius:     10px;
    --radius-lg:  16px;
    --shadow:     0 4px 24px rgba(0,0,0,0.4);
    --shadow-red: 0 4px 24px rgba(215,38,56,0.25);
    --transition: all 0.25s ease;
    --nav-h:      64px;

    /* Espaciado de secciones — se reduce en mobile */
    --section-py: 96px;
}

/* ── RESET COMPLETO ── */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* evita flash azul en mobile */
}
html {
    scroll-behavior: smooth;
    /* Evita zoom automático en inputs en iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-family: var(--font-body);
    background: var(--black);
    color: var(--text-d);
    overflow-x: hidden;
    line-height: 1.6;
    /* Mejora renderizado de fuentes en pantallas de alta densidad */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, video {
    display: block;
    max-width: 100%;
    height: auto; /* mantiene proporción siempre */
}
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* Accesibilidad: outline visible al navegar con teclado */
:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── CONTENEDOR ── */
.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px); /* padding fluido */
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--gray2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }


/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes pulseDot {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.5; transform:scale(0.85); }
}
@keyframes pulseRing {
    0%   { transform:scale(0.8); opacity:0.8; }
    100% { transform:scale(1.8); opacity:0; }
}
@keyframes floatY {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-10px); }
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Clases AOS controladas por IntersectionObserver en script.js */
[data-aos] {
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
    /* Desactiva transformaciones costosas en dispositivos lentos */
    will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translateY(24px); }
[data-aos="fade-right"] { transform: translateX(-24px); }
[data-aos="fade-left"]  { transform: translateX(24px); }
[data-aos].aos-animate  { opacity: 1; transform: none; }

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    [data-aos] { transition: opacity 0.3s ease; transform: none !important; }
    .ficha-phone, .hero-sticker-float { animation: none !important; }
}


/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(13px, 2vw, 15px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: clamp(11px, 2vw, 13px) clamp(20px, 3vw, 28px);
    border-radius: var(--radius);
    transition: var(--transition);
    box-shadow: var(--shadow-red);
    white-space: nowrap;
    border: none;
    cursor: pointer;
    /* Área mínima de toque para mobile (WCAG 2.5.5) */
    min-height: 44px;
}
.btn-primary:hover {
    background: var(--red-dk);
    box-shadow: 0 6px 28px rgba(215,38,56,0.4);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--text-d);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(13px, 2vw, 15px);
    letter-spacing: 1px;
    padding: clamp(10px, 2vw, 12px) clamp(16px, 3vw, 24px);
    border-radius: var(--radius);
    border: 1.5px solid var(--gray2);
    transition: var(--transition);
    white-space: nowrap;
    min-height: 44px;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }


/* ============================================================
   ENCABEZADOS DE SECCIÓN (reutilizables)
   ============================================================ */
.section-header { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.section-tag {
    font-family: var(--font-mono);
    font-size: clamp(10px, 1.5vw, 11px);
    letter-spacing: 3px;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 4vw, 42px); /* fluido entre 24 y 42px */
    letter-spacing: 1px;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 14px;
}
.section-desc {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--muted-d);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}


/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(13,13,13,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-d);
    height: var(--nav-h);
    transition: box-shadow 0.3s, border-color 0.3s;
}
#navbar.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.7);
    border-bottom-color: rgba(215,38,56,0.2);
}
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 12px;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    z-index: 1001; /* encima del menú mobile */
}
.nav-cross { position:relative; width:17px; height:17px; flex-shrink:0; }
.nav-cross::before {
    content:''; position:absolute; top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:17px; height:6px; background:var(--red); border-radius:2px;
}
.nav-cross::after {
    content:''; position:absolute; top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:6px; height:17px; background:var(--red); border-radius:2px;
}
.nav-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(16px, 2.5vw, 20px);
    letter-spacing: 2px;
    color: var(--white);
    text-transform: uppercase;
}
.nav-brand em { font-style:normal; color:var(--red); }

/* Links desktop */
.nav-menu ul {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-d);
    padding: 8px 11px;
    border-radius: 6px;
    transition: var(--transition);
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.nav-link:hover, .nav-link.active { color:var(--white); background:rgba(255,255,255,0.05); }

/* Botón Login */
.nav-btn-login {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(11px, 1.5vw, 13px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white);
    padding: 8px 16px;
    border-radius: 7px;
    border: 1.5px solid var(--red);
    background: transparent;
    transition: var(--transition);
    margin-left: 4px;
    white-space: nowrap;
    min-height: 44px;
}
.nav-btn-login:hover { background:var(--red); box-shadow:var(--shadow-red); }

/* Hamburger input oculto */
.nav-toggle-input { display:none !important; }

/* Hamburger ícono */
.scanvive-menu-btn {
    display: none; /* solo visible en mobile — se muestra con display:flex en media query */
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.scanvive-menu-btn span {
    display: block;
    width: 26px; height: 2px;
    background: var(--text-d);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100svh; /* svh: respeta barra de dirección mobile */
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + clamp(32px, 6vw, 56px)) 0 clamp(56px, 8vw, 96px);
    overflow: hidden;
}

/* Fondo decorativo */
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}
.hero-glow {
    position:absolute; border-radius:50%; filter:blur(100px); opacity:0.12;
    /* No afecta interacción */
    pointer-events: none;
}
.hero-glow-red  { width:clamp(280px,50vw,500px); height:clamp(280px,50vw,500px); background:var(--red);  top:-80px; left:-80px; }
.hero-glow-cyan { width:clamp(220px,40vw,400px); height:clamp(220px,40vw,400px); background:var(--cyan); bottom:-40px; right:-40px; opacity:0.07; }

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Texto hero */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: clamp(9px, 1.5vw, 11px);
    letter-spacing: 2px;
    color: var(--cyan);
    text-transform: uppercase;
    background: rgba(0,212,255,0.06);
    border: 1px solid rgba(0,212,255,0.2);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
}
.badge-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--cyan); flex-shrink:0;
    animation: pulseDot 1.5s ease infinite;
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 5vw, 54px);
    line-height: 1.1;
    letter-spacing: 1px;
    color: var(--white);
    margin-bottom: 18px;
}
.hero-title-accent { color: var(--red); }

.hero-desc {
    font-size: clamp(14px, 2vw, 16px);
    color: var(--muted-d);
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 480px;
}
.hero-desc strong { color: var(--text-d); }

/* Stats */
.hero-stats {
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 20px);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.stat { text-align:center; }
.stat-num {
    font-family:var(--font-display); font-weight:700;
    font-size: clamp(18px, 3vw, 24px);
    color:var(--white); display:block; line-height:1;
}
.stat-label {
    font-family:var(--font-mono); font-size:clamp(8px,1.2vw,9px);
    letter-spacing:1.5px; color:var(--muted-d);
    text-transform:uppercase; margin-top:3px; display:block;
    white-space: nowrap;
}
.stat-divider { width:1px; height:32px; background:var(--border-d); flex-shrink:0; }

.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* Ficha preview (columna derecha) */
.hero-ficha {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ficha-phone {
    background: linear-gradient(160deg, #131620 0%, #0D0F14 100%);
    border: 1px solid #252A35;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    max-width: clamp(260px, 40vw, 340px);
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
    animation: floatY 4s ease-in-out infinite;
}
.ficha-bar {
    background: var(--red);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: clamp(8px, 1.5vw, 10px);
    letter-spacing: 2px;
    color: white;
    text-transform: uppercase;
}
.ficha-bar-dot {
    width:8px; height:8px; border-radius:50%;
    background:white; flex-shrink:0;
    animation: pulseDot 1.2s ease infinite;
    position: relative;
}
.ficha-bar-dot::after {
    content:''; position:absolute; inset:-3px; border-radius:50%;
    border:1.5px solid white; animation:pulseRing 1.4s ease infinite;
}
.ficha-bar-time { margin-left:auto; opacity:0.7; }

.ficha-hero-section {
    display:flex; align-items:center; gap:12px;
    padding: clamp(12px, 2vw, 18px) 14px clamp(10px, 1.5vw, 12px);
    border-bottom: 1px solid #252A35;
}
.ficha-avatar {
    width:clamp(42px,6vw,52px); height:clamp(42px,6vw,52px);
    border-radius:50%; background:var(--gray);
    border:2px solid var(--red);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(14px,2.5vw,18px); color:white;
    flex-shrink:0; position:relative;
    box-shadow:0 0 0 4px rgba(215,38,56,0.1);
}
.ficha-blood {
    position:absolute; bottom:-4px; right:-4px;
    background:var(--red); color:white;
    font-family:var(--font-display); font-weight:700; font-size:9px;
    padding:2px 5px; border-radius:6px; border:2px solid var(--dark);
    letter-spacing:1px;
}
.ficha-name {
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(14px,2.5vw,18px); color:#FFFFFF; letter-spacing:1px;
}
.ficha-meta {
    font-family:var(--font-mono); font-size:clamp(8px,1.2vw,9px);
    color:#8A95A8; letter-spacing:1.5px; margin-top:2px;
}
.ficha-tags {
    display:flex; flex-wrap:wrap; gap:4px;
    padding: 10px 14px; border-bottom:1px solid var(--border-d);
}
.ftag {
    font-family:var(--font-mono); font-size:clamp(8px,1.2vw,9px);
    letter-spacing:1px; padding:3px 8px; border-radius:14px;
    border:1px solid; text-transform:uppercase;
}
.ftag-red   { color:#FF4D5E;      border-color:rgba(215,38,56,0.55); background:rgba(215,38,56,0.14); }
.ftag-warn  { color:#FFD600;      border-color:rgba(255,214,0,0.50); background:rgba(255,214,0,0.12); }
.ftag-cyan  { color:#40DEFF;      border-color:rgba(0,212,255,0.50); background:rgba(0,212,255,0.12); }
.ftag-green { color:#00E864;      border-color:rgba(0,200,83,0.50);  background:rgba(0,200,83,0.12); }

.ficha-rows { padding:6px 14px 10px; }
.ficha-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.07);
    font-size:clamp(11px,1.8vw,12px);
}
.ficha-row:last-child { border-bottom:none; }
.fr-label {
    font-family:var(--font-mono); font-size:clamp(8.5px,1.3vw,10px);
    letter-spacing:1.2px; color:#A0AABB; text-transform:uppercase;
    flex-shrink:0; margin-right:8px;
}
.fr-value { font-weight:700; color:#F0F2F8; text-align:right; }
.fr-green { color:#00E864; font-weight:700; }

.ficha-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 14px; border-top:1px solid var(--border-d);
    font-family:var(--font-mono); font-size:9px; color:#6A7485; letter-spacing:1.5px;
}
.ficha-nfc { display:flex; align-items:center; gap:4px; font-size:9px; letter-spacing:1.5px; color:var(--cyan); }
.nfc-a { border-style:solid; border-color:transparent; border-radius:50%; }
.nfc-a1 { width:10px;height:10px; border-top:2px solid var(--cyan); border-right:2px solid var(--cyan); transform:rotate(45deg); }
.nfc-a2 { width:16px;height:16px; border-top:1.5px solid var(--cyan); border-right:1.5px solid var(--cyan); transform:rotate(45deg); opacity:.6; }
.nfc-a3 { width:22px;height:22px; border-top:1.5px solid var(--cyan); border-right:1.5px solid var(--cyan); transform:rotate(45deg); opacity:.3; }

/* ── Sticker flotante — diseño del sticker físico, adaptado al círculo ── */
.hero-sticker-float {
    position: absolute;
    bottom: -10px;
    right: -16px;
    /* Tamaño fluido: mínimo 90px, ideal 12vw, máximo 140px */
    width:  clamp(90px, 12vw, 140px);
    height: clamp(90px, 12vw, 140px);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #1a1a1a 0%, #0d0d0d 100%);
    border: 2px solid #2a2a2a;
    box-shadow: 0 0 32px rgba(215,38,56,0.2), 0 8px 28px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap fluido proporcional al tamaño */
    gap: clamp(3px, 0.5vw, 6px);
    padding: clamp(8px, 1.5vw, 14px);
    animation: floatY 5s ease-in-out infinite reverse;
    pointer-events: none;
    overflow: hidden; /* garantiza que nada desborde el círculo */
    /* Evita que el contenido se salga */
    box-sizing: border-box;
}
/* Anillos decorativos interiores */
.hero-sticker-float::before {
    content: '';
    position: absolute;
    /* 88% del tamaño del padre */
    width: 88%; height: 88%;
    border-radius: 50%;
    border: 1px solid rgba(0,212,255,0.07);
    pointer-events: none;
    flex-shrink: 0;
}
.hero-sticker-float::after {
    content: '';
    position: absolute;
    width: 70%; height: 70%;
    border-radius: 50%;
    border: 1px solid rgba(215,38,56,0.07);
    pointer-events: none;
}

/* Fila íconos: cruz + divisor + teléfono */
.hsf-icons-row {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.6vw, 8px);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* Cruz médica — tamaño fluido */
.hsf-cross {
    position: relative;
    /* escala con el contenedor */
    width:  clamp(14px, 2vw, 22px);
    height: clamp(14px, 2vw, 22px);
    flex-shrink: 0;
}
.hsf-h {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width: 100%; height: 36%;
    background: var(--red); border-radius: 2px;
}
.hsf-v {
    position: absolute; top:50%; left:50%;
    transform: translate(-50%,-50%);
    width: 36%; height: 100%;
    background: var(--red); border-radius: 2px;
}

/* Divisor */
.hsf-divider {
    width: 1px;
    height: clamp(14px, 2vw, 22px);
    background: rgba(0,212,255,0.2);
    flex-shrink: 0;
}

/* Teléfono */
.hsf-phone {
    width:  clamp(10px, 1.4vw, 16px);
    height: clamp(15px, 2vw, 24px);
    border: 1.5px solid var(--cyan);
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
}
.hsf-phone-screen {
    position: absolute;
    top:3px; left:2px; right:2px; bottom:4px;
    background: rgba(0,212,255,0.12);
    border-radius: 1px;
}
.hsf-phone-home {
    position: absolute;
    bottom:1px; left:50%; transform:translateX(-50%);
    width:4px; height:1.5px;
    background: var(--cyan); border-radius:1px;
}
.hsf-scan-line {
    position: absolute;
    left:-2px; right:-2px; height:1.5px;
    background: var(--cyan);
    box-shadow: 0 0 4px var(--cyan);
    top: 40%;
    animation: scanLine 2s ease-in-out infinite;
}

/* Arcos NFC */
.hsf-arcs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.hsf-arc {
    border-style: solid;
    border-color: transparent;
    border-top-color: var(--cyan);
    border-right-color: var(--cyan);
    border-radius: 0 50% 0 0;
}
.hsf-arc:nth-child(1) { width:clamp(5px,0.7vw,8px);  height:clamp(5px,0.7vw,8px);  border-width:1.5px; opacity:1.0; }
.hsf-arc:nth-child(2) { width:clamp(8px,1.1vw,13px); height:clamp(8px,1.1vw,13px); border-width:1.5px; opacity:0.6; }
.hsf-arc:nth-child(3) { width:clamp(11px,1.5vw,18px);height:clamp(11px,1.5vw,18px);border-width:1.5px; opacity:0.3; }

/* Nombre */
.hsf-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(8px, 1.1vw, 12px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    white-space: nowrap;
}
.hsf-brand-scan { color: var(--white); }
.hsf-brand-vive { color: var(--red); }

/* Sub texto */
.hsf-sub {
    font-family: var(--font-mono);
    font-size: clamp(5px, 0.7vw, 7px);
    letter-spacing: 1px;
    color: var(--cyan);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    text-align: center;
    line-height: 1.3;
    flex-shrink: 0;
}

/* Badge NFC */
.hsf-nfc-badge {
    font-family: var(--font-mono);
    font-size: clamp(5px, 0.7vw, 7px);
    letter-spacing: 1px;
    padding: 1.5px 5px;
    border-radius: 2px;
    background: rgba(0,212,255,0.1);
    color: var(--cyan);
    border: 1px solid rgba(0,212,255,0.25);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    white-space: nowrap;
}

/* En tablet/mobile el sticker se oculta para no ocupar espacio */
@media (max-width: 900px) {
    .hero-sticker-float { display: none; }
}


/* ============================================================
   PRODUCTOS
   ============================================================ */
.section-products {
    padding: var(--section-py) 0;
    background: var(--dark);
    border-top: 1px solid var(--border-d);
    border-bottom: 1px solid var(--border-d);
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2.5vw, 24px);
    margin-bottom: 40px;
}
.product-card {
    background: var(--dark2);
    border: 1px solid var(--border-d);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    /* Evita que el hover cause layout shift */
    transform: translateZ(0);
}
.product-card:hover {
    border-color: rgba(215,38,56,0.35);
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.product-img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; }
.product-img-placeholder {
    width:100%; height:100%;
    background:linear-gradient(135deg, #1a1a1a 0%, #222 100%);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
}
.product-img-dark { background:linear-gradient(135deg, #0d0d0d 0%, #181818 100%); }
/* Imagen real cuando exista */
.product-img-placeholder img { width:100%; height:100%; object-fit:cover; }

.pip-icon { font-size:clamp(36px,6vw,52px); color:var(--gray3); opacity:0.6; }
.pip-sticker {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    background:var(--gray); border:1px solid var(--border-d);
    border-radius:50%; width:clamp(56px,8vw,72px); height:clamp(56px,8vw,72px);
    justify-content:center;
    font-family:var(--font-mono); font-size:7px; color:var(--cyan);
    letter-spacing:1px; text-transform:uppercase;
}
.pip-cross { position:relative; width:16px; height:16px; }
.pip-cross div:first-child { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:16px; height:6px; background:var(--red); border-radius:1px; }
.pip-cross div:last-child  { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:6px; height:16px; background:var(--red); border-radius:1px; }
.pip-tag-nfc {
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:16px; background:radial-gradient(circle at 40% 40%, #1a1a1a, #0d0d0d);
    border-radius:10px; border:1px solid var(--border-d);
}
.pip-cross-sm div:first-child { width:14px; height:5px; background:var(--red); }
.pip-cross-sm div:last-child  { width:5px; height:14px; background:var(--red); }
.pip-arcs { display:flex; align-items:flex-end; gap:3px; }
.pip-arc { border-style:solid; border-color:transparent; border-top-color:var(--cyan); border-right-color:var(--cyan); border-radius:0 50% 0 0; }
.pip-arc:nth-child(1) { width:10px;height:10px; border-width:2px; opacity:.9; }
.pip-arc:nth-child(2) { width:16px;height:16px; border-width:2px; opacity:.6; }
.pip-arc:nth-child(3) { width:22px;height:22px; border-width:2px; opacity:.3; }
.pip-tag-nfc > span { font-family:var(--font-mono); font-size:9px; color:var(--cyan); letter-spacing:2px; text-transform:uppercase; }

.product-badge {
    position:absolute; top:12px; left:12px;
    background:var(--red); color:white;
    font-family:var(--font-mono); font-size:9px; letter-spacing:2px;
    padding:4px 10px; border-radius:20px; text-transform:uppercase;
}
.product-info { padding: clamp(14px, 2.5vw, 20px); }
.product-num { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; color:var(--muted-d); margin-bottom:5px; }
.product-name { font-family:var(--font-display); font-weight:700; font-size:clamp(16px,2.5vw,19px); color:var(--white); letter-spacing:1px; margin-bottom:7px; }
.product-desc { font-size:clamp(12px,1.8vw,13px); color:var(--muted-d); line-height:1.6; margin-bottom:10px; }
.product-price { font-family:var(--font-display); font-size:14px; color:var(--muted-d); }
.product-price strong { color:var(--red); font-size:clamp(15px,2.5vw,18px); }
.products-cta { text-align:center; }


/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */
.section-how {
    padding: var(--section-py) 0;
    background: var(--black);
}
.how-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    justify-content: center;
    flex-wrap: nowrap; /* row en desktop */
}
.how-step {
    flex: 1;
    min-width: 0; /* evita overflow */
    text-align: center;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 24px);
    background: var(--dark2);
    border: 1px solid var(--border-d);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}
.how-step:hover { border-color:rgba(0,212,255,0.25); transform:translateY(-4px); }
.how-step-num { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; color:var(--muted-d); text-transform:uppercase; margin-bottom:14px; }
.how-step-icon {
    width:clamp(44px,6vw,56px); height:clamp(44px,6vw,56px);
    border-radius:12px;
    background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2);
    display:flex; align-items:center; justify-content:center;
    font-size:clamp(18px,3vw,22px); color:var(--cyan);
    margin:0 auto 14px;
}
.how-step-icon-red { background:rgba(215,38,56,0.1); border-color:rgba(215,38,56,0.25); color:var(--red); }
.how-step-title { font-family:var(--font-display); font-weight:700; font-size:clamp(15px,2.5vw,17px); color:var(--white); letter-spacing:1px; margin-bottom:9px; }
.how-step-desc { font-size:clamp(12px,1.8vw,13px); color:var(--muted-d); line-height:1.7; }

.how-connector {
    display:flex; align-items:center; justify-content:center;
    padding:0 clamp(4px,1vw,8px); color:var(--muted-d);
    font-size:14px; flex-shrink:0;
    align-self: center;
}
.how-connector-line { display:none; }


/* ============================================================
   BENEFICIOS
   ============================================================ */
.section-benefits {
    padding: var(--section-py) 0;
    background: var(--dark);
    border-top: 1px solid var(--border-d);
    border-bottom: 1px solid var(--border-d);
}
.benefits-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
}
.benefits-text .section-tag  { text-align:left; }
.benefits-text .section-title { text-align:left; font-size:clamp(22px,3.5vw,36px); }
.benefits-intro { font-size:clamp(13px,2vw,15px); color:var(--muted-d); line-height:1.8; margin-bottom:28px; margin-top:4px; }

.benefits-list { display:flex; flex-direction:column; gap:18px; }
.benefit-item { display:flex; align-items:flex-start; gap:13px; }
.benefit-icon {
    width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
}
.benefit-icon-red   { background:rgba(215,38,56,0.12); color:var(--red);   border:1px solid rgba(215,38,56,0.2); }
.benefit-icon-cyan  { background:rgba(0,212,255,0.08);  color:var(--cyan);  border:1px solid rgba(0,212,255,0.15); }
.benefit-icon-green { background:rgba(0,200,83,0.08);   color:var(--green); border:1px solid rgba(0,200,83,0.15); }
.benefit-item strong { display:block; color:var(--white); font-size:clamp(13px,2vw,14px); margin-bottom:2px; }
.benefit-item p { font-size:clamp(12px,1.8vw,13px); color:var(--muted-d); line-height:1.6; }

.reqs-card {
    background:var(--dark2); border:1px solid var(--border-d);
    border-radius:var(--radius-lg); padding:clamp(16px,2.5vw,24px); margin-bottom:12px;
}
.reqs-header {
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:2.5px;
    color:var(--cyan); text-transform:uppercase; margin-bottom:18px;
}
.reqs-list { display:flex; flex-direction:column; gap:11px; }
.reqs-list li { display:flex; align-items:flex-start; gap:9px; font-size:clamp(12px,1.8vw,13.5px); color:var(--text-d); line-height:1.5; }
.reqs-list .fa-check { color:var(--green); font-size:11px; margin-top:3px; flex-shrink:0; }
.reqs-list .req-no   { color:var(--muted-d); font-size:11px; margin-top:3px; flex-shrink:0; }
.reqs-list em { font-style:normal; color:var(--muted-d); font-size:11px; }
.reqs-tech { margin-top:18px; padding-top:14px; border-top:1px solid var(--border-d); display:flex; flex-direction:column; gap:3px; }
.reqs-tech-label { font-family:var(--font-mono); font-size:9px; letter-spacing:2px; color:var(--muted-d); text-transform:uppercase; }
.reqs-tech-val   { font-family:var(--font-mono); font-size:clamp(9px,1.5vw,11px); color:var(--cyan); letter-spacing:1px; }

.reqs-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--red); color:white;
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(13px,2vw,14px); letter-spacing:1.5px; text-transform:uppercase;
    padding:13px 24px; border-radius:var(--radius);
    transition:var(--transition); box-shadow:var(--shadow-red);
    min-height: 44px;
}
.reqs-cta:hover { background:var(--red-dk); transform:translateY(-2px); }


/* ============================================================
   CONTACTO
   ============================================================ */
.section-contact { padding:var(--section-py) 0; background:var(--black); }
.contact-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}
.contact-form { flex:1; min-width:0; }
.cf-row { display:flex; gap:14px; }
.cf-field { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; flex:1; min-width:0; }
.cf-field label { font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.5px; color:var(--muted-d); text-transform:uppercase; }
.cf-field input,
.cf-field textarea {
    background:var(--dark2); border:1.5px solid var(--border-d);
    border-radius:var(--radius); padding:11px 13px;
    font-family:var(--font-body); font-size:clamp(13px,2vw,14px); color:var(--text-d);
    outline:none; transition:var(--transition); width:100%;
    /* Evita zoom en iOS al hacer focus */
    font-size: max(16px, 14px);
}
.cf-field input:focus, .cf-field textarea:focus {
    border-color:var(--red); box-shadow:0 0 0 3px rgba(215,38,56,0.1);
}
.cf-field input.invalid { border-color:var(--red); }
.cf-field textarea { resize:vertical; min-height:110px; line-height:1.6; }
.cf-error { font-size:11px; color:var(--red); display:none; }
.cf-error.visible { display:block; }
.cf-submit { width:100%; justify-content:center; margin-top:4px; }
.cf-success {
    display:none; align-items:center; gap:10px;
    background:rgba(0,200,83,0.08); border:1px solid rgba(0,200,83,0.25);
    border-radius:var(--radius); padding:13px 16px;
    color:var(--green); font-size:14px; margin-top:12px;
}
.cf-success.visible { display:flex; }

.contact-info { display:flex; flex-direction:column; gap:18px; min-width:200px; }
.ci-item { display:flex; align-items:flex-start; gap:12px; }
.ci-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ci-green  { background:rgba(0,200,83,0.1);   color:var(--green);  border:1px solid rgba(0,200,83,0.2); }
.ci-red    { background:rgba(215,38,56,0.1);  color:var(--red);    border:1px solid rgba(215,38,56,0.2); }
.ci-cyan   { background:rgba(0,212,255,0.08); color:var(--cyan);   border:1px solid rgba(0,212,255,0.15); }
.ci-purple { background:rgba(156,111,222,0.1);color:var(--purple); border:1px solid rgba(156,111,222,0.2); }
.ci-label { font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--muted-d); text-transform:uppercase; margin-bottom:2px; }
.ci-val { font-size:clamp(13px,2vw,14px); color:var(--text-d); font-weight:500; }
.ci-val:hover { color:var(--red); }


/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--dark); border-top:1px solid var(--border-d); padding:clamp(40px,6vw,64px) 0 0; }
.footer-inner {
    display:grid; grid-template-columns:1fr 2fr;
    gap:clamp(32px,5vw,64px);
    padding-bottom:clamp(32px,5vw,48px);
    border-bottom:1px solid var(--border-d);
}
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer-cross::before { width:17px; height:6px; }
.footer-cross::after  { width:6px; height:17px; }
.footer-tagline { font-family:var(--font-mono); font-size:10px; letter-spacing:3px; color:var(--red); text-transform:uppercase; margin-bottom:10px; }
.footer-copy-small { font-size:12px; color:var(--muted-d); line-height:1.7; }
.footer-links-col { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,32px); }
.footer-col-title { font-family:var(--font-mono); font-size:9.5px; letter-spacing:2.5px; color:var(--muted-d); text-transform:uppercase; margin-bottom:14px; }
.footer-col ul { display:flex; flex-direction:column; gap:9px; }
.footer-col a { font-size:13px; color:var(--muted-d); transition:var(--transition); }
.footer-col a:hover { color:var(--white); }
.footer-bottom {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 0;
    font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--muted-d); text-transform:uppercase;
}
.footer-social { display:flex; gap:10px; }
.footer-social a {
    width:36px; height:36px; border-radius:7px;
    background:var(--gray2); color:var(--muted-d);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; transition:var(--transition);
    /* Área táctil */
    min-width:44px; min-height:44px;
}
.footer-social a:hover { background:var(--red); color:white; }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   Estrategia: mobile-first en layout, fluid typography siempre
   320 → 480 → 600 → 768 → 900 → 1200px
   ============================================================ */

/* ── Tablet grande / Desktop pequeño (≤ 1100px) ── */
@media (max-width: 1100px) {
    .nav-menu ul { gap:0; }
    .nav-link { padding:8px 9px; font-size:13px; }
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
    :root { --section-py: 72px; }

    /* ── Navbar mobile ── */
    .scanvive-menu-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1100;
        position: relative;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .scanvive-menu-btn span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-d);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: none;
    }
    .scanvive-menu-btn.ham-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .scanvive-menu-btn.ham-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .scanvive-menu-btn.ham-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-menu {
        position: fixed !important;
        top: var(--nav-h) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        background: rgba(10,10,10,0.98) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s ease !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        pointer-events: none !important;
        visibility: hidden;
    }
    .nav-menu.menu-open {
        transform: translateX(0) !important;
        pointer-events: all !important;
        visibility: visible !important;
    }
    .nav-menu ul {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        width: 100% !important;
        padding: 32px 24px !important;
        list-style: none !important;
    }
    .nav-menu ul li { width: 100%; }
    .nav-link {
        font-size: 20px !important;
        padding: 16px 24px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        border-radius: 10px !important;
        min-height: 52px !important;
        color: var(--text-d) !important;
    }
    .nav-link:hover, .nav-link.active {
        background: rgba(215,38,56,0.1) !important;
        color: var(--white) !important;
    }
    .nav-btn-login {
        font-size: 16px !important;
        padding: 14px 24px !important;
        margin: 8px auto 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        min-height: 52px !important;
    }

    /* Hero: apilado vertical */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .hero-text  { order:1; }
    .hero-ficha { order:2; }
    .hero-badge { margin:0 auto 18px; }
    .hero-desc  { margin:0 auto 22px; }
    .hero-stats { justify-content:center; }
    .hero-cta   { justify-content:center; }

    /* Productos: 2 columnas */
    .products-grid { grid-template-columns:1fr 1fr; }

    /* How: sin conector lateral */
    .how-steps { flex-wrap:wrap; gap:16px; }
    .how-step  { flex:1 1 calc(50% - 8px); min-width:200px; }
    .how-connector { display:none; }

    /* Beneficios: apilado */
    .benefits-inner { grid-template-columns:1fr; gap:36px; }
    .benefits-text .section-tag  { text-align:center; }
    .benefits-text .section-title { text-align:center; }
    .benefits-intro { text-align:center; }

    /* Contacto: apilado */
    .contact-inner { grid-template-columns:1fr; gap:40px; }
    .contact-info  { flex-direction:row; flex-wrap:wrap; gap:16px; }

    /* Footer: apilado */
    .footer-inner { grid-template-columns:1fr; gap:36px; }
    .footer-links-col { grid-template-columns:repeat(3,1fr); }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
    :root { --section-py: 56px; }

    /* Productos: 1 columna */
    .products-grid { grid-template-columns:1fr; }

    /* How: columna */
    .how-steps { flex-direction:column; align-items:stretch; }
    .how-step  { flex:none; }

    /* Formulario: campos apilados */
    .cf-row { flex-direction:column; gap:0; }

    /* Footer links: 2 columnas */
    .footer-links-col { grid-template-columns:1fr 1fr; gap:24px; }
    .footer-bottom { flex-direction:column; gap:14px; text-align:center; }

    /* Sticker flotante: ocultar en mobile pequeño */
    .hero-sticker-float { display:none; }

    /* Ficha preview: ancho completo */
    .ficha-phone { max-width:100%; }

    /* Contacto info: columna */
    .contact-info { flex-direction:column; }
}

/* ── Mobile pequeño (≤ 480px) ── */
@media (max-width: 480px) {
    :root { --section-py: 48px; }

    .hero-stats { gap:10px; }
    .stat-divider { display:none; }

    /* Products: reduce padding interno */
    .product-info { padding:12px; }

    /* Footer: 1 columna */
    .footer-links-col { grid-template-columns:1fr; gap:20px; }
}

/* ── Mobile muy pequeño (≤ 360px) ── */
@media (max-width: 360px) {
    .nav-brand { font-size:15px; letter-spacing:1px; }
    .hero-title { font-size:26px; }
    .hero-cta { flex-direction:column; }
    .btn-primary, .btn-ghost { width:100%; justify-content:center; }
}

/* ── Pantallas muy grandes (≥ 1400px) ── */
@media (min-width: 1400px) {
    .container { max-width:1280px; }
}

/* ── Landscape en mobile (altura baja) ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height:auto; padding:calc(var(--nav-h) + 24px) 0 40px; }
    .hero-inner { gap:24px; }
}

/* ── Impresión ── */
@media print {
    #navbar, .hero-bg, .hero-sticker-float,
    .hero-cta, .products-cta, .section-contact,
    .footer-social { display:none !important; }
    body { background:white; color:black; }
    .section-title, .hero-title { color:black; }
    .hero { min-height:auto; }
}


/* ============================================================
   REDES SOCIALES (sección contacto simplificada)
   ============================================================ */
.section-contact { padding: var(--section-py) 0; background: var(--black); }

/* Grid de 4 tarjetas en fila — 2 columnas en tablet, 1 en mobile */
.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 20px);
    max-width: 900px;
    margin: 0 auto;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dark2);
    border: 1px solid var(--border-d);
    border-radius: var(--radius-lg);
    padding: clamp(16px, 2.5vw, 22px) clamp(14px, 2vw, 20px);
    transition: var(--transition);
    text-decoration: none;
    min-height: 44px;
    position: relative;
    overflow: hidden;
}
.social-card::before {
    /* Línea de color en la izquierda al hover */
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--red);
    transform: scaleY(0);
    transition: transform 0.25s ease;
    border-radius: 0 2px 2px 0;
}
.social-card:hover { border-color: rgba(215,38,56,0.3); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.4); }
.social-card:hover::before { transform: scaleY(1); }

.social-icon {
    width: clamp(40px,5vw,48px); height: clamp(40px,5vw,48px);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(18px,3vw,22px);
    flex-shrink: 0;
    transition: var(--transition);
}
.si-instagram { background: rgba(225,48,108,0.12); color: #e1306c;  border: 1px solid rgba(225,48,108,0.2); }
.si-whatsapp  { background: rgba(37,211,102,0.10); color: #25d366;  border: 1px solid rgba(37,211,102,0.2); }
.si-tiktok    { background: rgba(255,255,255,0.06); color: var(--white); border: 1px solid rgba(255,255,255,0.1); }
.si-email     { background: rgba(215,38,56,0.10);  color: var(--red);   border: 1px solid rgba(215,38,56,0.2); }

.social-card:hover .social-icon { transform: scale(1.08); }

.social-info { flex: 1; min-width: 0; }
.social-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--white);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.social-handle {
    font-family: var(--font-mono);
    font-size: clamp(9px, 1.3vw, 11px);
    color: var(--muted-d);
    letter-spacing: 1px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.social-arrow {
    font-size: 11px;
    color: var(--muted-d);
    flex-shrink: 0;
    transition: var(--transition);
    opacity: 0;
}
.social-card:hover .social-arrow { opacity: 1; color: var(--red); transform: translate(2px, -2px); }

/* Benefits: ahora 1 sola columna (sin la columna de requisitos) */
.section-benefits .benefits-inner {
    grid-template-columns: 1fr !important;
    max-width: 680px;
    margin: 0 auto;
}
.section-benefits .benefits-text .section-tag,
.section-benefits .benefits-text .section-title,
.section-benefits .benefits-text .benefits-intro {
    text-align: center;
}
.section-benefits .benefits-list {
    max-width: 560px;
    margin: 0 auto;
}

/* Responsive social grid */
@media (max-width: 900px) {
    .social-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .social-grid { grid-template-columns: 1fr; }
    .social-card { padding: 14px; }
    .social-arrow { opacity: 1; }
}


/* ── Product card Coming Soon (index) ── */
.product-card-cs {
    opacity: 0.72;
    pointer-events: none;
    cursor: default;
}
.product-card-cs:hover {
    transform: none !important;
    border-color: var(--border-d) !important;
    box-shadow: none !important;
}
.prod-cs-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
    backdrop-filter: blur(2px);
}
.prod-cs-overlay i  { font-size: 32px; color: var(--cyan); opacity: 0.85; }
.prod-cs-overlay span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
}
.prod-cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0,212,255,0.08);
    border: 1px solid rgba(0,212,255,0.2);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
    margin-top: 2px;
}





/* ============================================================
   NAVBAR SV — Sistema de navegación mobile
   Funciona con: onclick="svToggleMenu()" en el botón
   Estado abierto: clase .sv-open en .sv-btn y .sv-menu
   ============================================================ */

/* ──────────────────────────────────────────
   BOTÓN (3 líneas → X)
   Oculto en desktop, visible en mobile
   ────────────────────────────────────────── */
.sv-btn {
    display: none;                       /* oculto por defecto — se muestra en @media */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; /* sin flash azul en Android */
    touch-action: manipulation;               /* respuesta táctil inmediata */
}

/* Las 3 líneas del botón */
.sv-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease;
    pointer-events: none;
}

/* Animación de 3 líneas → X cuando el menú está abierto */
.sv-btn.sv-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sv-btn.sv-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sv-btn.sv-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ──────────────────────────────────────────
   MENÚ DESPLEGABLE
   Aparece debajo del navbar al abrir
   ────────────────────────────────────────── */

/* Animación de entrada: desliza desde arriba + fade */
@keyframes svMenuSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Animación de cada item: entra desde la izquierda escalonado */
@keyframes svItemFadeIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Estado cerrado — completamente oculto */
.sv-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);           /* justo debajo del navbar */
    left: 0;
    right: 0;
    background: #0d0d0d;
    border-top: 2px solid #D72638;
    border-bottom: 1px solid #1e1e1e;
    z-index: 9999;               /* encima de todo */
    box-shadow: 0 12px 40px rgba(0,0,0,0.85),
                0 0 0 1px rgba(215,38,56,0.15); /* glow rojo sutil */
    overflow: hidden;
}

/* Estado abierto — se hace visible con animación */
.sv-menu.sv-open {
    display: flex !important;
    animation: svMenuSlideIn 0.28s ease forwards;
}

/* Items del menú — escalonados con delay */
.sv-menu.sv-open .sv-item:nth-child(1) { animation: svItemFadeIn 0.22s ease 0.04s both; }
.sv-menu.sv-open .sv-item:nth-child(2) { animation: svItemFadeIn 0.22s ease 0.09s both; }
.sv-menu.sv-open .sv-item:nth-child(3) { animation: svItemFadeIn 0.22s ease 0.14s both; }
.sv-menu.sv-open .sv-item:nth-child(4) { animation: svItemFadeIn 0.22s ease 0.19s both; }
.sv-menu.sv-open .sv-item:nth-child(5) { animation: svItemFadeIn 0.22s ease 0.24s both; }
.sv-menu.sv-open .sv-item:nth-child(6) { animation: svItemFadeIn 0.22s ease 0.29s both; }


/* ──────────────────────────────────────────
   ITEMS DEL MENÚ
   ────────────────────────────────────────── */
.sv-item {
    position: relative;
    display: block;
    padding: 15px 24px 15px 28px;       /* padding-left da espacio a la barra roja */
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #777;
    text-decoration: none;
    border-bottom: 1px solid #161616;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.18s ease,
                color 0.18s ease,
                padding-left 0.18s ease;
}
.sv-item:last-child { border-bottom: none; }

/* Barra roja a la izquierda — aparece al hover o cuando es activo */
.sv-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 55%;
    background: #D72638;
    border-radius: 0 2px 2px 0;
    transition: transform 0.2s ease;
}
.sv-item:hover,
.sv-item:active {
    background: #161616;
    color: white;
    padding-left: 32px;               /* se desplaza un poco para acompañar la barra */
}
.sv-item:hover::before,
.sv-item:active::before { transform: translateY(-50%) scaleY(1); }

/* Item de la página actual — siempre activo */
.sv-active {
    color: white !important;
    padding-left: 32px !important;
}
.sv-active::before { transform: translateY(-50%) scaleY(1) !important; }

/* Botón de login — color rojo */
.sv-login {
    color: #D72638 !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
}
.sv-login:hover { color: #ff4455 !important; }


/* ──────────────────────────────────────────
   NAVEGACIÓN DESKTOP
   Links horizontales — ocultos en mobile
   ────────────────────────────────────────── */
.nav-desktop {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nd-link {
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    padding: 8px 11px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.nd-link:hover,
.nd-link.nav-active { color: white; background: rgba(255,255,255,0.05); }


/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */

/* Mobile (≤ 900px): mostrar botón, ocultar nav desktop */
@media (max-width: 900px) {
    .sv-btn      { display: flex !important; }
    .nav-desktop { display: none  !important; }
}

/* Desktop (> 900px): ocultar botón y menú mobile */
@media (min-width: 901px) {
    .sv-btn  { display: none !important; }
    .sv-menu { display: none !important; }
}


/* ── Botón demo ficha — link sutil bajo los CTAs del hero ── */
.hero-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.hero-demo-link:hover { opacity: 1; }
.hero-demo-link i { font-size: 13px; }