/* GS Frontend Core — Xbox Series X / Series S — 0.69.1 */
/* Migración 0.69.0 desde Elementor JSON completo. */


/* =========================================================
   GAMMERS STYLE
   HERO XBOX SERIES X + SERIES S — V4
   Ajuste de escala + reposicionamiento de HUD

   CSS ID EXTERIOR:
   xbox-series-x-inicio

   ROOT:
   .gsxsxhero
   ========================================================= */

.gsxsxhero{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#28d9f3;
    --blue:#4c91ff;
    --violet:#8b68ff;
    --yellow:#ffc857;
    --red:#ff6378;

    --white:#f4fff5;
    --text:#dce9dd;
    --muted:#8b9b8e;
    --muted2:#667568;

    position:relative;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    color:var(--text);
    background:
        radial-gradient(circle at 12% 14%, rgba(101,245,47,.08), transparent 27%),
        radial-gradient(circle at 86% 15%, rgba(40,217,243,.04), transparent 26%),
        radial-gradient(circle at 72% 89%, rgba(101,245,47,.035), transparent 31%),
        linear-gradient(180deg, #020403 0%, #061008 50%, #020403 100%);
    font-family:"Poppins",system-ui,sans-serif;
    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxhero *,
.gsxsxhero *::before,
.gsxsxhero *::after{
    box-sizing:border-box;
    font-family:"Poppins",system-ui,sans-serif;
    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxhero a{
    text-decoration:none;
}

/* =========================================================
   FONDO
   ========================================================= */

.gsxsxhero__grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.21;
    background-image:
        linear-gradient(rgba(101,245,47,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(101,245,47,.035) 1px, transparent 1px);
    background-size:46px 46px;
}

.gsxsxhero__grid::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}

/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxhero__scan{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.gsxsxhero__scan::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(101,245,47,.15), rgba(40,217,243,.14), transparent);
    box-shadow:0 0 16px rgba(101,245,47,.09);
    animation:gsxsxheroScan 11s linear infinite;
}

@keyframes gsxsxheroScan{
    0%{ transform:translateY(0); opacity:0; }
    8%{ opacity:.34; }
    92%{ opacity:.08; }
    100%{ transform:translateY(2300px); opacity:0; }
}

/* =========================================================
   ÓRBITAS
   ========================================================= */

.gsxsxhero__orbit-a,
.gsxsxhero__orbit-b{
    position:absolute;
    pointer-events:none;
    border-radius:50%;
}

.gsxsxhero__orbit-a{
    width:780px;
    height:780px;
    right:-390px;
    top:-235px;
    border:1px solid rgba(101,245,47,.045);
    animation:gsxsxheroOrbit 56s linear infinite;
}

.gsxsxhero__orbit-a::before{
    content:"";
    position:absolute;
    inset:125px;
    border:1px dashed rgba(40,217,243,.045);
    border-radius:50%;
}

.gsxsxhero__orbit-a::after{
    content:"";
    position:absolute;
    inset:240px;
    border:1px solid rgba(101,245,47,.035);
    border-radius:50%;
}

.gsxsxhero__orbit-b{
    width:500px;
    height:500px;
    left:-270px;
    bottom:-215px;
    border:1px solid rgba(40,217,243,.035);
    animation:gsxsxheroOrbit 72s linear infinite reverse;
}

@keyframes gsxsxheroOrbit{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* =========================================================
   SHELL
   ========================================================= */

.gsxsxhero__shell{
    position:relative;
    z-index:3;
    width:min(1200px, calc(100% - 48px));
    margin:0 auto;
    padding:84px 0 82px;
}

/* =========================================================
   FRAME
   ========================================================= */

.gsxsxhero__frame{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(101,245,47,.12);
    border-radius:30px;
    background:
        radial-gradient(circle at 71% 22%, rgba(101,245,47,.075), transparent 26%),
        radial-gradient(circle at 17% 83%, rgba(40,217,243,.026), transparent 31%),
        linear-gradient(145deg, rgba(5,17,8,.91), rgba(2,8,4,.98));
    box-shadow:
        0 30px 80px rgba(0,0,0,.27),
        inset 0 0 0 1px rgba(255,255,255,.012);
}

.gsxsxhero__frame::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:42%;
    height:2px;
    background:linear-gradient(90deg, var(--green2), var(--green), var(--cyan), transparent);
}

.gsxsxhero__frame::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:28%;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--cyan), var(--green));
}

/* =========================================================
   ESQUINAS HUD
   ========================================================= */

.gsxsxhero__corner{
    position:absolute;
    z-index:4;
    width:44px;
    height:44px;
    pointer-events:none;
}

.gsxsxhero__corner::before,
.gsxsxhero__corner::after{
    content:"";
    position:absolute;
    background:var(--green);
    opacity:.54;
    box-shadow:0 0 8px rgba(101,245,47,.18);
}

.gsxsxhero__corner::before{
    width:24px;
    height:1px;
}

.gsxsxhero__corner::after{
    width:1px;
    height:24px;
}

.gsxsxhero__corner--tl{ left:14px; top:14px; }
.gsxsxhero__corner--tr{ right:14px; top:14px; }
.gsxsxhero__corner--bl{ left:14px; bottom:14px; }
.gsxsxhero__corner--br{ right:14px; bottom:14px; }

.gsxsxhero__corner--tl::before{ left:0; top:0; }
.gsxsxhero__corner--tl::after{ left:0; top:0; }

.gsxsxhero__corner--tr::before{ right:0; top:0; }
.gsxsxhero__corner--tr::after{ right:0; top:0; }

.gsxsxhero__corner--bl::before{ left:0; bottom:0; }
.gsxsxhero__corner--bl::after{ left:0; bottom:0; }

.gsxsxhero__corner--br::before{ right:0; bottom:0; }
.gsxsxhero__corner--br::after{ right:0; bottom:0; }

/* =========================================================
   HERO PRINCIPAL
   ========================================================= */

.gsxsxhero__main{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(450px,.96fr);
    gap:44px;
    align-items:center;
    padding:58px 58px 36px;
}

/* =========================================================
   TEXTO
   ========================================================= */

.gsxsxhero__copy{
    min-width:0;
}

.gsxsxhero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    padding:7px 11px;
    border:1px solid rgba(101,245,47,.16);
    border-radius:999px;
    background:rgba(101,245,47,.028);
    color:#a1d990;
    font-size:11px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.gsxsxhero__eyebrow::before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 9px rgba(101,245,47,.62);
}

.gsxsxhero__title{
    max-width:760px;
    margin:0;
    color:var(--white);
    font-size:clamp(36px, 4.05vw, 56px);
    line-height:1.045;
    font-weight:700;
    letter-spacing:-.04em;
}

.gsxsxhero__title span{
    color:var(--green2);
    text-shadow:0 0 28px rgba(101,245,47,.10);
}

.gsxsxhero__lead{
    max-width:760px;
    margin:18px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.76;
}

.gsxsxhero__lead strong{
    color:#d8e7da;
    font-weight:600;
}

/* =========================================================
   META
   ========================================================= */

.gsxsxhero__meta{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:18px;
}

.gsxsxhero__meta-item{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 11px;
    border:1px solid rgba(40,217,243,.09);
    border-radius:999px;
    background:rgba(40,217,243,.023);
    color:#84988c;
    font-size:10px;
    line-height:1.4;
    font-weight:600;
}

/* =========================================================
   RUTA
   ========================================================= */

.gsxsxhero__route{
    position:relative;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:13px;
    align-items:center;
    margin-top:21px;
    padding:15px;
    overflow:hidden;
    border:1px solid rgba(40,217,243,.08);
    border-radius:14px;
    background:linear-gradient(135deg, rgba(40,217,243,.016), rgba(101,245,47,.018));
}

.gsxsxhero__route::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:160px;
    height:2px;
    background:linear-gradient(90deg, var(--cyan), var(--green), transparent);
}

.gsxsxhero__route-code{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin:0;
    padding:0;
    border:1px solid rgba(40,217,243,.18);
    border-radius:10px;
    color:var(--cyan);
    font-size:9px;
    line-height:1;
    font-weight:700;
    text-align:center;
}

.gsxsxhero__route-copy{
    color:#7d8e80;
    font-size:10px;
    line-height:1.62;
}

.gsxsxhero__route-copy strong{
    color:#bdcfbf;
    font-weight:600;
}

/* =========================================================
   BOTONES
   ========================================================= */

.gsxsxhero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:23px;
}

.gsxsxhero__button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:53px;
    padding:12px 18px;
    overflow:hidden;
    border-radius:11px;
    font-size:11px;
    line-height:1.35;
    font-weight:700;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.gsxsxhero__button:hover{
    transform:translateY(-2px);
}

.gsxsxhero__button:focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
}

.gsxsxhero__button--wa{
    border:1px solid rgba(138,255,84,.32);
    background:linear-gradient(135deg, #69ef31, #43c71c);
    color:#061006 !important;
    box-shadow:0 10px 25px rgba(101,245,47,.13);
}

/* WhatsApp icon is injected globally; no local pseudo-icon. */
.gsxsxhero__button--wa::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-130%) skewX(-18deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.19), transparent);
    animation:gsxsxheroShine 5.7s ease-in-out infinite;
}

@keyframes gsxsxheroShine{
    0%, 70%{ transform:translateX(-130%) skewX(-18deg); }
    88%, 100%{ transform:translateX(130%) skewX(-18deg); }
}

.gsxsxhero__button--scope{
    border:1px solid rgba(40,217,243,.15);
    background:linear-gradient(135deg, rgba(40,217,243,.045), rgba(4,15,8,.80));
    color:#a1d4d9 !important;
}

.gsxsxhero__button--scope::before{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 8px;
    border:1px solid var(--cyan);
    border-radius:2px;
    transform:rotate(45deg);
}

/* =========================================================
   MICRODATOS
   ========================================================= */

.gsxsxhero__micro{
    display:flex;
    flex-wrap:wrap;
    gap:8px 15px;
    margin-top:15px;
    color:#657568;
    font-size:9px;
    line-height:1.45;
}

.gsxsxhero__micro-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.gsxsxhero__micro-dot{
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 7px rgba(101,245,47,.43);
}

/* =========================================================
   PANEL VISUAL
   ========================================================= */

.gsxsxhero__visual{
    min-width:0;
}

.gsxsxhero__panel{
    position:relative;
    min-height:700px;
    overflow:hidden;
    border:1px solid rgba(101,245,47,.11);
    border-radius:25px;
    background:
        radial-gradient(ellipse at 52% 43%, rgba(101,245,47,.070), transparent 34%),
        radial-gradient(circle at 26% 48%, rgba(40,217,243,.026), transparent 24%),
        linear-gradient(145deg, rgba(4,17,7,.82), rgba(2,8,4,.98));
}

.gsxsxhero__panel::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.24;
    background-image:
        linear-gradient(rgba(101,245,47,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,217,243,.022) 1px, transparent 1px);
    background-size:27px 27px;
}

/* =========================================================
   CABECERA DEL PANEL
   ========================================================= */

.gsxsxhero__panel-head{
    position:absolute;
    z-index:30;
    left:18px;
    right:18px;
    top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.gsxsxhero__panel-code{
    color:#95c68b;
    font-size:9px;
    line-height:1.35;
    font-weight:700;
    text-transform:uppercase;
}

.gsxsxhero__panel-state{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#799b77;
    font-size:8px;
    line-height:1.35;
    font-weight:700;
    text-transform:uppercase;
}

.gsxsxhero__panel-state::before{
    content:"";
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 8px rgba(101,245,47,.56);
    animation:gsxsxheroState 1.8s ease-in-out infinite;
}

@keyframes gsxsxheroState{
    0%,100%{ opacity:.35; transform:scale(.8); }
    50%{ opacity:1; transform:scale(1.2); }
}

/* =========================================================
   RADAR
   ========================================================= */

.gsxsxhero__ring{
    position:absolute;
    left:50%;
    top:45%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
}

.gsxsxhero__ring--a{
    width:560px;
    height:560px;
    border:1px solid rgba(101,245,47,.07);
}

.gsxsxhero__ring--b{
    width:390px;
    height:390px;
    border:1px dashed rgba(40,217,243,.11);
}

.gsxsxhero__ring--c{
    width:240px;
    height:240px;
    border:1px solid rgba(101,245,47,.09);
}

/* =========================================================
   BARRIDO
   ========================================================= */

.gsxsxhero__sweep{
    position:absolute;
    z-index:7;
    left:50%;
    top:45%;
    width:210px;
    height:1px;
    transform-origin:0 50%;
    background:linear-gradient(90deg, rgba(40,217,243,.70), rgba(40,217,243,.08), transparent);
    box-shadow:0 0 7px rgba(40,217,243,.28);
    animation:gsxsxheroSweep 5s linear infinite;
}

.gsxsxhero__sweep::after{
    content:"";
    position:absolute;
    right:8px;
    top:-3px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px rgba(40,217,243,.72);
}

@keyframes gsxsxheroSweep{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

/* =========================================================
   PULSOS
   ========================================================= */

.gsxsxhero__pulse{
    position:absolute;
    z-index:6;
    left:50%;
    top:45%;
    width:145px;
    height:145px;
    transform:translate(-50%,-50%) scale(.7);
    border:1px solid rgba(101,245,47,.24);
    border-radius:50%;
    opacity:0;
    animation:gsxsxheroPulse 3.5s ease-out infinite;
}

.gsxsxhero__pulse--b{
    animation-delay:1.15s;
    border-color:rgba(40,217,243,.22);
}

.gsxsxhero__pulse--c{
    animation-delay:2.3s;
    border-color:rgba(139,104,255,.18);
}

@keyframes gsxsxheroPulse{
    0%{
        opacity:.66;
        transform:translate(-50%,-50%) scale(.7);
    }
    82%{
        opacity:.03;
        transform:translate(-50%,-50%) scale(2.35);
    }
    100%{
        opacity:0;
        transform:translate(-50%,-50%) scale(2.44);
    }
}

/* =========================================================
   IMAGEN
   ========================================================= */

.gsxsxhero__image-stage{
    position:absolute;
    z-index:11;
    left:50%;
    top:45%;
    width:92%;
    max-width:640px;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.gsxsxhero__image-stage::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:8%;
    bottom:10%;
    border:1px solid rgba(101,245,47,.10);
    border-radius:28px;
    background:
        radial-gradient(circle at 31% 55%, rgba(40,217,243,.055), transparent 28%),
        radial-gradient(circle at 71% 44%, rgba(101,245,47,.075), transparent 29%);
    box-shadow:
        0 0 28px rgba(101,245,47,.038),
        inset 0 0 22px rgba(40,217,243,.016);
}

.gsxsxhero__image-stage::after{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    bottom:2%;
    height:15%;
    border-radius:50%;
    background:
        radial-gradient(
            ellipse,
            rgba(101,245,47,.15),
            rgba(40,217,243,.04) 46%,
            transparent 73%
        );
    filter:blur(16px);
}

.gsxsxhero__image{
    position:relative;
    z-index:4;
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    filter:
        drop-shadow(0 0 14px rgba(101,245,47,.075))
        drop-shadow(0 0 9px rgba(40,217,243,.03))
        drop-shadow(0 18px 30px rgba(0,0,0,.34));
    animation:gsxsxheroFloat 6.3s ease-in-out infinite;
}

@keyframes gsxsxheroFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

/* =========================================================
   ETIQUETAS DE MODELO
   ========================================================= */

.gsxsxhero__model-tag{
    position:absolute;
    z-index:15;
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:999px;
    background:rgba(2,10,4,.86);
    box-shadow:0 8px 18px rgba(0,0,0,.16);
    color:#a8b6aa;
    font-size:8px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:.04em;
}

.gsxsxhero__model-tag::before{
    content:"";
    width:5px;
    height:5px;
    flex:0 0 5px;
    margin-right:6px;
    border-radius:50%;
}

.gsxsxhero__model-tag--s{
    left:11%;
    top:24%;
    color:#9bcfd8;
    border-color:rgba(40,217,243,.12);
}

.gsxsxhero__model-tag--s::before{
    background:var(--cyan);
    box-shadow:0 0 7px rgba(40,217,243,.45);
}

.gsxsxhero__model-tag--x{
    right:15%;
    top:14%;
    color:#a9d99b;
    border-color:rgba(101,245,47,.13);
}

.gsxsxhero__model-tag--x::before{
    background:var(--green);
    box-shadow:0 0 7px rgba(101,245,47,.45);
}

/* =========================================================
   CONTENEDOR DE LLAMADAS
   ========================================================= */

.gsxsxhero__callouts{
    position:absolute;
    z-index:20;
    inset:0;
    pointer-events:none;
}

/* =========================================================
   CAJAS HUD
   ========================================================= */

.gsxsxhero__callout{
    --callout-color:var(--green);
    position:absolute;
    width:182px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:13px;
    background:rgba(2,10,4,.91);
    box-shadow:0 12px 25px rgba(0,0,0,.18);
    backdrop-filter:blur(5px);
}

.gsxsxhero__callout::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:2px;
    background:linear-gradient(180deg, transparent, var(--callout-color), transparent);
}

.gsxsxhero__callout-label{
    display:block;
    margin-bottom:3px;
    color:var(--callout-color);
    font-size:9px;
    line-height:1.35;
    font-weight:700;
    text-transform:uppercase;
}

.gsxsxhero__callout-title{
    display:block;
    color:#e8f3e9;
    font-size:11px;
    line-height:1.4;
    font-weight:700;
}

.gsxsxhero__callout-copy{
    display:block;
    margin-top:3px;
    color:#748276;
    font-size:8px;
    line-height:1.45;
}

/* =========================================================
   POSICIÓN DE CAJAS
   ========================================================= */

.gsxsxhero__callout--power{
    --callout-color:var(--green);
    left:22px;
    top:96px;
}

.gsxsxhero__callout--video{
    --callout-color:var(--cyan);
    right:22px;
    top:96px;
}

.gsxsxhero__callout--thermal{
    --callout-color:var(--yellow);
    left:22px;
    top:430px;
}

.gsxsxhero__callout--storage{
    --callout-color:var(--violet);
    right:22px;
    top:430px;
}

.gsxsxhero__callout--diagnosis{
    --callout-color:var(--green2);
    left:50%;
    bottom:54px;
    width:226px;
    transform:translateX(-50%);
    text-align:center;
}

.gsxsxhero__callout--diagnosis::before{
    display:none;
}

/* =========================================================
   CONECTORES
   ========================================================= */

.gsxsxhero__connector{
    --line-color:var(--green);
    position:absolute;
    z-index:16;
    height:1px;
    background:linear-gradient(90deg, var(--line-color), rgba(255,255,255,.08));
    box-shadow:0 0 6px rgba(101,245,47,.12);
    transform-origin:left center;
    pointer-events:none;
}

.gsxsxhero__connector::after{
    content:"";
    position:absolute;
    right:-5px;
    top:-4px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--line-color);
    box-shadow:0 0 10px var(--line-color);
}

.gsxsxhero__connector--power{
    --line-color:var(--green);
    left:202px;
    top:150px;
    width:148px;
    transform:rotate(9deg);
}

.gsxsxhero__connector--video{
    --line-color:var(--cyan);
    right:203px;
    top:150px;
    width:146px;
    transform-origin:right center;
    transform:rotate(-9deg);
    background:linear-gradient(90deg, rgba(255,255,255,.08), var(--line-color));
}

.gsxsxhero__connector--video::after{
    left:-5px;
    right:auto;
}

.gsxsxhero__connector--thermal{
    --line-color:var(--yellow);
    left:203px;
    top:478px;
    width:162px;
    transform:rotate(-4deg);
}

.gsxsxhero__connector--storage{
    --line-color:var(--violet);
    right:203px;
    top:478px;
    width:164px;
    transform-origin:right center;
    transform:rotate(4deg);
    background:linear-gradient(90deg, rgba(255,255,255,.08), var(--line-color));
}

.gsxsxhero__connector--storage::after{
    left:-5px;
    right:auto;
}

.gsxsxhero__connector--diagnosis{
    --line-color:var(--green2);
    left:50%;
    bottom:136px;
    width:1px;
    height:52px;
    transform:none;
    background:linear-gradient(180deg, var(--line-color), rgba(255,255,255,.07));
}

.gsxsxhero__connector--diagnosis::after{
    left:-4px;
    right:auto;
    top:-5px;
}

/* =========================================================
   PIE DEL PANEL
   ========================================================= */

.gsxsxhero__panel-foot{
    position:absolute;
    z-index:28;
    left:17px;
    right:17px;
    bottom:13px;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 11px;
    border:1px solid rgba(101,245,47,.075);
    border-radius:9px;
    background:rgba(2,9,4,.94);
    color:#6e7c70;
    font-size:8px;
    line-height:1.45;
    font-weight:700;
    text-align:center;
    text-transform:uppercase;
}

.gsxsxhero__panel-foot b{
    color:var(--green2);
}

/* =========================================================
   DATOS INFERIORES
   ========================================================= */

.gsxsxhero__facts{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    padding:0 58px 38px;
}

.gsxsxhero__fact{
    --fact-color:var(--green);
    position:relative;
    min-width:0;
    padding:16px 13px;
    overflow:hidden;
    border:1px solid rgba(101,245,47,.06);
    border-radius:12px;
    background:rgba(3,11,6,.50);
}

.gsxsxhero__fact:nth-child(2){ --fact-color:var(--cyan); }
.gsxsxhero__fact:nth-child(3){ --fact-color:var(--violet); }
.gsxsxhero__fact:nth-child(4){ --fact-color:var(--yellow); }

.gsxsxhero__fact::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:68px;
    height:2px;
    background:linear-gradient(90deg, var(--fact-color), transparent);
}

.gsxsxhero__fact-code{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin-bottom:9px;
    padding:0;
    border:1px solid var(--fact-color);
    border-radius:8px;
    color:var(--fact-color);
    font-size:8px;
    line-height:1;
    font-weight:700;
    text-align:center;
}

.gsxsxhero__fact strong{
    display:block;
    margin-bottom:4px;
    color:#e3eee4;
    font-size:10px;
    line-height:1.4;
    font-weight:700;
}

.gsxsxhero__fact p{
    margin:0;
    color:#707f72;
    font-size:9px;
    line-height:1.55;
}

/* =========================================================
   FOOTER HUD
   ========================================================= */

.gsxsxhero__footer{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 58px 17px;
    border-top:1px solid rgba(101,245,47,.055);
    background:rgba(2,8,4,.48);
    color:#536254;
    font-size:9px;
    line-height:1.45;
    font-weight:600;
    text-transform:uppercase;
}

.gsxsxhero__footer-state{
    display:flex;
    align-items:center;
    gap:6px;
    color:#647665;
}

.gsxsxhero__footer-state::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 7px rgba(101,245,47,.48);
}

/* =========================================================
   LAPTOP / TABLET GRANDE
   ========================================================= */

@media (max-width:1180px){

    .gsxsxhero__shell{
        width:min(calc(100% - 40px), 1040px);
    }

    .gsxsxhero__main{
        grid-template-columns:minmax(0,1fr);
        gap:32px;
        padding:50px 42px 34px;
    }

    .gsxsxhero__copy{
        max-width:900px;
    }

    .gsxsxhero__visual{
        width:100%;
    }

    .gsxsxhero__panel{
        min-height:700px;
    }

    .gsxsxhero__image-stage{
        width:78%;
        max-width:610px;
        top:45%;
    }

    .gsxsxhero__facts{
        padding:0 42px 34px;
    }

    .gsxsxhero__footer{
        padding:14px 42px 17px;
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

    .gsxsxhero__shell{
        padding:72px 0 74px;
    }

    .gsxsxhero__facts{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxhero__grid{
        opacity:.15;
        background-size:32px 32px;
    }

    .gsxsxhero__scan,
    .gsxsxhero__orbit-a,
    .gsxsxhero__orbit-b{
        display:none;
    }

    .gsxsxhero__shell{
        width:calc(100% - 30px);
        padding:60px 0 62px;
    }

    .gsxsxhero__frame{
        border-radius:21px;
    }

    .gsxsxhero__main{
        padding:34px 18px 27px;
    }

    .gsxsxhero__title{
        font-size:clamp(30px, 8.8vw, 41px);
    }

    .gsxsxhero__lead{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxhero__route{
        grid-template-columns:minmax(0,1fr);
    }

    .gsxsxhero__actions{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        width:100%;
    }

    .gsxsxhero__button{
        width:100%;
    }

    .gsxsxhero__micro{
        display:grid;
        grid-template-columns:minmax(0,1fr);
    }

    .gsxsxhero__panel{
        min-height:910px;
    }

    .gsxsxhero__panel-head{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .gsxsxhero__ring{
        top:29%;
    }

    .gsxsxhero__ring--a{
        width:370px;
        height:370px;
    }

    .gsxsxhero__ring--b{
        width:270px;
        height:270px;
    }

    .gsxsxhero__ring--c{
        width:170px;
        height:170px;
    }

    .gsxsxhero__sweep,
    .gsxsxhero__pulse{
        top:29%;
    }

    .gsxsxhero__sweep{
        width:165px;
    }

    .gsxsxhero__image-stage{
        top:29%;
        width:112%;
        max-width:none;
    }

    .gsxsxhero__model-tag{
        display:none;
    }

    .gsxsxhero__connector{
        display:none;
    }

    .gsxsxhero__callouts{
        left:14px;
        right:14px;
        top:auto;
        bottom:60px;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .gsxsxhero__callout{
        position:relative;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        width:auto !important;
        transform:none !important;
        min-height:72px;
        backdrop-filter:none;
    }

    .gsxsxhero__callout--diagnosis{
        grid-column:1 / -1;
        text-align:left;
    }

    .gsxsxhero__callout--diagnosis::before{
        display:block;
    }

    .gsxsxhero__panel-foot{
        bottom:13px;
    }

    .gsxsxhero__facts{
        grid-template-columns:minmax(0,1fr);
        padding:0 18px 28px;
    }

    .gsxsxhero__footer{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        padding:13px 18px 16px;
    }
}

/* =========================================================
   MÓVIL ESTRECHO
   ========================================================= */

@media (max-width:480px){

    .gsxsxhero__panel{
        min-height:1020px;
    }

    .gsxsxhero__image-stage{
        top:27%;
        width:118%;
    }

    .gsxsxhero__ring,
    .gsxsxhero__sweep,
    .gsxsxhero__pulse{
        top:27%;
    }

    .gsxsxhero__callouts{
        grid-template-columns:minmax(0,1fr);
        bottom:60px;
    }

    .gsxsxhero__callout--diagnosis{
        grid-column:auto;
    }
}

/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxhero__shell{
        width:calc(100% - 24px);
    }

    .gsxsxhero__main{
        padding:30px 14px 24px;
    }

    .gsxsxhero__panel{
        min-height:1050px;
    }

    .gsxsxhero__image-stage{
        width:122%;
    }

    .gsxsxhero__facts{
        padding:0 14px 24px;
    }

    .gsxsxhero__footer{
        padding:12px 14px 14px;
    }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxhero *,
    .gsxsxhero *::before,
    .gsxsxhero *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxhero__scan,
    .gsxsxhero__orbit-a,
    .gsxsxhero__orbit-b{
        display:none !important;
    }
}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — MODELOS Y ALCANCE
   CSS ID EXTERIOR: modelos-alcance-xbox-series-x
   ROOT: .gsxsxmod
   ========================================================= */

.gsxsxmod{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9d43;
    --red:#ff6277;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#88998b;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 11% 11%,
            rgba(101,245,47,.065),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 17%,
            rgba(41,217,239,.033),
            transparent 29%
        ),
        radial-gradient(
            circle at 72% 85%,
            rgba(139,105,255,.023),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxmod *,
.gsxsxmod *::before,
.gsxsxmod *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxmod__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.21;

    background-image:
        linear-gradient(
            rgba(101,245,47,.034) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.034) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxmod__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxmod__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxmod__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,245,47,.13),
            rgba(41,217,239,.12),
            transparent
        );

    box-shadow:
        0 0 14px rgba(101,245,47,.08);

    animation:
        gsxsxmodScan
        13s linear infinite;
}

@keyframes gsxsxmodScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(5600px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxmod__orbit{
    position:absolute;

    width:760px;
    height:760px;

    right:-435px;
    top:980px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.033);

    border-radius:50%;

    animation:
        gsxsxmodOrbit
        70s linear infinite;
}

.gsxsxmod__orbit::before{
    content:"";

    position:absolute;
    inset:120px;

    border:
        1px dashed rgba(41,217,239,.035);

    border-radius:50%;
}

.gsxsxmod__orbit::after{
    content:"";

    position:absolute;
    inset:230px;

    border:
        1px solid rgba(139,105,255,.025);

    border-radius:50%;
}

@keyframes gsxsxmodOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxmod__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxmod__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxmod__heading-main{
    min-width:0;
}

.gsxsxmod__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#a0d58f;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxmod__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxmod__title{
    max-width:1000px;

    margin:0;

    color:
        var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxmod__title span{
    color:
        var(--green2);
}

.gsxsxmod__intro{
    max-width:940px;

    margin:
        16px 0 0;

    color:
        var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxmod__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(101,245,47,.02),
            rgba(4,13,7,.92)
        );
}

.gsxsxmod__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--green),
            transparent
        );
}

.gsxsxmod__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#9ac98d;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.52);
}

.gsxsxmod__status p{
    margin:0;

    color:#7c8c7e;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxmod__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.018),
            rgba(101,245,47,.02)
        );
}

.gsxsxmod__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxmod__principle-code{
    display:grid;
    place-items:center;

    width:58px;
    height:58px;

    margin:0;
    padding:0;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:
        var(--cyan);

    font-size:10px;
    line-height:1;
    font-weight:700;

    text-align:center;
}

.gsxsxmod__principle-copy{
    min-width:0;
}

.gsxsxmod__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxmod__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxmod__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#91bb85;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxmod__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxmod__section-label{
    display:block;

    margin-bottom:6px;

    color:#99d089;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxmod__section-copy{
    max-width:870px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxmod__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8db581;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   MODELOS
   ========================================================= */

.gsxsxmod__models{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(101,245,47,.028),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(6,18,8,.67),
            rgba(2,8,4,.97)
        );
}

.gsxsxmod__models::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxmod__models-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:11px;
}

.gsxsxmod__model{
    --model-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        19px 17px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.065);

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(101,245,47,.018),
            rgba(2,9,5,.88)
        );
}

.gsxsxmod__model:nth-child(2){
    --model-color:var(--cyan);

    border-color:
        rgba(41,217,239,.065);
}

.gsxsxmod__model:nth-child(3){
    --model-color:var(--violet);

    border-color:
        rgba(139,105,255,.065);
}

.gsxsxmod__model:nth-child(4){
    --model-color:var(--yellow);

    border-color:
        rgba(255,200,87,.065);
}

.gsxsxmod__model:nth-child(5){
    --model-color:var(--blue);

    border-color:
        rgba(75,142,255,.065);
}

.gsxsxmod__model::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:90px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--model-color),
            transparent
        );
}

.gsxsxmod__model-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:9px;

    margin-bottom:13px;
}

.gsxsxmod__model-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--model-color);

    border-radius:11px;

    color:
        var(--model-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxmod__model-badge{
    display:inline-flex;
    align-items:center;

    padding:
        5px 7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--model-color) 16%,
            transparent
        );

    border-radius:999px;

    color:
        var(--model-color);

    font-size:8px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__model h4{
    margin:0;

    color:#e4eee5;

    font-size:15px;
    line-height:1.42;
    font-weight:700;
}

.gsxsxmod__model-sub{
    display:block;

    margin-top:4px;

    color:
        var(--model-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__model p{
    margin:
        10px 0 0;

    color:#748477;

    font-size:10px;
    line-height:1.62;
}

.gsxsxmod__model-data{
    display:grid;

    gap:6px;

    margin-top:14px;
}

.gsxsxmod__model-row{
    display:grid;

    grid-template-columns:
        78px minmax(0,1fr);

    gap:8px;

    padding-top:6px;

    border-top:
        1px solid rgba(255,255,255,.035);

    font-size:9px;
    line-height:1.5;
}

.gsxsxmod__model-row strong{
    color:#718074;
    font-weight:600;
}

.gsxsxmod__model-row span{
    color:#91a093;
}


/* =========================================================
   SERIES S — DISTINCIÓN
   ========================================================= */

.gsxsxmod__series-s{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-top:13px;

    padding:16px;

    border:
        1px solid rgba(255,200,87,.075);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.014),
            rgba(101,245,47,.01)
        );
}

.gsxsxmod__series-s-code{
    display:grid;
    place-items:center;

    width:44px;
    height:44px;

    margin:0;
    padding:0;

    border:
        1px solid rgba(255,200,87,.15);

    border-radius:9px;

    color:
        var(--yellow);

    font-size:8px;
    line-height:1;
    font-weight:700;

    text-align:center;
}

.gsxsxmod__series-s-copy{
    min-width:0;

    color:#7e7b69;

    font-size:10px;
    line-height:1.6;
}

.gsxsxmod__series-s-copy strong{
    color:#cbbd91;
    font-weight:600;
}

.gsxsxmod__series-s-state{
    flex-shrink:0;

    color:#a69769;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   ARQUITECTURA DISCO / DIGITAL
   ========================================================= */

.gsxsxmod__architecture{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:18px;

    margin-bottom:18px;
}

.gsxsxmod__architecture-card{
    --arch-color:var(--green);

    position:relative;

    min-width:0;

    min-height:320px;

    padding:22px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(6,18,8,.60),
            rgba(2,8,4,.97)
        );
}

.gsxsxmod__architecture-card--digital{
    --arch-color:var(--cyan);

    border-color:
        rgba(41,217,239,.08);
}

.gsxsxmod__architecture-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:170px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--arch-color),
            transparent
        );
}

.gsxsxmod__arch-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:12px;

    margin-bottom:17px;
}

.gsxsxmod__arch-head-main{
    min-width:0;
}

.gsxsxmod__arch-label{
    display:block;

    margin-bottom:5px;

    color:
        var(--arch-color);

    font-size:9px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__arch-title{
    margin:0;

    color:#dfece1;

    font-size:18px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxmod__arch-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:48px;
    height:48px;

    flex:0 0 48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--arch-color);

    border-radius:50%;

    color:
        var(--arch-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxmod__arch-chain{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:6px;

    margin-bottom:15px;
}

.gsxsxmod__arch-node{
    min-width:0;

    padding:
        10px 7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--arch-color) 10%,
            transparent
        );

    border-radius:8px;

    background:
        rgba(3,11,6,.42);

    color:
        var(--arch-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxmod__arch-copy{
    margin:0;

    color:#738376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxmod__arch-copy strong{
    color:#bfcdc0;
    font-weight:600;
}

.gsxsxmod__arch-state{
    display:inline-flex;
    align-items:center;

    margin-top:14px;

    padding:
        6px 8px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--arch-color) 14%,
            transparent
        );

    border-radius:8px;

    color:
        var(--arch-color);

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   ALCANCE
   ========================================================= */

.gsxsxmod__scope{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.075);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(139,105,255,.014),
            rgba(2,8,4,.97)
        );
}

.gsxsxmod__scope::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--green),
            transparent
        );
}

.gsxsxmod__scope-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:8px;

    margin-top:17px;
}

.gsxsxmod__scope-card{
    --scope-color:var(--green);

    min-width:0;

    padding:
        15px 12px;

    border:
        1px solid rgba(101,245,47,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.43);
}

.gsxsxmod__scope-card:nth-child(2){
    --scope-color:var(--cyan);
}

.gsxsxmod__scope-card:nth-child(3){
    --scope-color:var(--yellow);
}

.gsxsxmod__scope-card:nth-child(4){
    --scope-color:var(--violet);
}

.gsxsxmod__scope-card:nth-child(5){
    --scope-color:var(--blue);
}

.gsxsxmod__scope-card:nth-child(6){
    --scope-color:var(--green2);
}

.gsxsxmod__scope-card:nth-child(7){
    --scope-color:var(--orange);
}

.gsxsxmod__scope-card:nth-child(8){
    --scope-color:var(--red);
}

.gsxsxmod__scope-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:36px;
    height:36px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--scope-color);

    border-radius:8px;

    color:
        var(--scope-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxmod__scope-card strong{
    display:block;

    margin-bottom:4px;

    color:
        var(--scope-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__scope-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.53;
}


/* =========================================================
   FILTRO DE COTIZACIÓN
   ========================================================= */

.gsxsxmod__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.095);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(255,200,87,.045),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.37),
            rgba(2,8,4,.97)
        );
}

.gsxsxmod__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:230px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green),
            transparent
        );
}


/* =========================================================
   FILTRO HEADER
   ========================================================= */

.gsxsxmod__filter-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:18px;

    align-items:start;

    margin-bottom:21px;
}

.gsxsxmod__filter-kicker{
    display:block;

    margin-bottom:6px;

    color:#d2b969;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__filter-title{
    max-width:830px;

    margin:0;

    color:#eef6e9;

    font-size:
        clamp(
            23px,
            3vw,
            32px
        );

    line-height:1.25;
    font-weight:700;

    letter-spacing:-.02em;
}

.gsxsxmod__filter-copy{
    max-width:850px;

    margin:
        9px 0 0;

    color:#847f6d;

    font-size:11px;
    line-height:1.68;
}

.gsxsxmod__filter-status{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,200,87,.13);

    border-radius:999px;

    color:#baa56c;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__filter-status::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}


/* =========================================================
   ÁRBOL DE DECISIÓN
   ========================================================= */

.gsxsxmod__decision{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;

    margin-bottom:15px;
}

.gsxsxmod__decision::before{
    content:"";

    position:absolute;

    left:10%;
    right:10%;
    top:39px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            var(--red),
            var(--green)
        );

    opacity:.20;
}

.gsxsxmod__decision-card{
    --decision-color:var(--cyan);

    position:relative;
    z-index:2;

    min-width:0;

    min-height:154px;

    padding:
        15px 12px;

    border:
        1px solid rgba(41,217,239,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.88);

    text-align:center;
}

.gsxsxmod__decision-card:nth-child(2){
    --decision-color:var(--yellow);
}

.gsxsxmod__decision-card:nth-child(3){
    --decision-color:var(--red);
}

.gsxsxmod__decision-card:nth-child(4){
    --decision-color:var(--green);
}

.gsxsxmod__decision-circle{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 10px;

    padding:0 !important;

    border:
        1px solid var(--decision-color);

    border-radius:50%;

    background:
        rgba(2,8,4,.98);

    color:
        var(--decision-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--decision-color) 10%,
            transparent
        );
}

.gsxsxmod__decision-card strong{
    display:block;

    margin-bottom:4px;

    color:
        var(--decision-color);

    font-size:9px;
    line-height:1.42;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__decision-copy{
    display:block;

    color:#716f61;

    font-size:9px;
    line-height:1.5;
}


/* =========================================================
   INDICADOR ANIMADO DE RUTA
   ========================================================= */

.gsxsxmod__decision-token{
    position:absolute;
    z-index:4;

    left:10%;
    top:36px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.75);

    animation:
        gsxsxmodDecisionToken
        6.5s ease-in-out infinite;
}

@keyframes gsxsxmodDecisionToken{

    0%{
        left:10%;
        background:var(--cyan);
        opacity:0;
    }

    8%{
        opacity:1;
    }

    32%{
        left:36%;
        background:var(--yellow);
    }

    59%{
        left:63%;
        background:var(--red);
    }

    88%{
        left:89%;
        background:var(--green);
        opacity:1;
    }

    100%{
        left:89%;
        opacity:0;
    }

}


/* =========================================================
   DOS COLUMNAS FILTRO
   ========================================================= */

.gsxsxmod__filter-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);

    gap:12px;
}

.gsxsxmod__remote,
.gsxsxmod__physical{
    --filter-color:var(--cyan);

    position:relative;

    min-width:0;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.07);

    border-radius:14px;

    background:
        rgba(3,11,6,.48);
}

.gsxsxmod__physical{
    --filter-color:var(--yellow);

    border-color:
        rgba(255,200,87,.08);
}

.gsxsxmod__remote::before,
.gsxsxmod__physical::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:110px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--filter-color),
            transparent
        );
}

.gsxsxmod__filter-card-head{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:13px;
}

.gsxsxmod__filter-card-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:42px;
    height:42px;

    flex:0 0 42px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:9px;

    color:
        var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxmod__filter-card-title{
    min-width:0;
}

.gsxsxmod__filter-card-title strong{
    display:block;

    color:
        var(--filter-color);

    font-size:10px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__filter-card-title span{
    display:block;

    margin-top:3px;

    color:#717d72;

    font-size:9px;
    line-height:1.45;
}

.gsxsxmod__filter-list{
    display:grid;

    gap:7px;
}

.gsxsxmod__filter-point{
    display:grid;

    grid-template-columns:
        7px minmax(0,1fr);

    gap:9px;

    align-items:start;

    color:#747f74;

    font-size:10px;
    line-height:1.54;
}

.gsxsxmod__filter-point::before{
    content:"";

    width:6px;
    height:6px;

    margin-top:5px;

    border-radius:50%;

    background:
        var(--filter-color);

    box-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--filter-color) 40%,
            transparent
        );
}


/* =========================================================
   SÍNTOMAS QUE REQUIEREN EQUIPO
   ========================================================= */

.gsxsxmod__physical-tags{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:13px;
}

.gsxsxmod__physical-tag{
    display:inline-flex;
    align-items:center;

    min-height:29px;

    padding:
        5px 8px;

    border:
        1px solid rgba(255,200,87,.065);

    border-radius:7px;

    background:
        rgba(12,10,3,.42);

    color:#a8986c;

    font-size:8px;
    line-height:1.35;
    font-weight:600;
}


/* =========================================================
   MENSAJE PRINCIPAL DEL FILTRO
   ========================================================= */

.gsxsxmod__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-top:13px;

    padding:16px;

    border:
        1px solid rgba(255,98,119,.085);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,98,119,.016),
            rgba(255,200,87,.012)
        );
}

.gsxsxmod__filter-result-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:46px;
    height:46px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,98,119,.18);

    border-radius:10px;

    color:
        var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxmod__filter-result-copy{
    min-width:0;

    color:#837679;

    font-size:10px;
    line-height:1.62;
}

.gsxsxmod__filter-result-copy strong{
    color:#d3b9b8;
    font-weight:600;
}

.gsxsxmod__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,98,119,.09);

    border-radius:8px;

    color:#b68a91;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   LÍMITES DEL ALCANCE
   ========================================================= */

.gsxsxmod__limits{
    position:relative;

    margin-bottom:18px;

    padding:22px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.075);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(101,245,47,.012),
            rgba(2,8,4,.97)
        );
}

.gsxsxmod__limits::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:175px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxmod__limits-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;

    margin-top:16px;
}

.gsxsxmod__limit{
    --limit-color:var(--cyan);

    min-width:0;

    padding:
        15px 13px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.43);
}

.gsxsxmod__limit:nth-child(2){
    --limit-color:var(--yellow);
}

.gsxsxmod__limit:nth-child(3){
    --limit-color:var(--violet);
}

.gsxsxmod__limit:nth-child(4){
    --limit-color:var(--green);
}

.gsxsxmod__limit strong{
    display:block;

    margin-bottom:4px;

    color:
        var(--limit-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxmod__limit span{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxmod__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(6,18,8,.88),
            rgba(2,7,3,.98)
        );
}

.gsxsxmod__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxmod__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxmod__terminal-dots span{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxmod__terminal-dots span:nth-child(1){
    background:
        var(--red);
}

.gsxsxmod__terminal-dots span:nth-child(2){
    background:
        var(--yellow);
}

.gsxsxmod__terminal-dots span:nth-child(3){
    background:
        var(--green);
}

.gsxsxmod__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxmod__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxmod__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxmod__terminal-route span{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxmod__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxmod__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxmod__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxmod__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxmod__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxmod__scope-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .gsxsxmod__limits-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxmod__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxmod__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxmod__status{
        max-width:650px;
    }

    .gsxsxmod__models-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxmod__architecture{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxmod__filter-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxmod__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxmod__scan,
    .gsxsxmod__orbit{
        display:none;
    }

    .gsxsxmod__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxmod__heading{
        display:block;
    }

    .gsxsxmod__status{
        margin-top:19px;
    }

    .gsxsxmod__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxmod__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxmod__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxmod__principle-state{
        width:fit-content;
    }

    .gsxsxmod__models,
    .gsxsxmod__scope,
    .gsxsxmod__filter,
    .gsxsxmod__limits{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxmod__section-head,
    .gsxsxmod__filter-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxmod__section-state,
    .gsxsxmod__filter-status{
        width:fit-content;
    }

    .gsxsxmod__series-s{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxmod__series-s-state{
        width:fit-content;
    }

    .gsxsxmod__scope-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxmod__decision{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxmod__decision::before,
    .gsxsxmod__decision-token{
        display:none;
    }

    .gsxsxmod__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxmod__filter-result-state{
        width:fit-content;
    }

    .gsxsxmod__limits-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxmod__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxmod__terminal-state{
        width:fit-content;
    }

    .gsxsxmod__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxmod__scope-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxmod__decision{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxmod__arch-chain{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxmod__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxmod__model-row{
        grid-template-columns:
            minmax(0,1fr);

        gap:2px;
    }

    .gsxsxmod__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxmod__terminal-route span{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxmod *,
    .gsxsxmod *::before,
    .gsxsxmod *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxmod__scan,
    .gsxsxmod__orbit,
    .gsxsxmod__decision-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — FALLAS Y SÍNTOMAS
   CSS ID EXTERIOR: fallas-xbox-series-x
   ROOT: .gsxsxfail
   ========================================================= */

.gsxsxfail{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(101,245,47,.065),
            transparent 29%
        ),
        radial-gradient(
            circle at 90% 18%,
            rgba(41,217,239,.034),
            transparent 29%
        ),
        radial-gradient(
            circle at 73% 84%,
            rgba(139,105,255,.025),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxfail *,
.gsxsxfail *::before,
.gsxsxfail *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxfail__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.034) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.034) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxfail__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxfail__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxfail__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,245,47,.13),
            rgba(41,217,239,.11),
            rgba(139,105,255,.08),
            transparent
        );

    box-shadow:
        0 0 14px rgba(101,245,47,.08);

    animation:
        gsxsxfailScan
        13s linear infinite;
}

@keyframes gsxsxfailScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(6800px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxfail__orbit{
    position:absolute;

    width:800px;
    height:800px;

    left:-465px;
    top:1100px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.032);

    border-radius:50%;

    animation:
        gsxsxfailOrbit
        76s linear infinite;
}

.gsxsxfail__orbit::before{
    content:"";

    position:absolute;
    inset:125px;

    border:
        1px dashed rgba(41,217,239,.035);

    border-radius:50%;
}

.gsxsxfail__orbit::after{
    content:"";

    position:absolute;
    inset:245px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxfailOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxfail__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxfail__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxfail__heading-main{
    min-width:0;
}

.gsxsxfail__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9ed58d;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxfail__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxfail__title{
    max-width:1020px;

    margin:0;

    color:
        var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxfail__title span{
    color:
        var(--green2);
}

.gsxsxfail__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:
        var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxfail__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.105);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxfail__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxfail__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c3ac71;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}

.gsxsxfail__status p{
    margin:0;

    color:#847f6d;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxfail__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.018),
            rgba(101,245,47,.018)
        );
}

.gsxsxfail__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxfail__principle-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:
        var(--cyan);

    font-size:10px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__principle-copy{
    min-width:0;
}

.gsxsxfail__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxfail__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxfail__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#91bb85;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxfail__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxfail__section-label{
    display:block;

    margin-bottom:6px;

    color:#99cf89;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxfail__section-copy{
    max-width:890px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxfail__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8db581;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FILTRO RÁPIDO
   ========================================================= */

.gsxsxfail__filter{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.095);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            rgba(17,14,4,.36),
            rgba(2,8,4,.97)
        );
}

.gsxsxfail__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green),
            transparent
        );
}

.gsxsxfail__filter-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.gsxsxfail__filter-card{
    --filter-color:var(--cyan);

    position:relative;

    min-width:0;

    padding:
        17px 15px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.055);

    border-radius:12px;

    background:
        rgba(3,11,6,.58);
}

.gsxsxfail__filter-card:nth-child(2){
    --filter-color:var(--yellow);
}

.gsxsxfail__filter-card:nth-child(3){
    --filter-color:var(--green);
}

.gsxsxfail__filter-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:85px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--filter-color),
            transparent
        );
}

.gsxsxfail__filter-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:42px;
    height:42px;

    margin-bottom:10px;
    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:9px;

    color:
        var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__filter-card strong{
    display:block;

    margin-bottom:5px;

    color:
        var(--filter-color);

    font-size:10px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__filter-copy{
    display:block;

    color:#727f74;

    font-size:9px;
    line-height:1.56;
}


/* =========================================================
   FAMILIAS
   ========================================================= */

.gsxsxfail__families{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:8px;

    margin-bottom:18px;
}

.gsxsxfail__family{
    --family-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        14px 11px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.055);

    border-radius:10px;

    background:
        rgba(3,11,6,.46);

    text-align:center;
}

.gsxsxfail__family:nth-child(2){
    --family-color:var(--cyan);
}

.gsxsxfail__family:nth-child(3){
    --family-color:var(--yellow);
}

.gsxsxfail__family:nth-child(4){
    --family-color:var(--violet);
}

.gsxsxfail__family:nth-child(5){
    --family-color:var(--blue);
}

.gsxsxfail__family:nth-child(6){
    --family-color:var(--green2);
}

.gsxsxfail__family:nth-child(7){
    --family-color:var(--orange);
}

.gsxsxfail__family:nth-child(8){
    --family-color:var(--red);
}

.gsxsxfail__family::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:55px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--family-color),
            transparent
        );
}

.gsxsxfail__family-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:38px;
    height:38px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--family-color);

    border-radius:9px;

    color:
        var(--family-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__family strong{
    display:block;

    color:
        var(--family-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__family-copy{
    display:block;

    margin-top:3px;

    color:#68796c;

    font-size:8px;
    line-height:1.45;
}


/* =========================================================
   SÍNTOMAS
   ========================================================= */

.gsxsxfail__symptoms{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 7%,
            rgba(101,245,47,.025),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(6,18,8,.64),
            rgba(2,8,4,.97)
        );
}

.gsxsxfail__symptoms::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxfail__symptoms-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}


/* =========================================================
   TARJETA SÍNTOMA
   ========================================================= */

.gsxsxfail__symptom{
    --sym-color:var(--green);

    position:relative;

    min-width:0;

    min-height:180px;

    padding:
        15px 13px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.055);

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            rgba(5,15,7,.58),
            rgba(2,9,5,.90)
        );
}

.gsxsxfail__symptom[data-family="video"]{
    --sym-color:var(--cyan);
}

.gsxsxfail__symptom[data-family="termico"]{
    --sym-color:var(--yellow);
}

.gsxsxfail__symptom[data-family="sistema"]{
    --sym-color:var(--violet);
}

.gsxsxfail__symptom[data-family="almacenamiento"]{
    --sym-color:var(--blue);
}

.gsxsxfail__symptom[data-family="lector"]{
    --sym-color:var(--green2);
}

.gsxsxfail__symptom[data-family="conectividad"]{
    --sym-color:var(--orange);
}

.gsxsxfail__symptom[data-family="antecedentes"]{
    --sym-color:var(--red);
}

.gsxsxfail__symptom::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:72px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sym-color),
            transparent
        );
}

.gsxsxfail__symptom-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    margin-bottom:10px;
}

.gsxsxfail__symptom-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:34px;
    height:34px;

    flex:0 0 34px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--sym-color);

    border-radius:8px;

    color:
        var(--sym-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__symptom-review{
    display:inline-flex;
    align-items:center;

    max-width:112px;

    padding:
        5px 6px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:6px;

    color:#a99668;

    font-size:7px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxfail__symptom-review--remote{
    border-color:
        rgba(41,217,239,.08);

    color:#769fa4;
}

.gsxsxfail__symptom h4{
    margin:0;

    color:#dce9de;

    font-size:11px;
    line-height:1.48;
    font-weight:700;
}

.gsxsxfail__symptom p{
    margin:
        7px 0 0;

    color:#707f73;

    font-size:9px;
    line-height:1.58;
}

.gsxsxfail__symptom-note{
    display:block;

    margin-top:9px;

    color:
        var(--sym-color);

    font-size:8px;
    line-height:1.42;
    font-weight:700;
}


/* =========================================================
   LÍQUIDO
   ========================================================= */

.gsxsxfail__liquid{
    position:relative;

    margin-bottom:18px;

    padding:20px;

    overflow:hidden;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:17px;

    background:
        radial-gradient(
            circle at 87% 10%,
            rgba(255,97,119,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(21,5,8,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxfail__liquid::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--yellow),
            transparent
        );
}

.gsxsxfail__liquid-layout{
    display:grid;

    grid-template-columns:
        72px minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxfail__liquid-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:64px;
    height:64px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.20);

    border-radius:14px;

    color:
        var(--red);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__liquid-copy{
    min-width:0;
}

.gsxsxfail__liquid-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d7b8bb;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxfail__liquid-copy span{
    display:block;

    color:#807376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxfail__liquid-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,97,119,.11);

    border-radius:8px;

    color:#b0878e;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD DIAGNÓSTICO
   ========================================================= */

.gsxsxfail__hud{
    position:relative;

    min-height:520px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(101,245,47,.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 50% 42%,
            rgba(41,217,239,.022),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(3,14,10,.69),
            rgba(2,8,4,.97)
        );
}

.gsxsxfail__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(41,217,239,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.025) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxfail__hud-head{
    position:absolute;

    z-index:25;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxfail__hud-code{
    color:#91c3c7;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#95c289;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxfail__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.57);

    animation:
        gsxsxfailState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxfailState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   NÚCLEO
   ========================================================= */

.gsxsxfail__hud-core{
    position:absolute;

    z-index:12;

    left:50%;
    top:40%;

    width:158px;
    height:158px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(101,245,47,.25);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(101,245,47,.11),
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 34px rgba(101,245,47,.07);

    animation:
        gsxsxfailCore
        3.2s ease-in-out infinite;
}

.gsxsxfail__hud-core::before{
    content:"";

    position:absolute;

    inset:-38px;

    border:
        1px dashed rgba(41,217,239,.13);

    border-radius:50%;

    animation:
        gsxsxfailRing
        15s linear infinite;
}

.gsxsxfail__hud-core::after{
    content:"";

    position:absolute;

    inset:-82px;

    border:
        1px solid rgba(139,105,255,.05);

    border-radius:50%;
}

@keyframes gsxsxfailCore{

    0%,
    100%{
        box-shadow:
            0 0 20px rgba(101,245,47,.05);
    }

    50%{
        box-shadow:
            0 0 44px rgba(101,245,47,.16);
    }

}

@keyframes gsxsxfailRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxfail__hud-core-copy{
    position:relative;
    z-index:4;

    text-align:center;
}

.gsxsxfail__hud-core-title{
    display:block;

    color:
        var(--green2);

    font-size:15px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__hud-core-sub{
    display:block;

    margin-top:4px;

    color:#718173;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS
   ========================================================= */

.gsxsxfail__pulse{
    position:absolute;

    z-index:7;

    left:50%;
    top:40%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(101,245,47,.24);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxfailPulse
        3.5s ease-out infinite;
}

.gsxsxfail__pulse--b{
    animation-delay:1.15s;

    border-color:
        rgba(41,217,239,.22);
}

.gsxsxfail__pulse--c{
    animation-delay:2.3s;

    border-color:
        rgba(139,105,255,.18);
}

@keyframes gsxsxfailPulse{

    0%{
        opacity:.65;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.2);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.3);
    }

}


/* =========================================================
   BARRIDO
   ========================================================= */

.gsxsxfail__sweep{
    position:absolute;

    z-index:9;

    left:50%;
    top:40%;

    width:145px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.72),
            rgba(41,217,239,.10),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.28);

    animation:
        gsxsxfailSweep
        4.8s linear infinite;
}

.gsxsxfail__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxfailSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   RUTA HUD
   ========================================================= */

.gsxsxfail__hud-route{
    position:absolute;

    z-index:18;

    left:22px;
    right:22px;
    bottom:92px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxfail__hud-node{
    --node-color:var(--cyan);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxfail__hud-node:nth-child(2){
    --node-color:var(--blue);
}

.gsxsxfail__hud-node:nth-child(3){
    --node-color:var(--yellow);
}

.gsxsxfail__hud-node:nth-child(4){
    --node-color:var(--violet);
}

.gsxsxfail__hud-node:nth-child(5){
    --node-color:var(--green);
}

.gsxsxfail__hud-node:nth-child(6){
    --node-color:var(--green2);
}

.gsxsxfail__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(101,245,47,.07)
        );
}

.gsxsxfail__hud-node:last-child::after{
    display:none;
}

.gsxsxfail__hud-circle{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:
        var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__hud-node-title{
    display:block;

    color:
        var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}


/* =========================================================
   TOKEN HUD
   ========================================================= */

.gsxsxfail__hud-token{
    position:absolute;

    z-index:22;

    left:5%;
    bottom:137px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.72);

    opacity:0;

    animation:
        gsxsxfailToken
        7s linear infinite;
}

@keyframes gsxsxfailToken{

    0%{
        left:5%;
        opacity:0;
        background:var(--cyan);
    }

    7%{
        opacity:1;
    }

    22%{
        background:var(--blue);
    }

    41%{
        background:var(--yellow);
    }

    60%{
        background:var(--violet);
    }

    79%{
        background:var(--green);
    }

    94%{
        left:94%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN
   ========================================================= */

.gsxsxfail__hud-equation{
    position:absolute;

    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(101,245,47,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.82);

    color:#718573;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxfail__hud-equation b{
    color:
        var(--green2);
}


/* =========================================================
   CASOS QUE NO SE COTIZAN POR SÍNTOMA
   ========================================================= */

.gsxsxfail__noquote{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 9%,
            rgba(255,200,87,.035),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            rgba(17,14,4,.32),
            rgba(2,8,4,.97)
        );
}

.gsxsxfail__noquote::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            transparent
        );
}

.gsxsxfail__noquote-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:9px;

    margin-top:17px;
}

.gsxsxfail__noquote-card{
    --quote-color:var(--yellow);

    min-width:0;

    padding:
        15px 13px;

    border:
        1px solid rgba(255,200,87,.055);

    border-radius:10px;

    background:
        rgba(3,11,6,.45);
}

.gsxsxfail__noquote-card:nth-child(2){
    --quote-color:var(--red);
}

.gsxsxfail__noquote-card:nth-child(3){
    --quote-color:var(--green);
}

.gsxsxfail__noquote-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--quote-color);

    border-radius:8px;

    color:
        var(--quote-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__noquote-card strong{
    display:block;

    margin-bottom:4px;

    color:
        var(--quote-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfail__noquote-copy{
    display:block;

    color:#716f63;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   MENSAJE FINAL
   ========================================================= */

.gsxsxfail__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.014),
            rgba(255,200,87,.012)
        );
}

.gsxsxfail__rule-code{
    display:grid !important;

    place-items:center !important;
    align-items:center !important;
    justify-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.16);

    border-radius:9px;

    color:
        var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfail__rule-copy{
    min-width:0;

    color:#817275;

    font-size:10px;
    line-height:1.62;
}

.gsxsxfail__rule-copy strong{
    color:#d3b9bc;
    font-weight:600;
}

.gsxsxfail__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxfail__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(6,18,8,.88),
            rgba(2,7,3,.98)
        );
}

.gsxsxfail__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxfail__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxfail__terminal-dots span{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxfail__terminal-dots span:nth-child(1){
    background:
        var(--red);
}

.gsxsxfail__terminal-dots span:nth-child(2){
    background:
        var(--yellow);
}

.gsxsxfail__terminal-dots span:nth-child(3){
    background:
        var(--green);
}

.gsxsxfail__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxfail__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxfail__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxfail__terminal-route span{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxfail__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxfail__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxfail__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxfail__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxfail__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxfail__families{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }

    .gsxsxfail__symptoms-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxfail__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxfail__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxfail__status{
        max-width:650px;
    }

    .gsxsxfail__filter-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxfail__symptoms-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxfail__noquote-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxfail__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxfail__scan,
    .gsxsxfail__orbit{
        display:none;
    }

    .gsxsxfail__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxfail__heading{
        display:block;
    }

    .gsxsxfail__status{
        margin-top:19px;
    }

    .gsxsxfail__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxfail__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxfail__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxfail__principle-state{
        width:fit-content;
    }

    .gsxsxfail__filter,
    .gsxsxfail__symptoms,
    .gsxsxfail__liquid,
    .gsxsxfail__noquote{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxfail__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxfail__section-state{
        width:fit-content;
    }

    .gsxsxfail__families{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxfail__symptoms-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxfail__liquid-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxfail__liquid-state{
        width:fit-content;
    }


    /* ===============================================
       HUD
       =============================================== */

    .gsxsxfail__hud{
        min-height:700px;
    }

    .gsxsxfail__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxfail__hud-core{
        top:29%;

        width:135px;
        height:135px;
    }

    .gsxsxfail__pulse,
    .gsxsxfail__sweep{
        top:29%;
    }

    .gsxsxfail__sweep{
        width:125px;
    }

    .gsxsxfail__hud-route{
        left:15px;
        right:15px;
        bottom:83px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxfail__hud-node::after{
        display:none;
    }

    .gsxsxfail__hud-token{
        display:none;
    }


    /* ===============================================
       REGLA
       =============================================== */

    .gsxsxfail__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxfail__rule-state{
        width:fit-content;
    }

    .gsxsxfail__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxfail__terminal-state{
        width:fit-content;
    }

    .gsxsxfail__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxfail__families{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxfail__hud{
        min-height:890px;
    }

    .gsxsxfail__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxfail__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxfail__hud{
        min-height:1120px;
    }

    .gsxsxfail__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxfail__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxfail__terminal-route span{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxfail *,
    .gsxsxfail *::before,
    .gsxsxfail *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxfail__scan,
    .gsxsxfail__orbit,
    .gsxsxfail__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — HDMI Y VIDEO
   CSS ID EXTERIOR: hdmi-video-xbox-series-x
   ROOT: .gsxsxvid
   ========================================================= */

.gsxsxvid{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(101,245,47,.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 16%,
            rgba(41,217,239,.045),
            transparent 29%
        ),
        radial-gradient(
            circle at 72% 84%,
            rgba(75,142,255,.025),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxvid *,
.gsxsxvid *::before,
.gsxsxvid *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxvid__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.032) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxvid__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxvid__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxvid__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(41,217,239,.15),
            rgba(101,245,47,.11),
            transparent
        );

    box-shadow:
        0 0 14px rgba(41,217,239,.08);

    animation:
        gsxsxvidScan
        13s linear infinite;
}

@keyframes gsxsxvidScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(6200px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxvid__orbit{
    position:absolute;

    width:780px;
    height:780px;

    right:-450px;
    top:1050px;

    pointer-events:none;

    border:
        1px solid rgba(41,217,239,.034);

    border-radius:50%;

    animation:
        gsxsxvidOrbit
        74s linear infinite;
}

.gsxsxvid__orbit::before{
    content:"";

    position:absolute;
    inset:120px;

    border:
        1px dashed rgba(101,245,47,.032);

    border-radius:50%;
}

.gsxsxvid__orbit::after{
    content:"";

    position:absolute;
    inset:240px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxvidOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxvid__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxvid__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxvid__heading-main{
    min-width:0;
}

.gsxsxvid__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(41,217,239,.15);

    border-radius:999px;

    background:
        rgba(41,217,239,.025);

    color:#8ec8ce;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxvid__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px rgba(41,217,239,.60);
}

.gsxsxvid__title{
    max-width:1020px;

    margin:0;

    color:
        var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxvid__title span{
    color:
        var(--cyan);
}

.gsxsxvid__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:
        var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxvid__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxvid__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxvid__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c2aa6f;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:
        var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.48);
}

.gsxsxvid__status p{
    margin:0;

    color:#817e6d;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxvid__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.018),
            rgba(101,245,47,.018)
        );
}

.gsxsxvid__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxvid__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:
        var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__principle-copy{
    min-width:0;
}

.gsxsxvid__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxvid__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxvid__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(41,217,239,.11);

    border-radius:999px;

    color:#83abb0;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxvid__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxvid__section-label{
    display:block;

    margin-bottom:6px;

    color:#88c3ca;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxvid__section-copy{
    max-width:890px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxvid__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(41,217,239,.10);

    border-radius:999px;

    color:#7fa9ad;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   RUTA DE VIDEO
   ========================================================= */

.gsxsxvid__route{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.09);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(41,217,239,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(4,16,13,.62),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__route::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxvid__route-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(7,minmax(0,1fr));

    gap:7px;
}

.gsxsxvid__route-grid::before{
    content:"";

    position:absolute;

    left:6%;
    right:6%;
    top:30px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--green2),
            var(--blue),
            var(--cyan),
            var(--yellow),
            var(--violet),
            var(--cyan)
        );

    opacity:.18;
}

.gsxsxvid__route-node{
    --route-color:var(--green);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxvid__route-node:nth-child(2){
    --route-color:var(--green2);
}

.gsxsxvid__route-node:nth-child(3){
    --route-color:var(--blue);
}

.gsxsxvid__route-node:nth-child(4){
    --route-color:var(--cyan);
}

.gsxsxvid__route-node:nth-child(5){
    --route-color:var(--yellow);
}

.gsxsxvid__route-node:nth-child(6){
    --route-color:var(--violet);
}

.gsxsxvid__route-node:nth-child(7){
    --route-color:var(--cyan);
}

.gsxsxvid__route-circle{
    display:grid !important;
    place-items:center !important;

    width:60px;
    height:60px;

    margin:
        0 auto 9px;

    padding:0 !important;

    border:
        1px solid var(--route-color);

    border-radius:50%;

    background:
        rgba(2,9,5,.98);

    color:
        var(--route-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--route-color) 8%,
            transparent
        );
}

.gsxsxvid__route-node strong{
    display:block;

    color:
        var(--route-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__route-copy{
    display:block;

    margin-top:3px;

    color:#637467;

    font-size:7px;
    line-height:1.45;
}


/* =========================================================
   TOKEN
   ========================================================= */

.gsxsxvid__route-token{
    position:absolute;
    z-index:5;

    left:6%;
    top:27px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px rgba(101,245,47,.70);

    opacity:0;

    animation:
        gsxsxvidToken
        7.5s ease-in-out infinite;
}

@keyframes gsxsxvidToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--green);
    }

    7%{
        opacity:1;
    }

    19%{
        background:var(--green2);
    }

    34%{
        background:var(--blue);
    }

    49%{
        background:var(--cyan);
    }

    64%{
        background:var(--yellow);
    }

    79%{
        background:var(--violet);
    }

    94%{
        left:94%;
        background:var(--cyan);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   SÍNTOMAS
   ========================================================= */

.gsxsxvid__symptoms{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(6,18,8,.62),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__symptoms::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxvid__symptoms-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxvid__symptom{
    --sym-color:var(--cyan);

    position:relative;

    min-width:0;

    min-height:190px;

    padding:
        16px 13px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.52);
}

.gsxsxvid__symptom:nth-child(2){
    --sym-color:var(--red);
}

.gsxsxvid__symptom:nth-child(3){
    --sym-color:var(--yellow);
}

.gsxsxvid__symptom:nth-child(4){
    --sym-color:var(--violet);
}

.gsxsxvid__symptom:nth-child(5){
    --sym-color:var(--blue);
}

.gsxsxvid__symptom:nth-child(6){
    --sym-color:var(--cyan);
}

.gsxsxvid__symptom:nth-child(7){
    --sym-color:var(--orange);
}

.gsxsxvid__symptom:nth-child(8){
    --sym-color:var(--red);
}

.gsxsxvid__symptom::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:75px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sym-color),
            transparent
        );
}

.gsxsxvid__symptom-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    margin-bottom:11px;
}

.gsxsxvid__symptom-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    flex:0 0 36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--sym-color);

    border-radius:8px;

    color:
        var(--sym-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__symptom-state{
    display:inline-flex;
    align-items:center;

    max-width:112px;

    padding:
        5px 6px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:6px;

    color:#a89466;

    font-size:7px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxvid__symptom h4{
    margin:0;

    color:#dce9de;

    font-size:11px;
    line-height:1.48;
    font-weight:700;
}

.gsxsxvid__symptom p{
    margin:
        7px 0 0;

    color:#707f73;

    font-size:9px;
    line-height:1.58;
}

.gsxsxvid__symptom-note{
    display:block;

    margin-top:9px;

    color:
        var(--sym-color);

    font-size:8px;
    line-height:1.42;
    font-weight:700;
}


/* =========================================================
   PUERTO DAÑADO
   ========================================================= */

.gsxsxvid__damage{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,97,119,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(21,5,8,.33),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__damage::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:200px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--yellow),
            transparent
        );
}

.gsxsxvid__damage-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxvid__damage-code{
    display:grid !important;
    place-items:center !important;

    width:66px;
    height:66px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.20);

    border-radius:14px;

    color:
        var(--red);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__damage-copy{
    min-width:0;
}

.gsxsxvid__damage-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8b8bc;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxvid__damage-copy span{
    display:block;

    color:#807376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxvid__damage-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,97,119,.11);

    border-radius:8px;

    color:#b0878e;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FILTRO EN CASA
   ========================================================= */

.gsxsxvid__precheck{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,14,.46),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__precheck::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxvid__precheck-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxvid__precheck-card{
    --pre-color:var(--cyan);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxvid__precheck-card:nth-child(2){
    --pre-color:var(--green);
}

.gsxsxvid__precheck-card:nth-child(3){
    --pre-color:var(--blue);
}

.gsxsxvid__precheck-card:nth-child(4){
    --pre-color:var(--yellow);
}

.gsxsxvid__precheck-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--pre-color);

    border-radius:8px;

    color:
        var(--pre-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__precheck-card strong{
    display:block;

    margin-bottom:4px;

    color:
        var(--pre-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__precheck-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   FILTRO DIAGNÓSTICO
   ========================================================= */

.gsxsxvid__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green),
            transparent
        );
}

.gsxsxvid__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:8px;

    margin-bottom:17px;
}

.gsxsxvid__filter-flow::before{
    content:"";

    position:absolute;

    left:9%;
    right:9%;
    top:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            var(--yellow),
            var(--red),
            var(--green)
        );

    opacity:.18;
}

.gsxsxvid__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxvid__filter-step:nth-child(2){
    --filter-color:var(--blue);
}

.gsxsxvid__filter-step:nth-child(3){
    --filter-color:var(--yellow);
}

.gsxsxvid__filter-step:nth-child(4){
    --filter-color:var(--red);
}

.gsxsxvid__filter-step:nth-child(5){
    --filter-color:var(--green);
}

.gsxsxvid__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:
        var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__filter-step strong{
    display:block;

    color:
        var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__filter-step span:last-child{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}

.gsxsxvid__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.075);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.012),
            rgba(255,200,87,.010)
        );
}

.gsxsxvid__filter-result-code{
    display:grid !important;
    place-items:center !important;

    width:46px;
    height:46px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.17);

    border-radius:10px;

    color:
        var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__filter-result-copy{
    min-width:0;

    color:#807276;

    font-size:10px;
    line-height:1.62;
}

.gsxsxvid__filter-result-copy strong{
    color:#d2b8bc;
    font-weight:600;
}

.gsxsxvid__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD CENTRAL
   ========================================================= */

.gsxsxvid__hud{
    position:relative;

    min-height:550px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(41,217,239,.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 42%,
            rgba(101,245,47,.025),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(3,14,12,.67),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(41,217,239,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.025) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxvid__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxvid__hud-code{
    color:#8fc4ca;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(41,217,239,.11);

    border-radius:999px;

    color:#81afb4;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxvid__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px rgba(41,217,239,.58);

    animation:
        gsxsxvidState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxvidState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   NÚCLEO HUD
   ========================================================= */

.gsxsxvid__core{
    position:absolute;
    z-index:11;

    left:50%;
    top:38%;

    width:165px;
    height:165px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(41,217,239,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(41,217,239,.10),
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 38px rgba(41,217,239,.07);

    animation:
        gsxsxvidCore
        3.2s ease-in-out infinite;
}

.gsxsxvid__core::before{
    content:"";

    position:absolute;

    inset:-40px;

    border:
        1px dashed rgba(101,245,47,.12);

    border-radius:50%;

    animation:
        gsxsxvidRing
        15s linear infinite;
}

.gsxsxvid__core::after{
    content:"";

    position:absolute;

    inset:-84px;

    border:
        1px solid rgba(75,142,255,.055);

    border-radius:50%;
}

@keyframes gsxsxvidCore{

    0%,
    100%{
        box-shadow:
            0 0 22px rgba(41,217,239,.05);
    }

    50%{
        box-shadow:
            0 0 46px rgba(41,217,239,.15);
    }

}

@keyframes gsxsxvidRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxvid__core-copy{
    position:relative;
    z-index:3;

    text-align:center;
}

.gsxsxvid__core-title{
    display:block;

    color:
        var(--cyan);

    font-size:16px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__core-sub{
    display:block;

    margin-top:4px;

    color:#718173;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS
   ========================================================= */

.gsxsxvid__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:38%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(41,217,239,.23);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxvidPulse
        3.5s ease-out infinite;
}

.gsxsxvid__pulse--b{
    animation-delay:1.15s;

    border-color:
        rgba(101,245,47,.20);
}

.gsxsxvid__pulse--c{
    animation-delay:2.3s;

    border-color:
        rgba(139,105,255,.16);
}

@keyframes gsxsxvidPulse{

    0%{
        opacity:.64;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.25);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

}


/* =========================================================
   BARRIDO
   ========================================================= */

.gsxsxvid__sweep{
    position:absolute;
    z-index:8;

    left:50%;
    top:38%;

    width:150px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.76),
            rgba(41,217,239,.10),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.28);

    animation:
        gsxsxvidSweep
        4.8s linear infinite;
}

.gsxsxvid__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxvidSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   NODOS HUD
   ========================================================= */

.gsxsxvid__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxvid__hud-node{
    --node-color:var(--green);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxvid__hud-node:nth-child(2){
    --node-color:var(--green2);
}

.gsxsxvid__hud-node:nth-child(3){
    --node-color:var(--blue);
}

.gsxsxvid__hud-node:nth-child(4){
    --node-color:var(--cyan);
}

.gsxsxvid__hud-node:nth-child(5){
    --node-color:var(--yellow);
}

.gsxsxvid__hud-node:nth-child(6){
    --node-color:var(--green);
}

.gsxsxvid__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(41,217,239,.07)
        );
}

.gsxsxvid__hud-node:last-child::after{
    display:none;
}

.gsxsxvid__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:
        var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__hud-node-title{
    display:block;

    color:
        var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}


/* =========================================================
   TOKEN HUD
   ========================================================= */

.gsxsxvid__hud-token{
    position:absolute;
    z-index:22;

    left:6%;
    bottom:139px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px rgba(101,245,47,.72);

    opacity:0;

    animation:
        gsxsxvidHudToken
        7s linear infinite;
}

@keyframes gsxsxvidHudToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--green);
    }

    7%{
        opacity:1;
    }

    25%{
        background:var(--green2);
    }

    43%{
        background:var(--blue);
    }

    61%{
        background:var(--cyan);
    }

    79%{
        background:var(--yellow);
    }

    94%{
        left:94%;
        background:var(--green);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN
   ========================================================= */

.gsxsxvid__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(41,217,239,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#708273;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxvid__equation b{
    color:
        var(--cyan);
}


/* =========================================================
   CAPACIDADES Y CONFIGURACIÓN
   ========================================================= */

.gsxsxvid__capabilities{
    position:relative;

    margin-bottom:18px;

    padding:22px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.075);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(139,105,255,.014),
            rgba(2,8,4,.97)
        );
}

.gsxsxvid__capabilities::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:185px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--cyan),
            transparent
        );
}

.gsxsxvid__cap-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;

    margin-top:16px;
}

.gsxsxvid__cap{
    --cap-color:var(--cyan);

    min-width:0;

    padding:
        15px 13px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.43);
}

.gsxsxvid__cap:nth-child(2){
    --cap-color:var(--green);
}

.gsxsxvid__cap:nth-child(3){
    --cap-color:var(--violet);
}

.gsxsxvid__cap:nth-child(4){
    --cap-color:var(--yellow);
}

.gsxsxvid__cap strong{
    display:block;

    margin-bottom:4px;

    color:
        var(--cap-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxvid__cap span{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   REGLA
   ========================================================= */

.gsxsxvid__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(41,217,239,.010)
        );
}

.gsxsxvid__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:
        var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxvid__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxvid__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxvid__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxvid__terminal{
    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(4,17,14,.88),
            rgba(2,7,3,.98)
        );
}

.gsxsxvid__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(41,217,239,.06);

    background:
        rgba(4,15,12,.70);
}

.gsxsxvid__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxvid__terminal-dots span{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxvid__terminal-dots span:nth-child(1){
    background:
        var(--red);
}

.gsxsxvid__terminal-dots span:nth-child(2){
    background:
        var(--yellow);
}

.gsxsxvid__terminal-dots span:nth-child(3){
    background:
        var(--green);
}

.gsxsxvid__terminal-name{
    color:#5f7270;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxvid__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxvid__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxvid__terminal-route span{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(41,217,239,.045);

    border-radius:7px;

    background:
        rgba(3,13,11,.44);

    color:#697c79;

    font-size:9px;
    line-height:1.35;
}

.gsxsxvid__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(41,217,239,.10);

    border-radius:9px;

    color:#81abad;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxvid__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 7px rgba(41,217,239,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxvid__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxvid__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#607474;
}

.gsxsxvid__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 7px rgba(41,217,239,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxvid__symptoms-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .gsxsxvid__precheck-grid,
    .gsxsxvid__cap-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxvid__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxvid__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxvid__status{
        max-width:650px;
    }

    .gsxsxvid__route-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:16px 7px;
    }

    .gsxsxvid__route-grid::before,
    .gsxsxvid__route-token{
        display:none;
    }

    .gsxsxvid__symptoms-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxvid__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxvid__scan,
    .gsxsxvid__orbit{
        display:none;
    }

    .gsxsxvid__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxvid__heading{
        display:block;
    }

    .gsxsxvid__status{
        margin-top:19px;
    }

    .gsxsxvid__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxvid__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxvid__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxvid__principle-state{
        width:fit-content;
    }

    .gsxsxvid__route,
    .gsxsxvid__symptoms,
    .gsxsxvid__damage,
    .gsxsxvid__precheck,
    .gsxsxvid__filter,
    .gsxsxvid__capabilities{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxvid__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxvid__section-state{
        width:fit-content;
    }

    .gsxsxvid__route-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxvid__symptoms-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxvid__damage-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxvid__damage-state{
        width:fit-content;
    }

    .gsxsxvid__precheck-grid,
    .gsxsxvid__cap-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxvid__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px 8px;
    }

    .gsxsxvid__filter-flow::before{
        display:none;
    }

    .gsxsxvid__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxvid__filter-result-state{
        width:fit-content;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxvid__hud{
        min-height:710px;
    }

    .gsxsxvid__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxvid__core{
        top:28%;

        width:135px;
        height:135px;
    }

    .gsxsxvid__pulse,
    .gsxsxvid__sweep{
        top:28%;
    }

    .gsxsxvid__sweep{
        width:125px;
    }

    .gsxsxvid__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxvid__hud-node::after,
    .gsxsxvid__hud-token{
        display:none;
    }

    .gsxsxvid__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxvid__rule-state{
        width:fit-content;
    }

    .gsxsxvid__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxvid__terminal-state{
        width:fit-content;
    }

    .gsxsxvid__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxvid__route-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxvid__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxvid__hud{
        min-height:900px;
    }

    .gsxsxvid__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxvid__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxvid__hud{
        min-height:1120px;
    }

    .gsxsxvid__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxvid__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxvid__terminal-route span{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxvid *,
    .gsxsxvid *::before,
    .gsxsxvid *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxvid__scan,
    .gsxsxvid__orbit,
    .gsxsxvid__route-token,
    .gsxsxvid__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — ALIMENTACIÓN, ENCENDIDO Y ARRANQUE
   CSS ID EXTERIOR:
   encendido-alimentacion-arranque-xbox-series-x

   ROOT: .gsxsxpwr
   ========================================================= */

.gsxsxpwr{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 11%,
            rgba(101,245,47,.065),
            transparent 29%
        ),
        radial-gradient(
            circle at 90% 16%,
            rgba(41,217,239,.032),
            transparent 29%
        ),
        radial-gradient(
            circle at 72% 84%,
            rgba(139,105,255,.025),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxpwr *,
.gsxsxpwr *::before,
.gsxsxpwr *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxpwr__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.033) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.033) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxpwr__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxpwr__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxpwr__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,245,47,.14),
            rgba(41,217,239,.11),
            transparent
        );

    box-shadow:
        0 0 14px rgba(101,245,47,.08);

    animation:
        gsxsxpwrScan
        13s linear infinite;
}

@keyframes gsxsxpwrScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(7000px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxpwr__orbit{
    position:absolute;

    width:800px;
    height:800px;

    right:-465px;
    top:1100px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.032);

    border-radius:50%;

    animation:
        gsxsxpwrOrbit
        76s linear infinite;
}

.gsxsxpwr__orbit::before{
    content:"";

    position:absolute;
    inset:125px;

    border:
        1px dashed rgba(41,217,239,.034);

    border-radius:50%;
}

.gsxsxpwr__orbit::after{
    content:"";

    position:absolute;
    inset:245px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxpwrOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxpwr__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxpwr__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxpwr__heading-main{
    min-width:0;
}

.gsxsxpwr__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9ed58d;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxpwr__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxpwr__title{
    max-width:1020px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxpwr__title span{
    color:var(--green2);
}

.gsxsxpwr__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxpwr__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxpwr__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxpwr__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c2aa70;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}

.gsxsxpwr__status p{
    margin:0;

    color:#837f6e;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxpwr__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.018),
            rgba(101,245,47,.018)
        );
}

.gsxsxpwr__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxpwr__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__principle-copy{
    min-width:0;
}

.gsxsxpwr__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxpwr__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxpwr__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#91bb85;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxpwr__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxpwr__section-label{
    display:block;

    margin-bottom:6px;

    color:#99cf89;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxpwr__section-copy{
    max-width:890px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxpwr__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8db581;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TRES ETAPAS PRINCIPALES
   ========================================================= */

.gsxsxpwr__stages{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 9%,
            rgba(101,245,47,.03),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(6,18,8,.62),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__stages::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxpwr__stages-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;
}

.gsxsxpwr__stages-grid::before{
    content:"";

    position:absolute;

    left:14%;
    right:14%;
    top:39px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--yellow),
            var(--violet)
        );

    opacity:.18;
}

.gsxsxpwr__stage{
    --stage-color:var(--green);

    position:relative;
    z-index:3;

    min-width:0;

    padding:
        20px 18px;

    border:
        1px solid rgba(101,245,47,.06);

    border-radius:14px;

    background:
        rgba(3,11,6,.67);
}

.gsxsxpwr__stage:nth-child(2){
    --stage-color:var(--yellow);

    border-color:
        rgba(255,200,87,.06);
}

.gsxsxpwr__stage:nth-child(3){
    --stage-color:var(--violet);

    border-color:
        rgba(139,105,255,.06);
}

.gsxsxpwr__stage-code{
    display:grid !important;
    place-items:center !important;

    width:62px;
    height:62px;

    margin:
        0 auto 13px;

    padding:0 !important;

    border:
        1px solid var(--stage-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.98);

    color:var(--stage-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;

    box-shadow:
        0 0 14px
        color-mix(
            in srgb,
            var(--stage-color) 8%,
            transparent
        );
}

.gsxsxpwr__stage h4{
    margin:0;

    color:var(--stage-color);

    font-size:12px;
    line-height:1.45;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxpwr__stage p{
    margin:
        8px 0 0;

    color:#718075;

    font-size:10px;
    line-height:1.62;

    text-align:center;
}

.gsxsxpwr__stage-list{
    display:grid;

    gap:6px;

    margin-top:13px;
}

.gsxsxpwr__stage-item{
    display:grid;

    grid-template-columns:
        6px minmax(0,1fr);

    gap:7px;

    align-items:start;

    color:#68786c;

    font-size:9px;
    line-height:1.5;
}

.gsxsxpwr__stage-item::before{
    content:"";

    width:5px;
    height:5px;

    margin-top:5px;

    border-radius:50%;

    background:var(--stage-color);

    box-shadow:
        0 0 6px
        color-mix(
            in srgb,
            var(--stage-color) 38%,
            transparent
        );
}


/* =========================================================
   SÍNTOMAS
   ========================================================= */

.gsxsxpwr__symptoms{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,13,.44),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__symptoms::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxpwr__symptoms-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxpwr__symptom{
    --sym-color:var(--green);

    position:relative;

    min-width:0;

    min-height:194px;

    padding:
        16px 13px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.52);
}

.gsxsxpwr__symptom:nth-child(2){
    --sym-color:var(--yellow);
}

.gsxsxpwr__symptom:nth-child(3){
    --sym-color:var(--orange);
}

.gsxsxpwr__symptom:nth-child(4){
    --sym-color:var(--red);
}

.gsxsxpwr__symptom:nth-child(5){
    --sym-color:var(--violet);
}

.gsxsxpwr__symptom:nth-child(6){
    --sym-color:var(--blue);
}

.gsxsxpwr__symptom:nth-child(7){
    --sym-color:var(--cyan);
}

.gsxsxpwr__symptom:nth-child(8){
    --sym-color:var(--green2);
}

.gsxsxpwr__symptom:nth-child(9){
    --sym-color:var(--yellow);
}

.gsxsxpwr__symptom:nth-child(10){
    --sym-color:var(--violet);
}

.gsxsxpwr__symptom:nth-child(11){
    --sym-color:var(--cyan);
}

.gsxsxpwr__symptom:nth-child(12){
    --sym-color:var(--red);
}

.gsxsxpwr__symptom::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:74px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sym-color),
            transparent
        );
}

.gsxsxpwr__symptom-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    margin-bottom:11px;
}

.gsxsxpwr__symptom-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    flex:0 0 36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--sym-color);

    border-radius:8px;

    color:var(--sym-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__symptom-state{
    display:inline-flex;
    align-items:center;

    max-width:116px;

    padding:
        5px 6px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:6px;

    color:#aa9667;

    font-size:7px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxpwr__symptom-state--remote{
    border-color:
        rgba(41,217,239,.08);

    color:#759da1;
}

.gsxsxpwr__symptom h4{
    margin:0;

    color:#dce9de;

    font-size:11px;
    line-height:1.48;
    font-weight:700;
}

.gsxsxpwr__symptom p{
    margin:
        7px 0 0;

    color:#707f73;

    font-size:9px;
    line-height:1.58;
}

.gsxsxpwr__symptom-note{
    display:block;

    margin-top:9px;

    color:var(--sym-color);

    font-size:8px;
    line-height:1.42;
    font-weight:700;
}


/* =========================================================
   REGLA CRÍTICA
   ========================================================= */

.gsxsxpwr__critical{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,97,119,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(21,5,8,.33),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__critical::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:200px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--yellow),
            transparent
        );
}

.gsxsxpwr__critical-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxpwr__critical-code{
    display:grid !important;
    place-items:center !important;

    width:66px;
    height:66px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.20);

    border-radius:14px;

    color:var(--red);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__critical-copy{
    min-width:0;
}

.gsxsxpwr__critical-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d7b8bb;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxpwr__critical-copy span{
    display:block;

    color:#807376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxpwr__critical-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,97,119,.11);

    border-radius:8px;

    color:#b0878e;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   COMPROBACIONES EXTERNAS
   ========================================================= */

.gsxsxpwr__precheck{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,14,.44),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__precheck::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxpwr__precheck-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxpwr__precheck-card{
    --pre-color:var(--cyan);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxpwr__precheck-card:nth-child(2){
    --pre-color:var(--green);
}

.gsxsxpwr__precheck-card:nth-child(3){
    --pre-color:var(--blue);
}

.gsxsxpwr__precheck-card:nth-child(4){
    --pre-color:var(--yellow);
}

.gsxsxpwr__precheck-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--pre-color);

    border-radius:8px;

    color:var(--pre-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__precheck-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--pre-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__precheck-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   ADVERTENCIA PRECHECK
   ========================================================= */

.gsxsxpwr__precheck-warning{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:11px;

    align-items:center;

    margin-top:12px;

    padding:14px;

    border:
        1px solid rgba(255,200,87,.075);

    border-radius:10px;

    background:
        rgba(17,14,4,.28);
}

.gsxsxpwr__precheck-warning-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.15);

    border-radius:8px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxpwr__precheck-warning-copy{
    color:#827d6b;

    font-size:9px;
    line-height:1.58;
}

.gsxsxpwr__precheck-warning-copy strong{
    color:#c9bd94;
    font-weight:600;
}


/* =========================================================
   ERRORES DE ARRANQUE
   ========================================================= */

.gsxsxpwr__errors{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.075);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(139,105,255,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__errors::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--cyan),
            transparent
        );
}

.gsxsxpwr__error-layout{
    display:grid;

    grid-template-columns:
        minmax(0,.7fr)
        minmax(0,1.3fr);

    gap:13px;
}

.gsxsxpwr__error-main,
.gsxsxpwr__error-side{
    min-width:0;

    padding:18px;

    border:
        1px solid rgba(139,105,255,.055);

    border-radius:13px;

    background:
        rgba(3,11,6,.45);
}

.gsxsxpwr__error-main-code{
    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    margin-bottom:12px;
    padding:0 !important;

    border:
        1px solid var(--violet);

    border-radius:12px;

    color:var(--violet);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__error-main strong{
    display:block;

    margin-bottom:6px;

    color:#b9abdf;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxpwr__error-main p{
    margin:0;

    color:#746f82;

    font-size:10px;
    line-height:1.62;
}

.gsxsxpwr__error-side{
    display:grid;

    gap:8px;
}

.gsxsxpwr__error-row{
    display:grid;

    grid-template-columns:
        48px minmax(0,1fr);

    gap:10px;

    align-items:center;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.035);
}

.gsxsxpwr__error-row:last-child{
    border-bottom:0;
}

.gsxsxpwr__error-row-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(139,105,255,.16);

    border-radius:9px;

    color:var(--violet);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__error-row-copy{
    color:#72717c;

    font-size:9px;
    line-height:1.55;
}

.gsxsxpwr__error-row-copy strong{
    display:block;

    margin-bottom:2px;

    color:#aca3c4;

    font-size:9px;
    font-weight:600;
}


/* =========================================================
   FILTRO DE COTIZACIÓN
   ========================================================= */

.gsxsxpwr__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            var(--green),
            transparent
        );
}

.gsxsxpwr__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:8px;

    margin-bottom:17px;
}

.gsxsxpwr__filter-flow::before{
    content:"";

    position:absolute;

    left:9%;
    right:9%;
    top:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            var(--red),
            var(--violet),
            var(--green)
        );

    opacity:.18;
}

.gsxsxpwr__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxpwr__filter-step:nth-child(2){
    --filter-color:var(--yellow);
}

.gsxsxpwr__filter-step:nth-child(3){
    --filter-color:var(--red);
}

.gsxsxpwr__filter-step:nth-child(4){
    --filter-color:var(--violet);
}

.gsxsxpwr__filter-step:nth-child(5){
    --filter-color:var(--green);
}

.gsxsxpwr__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__filter-step strong{
    display:block;

    color:var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__filter-step span:last-child{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}


/* =========================================================
   RESULTADO FILTRO
   ========================================================= */

.gsxsxpwr__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.013),
            rgba(255,200,87,.010)
        );
}

.gsxsxpwr__filter-result-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.17);

    border-radius:10px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__filter-result-copy{
    min-width:0;

    color:#807276;

    font-size:10px;
    line-height:1.62;
}

.gsxsxpwr__filter-result-copy strong{
    color:#d2b8bc;
    font-weight:600;
}

.gsxsxpwr__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD
   ========================================================= */

.gsxsxpwr__hud{
    position:relative;

    min-height:555px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 39%,
            rgba(101,245,47,.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 39%,
            rgba(41,217,239,.022),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(3,14,9,.67),
            rgba(2,8,4,.97)
        );
}

.gsxsxpwr__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(101,245,47,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.024) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxpwr__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxpwr__hud-code{
    color:#92c58a;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#92bd87;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxpwr__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);

    animation:
        gsxsxpwrState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxpwrState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   CORE
   ========================================================= */

.gsxsxpwr__core{
    position:absolute;
    z-index:11;

    left:50%;
    top:38%;

    width:165px;
    height:165px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(101,245,47,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(101,245,47,.11),
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 38px rgba(101,245,47,.07);

    animation:
        gsxsxpwrCore
        3.2s ease-in-out infinite;
}

.gsxsxpwr__core::before{
    content:"";

    position:absolute;
    inset:-40px;

    border:
        1px dashed rgba(41,217,239,.12);

    border-radius:50%;

    animation:
        gsxsxpwrRing
        15s linear infinite;
}

.gsxsxpwr__core::after{
    content:"";

    position:absolute;
    inset:-84px;

    border:
        1px solid rgba(139,105,255,.055);

    border-radius:50%;
}

@keyframes gsxsxpwrCore{

    0%,
    100%{
        box-shadow:
            0 0 22px rgba(101,245,47,.05);
    }

    50%{
        box-shadow:
            0 0 46px rgba(101,245,47,.15);
    }

}

@keyframes gsxsxpwrRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxpwr__core-copy{
    position:relative;
    z-index:3;

    text-align:center;
}

.gsxsxpwr__core-title{
    display:block;

    color:var(--green2);

    font-size:15px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__core-sub{
    display:block;

    margin-top:4px;

    color:#718173;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS
   ========================================================= */

.gsxsxpwr__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:38%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(101,245,47,.23);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxpwrPulse
        3.5s ease-out infinite;
}

.gsxsxpwr__pulse--b{
    animation-delay:1.15s;

    border-color:
        rgba(41,217,239,.20);
}

.gsxsxpwr__pulse--c{
    animation-delay:2.3s;

    border-color:
        rgba(139,105,255,.16);
}

@keyframes gsxsxpwrPulse{

    0%{
        opacity:.64;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.25);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

}


/* =========================================================
   SWEEP
   ========================================================= */

.gsxsxpwr__sweep{
    position:absolute;
    z-index:8;

    left:50%;
    top:38%;

    width:150px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.76),
            rgba(41,217,239,.10),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.28);

    animation:
        gsxsxpwrSweep
        4.8s linear infinite;
}

.gsxsxpwr__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxpwrSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   HUD ROUTE
   ========================================================= */

.gsxsxpwr__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxpwr__hud-node{
    --node-color:var(--cyan);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxpwr__hud-node:nth-child(2){
    --node-color:var(--green);
}

.gsxsxpwr__hud-node:nth-child(3){
    --node-color:var(--yellow);
}

.gsxsxpwr__hud-node:nth-child(4){
    --node-color:var(--violet);
}

.gsxsxpwr__hud-node:nth-child(5){
    --node-color:var(--green2);
}

.gsxsxpwr__hud-node:nth-child(6){
    --node-color:var(--green);
}

.gsxsxpwr__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(101,245,47,.07)
        );
}

.gsxsxpwr__hud-node:last-child::after{
    display:none;
}

.gsxsxpwr__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__hud-node-title{
    display:block;

    color:var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxpwr__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}


/* =========================================================
   HUD TOKEN
   ========================================================= */

.gsxsxpwr__hud-token{
    position:absolute;
    z-index:22;

    left:6%;
    bottom:139px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.72);

    opacity:0;

    animation:
        gsxsxpwrHudToken
        7s linear infinite;
}

@keyframes gsxsxpwrHudToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--cyan);
    }

    7%{
        opacity:1;
    }

    25%{
        background:var(--green);
    }

    43%{
        background:var(--yellow);
    }

    61%{
        background:var(--violet);
    }

    79%{
        background:var(--green2);
    }

    94%{
        left:94%;
        background:var(--green);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN
   ========================================================= */

.gsxsxpwr__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(101,245,47,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#708273;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxpwr__equation b{
    color:var(--green2);
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxpwr__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(101,245,47,.010)
        );
}

.gsxsxpwr__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxpwr__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxpwr__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxpwr__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxpwr__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(6,18,8,.88),
            rgba(2,7,3,.98)
        );
}

.gsxsxpwr__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxpwr__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxpwr__terminal-dots span{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxpwr__terminal-dots span:nth-child(1){
    background:var(--red);
}

.gsxsxpwr__terminal-dots span:nth-child(2){
    background:var(--yellow);
}

.gsxsxpwr__terminal-dots span:nth-child(3){
    background:var(--green);
}

.gsxsxpwr__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxpwr__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxpwr__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxpwr__terminal-route span{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxpwr__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxpwr__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxpwr__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxpwr__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxpwr__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxpwr__symptoms-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .gsxsxpwr__precheck-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxpwr__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxpwr__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxpwr__status{
        max-width:650px;
    }

    .gsxsxpwr__stages-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxpwr__stages-grid::before{
        display:none;
    }

    .gsxsxpwr__symptoms-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxpwr__error-layout{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxpwr__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxpwr__scan,
    .gsxsxpwr__orbit{
        display:none;
    }

    .gsxsxpwr__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxpwr__heading{
        display:block;
    }

    .gsxsxpwr__status{
        margin-top:19px;
    }

    .gsxsxpwr__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxpwr__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxpwr__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxpwr__principle-state{
        width:fit-content;
    }

    .gsxsxpwr__stages,
    .gsxsxpwr__symptoms,
    .gsxsxpwr__critical,
    .gsxsxpwr__precheck,
    .gsxsxpwr__errors,
    .gsxsxpwr__filter{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxpwr__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxpwr__section-state{
        width:fit-content;
    }

    .gsxsxpwr__symptoms-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxpwr__critical-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxpwr__critical-state{
        width:fit-content;
    }

    .gsxsxpwr__precheck-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxpwr__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px 8px;
    }

    .gsxsxpwr__filter-flow::before{
        display:none;
    }

    .gsxsxpwr__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxpwr__filter-result-state{
        width:fit-content;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxpwr__hud{
        min-height:710px;
    }

    .gsxsxpwr__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxpwr__core{
        top:28%;

        width:135px;
        height:135px;
    }

    .gsxsxpwr__pulse,
    .gsxsxpwr__sweep{
        top:28%;
    }

    .gsxsxpwr__sweep{
        width:125px;
    }

    .gsxsxpwr__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxpwr__hud-node::after,
    .gsxsxpwr__hud-token{
        display:none;
    }

    .gsxsxpwr__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxpwr__rule-state{
        width:fit-content;
    }

    .gsxsxpwr__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxpwr__terminal-state{
        width:fit-content;
    }

    .gsxsxpwr__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxpwr__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxpwr__hud{
        min-height:900px;
    }

    .gsxsxpwr__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxpwr__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxpwr__hud{
        min-height:1120px;
    }

    .gsxsxpwr__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxpwr__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxpwr__terminal-route span{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxpwr *,
    .gsxsxpwr *::before,
    .gsxsxpwr *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxpwr__scan,
    .gsxsxpwr__orbit,
    .gsxsxpwr__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X — LECTOR DE DISCOS · SOLO MODELOS CON UNIDAD ÓPTICA
   CSS ID EXTERIOR: lector-discos-xbox-series-x
   ROOT: .gsxsxodd
   ========================================================= */

.gsxsxodd{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 11% 10%,
            rgba(101,245,47,.065),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 17%,
            rgba(41,217,239,.035),
            transparent 30%
        ),
        radial-gradient(
            circle at 73% 85%,
            rgba(139,105,255,.024),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxodd *,
.gsxsxodd *::before,
.gsxsxodd *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxodd__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.033) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.033) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxodd__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxodd__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxodd__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,245,47,.14),
            rgba(41,217,239,.11),
            transparent
        );

    box-shadow:
        0 0 14px rgba(101,245,47,.08);

    animation:
        gsxsxoddScan
        13s linear infinite;
}

@keyframes gsxsxoddScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(6800px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxodd__orbit{
    position:absolute;

    width:780px;
    height:780px;

    left:-455px;
    top:1180px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.032);

    border-radius:50%;

    animation:
        gsxsxoddOrbit
        78s linear infinite;
}

.gsxsxodd__orbit::before{
    content:"";

    position:absolute;
    inset:125px;

    border:
        1px dashed rgba(41,217,239,.034);

    border-radius:50%;
}

.gsxsxodd__orbit::after{
    content:"";

    position:absolute;
    inset:245px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxoddOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxodd__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxodd__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxodd__heading-main{
    min-width:0;
}

.gsxsxodd__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9ed58d;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxodd__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxodd__title{
    max-width:1020px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxodd__title span{
    color:var(--green2);
}

.gsxsxodd__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxodd__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxodd__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxodd__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c1aa70;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}

.gsxsxodd__status p{
    margin:0;

    color:#837f6e;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   NOTA DIGITAL
   ========================================================= */

.gsxsxodd__digital{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.018),
            rgba(101,245,47,.016)
        );
}

.gsxsxodd__digital::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:215px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxodd__digital-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.18);

    border-radius:13px;

    color:var(--cyan);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__digital-copy{
    min-width:0;
}

.gsxsxodd__digital-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxodd__digital-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxodd__digital-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(41,217,239,.11);

    border-radius:999px;

    color:#83abb0;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxodd__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxodd__section-label{
    display:block;

    margin-bottom:6px;

    color:#99cf89;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxodd__section-copy{
    max-width:890px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxodd__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8db581;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   RUTA DEL DISCO
   ========================================================= */

.gsxsxodd__route{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(101,245,47,.03),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(6,18,8,.61),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__route::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxodd__route-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:8px;
}

.gsxsxodd__route-grid::before{
    content:"";

    position:absolute;

    left:7%;
    right:7%;
    top:31px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--yellow),
            var(--orange),
            var(--cyan),
            var(--violet),
            var(--green2)
        );

    opacity:.18;
}

.gsxsxodd__route-node{
    --route-color:var(--green);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxodd__route-node:nth-child(2){
    --route-color:var(--yellow);
}

.gsxsxodd__route-node:nth-child(3){
    --route-color:var(--orange);
}

.gsxsxodd__route-node:nth-child(4){
    --route-color:var(--cyan);
}

.gsxsxodd__route-node:nth-child(5){
    --route-color:var(--violet);
}

.gsxsxodd__route-node:nth-child(6){
    --route-color:var(--green2);
}

.gsxsxodd__route-circle{
    display:grid !important;
    place-items:center !important;

    width:62px;
    height:62px;

    margin:
        0 auto 9px;

    padding:0 !important;

    border:
        1px solid var(--route-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.98);

    color:var(--route-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;

    box-shadow:
        0 0 13px
        color-mix(
            in srgb,
            var(--route-color) 8%,
            transparent
        );
}

.gsxsxodd__route-node strong{
    display:block;

    color:var(--route-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__route-copy{
    display:block;

    margin-top:3px;

    color:#637467;

    font-size:7px;
    line-height:1.45;
}


/* =========================================================
   TOKEN RUTA
   ========================================================= */

.gsxsxodd__route-token{
    position:absolute;
    z-index:5;

    left:7%;
    top:28px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 10px rgba(101,245,47,.70);

    opacity:0;

    animation:
        gsxsxoddToken
        7s ease-in-out infinite;
}

@keyframes gsxsxoddToken{

    0%{
        left:7%;
        opacity:0;
        background:var(--green);
    }

    7%{
        opacity:1;
    }

    24%{
        background:var(--yellow);
    }

    41%{
        background:var(--orange);
    }

    58%{
        background:var(--cyan);
    }

    75%{
        background:var(--violet);
    }

    94%{
        left:93%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:93%;
        opacity:0;
    }

}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxodd__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.015),
            rgba(101,245,47,.012)
        );
}

.gsxsxodd__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.17);

    border-radius:13px;

    color:var(--yellow);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__principle-copy{
    min-width:0;
}

.gsxsxodd__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8d1b9;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxodd__principle-copy span{
    display:block;

    color:#817c6d;

    font-size:11px;
    line-height:1.62;
}

.gsxsxodd__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:999px;

    color:#a99a70;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SÍNTOMAS
   ========================================================= */

.gsxsxodd__symptoms{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,13,.44),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__symptoms::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxodd__symptoms-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:9px;
}

.gsxsxodd__symptom{
    --sym-color:var(--green);

    position:relative;

    min-width:0;

    min-height:205px;

    padding:
        16px 14px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.52);
}

.gsxsxodd__symptom:nth-child(2){
    --sym-color:var(--yellow);
}

.gsxsxodd__symptom:nth-child(3){
    --sym-color:var(--orange);
}

.gsxsxodd__symptom:nth-child(4){
    --sym-color:var(--cyan);
}

.gsxsxodd__symptom:nth-child(5){
    --sym-color:var(--violet);
}

.gsxsxodd__symptom:nth-child(6){
    --sym-color:var(--green2);
}

.gsxsxodd__symptom:nth-child(7){
    --sym-color:var(--blue);
}

.gsxsxodd__symptom:nth-child(8){
    --sym-color:var(--red);
}

.gsxsxodd__symptom:nth-child(9){
    --sym-color:var(--orange);
}

.gsxsxodd__symptom::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:76px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sym-color),
            transparent
        );
}

.gsxsxodd__symptom-head{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    margin-bottom:11px;
}

.gsxsxodd__symptom-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    flex:0 0 36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--sym-color);

    border-radius:8px;

    color:var(--sym-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__symptom-state{
    display:inline-flex;
    align-items:center;

    max-width:118px;

    padding:
        5px 6px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:6px;

    color:#aa9667;

    font-size:7px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxodd__symptom-state--remote{
    border-color:
        rgba(41,217,239,.08);

    color:#759da1;
}

.gsxsxodd__symptom h4{
    margin:0;

    color:#dce9de;

    font-size:11px;
    line-height:1.48;
    font-weight:700;
}

.gsxsxodd__symptom p{
    margin:
        7px 0 0;

    color:#707f73;

    font-size:9px;
    line-height:1.58;
}

.gsxsxodd__symptom-note{
    display:block;

    margin-top:9px;

    color:var(--sym-color);

    font-size:8px;
    line-height:1.42;
    font-weight:700;
}


/* =========================================================
   DISCO O CONSOLA
   ========================================================= */

.gsxsxodd__discfilter{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(41,217,239,.032),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,13,.44),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__discfilter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxodd__discfilter-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxodd__discfilter-card{
    --disc-color:var(--cyan);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxodd__discfilter-card:nth-child(2){
    --disc-color:var(--green);
}

.gsxsxodd__discfilter-card:nth-child(3){
    --disc-color:var(--yellow);
}

.gsxsxodd__discfilter-card:nth-child(4){
    --disc-color:var(--violet);
}

.gsxsxodd__discfilter-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--disc-color);

    border-radius:8px;

    color:var(--disc-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__discfilter-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--disc-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__discfilter-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   DISCO ATORADO / DAÑO MECÁNICO
   ========================================================= */

.gsxsxodd__mechanical{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,97,119,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(21,5,8,.33),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__mechanical::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:200px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--yellow),
            transparent
        );
}

.gsxsxodd__mechanical-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxodd__mechanical-code{
    display:grid !important;
    place-items:center !important;

    width:66px;
    height:66px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.20);

    border-radius:14px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__mechanical-copy{
    min-width:0;
}

.gsxsxodd__mechanical-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d7b8bb;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxodd__mechanical-copy span{
    display:block;

    color:#807376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxodd__mechanical-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,97,119,.11);

    border-radius:8px;

    color:#b0878e;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FILTRO DE COTIZACIÓN
   ========================================================= */

.gsxsxodd__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            var(--green),
            transparent
        );
}

.gsxsxodd__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:7px;

    margin-bottom:17px;
}

.gsxsxodd__filter-flow::before{
    content:"";

    position:absolute;

    left:8%;
    right:8%;
    top:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            var(--yellow),
            var(--red),
            var(--violet),
            var(--green2)
        );

    opacity:.18;
}

.gsxsxodd__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxodd__filter-step:nth-child(2){
    --filter-color:var(--green);
}

.gsxsxodd__filter-step:nth-child(3){
    --filter-color:var(--yellow);
}

.gsxsxodd__filter-step:nth-child(4){
    --filter-color:var(--red);
}

.gsxsxodd__filter-step:nth-child(5){
    --filter-color:var(--violet);
}

.gsxsxodd__filter-step:nth-child(6){
    --filter-color:var(--green2);
}

.gsxsxodd__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__filter-step strong{
    display:block;

    color:var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__filter-copy{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}

.gsxsxodd__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.013),
            rgba(255,200,87,.010)
        );
}

.gsxsxodd__filter-result-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.17);

    border-radius:10px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__filter-result-copy{
    min-width:0;

    color:#807276;

    font-size:10px;
    line-height:1.62;
}

.gsxsxodd__filter-result-copy strong{
    color:#d2b8bc;
    font-weight:600;
}

.gsxsxodd__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD
   ========================================================= */

.gsxsxodd__hud{
    position:relative;

    min-height:570px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(101,245,47,.06),
            transparent 27%
        ),
        radial-gradient(
            circle at 50% 38%,
            rgba(41,217,239,.023),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(3,14,9,.67),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(101,245,47,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.024) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxodd__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxodd__hud-code{
    color:#92c58a;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#92bd87;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxodd__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);

    animation:
        gsxsxoddState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxoddState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   DISCO CENTRAL
   ========================================================= */

.gsxsxodd__disc{
    position:absolute;
    z-index:11;

    left:50%;
    top:37%;

    width:180px;
    height:180px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(101,245,47,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle at center,
            transparent 0 13%,
            rgba(2,8,4,.98) 14% 29%,
            rgba(101,245,47,.08) 30% 31%,
            rgba(2,8,4,.98) 32% 64%,
            rgba(41,217,239,.08) 65% 66%,
            rgba(2,8,4,.96) 67%
        );

    box-shadow:
        0 0 38px rgba(101,245,47,.08);

    animation:
        gsxsxoddDiscSpin
        15s linear infinite;
}

.gsxsxodd__disc::before{
    content:"";

    position:absolute;

    inset:-39px;

    border:
        1px dashed rgba(41,217,239,.12);

    border-radius:50%;

    animation:
        gsxsxoddRingSpin
        15s linear infinite reverse;
}

.gsxsxodd__disc::after{
    content:"";

    position:absolute;

    inset:-82px;

    border:
        1px solid rgba(139,105,255,.055);

    border-radius:50%;
}

@keyframes gsxsxoddDiscSpin{

    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}

@keyframes gsxsxoddRingSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxodd__disc-core{
    position:relative;
    z-index:4;

    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    border:
        1px solid rgba(101,245,47,.22);

    border-radius:50%;

    background:
        rgba(2,8,4,.96);

    color:var(--green2);

    font-size:10px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;

    animation:
        gsxsxoddDiscCounter
        15s linear infinite;
}

@keyframes gsxsxoddDiscCounter{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(-360deg);
    }

}


/* =========================================================
   BARRIDO ÓPTICO DECORATIVO
   ========================================================= */

.gsxsxodd__beam{
    position:absolute;
    z-index:12;

    left:50%;
    top:37%;

    width:155px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.75),
            rgba(41,217,239,.10),
            transparent
        );

    box-shadow:
        0 0 8px rgba(41,217,239,.28);

    animation:
        gsxsxoddBeam
        4.7s linear infinite;
}

.gsxsxodd__beam::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.74);
}

@keyframes gsxsxoddBeam{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   PULSOS
   ========================================================= */

.gsxsxodd__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:37%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(101,245,47,.22);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxoddPulse
        3.6s ease-out infinite;
}

.gsxsxodd__pulse--b{
    animation-delay:1.2s;

    border-color:
        rgba(41,217,239,.20);
}

.gsxsxodd__pulse--c{
    animation-delay:2.4s;

    border-color:
        rgba(139,105,255,.16);
}

@keyframes gsxsxoddPulse{

    0%{
        opacity:.62;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.45);
    }

}


/* =========================================================
   HUD ROUTE
   ========================================================= */

.gsxsxodd__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxodd__hud-node{
    --node-color:var(--green);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxodd__hud-node:nth-child(2){
    --node-color:var(--yellow);
}

.gsxsxodd__hud-node:nth-child(3){
    --node-color:var(--orange);
}

.gsxsxodd__hud-node:nth-child(4){
    --node-color:var(--cyan);
}

.gsxsxodd__hud-node:nth-child(5){
    --node-color:var(--violet);
}

.gsxsxodd__hud-node:nth-child(6){
    --node-color:var(--green2);
}

.gsxsxodd__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(101,245,47,.07)
        );
}

.gsxsxodd__hud-node:last-child::after{
    display:none;
}

.gsxsxodd__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__hud-node-title{
    display:block;

    color:var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxodd__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}


/* =========================================================
   HUD TOKEN
   ========================================================= */

.gsxsxodd__hud-token{
    position:absolute;
    z-index:22;

    left:6%;
    bottom:139px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 10px rgba(101,245,47,.72);

    opacity:0;

    animation:
        gsxsxoddHudToken
        7s linear infinite;
}

@keyframes gsxsxoddHudToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--green);
    }

    7%{
        opacity:1;
    }

    25%{
        background:var(--yellow);
    }

    43%{
        background:var(--orange);
    }

    61%{
        background:var(--cyan);
    }

    79%{
        background:var(--violet);
    }

    94%{
        left:94%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN HUD
   ========================================================= */

.gsxsxodd__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(101,245,47,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#708273;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxodd__equation b{
    color:var(--green2);
}


/* =========================================================
   INTERVENCIÓN PREVIA
   ========================================================= */

.gsxsxodd__previous{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.08);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 89% 9%,
            rgba(139,105,255,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxodd__previous::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--red),
            transparent
        );
}

.gsxsxodd__previous-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;
}

.gsxsxodd__previous-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(139,105,255,.18);

    border-radius:12px;

    color:var(--violet);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__previous-copy{
    min-width:0;

    color:#777283;

    font-size:10px;
    line-height:1.62;
}

.gsxsxodd__previous-copy strong{
    display:block;

    margin-bottom:4px;

    color:#b9afd1;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxodd__previous-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(139,105,255,.10);

    border-radius:8px;

    color:#998db8;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxodd__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(101,245,47,.010)
        );
}

.gsxsxodd__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxodd__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxodd__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxodd__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxodd__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(6,18,8,.88),
            rgba(2,7,3,.98)
        );
}

.gsxsxodd__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxodd__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxodd__terminal-dot{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxodd__terminal-dot--red{
    background:var(--red);
}

.gsxsxodd__terminal-dot--yellow{
    background:var(--yellow);
}

.gsxsxodd__terminal-dot--green{
    background:var(--green);
}

.gsxsxodd__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxodd__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxodd__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxodd__terminal-item{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxodd__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxodd__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxodd__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxodd__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxodd__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxodd__symptoms-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxodd__discfilter-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxodd__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxodd__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxodd__status{
        max-width:650px;
    }

    .gsxsxodd__route-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:17px 8px;
    }

    .gsxsxodd__route-grid::before,
    .gsxsxodd__route-token{
        display:none;
    }

    .gsxsxodd__filter-flow{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:16px 8px;
    }

    .gsxsxodd__filter-flow::before{
        display:none;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxodd__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxodd__scan,
    .gsxsxodd__orbit{
        display:none;
    }

    .gsxsxodd__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxodd__heading{
        display:block;
    }

    .gsxsxodd__status{
        margin-top:19px;
    }

    .gsxsxodd__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxodd__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxodd__digital,
    .gsxsxodd__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxodd__digital-state,
    .gsxsxodd__principle-state{
        width:fit-content;
    }

    .gsxsxodd__route,
    .gsxsxodd__symptoms,
    .gsxsxodd__discfilter,
    .gsxsxodd__mechanical,
    .gsxsxodd__filter,
    .gsxsxodd__previous{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxodd__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxodd__section-state{
        width:fit-content;
    }

    .gsxsxodd__route-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxodd__symptoms-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxodd__discfilter-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxodd__mechanical-layout,
    .gsxsxodd__previous-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxodd__mechanical-state,
    .gsxsxodd__previous-state{
        width:fit-content;
    }

    .gsxsxodd__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxodd__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxodd__filter-result-state{
        width:fit-content;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxodd__hud{
        min-height:720px;
    }

    .gsxsxodd__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxodd__disc{
        top:28%;

        width:145px;
        height:145px;
    }

    .gsxsxodd__beam,
    .gsxsxodd__pulse{
        top:28%;
    }

    .gsxsxodd__beam{
        width:120px;
    }

    .gsxsxodd__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxodd__hud-node::after,
    .gsxsxodd__hud-token{
        display:none;
    }

    .gsxsxodd__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxodd__rule-state{
        width:fit-content;
    }

    .gsxsxodd__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxodd__terminal-state{
        width:fit-content;
    }

    .gsxsxodd__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxodd__route-grid,
    .gsxsxodd__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxodd__hud{
        min-height:910px;
    }

    .gsxsxodd__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxodd__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxodd__hud{
        min-height:1130px;
    }

    .gsxsxodd__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxodd__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxodd__terminal-item{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxodd *,
    .gsxsxodd *::before,
    .gsxsxodd *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxodd__scan,
    .gsxsxodd__orbit,
    .gsxsxodd__route-token,
    .gsxsxodd__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — TEMPERATURA Y REFRIGERACIÓN
   CSS ID EXTERIOR:
   temperatura-refrigeracion-xbox-series-x

   ROOT: .gsxsxtherm
   ========================================================= */

.gsxsxtherm{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(101,245,47,.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 16%,
            rgba(255,200,87,.045),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 85%,
            rgba(41,217,239,.025),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxtherm *,
.gsxsxtherm *::before,
.gsxsxtherm *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxtherm__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.032) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxtherm__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.91),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.91)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxtherm__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxtherm__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,245,47,.12),
            rgba(255,200,87,.13),
            rgba(41,217,239,.09),
            transparent
        );

    box-shadow:
        0 0 14px rgba(255,200,87,.07);

    animation:
        gsxsxthermScan
        13s linear infinite;
}

@keyframes gsxsxthermScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(7000px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxtherm__orbit{
    position:absolute;

    width:800px;
    height:800px;

    right:-470px;
    top:1220px;

    pointer-events:none;

    border:
        1px solid rgba(255,200,87,.028);

    border-radius:50%;

    animation:
        gsxsxthermOrbit
        78s linear infinite;
}

.gsxsxtherm__orbit::before{
    content:"";

    position:absolute;
    inset:125px;

    border:
        1px dashed rgba(41,217,239,.032);

    border-radius:50%;
}

.gsxsxtherm__orbit::after{
    content:"";

    position:absolute;
    inset:245px;

    border:
        1px solid rgba(101,245,47,.024);

    border-radius:50%;
}

@keyframes gsxsxthermOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxtherm__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxtherm__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxtherm__heading-main{
    min-width:0;
}

.gsxsxtherm__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(255,200,87,.14);

    border-radius:999px;

    background:
        rgba(255,200,87,.022);

    color:#c6ad69;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxtherm__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 8px rgba(255,200,87,.55);
}

.gsxsxtherm__title{
    max-width:1030px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxtherm__title span{
    color:var(--yellow);
}

.gsxsxtherm__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxtherm__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxtherm__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxtherm__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c1aa70;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}

.gsxsxtherm__status p{
    margin:0;

    color:#837f6e;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxtherm__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.015),
            rgba(255,200,87,.014)
        );
}

.gsxsxtherm__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            transparent
        );
}

.gsxsxtherm__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxtherm__principle-copy{
    min-width:0;
}

.gsxsxtherm__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxtherm__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxtherm__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:999px;

    color:#aa9a70;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxtherm__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxtherm__section-label{
    display:block;

    margin-bottom:6px;

    color:#c3aa68;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxtherm__section-copy{
    max-width:900px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxtherm__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:999px;

    color:#aa9a70;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   RUTA TÉRMICA
   ========================================================= */

.gsxsxtherm__route{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(255,200,87,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(16,14,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__route::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            var(--yellow),
            transparent
        );
}

.gsxsxtherm__route-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:8px;
}

.gsxsxtherm__route-grid::before{
    content:"";

    position:absolute;

    left:7%;
    right:7%;
    top:31px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            var(--yellow),
            var(--orange),
            var(--violet),
            var(--green2)
        );

    opacity:.18;
}

.gsxsxtherm__route-node{
    --route-color:var(--green);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxtherm__route-node:nth-child(2){
    --route-color:var(--cyan);
}

.gsxsxtherm__route-node:nth-child(3){
    --route-color:var(--yellow);
}

.gsxsxtherm__route-node:nth-child(4){
    --route-color:var(--orange);
}

.gsxsxtherm__route-node:nth-child(5){
    --route-color:var(--violet);
}

.gsxsxtherm__route-node:nth-child(6){
    --route-color:var(--green2);
}

.gsxsxtherm__route-circle{
    display:grid !important;
    place-items:center !important;

    width:62px;
    height:62px;

    margin:
        0 auto 9px;

    padding:0 !important;

    border:
        1px solid var(--route-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.98);

    color:var(--route-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxtherm__route-node strong{
    display:block;

    color:var(--route-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__route-copy{
    display:block;

    margin-top:3px;

    color:#657367;

    font-size:7px;
    line-height:1.45;
}


/* =========================================================
   TOKEN RUTA
   ========================================================= */

.gsxsxtherm__route-token{
    position:absolute;
    z-index:5;

    left:7%;
    top:28px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 10px rgba(101,245,47,.70);

    opacity:0;

    animation:
        gsxsxthermRouteToken
        7s ease-in-out infinite;
}

@keyframes gsxsxthermRouteToken{

    0%{
        left:7%;
        opacity:0;
        background:var(--green);
    }

    7%{
        opacity:1;
    }

    24%{
        background:var(--cyan);
    }

    41%{
        background:var(--yellow);
    }

    58%{
        background:var(--orange);
    }

    75%{
        background:var(--violet);
    }

    94%{
        left:93%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:93%;
        opacity:0;
    }

}


/* =========================================================
   BLOQUE DE FLUJO
   ========================================================= */

.gsxsxtherm__flow{
    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);

    gap:18px;

    margin-bottom:18px;
}


/* =========================================================
   DIAGRAMA
   ========================================================= */

.gsxsxtherm__flow-visual{
    position:relative;

    min-height:480px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(41,217,239,.055),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(3,15,13,.54),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__flow-visual::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(41,217,239,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101,245,47,.025) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxtherm__flow-head{
    position:absolute;
    z-index:20;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;
}

.gsxsxtherm__flow-head strong{
    color:#89b8bc;

    font-size:10px;
    line-height:1.35;

    text-transform:uppercase;
}

.gsxsxtherm__flow-head span{
    color:#65786f;

    font-size:8px;
    line-height:1.35;
}


/* =========================================================
   CUERPO DE CONSOLA ABSTRACTO
   ========================================================= */

.gsxsxtherm__console{
    position:absolute;
    z-index:5;

    left:50%;
    top:53%;

    width:200px;
    height:300px;

    transform:
        translate(-50%,-50%);

    border:
        1px solid rgba(101,245,47,.18);

    border-radius:18px 18px 11px 11px;

    background:
        linear-gradient(
            180deg,
            rgba(8,25,11,.92),
            rgba(2,8,4,.99)
        );

    box-shadow:
        0 0 30px rgba(101,245,47,.05);
}

.gsxsxtherm__console::before{
    content:"";

    position:absolute;

    left:22px;
    right:22px;
    top:17px;

    height:47px;

    border:
        1px solid rgba(101,245,47,.13);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(101,245,47,.13),
            transparent 60%
        );

    box-shadow:
        0 0 18px rgba(101,245,47,.05);
}

.gsxsxtherm__console::after{
    content:"";

    position:absolute;

    left:17px;
    right:17px;
    bottom:16px;

    height:46px;

    border-top:
        1px solid rgba(41,217,239,.10);

    border-bottom:
        1px solid rgba(41,217,239,.07);

    opacity:.8;
}


/* =========================================================
   FLECHAS DE AIRE
   ========================================================= */

.gsxsxtherm__air{
    position:absolute;
    z-index:8;

    left:50%;

    width:4px;
    height:85px;

    transform:
        translateX(-50%);

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--cyan),
            var(--yellow),
            transparent
        );

    filter:
        drop-shadow(0 0 5px rgba(41,217,239,.30));

    opacity:.75;

    animation:
        gsxsxthermAir
        2.5s linear infinite;
}

.gsxsxtherm__air::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-7px;

    width:11px;
    height:11px;

    border-right:
        2px solid var(--yellow);

    border-bottom:
        2px solid var(--yellow);

    transform:
        translateX(-50%)
        rotate(45deg);
}

.gsxsxtherm__air--1{
    top:100px;
}

.gsxsxtherm__air--2{
    top:184px;

    animation-delay:.6s;
}

.gsxsxtherm__air--3{
    top:270px;

    animation-delay:1.2s;
}

@keyframes gsxsxthermAir{

    0%{
        opacity:.20;
        transform:
            translateX(-50%)
            translateY(12px);
    }

    50%{
        opacity:.85;
    }

    100%{
        opacity:.15;
        transform:
            translateX(-50%)
            translateY(-10px);
    }

}


/* =========================================================
   NODOS DE FLUJO
   ========================================================= */

.gsxsxtherm__flow-node{
    --flow-color:var(--cyan);

    position:absolute;
    z-index:12;

    width:124px;

    padding:
        10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--flow-color) 15%,
            transparent
        );

    border-radius:10px;

    background:
        rgba(2,10,5,.91);

    color:#748076;

    font-size:8px;
    line-height:1.45;
}

.gsxsxtherm__flow-node strong{
    display:block;

    margin-bottom:3px;

    color:var(--flow-color);

    font-size:8px;
    line-height:1.35;

    text-transform:uppercase;
}

.gsxsxtherm__flow-node--in{
    --flow-color:var(--cyan);

    left:18px;
    bottom:51px;
}

.gsxsxtherm__flow-node--fan{
    --flow-color:var(--green);

    right:18px;
    top:104px;
}

.gsxsxtherm__flow-node--heat{
    --flow-color:var(--yellow);

    right:18px;
    top:230px;
}

.gsxsxtherm__flow-node--out{
    --flow-color:var(--orange);

    left:18px;
    top:78px;
}


/* =========================================================
   TEXTO FLUJO
   ========================================================= */

.gsxsxtherm__flow-copy{
    position:relative;

    padding:22px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.075);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(17,14,4,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__flow-copy::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green),
            transparent
        );
}

.gsxsxtherm__flow-copy h3{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxtherm__flow-copy > p{
    margin:
        9px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxtherm__flow-list{
    display:grid;

    gap:8px;

    margin-top:18px;
}

.gsxsxtherm__flow-item{
    --item-color:var(--cyan);

    display:grid;

    grid-template-columns:
        39px minmax(0,1fr);

    gap:10px;

    align-items:start;

    padding:
        11px;

    border:
        1px solid rgba(41,217,239,.045);

    border-radius:9px;

    background:
        rgba(3,11,6,.40);
}

.gsxsxtherm__flow-item:nth-child(2){
    --item-color:var(--green);
}

.gsxsxtherm__flow-item:nth-child(3){
    --item-color:var(--yellow);
}

.gsxsxtherm__flow-item:nth-child(4){
    --item-color:var(--violet);
}

.gsxsxtherm__flow-item-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--item-color);

    border-radius:8px;

    color:var(--item-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxtherm__flow-item-copy{
    min-width:0;

    color:#707f73;

    font-size:9px;
    line-height:1.55;
}

.gsxsxtherm__flow-item-copy strong{
    display:block;

    margin-bottom:2px;

    color:var(--item-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SÍNTOMAS
   ========================================================= */

.gsxsxtherm__symptoms{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(16,14,5,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__symptoms::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--cyan),
            transparent
        );
}

.gsxsxtherm__symptoms-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxtherm__symptom{
    --sym-color:var(--yellow);

    position:relative;

    min-width:0;

    min-height:198px;

    padding:
        16px 13px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.52);
}

.gsxsxtherm__symptom:nth-child(2){
    --sym-color:var(--orange);
}

.gsxsxtherm__symptom:nth-child(3){
    --sym-color:var(--cyan);
}

.gsxsxtherm__symptom:nth-child(4){
    --sym-color:var(--red);
}

.gsxsxtherm__symptom:nth-child(5){
    --sym-color:var(--green);
}

.gsxsxtherm__symptom:nth-child(6){
    --sym-color:var(--blue);
}

.gsxsxtherm__symptom:nth-child(7){
    --sym-color:var(--violet);
}

.gsxsxtherm__symptom:nth-child(8){
    --sym-color:var(--red);
}

.gsxsxtherm__symptom::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:75px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sym-color),
            transparent
        );
}

.gsxsxtherm__symptom-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    margin-bottom:11px;
}

.gsxsxtherm__symptom-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    flex:0 0 36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--sym-color);

    border-radius:8px;

    color:var(--sym-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxtherm__symptom-state{
    display:inline-flex;
    align-items:center;

    max-width:118px;

    padding:
        5px 6px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:6px;

    color:#aa9667;

    font-size:7px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxtherm__symptom-state--remote{
    border-color:
        rgba(41,217,239,.08);

    color:#769da2;
}

.gsxsxtherm__symptom h4{
    margin:0;

    color:#dce9de;

    font-size:11px;
    line-height:1.48;
    font-weight:700;
}

.gsxsxtherm__symptom p{
    margin:
        7px 0 0;

    color:#707f73;

    font-size:9px;
    line-height:1.58;
}

.gsxsxtherm__symptom-note{
    display:block;

    margin-top:9px;

    color:var(--sym-color);

    font-size:8px;
    line-height:1.42;
    font-weight:700;
}


/* =========================================================
   NO CONFUNDIR
   ========================================================= */

.gsxsxtherm__notalways{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,13,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__notalways::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            transparent
        );
}

.gsxsxtherm__notalways-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.gsxsxtherm__notalways-card{
    --na-color:var(--cyan);

    min-width:0;

    padding:
        17px 14px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:11px;

    background:
        rgba(3,11,6,.45);
}

.gsxsxtherm__notalways-card:nth-child(2){
    --na-color:var(--yellow);
}

.gsxsxtherm__notalways-card:nth-child(3){
    --na-color:var(--green);
}

.gsxsxtherm__notalways-code{
    display:grid !important;
    place-items:center !important;

    width:40px;
    height:40px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--na-color);

    border-radius:8px;

    color:var(--na-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__notalways-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--na-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__notalways-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   COMPROBACIONES EXTERNAS
   ========================================================= */

.gsxsxtherm__precheck{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(5,17,7,.45),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__precheck::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:205px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxtherm__precheck-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxtherm__precheck-card{
    --pre-color:var(--green);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(101,245,47,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxtherm__precheck-card:nth-child(2){
    --pre-color:var(--cyan);
}

.gsxsxtherm__precheck-card:nth-child(3){
    --pre-color:var(--yellow);
}

.gsxsxtherm__precheck-card:nth-child(4){
    --pre-color:var(--violet);
}

.gsxsxtherm__precheck-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--pre-color);

    border-radius:8px;

    color:var(--pre-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__precheck-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--pre-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__precheck-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   ADVERTENCIA
   ========================================================= */

.gsxsxtherm__warning{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,97,119,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(21,5,8,.33),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__warning::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:200px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--yellow),
            transparent
        );
}

.gsxsxtherm__warning-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxtherm__warning-code{
    display:grid !important;
    place-items:center !important;

    width:66px;
    height:66px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.20);

    border-radius:14px;

    color:var(--red);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__warning-copy{
    min-width:0;
}

.gsxsxtherm__warning-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d7b8bb;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxtherm__warning-copy span{
    display:block;

    color:#807376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxtherm__warning-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,97,119,.11);

    border-radius:8px;

    color:#b0878e;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FILTRO DE COTIZACIÓN
   ========================================================= */

.gsxsxtherm__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:230px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            var(--green),
            transparent
        );
}

.gsxsxtherm__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:7px;

    margin-bottom:17px;
}

.gsxsxtherm__filter-flow::before{
    content:"";

    position:absolute;

    left:8%;
    right:8%;
    top:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            var(--orange),
            var(--red),
            var(--violet),
            var(--green)
        );

    opacity:.18;
}

.gsxsxtherm__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxtherm__filter-step:nth-child(2){
    --filter-color:var(--yellow);
}

.gsxsxtherm__filter-step:nth-child(3){
    --filter-color:var(--orange);
}

.gsxsxtherm__filter-step:nth-child(4){
    --filter-color:var(--red);
}

.gsxsxtherm__filter-step:nth-child(5){
    --filter-color:var(--violet);
}

.gsxsxtherm__filter-step:nth-child(6){
    --filter-color:var(--green);
}

.gsxsxtherm__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__filter-step strong{
    display:block;

    color:var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__filter-copy{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}

.gsxsxtherm__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.013),
            rgba(255,200,87,.010)
        );
}

.gsxsxtherm__filter-result-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.17);

    border-radius:10px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__filter-result-copy{
    min-width:0;

    color:#807276;

    font-size:10px;
    line-height:1.62;
}

.gsxsxtherm__filter-result-copy strong{
    color:#d2b8bc;
    font-weight:600;
}

.gsxsxtherm__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD
   ========================================================= */

.gsxsxtherm__hud{
    position:relative;

    min-height:580px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255,200,87,.065),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 38%,
            rgba(41,217,239,.022),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(15,13,5,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(255,200,87,.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.024) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxtherm__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxtherm__hud-code{
    color:#c0a966;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(255,200,87,.11);

    border-radius:999px;

    color:#ad9b6d;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxtherm__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 8px rgba(255,200,87,.58);

    animation:
        gsxsxthermState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxthermState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   CORE TÉRMICO
   ========================================================= */

.gsxsxtherm__core{
    position:absolute;
    z-index:11;

    left:50%;
    top:38%;

    width:170px;
    height:170px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(255,200,87,.25);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,97,119,.09) 0%,
            rgba(255,200,87,.09) 30%,
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 40px rgba(255,200,87,.07);

    animation:
        gsxsxthermCore
        3.2s ease-in-out infinite;
}

.gsxsxtherm__core::before{
    content:"";

    position:absolute;
    inset:-42px;

    border:
        1px dashed rgba(41,217,239,.12);

    border-radius:50%;

    animation:
        gsxsxthermRing
        15s linear infinite;
}

.gsxsxtherm__core::after{
    content:"";

    position:absolute;
    inset:-86px;

    border:
        1px solid rgba(101,245,47,.05);

    border-radius:50%;
}

@keyframes gsxsxthermCore{

    0%,
    100%{
        box-shadow:
            0 0 22px rgba(255,200,87,.05);
    }

    50%{
        box-shadow:
            0 0 48px rgba(255,200,87,.15);
    }

}

@keyframes gsxsxthermRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxtherm__core-copy{
    position:relative;
    z-index:3;

    text-align:center;
}

.gsxsxtherm__core-title{
    display:block;

    color:var(--yellow);

    font-size:15px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__core-sub{
    display:block;

    margin-top:4px;

    color:#817a65;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS
   ========================================================= */

.gsxsxtherm__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:38%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(255,200,87,.22);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxthermPulse
        3.6s ease-out infinite;
}

.gsxsxtherm__pulse--b{
    animation-delay:1.2s;

    border-color:
        rgba(41,217,239,.19);
}

.gsxsxtherm__pulse--c{
    animation-delay:2.4s;

    border-color:
        rgba(101,245,47,.16);
}

@keyframes gsxsxthermPulse{

    0%{
        opacity:.62;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.45);
    }

}


/* =========================================================
   SWEEP
   ========================================================= */

.gsxsxtherm__sweep{
    position:absolute;
    z-index:8;

    left:50%;
    top:38%;

    width:155px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.75),
            rgba(255,200,87,.12),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.26);

    animation:
        gsxsxthermSweep
        4.8s linear infinite;
}

.gsxsxtherm__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxthermSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   HUD ROUTE
   ========================================================= */

.gsxsxtherm__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxtherm__hud-node{
    --node-color:var(--cyan);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxtherm__hud-node:nth-child(2){
    --node-color:var(--green);
}

.gsxsxtherm__hud-node:nth-child(3){
    --node-color:var(--yellow);
}

.gsxsxtherm__hud-node:nth-child(4){
    --node-color:var(--orange);
}

.gsxsxtherm__hud-node:nth-child(5){
    --node-color:var(--violet);
}

.gsxsxtherm__hud-node:nth-child(6){
    --node-color:var(--green2);
}

.gsxsxtherm__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(255,200,87,.07)
        );
}

.gsxsxtherm__hud-node:last-child::after{
    display:none;
}

.gsxsxtherm__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__hud-node-title{
    display:block;

    color:var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxtherm__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}


/* =========================================================
   HUD TOKEN
   ========================================================= */

.gsxsxtherm__hud-token{
    position:absolute;
    z-index:22;

    left:6%;
    bottom:139px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.72);

    opacity:0;

    animation:
        gsxsxthermHudToken
        7s linear infinite;
}

@keyframes gsxsxthermHudToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--cyan);
    }

    7%{
        opacity:1;
    }

    25%{
        background:var(--green);
    }

    43%{
        background:var(--yellow);
    }

    61%{
        background:var(--orange);
    }

    79%{
        background:var(--violet);
    }

    94%{
        left:94%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN
   ========================================================= */

.gsxsxtherm__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(255,200,87,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#7f7965;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxtherm__equation b{
    color:var(--yellow);
}


/* =========================================================
   INTERVENCIÓN PREVIA
   ========================================================= */

.gsxsxtherm__previous{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.08);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 89% 9%,
            rgba(139,105,255,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxtherm__previous::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--yellow),
            transparent
        );
}

.gsxsxtherm__previous-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;
}

.gsxsxtherm__previous-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(139,105,255,.18);

    border-radius:12px;

    color:var(--violet);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__previous-copy{
    min-width:0;

    color:#777283;

    font-size:10px;
    line-height:1.62;
}

.gsxsxtherm__previous-copy strong{
    display:block;

    margin-bottom:4px;

    color:#b9afd1;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxtherm__previous-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(139,105,255,.10);

    border-radius:8px;

    color:#998db8;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxtherm__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(101,245,47,.010)
        );
}

.gsxsxtherm__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxtherm__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxtherm__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxtherm__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxtherm__terminal{
    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(16,14,5,.48),
            rgba(2,7,3,.98)
        );
}

.gsxsxtherm__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(255,200,87,.06);

    background:
        rgba(12,11,4,.68);
}

.gsxsxtherm__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxtherm__terminal-dot{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxtherm__terminal-dot--red{
    background:var(--red);
}

.gsxsxtherm__terminal-dot--yellow{
    background:var(--yellow);
}

.gsxsxtherm__terminal-dot--green{
    background:var(--green);
}

.gsxsxtherm__terminal-name{
    color:#716c5d;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxtherm__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxtherm__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxtherm__terminal-item{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(255,200,87,.045);

    border-radius:7px;

    background:
        rgba(8,10,4,.44);

    color:#777364;

    font-size:9px;
    line-height:1.35;
}

.gsxsxtherm__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:9px;

    color:#aa996e;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxtherm__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxtherm__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxtherm__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#777163;
}

.gsxsxtherm__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxtherm__symptoms-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxtherm__precheck-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxtherm__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxtherm__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxtherm__status{
        max-width:650px;
    }

    .gsxsxtherm__route-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:17px 8px;
    }

    .gsxsxtherm__route-grid::before,
    .gsxsxtherm__route-token{
        display:none;
    }

    .gsxsxtherm__flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxtherm__flow-visual{
        min-height:500px;
    }

    .gsxsxtherm__filter-flow{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:16px 8px;
    }

    .gsxsxtherm__filter-flow::before{
        display:none;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxtherm__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxtherm__scan,
    .gsxsxtherm__orbit{
        display:none;
    }

    .gsxsxtherm__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxtherm__heading{
        display:block;
    }

    .gsxsxtherm__status{
        margin-top:19px;
    }

    .gsxsxtherm__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxtherm__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxtherm__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxtherm__principle-state{
        width:fit-content;
    }

    .gsxsxtherm__route,
    .gsxsxtherm__symptoms,
    .gsxsxtherm__notalways,
    .gsxsxtherm__precheck,
    .gsxsxtherm__warning,
    .gsxsxtherm__filter,
    .gsxsxtherm__previous{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxtherm__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxtherm__section-state{
        width:fit-content;
    }

    .gsxsxtherm__route-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxtherm__flow-visual{
        min-height:520px;
    }

    .gsxsxtherm__console{
        width:170px;
        height:275px;
    }

    .gsxsxtherm__flow-node{
        width:105px;

        padding:8px;

        font-size:7px;
    }

    .gsxsxtherm__flow-node--in{
        left:10px;
    }

    .gsxsxtherm__flow-node--out{
        left:10px;
    }

    .gsxsxtherm__flow-node--fan,
    .gsxsxtherm__flow-node--heat{
        right:10px;
    }

    .gsxsxtherm__symptoms-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxtherm__notalways-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxtherm__precheck-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxtherm__warning-layout,
    .gsxsxtherm__previous-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxtherm__warning-state,
    .gsxsxtherm__previous-state{
        width:fit-content;
    }

    .gsxsxtherm__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxtherm__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxtherm__filter-result-state{
        width:fit-content;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxtherm__hud{
        min-height:720px;
    }

    .gsxsxtherm__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxtherm__core{
        top:28%;

        width:140px;
        height:140px;
    }

    .gsxsxtherm__pulse,
    .gsxsxtherm__sweep{
        top:28%;
    }

    .gsxsxtherm__sweep{
        width:125px;
    }

    .gsxsxtherm__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxtherm__hud-node::after,
    .gsxsxtherm__hud-token{
        display:none;
    }

    .gsxsxtherm__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxtherm__rule-state{
        width:fit-content;
    }

    .gsxsxtherm__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxtherm__terminal-state{
        width:fit-content;
    }

    .gsxsxtherm__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxtherm__route-grid,
    .gsxsxtherm__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxtherm__flow-visual{
        min-height:610px;
    }

    .gsxsxtherm__console{
        top:52%;
    }

    .gsxsxtherm__flow-node--out{
        top:72px;
    }

    .gsxsxtherm__flow-node--fan{
        top:130px;
    }

    .gsxsxtherm__flow-node--heat{
        top:auto;
        bottom:122px;
    }

    .gsxsxtherm__hud{
        min-height:920px;
    }

    .gsxsxtherm__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxtherm__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxtherm__flow-node{
        width:96px;
    }

    .gsxsxtherm__hud{
        min-height:1140px;
    }

    .gsxsxtherm__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxtherm__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxtherm__terminal-item{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxtherm *,
    .gsxsxtherm *::before,
    .gsxsxtherm *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxtherm__scan,
    .gsxsxtherm__orbit,
    .gsxsxtherm__route-token,
    .gsxsxtherm__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — SISTEMA / ALMACENAMIENTO / CONECTIVIDAD

   CSS ID EXTERIOR:
   sistema-almacenamiento-conectividad-xbox-series-x

   ROOT: .gsxsxsys
   ========================================================= */

.gsxsxsys{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(101,245,47,.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 16%,
            rgba(139,105,255,.040),
            transparent 29%
        ),
        radial-gradient(
            circle at 72% 84%,
            rgba(41,217,239,.025),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxsys *,
.gsxsxsys *::before,
.gsxsxsys *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxsys__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.030) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxsys__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.92),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.92)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxsys__scan{
    position:absolute;
    inset:0;

    overflow:hidden;
    pointer-events:none;
}

.gsxsxsys__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(101,245,47,.12),
            rgba(41,217,239,.12),
            rgba(139,105,255,.09),
            transparent
        );

    box-shadow:
        0 0 14px rgba(41,217,239,.07);

    animation:
        gsxsxsysScan
        13s linear infinite;
}

@keyframes gsxsxsysScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(7600px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxsys__orbit{
    position:absolute;

    width:820px;
    height:820px;

    left:-475px;
    top:1350px;

    pointer-events:none;

    border:
        1px solid rgba(139,105,255,.028);

    border-radius:50%;

    animation:
        gsxsxsysOrbit
        80s linear infinite;
}

.gsxsxsys__orbit::before{
    content:"";

    position:absolute;
    inset:130px;

    border:
        1px dashed rgba(41,217,239,.032);

    border-radius:50%;
}

.gsxsxsys__orbit::after{
    content:"";

    position:absolute;
    inset:250px;

    border:
        1px solid rgba(101,245,47,.024);

    border-radius:50%;
}

@keyframes gsxsxsysOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxsys__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxsys__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxsys__heading-main{
    min-width:0;
}

.gsxsxsys__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(139,105,255,.14);

    border-radius:999px;

    background:
        rgba(139,105,255,.025);

    color:#a99bd7;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxsys__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--violet);

    box-shadow:
        0 0 8px rgba(139,105,255,.60);
}

.gsxsxsys__title{
    max-width:1030px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxsys__title span{
    color:var(--violet);
}

.gsxsxsys__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxsys__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxsys__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxsys__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c0a970;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}

.gsxsxsys__status p{
    margin:0;

    color:#827e6d;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxsys__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.015),
            rgba(139,105,255,.014)
        );
}

.gsxsxsys__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:215px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--violet),
            var(--green),
            transparent
        );
}

.gsxsxsys__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxsys__principle-copy{
    min-width:0;
}

.gsxsxsys__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxsys__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxsys__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(139,105,255,.11);

    border-radius:999px;

    color:#9d91bb;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxsys__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxsys__section-label{
    display:block;

    margin-bottom:6px;

    color:#9c91c3;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxsys__section-copy{
    max-width:900px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxsys__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(139,105,255,.10);

    border-radius:999px;

    color:#998db7;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TRES FAMILIAS
   ========================================================= */

.gsxsxsys__domains{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(139,105,255,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.28),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__domains::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--blue),
            var(--cyan),
            transparent
        );
}

.gsxsxsys__domains-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;
}

.gsxsxsys__domain{
    --domain-color:var(--violet);

    position:relative;

    min-width:0;

    padding:
        20px 17px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.06);

    border-radius:14px;

    background:
        rgba(3,11,6,.54);
}

.gsxsxsys__domain:nth-child(2){
    --domain-color:var(--blue);
}

.gsxsxsys__domain:nth-child(3){
    --domain-color:var(--cyan);
}

.gsxsxsys__domain::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:90px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--domain-color),
            transparent
        );
}

.gsxsxsys__domain-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin-bottom:12px;
    padding:0 !important;

    border:
        1px solid var(--domain-color);

    border-radius:13px;

    color:var(--domain-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__domain h4{
    margin:0;

    color:var(--domain-color);

    font-size:12px;
    line-height:1.45;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__domain > p{
    margin:
        7px 0 0;

    color:#718075;

    font-size:10px;
    line-height:1.62;
}

.gsxsxsys__domain-list{
    display:grid;

    gap:6px;

    margin-top:13px;
}

.gsxsxsys__domain-item{
    display:grid;

    grid-template-columns:
        6px minmax(0,1fr);

    gap:7px;

    align-items:start;

    color:#68786c;

    font-size:9px;
    line-height:1.5;
}

.gsxsxsys__domain-item::before{
    content:"";

    width:5px;
    height:5px;

    margin-top:5px;

    border-radius:50%;

    background:var(--domain-color);

    box-shadow:
        0 0 6px
        color-mix(
            in srgb,
            var(--domain-color) 35%,
            transparent
        );
}


/* =========================================================
   ALMACENAMIENTO
   ========================================================= */

.gsxsxsys__storage{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(75,142,255,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(75,142,255,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(5,9,20,.32),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__storage::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxsys__storage-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxsys__storage-card{
    --sto-color:var(--blue);

    position:relative;

    min-width:0;

    padding:
        17px 14px;

    overflow:hidden;

    border:
        1px solid rgba(75,142,255,.05);

    border-radius:11px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxsys__storage-card:nth-child(2){
    --sto-color:var(--green);
}

.gsxsxsys__storage-card:nth-child(3){
    --sto-color:var(--cyan);
}

.gsxsxsys__storage-card:nth-child(4){
    --sto-color:var(--yellow);
}

.gsxsxsys__storage-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:65px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sto-color),
            transparent
        );
}

.gsxsxsys__storage-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    margin-bottom:10px;
    padding:0 !important;

    border:
        1px solid var(--sto-color);

    border-radius:9px;

    color:var(--sto-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__storage-card strong{
    display:block;

    margin-bottom:5px;

    color:var(--sto-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__storage-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.58;
}


/* =========================================================
   REGLA DE ALMACENAMIENTO
   ========================================================= */

.gsxsxsys__storage-rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:11px;

    align-items:center;

    margin-top:12px;

    padding:14px;

    border:
        1px solid rgba(255,200,87,.075);

    border-radius:10px;

    background:
        rgba(17,14,4,.24);
}

.gsxsxsys__storage-rule-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.15);

    border-radius:8px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__storage-rule-copy{
    color:#827d6b;

    font-size:9px;
    line-height:1.58;
}

.gsxsxsys__storage-rule-copy strong{
    color:#c9bd94;
    font-weight:600;
}


/* =========================================================
   SÍNTOMAS
   ========================================================= */

.gsxsxsys__symptoms{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,13,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__symptoms::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:215px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--blue),
            var(--cyan),
            transparent
        );
}

.gsxsxsys__symptoms-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxsys__symptom{
    --sym-color:var(--violet);

    position:relative;

    min-width:0;

    min-height:200px;

    padding:
        16px 13px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.05);

    border-radius:11px;

    background:
        rgba(3,11,6,.52);
}

.gsxsxsys__symptom[data-type="storage"]{
    --sym-color:var(--blue);
}

.gsxsxsys__symptom[data-type="network"]{
    --sym-color:var(--cyan);
}

.gsxsxsys__symptom[data-type="warning"]{
    --sym-color:var(--yellow);
}

.gsxsxsys__symptom[data-type="previous"]{
    --sym-color:var(--red);
}

.gsxsxsys__symptom::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:75px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--sym-color),
            transparent
        );
}

.gsxsxsys__symptom-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:8px;

    margin-bottom:11px;
}

.gsxsxsys__symptom-code{
    display:grid !important;
    place-items:center !important;

    width:36px;
    height:36px;

    flex:0 0 36px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--sym-color);

    border-radius:8px;

    color:var(--sym-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__symptom-state{
    display:inline-flex;
    align-items:center;

    max-width:118px;

    padding:
        5px 6px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:6px;

    color:#aa9667;

    font-size:7px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxsys__symptom-state--remote{
    border-color:
        rgba(41,217,239,.08);

    color:#769da2;
}

.gsxsxsys__symptom h4{
    margin:0;

    color:#dce9de;

    font-size:11px;
    line-height:1.48;
    font-weight:700;
}

.gsxsxsys__symptom p{
    margin:
        7px 0 0;

    color:#707f73;

    font-size:9px;
    line-height:1.58;
}

.gsxsxsys__symptom-note{
    display:block;

    margin-top:9px;

    color:var(--sym-color);

    font-size:8px;
    line-height:1.42;
    font-weight:700;
}


/* =========================================================
   CÓDIGOS
   ========================================================= */

.gsxsxsys__errors{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(139,105,255,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__errors::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--cyan),
            transparent
        );
}

.gsxsxsys__error-layout{
    display:grid;

    grid-template-columns:
        minmax(0,.75fr)
        minmax(0,1.25fr);

    gap:13px;
}

.gsxsxsys__error-main,
.gsxsxsys__error-list{
    min-width:0;

    padding:18px;

    border:
        1px solid rgba(139,105,255,.055);

    border-radius:13px;

    background:
        rgba(3,11,6,.45);
}

.gsxsxsys__error-main-code{
    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    margin-bottom:12px;
    padding:0 !important;

    border:
        1px solid var(--violet);

    border-radius:12px;

    color:var(--violet);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__error-main strong{
    display:block;

    margin-bottom:6px;

    color:#b9abdf;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxsys__error-main p{
    margin:0;

    color:#746f82;

    font-size:10px;
    line-height:1.62;
}

.gsxsxsys__error-list{
    display:grid;

    gap:0;
}

.gsxsxsys__error-row{
    display:grid;

    grid-template-columns:
        50px minmax(0,1fr);

    gap:10px;

    align-items:center;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.035);
}

.gsxsxsys__error-row:last-child{
    border-bottom:0;
}

.gsxsxsys__error-code{
    display:grid !important;
    place-items:center !important;

    width:46px;
    height:46px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(139,105,255,.18);

    border-radius:9px;

    color:var(--violet);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__error-copy{
    color:#72717c;

    font-size:9px;
    line-height:1.55;
}

.gsxsxsys__error-copy strong{
    display:block;

    margin-bottom:2px;

    color:#aca3c4;

    font-size:9px;
    line-height:1.4;
    font-weight:600;
}


/* =========================================================
   CONECTIVIDAD / FILTRO REMOTO
   ========================================================= */

.gsxsxsys__remote{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(41,217,239,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,14,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__remote::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxsys__remote-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxsys__remote-card{
    --remote-color:var(--cyan);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxsys__remote-card:nth-child(2){
    --remote-color:var(--green);
}

.gsxsxsys__remote-card:nth-child(3){
    --remote-color:var(--orange);
}

.gsxsxsys__remote-card:nth-child(4){
    --remote-color:var(--blue);
}

.gsxsxsys__remote-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--remote-color);

    border-radius:8px;

    color:var(--remote-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__remote-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--remote-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__remote-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   ADVERTENCIA INTERVENCIÓN PREVIA
   ========================================================= */

.gsxsxsys__previous{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 89% 9%,
            rgba(255,97,119,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(21,5,8,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__previous::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--violet),
            transparent
        );
}

.gsxsxsys__previous-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;
}

.gsxsxsys__previous-code{
    display:grid !important;
    place-items:center !important;

    width:60px;
    height:60px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.18);

    border-radius:12px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__previous-copy{
    min-width:0;

    color:#807376;

    font-size:10px;
    line-height:1.62;
}

.gsxsxsys__previous-copy strong{
    display:block;

    margin-bottom:4px;

    color:#d0afb4;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxsys__previous-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,97,119,.10);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FILTRO DE COTIZACIÓN
   ========================================================= */

.gsxsxsys__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:230px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--violet),
            var(--green),
            transparent
        );
}

.gsxsxsys__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:7px;

    margin-bottom:17px;
}

.gsxsxsys__filter-flow::before{
    content:"";

    position:absolute;

    left:8%;
    right:8%;
    top:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--violet),
            var(--blue),
            var(--yellow),
            var(--red),
            var(--green)
        );

    opacity:.18;
}

.gsxsxsys__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxsys__filter-step:nth-child(2){
    --filter-color:var(--violet);
}

.gsxsxsys__filter-step:nth-child(3){
    --filter-color:var(--blue);
}

.gsxsxsys__filter-step:nth-child(4){
    --filter-color:var(--yellow);
}

.gsxsxsys__filter-step:nth-child(5){
    --filter-color:var(--red);
}

.gsxsxsys__filter-step:nth-child(6){
    --filter-color:var(--green);
}

.gsxsxsys__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__filter-step strong{
    display:block;

    color:var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__filter-copy{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}

.gsxsxsys__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.013),
            rgba(255,200,87,.010)
        );
}

.gsxsxsys__filter-result-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.17);

    border-radius:10px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__filter-result-copy{
    min-width:0;

    color:#807276;

    font-size:10px;
    line-height:1.62;
}

.gsxsxsys__filter-result-copy strong{
    color:#d2b8bc;
    font-weight:600;
}

.gsxsxsys__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD
   ========================================================= */

.gsxsxsys__hud{
    position:relative;

    min-height:585px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(139,105,255,.065),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 38%,
            rgba(41,217,239,.024),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.38),
            rgba(2,8,4,.97)
        );
}

.gsxsxsys__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(139,105,255,.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.024) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxsys__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxsys__hud-code{
    color:#a395cc;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(139,105,255,.11);

    border-radius:999px;

    color:#9f92bc;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxsys__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--violet);

    box-shadow:
        0 0 8px rgba(139,105,255,.58);

    animation:
        gsxsxsysState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxsysState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   NÚCLEO HUD
   ========================================================= */

.gsxsxsys__core{
    position:absolute;
    z-index:11;

    left:50%;
    top:38%;

    width:170px;
    height:170px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(139,105,255,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(139,105,255,.11),
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 40px rgba(139,105,255,.07);

    animation:
        gsxsxsysCore
        3.2s ease-in-out infinite;
}

.gsxsxsys__core::before{
    content:"";

    position:absolute;
    inset:-42px;

    border:
        1px dashed rgba(41,217,239,.12);

    border-radius:50%;

    animation:
        gsxsxsysRing
        15s linear infinite;
}

.gsxsxsys__core::after{
    content:"";

    position:absolute;
    inset:-86px;

    border:
        1px solid rgba(101,245,47,.05);

    border-radius:50%;
}

@keyframes gsxsxsysCore{

    0%,
    100%{
        box-shadow:
            0 0 22px rgba(139,105,255,.05);
    }

    50%{
        box-shadow:
            0 0 48px rgba(139,105,255,.15);
    }

}

@keyframes gsxsxsysRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxsys__core-copy{
    position:relative;
    z-index:3;

    text-align:center;
}

.gsxsxsys__core-title{
    display:block;

    color:var(--violet);

    font-size:15px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__core-sub{
    display:block;

    margin-top:4px;

    color:#767084;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS / BARRIDO
   ========================================================= */

.gsxsxsys__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:38%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(139,105,255,.22);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxsysPulse
        3.6s ease-out infinite;
}

.gsxsxsys__pulse--b{
    animation-delay:1.2s;

    border-color:
        rgba(41,217,239,.19);
}

.gsxsxsys__pulse--c{
    animation-delay:2.4s;

    border-color:
        rgba(101,245,47,.16);
}

@keyframes gsxsxsysPulse{

    0%{
        opacity:.62;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.45);
    }

}

.gsxsxsys__sweep{
    position:absolute;
    z-index:8;

    left:50%;
    top:38%;

    width:155px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.75),
            rgba(139,105,255,.12),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.26);

    animation:
        gsxsxsysSweep
        4.8s linear infinite;
}

.gsxsxsys__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxsysSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   HUD ROUTE
   ========================================================= */

.gsxsxsys__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxsys__hud-node{
    --node-color:var(--violet);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxsys__hud-node:nth-child(2){
    --node-color:var(--blue);
}

.gsxsxsys__hud-node:nth-child(3){
    --node-color:var(--cyan);
}

.gsxsxsys__hud-node:nth-child(4){
    --node-color:var(--yellow);
}

.gsxsxsys__hud-node:nth-child(5){
    --node-color:var(--red);
}

.gsxsxsys__hud-node:nth-child(6){
    --node-color:var(--green);
}

.gsxsxsys__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(139,105,255,.07)
        );
}

.gsxsxsys__hud-node:last-child::after{
    display:none;
}

.gsxsxsys__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__hud-node-title{
    display:block;

    color:var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxsys__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}


/* =========================================================
   HUD TOKEN
   ========================================================= */

.gsxsxsys__hud-token{
    position:absolute;
    z-index:22;

    left:6%;
    bottom:139px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--violet);

    box-shadow:
        0 0 10px rgba(139,105,255,.72);

    opacity:0;

    animation:
        gsxsxsysHudToken
        7s linear infinite;
}

@keyframes gsxsxsysHudToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--violet);
    }

    7%{
        opacity:1;
    }

    25%{
        background:var(--blue);
    }

    43%{
        background:var(--cyan);
    }

    61%{
        background:var(--yellow);
    }

    79%{
        background:var(--red);
    }

    94%{
        left:94%;
        background:var(--green);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN
   ========================================================= */

.gsxsxsys__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(139,105,255,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#767083;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxsys__equation b{
    color:var(--violet);
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxsys__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(139,105,255,.010)
        );
}

.gsxsxsys__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxsys__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxsys__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxsys__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxsys__terminal{
    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(10,7,20,.50),
            rgba(2,7,3,.98)
        );
}

.gsxsxsys__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(139,105,255,.06);

    background:
        rgba(9,7,17,.68);
}

.gsxsxsys__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxsys__terminal-dot{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxsys__terminal-dot--red{
    background:var(--red);
}

.gsxsxsys__terminal-dot--yellow{
    background:var(--yellow);
}

.gsxsxsys__terminal-dot--green{
    background:var(--green);
}

.gsxsxsys__terminal-name{
    color:#716b80;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxsys__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxsys__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxsys__terminal-item{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(139,105,255,.045);

    border-radius:7px;

    background:
        rgba(8,7,13,.44);

    color:#74717d;

    font-size:9px;
    line-height:1.35;
}

.gsxsxsys__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(139,105,255,.10);

    border-radius:9px;

    color:#9c90b7;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxsys__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--violet);

    box-shadow:
        0 0 7px rgba(139,105,255,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxsys__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxsys__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#716b80;
}

.gsxsxsys__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--violet);

    box-shadow:
        0 0 7px rgba(139,105,255,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxsys__symptoms-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .gsxsxsys__storage-grid,
    .gsxsxsys__remote-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxsys__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxsys__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxsys__status{
        max-width:650px;
    }

    .gsxsxsys__domains-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxsys__symptoms-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxsys__error-layout{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxsys__filter-flow{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:16px 8px;
    }

    .gsxsxsys__filter-flow::before{
        display:none;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxsys__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxsys__scan,
    .gsxsxsys__orbit{
        display:none;
    }

    .gsxsxsys__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxsys__heading{
        display:block;
    }

    .gsxsxsys__status{
        margin-top:19px;
    }

    .gsxsxsys__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxsys__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxsys__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxsys__principle-state{
        width:fit-content;
    }

    .gsxsxsys__domains,
    .gsxsxsys__storage,
    .gsxsxsys__symptoms,
    .gsxsxsys__errors,
    .gsxsxsys__remote,
    .gsxsxsys__previous,
    .gsxsxsys__filter{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxsys__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxsys__section-state{
        width:fit-content;
    }

    .gsxsxsys__storage-grid,
    .gsxsxsys__symptoms-grid,
    .gsxsxsys__remote-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxsys__previous-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxsys__previous-state{
        width:fit-content;
    }

    .gsxsxsys__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxsys__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxsys__filter-result-state{
        width:fit-content;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxsys__hud{
        min-height:720px;
    }

    .gsxsxsys__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxsys__core{
        top:28%;

        width:140px;
        height:140px;
    }

    .gsxsxsys__pulse,
    .gsxsxsys__sweep{
        top:28%;
    }

    .gsxsxsys__sweep{
        width:125px;
    }

    .gsxsxsys__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxsys__hud-node::after,
    .gsxsxsys__hud-token{
        display:none;
    }

    .gsxsxsys__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxsys__rule-state{
        width:fit-content;
    }

    .gsxsxsys__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxsys__terminal-state{
        width:fit-content;
    }

    .gsxsxsys__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxsys__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxsys__error-row{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxsys__hud{
        min-height:920px;
    }

    .gsxsxsys__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxsys__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxsys__hud{
        min-height:1140px;
    }

    .gsxsxsys__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxsys__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxsys__terminal-item{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxsys *,
    .gsxsxsys *::before,
    .gsxsxsys *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxsys__scan,
    .gsxsxsys__orbit,
    .gsxsxsys__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — DIAGNÓSTICO / REFACCIONES / GARANTÍA

   CSS ID EXTERIOR:
   diagnostico-refacciones-xbox-series-x

   ROOT: .gsxsxdx
   ========================================================= */

.gsxsxdx{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 9%,
            rgba(101,245,47,.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 16%,
            rgba(41,217,239,.035),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 85%,
            rgba(139,105,255,.027),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 51%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxdx *,
.gsxsxdx *::before,
.gsxsxdx *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxdx__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.031) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.029) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxdx__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.92),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.92)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxdx__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxdx__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(41,217,239,.12),
            rgba(101,245,47,.13),
            rgba(139,105,255,.08),
            transparent
        );

    box-shadow:
        0 0 14px rgba(41,217,239,.07);

    animation:
        gsxsxdxScan
        13s linear infinite;
}

@keyframes gsxsxdxScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(7600px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxdx__orbit{
    position:absolute;

    width:820px;
    height:820px;

    right:-490px;
    top:1420px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.027);

    border-radius:50%;

    animation:
        gsxsxdxOrbit
        80s linear infinite;
}

.gsxsxdx__orbit::before{
    content:"";

    position:absolute;
    inset:132px;

    border:
        1px dashed rgba(41,217,239,.031);

    border-radius:50%;
}

.gsxsxdx__orbit::after{
    content:"";

    position:absolute;
    inset:252px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxdxOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxdx__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxdx__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxdx__heading-main{
    min-width:0;
}

.gsxsxdx__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9bd18a;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxdx__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxdx__title{
    max-width:1040px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxdx__title span{
    color:var(--green2);
}

.gsxsxdx__intro{
    max-width:950px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxdx__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(101,245,47,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxdx__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--green),
            transparent
        );
}

.gsxsxdx__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#9bc78f;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}

.gsxsxdx__status p{
    margin:0;

    color:#7b8b7d;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxdx__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.015),
            rgba(101,245,47,.014)
        );
}

.gsxsxdx__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:225px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            var(--violet),
            transparent
        );
}

.gsxsxdx__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxdx__principle-copy{
    min-width:0;
}

.gsxsxdx__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxdx__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxdx__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#91b985;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxdx__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxdx__section-label{
    display:block;

    margin-bottom:6px;

    color:#96c888;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxdx__section-copy{
    max-width:900px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxdx__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8eb481;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   RUTA DE DIAGNÓSTICO
   ========================================================= */

.gsxsxdx__route{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(41,217,239,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,14,.43),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__route::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:230px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            var(--yellow),
            transparent
        );
}

.gsxsxdx__route-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(7,minmax(0,1fr));

    gap:7px;
}

.gsxsxdx__route-grid::before{
    content:"";

    position:absolute;

    left:6%;
    right:6%;
    top:31px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            var(--yellow),
            var(--violet),
            var(--green),
            var(--orange),
            var(--green2)
        );

    opacity:.18;
}

.gsxsxdx__route-node{
    --route-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxdx__route-node:nth-child(2){
    --route-color:var(--blue);
}

.gsxsxdx__route-node:nth-child(3){
    --route-color:var(--yellow);
}

.gsxsxdx__route-node:nth-child(4){
    --route-color:var(--violet);
}

.gsxsxdx__route-node:nth-child(5){
    --route-color:var(--green);
}

.gsxsxdx__route-node:nth-child(6){
    --route-color:var(--orange);
}

.gsxsxdx__route-node:nth-child(7){
    --route-color:var(--green2);
}

.gsxsxdx__route-circle{
    display:grid !important;
    place-items:center !important;

    width:62px;
    height:62px;

    margin:
        0 auto 9px;

    padding:0 !important;

    border:
        1px solid var(--route-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.98);

    color:var(--route-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxdx__route-node strong{
    display:block;

    color:var(--route-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__route-copy{
    display:block;

    margin-top:3px;

    color:#657367;

    font-size:7px;
    line-height:1.45;
}


/* =========================================================
   TOKEN
   ========================================================= */

.gsxsxdx__route-token{
    position:absolute;
    z-index:5;

    left:6%;
    top:28px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.70);

    opacity:0;

    animation:
        gsxsxdxRouteToken
        8s ease-in-out infinite;
}

@keyframes gsxsxdxRouteToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--cyan);
    }

    7%{
        opacity:1;
    }

    19%{
        background:var(--blue);
    }

    33%{
        background:var(--yellow);
    }

    47%{
        background:var(--violet);
    }

    61%{
        background:var(--green);
    }

    76%{
        background:var(--orange);
    }

    94%{
        left:94%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}


/* =========================================================
   DIAGNÓSTICO
   ========================================================= */

.gsxsxdx__diagnostic{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(5,17,7,.45),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__diagnostic::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:215px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxdx__diagnostic-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.gsxsxdx__diagnostic-card{
    --card-color:var(--cyan);

    position:relative;

    min-width:0;

    min-height:174px;

    padding:
        17px 14px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:11px;

    background:
        rgba(3,11,6,.46);
}

.gsxsxdx__diagnostic-card:nth-child(2){
    --card-color:var(--green);
}

.gsxsxdx__diagnostic-card:nth-child(3){
    --card-color:var(--yellow);
}

.gsxsxdx__diagnostic-card:nth-child(4){
    --card-color:var(--blue);
}

.gsxsxdx__diagnostic-card:nth-child(5){
    --card-color:var(--violet);
}

.gsxsxdx__diagnostic-card:nth-child(6){
    --card-color:var(--green2);
}

.gsxsxdx__diagnostic-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:70px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--card-color),
            transparent
        );
}

.gsxsxdx__diagnostic-code{
    display:grid !important;
    place-items:center !important;

    width:40px;
    height:40px;

    margin-bottom:10px;
    padding:0 !important;

    border:
        1px solid var(--card-color);

    border-radius:9px;

    color:var(--card-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxdx__diagnostic-card strong{
    display:block;

    margin-bottom:5px;

    color:var(--card-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__diagnostic-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.57;
}


/* =========================================================
   POLÍTICA DE DIAGNÓSTICO
   ========================================================= */

.gsxsxdx__policy{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 91% 10%,
            rgba(255,200,87,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(17,14,4,.31),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__policy::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green),
            transparent
        );
}

.gsxsxdx__policy-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:11px;
}

.gsxsxdx__policy-card{
    --policy-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        20px 17px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.06);

    border-radius:13px;

    background:
        rgba(3,11,6,.48);
}

.gsxsxdx__policy-card--previous{
    --policy-color:var(--yellow);

    border-color:
        rgba(255,200,87,.06);
}

.gsxsxdx__policy-head{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:11px;
}

.gsxsxdx__policy-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    flex:0 0 48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--policy-color);

    border-radius:11px;

    color:var(--policy-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__policy-head-copy{
    min-width:0;
}

.gsxsxdx__policy-head-copy strong{
    display:block;

    color:var(--policy-color);

    font-size:11px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__policy-head-copy span{
    display:block;

    margin-top:2px;

    color:#707d71;

    font-size:9px;
    line-height:1.45;
}

.gsxsxdx__policy-text{
    margin:0;

    color:#748076;

    font-size:10px;
    line-height:1.65;
}

.gsxsxdx__policy-result{
    display:flex;
    align-items:center;

    gap:7px;

    width:fit-content;

    margin-top:13px;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:7px;

    color:var(--policy-color);

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__policy-result::before{
    content:"";

    width:5px;
    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:var(--policy-color);

    box-shadow:
        0 0 7px
        rgba(101,245,47,.35);
}


/* =========================================================
   VIABILIDAD
   ========================================================= */

.gsxsxdx__viability{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(139,105,255,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.29),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__viability::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--green),
            transparent
        );
}

.gsxsxdx__viability-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxdx__viability-card{
    --via-color:var(--violet);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(139,105,255,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxdx__viability-card:nth-child(2){
    --via-color:var(--green);
}

.gsxsxdx__viability-card:nth-child(3){
    --via-color:var(--cyan);
}

.gsxsxdx__viability-card:nth-child(4){
    --via-color:var(--yellow);
}

.gsxsxdx__viability-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--via-color);

    border-radius:8px;

    color:var(--via-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__viability-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--via-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__viability-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   RESULTADO DE VIABILIDAD
   ========================================================= */

.gsxsxdx__viability-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-top:12px;

    padding:16px;

    border:
        1px solid rgba(139,105,255,.07);

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            rgba(139,105,255,.014),
            rgba(101,245,47,.010)
        );
}

.gsxsxdx__viability-result-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(139,105,255,.16);

    border-radius:9px;

    color:var(--violet);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__viability-result-copy{
    min-width:0;

    color:#777283;

    font-size:10px;
    line-height:1.62;
}

.gsxsxdx__viability-result-copy strong{
    color:#b9afd1;
    font-weight:600;
}

.gsxsxdx__viability-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(139,105,255,.09);

    border-radius:8px;

    color:#998db8;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   REFACCIONES
   ========================================================= */

.gsxsxdx__parts{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(41,217,239,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,14,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__parts::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:215px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxdx__parts-layout{
    display:grid;

    grid-template-columns:
        minmax(0,.83fr)
        minmax(0,1.17fr);

    gap:13px;
}

.gsxsxdx__parts-main,
.gsxsxdx__parts-list{
    min-width:0;

    padding:18px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:13px;

    background:
        rgba(3,11,6,.45);
}

.gsxsxdx__parts-main-code{
    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    margin-bottom:12px;
    padding:0 !important;

    border:
        1px solid var(--cyan);

    border-radius:12px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__parts-main strong{
    display:block;

    margin-bottom:6px;

    color:#9bcbd0;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxdx__parts-main p{
    margin:0;

    color:#718083;

    font-size:10px;
    line-height:1.62;
}

.gsxsxdx__parts-list{
    display:grid;

    gap:0;
}

.gsxsxdx__parts-row{
    display:grid;

    grid-template-columns:
        48px minmax(0,1fr);

    gap:10px;

    align-items:center;

    padding:
        10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.035);
}

.gsxsxdx__parts-row:last-child{
    border-bottom:0;
}

.gsxsxdx__parts-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.16);

    border-radius:9px;

    color:var(--cyan);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__parts-copy{
    color:#727d7e;

    font-size:9px;
    line-height:1.55;
}

.gsxsxdx__parts-copy strong{
    display:block;

    margin-bottom:2px;

    color:#a8c2c4;

    font-size:9px;
    line-height:1.4;
    font-weight:600;
}


/* =========================================================
   NO PRUEBA Y ERROR
   ========================================================= */

.gsxsxdx__noexperiment{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.085);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 89% 9%,
            rgba(255,200,87,.033),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(17,14,4,.30),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__noexperiment::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:190px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            transparent
        );
}

.gsxsxdx__noexperiment-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;
}

.gsxsxdx__noexperiment-code{
    display:grid !important;
    place-items:center !important;

    width:60px;
    height:60px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.18);

    border-radius:12px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__noexperiment-copy{
    min-width:0;

    color:#807b6b;

    font-size:10px;
    line-height:1.62;
}

.gsxsxdx__noexperiment-copy strong{
    display:block;

    margin-bottom:4px;

    color:#c8bd95;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxdx__noexperiment-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   GARANTÍA
   ========================================================= */

.gsxsxdx__warranty{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(101,245,47,.045),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(5,18,7,.44),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__warranty::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:235px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxdx__warranty-main{
    display:grid;

    grid-template-columns:
        150px minmax(0,1fr);

    gap:22px;

    align-items:center;

    margin-bottom:17px;
}

.gsxsxdx__warranty-badge{
    position:relative;

    display:grid;
    place-items:center;

    width:140px;
    height:140px;

    margin:auto;

    border:
        1px solid rgba(101,245,47,.25);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(101,245,47,.10),
            rgba(2,8,4,.98) 68%
        );

    box-shadow:
        0 0 32px rgba(101,245,47,.08);
}

.gsxsxdx__warranty-badge::before{
    content:"";

    position:absolute;

    inset:-11px;

    border:
        1px dashed rgba(41,217,239,.11);

    border-radius:50%;

    animation:
        gsxsxdxWarrantyRing
        14s linear infinite;
}

@keyframes gsxsxdxWarrantyRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxdx__warranty-badge-copy{
    position:relative;
    z-index:2;

    text-align:center;
}

.gsxsxdx__warranty-days{
    display:block;

    color:var(--green2);

    font-size:34px;
    line-height:1;
    font-weight:700;

    letter-spacing:-.04em;
}

.gsxsxdx__warranty-label{
    display:block;

    margin-top:5px;

    color:#8fb685;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__warranty-copy{
    min-width:0;
}

.gsxsxdx__warranty-copy h3{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxdx__warranty-copy p{
    margin:
        9px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxdx__warranty-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxdx__warranty-card{
    --war-color:var(--green);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(101,245,47,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxdx__warranty-card:nth-child(2){
    --war-color:var(--cyan);
}

.gsxsxdx__warranty-card:nth-child(3){
    --war-color:var(--yellow);
}

.gsxsxdx__warranty-card:nth-child(4){
    --war-color:var(--violet);
}

.gsxsxdx__warranty-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--war-color);

    border-radius:8px;

    color:var(--war-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__warranty-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--war-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__warranty-card-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   GARANTÍA — ACLARACIÓN
   ========================================================= */

.gsxsxdx__warranty-note{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:11px;

    align-items:center;

    margin-top:12px;

    padding:15px;

    border:
        1px solid rgba(41,217,239,.07);

    border-radius:11px;

    background:
        rgba(3,13,11,.37);
}

.gsxsxdx__warranty-note-code{
    display:grid !important;
    place-items:center !important;

    width:40px;
    height:40px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.16);

    border-radius:8px;

    color:var(--cyan);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__warranty-note-copy{
    color:#728183;

    font-size:9px;
    line-height:1.58;
}

.gsxsxdx__warranty-note-copy strong{
    color:#a6c8cb;
    font-weight:600;
}


/* =========================================================
   DOCUMENTACIÓN / LFPC
   ========================================================= */

.gsxsxdx__legal{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.075);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,16,14,.36),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__legal::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:210px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxdx__legal-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.gsxsxdx__legal-card{
    --legal-color:var(--cyan);

    min-width:0;

    padding:
        17px 14px;

    border:
        1px solid rgba(41,217,239,.05);

    border-radius:11px;

    background:
        rgba(3,11,6,.43);
}

.gsxsxdx__legal-card:nth-child(2){
    --legal-color:var(--green);
}

.gsxsxdx__legal-card:nth-child(3){
    --legal-color:var(--violet);
}

.gsxsxdx__legal-code{
    display:grid !important;
    place-items:center !important;

    width:40px;
    height:40px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--legal-color);

    border-radius:8px;

    color:var(--legal-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__legal-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--legal-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__legal-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   HUD
   ========================================================= */

.gsxsxdx__hud{
    position:relative;

    min-height:590px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(101,245,47,.060),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 38%,
            rgba(41,217,239,.023),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(4,15,7,.55),
            rgba(2,8,4,.97)
        );
}

.gsxsxdx__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(101,245,47,.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.024) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxdx__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxdx__hud-code{
    color:#94c288;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#90b785;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxdx__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);

    animation:
        gsxsxdxState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxdxState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   CORE
   ========================================================= */

.gsxsxdx__core{
    position:absolute;
    z-index:11;

    left:50%;
    top:38%;

    width:172px;
    height:172px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(101,245,47,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(101,245,47,.11),
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 40px rgba(101,245,47,.07);

    animation:
        gsxsxdxCore
        3.2s ease-in-out infinite;
}

.gsxsxdx__core::before{
    content:"";

    position:absolute;
    inset:-42px;

    border:
        1px dashed rgba(41,217,239,.12);

    border-radius:50%;

    animation:
        gsxsxdxRing
        15s linear infinite;
}

.gsxsxdx__core::after{
    content:"";

    position:absolute;
    inset:-86px;

    border:
        1px solid rgba(139,105,255,.05);

    border-radius:50%;
}

@keyframes gsxsxdxCore{

    0%,
    100%{
        box-shadow:
            0 0 22px rgba(101,245,47,.05);
    }

    50%{
        box-shadow:
            0 0 48px rgba(101,245,47,.15);
    }

}

@keyframes gsxsxdxRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxdx__core-copy{
    position:relative;
    z-index:3;

    text-align:center;
}

.gsxsxdx__core-title{
    display:block;

    color:var(--green2);

    font-size:17px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__core-sub{
    display:block;

    margin-top:4px;

    color:#718173;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS / SWEEP
   ========================================================= */

.gsxsxdx__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:38%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(101,245,47,.22);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxdxPulse
        3.6s ease-out infinite;
}

.gsxsxdx__pulse--b{
    animation-delay:1.2s;

    border-color:
        rgba(41,217,239,.19);
}

.gsxsxdx__pulse--c{
    animation-delay:2.4s;

    border-color:
        rgba(139,105,255,.16);
}

@keyframes gsxsxdxPulse{

    0%{
        opacity:.62;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.45);
    }

}

.gsxsxdx__sweep{
    position:absolute;
    z-index:8;

    left:50%;
    top:38%;

    width:155px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.75),
            rgba(101,245,47,.12),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.26);

    animation:
        gsxsxdxSweep
        4.8s linear infinite;
}

.gsxsxdx__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxdxSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   HUD ROUTE
   ========================================================= */

.gsxsxdx__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:5px;
}

.gsxsxdx__hud-node{
    --node-color:var(--cyan);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxdx__hud-node:nth-child(2){
    --node-color:var(--yellow);
}

.gsxsxdx__hud-node:nth-child(3){
    --node-color:var(--violet);
}

.gsxsxdx__hud-node:nth-child(4){
    --node-color:var(--green);
}

.gsxsxdx__hud-node:nth-child(5){
    --node-color:var(--orange);
}

.gsxsxdx__hud-node:nth-child(6){
    --node-color:var(--green2);
}

.gsxsxdx__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 24px);
    right:calc(-50% + 24px);
    top:24px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(101,245,47,.07)
        );
}

.gsxsxdx__hud-node:last-child::after{
    display:none;
}

.gsxsxdx__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:
        0 auto 7px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:var(--node-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__hud-node-title{
    display:block;

    color:var(--node-color);

    font-size:7px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxdx__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:6px;
    line-height:1.4;
}

.gsxsxdx__hud-token{
    position:absolute;
    z-index:22;

    left:6%;
    bottom:139px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.72);

    opacity:0;

    animation:
        gsxsxdxHudToken
        7s linear infinite;
}

@keyframes gsxsxdxHudToken{

    0%{
        left:6%;
        opacity:0;
        background:var(--cyan);
    }

    7%{
        opacity:1;
    }

    25%{
        background:var(--yellow);
    }

    43%{
        background:var(--violet);
    }

    61%{
        background:var(--green);
    }

    79%{
        background:var(--orange);
    }

    94%{
        left:94%;
        background:var(--green2);
        opacity:1;
    }

    100%{
        left:94%;
        opacity:0;
    }

}

.gsxsxdx__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(101,245,47,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#708273;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxdx__equation b{
    color:var(--green2);
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxdx__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(101,245,47,.010)
        );
}

.gsxsxdx__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxdx__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxdx__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxdx__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxdx__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(5,17,7,.54),
            rgba(2,7,3,.98)
        );
}

.gsxsxdx__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxdx__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxdx__terminal-dot{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxdx__terminal-dot--red{
    background:var(--red);
}

.gsxsxdx__terminal-dot--yellow{
    background:var(--yellow);
}

.gsxsxdx__terminal-dot--green{
    background:var(--green);
}

.gsxsxdx__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxdx__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxdx__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxdx__terminal-item{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxdx__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxdx__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxdx__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxdx__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxdx__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxdx__diagnostic-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxdx__viability-grid,
    .gsxsxdx__warranty-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxdx__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxdx__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxdx__status{
        max-width:650px;
    }

    .gsxsxdx__route-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:17px 8px;
    }

    .gsxsxdx__route-grid::before,
    .gsxsxdx__route-token{
        display:none;
    }

    .gsxsxdx__policy-grid,
    .gsxsxdx__parts-layout{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxdx__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxdx__scan,
    .gsxsxdx__orbit{
        display:none;
    }

    .gsxsxdx__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxdx__heading{
        display:block;
    }

    .gsxsxdx__status{
        margin-top:19px;
    }

    .gsxsxdx__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxdx__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxdx__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxdx__principle-state{
        width:fit-content;
    }

    .gsxsxdx__route,
    .gsxsxdx__diagnostic,
    .gsxsxdx__policy,
    .gsxsxdx__viability,
    .gsxsxdx__parts,
    .gsxsxdx__noexperiment,
    .gsxsxdx__warranty,
    .gsxsxdx__legal{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxdx__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxdx__section-state{
        width:fit-content;
    }

    .gsxsxdx__route-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxdx__diagnostic-grid,
    .gsxsxdx__viability-grid,
    .gsxsxdx__warranty-grid,
    .gsxsxdx__legal-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxdx__viability-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxdx__viability-result-state{
        width:fit-content;
    }

    .gsxsxdx__noexperiment-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxdx__noexperiment-state{
        width:fit-content;
    }

    .gsxsxdx__warranty-main{
        grid-template-columns:
            minmax(0,1fr);

        text-align:left;
    }

    .gsxsxdx__warranty-badge{
        margin:
            0 auto 4px;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxdx__hud{
        min-height:720px;
    }

    .gsxsxdx__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxdx__core{
        top:28%;

        width:140px;
        height:140px;
    }

    .gsxsxdx__pulse,
    .gsxsxdx__sweep{
        top:28%;
    }

    .gsxsxdx__sweep{
        width:125px;
    }

    .gsxsxdx__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxdx__hud-node::after,
    .gsxsxdx__hud-token{
        display:none;
    }

    .gsxsxdx__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxdx__rule-state{
        width:fit-content;
    }

    .gsxsxdx__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxdx__terminal-state{
        width:fit-content;
    }

    .gsxsxdx__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxdx__route-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxdx__parts-row{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxdx__hud{
        min-height:920px;
    }

    .gsxsxdx__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxdx__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxdx__hud{
        min-height:1140px;
    }

    .gsxsxdx__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxdx__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxdx__terminal-item{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxdx *,
    .gsxsxdx *::before,
    .gsxsxdx *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxdx__scan,
    .gsxsxdx__orbit,
    .gsxsxdx__route-token,
    .gsxsxdx__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — PROCESO DE SERVICIO

   CSS ID EXTERIOR:
   proceso-servicio-xbox-series-x

   ROOT: .gsxsxproc
   ========================================================= */

.gsxsxproc{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(101,245,47,.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 15%,
            rgba(41,217,239,.033),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 84%,
            rgba(139,105,255,.025),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxproc *,
.gsxsxproc *::before,
.gsxsxproc *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxproc__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.031) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.029) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxproc__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.92),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.92)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxproc__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxproc__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(41,217,239,.12),
            rgba(101,245,47,.13),
            rgba(139,105,255,.08),
            transparent
        );

    box-shadow:
        0 0 14px rgba(41,217,239,.07);

    animation:
        gsxsxprocScan
        13s linear infinite;
}

@keyframes gsxsxprocScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(8200px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxproc__orbit{
    position:absolute;

    width:820px;
    height:820px;

    right:-500px;
    top:1480px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.027);

    border-radius:50%;

    animation:
        gsxsxprocOrbit
        80s linear infinite;
}

.gsxsxproc__orbit::before{
    content:"";

    position:absolute;
    inset:132px;

    border:
        1px dashed rgba(41,217,239,.031);

    border-radius:50%;
}

.gsxsxproc__orbit::after{
    content:"";

    position:absolute;
    inset:252px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxprocOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxproc__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxproc__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxproc__heading-main{
    min-width:0;
}

.gsxsxproc__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9bd18a;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxproc__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxproc__title{
    max-width:1040px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxproc__title span{
    color:var(--green2);
}

.gsxsxproc__intro{
    max-width:960px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxproc__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(101,245,47,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxproc__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--green),
            transparent
        );
}

.gsxsxproc__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#9bc78f;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}

.gsxsxproc__status p{
    margin:0;

    color:#7b8b7d;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxproc__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.015),
            rgba(101,245,47,.014)
        );
}

.gsxsxproc__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:225px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            var(--violet),
            transparent
        );
}

.gsxsxproc__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxproc__principle-copy{
    min-width:0;
}

.gsxsxproc__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxproc__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxproc__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#91b985;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.gsxsxproc__section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxproc__section-label{
    display:block;

    margin-bottom:6px;

    color:#96c888;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__section-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxproc__section-copy{
    max-width:900px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxproc__section-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8eb481;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   RUTA PRINCIPAL
   ========================================================= */

.gsxsxproc__route{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(41,217,239,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,14,.43),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__route::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:240px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            var(--yellow),
            transparent
        );
}

.gsxsxproc__route-grid{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(9,minmax(0,1fr));

    gap:6px;
}

.gsxsxproc__route-grid::before{
    content:"";

    position:absolute;

    left:4.8%;
    right:4.8%;
    top:27px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue),
            var(--violet),
            var(--yellow),
            var(--green),
            var(--orange),
            var(--cyan),
            var(--green2),
            var(--green)
        );

    opacity:.18;
}

.gsxsxproc__route-node{
    --route-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxproc__route-node:nth-child(2){
    --route-color:var(--blue);
}

.gsxsxproc__route-node:nth-child(3){
    --route-color:var(--violet);
}

.gsxsxproc__route-node:nth-child(4){
    --route-color:var(--yellow);
}

.gsxsxproc__route-node:nth-child(5){
    --route-color:var(--green);
}

.gsxsxproc__route-node:nth-child(6){
    --route-color:var(--orange);
}

.gsxsxproc__route-node:nth-child(7){
    --route-color:var(--cyan);
}

.gsxsxproc__route-node:nth-child(8){
    --route-color:var(--green2);
}

.gsxsxproc__route-node:nth-child(9){
    --route-color:var(--green);
}

.gsxsxproc__route-circle{
    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--route-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.98);

    color:var(--route-color);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxproc__route-node strong{
    display:block;

    color:var(--route-color);

    font-size:7px;
    line-height:1.38;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__route-copy{
    display:block;

    margin-top:3px;

    color:#657367;

    font-size:6px;
    line-height:1.42;
}


/* =========================================================
   TOKEN RUTA
   ========================================================= */

.gsxsxproc__route-token{
    position:absolute;
    z-index:5;

    left:4.8%;
    top:24px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.70);

    opacity:0;

    animation:
        gsxsxprocRouteToken
        10s ease-in-out infinite;
}

@keyframes gsxsxprocRouteToken{

    0%{
        left:4.8%;
        opacity:0;
        background:var(--cyan);
    }

    6%{
        opacity:1;
    }

    16%{
        background:var(--blue);
    }

    27%{
        background:var(--violet);
    }

    38%{
        background:var(--yellow);
    }

    49%{
        background:var(--green);
    }

    60%{
        background:var(--orange);
    }

    71%{
        background:var(--cyan);
    }

    82%{
        background:var(--green2);
    }

    95%{
        left:95%;
        background:var(--green);
        opacity:1;
    }

    100%{
        left:95%;
        opacity:0;
    }

}


/* =========================================================
   PASOS
   ========================================================= */

.gsxsxproc__steps{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(5,17,7,.45),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__steps::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:215px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxproc__steps-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.gsxsxproc__step{
    --step-color:var(--green);

    position:relative;

    min-width:0;

    min-height:230px;

    padding:
        18px 15px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.05);

    border-radius:12px;

    background:
        rgba(3,11,6,.48);
}

.gsxsxproc__step:nth-child(2){
    --step-color:var(--blue);
}

.gsxsxproc__step:nth-child(3){
    --step-color:var(--violet);
}

.gsxsxproc__step:nth-child(4){
    --step-color:var(--yellow);
}

.gsxsxproc__step:nth-child(5){
    --step-color:var(--green2);
}

.gsxsxproc__step:nth-child(6){
    --step-color:var(--orange);
}

.gsxsxproc__step:nth-child(7){
    --step-color:var(--cyan);
}

.gsxsxproc__step:nth-child(8){
    --step-color:var(--green2);
}

.gsxsxproc__step:nth-child(9){
    --step-color:var(--green);
}

.gsxsxproc__step::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:80px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--step-color),
            transparent
        );
}

.gsxsxproc__step-head{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:12px;
}

.gsxsxproc__step-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    flex:0 0 42px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--step-color);

    border-radius:9px;

    color:var(--step-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxproc__step-number{
    color:#566358;

    font-size:9px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__step h4{
    margin:0;

    color:var(--step-color);

    font-size:11px;
    line-height:1.45;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__step p{
    margin:
        7px 0 0;

    color:#718075;

    font-size:9px;
    line-height:1.62;
}

.gsxsxproc__step-note{
    display:block;

    margin-top:10px;

    color:#657567;

    font-size:8px;
    line-height:1.5;
}

.gsxsxproc__step-note strong{
    color:var(--step-color);
    font-weight:700;
}


/* =========================================================
   RECEPCIÓN LOCAL / NACIONAL
   ========================================================= */

.gsxsxproc__reception{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(41,217,239,.034),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,14,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__reception::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxproc__reception-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;
}

.gsxsxproc__reception-card{
    --rec-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        20px 18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.06);

    border-radius:13px;

    background:
        rgba(3,11,6,.47);
}

.gsxsxproc__reception-card--national{
    --rec-color:var(--cyan);

    border-color:
        rgba(41,217,239,.06);
}

.gsxsxproc__reception-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:95px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--rec-color),
            transparent
        );
}

.gsxsxproc__reception-head{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:11px;

    align-items:center;

    margin-bottom:12px;
}

.gsxsxproc__reception-code{
    display:grid !important;
    place-items:center !important;

    width:52px;
    height:52px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--rec-color);

    border-radius:11px;

    color:var(--rec-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__reception-head-copy strong{
    display:block;

    color:var(--rec-color);

    font-size:11px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__reception-head-copy span{
    display:block;

    margin-top:3px;

    color:#707d71;

    font-size:9px;
    line-height:1.45;
}

.gsxsxproc__reception-list{
    display:grid;

    gap:7px;
}

.gsxsxproc__reception-item{
    display:grid;

    grid-template-columns:
        6px minmax(0,1fr);

    gap:8px;

    align-items:start;

    color:#718075;

    font-size:9px;
    line-height:1.55;
}

.gsxsxproc__reception-item::before{
    content:"";

    width:5px;
    height:5px;

    margin-top:5px;

    border-radius:50%;

    background:var(--rec-color);

    box-shadow:
        0 0 6px
        color-mix(
            in srgb,
            var(--rec-color) 40%,
            transparent
        );
}


/* =========================================================
   GUÍA PREPAGADA
   ========================================================= */

.gsxsxproc__shipping{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(75,142,255,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(75,142,255,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(5,9,20,.31),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__shipping::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxproc__shipping-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxproc__shipping-card{
    --ship-color:var(--blue);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(75,142,255,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxproc__shipping-card:nth-child(2){
    --ship-color:var(--cyan);
}

.gsxsxproc__shipping-card:nth-child(3){
    --ship-color:var(--green);
}

.gsxsxproc__shipping-card:nth-child(4){
    --ship-color:var(--yellow);
}

.gsxsxproc__shipping-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--ship-color);

    border-radius:9px;

    color:var(--ship-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__shipping-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--ship-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__shipping-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   COSTO DE GUÍA
   ========================================================= */

.gsxsxproc__shipping-price{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-top:12px;

    padding:16px;

    border:
        1px solid rgba(255,200,87,.075);

    border-radius:11px;

    background:
        rgba(17,14,4,.24);
}

.gsxsxproc__shipping-price-code{
    display:grid !important;
    place-items:center !important;

    width:46px;
    height:46px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__shipping-price-copy{
    min-width:0;

    color:#817c6b;

    font-size:10px;
    line-height:1.6;
}

.gsxsxproc__shipping-price-copy strong{
    color:#c9bd94;
    font-weight:600;
}

.gsxsxproc__shipping-price-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9a70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   DIAGNÓSTICO / PRESUPUESTO
   ========================================================= */

.gsxsxproc__quote{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(255,200,87,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(17,14,4,.31),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__quote::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--green),
            transparent
        );
}

.gsxsxproc__quote-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxproc__quote-card{
    --quote-color:var(--yellow);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(255,200,87,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxproc__quote-card:nth-child(2){
    --quote-color:var(--violet);
}

.gsxsxproc__quote-card:nth-child(3){
    --quote-color:var(--green);
}

.gsxsxproc__quote-card:nth-child(4){
    --quote-color:var(--cyan);
}

.gsxsxproc__quote-code{
    display:grid !important;
    place-items:center !important;

    width:40px;
    height:40px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--quote-color);

    border-radius:8px;

    color:var(--quote-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__quote-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--quote-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__quote-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   NO ANTICIPO
   ========================================================= */

.gsxsxproc__payment{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.09);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(101,245,47,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(5,18,7,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__payment::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:200px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxproc__payment-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxproc__payment-code{
    display:grid !important;
    place-items:center !important;

    width:66px;
    height:66px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(101,245,47,.20);

    border-radius:14px;

    color:var(--green2);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxproc__payment-copy{
    min-width:0;
}

.gsxsxproc__payment-copy strong{
    display:block;

    margin-bottom:5px;

    color:#b8d7b2;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxproc__payment-copy span{
    display:block;

    color:#758377;

    font-size:10px;
    line-height:1.62;
}

.gsxsxproc__payment-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:8px;

    color:#8fb583;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TIEMPOS
   ========================================================= */

.gsxsxproc__time{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(139,105,255,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(139,105,255,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(10,7,20,.29),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__time::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--green),
            transparent
        );
}

.gsxsxproc__time-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxproc__time-card{
    --time-color:var(--violet);

    min-width:0;

    padding:
        16px 13px;

    border:
        1px solid rgba(139,105,255,.05);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxproc__time-card:nth-child(2){
    --time-color:var(--green);
}

.gsxsxproc__time-card:nth-child(3){
    --time-color:var(--yellow);
}

.gsxsxproc__time-card:nth-child(4){
    --time-color:var(--cyan);
}

.gsxsxproc__time-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--time-color);

    border-radius:9px;

    color:var(--time-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__time-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--time-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__time-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   ENVÍO DE REGRESO
   ========================================================= */

.gsxsxproc__return{
    position:relative;

    margin-bottom:18px;

    padding:21px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.085);

    border-radius:18px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(41,217,239,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(3,16,14,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__return::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:200px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxproc__return-layout{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:16px;

    align-items:center;
}

.gsxsxproc__return-code{
    display:grid !important;
    place-items:center !important;

    width:66px;
    height:66px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.20);

    border-radius:14px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__return-copy{
    min-width:0;
}

.gsxsxproc__return-copy strong{
    display:block;

    margin-bottom:5px;

    color:#a9cdd0;

    font-size:13px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxproc__return-copy span{
    display:block;

    color:#728184;

    font-size:10px;
    line-height:1.62;
}

.gsxsxproc__return-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(41,217,239,.11);

    border-radius:8px;

    color:#86aeb2;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FILTRO DE COTIZACIÓN
   ========================================================= */

.gsxsxproc__filter{
    position:relative;

    margin-bottom:18px;

    padding:24px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:20px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255,200,87,.04),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(18,15,5,.34),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:235px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            var(--green),
            transparent
        );
}

.gsxsxproc__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:7px;

    margin-bottom:17px;
}

.gsxsxproc__filter-flow::before{
    content:"";

    position:absolute;

    left:8%;
    right:8%;
    top:25px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            var(--red),
            var(--violet),
            var(--green),
            var(--green2)
        );

    opacity:.18;
}

.gsxsxproc__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxproc__filter-step:nth-child(2){
    --filter-color:var(--yellow);
}

.gsxsxproc__filter-step:nth-child(3){
    --filter-color:var(--red);
}

.gsxsxproc__filter-step:nth-child(4){
    --filter-color:var(--violet);
}

.gsxsxproc__filter-step:nth-child(5){
    --filter-color:var(--green);
}

.gsxsxproc__filter-step:nth-child(6){
    --filter-color:var(--green2);
}

.gsxsxproc__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__filter-step strong{
    display:block;

    color:var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__filter-copy{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}

.gsxsxproc__filter-result{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:17px;

    border:
        1px solid rgba(255,97,119,.08);

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,97,119,.013),
            rgba(255,200,87,.010)
        );
}

.gsxsxproc__filter-result-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,97,119,.17);

    border-radius:10px;

    color:var(--red);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__filter-result-copy{
    min-width:0;

    color:#807276;

    font-size:10px;
    line-height:1.62;
}

.gsxsxproc__filter-result-copy strong{
    color:#d2b8bc;
    font-weight:600;
}

.gsxsxproc__filter-result-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,97,119,.09);

    border-radius:8px;

    color:#ad858b;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   HUD
   ========================================================= */

.gsxsxproc__hud{
    position:relative;

    min-height:600px;

    margin-bottom:18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(101,245,47,.060),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 38%,
            rgba(41,217,239,.023),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(4,15,7,.55),
            rgba(2,8,4,.97)
        );
}

.gsxsxproc__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(101,245,47,.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.024) 1px,
            transparent 1px
        );

    background-size:28px 28px;
}

.gsxsxproc__hud-head{
    position:absolute;
    z-index:24;

    left:17px;
    right:17px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.gsxsxproc__hud-code{
    color:#94c288;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 9px;

    border:
        1px solid rgba(101,245,47,.11);

    border-radius:999px;

    color:#90b785;

    font-size:9px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxproc__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);

    animation:
        gsxsxprocState
        1.8s ease-in-out infinite;
}

@keyframes gsxsxprocState{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   CORE
   ========================================================= */

.gsxsxproc__core{
    position:absolute;
    z-index:11;

    left:50%;
    top:38%;

    width:174px;
    height:174px;

    transform:
        translate(-50%,-50%);

    display:grid;
    place-items:center;

    border:
        1px solid rgba(101,245,47,.26);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(101,245,47,.11),
            rgba(2,8,4,.98) 70%
        );

    box-shadow:
        0 0 40px rgba(101,245,47,.07);

    animation:
        gsxsxprocCore
        3.2s ease-in-out infinite;
}

.gsxsxproc__core::before{
    content:"";

    position:absolute;
    inset:-42px;

    border:
        1px dashed rgba(41,217,239,.12);

    border-radius:50%;

    animation:
        gsxsxprocRing
        15s linear infinite;
}

.gsxsxproc__core::after{
    content:"";

    position:absolute;
    inset:-86px;

    border:
        1px solid rgba(139,105,255,.05);

    border-radius:50%;
}

@keyframes gsxsxprocCore{

    0%,
    100%{
        box-shadow:
            0 0 22px rgba(101,245,47,.05);
    }

    50%{
        box-shadow:
            0 0 48px rgba(101,245,47,.15);
    }

}

@keyframes gsxsxprocRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.gsxsxproc__core-copy{
    position:relative;
    z-index:3;

    text-align:center;
}

.gsxsxproc__core-title{
    display:block;

    color:var(--green2);

    font-size:16px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__core-sub{
    display:block;

    margin-top:4px;

    color:#718173;

    font-size:8px;
    line-height:1.4;
}


/* =========================================================
   PULSOS / SWEEP
   ========================================================= */

.gsxsxproc__pulse{
    position:absolute;
    z-index:7;

    left:50%;
    top:38%;

    width:150px;
    height:150px;

    transform:
        translate(-50%,-50%)
        scale(.7);

    border:
        1px solid rgba(101,245,47,.22);

    border-radius:50%;

    opacity:0;

    animation:
        gsxsxprocPulse
        3.6s ease-out infinite;
}

.gsxsxproc__pulse--b{
    animation-delay:1.2s;

    border-color:
        rgba(41,217,239,.19);
}

.gsxsxproc__pulse--c{
    animation-delay:2.4s;

    border-color:
        rgba(139,105,255,.16);
}

@keyframes gsxsxprocPulse{

    0%{
        opacity:.62;

        transform:
            translate(-50%,-50%)
            scale(.7);
    }

    82%{
        opacity:.03;

        transform:
            translate(-50%,-50%)
            scale(2.35);
    }

    100%{
        opacity:0;

        transform:
            translate(-50%,-50%)
            scale(2.45);
    }

}

.gsxsxproc__sweep{
    position:absolute;
    z-index:8;

    left:50%;
    top:38%;

    width:155px;
    height:1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(41,217,239,.75),
            rgba(101,245,47,.12),
            transparent
        );

    box-shadow:
        0 0 7px rgba(41,217,239,.26);

    animation:
        gsxsxprocSweep
        4.8s linear infinite;
}

.gsxsxproc__sweep::after{
    content:"";

    position:absolute;

    right:10px;
    top:-3px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 9px rgba(41,217,239,.72);
}

@keyframes gsxsxprocSweep{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   HUD ROUTE
   ========================================================= */

.gsxsxproc__hud-route{
    position:absolute;
    z-index:18;

    left:22px;
    right:22px;
    bottom:94px;

    display:grid;

    grid-template-columns:
        repeat(9,minmax(0,1fr));

    gap:4px;
}

.gsxsxproc__hud-node{
    --node-color:var(--cyan);

    position:relative;

    min-width:0;

    text-align:center;
}

.gsxsxproc__hud-node:nth-child(2){
    --node-color:var(--blue);
}

.gsxsxproc__hud-node:nth-child(3){
    --node-color:var(--violet);
}

.gsxsxproc__hud-node:nth-child(4){
    --node-color:var(--yellow);
}

.gsxsxproc__hud-node:nth-child(5){
    --node-color:var(--green);
}

.gsxsxproc__hud-node:nth-child(6){
    --node-color:var(--orange);
}

.gsxsxproc__hud-node:nth-child(7){
    --node-color:var(--cyan);
}

.gsxsxproc__hud-node:nth-child(8){
    --node-color:var(--green2);
}

.gsxsxproc__hud-node:nth-child(9){
    --node-color:var(--green);
}

.gsxsxproc__hud-node::after{
    content:"";

    position:absolute;

    left:calc(50% + 20px);
    right:calc(-50% + 20px);
    top:20px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--node-color),
            rgba(101,245,47,.07)
        );
}

.gsxsxproc__hud-node:last-child::after{
    display:none;
}

.gsxsxproc__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:40px;
    height:40px;

    margin:
        0 auto 6px;

    padding:0 !important;

    border:
        1px solid var(--node-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.96);

    color:var(--node-color);

    font-size:6px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__hud-node-title{
    display:block;

    color:var(--node-color);

    font-size:6px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxproc__hud-node-copy{
    display:block;

    margin-top:3px;

    color:#637366;

    font-size:5px;
    line-height:1.4;
}


/* =========================================================
   HUD TOKEN
   ========================================================= */

.gsxsxproc__hud-token{
    position:absolute;
    z-index:22;

    left:4%;
    bottom:130px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.72);

    opacity:0;

    animation:
        gsxsxprocHudToken
        10s linear infinite;
}

@keyframes gsxsxprocHudToken{

    0%{
        left:4%;
        opacity:0;
        background:var(--cyan);
    }

    6%{
        opacity:1;
    }

    16%{
        background:var(--blue);
    }

    27%{
        background:var(--violet);
    }

    38%{
        background:var(--yellow);
    }

    49%{
        background:var(--green);
    }

    60%{
        background:var(--orange);
    }

    71%{
        background:var(--cyan);
    }

    82%{
        background:var(--green2);
    }

    95%{
        left:96%;
        background:var(--green);
        opacity:1;
    }

    100%{
        left:96%;
        opacity:0;
    }

}


/* =========================================================
   ECUACIÓN
   ========================================================= */

.gsxsxproc__equation{
    position:absolute;
    z-index:23;

    left:17px;
    right:17px;
    bottom:14px;

    padding:
        10px 12px;

    border:
        1px solid rgba(101,245,47,.075);

    border-radius:9px;

    background:
        rgba(3,11,6,.84);

    color:#708273;

    font-size:9px;
    line-height:1.5;
    font-weight:700;

    text-align:center;

    text-transform:uppercase;
}

.gsxsxproc__equation b{
    color:var(--green2);
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxproc__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(101,245,47,.010)
        );
}

.gsxsxproc__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxproc__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxproc__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxproc__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxproc__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(5,17,7,.54),
            rgba(2,7,3,.98)
        );
}

.gsxsxproc__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxproc__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxproc__terminal-dot{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxproc__terminal-dot--red{
    background:var(--red);
}

.gsxsxproc__terminal-dot--yellow{
    background:var(--yellow);
}

.gsxsxproc__terminal-dot--green{
    background:var(--green);
}

.gsxsxproc__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxproc__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxproc__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxproc__terminal-item{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxproc__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxproc__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxproc__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxproc__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxproc__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1150 PX
   ========================================================= */

@media (max-width:1150px){

    .gsxsxproc__route-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));

        gap:18px 8px;
    }

    .gsxsxproc__route-grid::before,
    .gsxsxproc__route-token{
        display:none;
    }

    .gsxsxproc__hud-route{
        grid-template-columns:
            repeat(5,minmax(0,1fr));

        gap:14px 6px;
    }

    .gsxsxproc__hud-node::after,
    .gsxsxproc__hud-token{
        display:none;
    }

    .gsxsxproc__hud{
        min-height:700px;
    }

}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxproc__shipping-grid,
    .gsxsxproc__quote-grid,
    .gsxsxproc__time-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxproc__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxproc__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxproc__status{
        max-width:650px;
    }

    .gsxsxproc__steps-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxproc__reception-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxproc__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxproc__scan,
    .gsxsxproc__orbit{
        display:none;
    }

    .gsxsxproc__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxproc__heading{
        display:block;
    }

    .gsxsxproc__status{
        margin-top:19px;
    }

    .gsxsxproc__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxproc__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxproc__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxproc__principle-state{
        width:fit-content;
    }

    .gsxsxproc__route,
    .gsxsxproc__steps,
    .gsxsxproc__reception,
    .gsxsxproc__shipping,
    .gsxsxproc__quote,
    .gsxsxproc__payment,
    .gsxsxproc__time,
    .gsxsxproc__return,
    .gsxsxproc__filter{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxproc__section-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxproc__section-state{
        width:fit-content;
    }

    .gsxsxproc__route-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .gsxsxproc__steps-grid,
    .gsxsxproc__shipping-grid,
    .gsxsxproc__quote-grid,
    .gsxsxproc__time-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxproc__shipping-price,
    .gsxsxproc__payment-layout,
    .gsxsxproc__return-layout{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxproc__shipping-price-state,
    .gsxsxproc__payment-state,
    .gsxsxproc__return-state{
        width:fit-content;
    }

    .gsxsxproc__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxproc__filter-flow::before{
        display:none;
    }

    .gsxsxproc__filter-result{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxproc__filter-result-state{
        width:fit-content;
    }


    /* =====================================================
       HUD MÓVIL
       ===================================================== */

    .gsxsxproc__hud{
        min-height:800px;
    }

    .gsxsxproc__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:7px;
    }

    .gsxsxproc__core{
        top:26%;

        width:140px;
        height:140px;
    }

    .gsxsxproc__pulse,
    .gsxsxproc__sweep{
        top:26%;
    }

    .gsxsxproc__sweep{
        width:125px;
    }

    .gsxsxproc__hud-route{
        left:15px;
        right:15px;
        bottom:84px;

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px 7px;
    }

    .gsxsxproc__hud-circle{
        width:46px;
        height:46px;

        font-size:7px;
    }

    .gsxsxproc__hud-node-title{
        font-size:7px;
    }

    .gsxsxproc__hud-node-copy{
        font-size:6px;
    }

    .gsxsxproc__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxproc__rule-state{
        width:fit-content;
    }

    .gsxsxproc__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxproc__terminal-state{
        width:fit-content;
    }

    .gsxsxproc__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxproc__route-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxproc__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxproc__hud{
        min-height:1060px;
    }

    .gsxsxproc__hud-route{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxproc__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxproc__route-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxproc__hud{
        min-height:1490px;
    }

    .gsxsxproc__hud-route{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxproc__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxproc__terminal-item{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxproc *,
    .gsxsxproc *::before,
    .gsxsxproc *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxproc__scan,
    .gsxsxproc__orbit,
    .gsxsxproc__route-token,
    .gsxsxproc__hud-token{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — PREGUNTAS FRECUENTES

   CSS ID EXTERIOR:
   preguntas-xbox-series-x

   ROOT: .gsxsxfaq
   ========================================================= */

.gsxsxfaq{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f3fff4;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 10% 9%,
            rgba(101,245,47,.055),
            transparent 29%
        ),
        radial-gradient(
            circle at 89% 15%,
            rgba(41,217,239,.034),
            transparent 30%
        ),
        radial-gradient(
            circle at 74% 86%,
            rgba(139,105,255,.026),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #061008 50%,
            #020403 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxfaq *,
.gsxsxfaq *::before,
.gsxsxfaq *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxfaq__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:
        linear-gradient(
            rgba(101,245,47,.031) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.029) 1px,
            transparent 1px
        );

    background-size:46px 46px;
}

.gsxsxfaq__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.92),
            transparent 17%,
            transparent 83%,
            rgba(2,4,3,.92)
        );
}


/* =========================================================
   ESCÁNER
   ========================================================= */

.gsxsxfaq__scan{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}

.gsxsxfaq__scan::before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(41,217,239,.12),
            rgba(101,245,47,.13),
            rgba(139,105,255,.08),
            transparent
        );

    box-shadow:
        0 0 14px rgba(41,217,239,.07);

    animation:
        gsxsxfaqScan
        13s linear infinite;
}

@keyframes gsxsxfaqScan{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:.30;
    }

    92%{
        opacity:.07;
    }

    100%{
        transform:translateY(8500px);
        opacity:0;
    }

}


/* =========================================================
   ÓRBITA
   ========================================================= */

.gsxsxfaq__orbit{
    position:absolute;

    width:820px;
    height:820px;

    left:-505px;
    top:1180px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.027);

    border-radius:50%;

    animation:
        gsxsxfaqOrbit
        82s linear infinite;
}

.gsxsxfaq__orbit::before{
    content:"";

    position:absolute;
    inset:132px;

    border:
        1px dashed rgba(41,217,239,.031);

    border-radius:50%;
}

.gsxsxfaq__orbit::after{
    content:"";

    position:absolute;
    inset:252px;

    border:
        1px solid rgba(139,105,255,.024);

    border-radius:50%;
}

@keyframes gsxsxfaqOrbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxfaq__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        88px 0 92px;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.gsxsxfaq__heading{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.42fr);

    gap:38px;

    align-items:end;

    margin-bottom:27px;
}

.gsxsxfaq__heading-main{
    min-width:0;
}

.gsxsxfaq__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:15px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9bd18a;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxfaq__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.58);
}

.gsxsxfaq__title{
    max-width:1040px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            31px,
            4vw,
            49px
        );

    line-height:1.08;
    font-weight:700;

    letter-spacing:-.035em;
}

.gsxsxfaq__title span{
    color:var(--green2);
}

.gsxsxfaq__intro{
    max-width:960px;

    margin:
        16px 0 0;

    color:var(--muted);

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.gsxsxfaq__status{
    position:relative;

    min-width:0;

    padding:
        18px 19px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,200,87,.018),
            rgba(4,13,7,.92)
        );
}

.gsxsxfaq__status::before{
    content:"";

    position:absolute;

    left:0;
    top:12px;
    bottom:12px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--yellow),
            transparent
        );
}

.gsxsxfaq__status-label{
    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:7px;

    color:#c1aa70;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfaq__status-label::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--yellow);

    box-shadow:
        0 0 7px rgba(255,200,87,.50);
}

.gsxsxfaq__status p{
    margin:0;

    color:#837f6e;

    font-size:12px;
    line-height:1.62;
}


/* =========================================================
   PRINCIPIO
   ========================================================= */

.gsxsxfaq__principle{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(41,217,239,.015),
            rgba(101,245,47,.014)
        );
}

.gsxsxfaq__principle::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:225px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            var(--yellow),
            transparent
        );
}

.gsxsxfaq__principle-code{
    display:grid !important;
    place-items:center !important;

    width:58px;
    height:58px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(41,217,239,.17);

    border-radius:13px;

    color:var(--cyan);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;

    text-align:center !important;
}

.gsxsxfaq__principle-copy{
    min-width:0;
}

.gsxsxfaq__principle-copy strong{
    display:block;

    margin-bottom:5px;

    color:#d8e8da;

    font-size:14px;
    line-height:1.45;
    font-weight:600;
}

.gsxsxfaq__principle-copy span{
    display:block;

    color:#788a7c;

    font-size:11px;
    line-height:1.62;
}

.gsxsxfaq__principle-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255,200,87,.11);

    border-radius:999px;

    color:#aa9a70;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   DATOS RÁPIDOS
   ========================================================= */

.gsxsxfaq__facts{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;

    margin-bottom:18px;
}

.gsxsxfaq__fact{
    --fact-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        17px 14px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.48);
}

.gsxsxfaq__fact:nth-child(2){
    --fact-color:var(--yellow);
}

.gsxsxfaq__fact:nth-child(3){
    --fact-color:var(--violet);
}

.gsxsxfaq__fact:nth-child(4){
    --fact-color:var(--cyan);
}

.gsxsxfaq__fact::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:72px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--fact-color),
            transparent
        );
}

.gsxsxfaq__fact-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--fact-color);

    border-radius:9px;

    color:var(--fact-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxfaq__fact strong{
    display:block;

    margin-bottom:4px;

    color:var(--fact-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfaq__fact-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   FILTRO
   ========================================================= */

.gsxsxfaq__filter{
    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(255,200,87,.035),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(17,14,4,.31),
            rgba(2,8,4,.97)
        );
}

.gsxsxfaq__filter::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--red),
            var(--green),
            transparent
        );
}

.gsxsxfaq__filter-head{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:16px;

    align-items:start;

    margin-bottom:18px;
}

.gsxsxfaq__filter-label{
    display:block;

    margin-bottom:6px;

    color:#c2aa6c;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfaq__filter-title{
    margin:0;

    color:#e4f2e5;

    font-size:22px;
    line-height:1.38;
    font-weight:700;
}

.gsxsxfaq__filter-copy{
    max-width:900px;

    margin:
        8px 0 0;

    color:#78897b;

    font-size:11px;
    line-height:1.66;
}

.gsxsxfaq__filter-state{
    display:inline-flex;
    align-items:center;

    flex-shrink:0;

    padding:
        6px 9px;

    border:
        1px solid rgba(255,200,87,.10);

    border-radius:999px;

    color:#aa9a70;

    font-size:9px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfaq__filter-flow{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap:8px;
}

.gsxsxfaq__filter-flow::before{
    content:"";

    position:absolute;

    left:10%;
    right:10%;
    top:27px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            var(--red),
            var(--violet),
            var(--green)
        );

    opacity:.18;
}

.gsxsxfaq__filter-step{
    --filter-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxfaq__filter-step:nth-child(2){
    --filter-color:var(--yellow);
}

.gsxsxfaq__filter-step:nth-child(3){
    --filter-color:var(--red);
}

.gsxsxfaq__filter-step:nth-child(4){
    --filter-color:var(--violet);
}

.gsxsxfaq__filter-step:nth-child(5){
    --filter-color:var(--green);
}

.gsxsxfaq__filter-circle{
    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--filter-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.97);

    color:var(--filter-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxfaq__filter-step strong{
    display:block;

    color:var(--filter-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfaq__filter-step-copy{
    display:block;

    margin-top:3px;

    color:#676e62;

    font-size:7px;
    line-height:1.4;
}


/* =========================================================
   FAQ GROUP
   ========================================================= */

.gsxsxfaq__group{
    --group-color:var(--green);

    position:relative;

    margin-bottom:18px;

    padding:23px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(5,17,7,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxfaq__group--technical{
    --group-color:var(--cyan);

    border-color:
        rgba(41,217,239,.08);

    background:
        linear-gradient(
            145deg,
            rgba(3,16,14,.42),
            rgba(2,8,4,.97)
        );
}

.gsxsxfaq__group--service{
    --group-color:var(--violet);

    border-color:
        rgba(139,105,255,.08);

    background:
        linear-gradient(
            145deg,
            rgba(10,7,20,.31),
            rgba(2,8,4,.97)
        );
}

.gsxsxfaq__group::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:230px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--group-color),
            var(--green),
            transparent
        );
}

.gsxsxfaq__group-head{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;
}

.gsxsxfaq__group-code{
    display:grid !important;
    place-items:center !important;

    width:54px;
    height:54px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--group-color);

    border-radius:12px;

    color:var(--group-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxfaq__group-copy{
    min-width:0;
}

.gsxsxfaq__group-copy strong{
    display:block;

    margin-bottom:4px;

    color:var(--group-color);

    font-size:12px;
    line-height:1.45;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxfaq__group-copy span{
    display:block;

    color:#718075;

    font-size:10px;
    line-height:1.58;
}

.gsxsxfaq__group-count{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,255,255,.055);

    border-radius:8px;

    color:var(--group-color);

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FAQ GRID
   ========================================================= */

.gsxsxfaq__faq-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:9px;

    align-items:start;
}


/* =========================================================
   DETAILS
   ========================================================= */

.gsxsxfaq__item{
    --item-color:var(--group-color);

    position:relative;

    min-width:0;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.052);

    border-radius:11px;

    background:
        rgba(3,11,6,.48);

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.gsxsxfaq__item::before{
    content:"";

    position:absolute;
    z-index:2;

    left:0;
    top:0;

    width:72px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--item-color),
            transparent
        );
}

.gsxsxfaq__item:hover{
    border-color:
        rgba(101,245,47,.11);

    background:
        rgba(4,14,7,.62);

    transform:
        translateY(-1px);
}

.gsxsxfaq__group--technical .gsxsxfaq__item:hover{
    border-color:
        rgba(41,217,239,.11);
}

.gsxsxfaq__group--service .gsxsxfaq__item:hover{
    border-color:
        rgba(139,105,255,.11);
}

.gsxsxfaq__item[open]{
    border-color:
        rgba(101,245,47,.13);

    background:
        linear-gradient(
            145deg,
            rgba(101,245,47,.022),
            rgba(3,11,6,.58)
        );

    box-shadow:
        0 8px 30px rgba(0,0,0,.14);
}

.gsxsxfaq__group--technical .gsxsxfaq__item[open]{
    border-color:
        rgba(41,217,239,.13);
}

.gsxsxfaq__group--service .gsxsxfaq__item[open]{
    border-color:
        rgba(139,105,255,.13);
}


/* =========================================================
   SUMMARY
   ========================================================= */

.gsxsxfaq__question{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) 34px;

    gap:11px;

    align-items:center;

    min-height:78px;

    padding:
        14px 14px;

    cursor:pointer;

    list-style:none;

    user-select:none;
}

.gsxsxfaq__question::-webkit-details-marker{
    display:none;
}

.gsxsxfaq__question::marker{
    content:"";
}

.gsxsxfaq__question-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--item-color);

    border-radius:8px;

    color:var(--item-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxfaq__question-text{
    min-width:0;

    color:#d9e7db;

    font-size:10px;
    line-height:1.52;
    font-weight:600;
}

.gsxsxfaq__question-toggle{
    position:relative;

    display:grid !important;
    place-items:center !important;

    width:32px;
    height:32px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:50%;

    background:
        rgba(2,8,4,.75);
}

.gsxsxfaq__question-toggle::before,
.gsxsxfaq__question-toggle::after{
    content:"";

    position:absolute;

    width:11px;
    height:1px;

    background:var(--item-color);

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.gsxsxfaq__question-toggle::after{
    transform:rotate(90deg);
}

.gsxsxfaq__item[open] .gsxsxfaq__question-toggle::after{
    transform:rotate(0deg);
    opacity:0;
}


/* =========================================================
   ANSWER
   ========================================================= */

.gsxsxfaq__answer{
    position:relative;

    margin:
        0 14px 14px;

    padding:
        13px 14px;

    border-top:
        1px solid rgba(255,255,255,.04);

    color:#748176;

    font-size:9px;
    line-height:1.68;
}

.gsxsxfaq__answer p{
    margin:0;
}

.gsxsxfaq__answer p + p{
    margin-top:9px;
}

.gsxsxfaq__answer strong{
    color:#c8d8ca;
    font-weight:600;
}

.gsxsxfaq__answer-emphasis{
    display:block;

    margin-top:10px;

    padding:
        8px 9px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius:7px;

    background:
        rgba(2,8,4,.45);

    color:var(--item-color);

    font-size:8px;
    line-height:1.5;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   REGLA FINAL
   ========================================================= */

.gsxsxfaq__rule{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    margin-bottom:18px;

    padding:17px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,200,87,.013),
            rgba(101,245,47,.010)
        );
}

.gsxsxfaq__rule-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.16);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxfaq__rule-copy{
    min-width:0;

    color:#7f7b6d;

    font-size:10px;
    line-height:1.62;
}

.gsxsxfaq__rule-copy strong{
    color:#cfc5a5;
    font-weight:600;
}

.gsxsxfaq__rule-state{
    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(255,200,87,.09);

    border-radius:8px;

    color:#aa9b70;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.gsxsxfaq__terminal{
    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.095);

    border-radius:16px;

    background:
        linear-gradient(
            155deg,
            rgba(5,17,7,.54),
            rgba(2,7,3,.98)
        );
}

.gsxsxfaq__terminal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:42px;

    padding:
        9px 13px;

    border-bottom:
        1px solid rgba(101,245,47,.06);

    background:
        rgba(5,16,7,.70);
}

.gsxsxfaq__terminal-dots{
    display:flex;

    gap:6px;
}

.gsxsxfaq__terminal-dot{
    width:6px;
    height:6px;

    border-radius:50%;
}

.gsxsxfaq__terminal-dot--red{
    background:var(--red);
}

.gsxsxfaq__terminal-dot--yellow{
    background:var(--yellow);
}

.gsxsxfaq__terminal-dot--green{
    background:var(--green);
}

.gsxsxfaq__terminal-name{
    color:#607162;

    font-size:9px;
    line-height:1.35;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxfaq__terminal-body{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:15px;

    align-items:center;

    padding:17px;
}

.gsxsxfaq__terminal-route{
    display:flex;
    flex-wrap:wrap;

    gap:6px;
}

.gsxsxfaq__terminal-item{
    display:inline-flex;
    align-items:center;

    min-height:28px;

    padding:
        5px 8px;

    border:
        1px solid rgba(101,245,47,.045);

    border-radius:7px;

    background:
        rgba(4,13,5,.44);

    color:#6e7f71;

    font-size:9px;
    line-height:1.35;
}

.gsxsxfaq__terminal-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:9px;

    color:#8eb482;

    font-size:9px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxfaq__terminal-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.50);
}


/* =========================================================
   FOOTER
   ========================================================= */

.gsxsxfaq__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:20px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxfaq__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxfaq__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxfaq__facts{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxfaq__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 80px;
    }

    .gsxsxfaq__heading{
        grid-template-columns:
            minmax(0,1fr);

        gap:19px;
    }

    .gsxsxfaq__status{
        max-width:650px;
    }

    .gsxsxfaq__filter-flow{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:17px 8px;
    }

    .gsxsxfaq__filter-flow::before{
        display:none;
    }

    .gsxsxfaq__faq-grid{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxfaq__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxfaq__scan,
    .gsxsxfaq__orbit{
        display:none;
    }

    .gsxsxfaq__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 65px;
    }

    .gsxsxfaq__heading{
        display:block;
    }

    .gsxsxfaq__status{
        margin-top:19px;
    }

    .gsxsxfaq__title{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    .gsxsxfaq__intro{
        font-size:14px;
        line-height:1.7;
    }

    .gsxsxfaq__principle{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;

        padding:15px;
    }

    .gsxsxfaq__principle-state{
        width:fit-content;
    }

    .gsxsxfaq__facts{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxfaq__filter,
    .gsxsxfaq__group{
        padding:
            18px 15px;

        border-radius:15px;
    }

    .gsxsxfaq__filter-head{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxfaq__filter-state{
        width:fit-content;
    }

    .gsxsxfaq__filter-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gsxsxfaq__group-head{
        grid-template-columns:
            auto minmax(0,1fr);

        gap:11px;
    }

    .gsxsxfaq__group-count{
        grid-column:
            1 / -1;

        width:fit-content;
    }

    .gsxsxfaq__question{
        grid-template-columns:
            auto minmax(0,1fr) 32px;

        gap:9px;

        min-height:74px;

        padding:
            12px;
    }

    .gsxsxfaq__answer{
        margin:
            0 12px 12px;

        padding:
            12px;
    }

    .gsxsxfaq__rule{
        grid-template-columns:
            minmax(0,1fr);

        gap:8px;
    }

    .gsxsxfaq__rule-state{
        width:fit-content;
    }

    .gsxsxfaq__terminal-body{
        grid-template-columns:
            minmax(0,1fr);

        gap:11px;

        padding:
            15px 13px;
    }

    .gsxsxfaq__terminal-state{
        width:fit-content;
    }

    .gsxsxfaq__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxfaq__filter-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxfaq__question{
        grid-template-columns:
            34px minmax(0,1fr) 30px;
    }

    .gsxsxfaq__question-code{
        width:34px;
        height:34px;

        font-size:7px;
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxfaq__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxfaq__question{
        grid-template-columns:
            minmax(0,1fr) 30px;
    }

    .gsxsxfaq__question-code{
        display:none !important;
    }

    .gsxsxfaq__terminal-route{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);

        width:100%;
    }

    .gsxsxfaq__terminal-item{
        width:100%;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxfaq *,
    .gsxsxfaq *::before,
    .gsxsxfaq *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxfaq__scan,
    .gsxsxfaq__orbit{
        display:none !important;
    }

}


/* ===== SECTION BREAK ===== */


/* =========================================================
   GAMMERS STYLE
   XBOX SERIES X + SERIES S — CTA FINAL

   CSS ID EXTERIOR:
   cta-xbox-series-x

   ROOT: .gsxsxcta
   ========================================================= */

.gsxsxcta{
    --bg:#020403;
    --bg2:#061008;

    --green:#65f52f;
    --green2:#8aff54;

    --cyan:#29d9ef;
    --blue:#4b8eff;
    --violet:#8b69ff;

    --yellow:#ffc857;
    --orange:#ff9c42;
    --red:#ff6177;

    --white:#f5fff5;
    --text:#dce9de;
    --muted:#87988a;
    --muted2:#667568;

    position:relative;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    color:var(--text);

    background:
        radial-gradient(
            circle at 13% 20%,
            rgba(101,245,47,.095),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 22%,
            rgba(41,217,239,.050),
            transparent 31%
        ),
        radial-gradient(
            circle at 70% 92%,
            rgba(139,105,255,.030),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #020403 0%,
            #071109 47%,
            #010302 100%
        );

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}

.gsxsxcta *,
.gsxsxcta *::before,
.gsxsxcta *::after{
    box-sizing:border-box;

    font-family:
        "Poppins",
        system-ui,
        sans-serif;

    writing-mode:horizontal-tb;
    word-break:normal;
    overflow-wrap:break-word;
}


/* =========================================================
   FONDO
   ========================================================= */

.gsxsxcta__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.21;

    background-image:
        linear-gradient(
            rgba(101,245,47,.034) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.028) 1px,
            transparent 1px
        );

    background-size:48px 48px;
}

.gsxsxcta__grid::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,3,2,.94),
            transparent 16%,
            transparent 84%,
            rgba(1,3,2,.94)
        );
}


/* =========================================================
   LÍNEA SUPERIOR
   ========================================================= */

.gsxsxcta__topline{
    position:absolute;

    left:0;
    right:0;
    top:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--green),
            var(--cyan),
            var(--green),
            transparent
        );

    opacity:.78;

    box-shadow:
        0 0 20px rgba(101,245,47,.12);
}


/* =========================================================
   DESTELLOS
   ========================================================= */

.gsxsxcta__flare{
    position:absolute;

    width:420px;
    height:420px;

    left:-210px;
    top:80px;

    pointer-events:none;

    border:
        1px solid rgba(101,245,47,.035);

    border-radius:50%;

    animation:
        gsxsxctaRotate
        65s linear infinite;
}

.gsxsxcta__flare::before{
    content:"";

    position:absolute;
    inset:65px;

    border:
        1px dashed rgba(41,217,239,.045);

    border-radius:50%;
}

.gsxsxcta__flare::after{
    content:"";

    position:absolute;
    inset:135px;

    border:
        1px solid rgba(139,105,255,.032);

    border-radius:50%;
}

@keyframes gsxsxctaRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   SHELL
   ========================================================= */

.gsxsxcta__shell{
    position:relative;
    z-index:3;

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:0 auto;

    padding:
        92px 0 86px;
}


/* =========================================================
   HERO CTA
   ========================================================= */

.gsxsxcta__hero{
    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(340px,.85fr);

    gap:22px;

    align-items:stretch;

    margin-bottom:18px;
}


/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.gsxsxcta__main{
    position:relative;

    min-width:0;

    padding:
        34px 31px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.12);

    border-radius:24px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(101,245,47,.075),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(7,22,9,.78),
            rgba(2,8,4,.96)
        );

    box-shadow:
        0 22px 70px rgba(0,0,0,.18);
}

.gsxsxcta__main::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:260px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxcta__main::after{
    content:"";

    position:absolute;

    width:210px;
    height:210px;

    right:-105px;
    bottom:-105px;

    border:
        1px solid rgba(101,245,47,.06);

    border-radius:50%;
}


/* =========================================================
   KICKER
   ========================================================= */

.gsxsxcta__kicker{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-bottom:17px;

    padding:
        7px 11px;

    border:
        1px solid rgba(101,245,47,.15);

    border-radius:999px;

    background:
        rgba(101,245,47,.025);

    color:#9dd38b;

    font-size:11px;
    line-height:1.3;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}

.gsxsxcta__kicker::before{
    content:"";

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(101,245,47,.62);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.gsxsxcta__title{
    max-width:790px;

    margin:0;

    color:var(--white);

    font-size:
        clamp(
            34px,
            4.4vw,
            54px
        );

    line-height:1.06;
    font-weight:700;

    letter-spacing:-.04em;
}

.gsxsxcta__title span{
    color:var(--green2);
}

.gsxsxcta__lead{
    max-width:780px;

    margin:
        17px 0 0;

    color:#869788;

    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   MENSAJE DE FILTRO
   ========================================================= */

.gsxsxcta__diagnostic-note{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:11px;

    align-items:center;

    margin-top:19px;

    padding:14px;

    border:
        1px solid rgba(255,200,87,.08);

    border-radius:12px;

    background:
        rgba(17,14,4,.22);
}

.gsxsxcta__diagnostic-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.17);

    border-radius:9px;

    color:var(--yellow);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__diagnostic-copy{
    min-width:0;

    color:#85806d;

    font-size:10px;
    line-height:1.58;
}

.gsxsxcta__diagnostic-copy strong{
    color:#cec39e;
    font-weight:600;
}


/* =========================================================
   BOTONES
   ========================================================= */

.gsxsxcta__actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:23px;
}

.gsxsxcta__button{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    min-height:53px;

    padding:
        12px 18px;

    overflow:hidden;

    border-radius:12px;

    text-decoration:none !important;

    font-size:11px;
    line-height:1.35;
    font-weight:700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.gsxsxcta__button:hover{
    transform:
        translateY(-2px);
}

.gsxsxcta__button--whatsapp{
    border:
        1px solid rgba(101,245,47,.34);

    background:
        linear-gradient(
            135deg,
            rgba(101,245,47,.95),
            rgba(91,218,45,.88)
        );

    color:#041104 !important;

    box-shadow:
        0 11px 30px rgba(101,245,47,.10);
}

.gsxsxcta__button--whatsapp:hover{
    box-shadow:
        0 15px 38px rgba(101,245,47,.18);
}

.gsxsxcta__button--phone{
    border:
        1px solid rgba(41,217,239,.18);

    background:
        rgba(41,217,239,.035);

    color:#8cd8df !important;
}

.gsxsxcta__button--phone:hover{
    border-color:
        rgba(41,217,239,.32);

    background:
        rgba(41,217,239,.065);
}

.gsxsxcta__button--map{
    border:
        1px solid rgba(139,105,255,.15);

    background:
        rgba(139,105,255,.028);

    color:#aaa0cd !important;
}

.gsxsxcta__button--map:hover{
    border-color:
        rgba(139,105,255,.27);

    background:
        rgba(139,105,255,.050);
}

.gsxsxcta__button-icon{
    display:grid !important;
    place-items:center !important;

    width:23px;
    height:23px;

    flex:0 0 23px;

    margin:0;
    padding:0 !important;

    border:
        1px solid currentColor;

    border-radius:50%;

    font-size:8px;
    line-height:1 !important;
    font-weight:800;

    opacity:.86;
}


/* =========================================================
   MICRO DATOS
   ========================================================= */

.gsxsxcta__micro{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:19px;
}

.gsxsxcta__micro-item{
    display:inline-flex;
    align-items:center;

    gap:6px;

    min-height:29px;

    padding:
        5px 8px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius:7px;

    background:
        rgba(2,8,4,.42);

    color:#69786b;

    font-size:8px;
    line-height:1.35;
    font-weight:600;
}

.gsxsxcta__micro-item::before{
    content:"";

    width:5px;
    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 6px rgba(101,245,47,.42);
}


/* =========================================================
   PANEL DERECHO
   ========================================================= */

.gsxsxcta__side{
    position:relative;

    min-width:0;

    padding:
        25px 22px;

    overflow:hidden;

    border:
        1px solid rgba(41,217,239,.09);

    border-radius:24px;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(41,217,239,.055),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            rgba(3,17,14,.66),
            rgba(2,8,4,.96)
        );
}

.gsxsxcta__side::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:180px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--green),
            transparent
        );
}

.gsxsxcta__side-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:18px;
}

.gsxsxcta__side-title{
    min-width:0;
}

.gsxsxcta__side-title span{
    display:block;

    margin-bottom:4px;

    color:#7ca9ae;

    font-size:9px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__side-title strong{
    display:block;

    color:#d7e8d9;

    font-size:15px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxcta__side-status{
    display:inline-flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:
        6px 8px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8eb482;

    font-size:8px;
    line-height:1.3;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__side-status::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.55);

    animation:
        gsxsxctaStatus
        1.8s ease-in-out infinite;
}

@keyframes gsxsxctaStatus{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}


/* =========================================================
   CONTACTO
   ========================================================= */

.gsxsxcta__contact-list{
    display:grid;

    gap:8px;
}

.gsxsxcta__contact{
    --contact-color:var(--green);

    display:grid;

    grid-template-columns:
        42px minmax(0,1fr);

    gap:10px;

    align-items:center;

    padding:
        12px;

    border:
        1px solid rgba(255,255,255,.045);

    border-radius:10px;

    background:
        rgba(3,11,6,.44);
}

.gsxsxcta__contact:nth-child(2){
    --contact-color:var(--cyan);
}

.gsxsxcta__contact:nth-child(3){
    --contact-color:var(--violet);
}

.gsxsxcta__contact:nth-child(4){
    --contact-color:var(--yellow);
}

.gsxsxcta__contact-code{
    display:grid !important;
    place-items:center !important;

    width:42px;
    height:42px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--contact-color);

    border-radius:9px;

    color:var(--contact-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__contact-copy{
    min-width:0;
}

.gsxsxcta__contact-copy strong{
    display:block;

    color:var(--contact-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__contact-copy span,
.gsxsxcta__contact-copy a{
    display:block;

    margin-top:3px;

    color:#778779 !important;

    font-size:9px;
    line-height:1.52;

    text-decoration:none !important;
}


/* =========================================================
   DIRECCIÓN
   ========================================================= */

.gsxsxcta__address{
    margin-top:10px;

    padding:
        14px;

    border:
        1px solid rgba(139,105,255,.065);

    border-radius:11px;

    background:
        rgba(10,7,20,.18);
}

.gsxsxcta__address-label{
    display:block;

    margin-bottom:5px;

    color:#978bb8;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__address-text{
    display:block;

    color:#787383;

    font-size:9px;
    line-height:1.6;
}


/* =========================================================
   CREDENCIALES
   ========================================================= */

.gsxsxcta__trust{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;

    margin-bottom:18px;
}

.gsxsxcta__trust-card{
    --trust-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        17px 14px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.055);

    border-radius:11px;

    background:
        rgba(3,11,6,.48);
}

.gsxsxcta__trust-card:nth-child(2){
    --trust-color:var(--cyan);
}

.gsxsxcta__trust-card:nth-child(3){
    --trust-color:var(--violet);
}

.gsxsxcta__trust-card:nth-child(4){
    --trust-color:var(--yellow);
}

.gsxsxcta__trust-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:72px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--trust-color),
            transparent
        );
}

.gsxsxcta__trust-code{
    display:grid !important;
    place-items:center !important;

    width:44px;
    height:44px;

    margin-bottom:9px;
    padding:0 !important;

    border:
        1px solid var(--trust-color);

    border-radius:9px;

    color:var(--trust-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__trust-card strong{
    display:block;

    margin-bottom:4px;

    color:var(--trust-color);

    font-size:9px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__trust-copy{
    display:block;

    color:#6f8073;

    font-size:9px;
    line-height:1.55;
}


/* =========================================================
   PUEBLA / NACIONAL
   ========================================================= */

.gsxsxcta__service{
    position:relative;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:11px;

    margin-bottom:18px;
}

.gsxsxcta__service-card{
    --service-color:var(--green);

    position:relative;

    min-width:0;

    padding:
        21px 18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.07);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(5,18,7,.38),
            rgba(2,8,4,.96)
        );
}

.gsxsxcta__service-card--national{
    --service-color:var(--cyan);

    border-color:
        rgba(41,217,239,.07);

    background:
        linear-gradient(
            145deg,
            rgba(3,16,14,.38),
            rgba(2,8,4,.96)
        );
}

.gsxsxcta__service-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:115px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--service-color),
            transparent
        );
}

.gsxsxcta__service-head{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:11px;

    align-items:center;

    margin-bottom:12px;
}

.gsxsxcta__service-code{
    display:grid !important;
    place-items:center !important;

    width:50px;
    height:50px;

    margin:0;
    padding:0 !important;

    border:
        1px solid var(--service-color);

    border-radius:11px;

    color:var(--service-color);

    font-size:9px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__service-head-copy strong{
    display:block;

    color:var(--service-color);

    font-size:11px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__service-head-copy span{
    display:block;

    margin-top:3px;

    color:#707f72;

    font-size:9px;
    line-height:1.45;
}

.gsxsxcta__service-list{
    display:grid;

    gap:7px;
}

.gsxsxcta__service-item{
    display:grid;

    grid-template-columns:
        6px minmax(0,1fr);

    gap:8px;

    align-items:start;

    color:#718075;

    font-size:9px;
    line-height:1.55;
}

.gsxsxcta__service-item::before{
    content:"";

    width:5px;
    height:5px;

    margin-top:5px;

    border-radius:50%;

    background:var(--service-color);

    box-shadow:
        0 0 6px rgba(101,245,47,.25);
}


/* =========================================================
   NACIONAL — GUÍA
   ========================================================= */

.gsxsxcta__shipping-note{
    display:grid;

    grid-template-columns:
        auto minmax(0,1fr);

    gap:10px;

    align-items:center;

    margin-top:11px;

    padding:
        11px;

    border:
        1px solid rgba(255,200,87,.07);

    border-radius:9px;

    background:
        rgba(17,14,4,.20);
}

.gsxsxcta__shipping-code{
    display:grid !important;
    place-items:center !important;

    width:38px;
    height:38px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(255,200,87,.14);

    border-radius:8px;

    color:var(--yellow);

    font-size:7px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__shipping-copy{
    color:#817c6c;

    font-size:8px;
    line-height:1.55;
}

.gsxsxcta__shipping-copy strong{
    color:#c6bb94;
    font-weight:600;
}


/* =========================================================
   HUD COMPACTO
   ========================================================= */

.gsxsxcta__hud{
    position:relative;

    margin-bottom:18px;

    padding:
        24px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.085);

    border-radius:19px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(101,245,47,.040),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(4,15,7,.47),
            rgba(2,8,4,.97)
        );
}

.gsxsxcta__hud::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.16;

    background-image:
        linear-gradient(
            rgba(101,245,47,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(41,217,239,.023) 1px,
            transparent 1px
        );

    background-size:26px 26px;
}

.gsxsxcta__hud-head{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:22px;
}

.gsxsxcta__hud-label{
    color:#91bd85;

    font-size:10px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__hud-state{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:
        6px 8px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:999px;

    color:#8eb482;

    font-size:8px;
    line-height:1.3;
    font-weight:700;
}

.gsxsxcta__hud-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.52);

    animation:
        gsxsxctaHudPulse
        1.8s ease-in-out infinite;
}

@keyframes gsxsxctaHudPulse{

    0%,
    100%{
        opacity:.35;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}

.gsxsxcta__hud-flow{
    position:relative;
    z-index:3;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:9px;
}

.gsxsxcta__hud-flow::before{
    content:"";

    position:absolute;

    left:12%;
    right:12%;
    top:28px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--yellow),
            var(--violet),
            var(--green)
        );

    opacity:.18;
}

.gsxsxcta__hud-node{
    --hud-color:var(--cyan);

    position:relative;
    z-index:3;

    min-width:0;

    text-align:center;
}

.gsxsxcta__hud-node:nth-child(2){
    --hud-color:var(--yellow);
}

.gsxsxcta__hud-node:nth-child(3){
    --hud-color:var(--violet);
}

.gsxsxcta__hud-node:nth-child(4){
    --hud-color:var(--green);
}

.gsxsxcta__hud-circle{
    display:grid !important;
    place-items:center !important;

    width:56px;
    height:56px;

    margin:
        0 auto 8px;

    padding:0 !important;

    border:
        1px solid var(--hud-color);

    border-radius:50%;

    background:
        rgba(2,9,4,.98);

    color:var(--hud-color);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__hud-node strong{
    display:block;

    color:var(--hud-color);

    font-size:8px;
    line-height:1.4;
    font-weight:700;

    text-transform:uppercase;
}

.gsxsxcta__hud-copy{
    display:block;

    margin-top:3px;

    color:#657367;

    font-size:7px;
    line-height:1.42;
}


/* =========================================================
   HUD TOKEN
   ========================================================= */

.gsxsxcta__hud-token{
    position:absolute;
    z-index:5;

    left:12%;
    bottom:76px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(41,217,239,.70);

    opacity:0;

    animation:
        gsxsxctaToken
        6s linear infinite;
}

@keyframes gsxsxctaToken{

    0%{
        left:12%;
        opacity:0;
        background:var(--cyan);
    }

    8%{
        opacity:1;
    }

    35%{
        background:var(--yellow);
    }

    62%{
        background:var(--violet);
    }

    92%{
        left:88%;
        opacity:1;
        background:var(--green);
    }

    100%{
        left:88%;
        opacity:0;
    }

}


/* =========================================================
   FRASE FINAL
   ========================================================= */

.gsxsxcta__closing{
    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    gap:14px;

    align-items:center;

    padding:
        18px;

    overflow:hidden;

    border:
        1px solid rgba(101,245,47,.08);

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(101,245,47,.016),
            rgba(41,217,239,.010)
        );
}

.gsxsxcta__closing::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:220px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan),
            transparent
        );
}

.gsxsxcta__closing-code{
    display:grid !important;
    place-items:center !important;

    width:48px;
    height:48px;

    margin:0;
    padding:0 !important;

    border:
        1px solid rgba(101,245,47,.17);

    border-radius:10px;

    color:var(--green2);

    font-size:8px;
    line-height:1 !important;
    font-weight:700;
}

.gsxsxcta__closing-copy{
    min-width:0;

    color:#78897b;

    font-size:10px;
    line-height:1.62;
}

.gsxsxcta__closing-copy strong{
    display:block;

    margin-bottom:3px;

    color:#bcd7b7;

    font-size:11px;
    line-height:1.45;
    font-weight:700;
}

.gsxsxcta__closing-state{
    flex-shrink:0;

    padding:
        7px 9px;

    border:
        1px solid rgba(101,245,47,.10);

    border-radius:8px;

    color:#8eb482;

    font-size:8px;
    line-height:1.35;
    font-weight:700;

    text-transform:uppercase;
}


/* =========================================================
   FOOTER CTA
   ========================================================= */

.gsxsxcta__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    margin-top:21px;

    padding:
        0 3px;

    color:#516153;

    font-size:9px;
    line-height:1.45;
    font-weight:600;

    text-transform:uppercase;
}

.gsxsxcta__footer-state{
    display:flex;
    align-items:center;

    gap:6px;

    color:#627464;
}

.gsxsxcta__footer-state::before{
    content:"";

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 7px rgba(101,245,47,.46);
}


/* =========================================================
   1100 PX
   ========================================================= */

@media (max-width:1100px){

    .gsxsxcta__trust{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .gsxsxcta__shell{
        width:
            min(
                calc(100% - 40px),
                920px
            );

        padding:
            76px 0 78px;
    }

    .gsxsxcta__hero{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxcta__side{
        max-width:none;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width:767px){

    .gsxsxcta__grid{
        opacity:.15;

        background-size:
            32px 32px;
    }

    .gsxsxcta__flare{
        display:none;
    }

    .gsxsxcta__shell{
        width:
            calc(100% - 30px);

        padding:
            61px 0 64px;
    }

    .gsxsxcta__main,
    .gsxsxcta__side{
        padding:
            22px 17px;

        border-radius:18px;
    }

    .gsxsxcta__title{
        font-size:
            clamp(
                30px,
                9vw,
                40px
            );
    }

    .gsxsxcta__lead{
        font-size:13px;
        line-height:1.7;
    }

    .gsxsxcta__actions{
        display:grid;

        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxcta__button{
        width:100%;
    }

    .gsxsxcta__trust{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxcta__service{
        grid-template-columns:
            minmax(0,1fr);
    }

    .gsxsxcta__hud{
        padding:
            20px 15px;
    }

    .gsxsxcta__hud-head{
        flex-direction:column;
        align-items:flex-start;

        gap:8px;
    }

    .gsxsxcta__hud-flow{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:17px 8px;
    }

    .gsxsxcta__hud-flow::before,
    .gsxsxcta__hud-token{
        display:none;
    }

    .gsxsxcta__closing{
        grid-template-columns:
            minmax(0,1fr);

        gap:9px;
    }

    .gsxsxcta__closing-state{
        width:fit-content;
    }

    .gsxsxcta__footer{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;
    }

}


/* =========================================================
   480 PX
   ========================================================= */

@media (max-width:480px){

    .gsxsxcta__side-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .gsxsxcta__hud-flow{
        grid-template-columns:
            minmax(0,1fr);
    }

}


/* =========================================================
   390 PX
   ========================================================= */

@media (max-width:390px){

    .gsxsxcta__shell{
        width:
            calc(100% - 24px);
    }

    .gsxsxcta__main,
    .gsxsxcta__side{
        padding:
            20px 14px;
    }

    .gsxsxcta__contact{
        grid-template-columns:
            38px minmax(0,1fr);
    }

    .gsxsxcta__contact-code{
        width:38px;
        height:38px;
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion:reduce){

    .gsxsxcta *,
    .gsxsxcta *::before,
    .gsxsxcta *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .gsxsxcta__flare,
    .gsxsxcta__hud-token{
        display:none !important;
    }

}


/* =========================================================
   GSFC 0.69.1 · WHATSAPP GLOBAL ICON
   The icon markup is injected globally. No local SVG/pseudoicon.
   ========================================================= */
.gsxsxhero__button--wa.button--whatsapp .gs-global-wa-icon,
.gsxsxcta__button--whatsapp.button--whatsapp .gs-global-wa-icon{
    width:18px;
    height:18px;
    flex:0 0 18px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}


/* =========================================================
   GSFC DYNAMIC PLACEHOLDERS
   ========================================================= */
.gsxsx__loading,
.gsxsx__noscript{
    margin:0;
    padding:14px 16px;
    border:1px solid rgba(101,245,47,.08);
    border-radius:10px;
    background:rgba(3,12,6,.38);
    color:#758779;
    font-size:10px;
    line-height:1.55;
}