/* ==========================================================================
   Zenercom — sistema de diseño corporativo
   Paleta: azul marino técnico + azul señal + ámbar de energía.
   Todo el sitio (público, tienda y panel) usa estos tokens.
   ========================================================================== */

:root {
    /* Marca */
    --navy-950: #04101C;
    --navy-900: #071829;
    --navy-800: #0B2138;
    --navy-700: #12314F;
    --navy-600: #1B4570;

    --azul: #0B6FBF;
    --azul-vivo: #1590E8;
    --azul-claro: #E8F3FC;
    --ambar: #E8930C;
    --ambar-claro: #FDF3E2;
    --verde: #0E9F6E;
    --rojo: #D93F3F;

    /* Neutros */
    --tinta: #0C1926;
    --gris-700: #33495E;
    --gris-600: #51677E;
    --gris-500: #74889E;
    --gris-400: #9FB0C2;
    --linea: #E1E8F0;
    --linea-suave: #EEF3F8;
    --fondo: #FFFFFF;
    --fondo-suave: #F6F9FC;

    /* Tipografía */
    --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Medidas */
    --ancho: 1240px;
    --radio: 10px;
    --radio-sm: 6px;
    --radio-lg: 16px;

    /* Sombras — discretas, nada de "glow" */
    --sombra-sm: 0 1px 2px rgba(12, 25, 38, .06), 0 1px 3px rgba(12, 25, 38, .05);
    --sombra: 0 2px 4px rgba(12, 25, 38, .04), 0 8px 24px rgba(12, 25, 38, .07);
    --sombra-lg: 0 4px 8px rgba(12, 25, 38, .05), 0 24px 56px rgba(12, 25, 38, .12);

    --header-h: 72px;
}

/* --------------------------------------------------------------- Base --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gris-700);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 .5em;
    color: var(--tinta);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.021em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.45rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.45rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
a  { color: var(--azul); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--azul-vivo); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong { color: var(--tinta); font-weight: 620; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------ Layout --- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }
.seccion { padding: clamp(56px, 7vw, 104px) 0; }
.seccion--suave { background: var(--fondo-suave); }
.seccion--oscura { background: var(--navy-900); color: #B9C9DA; }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3, .seccion--oscura h4 { color: #fff; }
.seccion--borde-sup { border-top: 1px solid var(--linea); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.centro { text-align: center; }
.max-70 { max-width: 70ch; }
.mx-auto { margin-inline: auto; }

/* ------------------------------------------------------ Encabezados --- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .755rem; font-weight: 640; letter-spacing: .13em; text-transform: uppercase;
    color: var(--azul); margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--azul); display: block; }
.seccion--oscura .eyebrow { color: var(--azul-vivo); }
.seccion--oscura .eyebrow::before { background: var(--azul-vivo); }

.encabezado-seccion { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.encabezado-seccion.centro { margin-inline: auto; }
.encabezado-seccion p { font-size: 1.06rem; color: var(--gris-600); margin-bottom: 0; }
.seccion--oscura .encabezado-seccion p { color: #93A9C0; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--gris-600); }

/* ------------------------------------------------------------ Botones --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .72rem 1.4rem; border-radius: var(--radio-sm); border: 1px solid transparent;
    font-family: inherit; font-size: .935rem; font-weight: 580; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.cargando { opacity: .6; pointer-events: none; }

.btn--primario { background: var(--azul); color: #fff; box-shadow: 0 1px 2px rgba(11,111,191,.3); }
.btn--primario:hover { background: #0960A6; color: #fff; }

.btn--ambar { background: var(--ambar); color: #21170A; }
.btn--ambar:hover { background: #D18409; color: #21170A; }

.btn--linea { background: transparent; color: var(--tinta); border-color: var(--linea); }
.btn--linea:hover { border-color: var(--gris-400); background: var(--fondo-suave); color: var(--tinta); }

.btn--claro { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--claro:hover { background: rgba(255,255,255,.16); color: #fff; }

.btn--blanco { background: #fff; color: var(--navy-900); }
.btn--blanco:hover { background: #E8F3FC; color: var(--navy-900); }

.btn--sm { padding: .48rem .9rem; font-size: .84rem; }
.btn--lg { padding: .9rem 1.8rem; font-size: 1rem; }
.btn--bloque { width: 100%; }

.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 570; font-size: .93rem; }
.enlace-flecha svg { transition: transform .15s ease; }
.enlace-flecha:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------- Etiquetas --- */
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .24rem .6rem; border-radius: 100px;
    font-size: .73rem; font-weight: 600; letter-spacing: .01em;
    background: var(--azul-claro); color: #0A5FA3;
}
.chip--ambar { background: var(--ambar-claro); color: #96600A; }
.chip--verde  { background: #E4F6EE; color: #0A7350; }
.chip--rojo   { background: #FCEAEA; color: #A32C2C; }
.chip--gris   { background: var(--linea-suave); color: var(--gris-600); }
.chip--oscuro { background: rgba(255,255,255,.1); color: #C7D8E8; }

/* ------------------------------------------------------------- Header --- */
.encabezado {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255,255,255,.93);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--linea);
}
.encabezado__fila { display: flex; align-items: center; gap: 2rem; height: var(--header-h); }

.logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.logo__marca { font-size: 1.22rem; font-weight: 700; letter-spacing: -.035em; color: var(--tinta); line-height: 1; }
.logo__marca span { color: var(--azul); }
.logo__tag { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .17em;
             text-transform: uppercase; color: var(--gris-500); margin-top: 2px; }

/* Isotipo real de Zenercom — dos usos:
   1) .logo__marca-img: la marca completa (zenercom-logo.png, trazo negro
      sobre transparente) con un halo blanco que sigue su contorno exacto
      -no una caja ni una burbuja- apilando drop-shadow en 8 direcciones
      sobre el propio canal alfa de la imagen. Se usa en fondo OSCURO (pie,
      panel): ahí el trazo negro se funde con el fondo y lo que se lee es
      el contorno blanco.
   2) .logo__marca-img-plano: solo el rayo grueso, sin ramas ni circuito
      (zenercom-icono.png), sin halo. Se usa en fondo CLARO (header, login):
      el halo blanco no serviría de nada sobre blanco, y a tamaño de header
      los trazos finos de la marca completa se pierden por el antialiasing;
      el rayo solo, más grueso, sigue siendo legible en chico. */
.logo__marca-img {
    display: block;
    height: 46px;
    width: auto;
    filter:
        drop-shadow(0    0.9px 0 #fff) drop-shadow(0   -0.9px 0 #fff)
        drop-shadow(0.9px  0   0 #fff) drop-shadow(-0.9px 0   0 #fff)
        drop-shadow(0.65px 0.65px 0 #fff) drop-shadow(-0.65px  0.65px 0 #fff)
        drop-shadow(0.65px -0.65px 0 #fff) drop-shadow(-0.65px -0.65px 0 #fff);
}
.logo__marca-img--lg { height: 46px; }
.logo__marca-img--sm { height: 26px; }

.logo__marca-img-plano { display: block; height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav a {
    padding: .5rem .78rem; border-radius: var(--radio-sm);
    font-size: .905rem; font-weight: 520; color: var(--gris-700);
}
.nav a:hover { background: var(--fondo-suave); color: var(--tinta); }
.nav a.activo { color: var(--azul); font-weight: 600; }

.encabezado__acciones { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }

.carrito-btn { position: relative; display: inline-flex; align-items: center; gap: .45rem;
               padding: .5rem .8rem; border-radius: var(--radio-sm); color: var(--gris-700);
               border: 1px solid var(--linea); font-size: .89rem; font-weight: 550; background: #fff; }
.carrito-btn:hover { border-color: var(--gris-400); color: var(--tinta); }
.carrito-btn__n {
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px;
    background: var(--azul); color: #fff; font-size: .7rem; font-weight: 700;
    display: none; align-items: center; justify-content: center; line-height: 1;
}
.carrito-btn__n.visible { display: inline-flex; }

.menu-btn { display: none; background: none; border: 1px solid var(--linea); border-radius: var(--radio-sm);
            padding: .45rem .6rem; cursor: pointer; color: var(--tinta); }

/* ---------------------------------------------------------- Barra top --- */
.barra-top { background: var(--navy-900); border-bottom: 1px solid rgba(255,255,255,.07);
             color: #8CA2B8; font-size: .78rem; }
.barra-top__fila { display: flex; align-items: center; justify-content: space-between;
                    gap: 1rem; height: 38px; flex-wrap: nowrap; }
.barra-top a { display: inline-flex; align-items: center; gap: .4rem; color: #B9CBDD;
               white-space: nowrap; }
.barra-top a:hover { color: #fff; }
.barra-top a svg { color: #5E84A8; flex-shrink: 0; }
.barra-top a:hover svg { color: var(--azul-vivo); }
.barra-top__items { display: flex; align-items: center; gap: 1.3rem; min-width: 0; }
/* Separador discreto entre elementos del grupo derecho (teléfono · correo · acceso). */
.barra-top__items span + span { position: relative; padding-left: 1.3rem; }
.barra-top__items span + span::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 11px; background: rgba(255,255,255,.14);
}
.barra-top__items--marca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Hero --- */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 480px at 82% -10%, rgba(21,144,232,.22), transparent 60%),
        radial-gradient(700px 400px at 5% 100%, rgba(232,147,12,.10), transparent 62%),
        linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
    color: #AFC4D8;
    padding: clamp(64px, 8vw, 116px) 0 clamp(60px, 7vw, 96px);
}
/* Retícula técnica de fondo: sugiere plano de ingeniería sin distraer. */
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 35%, transparent 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; max-width: 16ch; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__texto p { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: #A7BDD2; max-width: 52ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__sello { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .8rem .3rem .35rem;
               border: 1px solid rgba(255,255,255,.16); border-radius: 100px; background: rgba(255,255,255,.05);
               font-size: .78rem; color: #C6D8E9; margin-bottom: 1.6rem; }
.hero__sello b { background: var(--azul-vivo); color: #04101C; padding: .14rem .5rem; border-radius: 100px;
                 font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Panel tipo "consola de monitoreo" del hero */
.panel-monitor {
    background: rgba(8,24,41,.72); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radio-lg); padding: 20px; backdrop-filter: blur(8px);
    box-shadow: 0 30px 70px rgba(2,10,20,.5);
}
.panel-monitor__titulo { display: flex; align-items: center; justify-content: space-between;
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #7B93AC;
    padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 600; }
.pulso { display: inline-flex; align-items: center; gap: .42rem; color: #3FD08A; font-size: .74rem; letter-spacing: .04em; }
.pulso i { width: 7px; height: 7px; border-radius: 50%; background: #3FD08A; animation: latido 2s infinite; }
@keyframes latido { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(63,208,138,.5); }
                    50% { opacity: .55; box-shadow: 0 0 0 5px rgba(63,208,138,0); } }
.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metrica { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07);
           border-radius: var(--radio); padding: 13px 15px; }
.metrica__etq { font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; color: #7E96AF; font-weight: 600; }
.metrica__val { font-family: var(--mono); font-size: 1.42rem; font-weight: 600; color: #fff; margin-top: 5px; line-height: 1.1; }
.metrica__val small { font-size: .62em; color: #8FA8C0; font-weight: 500; margin-left: 2px; }
.metrica--ok .metrica__val { color: #4FDB9A; }
.metrica--alerta .metrica__val { color: #FFC24D; }

.barra-nivel { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 10px; overflow: hidden; }
.barra-nivel i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--azul-vivo), #4FDB9A); }

/* ------------------------------------------------------ Franja logos --- */
.franja-confianza { border-bottom: 1px solid var(--linea); background: #fff; padding: 26px 0; }
.franja-confianza__fila { display: flex; align-items: center; justify-content: space-between;
                          gap: 2rem; flex-wrap: wrap; }
.franja-confianza p { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .1em;
                      text-transform: uppercase; color: var(--gris-500); }
.franja-confianza ul { display: flex; gap: 2.2rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.franja-confianza li { margin: 0; font-size: .96rem; font-weight: 620; color: var(--gris-400); letter-spacing: -.01em; }

/* --------------------------------------------------------- Tarjetas --- */
.tarjeta {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
    padding: 28px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta:hover { border-color: #C9D8E7; box-shadow: var(--sombra); }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { color: var(--gris-600); font-size: .95rem; margin-bottom: 0; }
.tarjeta--enlace:hover { transform: translateY(-3px); }

.icono-caja {
    width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
    background: var(--azul-claro); color: var(--azul); margin-bottom: 18px;
}
.icono-caja--ambar { background: var(--ambar-claro); color: #B57108; }
.icono-caja--verde { background: #E4F6EE; color: var(--verde); }

.lista-check { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.lista-check li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; font-size: .94rem; }
.lista-check li::before {
    content: ''; position: absolute; left: 0; top: .42em; width: 15px; height: 15px; border-radius: 50%;
    background: var(--azul-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6FBF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}
.seccion--oscura .lista-check li::before { background-color: rgba(21,144,232,.22); }

/* --------------------------------------------------- Cifras / stats --- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea);
          border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; }
.cifra { background: #fff; padding: 30px 26px; }
.cifra__n { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 680; color: var(--tinta);
            letter-spacing: -.035em; line-height: 1; }
.cifra__n span { color: var(--azul); }
.cifra__t { font-size: .87rem; color: var(--gris-600); margin-top: .55rem; }
.seccion--oscura .cifras { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
.seccion--oscura .cifra { background: var(--navy-800); }
.seccion--oscura .cifra__n { color: #fff; }
.seccion--oscura .cifra__t { color: #93A9C0; }

/* --------------------------------------------------------- Productos --- */
.grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 24px; }

.card-producto {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card-producto:hover { border-color: #C9D8E7; box-shadow: var(--sombra); transform: translateY(-3px); }
.card-producto__img {
    aspect-ratio: 4 / 3; background: var(--fondo-suave); position: relative;
    display: grid; place-items: center; border-bottom: 1px solid var(--linea); overflow: hidden;
}
.card-producto__img img { width: 100%; height: 100%; object-fit: cover; }
.card-producto__img .sin-foto { color: var(--gris-400); }
.card-producto__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: .4rem; flex-wrap: wrap; }
.card-producto__cuerpo { padding: 20px 20px 0; flex: 1; }
.card-producto__cat { font-size: .71rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
                      color: var(--azul); }
.card-producto h3 { font-size: 1.06rem; margin: .5rem 0 .4rem; letter-spacing: -.02em; }
.card-producto h3 a { color: var(--tinta); }
.card-producto h3 a:hover { color: var(--azul); }
.card-producto__res { font-size: .89rem; color: var(--gris-600); margin: 0 0 1rem;
                      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-producto__sku { font-family: var(--mono); font-size: .72rem; color: var(--gris-400); }
.card-producto__pie { padding: 16px 20px 20px; border-top: 1px solid var(--linea-suave); margin-top: 16px;
                      display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.precio { font-size: 1.28rem; font-weight: 680; color: var(--tinta); letter-spacing: -.03em; line-height: 1.1; }
.precio small { display: block; font-size: .68rem; font-weight: 500; color: var(--gris-500);
                letter-spacing: 0; margin-top: 2px; }
.precio--tachado { font-size: .88rem; font-weight: 500; color: var(--gris-400); text-decoration: line-through; }

/* ------------------------------------------------- Ficha de producto --- */
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.ficha__media { position: sticky; top: calc(var(--header-h) + 24px); }
.ficha__foto { aspect-ratio: 4/3; border: 1px solid var(--linea); border-radius: var(--radio-lg);
               background: var(--fondo-suave); display: grid; place-items: center; overflow: hidden; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin-bottom: .6rem; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--linea); margin-bottom: 28px;
        overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
       padding: .8rem 1rem; font-family: inherit; font-size: .935rem; font-weight: 560;
       color: var(--gris-600); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--tinta); }
.tab.activo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 620; }
.tab-panel { display: none; }
.tab-panel.activo { display: block; animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.tabla-specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-specs caption { text-align: left; font-size: .72rem; font-weight: 680; letter-spacing: .11em;
                       text-transform: uppercase; color: var(--azul); padding: 22px 0 10px; }
.tabla-specs th, .tabla-specs td { padding: .72rem .9rem; border-bottom: 1px solid var(--linea-suave);
                                   text-align: left; vertical-align: top; }
.tabla-specs th { width: 42%; font-weight: 550; color: var(--gris-600); }
.tabla-specs td { color: var(--tinta); font-weight: 520; }
.tabla-specs tr:nth-child(even) { background: var(--fondo-suave); }

/* ------------------------------------------------------- Descargas --- */
.lista-descargas { display: flex; flex-direction: column; gap: 10px; }
.descarga {
    display: flex; align-items: center; gap: 16px; padding: 16px 18px;
    border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.descarga:hover { border-color: #C3D4E5; box-shadow: var(--sombra-sm); }
.descarga__icono { width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center;
                   flex-shrink: 0; background: var(--fondo-suave); color: var(--gris-600); }
.descarga__icono--manual   { background: #FCEAEA; color: #B23A3A; }
.descarga__icono--software { background: var(--azul-claro); color: var(--azul); }
.descarga__icono--firmware { background: var(--ambar-claro); color: #A86A08; }
.descarga__icono--ficha    { background: #E4F6EE; color: var(--verde); }
.descarga__info { flex: 1; min-width: 0; }
.descarga__titulo { font-weight: 600; color: var(--tinta); font-size: .96rem; }
.descarga__meta { font-size: .8rem; color: var(--gris-500); margin-top: 2px;
                  display: flex; gap: .9rem; flex-wrap: wrap; }
.descarga__meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* ----------------------------------------------------------- Tienda --- */
.tienda-layout { display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start; }
.filtros { position: sticky; top: calc(var(--header-h) + 24px); }
.filtros h4 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--gris-500);
              margin-bottom: .9rem; font-weight: 650; }
.filtros__lista { list-style: none; padding: 0; margin: 0 0 2rem; }
.filtros__lista li { margin: 0; }
.filtros__lista a { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                    padding: .48rem .7rem; border-radius: var(--radio-sm); font-size: .91rem;
                    color: var(--gris-700); }
.filtros__lista a:hover { background: var(--fondo-suave); color: var(--tinta); }
.filtros__lista a.activo { background: var(--azul-claro); color: #0A5FA3; font-weight: 600; }
.filtros__lista b { font-size: .76rem; font-weight: 600; color: var(--gris-400); }

.buscador { position: relative; margin-bottom: 24px; }
.buscador input { padding-left: 2.5rem; }
.buscador svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--gris-400); }

/* ----------------------------------------------------- Formularios --- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: .84rem; font-weight: 570; color: var(--gris-700); margin-bottom: .38rem; }
.campo label .req { color: var(--rojo); }
.campo small { display: block; font-size: .78rem; color: var(--gris-500); margin-top: .3rem; }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=url], input[type=date], input[type=search], select, textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--linea); border-radius: var(--radio-sm);
    font-family: inherit; font-size: .93rem; color: var(--tinta); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #C9D8E7; }
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(11,111,191,.13);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
select { appearance: none; cursor: pointer; padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374889E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; background-size: 15px; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--azul); }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.aviso { padding: .85rem 1.05rem; border-radius: var(--radio-sm); font-size: .89rem;
         border: 1px solid; margin-bottom: 1rem; display: none; }
.aviso.visible { display: block; }
.aviso--ok    { background: #E9F8F1; border-color: #A9E3C9; color: #0A6B4B; }
.aviso--error { background: #FDECEC; border-color: #F3C2C2; color: #9E2B2B; }
.aviso--info  { background: var(--azul-claro); border-color: #B9DCF6; color: #0A5FA3; }
.aviso--ambar { background: var(--ambar-claro); border-color: #F5D9A6; color: #8A5A07; }

/* ---------------------------------------------------------- Carrito --- */
.carrito-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.linea-carrito { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center;
                 padding: 18px 0; border-bottom: 1px solid var(--linea); }
.linea-carrito__foto { width: 76px; height: 62px; border-radius: var(--radio-sm); background: var(--fondo-suave);
                       border: 1px solid var(--linea); overflow: hidden; display: grid; place-items: center; }
.linea-carrito__foto img { width: 100%; height: 100%; object-fit: cover; }
.linea-carrito__nom { font-weight: 600; color: var(--tinta); font-size: .96rem; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio-sm); }
.cantidad button { width: 30px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--gris-600);
                   font-size: 1rem; line-height: 1; }
.cantidad button:hover { background: var(--fondo-suave); color: var(--tinta); }
.cantidad span { min-width: 34px; text-align: center; font-size: .9rem; font-weight: 600; color: var(--tinta); }

.resumen { border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 24px;
           background: var(--fondo-suave); position: sticky; top: calc(var(--header-h) + 24px); }
.resumen__fila { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .93rem; }
.resumen__fila--total { border-top: 1px solid var(--linea); margin-top: .6rem; padding-top: .95rem;
                        font-size: 1.14rem; font-weight: 680; color: var(--tinta); letter-spacing: -.02em; }
.sello-pago { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--gris-500);
              margin-top: 1rem; justify-content: center; }

/* ------------------------------------------------------- Breadcrumb --- */
.migas { font-size: .82rem; color: var(--gris-500); padding: 18px 0; }
.migas a { color: var(--gris-600); }
.migas a:hover { color: var(--azul); }
.migas span { margin: 0 .45rem; color: var(--gris-400); }

/* ------------------------------------------------------------- Pasos --- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: paso; }
.paso { position: relative; padding-top: 22px; border-top: 2px solid var(--linea); }
.paso::before {
    counter-increment: paso; content: counter(paso, decimal-leading-zero);
    font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--azul);
    position: absolute; top: -1.85rem; left: 0;
}
.paso h3 { font-size: 1.05rem; }
.paso p { font-size: .93rem; color: var(--gris-600); margin: 0; }

/* -------------------------------------------------------------- CTA --- */
.cta-franja {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
    border-radius: var(--radio-lg); padding: clamp(36px, 5vw, 60px); color: #AFC4D8;
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.cta-franja::after {
    content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(21,144,232,.28), transparent 68%);
}
.cta-franja > * { position: relative; z-index: 1; }
.cta-franja h2 { color: #fff; margin-bottom: .4rem; }
.cta-franja p { margin: 0; color: #9FB6CC; max-width: 52ch; }
.cta-franja__acciones { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ Footer --- */
.pie { background: var(--navy-950); color: #8BA3BA; padding: clamp(48px, 6vw, 72px) 0 0; font-size: .91rem; }
.pie__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.pie h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
          margin-bottom: 1.1rem; font-weight: 650; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .58rem; }
.pie a { color: #8BA3BA; }
.pie a:hover { color: #fff; }
.pie .logo__marca { color: #fff; }
.pie .logo__marca span { color: var(--azul-vivo); }
.pie__desc { max-width: 38ch; margin: 1.2rem 0 1.4rem; color: #7D95AC; font-size: .89rem; line-height: 1.6; }
.pie__contacto li { display: flex; gap: .6rem; align-items: flex-start; color: #92AABF; }
.pie__contacto svg { flex-shrink: 0; margin-top: 3px; color: var(--azul-vivo); }
.pie__legal { border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0; display: flex;
              justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; font-size: .82rem; color: #6C849B; }
.pie__legal a { color: #7D95AC; }
.pie__razon-social { margin: 0; padding-bottom: 22px; font-size: .76rem; color: #5A7088; }

/* ----------------------------------------------------------- Varios --- */
.cargando-caja { padding: 60px 0; text-align: center; color: var(--gris-500); font-size: .93rem; }
.spinner { width: 26px; height: 26px; border: 2.5px solid var(--linea); border-top-color: var(--azul);
           border-radius: 50%; animation: girar .7s linear infinite; margin: 0 auto 14px; }
@keyframes girar { to { transform: rotate(360deg); } }

.vacio { text-align: center; padding: 64px 24px; border: 1px dashed var(--linea);
         border-radius: var(--radio-lg); background: var(--fondo-suave); }
.vacio h3 { color: var(--gris-700); }
.vacio p { color: var(--gris-500); margin-bottom: 1.4rem; }

.acordeon { border-bottom: 1px solid var(--linea); }
.acordeon__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
                 padding: 1.15rem 0; background: none; border: 0; cursor: pointer; text-align: left;
                 font-family: inherit; font-size: 1.02rem; font-weight: 600; color: var(--tinta); }
.acordeon__btn svg { flex-shrink: 0; color: var(--gris-500); transition: transform .2s ease; }
.acordeon.abierto .acordeon__btn svg { transform: rotate(180deg); }
.acordeon__cuerpo { display: none; padding-bottom: 1.3rem; color: var(--gris-600); font-size: .95rem; }
.acordeon.abierto .acordeon__cuerpo { display: block; }

.mono { font-family: var(--mono); font-size: .88em; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------- Responsive --- */
@media (max-width: 1080px) {
    .hero__grid { grid-template-columns: 1fr; }
    .panel-monitor { max-width: 560px; }
    .tienda-layout { grid-template-columns: 1fr; }
    .filtros { position: static; }
    .filtros__lista { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; }
    .filtros__lista a { border: 1px solid var(--linea); }
    .carrito-layout { grid-template-columns: 1fr; }
    .resumen { position: static; }
    .pie__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
    .nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch;
           background: #fff; border-bottom: 1px solid var(--linea); padding: 12px 24px 20px;
           box-shadow: var(--sombra); display: none; gap: 0; }
    .nav.abierto { display: flex; }
    .nav a { padding: .75rem .4rem; border-bottom: 1px solid var(--linea-suave); border-radius: 0; }
    .menu-btn { display: inline-flex; order: 3; }
    .encabezado__acciones { margin-left: auto; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .cifras { grid-template-columns: 1fr 1fr; }
    .ficha { grid-template-columns: 1fr; }
    .ficha__media { position: static; }
    .pasos { grid-template-columns: 1fr; }
    /* En chico solo cabe -y solo hace falta- el teléfono: la frase decorativa
       y "acceso distribuidores" se partían en dos líneas y reventaban la
       barra a esta anchura. */
    .barra-top__items--marca { display: none; }
    .barra-top__items span:not(.siempre) { display: none; }
    .barra-top__items span.siempre { padding-left: 0; }
    .barra-top__items span.siempre::before { display: none; }
}
@media (max-width: 620px) {
    .contenedor { padding-inline: 18px; }
    .cifras { grid-template-columns: 1fr; }
    .pie__grid { grid-template-columns: 1fr; }
    .fila-campos { grid-template-columns: 1fr; }
    .linea-carrito { grid-template-columns: 60px 1fr; }
    .linea-carrito__foto { width: 60px; height: 50px; }
    .cta-franja { flex-direction: column; align-items: flex-start; }
}

@media print {
    .encabezado, .pie, .barra-top, .cta-franja, .btn { display: none !important; }
    body { color: #000; }
}

/* Variante 2×2 de las cifras, para cuando van dentro de una columna
   (en la home comparten fila con el texto y a 4 columnas no caben). */
.cifras--2 { grid-template-columns: 1fr 1fr; }
.cifras--2 .cifra { padding: 26px 22px; }
@media (max-width: 620px) { .cifras--2 { grid-template-columns: 1fr; } }