/* =========================================================
   RED Corp - Página de inicio unificada
   Archivo único para index.php
   ========================================================= */

:root {
    --basePrincipalColor: rgb(255, 88, 88);
    --basePrincipalColorHover1: rgb(255, 200, 200);
    --basePrincipalColorHover2: rgb(200, 88, 88);
    --baseSecondColor: #222222;
    --htmlFontSize: 100%;
    --bodyFontFamily: "Open Sans";
}

* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: var(--htmlFontSize);
    scroll-behavior: smooth;
}

body,
html {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    font-family: "Open Sans", Arial, sans-serif;
}

body {
    background: #07080b;
    color: #999;
    font-size: 14px;
    line-height: 1.5;
}

::selection {
    background: var(--basePrincipalColor);
    color: #fff;
}

a {
    color: var(--basePrincipalColor);
    text-decoration: none;
    transition: color .25s ease, background .25s ease, border .25s ease, transform .25s ease, opacity .25s ease;
}

a:hover,
a:focus {
    color: #fff;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input {
    font: inherit;
}

button,
input[type="submit"] {
    cursor: pointer;
}

input {
    border: 0;
    background-image: none;
}

.wrapper {
    background: transparent;
}

section {
    box-sizing: border-box;
    padding: 40px;
}

.no-fixed {
    position: relative;
    z-index: 2;
    background: #fff;
}

.first-section {
    margin-top: 100vh;
    padding: 100px 40px;
    box-shadow: 0 0 36px 4px rgba(0,0,0,.10);
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.row {
    width: 100%;
    text-align: center;
}

.row img {
    width: auto;
    margin: 0 auto;
    padding: 10px;
}

.row-flex {
    display: flex;
    flex-wrap: nowrap;
}

.row-flex-end { align-items: flex-end; }
.row-flex-center { align-items: center; justify-content: space-evenly; }
.row-flex-top { align-items: flex-start; }
.flex-gap { gap: 20px; }
.text-align-left { text-align: left; }

.col-xs-12,
.col-sm-12,
.col-md-12,
.col-sm-6,
.col-md-6,
.col-md-5,
.col-md-3,
.col-sm-4,
.col-md-4 {
    min-width: 0;
}

.col-md-3 { flex: 1 1 25%; }
.col-md-4 { flex: 1 1 33.333%; }
.col-md-5 { flex: 0 1 41.666%; }
.col-md-6 { flex: 1 1 50%; }
.col-md-12 { flex: 1 1 100%; }

h1,h2,h3,h4,h5,h6 {
    margin: 0 0 28px;
    color: #333;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-weight: 700;
    line-height: 1;
}

h1 { font-size: 52px; }
h2 { font-size: 42px; }
h3 { font-size: 38px; }
h4 { font-size: 32px; }
h5 { font-size: 24px; }
h6 { font-size: 18px; }

p {
    margin: 1.5rem 0;
    color: #999;
    font-size: 14px;
    line-height: 24px;
}

.heading .heading--title {
    color: #222;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 50px;
    margin-bottom: 27px;
    text-transform: none;
}

.heading .heading--subtitle,
.heading .heading--desc {
    color: #777;
    font-size: 16px;
    line-height: 26px;
    margin: 0 auto;
}

.first-section .heading--subtitle {
    width: min(760px, 90%);
}

.feature-panel {
    position: relative;
    padding: 26px 22px;
    border: 1px solid #eee;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(0,0,0,.05);
}

.feature--content h3,
.feature-panel .feature--content h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 13px;
}

.feature--content p,
.feature-panel .feature--content p {
    color: #888;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
}

.icon-img {
    max-height: 90px;
    object-fit: contain;
}

.bg-theme {
    background: linear-gradient(135deg, rgba(15,16,22,.96), rgba(35,15,17,.86)) !important;
}

.bg-gray { background: #f9f9f9 !important; }
.bg-white { background: #fff !important; }
.bg-dark { background: #333 !important; }

.btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 50px;
    border-radius: 0;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.btn--rounded { border-radius: 50px; }
.btn--bordered { background: transparent; }
.btn--white {
    color: var(--basePrincipalColor);
    border: 1px solid var(--basePrincipalColor);
}
.btn--white:hover,
.btn--white:focus {
    color: #fff;
    background: var(--basePrincipalColor);
}

.skills {
    padding: 100px 40px;
}

.skills .progressbar {
    width: 100%;
    max-width: 520px;
    margin-bottom: 35px;
}

.skills .progress {
    height: 5px;
    background: #f2f2f2;
    border-radius: 5px;
    box-shadow: none;
}

.skills .progress-bar {
    width: 0%;
    height: 100%;
    border-radius: 5px;
    background: #C83232;
    transition: width 1.5s ease-in-out;
}

.skills .progress-title {
    display: block;
    width: 100%;
    margin-bottom: 17px;
    line-height: 1;
}

.skills .progress-title .title,
.skills .progress-title .value {
    color: #333;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.skills .progress-title .value { float: right; }
.mb-30 { margin-right: 80px; }

.cta { padding: 75px 40px; }
.cta h3 {
    color: #222;
    font-size: 30px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
}
.pull-left { float: left; }
.text-left { text-align: left; }

.footer {
    padding: 0;
    background: #fff;
}
.footer .footer-widget { padding: 70px 0; }
.footer .footer-bar {
    padding: 30px 0;
    border-top: 1px solid #e5e5e5;
}
.widget--info-box h4 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 12px 0 16px;
}
.widget--info-box p,
.widget--copyright {
    color: #999;
    font-size: 14px;
    margin: 0;
}
.widget--social a {
    color: #999;
    margin-right: 20px;
}
.text-right { text-align: right; }

.form {
    display: grid;
    gap: .875rem;
}
.form input[type="text"],
.form input[type="password"],
.form input[type="submit"] {
    width: 100%;
}
.hidden,
.icons {
    display: none !important;
}

@media only screen and (max-width: 991px) {
    section { padding: 20px; }
    .row { padding: 20px; }
    .row-flex { flex-wrap: wrap; }
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6 { flex: 1 1 100%; }
    .mb-30 { margin-right: 0; margin-bottom: 50px; }
    .skills { padding: 40px 20px; }
    .cta h3 { text-align: center; line-height: 40px; }
    .pull-left { float: none; }
    .text-left, .text-right { text-align: center; }
    .red-software-video-shell {
        grid-template-columns: 1fr;
    }
}

/* ===== Home premium RED Corp ===== */
:root {
    --red-primary: rgb(255, 88, 88);
    --red-primary-strong: #ff3030;
    --red-primary-soft: rgba(255, 88, 88, 0.18);
    --red-ink: #f8f4ef;
    --red-muted: rgba(248, 244, 239, 0.68);
    --red-muted-2: rgba(248, 244, 239, 0.46);
    --red-dark: #07080b;
    --red-dark-2: #101116;
    --red-glass: rgba(12, 13, 18, 0.58);
    --red-glass-strong: rgba(12, 13, 18, 0.82);
    --red-border: rgba(255, 255, 255, 0.13);
    --red-border-strong: rgba(255, 88, 88, 0.42);
    --red-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
    --red-radius-xl: 34px;
    --red-radius-lg: 24px;
    --red-radius-md: 16px;
}

html {
    scroll-behavior: smooth;
}

body.red-home {
    background: var(--red-dark);
    color: var(--red-ink);
}

.red-wrapper.wrapper {
    background: transparent;
}

/* Topbar + login */
#header-fixed.red-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    width: 100%;
    height: 96px;
    padding: 24px 34px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.72), rgba(5, 6, 10, 0));
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: none;
}

#header-fixed.red-topbar.red-topbar--scrolled {
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.92), rgba(5, 6, 10, 0.34));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.red-brand,
.red-product-nav,
.red-login-card {
    pointer-events: auto;
}

.red-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--red-ink);
    text-decoration: none;
    letter-spacing: -0.02em;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-weight: 700;
}

.red-brand:hover,
.red-brand:focus {
    color: #fff;
    text-decoration: none;
}

.red-brand__mark {
    width: 35px;
    height: 35px;
    object-fit: contain;
    padding: 0 !important;
    filter: drop-shadow(0 0 18px rgba(255, 88, 88, 0.42));
}

.red-brand__name {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.red-product-nav {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--red-border);
    border-radius: 999px;
    background: rgba(8, 9, 13, 0.42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.red-product-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.red-product-nav a:hover,
.red-product-nav a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
    text-decoration: none;
}

.red-login-card {
    width: 318px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(8, 9, 13, 0.76);
    box-shadow: 0 24px 74px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.red-login-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 88, 88, 0.5), transparent 35%, rgba(255,255,255, 0.28));
    opacity: 0.5;
}

.red-login-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.red-login-card__head strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    letter-spacing: -0.02em;
}

.red-login-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--red-muted-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.red-login-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red-primary);
    box-shadow: 0 0 0 7px rgba(255, 88, 88, 0.12), 0 0 24px rgba(255, 88, 88, 0.84);
    animation: redPulse 2s infinite ease-in-out;
}

.red-login-form.form {
    display: grid;
    gap: 9px;
}

.red-login-form.login label,
.red-login-form.login input[type="text"],
.red-login-form.login input[type="password"],
.red-login-form.login input[type="submit"] {
    border-radius: 14px;
    padding: 0;
}

.red-input-wrap {
    display: grid !important;
    gap: 5px;
    padding: 0 !important;
    background: transparent !important;
}

.red-input-wrap span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.red-login-form.login input[type="text"],
.red-login-form.login input[type="password"] {
    width: 100%;
    height: 43px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.red-login-form.login input[type="text"]:focus,
.red-login-form.login input[type="password"]:focus,
.red-login-form.login input[type="text"]:hover,
.red-login-form.login input[type="password"]:hover {
    border-color: rgba(255, 88, 88, 0.56);
    background: rgba(255, 255, 255, 0.1);
}

.red-login-form.login input[type="submit"] {
    width: 100%;
    height: 44px;
    margin-top: 3px;
    color: #fff;
    background: linear-gradient(135deg, var(--red-primary), #b81723);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 30px rgba(255, 58, 58, 0.22);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.red-login-form.login input[type="submit"]:hover,
.red-login-form.login input[type="submit"]:focus {
    background: linear-gradient(135deg, #ff7272, #d02532);
    box-shadow: 0 18px 38px rgba(255, 58, 58, 0.32);
}

.red-login-error,
#token-status-message {
    margin: 2px 0 0 !important;
    padding: 9px 10px !important;
    border-radius: 12px;
    color: #fff !important;
    background: rgba(255, 88, 88, 0.13);
    border: 1px solid rgba(255, 88, 88, 0.24);
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center;
}

.red-login-policy {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

.red-login-policy:hover {
    color: #fff;
    text-decoration: none;
}

/* Hero */
.red-hero {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
    isolation: isolate;
    background: var(--red-dark);
}

.red-hero__bg,
.red-hero__bg img,
.red-hero__overlay,
.red-hero__grid {
    position: absolute;
    inset: 0;
}

.red-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: saturate(0.86) contrast(1.12) brightness(0.7);
    transform: scale(1.07);
    animation: redHeroImage 24s ease-in-out infinite alternate;
}

.red-hero__overlay {
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 88, 88, 0.28), transparent 28%),
        radial-gradient(circle at 24% 72%, rgba(255,255,255, 0.12), transparent 32%),
        linear-gradient(90deg, rgba(6, 7, 10, 0.96) 0%, rgba(6, 7, 10, 0.78) 43%, rgba(6, 7, 10, 0.42) 70%, rgba(6, 7, 10, 0.78) 100%),
        linear-gradient(180deg, rgba(6, 7, 10, 0.38), rgba(6, 7, 10, 0.92));
}

.red-hero__grid {
    opacity: 0.25;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
    animation: redGridMove 22s linear infinite;
}

.red-hero__glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.22;
    pointer-events: none;
}

.red-hero__glow--one {
    top: 6%;
    left: 34%;
    background: var(--red-primary);
    animation: redFloat 8s ease-in-out infinite alternate;
}

.red-hero__glow--two {
    right: 4%;
    bottom: -12%;
    background: var(--red-silver);
    animation: redFloat 9s ease-in-out infinite alternate-reverse;
}

.red-hero__content {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, 0.97fr);
    align-items: center;
    gap: clamp(28px, 5vw, 90px);
    width: min(1460px, calc(100% - 72px));
    margin: 0 auto;
    padding: 122px 0 138px;
}

.red-hero__copy {
    max-width: 760px;
    text-align: left;
}

.red-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
    color: var(--red-muted);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.red-hero__kicker::before {
    content: '';
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--red-primary), var(--red-silver));
    box-shadow: 0 0 18px rgba(255, 88, 88, 0.55);
}

.red-hero h1 {
    margin: 0;
    color: #fff;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: clamp(58px, 9vw, 142px);
    line-height: 0.88;
    letter-spacing: -0.085em;
    font-weight: 900;
    text-transform: none;
    text-shadow: 0 34px 90px rgba(0, 0, 0, 0.58);
}

.red-hero h1::after {
    content: '';
    display: block;
    width: min(420px, 72vw);
    height: 2px;
    margin-top: 25px;
    background: linear-gradient(90deg, var(--red-primary), rgba(255, 255, 255, 0.72), transparent);
    transform-origin: left;
    animation: redLineReveal 1.6s ease both;
}

.red-hero__lead {
    max-width: 650px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(17px, 1.65vw, 24px);
    line-height: 1.55;
    font-weight: 400;
}

.red-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.red-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.red-btn:hover,
.red-btn:focus {
    text-decoration: none;
}

.red-btn--primary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, var(--red-primary), #bb151f 72%);
    box-shadow: 0 22px 48px rgba(255, 58, 58, 0.26);
}

.red-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transition: transform 0.8s ease;
}

.red-btn--primary:hover::before {
    transform: translateX(100%);
}

.red-btn--ghost {
    color: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.red-btn--ghost:hover {
    color: #fff;
    border-color: rgba(255, 88, 88, 0.42);
    background: rgba(255, 88, 88, 0.1);
}

.red-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    max-width: 650px;
    margin-top: 37px;
}

.red-hero__proof article {
    padding: 18px 18px 17px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.red-hero__proof strong {
    display: block;
    color: #fff;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.red-hero__proof span {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Dashboard visual */
.red-hero__visual {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    perspective: 1200px;
}

.red-laptop-stage {
    position: relative;
    z-index: 4;
    width: min(1120px, 118%);
    height: min(820px, 50vw);
    min-height: 500px;
    display: block;
    pointer-events: auto;
    isolation: isolate;
    margin-right: -90px;
    margin-top: 22px;
    filter:
        drop-shadow(0 48px 95px rgba(0, 0, 0, .62))
        drop-shadow(0 0 58px rgba(255, 88, 88, .22));
}

.red-laptop-stage::before {
    content: '';
    position: absolute;
    inset: 12% 2% 10% 0;
    z-index: -2;
    border-radius: 50%;
    background:
        radial-gradient(circle at 46% 42%, rgba(255, 88, 88, .30), transparent 42%),
        radial-gradient(circle at 62% 68%, rgba(255, 255, 255, .13), transparent 48%);
    filter: blur(22px);
    opacity: .95;
    animation: redLaptopAura 5.8s ease-in-out infinite alternate;
}

.red-laptop-stage::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 4%;
    bottom: 4%;
    height: 90px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 88, 88, .20), transparent 68%);
    filter: blur(20px);
    opacity: .9;
}

.red-laptop-canvas {
    position: relative;
    z-index: 2;
}

.red-laptop-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.red-laptop-canvas:active {
    cursor: grabbing;
}

body[data-active-product="app"] .red-laptop-stage,
body[data-active-product="tag"] .red-laptop-stage,
body[data-active-product="persona"] .red-laptop-stage {
    display: none !important;
}

.red-product-card {
    position: relative;
    min-height: 92px;
    padding: 17px 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.red-product-card:hover,
.red-product-card:focus {
    color: #fff;
    border-color: rgba(255, 88, 88, 0.42);
    transform: translateY(-2px);
    text-decoration: none;
}

.red-product-card.is-active {
    background: linear-gradient(135deg, rgba(255, 88, 88, 0.2), rgba(255, 255, 255, 0.06));
    border-color: rgba(255, 88, 88, 0.46);
}

.red-product-card span {
    color: var(--red-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.red-product-card strong {
    display: block;
    margin-top: 7px;
    color: #fff;
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.red-product-card small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1.3;
}

.red-scroll-cue {
    position: absolute;
    z-index: 5;
    left: 34px;
    bottom: 38px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.red-scroll-cue.is-hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.red-scroll-cue span {
    width: 26px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    position: relative;
}

.red-scroll-cue span::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 999px;
    background: #fff;
    animation: redScroll 1.7s ease-in-out infinite;
}

.red-scroll-cue em {
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Existing sections must sit over fixed hero */
.first-section {
    position: relative;
    z-index: 6;
    margin-top: 100vh;
}

.no-fixed,
footer {
    position: relative;
    z-index: 6;
}
.red-product-view > .no-fixed {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
}

.red-product-view > .first-section {
    contain-intrinsic-size: 1000px;
}

@keyframes redHeroImage {
    0% { transform: scale(1.07) translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}

@keyframes redGridMove {
    0% { background-position: 0 0; }
    100% { background-position: 72px 72px; }
}

@keyframes redFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(20px, -22px, 0) scale(1.07); }
}


@keyframes redPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.72); opacity: 0.62; }
}

@keyframes redLineReveal {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}


@keyframes redScroll {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(18px); opacity: 0; }
}

@keyframes redLaptopAura {
    from {
        opacity: .72;
        transform: scale(.96) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1.04) translateY(-8px);
    }
}

@media (max-width: 1180px) {
    #header-fixed.red-topbar {
        height: auto;
        align-items: flex-start;
    }

    .red-product-nav {
        display: none;
    }

    .red-login-card {
        width: 300px;
    }

    .red-hero__content {
        grid-template-columns: 1fr;
        width: min(900px, calc(100% - 48px));
        padding-top: 170px;
        padding-bottom: 230px;
    }

    .red-hero__copy {
        max-width: 850px;
    }

    .red-hero__visual {
        min-height: 420px;
    }

    .red-laptop-stage {
        width: min(860px, 92vw);
        height: 520px;
        margin-right: 0;
    }
}

@media (max-width: 760px) {
    #header-fixed.red-topbar {
        padding: 18px;
        flex-wrap: wrap;
        gap: 14px;
        background: linear-gradient(180deg, rgba(5, 6, 10, 0.94), rgba(5, 6, 10, 0.18));
    }

    .red-brand__name {
        font-size: 12px;
    }

    .red-login-card {
        width: 100%;
        max-width: none;
        padding: 13px;
        border-radius: 20px;
    }

    .red-login-card__head {
        margin-bottom: 9px;
    }

    .red-login-form.form {
        grid-template-columns: 1fr 1fr auto;
        align-items: end;
        gap: 8px;
    }

    .red-login-form.login input[type="submit"] {
        min-width: 92px;
        padding: 0 14px;
        font-size: 10px;
    }

    .red-login-policy {
        display: none;
    }

    .red-hero__content {
        width: min(100% - 32px, 680px);
        padding-top: 235px;
        padding-bottom: 250px;
    }

    .red-hero__lead {
        font-size: 16px;
    }

    .red-hero__proof {
        grid-template-columns: 1fr;
    }

    .red-hero__visual {
        display: none;
    }

    .red-product-strip {
        width: calc(100% - 32px);
        grid-template-columns: 1fr;
        bottom: 18px;
    }

    .red-product-card {
        min-height: auto;
        padding: 13px 15px;
    }

    .red-product-card small {
        display: none;
    }

    .red-scroll-cue {
        display: none;
    }
}

@media (max-width: 520px) {
    .red-login-form.form {
        grid-template-columns: 1fr;
    }

    .red-hero__content {
        padding-top: 350px;
    }

    .red-hero h1 {
        font-size: clamp(52px, 17vw, 82px);
    }

    .red-hero__actions {
        display: grid;
    }

    .red-btn {
        width: 100%;
    }
}





/* =========================================================
   Header + login con pestañas - capa superior corregida
   ========================================================= */

#header-fixed.red-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483000 !important;
    width: 100% !important;
    min-height: 86px !important;
    height: auto !important;
    padding: 22px 34px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(4,5,9,.86), rgba(4,5,9,.28) 58%, rgba(4,5,9,0)) !important;
    box-shadow: none !important;
}

#header-fixed.red-topbar.red-topbar--scrolled {
    background: linear-gradient(180deg, rgba(4,5,9,.96), rgba(4,5,9,.72)) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(20px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.15) !important;
}

.red-brand {
    position: relative !important;
    z-index: 2147483002 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

.red-brand__mark {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    padding: 0 !important;
    filter: drop-shadow(0 0 18px rgba(255,88,88,.42)) !important;
}

.red-brand__name {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
}

.red-header-products {
    position: absolute !important;
    top: 31px !important;
    left: 50% !important;
    z-index: 2147483001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
}

.red-header-products a {
    position: relative !important;
    color: rgba(255,255,255,.56) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.red-header-products a::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -10px !important;
    height: 1px !important;
    transform: scaleX(0) !important;
    background: linear-gradient(90deg, transparent, rgba(255,88,88,.95), rgba(255,255,255,.75), transparent) !important;
    transition: transform .25s ease !important;
}

.red-header-products a:hover,
.red-header-products a.is-active { color: #fff !important; }
.red-header-products a:hover::after,
.red-header-products a.is-active::after { transform: scaleX(1) !important; }

.red-login-zone {
    position: fixed !important;
    top: 22px !important;
    right: 34px !important;
    z-index: 2147483003 !important;
    width: 364px !important;
    min-height: 58px !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

.red-login-launcher {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2147483004 !important;
    height: 46px !important;
    padding: 0 23px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255,88,88,.94), rgba(171,17,27,.94)) !important;
    box-shadow: 0 18px 42px rgba(255,58,58,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.96) !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease !important;
}

.red-login-launcher.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.red-login-card {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2147483005 !important;
    width: 364px !important;
    max-width: calc(100vw - 40px) !important;
    padding: 16px !important;
    display: block !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 24px !important;
    color: #fff !important;
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)), rgba(8,9,13,.86) !important;
    box-shadow: 0 24px 74px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(24px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important;
}

.red-login-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,88,88,.5), transparent 35%, rgba(255,255,255,.28));
    opacity: .5;
}

.red-login-card.is-open,
.red-login-card:not(.is-hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

.red-login-card.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(.965) !important;
}

.red-login-card__head {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.red-login-card__head strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-family: "Poppins", "Open Sans", sans-serif;
    letter-spacing: -.02em;
}

.red-login-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: rgba(248,244,239,.46);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.red-login-close {
    width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,.76) !important;
    background: rgba(255,255,255,.07) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.red-login-close:hover,
.red-login-close:focus {
    color: #fff !important;
    background: rgba(255,88,88,.18) !important;
    transform: rotate(90deg) !important;
}

.red-login-tabs {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.2) !important;
}

.red-login-tab {
    min-height: 38px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: rgba(255,255,255,.52) !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.red-login-tab:hover,
.red-login-tab.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255,88,88,.36), rgba(255,255,255,.08)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(255,88,88,.08) !important;
}

.red-login-product {
    position: relative !important;
    z-index: 2 !important;
    padding: 12px 13px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 17px !important;
    background: radial-gradient(circle at 12% 20%, rgba(255,88,88,.18), transparent 38%), rgba(255,255,255,.045) !important;
}

.red-login-product strong {
    display: block;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 15px;
    letter-spacing: -.02em;
}

.red-login-product small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.5);
    font-size: 11px;
    line-height: 1.35;
}

.red-login-form.form {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 9px !important;
}

.red-input-wrap {
    display: grid !important;
    gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
}

.red-input-wrap span {
    color: rgba(255,255,255,.54) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.red-login-form input[type="text"],
.red-login-form input[type="password"] {
    width: 100% !important;
    height: 43px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.red-login-form input[type="text"]:focus,
.red-login-form input[type="password"]:focus,
.red-login-form input[type="text"]:hover,
.red-login-form input[type="password"]:hover {
    border-color: rgba(255,88,88,.56) !important;
    background: rgba(255,255,255,.1) !important;
}

.red-login-form input[type="submit"] {
    width: 100% !important;
    height: 44px !important;
    margin-top: 3px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgb(255,88,88), #b81723) !important;
    box-shadow: 0 14px 30px rgba(255,58,58,.22) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.red-login-form input[type="submit"]:hover,
.red-login-form input[type="submit"]:focus {
    background: linear-gradient(135deg, #ff7272, #d02532) !important;
    box-shadow: 0 18px 38px rgba(255,58,58,.32) !important;
}

.red-login-error,
#token-status-message {
    margin: 2px 0 0 !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,88,88,.24) !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: rgba(255,88,88,.13) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.red-login-policy {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    margin-top: 10px !important;
    color: rgba(255,255,255,.43) !important;
    font-size: 11px !important;
    text-align: center !important;
    text-decoration: none !important;
}

.red-login-policy:hover { color: #fff !important; }

.red-hero { z-index: 1 !important; }
.red-hero__content,
.red-product-strip,
.red-scroll-cue { z-index: 2 !important; }

@media only screen and (max-width: 1180px) {
    .red-header-products { display: none !important; }
}

@media only screen and (max-width: 760px) {
    #header-fixed.red-topbar {
        padding: 16px 18px !important;
        min-height: 72px !important;
    }
    .red-brand__name { display: none !important; }
    .red-login-zone {
        top: 16px !important;
        right: 18px !important;
        width: calc(100vw - 36px) !important;
    }
    .red-login-card {
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;
    }
    .red-login-tabs { grid-template-columns: 1fr !important; }
    .red-hero__content { padding-top: 220px !important; }
}

@media only screen and (max-width: 520px) {
    .red-login-card { top: 52px !important; }
}


/* =========================================================
   RED Software - Secciones comerciales premium
   ========================================================= */
.red-software-main {
    position: relative;
    z-index: 6;
    background: #08090d;
}

.red-software-section {
    position: relative;
    z-index: 6;
    overflow: hidden;
    padding: clamp(86px, 9vw, 140px) 34px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 88, 88, .13), transparent 30%),
        radial-gradient(circle at 84% 22%, rgba(255,255,255, .10), transparent 28%),
        linear-gradient(180deg, #08090d 0%, #0d0e14 100%);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.red-suite-intro.first-section {
    margin-top: 100vh;
    padding-top: clamp(110px, 11vw, 160px);
    box-shadow: 0 -45px 90px rgba(0,0,0,.42);
}

.red-software-section:nth-of-type(even) {
    background:
        radial-gradient(circle at 76% 14%, rgba(255, 88, 88, .10), transparent 28%),
        radial-gradient(circle at 14% 84%, rgba(255,255,255, .08), transparent 28%),
        linear-gradient(180deg, #0d0e14 0%, #090a0f 100%);
}

.red-section-shell {
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
}

.red-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: rgba(248,244,239,.58);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.red-section-kicker::before {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, rgb(255,88,88), rgba(255,255,255,.72));
    box-shadow: 0 0 20px rgba(255,88,88,.55);
}

.red-section-head {
    max-width: 860px;
    margin-bottom: 48px;
}

.red-section-head h2,
.red-suite-copy h2,
.red-flow-copy h2,
.red-dashboard-copy h2,
.red-security-copy h2,
.red-cta-box h2 {
    margin: 0;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(38px, 5.4vw, 78px);
    line-height: .96;
    letter-spacing: -.065em;
    font-weight: 900;
}

.red-section-head p,
.red-suite-copy p,
.red-flow-copy p,
.red-dashboard-copy p,
.red-security-copy p,
.red-cta-box p {
    max-width: 780px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.66);
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.65;
}

.red-suite-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: center;
}

.red-suite-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 40px;
}

.red-suite-points article {
    min-height: 176px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.red-suite-points b {
    display: inline-flex;
    margin-bottom: 34px;
    color: rgb(255,88,88);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
}

.red-suite-points strong,
.red-dashboard-bullets strong,
.red-security-stack strong {
    display: block;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.red-suite-points span,
.red-dashboard-bullets span,
.red-security-stack span {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 1.55;
}

.red-command-card {
    position: relative;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 34px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)),
        rgba(10,11,16,.78);
    box-shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.red-command-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 10%, rgba(255,88,88,.26), transparent 32%), radial-gradient(circle at 90% 82%, rgba(255,255,255,.16), transparent 30%);
    pointer-events: none;
}

.red-command-card__top {
    position: relative;
    z-index: 2;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.red-command-card__top span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}

.red-command-card__top span:first-child {
    background: rgb(255,88,88);
    box-shadow: 0 0 15px rgba(255,88,88,.75);
}

.red-command-card__top em {
    margin-left: auto;
    color: rgba(255,255,255,.5);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.red-command-card__screen {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    min-height: 420px;
    padding: 24px;
}

.red-command-map {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: rgba(255,255,255,.045);
}

.red-command-map div {
    min-height: 94px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    color: rgba(255,255,255,.55);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
}

.red-command-map .is-active {
    color: #fff;
    border-color: rgba(255,88,88,.42);
    background: linear-gradient(135deg, rgba(255,88,88,.25), rgba(255,255,255,.055));
    box-shadow: 0 18px 38px rgba(255,88,88,.12);
}

.red-command-live {
    display: grid;
    gap: 14px;
    align-content: center;
}

.red-command-live article {
    position: relative;
    padding: 19px 19px 19px 42px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.055);
    overflow: hidden;
}

.red-command-live article::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 24px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(255,88,88);
    box-shadow: 0 0 18px rgba(255,88,88,.8);
}

.red-command-live small {
    display: block;
    color: rgba(255,255,255,.44);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.red-command-live strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 17px;
    line-height: 1.2;
}

.red-modules-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.red-module-card {
    min-height: 252px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 28px;
    background: rgba(255,255,255,.052);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 58px rgba(0,0,0,.16);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.red-module-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,88,88,.42);
    background: rgba(255,255,255,.075);
}

.red-module-card--featured {
    grid-column: span 2;
    background: radial-gradient(circle at 18% 14%, rgba(255,88,88,.26), transparent 34%), rgba(255,255,255,.058);
}

.red-module-card span {
    display: inline-flex;
    color: rgb(255,88,88);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.red-module-card h3 {
    margin: 18px 0 0;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.red-module-card p {
    margin: 16px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 14px;
    line-height: 1.62;
}

.red-module-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.red-module-card li {
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.05);
    font-size: 12px;
    font-weight: 800;
}

.red-flow-grid {
    display: grid;
    grid-template-columns: minmax(260px, .42fr) minmax(0, .58fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: center;
}

.red-flow-line {
    position: relative;
    display: grid;
    gap: 14px;
}

.red-flow-line::before {
    content: '';
    position: absolute;
    left: 29px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: linear-gradient(180deg, rgb(255,88,88), rgba(255,255,255,.86), transparent);
}

.red-flow-line article {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 26px;
    background: rgba(255,255,255,.052);
}

.red-flow-line b {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, rgb(255,88,88), #8f111a);
    box-shadow: 0 16px 32px rgba(255,88,88,.18);
    font-size: 16px;
    font-weight: 900;
}

.red-flow-line strong {
    display: block;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 22px;
    letter-spacing: -.035em;
}

.red-flow-line span {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 1.5;
}

.red-roles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.red-role-card {
    position: relative;
    min-height: 420px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 32px;
    overflow: hidden;
    background: rgba(255,255,255,.052);
    box-shadow: 0 24px 80px rgba(0,0,0,.18);
}

.red-role-card::after {
    content: '';
    position: absolute;
    inset: auto -30% -45% -30%;
    height: 210px;
    background: radial-gradient(circle, rgba(255,88,88,.2), transparent 68%);
    opacity: .75;
}

.red-role-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 30px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, rgba(255,88,88,.42), rgba(255,255,255,.07));
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 28px;
    font-weight: 900;
}

.red-role-card span {
    color: rgb(255,88,88);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.red-role-card h3 {
    margin: 16px 0 0;
    color: #fff;
    font-size: clamp(24px, 2.3vw, 36px);
    line-height: 1;
    letter-spacing: -.055em;
}

.red-role-card p {
    margin: 18px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 15px;
    line-height: 1.65;
}

.red-role-tags {
    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.red-role-tags b {
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.68);
    background: rgba(255,255,255,.055);
    font-size: 12px;
}

.red-dashboard-grid,
.red-security-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(0, .9fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
}

.red-dashboard-visual {
    min-width: 0;
}

.red-dashboard-window {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.025)), rgba(10,11,16,.78);
    box-shadow: 0 34px 100px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}

.red-dashboard-window__bar {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.red-dashboard-window__bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}

.red-dashboard-window__bar i:first-child {
    background: rgb(255,88,88);
}

.red-dashboard-window__bar span {
    margin-left: auto;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.red-dashboard-window__body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 24px;
}

.red-dashboard-stat,
.red-dashboard-chart,
.red-dashboard-feed {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: rgba(255,255,255,.052);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.red-dashboard-stat {
    min-height: 150px;
    padding: 20px;
}

.red-dashboard-stat small {
    display: block;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.red-dashboard-stat strong {
    display: block;
    margin-top: 18px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.06em;
}

.red-dashboard-stat span {
    display: block;
    height: 8px;
    margin-top: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(255,88,88), rgba(255,255,255,.9));
}

.red-dashboard-stat.is-hot {
    background: radial-gradient(circle at 16% 12%, rgba(255,88,88,.26), transparent 40%), rgba(255,255,255,.06);
}

.red-dashboard-chart {
    grid-column: span 2;
    min-height: 260px;
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 24px;
}

.red-dashboard-chart div {
    flex: 1;
    min-height: 46px;
    border-radius: 14px 14px 6px 6px;
    background: linear-gradient(180deg, rgba(255,88,88,.9), rgba(255,88,88,.12));
    box-shadow: 0 -12px 28px rgba(255,88,88,.12);
    animation: redBars 2.8s ease-in-out infinite alternate;
}

.red-dashboard-chart div:nth-child(even) {
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.10));
    animation-delay: .25s;
}

.red-dashboard-feed {
    min-height: 260px;
    padding: 20px;
}

.red-dashboard-feed p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.45;
}

.red-dashboard-feed b {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: rgb(255,88,88);
    box-shadow: 0 0 16px rgba(255,88,88,.8);
}

.red-dashboard-bullets {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.red-dashboard-bullets article {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.052);
}

.red-security-grid {
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
}

.red-security-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.red-security-stack article {
    min-height: 190px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 28px;
    background: rgba(255,255,255,.052);
}

.red-security-stack b {
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgb(255,88,88), #8f111a);
    box-shadow: 0 16px 30px rgba(255,88,88,.18);
    position: relative;
}

.red-security-stack b::after {
    content: '';
    position: absolute;
    inset: 12px 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.red-software-video-section {
    background:
        radial-gradient(circle at 20% 16%, rgba(255, 88, 88, .12), transparent 30%),
        radial-gradient(circle at 82% 74%, rgba(255,255,255,.07), transparent 32%),
        linear-gradient(180deg, #090a0f 0%, #0f1017 100%) !important;
}

.red-software-video-shell {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
    gap: clamp(30px, 5vw, 76px);
    align-items: center;
}

.red-software-video-copy h2 {
    margin: 0;
    max-width: 760px;
    color: #ffffff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(38px, 5.8vw, 82px);
    line-height: .94;
    letter-spacing: -.065em;
    font-weight: 900;
}

.red-software-video-copy p {
    max-width: 640px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.64);
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.62;
}

.red-software-video-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 88, 88, .18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
        rgba(8,9,13,.80);
    box-shadow: 0 34px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.12);
}

.red-software-video-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 34%, rgba(255,88,88,.08));
}

.red-software-video-frame video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #05060a;
}

.red-software-cta {
    padding-bottom: clamp(100px, 9vw, 150px);
}



.red-cta-box {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 6vw, 74px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 38px;
    background:
        radial-gradient(circle at 12% 16%, rgba(255,88,88,.28), transparent 30%),
        radial-gradient(circle at 84% 86%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    box-shadow: 0 32px 120px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}

.red-cta-box h2 {
    max-width: 900px;
}

.red-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.red-future-anchor {
    position: relative;
    top: -120px;
    display: block;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.red-footer {
    position: relative;
    z-index: 6;
    padding: 0;
    background: #05060a;
    border-top: 1px solid rgba(255,255,255,.08);
}

.red-footer__inner {
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
    padding: 54px 0;
    display: grid;
    grid-template-columns: 1.3fr repeat(3, .7fr);
    gap: 24px;
}

.red-footer__logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 18px rgba(255,88,88,.4));
}

.red-footer strong,
.red-footer span {
    display: block;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.red-footer p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.52);
    font-size: 14px;
    line-height: 1.6;
}

.red-footer__bar {
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.42);
    font-size: 13px;
}

@keyframes redBars {
    from { transform: scaleY(.82); opacity: .72; }
    to { transform: scaleY(1.04); opacity: 1; }
}

@media only screen and (max-width: 1180px) {
    .red-suite-grid,
    .red-flow-grid,
    .red-dashboard-grid,
    .red-security-grid {
        grid-template-columns: 1fr;
    }
    .red-command-card__screen {
        grid-template-columns: 1fr;
    }
    .red-command-map {
        grid-template-columns: repeat(3, 1fr);
    }
    .red-command-map div {
        min-height: 72px;
    }
    .red-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .red-roles-grid {
        grid-template-columns: 1fr;
    }
    .red-role-card {
        min-height: 340px;
    }
    .red-footer__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 760px) {
    .red-software-section {
        padding: 72px 18px;
    }
    .red-suite-intro.first-section {
        padding-top: 82px;
    }
    .red-section-shell {
        width: 100%;
    }
    .red-suite-points,
    .red-modules-grid,
    .red-security-stack,
    .red-footer__inner {
        grid-template-columns: 1fr;
    }
    .red-module-card--featured {
        grid-column: auto;
    }
    .red-command-card__screen {
        padding: 16px;
    }
    .red-command-map {
        grid-template-columns: 1fr;
    }
    .red-dashboard-window__body {
        grid-template-columns: 1fr;
    }
    .red-dashboard-chart {
        grid-column: auto;
        min-height: 190px;
    }
    .red-dashboard-feed {
        min-height: auto;
    }
    .red-role-card {
        min-height: 390px;
        padding: 24px;
    }
    .red-role-tags {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }
    .red-cta-actions {
        display: grid;
    }
    .red-cta-actions .red-btn {
        width: 100%;
    }
}

/* =========================================================
   RED Software v5 - Ajustes solicitados
   - Secciones más compactas
   - Lenguaje visual formal/premium
   - Sin amarillo/dorado
   - Más movimiento en hover
   - Cierre creativo: adaptación por edificio
   ========================================================= */

:root {
    --red-primary: rgb(255, 88, 88);
    --red-primary-strong: #ff3030;
    --red-primary-soft: rgba(255, 88, 88, 0.18);
    --red-ink: #f8f4ef;
    --red-muted: rgba(248, 244, 239, 0.68);
    --red-muted-2: rgba(248, 244, 239, 0.46);
    --red-dark: #07080b;
    --red-dark-2: #101116;
    --red-silver: rgba(255,255,255,.78);
    --red-silver-soft: rgba(255,255,255,.12);
    --red-silver-line: rgba(255,255,255,.34);
}

.red-software-main--v5 {
    background:
        radial-gradient(circle at 14% 0%, rgba(255,88,88,.11), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.06), transparent 32%),
        #08090d;
}

.red-software-main--v5 .red-software-section {
    padding: clamp(64px, 7vw, 104px) 34px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,88,88,.12), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.055), transparent 28%),
        linear-gradient(180deg, #08090d 0%, #0d0e14 100%);
}

.red-software-main--v5 .red-section-compact {
    min-height: auto;
}

.red-software-main--v5 .red-section-slim {
    min-height: auto;
    padding-top: clamp(54px, 6vw, 86px);
    padding-bottom: clamp(54px, 6vw, 86px);
}

.red-software-main--v5 .red-suite-intro.first-section {
    margin-top: 100vh;
    padding-top: clamp(72px, 8vw, 112px);
    box-shadow: 0 -44px 90px rgba(0,0,0,.46);
}

.red-software-main--v5 .red-software-section:nth-of-type(even) {
    background:
        radial-gradient(circle at 82% 8%, rgba(255,88,88,.10), transparent 28%),
        radial-gradient(circle at 12% 88%, rgba(255,255,255,.05), transparent 28%),
        linear-gradient(180deg, #0d0e14 0%, #090a0f 100%);
}

.red-software-main--v5 .red-section-kicker::before,
.red-hero__kicker::before {
    background: linear-gradient(90deg, var(--red-primary), rgba(255,255,255,.82), transparent) !important;
    box-shadow: 0 0 20px rgba(255,88,88,.55) !important;
}

.red-software-main--v5 h2 {
    text-wrap: balance;
}

.red-section-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
    gap: clamp(24px, 5vw, 70px);
    align-items: end;
    margin-bottom: 40px;
}

.red-section-head--split p {
    margin: 0;
    max-width: 560px;
    color: rgba(255,255,255,.62);
}

.red-suite-grid--balanced {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
}

.red-suite-points article,
.red-module-card,
.red-role-card,
.red-dashboard-bullets article,
.red-security-stack article,
.red-command-card,
.red-dashboard-window,
.red-building-model {
    position: relative;
    isolation: isolate;
    transform-style: preserve-3d;
}

.red-hover-tilt {
    transition:
        transform .32s cubic-bezier(.2,.75,.22,1),
        border-color .32s ease,
        background .32s ease,
        box-shadow .32s ease;
}

.red-hover-tilt::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,88,88,.20), transparent 38%);
    transition: opacity .3s ease;
}

.red-hover-tilt:hover {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px);
    border-color: rgba(255,88,88,.48) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.26), 0 0 0 1px rgba(255,88,88,.08), inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.red-hover-tilt:hover::before {
    opacity: 1;
}

@media (pointer: coarse) {
    .red-hover-tilt:hover {
        transform: none !important;
    }

    .red-hover-tilt:hover::before {
        opacity: 0 !important;
    }
}

.red-module-card,
.red-suite-points article,
.red-role-card,
.red-dashboard-bullets article,
.red-security-stack article {
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(255,255,255,.045) !important;
}

.red-module-card--featured {
    background:
        radial-gradient(circle at 18% 14%, rgba(255,88,88,.24), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.04)),
        rgba(255,255,255,.052) !important;
}

.red-module-card::after,
.red-role-card::before,
.red-suite-points article::after,
.red-security-stack article::before,
.red-dashboard-bullets article::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,88,88,.58), rgba(255,255,255,.34), transparent);
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease;
}

.red-module-card:hover::after,
.red-role-card:hover::before,
.red-suite-points article:hover::after,
.red-security-stack article:hover::before,
.red-dashboard-bullets article:hover::before {
    opacity: 1;
    transform: translateY(-8px);
}

.red-modules-grid--v5 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
}

.red-modules-grid--v5 .red-module-card {
    grid-column: span 3;
    min-height: 228px;
    padding: 23px;
}

.red-modules-grid--v5 .red-module-card--featured {
    grid-column: span 6;
}

.red-modules-grid--v5 .red-module-card h3 {
    font-size: clamp(20px, 1.8vw, 28px);
    letter-spacing: -.04em;
}

.red-flow-grid--v5 {
    grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
}

.red-flow-line--horizontal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.red-flow-line--horizontal::before {
    display: none;
}

.red-flow-line--horizontal article {
    grid-template-columns: 1fr;
    min-height: 205px;
    padding: 20px;
}

.red-flow-line--horizontal b {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgb(255,88,88), #8f111a) !important;
}

.red-flow-line--horizontal article::after {
    content: '';
    position: absolute;
    top: 45px;
    right: -18px;
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,88,88,.74), rgba(255,255,255,.28));
}

.red-flow-line--horizontal article:last-child::after {
    display: none;
}

.red-roles-grid--v5 .red-role-card {
    min-height: 355px;
}

.red-role-card::after {
    background: radial-gradient(circle, rgba(255,88,88,.19), transparent 68%) !important;
}

.red-role-icon,
.red-security-stack b {
    background: linear-gradient(135deg, rgba(255,88,88,.58), rgba(255,255,255,.075)) !important;
}

.red-dashboard-stat span {
    background: linear-gradient(90deg, var(--red-primary), rgba(255,255,255,.76)) !important;
}

.red-dashboard-chart div {
    background: linear-gradient(180deg, rgba(255,88,88,.92), rgba(255,88,88,.12)) !important;
}

.red-dashboard-chart div:nth-child(even) {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.09)) !important;
}

.red-dashboard-window,
.red-command-card {
    transition: transform .38s cubic-bezier(.2,.75,.22,1), border-color .3s ease, box-shadow .3s ease;
}

.red-command-card:hover .red-command-live article:nth-child(1),
.red-dashboard-window:hover .red-dashboard-feed p:nth-child(1) {
    animation: redSoftPulse 1.8s ease-in-out infinite;
}

.red-command-card:hover .red-command-live article:nth-child(2),
.red-dashboard-window:hover .red-dashboard-feed p:nth-child(2) {
    animation: redSoftPulse 1.8s .15s ease-in-out infinite;
}

.red-command-card:hover .red-command-live article:nth-child(3),
.red-dashboard-window:hover .red-dashboard-feed p:nth-child(3) {
    animation: redSoftPulse 1.8s .3s ease-in-out infinite;
}

.red-adaptive-finale {
    min-height: 92vh;
    display: grid;
    align-items: center;
    padding-top: clamp(90px, 9vw, 140px) !important;
    padding-bottom: clamp(90px, 9vw, 150px) !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255,88,88,.22), transparent 28%),
        radial-gradient(circle at 78% 72%, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(135deg, #06070b 0%, #111219 52%, #08090d 100%) !important;
}

.red-adaptive-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: clamp(32px, 6vw, 90px);
    align-items: center;
}

.red-adaptive-copy h2 {
    margin: 0;
    max-width: 980px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(48px, 7.2vw, 116px);
    line-height: .88;
    letter-spacing: -.08em;
    font-weight: 900;
    text-wrap: balance;
}

.red-adaptive-copy p {
    max-width: 760px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.68);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.66;
}

.red-adaptive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.red-adaptive-visual {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
}

.red-building-model {
    width: min(610px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 36px;
    background:
        radial-gradient(circle at 20% 12%, rgba(255,88,88,.24), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(9,10,15,.78);
    box-shadow: 0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(28px) saturate(1.15);
    -webkit-backdrop-filter: blur(28px) saturate(1.15);
}

.red-building-model__top {
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.red-building-model__body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    padding: 26px;
}

.red-building-tower {
    min-height: 350px;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: end;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
}

.red-building-tower span {
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    animation: redWindowBlink 4.8s ease-in-out infinite;
}

.red-building-tower span:nth-child(3n+1) {
    background: rgba(255,88,88,.32);
}

.red-building-tower span:nth-child(2n) {
    animation-delay: .65s;
}

.red-config-panel {
    display: grid;
    gap: 12px;
    align-content: center;
}

.red-config-panel article {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.052);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.red-building-model:hover .red-config-panel article {
    transform: translateX(4px);
}

.red-building-model:hover .red-config-panel article:nth-child(2) { transition-delay: .05s; }
.red-building-model:hover .red-config-panel article:nth-child(3) { transition-delay: .1s; }
.red-building-model:hover .red-config-panel article:nth-child(4) { transition-delay: .15s; }

.red-config-panel small {
    display: block;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.red-config-panel strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1;
    letter-spacing: -.045em;
}

.red-floating-chip {
    position: absolute;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 48px rgba(0,0,0,.26);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    animation: redChipFloat 5s ease-in-out infinite alternate;
}

.red-floating-chip--one { top: 42px; left: 6%; }
.red-floating-chip--two { top: 24%; right: 0; animation-delay: .4s; }
.red-floating-chip--three { left: 0; bottom: 24%; animation-delay: .75s; }
.red-floating-chip--four { right: 10%; bottom: 34px; animation-delay: 1.1s; }

.red-cta-box {
    background:
        radial-gradient(circle at 12% 16%, rgba(255,88,88,.28), transparent 30%),
        radial-gradient(circle at 84% 86%, rgba(255,255,255,.10), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
}

.red-btn--ghost:hover,
.red-btn--ghost:focus,
.red-login-tab:hover,
.red-header-products a:hover {
    transform: translateY(-2px);
}

@keyframes redSoftPulse {
    0%, 100% { border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.052); }
    50% { border-color: rgba(255,88,88,.42); background: rgba(255,88,88,.085); }
}

@keyframes redWindowBlink {
    0%, 100% { opacity: .55; transform: translateY(0); }
    45% { opacity: 1; }
    55% { opacity: .75; transform: translateY(-2px); }
}

@keyframes redChipFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(10px, -14px, 0); }
}

@media only screen and (max-width: 1180px) {
    .red-section-head--split,
    .red-suite-grid--balanced,
    .red-flow-grid--v5,
    .red-adaptive-grid {
        grid-template-columns: 1fr;
    }

    .red-section-head--split p {
        max-width: 760px;
    }

    .red-modules-grid--v5 .red-module-card,
    .red-modules-grid--v5 .red-module-card--featured {
        grid-column: span 6;
    }

    .red-flow-line--horizontal {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .red-flow-line--horizontal article::after {
        display: none;
    }

    .red-adaptive-visual {
        min-height: 500px;
    }
}

@media only screen and (max-width: 760px) {
    .red-software-main--v5 .red-software-section {
        padding: 64px 18px;
    }

    .red-software-main--v5 .red-suite-intro.first-section {
        padding-top: 70px;
    }

    .red-section-head--split {
        gap: 20px;
    }

    .red-modules-grid--v5 {
        grid-template-columns: 1fr;
    }

    .red-modules-grid--v5 .red-module-card,
    .red-modules-grid--v5 .red-module-card--featured {
        grid-column: auto;
        min-height: auto;
    }

    .red-flow-line--horizontal,
    .red-roles-grid--v5,
    .red-building-model__body {
        grid-template-columns: 1fr;
    }

    .red-flow-line--horizontal article {
        min-height: auto;
    }

    .red-adaptive-finale {
        min-height: auto;
    }

    .red-adaptive-visual {
        min-height: 470px;
    }

    .red-adaptive-actions {
        display: grid;
    }

    .red-adaptive-actions .red-btn {
        width: 100%;
    }

    .red-floating-chip {
        display: none;
    }
}


/* =========================================================
   RED Tag - video hero y secciones visuales
   ========================================================= */

:root {
    --red-tag-ink: #f5f7fb;
    --red-tag-muted: rgba(245,247,251,.66);
    --red-tag-soft: rgba(255,255,255,.08);
    --red-tag-line: rgba(183,255,216,.17);
    --red-tag-green: #36f49b;
    --red-tag-green-deep: #10a66f;
    --red-tag-green-soft: rgba(54,244,155,.22);
    --red-tag-red: var(--red-tag-green);
    --red-tag-red-soft: var(--red-tag-green-soft);
    --red-tag-cyan: #7af7d0;
    --red-tag-blue: #0b1b18;
    --red-tag-navy: #03110d;
    --red-tag-steel: #0d211b;
}

.red-hero__tag-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.01);
    filter: saturate(1.12) contrast(1.06) brightness(.86);
    transition: opacity .55s ease, visibility .55s ease, filter .55s ease;
}

body[data-active-product="tag"] .red-hero {
    background: #020908 !important;
}

body[data-active-product="tag"] #header-fixed.red-topbar {
    background: linear-gradient(180deg, rgba(2, 13, 10, .84), rgba(2, 13, 10, .24), rgba(2, 13, 10, 0)) !important;
    border-bottom: 1px solid rgba(54,244,155,.14) !important;
}

body[data-active-product="tag"] #header-fixed.red-topbar.red-topbar--scrolled {
    background: linear-gradient(180deg, rgba(2, 13, 10, .96), rgba(4, 24, 18, .82)) !important;
    border-bottom: 1px solid rgba(54,244,155,.18) !important;
    box-shadow: 0 22px 58px rgba(2, 11, 8, .34) !important;
}

body[data-active-product="tag"] .red-brand__mark {
    filter: drop-shadow(0 0 18px rgba(54,244,155,.42)) !important;
}

body[data-active-product="tag"] .red-header-products a.is-active {
    background: rgba(54,244,155,.16) !important;
    color: #effff7 !important;
    border-color: rgba(54,244,155,.34) !important;
}

body[data-active-product="tag"] .red-hero__tag-video {
    opacity: 1;
    visibility: visible;
}

body[data-active-product="tag"] .red-hero__bg img {
    opacity: 0 !important;
    visibility: hidden !important;
}

body[data-active-product="tag"] .red-hero__overlay {
    background:
        radial-gradient(circle at 78% 24%, rgba(54,244,155, 0.20), transparent 28%),
        radial-gradient(circle at 50% 82%, rgba(122,247,208, 0.11), transparent 34%),
        linear-gradient(90deg, rgba(2,9,8,.84) 0%, rgba(2,9,8,.56) 38%, rgba(2,9,8,.18) 66%, rgba(2,9,8,.60) 100%),
        linear-gradient(180deg, rgba(2,9,8,.24), rgba(2,9,8,.76)) !important;
}

body[data-active-product="tag"] .red-hero__grid {
    opacity: .09 !important;
    background-size: 92px 92px !important;
}

body[data-active-product="tag"] .red-hero__content {
    grid-template-columns: minmax(0, 780px) !important;
    justify-content: start !important;
}

body[data-active-product="tag"] .red-hero__visual {
    display: none !important;
}

body[data-active-product="tag"] .red-hero__kicker {
    color: rgba(255,255,255,.82) !important;
    text-shadow: 0 12px 34px rgba(0,0,0,.46) !important;
}

body[data-active-product="tag"] .red-hero__kicker::before,
body[data-active-product="tag"] .red-hero h1::after {
    background: linear-gradient(90deg, var(--red-tag-red), rgba(113,240,255,.85), transparent) !important;
    box-shadow: 0 0 26px rgba(54,244,155,.44) !important;
}

body[data-active-product="tag"] .red-hero h1,
body[data-active-product="tag"] .red-hero__lead {
    text-shadow: 0 22px 70px rgba(0,0,0,.62) !important;
}

body[data-active-product="tag"] .red-btn--primary {
    background: linear-gradient(135deg, #36f49b, #11c57b 58%, #0b8f5b 100%) !important;
    box-shadow: 0 22px 52px rgba(54,244,155,.26) !important;
}

body[data-active-product="tag"] .red-btn--ghost {
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(5,8,15,.42) !important;
}

body[data-active-product="tag"] .red-hero__proof article,
body[data-active-product="tag"] .red-product-card.is-active {
    border-color: rgba(54,244,155,.42) !important;
    background: linear-gradient(135deg, rgba(54,244,155,.18), rgba(113,240,255,.08)) !important;
}

.red-product-view.is-hidden {
    display: none !important;
}

.red-hero__copy.is-switching {
    animation: redHeroSwitch .48s ease both;
}

@keyframes redHeroSwitch {
    0% { opacity: .45; transform: translateY(12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.red-tag-main {
    position: relative;
    z-index: 6;
    background: var(--red-tag-navy);
}

.red-tag-main .red-section-shell {
    width: min(1240px, calc(100% - 42px));
    margin: 0 auto;
}

.red-tag-section {
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 8vw, 118px) 24px;
    background:
        radial-gradient(circle at 12% 18%, rgba(54,244,155,.16), transparent 30%),
        radial-gradient(circle at 84% 12%, rgba(113,240,255,.10), transparent 28%),
        radial-gradient(circle at 70% 92%, rgba(255,255,255,.06), transparent 32%),
        linear-gradient(135deg, #03110d 0%, #071b16 44%, #020908 100%) !important;
    color: var(--red-tag-ink);
}

.red-tag-section:nth-of-type(even) {
    background:
        radial-gradient(circle at 80% 16%, rgba(54,244,155,.13), transparent 30%),
        radial-gradient(circle at 20% 84%, rgba(113,240,255,.10), transparent 34%),
        linear-gradient(135deg, #061510 0%, #0d211b 54%, #020908 100%) !important;
}

.red-tag-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .20;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(circle at 50% 44%, #000, transparent 74%);
    -webkit-mask-image: radial-gradient(circle at 50% 44%, #000, transparent 74%);
}

.red-tag-section::after {
    content: '';
    position: absolute;
    inset: auto 7% 0 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), rgba(54,244,155,.22), transparent);
    pointer-events: none;
}

.red-tag-section > * {
    position: relative;
    z-index: 2;
}

.red-tag-hero-section.first-section {
    margin-top: 100vh;
    padding-top: clamp(86px, 8vw, 124px) !important;
    padding-bottom: clamp(74px, 7vw, 112px) !important;
    box-shadow: none;
}

.red-tag-hero-grid,
.red-tag-guest-grid,
.red-tag-security-grid,
.red-tag-control-grid {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
}

.red-tag-copy h2,
.red-tag-main .red-section-head h2 {
    margin: 0;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(38px, 5.2vw, 82px);
    line-height: .95;
    letter-spacing: -.06em;
    font-weight: 900;
    text-wrap: balance;
}

.red-tag-copy p,
.red-tag-main .red-section-head p {
    max-width: 760px;
    margin: 24px 0 0;
    color: var(--red-tag-muted);
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.66;
}

.red-tag-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 32px;
}

.red-tag-summary article,
.red-tag-class-card,
.red-tag-flow-mini article,
.red-tag-security-stack article,
.red-tag-control-window,
.red-tag-media-card,
.red-tag-control-image,
.red-tag-image-slot {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--red-tag-line);
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(54,244,155,.15), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.028)),
        rgba(7,12,20,.76);
    box-shadow: 0 24px 74px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0);
    transition: transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease;
}

.red-tag-summary article:hover,
.red-tag-class-card:hover,
.red-tag-flow-mini article:hover,
.red-tag-security-stack article:hover,
.red-tag-control-window:hover,
.red-tag-media-card:hover,
.red-tag-control-image:hover,
.red-tag-image-slot:hover {
    border-color: rgba(54,244,155,.46);
    box-shadow: 0 34px 110px rgba(0,0,0,.44), 0 0 0 1px rgba(113,240,255,.08), inset 0 1px 0 rgba(255,255,255,.14);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px);
}

.red-tag-summary article {
    min-height: 138px;
    padding: 22px;
    border-radius: 24px;
}

.red-tag-summary strong,
.red-tag-class-card h3,
.red-tag-flow-mini strong,
.red-tag-security-stack strong {
    display: block;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    letter-spacing: -.035em;
}

.red-tag-summary strong {
    font-size: 18px;
    line-height: 1.12;
}

.red-tag-summary span,
.red-tag-flow-mini span,
.red-tag-security-stack span {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.60);
    font-size: 13px;
    line-height: 1.5;
}

.red-tag-camera-stage {
    position: relative;
    min-height: 540px;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 38px;
    border: 1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 50% 18%, rgba(54,244,155,.18), transparent 30%),
        radial-gradient(circle at 82% 82%, rgba(113,240,255,.10), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.028)),
        rgba(5,8,14,.78);
    box-shadow: 0 34px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.red-tag-image-slot,
.red-tag-media-card,
.red-tag-control-image {
    min-height: 300px;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px;
    border-radius: 30px;
}

.red-tag-image-slot--with-image img,
.red-tag-media-card img,
.red-tag-control-image img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.red-tag-image-slot--with-image::after,
.red-tag-media-card::after,
.red-tag-control-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(3,5,10,.10), rgba(3,5,10,.74));
    pointer-events: none;
}

.red-tag-image-slot__fallback,
.red-tag-media-card__fallback {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 10px;
}

.red-tag-image-slot span,
.red-tag-media-card__fallback span {
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid rgba(54,244,155,.34);
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    background: rgba(54,244,155,.11);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.red-tag-image-slot strong,
.red-tag-media-card__fallback strong {
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(24px, 3.2vw, 40px);
    line-height: 1;
    letter-spacing: -.055em;
}

.red-tag-image-slot small,
.red-tag-media-card__fallback small {
    max-width: 360px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.45;
}

.red-tag-image-slot--main {
    width: min(520px, 100%);
    min-height: 380px;
}

.red-tag-detection-card,
.red-tag-floating-panel {
    position: absolute;
    z-index: 6;
    right: 8%;
    bottom: 8%;
    min-width: 260px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: rgba(4,7,12,.78);
    box-shadow: 0 24px 70px rgba(0,0,0,.44), 0 0 0 1px rgba(113,240,255,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: redTagFloat 4.8s ease-in-out infinite alternate;
}

.red-tag-floating-panel {
    right: 24px;
    bottom: 24px;
    width: min(320px, calc(100% - 48px));
}

.red-tag-detection-card small,
.red-tag-floating-panel small,
.red-tag-control-window small,
.red-tag-class-card span {
    display: block;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.red-tag-detection-card strong,
.red-tag-floating-panel strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.045em;
}

.red-tag-detection-card p,
.red-tag-floating-panel p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.35;
}

.red-tag-detection-card em {
    display: inline-flex;
    margin-top: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(54,244,155,.18);
    border: 1px solid rgba(54,244,155,.32);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.red-tag-scan-beam {
    position: absolute;
    z-index: 5;
    top: 18%;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(54,244,155,.92), rgba(113,240,255,.84), transparent);
    box-shadow: 0 0 28px rgba(54,244,155,.62), 0 0 38px rgba(113,240,255,.26);
    animation: redTagScan 3.2s ease-in-out infinite;
}

.red-tag-classification-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-top: 38px;
}

.red-tag-class-card {
    min-height: 270px;
    padding: 24px;
    border-radius: 28px;
}

.red-tag-class-card h3 {
    margin: 18px 0 0;
    font-size: 24px;
    line-height: 1.05;
}

.red-tag-class-card p {
    margin: 16px 0 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.58;
}

.red-tag-guest-grid {
    grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr);
}

.red-tag-media-card {
    min-height: 560px;
    justify-self: stretch;
}

.red-tag-flow-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 30px;
}

.red-tag-flow-mini article {
    min-height: 156px;
    padding: 20px;
    border-radius: 24px;
}

.red-tag-flow-mini b {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    color: #fff;
    background: rgba(54,244,155,.22);
    border: 1px solid rgba(54,244,155,.34);
}

.red-tag-image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin-top: 36px;
}

.red-tag-image-grid .red-tag-image-slot {
    min-height: 380px;
}

.red-tag-security-grid {
    grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
}

.red-tag-security-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.red-tag-security-stack article {
    min-height: 190px;
    padding: 24px;
    border-radius: 28px;
}

.red-tag-security-stack i {
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 20px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(54,244,155,.88), rgba(113,240,255,.16)),
        rgba(255,255,255,.06);
    box-shadow: 0 18px 44px rgba(54,244,155,.16);
}

.red-tag-control-room {
    min-height: 90vh;
    display: grid;
    align-items: center;
}

.red-tag-control-grid {
    grid-template-columns: minmax(420px, 1.08fr) minmax(0, .92fr);
}

.red-tag-control-visual {
    position: relative;
    min-height: 620px;
}

.red-tag-control-image {
    position: absolute;
    inset: 0;
    min-height: 100%;
}

.red-tag-control-window {
    position: absolute;
    z-index: 6;
    left: 32px;
    right: 32px;
    bottom: 32px;
    border-radius: 34px;
}

.red-tag-control-window__top {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.red-tag-control-window__top span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.red-tag-control-window__top span:first-child {
    background: var(--red-tag-red);
    box-shadow: 0 0 16px rgba(54,244,155,.74);
}

.red-tag-control-window__top em {
    margin-left: auto;
    color: rgba(255,255,255,.56);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.red-tag-control-window__body {
    padding: 28px;
}

.red-tag-plate-big {
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
        rgba(255,255,255,.05);
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(46px, 5.6vw, 78px);
    font-weight: 900;
    letter-spacing: -.05em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    animation: redTagPlateGlow 3.4s ease-in-out infinite alternate;
}

.red-tag-status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 14px;
}

.red-tag-status-list article {
    min-height: 104px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: rgba(255,255,255,.055);
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.red-tag-control-window:hover .red-tag-status-list article {
    transform: translateY(-4px);
    border-color: rgba(54,244,155,.30);
    background: rgba(54,244,155,.075);
}

.red-tag-status-list strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -.035em;
}

@keyframes redTagFloat {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -14px, 0); }
}

@keyframes redTagScan {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    60% { opacity: 1; }
    100% { transform: translateY(360px); opacity: 0; }
}

@keyframes redTagPlateGlow {
    from { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 rgba(54,244,155,0); }
    to { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 46px rgba(54,244,155,.20); }
}

@media only screen and (max-width: 1180px) {
    body[data-active-product="tag"] .red-hero__content {
        grid-template-columns: 1fr !important;
    }

    .red-tag-hero-grid,
    .red-tag-guest-grid,
    .red-tag-security-grid,
    .red-tag-control-grid {
        grid-template-columns: 1fr;
    }

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

    .red-tag-camera-stage,
    .red-tag-control-visual {
        min-height: 500px;
    }
}

@media only screen and (max-width: 760px) {
    .red-tag-main .red-section-shell {
        width: min(100% - 30px, 680px);
    }

    .red-tag-section {
        padding: 66px 0;
    }

    .red-tag-hero-section.first-section {
        padding-top: 70px !important;
    }

    .red-tag-summary,
    .red-tag-classification-grid,
    .red-tag-flow-mini,
    .red-tag-image-grid,
    .red-tag-security-stack,
    .red-tag-status-list {
        grid-template-columns: 1fr;
    }

    .red-tag-camera-stage,
    .red-tag-control-visual {
        min-height: 430px;
        padding: 14px;
    }

    .red-tag-media-card {
        min-height: 430px;
    }

    .red-tag-image-slot--main,
    .red-tag-image-grid .red-tag-image-slot {
        min-height: 300px;
    }

    .red-tag-detection-card,
    .red-tag-floating-panel {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: -48px;
        width: calc(100% - 28px);
        min-width: 0;
    }

    .red-tag-control-image {
        position: relative;
        min-height: 360px;
    }

    .red-tag-control-window {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: -70px;
    }

    .red-tag-control-room {
        min-height: auto;
    }

    .red-tag-control-window__top em {
        display: none;
    }

    .red-tag-plate-big {
        min-height: 126px;
        font-size: 44px;
    }
}


/* Estado inicial seguro */
body[data-active-product="software"] [data-product-panel="software"] {
    display: block !important;
}

body[data-active-product="software"] [data-product-panel="tag"] {
    display: none !important;
}

body[data-active-product="tag"] [data-product-panel="software"] {
    display: none !important;
}

body[data-active-product="tag"] [data-product-panel="tag"] {
    display: block !important;
}

.red-hero,
.red-login-card {
    transform: translateZ(0);
}


/* =========================================================
   RED Tag - refuerzo de color verde acceso
   Bloque aislado: solo afecta RED Tag
   ========================================================= */

:root {
    --red-tag-ink: #f4fff8;
    --red-tag-muted: rgba(232,255,241,.82);
    --red-tag-soft: rgba(91,255,162,.16);
    --red-tag-line: rgba(97,255,174,.42);
    --red-tag-green: #39ff88;
    --red-tag-green-deep: #00c875;
    --red-tag-green-soft: rgba(57,255,136,.34);
    --red-tag-red: var(--red-tag-green);
    --red-tag-red-soft: var(--red-tag-green-soft);
    --red-tag-cyan: #42ffd0;
    --red-tag-blue: #075336;
    --red-tag-navy: #052d20;
    --red-tag-steel: #0b6240;
}

body[data-active-product="tag"] .red-hero {
    background: #05271b !important;
}

body[data-active-product="tag"] .red-hero__tag-video {
    opacity: 1 !important;
    visibility: visible !important;
    filter: saturate(1.32) contrast(1.03) brightness(.98) !important;
}

body[data-active-product="tag"] .red-hero__overlay {
    background:
        radial-gradient(circle at 76% 20%, rgba(57,255,136,.34), transparent 29%),
        radial-gradient(circle at 50% 82%, rgba(66,255,208,.22), transparent 35%),
        radial-gradient(circle at 15% 72%, rgba(143,255,185,.15), transparent 32%),
        linear-gradient(90deg, rgba(3,26,18,.70) 0%, rgba(3,26,18,.42) 38%, rgba(3,26,18,.10) 66%, rgba(3,26,18,.42) 100%),
        linear-gradient(180deg, rgba(3,26,18,.12), rgba(3,26,18,.54)) !important;
}

body[data-active-product="tag"] .red-hero__grid {
    opacity: .16 !important;
    background-image:
        linear-gradient(rgba(57,255,136,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66,255,208,.16) 1px, transparent 1px) !important;
}

body[data-active-product="tag"] #header-fixed.red-topbar {
    background: linear-gradient(180deg, rgba(4,42,27,.82), rgba(4,42,27,.20), rgba(4,42,27,0)) !important;
    border-bottom: 1px solid rgba(57,255,136,.24) !important;
}

body[data-active-product="tag"] #header-fixed.red-topbar.red-topbar--scrolled {
    background: linear-gradient(180deg, rgba(5,54,35,.96), rgba(5,44,31,.78)) !important;
    border-bottom: 1px solid rgba(57,255,136,.34) !important;
    box-shadow: 0 24px 68px rgba(0,82,43,.22) !important;
}

body[data-active-product="tag"] .red-brand__mark {
    filter: drop-shadow(0 0 22px rgba(57,255,136,.64)) !important;
}

body[data-active-product="tag"] .red-header-products a.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(57,255,136,.28), rgba(66,255,208,.14)) !important;
    border-color: rgba(57,255,136,.54) !important;
    box-shadow: 0 14px 34px rgba(57,255,136,.14) !important;
}

body[data-active-product="tag"] .red-hero__kicker::before,
body[data-active-product="tag"] .red-hero h1::after {
    background: linear-gradient(90deg, #39ff88, #42ffd0, rgba(255,255,255,.86), transparent) !important;
    box-shadow: 0 0 34px rgba(57,255,136,.68) !important;
}

body[data-active-product="tag"] .red-btn--primary {
    background: linear-gradient(135deg, #74ffac 0%, #39ff88 38%, #00d37a 72%, #00a765 100%) !important;
    color: #032316 !important;
    border-color: rgba(255,255,255,.34) !important;
    box-shadow: 0 24px 58px rgba(57,255,136,.36), 0 0 42px rgba(66,255,208,.14) !important;
}

body[data-active-product="tag"] .red-btn--ghost {
    color: #ecfff5 !important;
    border-color: rgba(120,255,184,.42) !important;
    background: rgba(9,76,49,.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 36px rgba(0,80,43,.12) !important;
}

body[data-active-product="tag"] .red-btn--ghost:hover {
    border-color: rgba(120,255,184,.66) !important;
    background: rgba(57,255,136,.18) !important;
}

body[data-active-product="tag"] .red-hero__proof article,
body[data-active-product="tag"] .red-product-card.is-active {
    border-color: rgba(57,255,136,.56) !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(57,255,136,.32), transparent 42%),
        linear-gradient(135deg, rgba(57,255,136,.22), rgba(66,255,208,.13)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px rgba(57,255,136,.12) !important;
}

.red-tag-main {
    background:
        radial-gradient(circle at 10% 0%, rgba(57,255,136,.24), transparent 28%),
        linear-gradient(180deg, #063f2b 0%, #083a29 42%, #062b20 100%) !important;
}

.red-tag-section {
    background:
        radial-gradient(circle at 10% 14%, rgba(57,255,136,.42), transparent 32%),
        radial-gradient(circle at 84% 10%, rgba(66,255,208,.28), transparent 30%),
        radial-gradient(circle at 72% 94%, rgba(147,255,189,.20), transparent 34%),
        linear-gradient(135deg, #0d6a43 0%, #084f36 46%, #063425 100%) !important;
    border-top: 1px solid rgba(123,255,185,.20) !important;
}

.red-tag-section:nth-of-type(even) {
    background:
        radial-gradient(circle at 80% 15%, rgba(57,255,136,.38), transparent 32%),
        radial-gradient(circle at 20% 84%, rgba(66,255,208,.26), transparent 35%),
        radial-gradient(circle at 50% 8%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(135deg, #0b5d3b 0%, #0a7048 52%, #063726 100%) !important;
}

.red-tag-section::before {
    opacity: .28 !important;
    background-image:
        linear-gradient(rgba(111,255,181,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66,255,208,.10) 1px, transparent 1px) !important;
}

.red-tag-section::after {
    background: linear-gradient(90deg, transparent, rgba(123,255,185,.26), rgba(66,255,208,.34), transparent) !important;
}

.red-tag-summary article,
.red-tag-class-card,
.red-tag-flow-mini article,
.red-tag-security-stack article,
.red-tag-control-window,
.red-tag-media-card,
.red-tag-control-image,
.red-tag-image-slot {
    border-color: rgba(123,255,185,.38) !important;
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(57,255,136,.32), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(66,255,208,.13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
        rgba(8,72,47,.78) !important;
    box-shadow: 0 28px 80px rgba(0,70,38,.28), 0 0 52px rgba(57,255,136,.10), inset 0 1px 0 rgba(255,255,255,.18) !important;
    backdrop-filter: blur(20px) saturate(1.28) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.28) !important;
}

.red-tag-summary article:hover,
.red-tag-class-card:hover,
.red-tag-flow-mini article:hover,
.red-tag-security-stack article:hover,
.red-tag-control-window:hover,
.red-tag-media-card:hover,
.red-tag-control-image:hover,
.red-tag-image-slot:hover {
    border-color: rgba(146,255,196,.72) !important;
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(57,255,136,.42), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.07)),
        rgba(12,92,58,.86) !important;
    box-shadow: 0 34px 100px rgba(0,92,49,.30), 0 0 58px rgba(57,255,136,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.red-tag-camera-stage {
    border-color: rgba(123,255,185,.36) !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(57,255,136,.38), transparent 32%),
        radial-gradient(circle at 82% 82%, rgba(66,255,208,.22), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.048)),
        rgba(8,78,49,.78) !important;
    box-shadow: 0 36px 110px rgba(0,72,39,.32), 0 0 70px rgba(57,255,136,.12), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.red-tag-detection-card,
.red-tag-floating-panel {
    border-color: rgba(123,255,185,.42) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(57,255,136,.26), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
        rgba(5,66,43,.84) !important;
    box-shadow: 0 26px 72px rgba(0,72,39,.32), 0 0 50px rgba(57,255,136,.14) !important;
}

.red-tag-detection-card em,
.red-tag-image-slot span,
.red-tag-media-card__fallback span,
.red-tag-flow-mini b {
    color: #ecfff5 !important;
    background: rgba(57,255,136,.22) !important;
    border-color: rgba(123,255,185,.50) !important;
    box-shadow: 0 12px 28px rgba(57,255,136,.12) !important;
}

.red-tag-scan-beam {
    background: linear-gradient(90deg, transparent, rgba(57,255,136,1), rgba(66,255,208,.98), rgba(255,255,255,.70), transparent) !important;
    box-shadow: 0 0 36px rgba(57,255,136,.82), 0 0 54px rgba(66,255,208,.42) !important;
}

.red-tag-security-stack i {
    background:
        linear-gradient(135deg, rgba(116,255,172,.96), rgba(66,255,208,.34)),
        rgba(255,255,255,.08) !important;
    box-shadow: 0 20px 48px rgba(57,255,136,.28), 0 0 38px rgba(66,255,208,.12) !important;
}

.red-tag-plate-big {
    border-color: rgba(123,255,185,.38) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(57,255,136,.24), transparent 50%),
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07)),
        rgba(10,82,52,.62) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 44px rgba(57,255,136,.20) !important;
}

.red-tag-status-list article {
    border-color: rgba(123,255,185,.28) !important;
    background: rgba(57,255,136,.095) !important;
}

.red-tag-control-window:hover .red-tag-status-list article {
    border-color: rgba(123,255,185,.50) !important;
    background: rgba(57,255,136,.16) !important;
}

.red-tag-copy p,
.red-tag-main .red-section-head p,
.red-tag-summary span,
.red-tag-flow-mini span,
.red-tag-security-stack span,
.red-tag-class-card p,
.red-tag-image-slot small,
.red-tag-media-card__fallback small {
    color: rgba(234,255,242,.78) !important;
}


/* =========================================================
   RED Persona - identidad inteligente / animación RED
   Bloque aislado para RED Persona
   ========================================================= */

.red-product-view--persona {
    background: #070d24;
    color: #eef6ff;
}

.red-persona-main {
    --persona-navy: #070d24;
    --persona-navy-2: #0b1437;
    --persona-blue: #5b75ff;
    --persona-cyan: #3df0ff;
    --persona-aqua: #4ff7c8;
    --persona-violet: #8b5cff;
    --persona-magenta: #f45ed7;
    --persona-ink: #f7fbff;
    --persona-muted: rgba(237, 246, 255, .70);
    --persona-soft: rgba(255, 255, 255, .075);
    --persona-border: rgba(255, 255, 255, .16);
    --persona-shadow: 0 34px 110px rgba(0, 0, 0, .42);
}

/* Hero global cuando el producto activo es RED Persona */
body[data-active-product="persona"] #header-fixed.red-topbar {
    background: linear-gradient(180deg, rgba(5, 10, 30, .82), rgba(5, 10, 30, .22), rgba(5, 10, 30, 0)) !important;
    border-bottom: 1px solid rgba(91, 117, 255, .14) !important;
}

body[data-active-product="persona"] #header-fixed.red-topbar.red-topbar--scrolled {
    background: linear-gradient(180deg, rgba(5, 10, 30, .96), rgba(8, 15, 42, .82)) !important;
    border-bottom: 1px solid rgba(61, 240, 255, .18) !important;
    box-shadow: 0 22px 58px rgba(4, 8, 24, .34) !important;
}

body[data-active-product="persona"] .red-brand__mark {
    filter: drop-shadow(0 0 20px rgba(61, 240, 255, .34)) !important;
}

body[data-active-product="persona"] .red-header-products a {
    color: rgba(238, 246, 255, .66) !important;
}

body[data-active-product="persona"] .red-header-products a:hover,
body[data-active-product="persona"] .red-header-products a.is-active {
    color: #fff !important;
}

body[data-active-product="persona"] .red-header-products a::after {
    background: linear-gradient(90deg, transparent, #3df0ff, #8b5cff, #f45ed7, transparent) !important;
}

body[data-active-product="persona"] .red-login-launcher {
    background: linear-gradient(135deg, #8b5cff, #5b75ff 55%, #35d9ff) !important;
    box-shadow: 0 18px 46px rgba(91, 117, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}
body[data-active-product="persona"] .red-login-card {
    color: #eef6ff !important;
    border-color: rgba(61, 240, 255, .20) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(61, 240, 255, .16), transparent 36%),
        radial-gradient(circle at 86% 18%, rgba(244, 94, 215, .14), transparent 34%),
        linear-gradient(145deg, rgba(13, 24, 62, .88), rgba(6, 11, 34, .92)) !important;
    box-shadow: 0 28px 78px rgba(4, 8, 24, .48), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body[data-active-product="persona"] .red-login-card::before {
    background: linear-gradient(135deg, rgba(61, 240, 255, .42), transparent 38%, rgba(244, 94, 215, .26)) !important;
    opacity: .72 !important;
}

body[data-active-product="persona"] .red-login-card__head strong {
    color: #ffffff !important;
}

body[data-active-product="persona"] .red-login-eyebrow,
body[data-active-product="persona"] .red-input-wrap span,
body[data-active-product="persona"] .red-login-policy {
    color: rgba(238, 246, 255, .58) !important;
}

body[data-active-product="persona"] .red-login-tabs {
    border-color: rgba(61, 240, 255, .14) !important;
    background: rgba(2, 7, 24, .36) !important;
}

body[data-active-product="persona"] .red-login-tab {
    color: rgba(238, 246, 255, .58) !important;
}

body[data-active-product="persona"] .red-login-tab:hover,
body[data-active-product="persona"] .red-login-tab.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(61, 240, 255, .24), rgba(139, 92, 255, .32), rgba(244, 94, 215, .20)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px rgba(61, 240, 255, .10) !important;
}

body[data-active-product="persona"] .red-login-close {
    color: #ffffff !important;
    border-color: rgba(61, 240, 255, .22) !important;
    background: rgba(255,255,255,.08) !important;
}

body[data-active-product="persona"] .red-login-close:hover,
body[data-active-product="persona"] .red-login-close:focus {
    color: #061024 !important;
    background: linear-gradient(135deg, #3df0ff, #8b5cff) !important;
}

body[data-active-product="persona"] .red-login-form input[type="text"],
body[data-active-product="persona"] .red-login-form input[type="password"] {
    color: #ffffff !important;
    border-color: rgba(61, 240, 255, .18) !important;
    background: rgba(255,255,255,.075) !important;
}

body[data-active-product="persona"] .red-login-form input[type="text"]:focus,
body[data-active-product="persona"] .red-login-form input[type="password"]:focus,
body[data-active-product="persona"] .red-login-form input[type="text"]:hover,
body[data-active-product="persona"] .red-login-form input[type="password"]:hover {
    border-color: rgba(61, 240, 255, .42) !important;
    background: rgba(255,255,255,.11) !important;
}

body[data-active-product="persona"] .red-login-form input[type="submit"] {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.18) !important;
    background: linear-gradient(135deg, #8b5cff, #5b75ff 52%, #35d9ff) !important;
    box-shadow: 0 16px 34px rgba(91, 117, 255, .24) !important;
}

body[data-active-product="persona"] .red-hero {
    background: #070d24 !important;
}

body[data-active-product="persona"] .red-hero__bg img {
    opacity: 0 !important;
    filter: none !important;
}

body[data-active-product="persona"] .red-hero__overlay {
    background:
        radial-gradient(circle at 72% 30%, rgba(61, 240, 255, .34), transparent 28%),
        radial-gradient(circle at 56% 58%, rgba(139, 92, 255, .34), transparent 32%),
        radial-gradient(circle at 38% 72%, rgba(244, 94, 215, .16), transparent 31%),
        linear-gradient(120deg, #060b22 0%, #07112f 42%, #0b1d46 100%) !important;
}

body[data-active-product="persona"] .red-hero__grid {
    opacity: .18 !important;
    background-image:
        linear-gradient(rgba(61, 240, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 117, 255, .16) 1px, transparent 1px) !important;
}

body[data-active-product="persona"] .red-hero__glow--one {
    background: #8b5cff !important;
    opacity: .34 !important;
}

body[data-active-product="persona"] .red-hero__glow--two {
    background: #3df0ff !important;
    opacity: .30 !important;
}

body[data-active-product="persona"] .red-hero__kicker {
    color: rgba(238, 246, 255, .86) !important;
}

body[data-active-product="persona"] .red-hero__kicker::before,
body[data-active-product="persona"] .red-hero h1::after {
    background: linear-gradient(90deg, #3df0ff, #8b5cff, #f45ed7, transparent) !important;
    box-shadow: 0 0 26px rgba(61, 240, 255, .34) !important;
}

body[data-active-product="persona"] .red-hero h1 {
    color: #fff !important;
    text-shadow: 0 34px 100px rgba(0, 0, 0, .46), 0 0 34px rgba(91, 117, 255, .20) !important;
}

body[data-active-product="persona"] .red-hero__lead {
    color: rgba(238, 246, 255, .78) !important;
}

body[data-active-product="persona"] .red-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #8b5cff, #5b75ff 58%, #35d9ff) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 24px 58px rgba(91, 117, 255, .30) !important;
}

body[data-active-product="persona"] .red-btn--ghost {
    color: rgba(238, 246, 255, .88) !important;
    border-color: rgba(61, 240, 255, .22) !important;
    background: rgba(255, 255, 255, .065) !important;
}

body[data-active-product="persona"] .red-btn--ghost:hover {
    color: #fff !important;
    border-color: rgba(61, 240, 255, .42) !important;
    background: rgba(61, 240, 255, .10) !important;
}

body[data-active-product="persona"] .red-hero__proof article {
    border-color: rgba(61, 240, 255, .18) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 22px 62px rgba(5, 9, 28, .24) !important;
}

body[data-active-product="persona"] .red-hero__proof strong {
    color: #fff !important;
}

body[data-active-product="persona"] .red-hero__proof span {
    color: rgba(238, 246, 255, .62) !important;
}

.red-hero__persona-signal {
    display: none;
}

body[data-active-product="persona"] .red-hero__visual {
    position: relative !important;
    min-height: 620px !important;
    display: grid !important;
    place-items: center !important;
}

body[data-active-product="persona"] .red-hero__visual .red-device,
body[data-active-product="persona"] .red-hero__visual .red-orbit,
body[data-active-product="persona"] .red-hero__visual .red-scan-line,
body[data-active-product="persona"] .red-hero__app-person {
    display: none !important;
}

body[data-active-product="persona"] .red-hero__persona-signal {
    position: relative;
    z-index: 4;
    width: min(530px, 42vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 36px 78px rgba(0, 0, 0, .34));
    animation: redPersonaHeroFloat 6.2s ease-in-out infinite alternate;
}

.red-hero__persona-orb {
    position: relative;
    width: 74%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.red-persona-orb-layer,
.red-persona-orb-core {
    position: absolute;
    border-radius: 42% 58% 50% 50% / 52% 46% 54% 48%;
    filter: blur(.1px);
    mix-blend-mode: screen;
}

.red-persona-orb-layer--one {
    inset: 2%;
    background: conic-gradient(from 20deg, #3df0ff, #5b75ff, #8b5cff, #f45ed7, #3df0ff);
    box-shadow: 0 0 74px rgba(61, 240, 255, .35), inset 0 0 38px rgba(255, 255, 255, .16);
    animation: redPersonaMorphOne 6.5s ease-in-out infinite alternate, redPersonaRotate 13s linear infinite;
}

.red-persona-orb-layer--two {
    inset: 14%;
    background: conic-gradient(from 190deg, rgba(79, 247, 200, .82), rgba(61, 240, 255, .24), rgba(139, 92, 255, .85), rgba(244, 94, 215, .72), rgba(79, 247, 200, .82));
    filter: blur(10px);
    opacity: .84;
    animation: redPersonaMorphTwo 5.2s ease-in-out infinite alternate-reverse, redPersonaRotateReverse 15s linear infinite;
}

.red-persona-orb-layer--three {
    inset: 25%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(61, 240, 255, .95) 18%, rgba(91, 117, 255, .55) 45%, rgba(244, 94, 215, .28) 72%, transparent 100%);
    filter: blur(5px);
    opacity: .78;
    animation: redPersonaPulseCore 3.2s ease-in-out infinite;
}

.red-persona-orb-core {
    width: 22%;
    aspect-ratio: 1;
    background: #f7fbff;
    box-shadow: 0 0 36px rgba(255,255,255,.70), 0 0 78px rgba(61,240,255,.58);
    animation: redPulse 2.4s ease-in-out infinite;
}

.red-hero__persona-lines {
    position: absolute;
    inset: 10% 4%;
    z-index: -1;
    display: grid;
    align-content: center;
    gap: 18px;
    opacity: .70;
}

.red-hero__persona-lines span {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(61,240,255,.72), rgba(139,92,255,.46), transparent);
    transform-origin: center;
    animation: redPersonaLineWave 3.4s ease-in-out infinite;
}

.red-hero__persona-lines span:nth-child(2) { animation-delay: .18s; transform: scaleX(.82); }
.red-hero__persona-lines span:nth-child(3) { animation-delay: .36s; transform: scaleX(.62); }
.red-hero__persona-lines span:nth-child(4) { animation-delay: .54s; transform: scaleX(.78); }
.red-hero__persona-lines span:nth-child(5) { animation-delay: .72s; transform: scaleX(.52); }

.red-hero__persona-card {
    position: absolute;
    right: -8%;
    bottom: 15%;
    min-width: 210px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: rgba(8, 14, 38, .58);
    box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.red-hero__persona-card small {
    display: block;
    color: rgba(238,246,255,.58);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.red-hero__persona-card strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 20px;
    letter-spacing: -.04em;
}

/* Secciones internas RED Persona */
.red-persona-main .red-section-shell {
    width: min(1260px, calc(100% - 72px));
    margin: 0 auto;
}

.red-persona-section {
    position: relative;
    overflow: hidden;
    padding: 108px 0;
    background:
        radial-gradient(circle at 76% 16%, rgba(61, 240, 255, .15), transparent 28%),
        radial-gradient(circle at 16% 82%, rgba(139, 92, 255, .17), transparent 32%),
        linear-gradient(135deg, #070d24 0%, #0a1435 52%, #0c1a46 100%);
    color: var(--persona-ink);
    isolation: isolate;
}

.red-persona-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(61, 240, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 117, 255, .18) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
    pointer-events: none;
}

.red-persona-hero-section.first-section {
    padding-top: 138px !important;
    padding-bottom: 118px !important;
}

.red-persona-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.red-persona-ambient__orb {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
}

.red-persona-ambient__orb--one {
    right: 8%;
    top: 12%;
    background: #3df0ff;
    animation: redPersonaAmbientFloat 8s ease-in-out infinite alternate;
}

.red-persona-ambient__orb--two {
    left: 12%;
    bottom: 8%;
    background: #8b5cff;
    animation: redPersonaAmbientFloat 9s ease-in-out infinite alternate-reverse;
}

.red-persona-ambient__line {
    position: absolute;
    left: -12%;
    width: 124%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(61,240,255,.30), rgba(244,94,215,.22), transparent);
    transform: rotate(-8deg);
    opacity: .42;
}

.red-persona-ambient__line--one { top: 22%; }
.red-persona-ambient__line--two { bottom: 24%; transform: rotate(8deg); }

.red-persona-hero-grid,
.red-persona-types-grid,
.red-persona-report-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
    align-items: center;
    gap: clamp(38px, 6vw, 98px);
}

.red-persona-copy h2,
.red-persona-closing-card h2 {
    margin: 0;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(42px, 5.8vw, 86px);
    line-height: .94;
    letter-spacing: -.07em;
}

.red-persona-copy p,
.red-persona-closing-card p,
.red-persona-flow-section .red-section-head p {
    max-width: 690px;
    margin: 26px 0 0;
    color: var(--persona-muted);
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.68;
}

.red-persona-main .red-section-kicker {
    color: rgba(61, 240, 255, .86);
}

.red-persona-main .red-section-kicker::before {
    background: linear-gradient(90deg, #3df0ff, #8b5cff, #f45ed7) !important;
    box-shadow: 0 0 26px rgba(61,240,255,.34) !important;
}

.red-persona-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
    margin-top: 34px;
}

.red-persona-summary article,
.red-persona-flow article,
.red-persona-type-cards article,
.red-persona-report-list article {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--persona-border);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.038));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 24px 70px rgba(0,0,0,.20);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.red-persona-summary article {
    padding: 22px;
}

.red-persona-summary article::before,
.red-persona-flow article::before,
.red-persona-type-cards article::before,
.red-persona-report-list article::before,
.red-persona-closing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--glow-x, 30%) var(--glow-y, 20%), rgba(61,240,255,.18), transparent 34%), linear-gradient(135deg, rgba(139,92,255,.12), transparent 54%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.red-persona-summary article:hover::before,
.red-persona-flow article:hover::before,
.red-persona-type-cards article:hover::before,
.red-persona-report-list article:hover::before,
.red-persona-closing-card:hover::before {
    opacity: 1;
}

.red-persona-summary strong,
.red-persona-flow strong,
.red-persona-type-cards strong,
.red-persona-report-list strong {
    position: relative;
    z-index: 2;
    display: block;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 22px;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.red-persona-summary span,
.red-persona-flow span,
.red-persona-type-cards p,
.red-persona-report-list span {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 12px;
    color: rgba(238,246,255,.64);
    font-size: 13px;
    line-height: 1.55;
}

.red-persona-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.red-btn--disabled {
    cursor: default;
    pointer-events: none;
    opacity: .86;
}

.red-persona-siri-stage {
    position: relative;
    z-index: 2;
    min-height: 620px;
    display: grid;
    place-items: center;
    border-radius: 46px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(61,240,255,.18), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.034));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: var(--persona-shadow), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(28px) saturate(1.15);
    -webkit-backdrop-filter: blur(28px) saturate(1.15);
    animation: redPersonaDeviceFloat 6.2s ease-in-out infinite alternate;
}

.red-persona-siri-stage::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, rgba(61,240,255,.20), rgba(139,92,255,.16), rgba(244,94,215,.14), rgba(79,247,200,.15), rgba(61,240,255,.20));
    filter: blur(36px);
    animation: redPersonaRotate 20s linear infinite;
}

.red-persona-siri-core {
    position: relative;
    width: min(390px, 72%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.red-persona-siri-wave,
.red-persona-siri-center {
    position: absolute;
    border-radius: 43% 57% 48% 52% / 51% 42% 58% 49%;
    mix-blend-mode: screen;
}

.red-persona-siri-wave--one {
    inset: 0;
    background: conic-gradient(from 30deg, #3df0ff, #5b75ff, #8b5cff, #f45ed7, #4ff7c8, #3df0ff);
    box-shadow: 0 0 90px rgba(61,240,255,.28), inset 0 0 48px rgba(255,255,255,.18);
    animation: redPersonaMorphOne 6s ease-in-out infinite alternate, redPersonaRotate 14s linear infinite;
}

.red-persona-siri-wave--two {
    inset: 10%;
    background: conic-gradient(from 210deg, rgba(79,247,200,.95), rgba(61,240,255,.28), rgba(139,92,255,.86), rgba(244,94,215,.76), rgba(79,247,200,.95));
    filter: blur(12px);
    opacity: .88;
    animation: redPersonaMorphTwo 5s ease-in-out infinite alternate-reverse, redPersonaRotateReverse 16s linear infinite;
}

.red-persona-siri-wave--three {
    inset: 22%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(61,240,255,.95) 18%, rgba(91,117,255,.65) 44%, rgba(244,94,215,.36) 74%, transparent 100%);
    filter: blur(7px);
    animation: redPersonaPulseCore 3.6s ease-in-out infinite;
}

.red-persona-siri-wave--four {
    inset: 36%;
    background: rgba(255,255,255,.36);
    filter: blur(18px);
    animation: redPulse 2.7s ease-in-out infinite;
}

.red-persona-siri-center {
    width: 17%;
    aspect-ratio: 1;
    background: #fff;
    box-shadow: 0 0 40px rgba(255,255,255,.72), 0 0 92px rgba(61,240,255,.56);
    animation: redPersonaCenterBeat 2.4s ease-in-out infinite;
}

.red-persona-siri-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 28px rgba(61,240,255,.08);
}

.red-persona-siri-orbit--outer {
    width: 76%;
    aspect-ratio: 1;
    animation: redPersonaRotate 32s linear infinite;
}

.red-persona-siri-orbit--middle {
    width: 58%;
    aspect-ratio: 1;
    animation: redPersonaRotateReverse 25s linear infinite;
}

.red-persona-siri-pulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(61,240,255,.18);
    opacity: 0;
    animation: redPersonaPulseRing 3.4s ease-out infinite;
}

.red-persona-siri-pulse--one { width: 34%; aspect-ratio: 1; }
.red-persona-siri-pulse--two { width: 46%; aspect-ratio: 1; animation-delay: 1.1s; }

.red-persona-live-card {
    position: absolute;
    min-width: 190px;
    padding: 15px 17px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(8, 14, 38, .56);
    box-shadow: 0 24px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(18px) saturate(1.18);
    -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.red-persona-live-card--one { top: 12%; left: 8%; }
.red-persona-live-card--two { right: 7%; bottom: 16%; }
.red-persona-live-card--three { left: 12%; bottom: 12%; }

.red-persona-live-card small,
.red-persona-console article small {
    display: block;
    color: rgba(238,246,255,.56);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.red-persona-live-card strong,
.red-persona-console article strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 20px;
    letter-spacing: -.04em;
}

.red-persona-flow-section .red-section-head h2 {
    color: #fff;
}

.red-persona-flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.red-persona-flow::before {
    content: "";
    position: absolute;
    top: 43px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(61,240,255,.50), rgba(139,92,255,.50), transparent);
    z-index: -1;
}

.red-persona-flow article {
    padding: 25px;
}

.red-persona-flow b {
    position: relative;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #3df0ff, #5b75ff 58%, #8b5cff);
    box-shadow: 0 16px 34px rgba(61,240,255,.18), 0 0 0 8px rgba(61,240,255,.06);
}

.red-persona-type-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.red-persona-type-cards article {
    padding: 26px;
}

.red-persona-type-cards span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-bottom: 18px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(61,240,255,.10);
    border: 1px solid rgba(61,240,255,.22);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.red-persona-report-grid {
    grid-template-columns: minmax(400px, .92fr) minmax(0, 1.08fr);
}

.red-persona-console {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.036));
    box-shadow: var(--persona-shadow), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.red-persona-console::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(circle at 50% 20%, rgba(61,240,255,.16), transparent 26%), radial-gradient(circle at 70% 85%, rgba(139,92,255,.14), transparent 28%);
    pointer-events: none;
}

.red-persona-console__top {
    position: relative;
    z-index: 2;
    height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.red-persona-console__top span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
}

.red-persona-console__top span:first-child {
    background: #3df0ff;
    box-shadow: 0 0 18px rgba(61,240,255,.70);
}

.red-persona-console__top em {
    margin-left: auto;
    color: rgba(238,246,255,.54);
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.red-persona-console__body {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    padding: 24px;
}

.red-persona-console__wave {
    height: 116px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 24px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.red-persona-console__wave span {
    width: 10px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3df0ff, #8b5cff, #f45ed7);
    box-shadow: 0 0 18px rgba(61,240,255,.28);
    animation: redPersonaBars 1.3s ease-in-out infinite alternate;
}

.red-persona-console__wave span:nth-child(2) { animation-delay: .14s; height: 58px; }
.red-persona-console__wave span:nth-child(3) { animation-delay: .28s; height: 82px; }
.red-persona-console__wave span:nth-child(4) { animation-delay: .42s; height: 58px; }
.red-persona-console__wave span:nth-child(5) { animation-delay: .56s; height: 38px; }

.red-persona-console article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.052);
    border: 1px solid rgba(255,255,255,.08);
}

.red-persona-report-list {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.red-persona-report-list article {
    padding: 18px 20px;
}

.red-persona-closing-section {
    padding-bottom: 104px;
}

.red-persona-closing-card {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(34px, 6vw, 76px);
    border-radius: 42px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 72% 18%, rgba(61,240,255,.18), transparent 32%),
        radial-gradient(circle at 24% 82%, rgba(139,92,255,.18), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
        rgba(8, 14, 38, .80);
    box-shadow: var(--persona-shadow), inset 0 1px 0 rgba(255,255,255,.11);
    text-align: left;
}

.red-persona-closing-orb {
    position: absolute;
    right: clamp(24px, 5vw, 72px);
    top: 50%;
    width: min(260px, 30vw);
    aspect-ratio: 1;
    transform: translateY(-50%);
    opacity: .72;
    pointer-events: none;
}

.red-persona-closing-orb span {
    position: absolute;
    inset: 0;
    border-radius: 45% 55% 50% 50% / 56% 44% 58% 42%;
    background: conic-gradient(from 30deg, rgba(61,240,255,.72), rgba(139,92,255,.62), rgba(244,94,215,.52), rgba(79,247,200,.60), rgba(61,240,255,.72));
    filter: blur(6px);
    animation: redPersonaMorphOne 6s ease-in-out infinite alternate, redPersonaRotate 15s linear infinite;
}

.red-persona-closing-orb span:nth-child(2) {
    inset: 18%;
    filter: blur(14px);
    animation: redPersonaMorphTwo 5s ease-in-out infinite alternate-reverse, redPersonaRotateReverse 18s linear infinite;
}

.red-persona-closing-orb span:nth-child(3) {
    inset: 38%;
    background: #fff;
    filter: blur(12px);
    animation: redPulse 2.4s ease-in-out infinite;
}

.red-persona-closing-card .red-btn {
    margin-top: 30px;
}

body[data-active-product="software"] [data-product-panel="persona"],
body[data-active-product="tag"] [data-product-panel="persona"],
body[data-active-product="app"] [data-product-panel="persona"] {
    display: none !important;
}

body[data-active-product="persona"] [data-product-panel="software"],
body[data-active-product="persona"] [data-product-panel="tag"],
body[data-active-product="persona"] [data-product-panel="app"] {
    display: none !important;
}

body[data-active-product="persona"] [data-product-panel="persona"] {
    display: block !important;
}

@keyframes redPersonaHeroFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(0, -18px, 0) scale(1.02); }
}

@keyframes redPersonaDeviceFloat {
    from { transform: translate3d(0, 0, 0) rotateY(0deg); }
    to { transform: translate3d(0, -16px, 0) rotateY(-2deg); }
}

@keyframes redPersonaRotate {
    to { transform: rotate(360deg); }
}

@keyframes redPersonaRotateReverse {
    to { transform: rotate(-360deg); }
}

@keyframes redPersonaMorphOne {
    0% { border-radius: 42% 58% 50% 50% / 52% 46% 54% 48%; transform: scale(1); }
    50% { border-radius: 55% 45% 43% 57% / 42% 55% 45% 58%; transform: scale(1.035); }
    100% { border-radius: 48% 52% 60% 40% / 58% 42% 52% 48%; transform: scale(.985); }
}

@keyframes redPersonaMorphTwo {
    0% { border-radius: 54% 46% 42% 58% / 46% 56% 44% 54%; transform: scale(.96); }
    100% { border-radius: 40% 60% 55% 45% / 58% 42% 60% 40%; transform: scale(1.06); }
}

@keyframes redPersonaPulseCore {
    0%, 100% { transform: scale(.96); opacity: .72; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes redPersonaCenterBeat {
    0%, 100% { transform: scale(.88); opacity: .72; }
    50% { transform: scale(1.14); opacity: 1; }
}

@keyframes redPersonaPulseRing {
    0% { transform: scale(.86); opacity: .62; }
    100% { transform: scale(1.55); opacity: 0; }
}

@keyframes redPersonaLineWave {
    0%, 100% { transform: scaleX(.54); opacity: .38; }
    50% { transform: scaleX(1); opacity: .88; }
}

@keyframes redPersonaAmbientFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(28px, -22px, 0) scale(1.08); }
}

@keyframes redPersonaBars {
    from { transform: scaleY(.55); opacity: .62; }
    to { transform: scaleY(1.18); opacity: 1; }
}

@media only screen and (max-width: 1180px) {
    body[data-active-product="persona"] .red-hero__persona-signal {
        width: min(430px, 70vw);
    }

    .red-persona-hero-grid,
    .red-persona-types-grid,
    .red-persona-report-grid {
        grid-template-columns: 1fr;
    }

    .red-persona-siri-stage {
        width: min(620px, 86vw);
        min-height: 560px;
        margin: 0 auto;
    }

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

@media only screen and (max-width: 760px) {
    body[data-active-product="persona"] .red-hero__visual {
        display: none !important;
    }

    .red-persona-main .red-section-shell {
        width: min(100% - 30px, 680px);
    }

    .red-persona-section {
        padding: 66px 0;
    }

    .red-persona-hero-section.first-section {
        padding-top: 74px !important;
    }

    .red-persona-copy h2,
    .red-persona-closing-card h2 {
        font-size: clamp(38px, 11vw, 58px);
    }

    .red-persona-summary,
    .red-persona-flow,
    .red-persona-type-cards {
        grid-template-columns: 1fr;
    }

    .red-persona-flow::before {
        display: none;
    }

    .red-persona-siri-stage {
        min-height: 460px;
        border-radius: 34px;
    }

    .red-persona-live-card {
        position: relative;
        inset: auto !important;
        min-width: 0;
        width: calc(100% - 36px);
        margin: 0 auto 10px;
    }

    .red-persona-console article {
        display: block;
    }

    .red-persona-console article strong {
        margin-top: 8px;
    }

    .red-persona-closing-orb {
        opacity: .28;
        right: -38px;
    }
}



/* =========================================================
   RED App - Extensión móvil de RED Software
   Agregado sin incluir RED App en el login
   ========================================================= */

.red-product-strip--four {
    width: min(1280px, calc(100% - 72px)) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.red-header-products {
    gap: 18px !important;
}

/* ===== RED App: adaptación del header y hero global ===== */
body[data-active-product="app"] #header-fixed.red-topbar {
    background: linear-gradient(180deg, rgba(54, 184, 200, .82), rgba(82, 210, 184, .36) 58%, rgba(82, 210, 184, 0)) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: none !important;
    transition: background .35s ease, border .35s ease, backdrop-filter .35s ease, box-shadow .35s ease !important;
}

body[data-active-product="app"] #header-fixed.red-topbar.red-topbar--scrolled {
    background: linear-gradient(180deg, rgba(247, 255, 252, .92), rgba(240, 252, 255, .76)) !important;
    border-bottom: 1px solid rgba(57, 184, 200, .18) !important;
    box-shadow: 0 18px 50px rgba(67, 146, 174, .12) !important;
    backdrop-filter: blur(22px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}

body[data-active-product="app"] .red-brand__mark {
    filter: drop-shadow(0 0 18px rgba(118, 87, 220, .34)) !important;
}

body[data-active-product="app"] .red-brand__name {
    color: #fff !important;
    text-shadow: 0 12px 28px rgba(17, 85, 109, .25) !important;
}

body[data-active-product="app"] #header-fixed.red-topbar.red-topbar--scrolled .red-brand__name {
    color: #17485a !important;
    text-shadow: none !important;
}

body[data-active-product="app"] .red-header-products a {
    color: rgba(255,255,255,.78) !important;
}

body[data-active-product="app"] #header-fixed.red-topbar.red-topbar--scrolled .red-header-products a {
    color: rgba(23,72,90,.58) !important;
}

body[data-active-product="app"] .red-header-products a:hover,
body[data-active-product="app"] .red-header-products a.is-active {
    color: #fff !important;
}

body[data-active-product="app"] #header-fixed.red-topbar.red-topbar--scrolled .red-header-products a:hover,
body[data-active-product="app"] #header-fixed.red-topbar.red-topbar--scrolled .red-header-products a.is-active {
    color: #17485a !important;
}

body[data-active-product="app"] .red-header-products a::after {
    background: linear-gradient(90deg, transparent, #52d2b8, #7657dc, transparent) !important;
}

body[data-active-product="app"] .red-login-launcher {
    background: linear-gradient(135deg, #7657dc, #38b8c8) !important;
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: 0 18px 42px rgba(68, 143, 201, .24), inset 0 1px 0 rgba(255,255,255,.26) !important;
}

body[data-active-product="app"] .red-login-card {
    border-color: rgba(255,255,255,.42) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(247,255,252,.72)) !important;
    box-shadow: 0 24px 74px rgba(49, 121, 156, .18), inset 0 1px 0 rgba(255,255,255,.70) !important;
    color: #17485a !important;
}

body[data-active-product="app"] .red-login-card::before {
    background: linear-gradient(135deg, rgba(82,210,184,.55), transparent 40%, rgba(118,87,220,.34)) !important;
    opacity: .65 !important;
}

body[data-active-product="app"] .red-login-card__head strong,
body[data-active-product="app"] .red-login-product strong {
    color: #17485a !important;
}

body[data-active-product="app"] .red-login-eyebrow,
body[data-active-product="app"] .red-login-product small,
body[data-active-product="app"] .red-login-policy {
    color: rgba(23,72,90,.58) !important;
}

body[data-active-product="app"] .red-login-close {
    color: rgba(23,72,90,.72) !important;
    border-color: rgba(56,184,200,.20) !important;
    background: rgba(255,255,255,.56) !important;
}

body[data-active-product="app"] .red-login-close:hover,
body[data-active-product="app"] .red-login-close:focus {
    color: #fff !important;
    background: linear-gradient(135deg, #52d2b8, #7657dc) !important;
}

body[data-active-product="app"] .red-login-tabs {
    border-color: rgba(56,184,200,.14) !important;
    background: rgba(255,255,255,.46) !important;
}

body[data-active-product="app"] .red-login-tab {
    color: rgba(23,72,90,.58) !important;
}

body[data-active-product="app"] .red-login-tab:hover,
body[data-active-product="app"] .red-login-tab.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #52d2b8, #7657dc) !important;
    box-shadow: 0 12px 24px rgba(73, 154, 199, .16) !important;
}

body[data-active-product="app"] .red-login-product {
    border-color: rgba(56,184,200,.14) !important;
    background: radial-gradient(circle at 14% 24%, rgba(82,210,184,.28), transparent 42%), rgba(255,255,255,.48) !important;
}

body[data-active-product="app"] .red-input-wrap span {
    color: rgba(23,72,90,.58) !important;
}

body[data-active-product="app"] .red-login-form input[type="text"],
body[data-active-product="app"] .red-login-form input[type="password"] {
    color: #17485a !important;
    border-color: rgba(56,184,200,.18) !important;
    background: rgba(255,255,255,.72) !important;
}

body[data-active-product="app"] .red-login-form input[type="submit"] {
    background: linear-gradient(135deg, #7657dc, #38b8c8) !important;
    box-shadow: 0 14px 30px rgba(68, 143, 201, .22) !important;
}

/* Hero fijo cuando se activa RED App */
body[data-active-product="app"] .red-hero {
    background: linear-gradient(135deg, #52d2b8 0%, #38b8c8 46%, #6e7ee8 100%) !important;
}

body[data-active-product="app"] .red-hero__bg img {
    opacity: 0 !important;
    filter: none !important;
}

body[data-active-product="app"] .red-hero__overlay {
    background:
        radial-gradient(circle at 78% 20%, rgba(255,255,255,.38), transparent 24%),
        radial-gradient(circle at 18% 78%, rgba(255,255,255,.20), transparent 32%),
        linear-gradient(90deg, rgba(27,156,153,.20) 0%, rgba(61,184,200,.10) 46%, rgba(107,126,232,.20) 100%) !important;
}

body[data-active-product="app"] .red-hero__grid {
    opacity: .16 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px) !important;
}

body[data-active-product="app"] .red-hero__copy {
    position: relative !important;
    z-index: 5 !important;
}

body[data-active-product="app"] .red-hero__kicker {
    color: rgba(255,255,255,.92) !important;
    text-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
}

body[data-active-product="app"] .red-hero__kicker::before {
    background: linear-gradient(90deg, #fff, rgba(255,255,255,.15)) !important;
    box-shadow: none !important;
}

body[data-active-product="app"] .red-hero h1 {
    color: #fff !important;
    text-shadow: 0 22px 60px rgba(20,70,90,.24) !important;
}

body[data-active-product="app"] .red-hero h1::after {
    background: linear-gradient(90deg, #fff, rgba(255,255,255,.38), transparent) !important;
}

body[data-active-product="app"] .red-hero__lead {
    color: rgba(255,255,255,.94) !important;
    text-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}

body[data-active-product="app"] .red-btn--primary {
    background: linear-gradient(135deg, #7657dc, #38b8c8) !important;
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: 0 20px 42px rgba(72,62,190,.22) !important;
}

body[data-active-product="app"] .red-btn--ghost {
    color: #eff8ff !important;
    border-color: rgba(255,255,255,.42) !important;
    background: rgba(44, 79, 95, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

body[data-active-product="app"] .red-btn--ghost:hover {
    background: rgba(41, 59, 125, 0.25) !important;
    border-color: rgba(255,255,255,.62) !important;
    color: #222222;
}

body[data-active-product="app"] .red-hero__proof article {
    border-color: rgba(255,255,255,.30) !important;
    background: rgba(255,255,255,.17) !important;
    box-shadow: 0 18px 44px rgba(20,70,90,.12), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

body[data-active-product="app"] .red-hero__proof strong,
body[data-active-product="app"] .red-hero__proof span {
    color: #fff !important;
}

body[data-active-product="app"] .red-hero__visual {
    position: relative !important;
    min-height: 650px !important;
    display: grid !important;
    place-items: end center !important;
    isolation: isolate !important;
}

body[data-active-product="app"] .red-hero__visual .red-device,
body[data-active-product="app"] .red-hero__visual .red-orbit,
body[data-active-product="app"] .red-hero__visual .red-scan-line {
    display: none !important;
}

.red-hero__app-person {
    display: none;
}

body[data-active-product="app"] .red-hero__app-person {
    position: fixed !important;
    z-index: 3 !important;
    right: -10vw !important;
    bottom: -25vh !important;
    height: 90vh !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    pointer-events: none !important;
    filter: drop-shadow(0 34px 56px rgba(35,73,108,.22)) !important;
    animation: redAppPersonFloat 5.6s ease-in-out infinite alternate !important;
}



body[data-active-product="app"] .red-hero__visual::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    right: 0 !important;
    bottom: -4% !important;
    width: 72% !important;
    height: 64% !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 52% 42%, rgba(255,255,255,.34), rgba(255,255,255,.09) 34%, transparent 68%) !important;
    filter: blur(2px) !important;
    pointer-events: none !important;
}

body[data-active-product="app"] .red-hero__visual::after {
    content: "RED App" !important;
    position: absolute !important;
    z-index: 1 !important;
    left: 100% !important;
    right: auto !important;
    top: 7% !important;
    color: rgba(255,255,255,.24) !important;
    font-family: "Poppins", "Open Sans", sans-serif !important;
    font-size: clamp(76px, 9vw, 150px) !important;
    font-weight: 900 !important;
    letter-spacing: -.08em !important;
    line-height: .82 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    will-change: transform !important;
    animation: redAppTextLeft 16s linear infinite !important;
}

body[data-active-product="app"] .red-hero::after {
    content: "Tu edificio en el celular" !important;
    position: absolute !important;
    z-index: 1 !important;
    left: -120% !important;
    right: auto !important;
    bottom: 4% !important;
    color: rgba(255,255,255,.20) !important;
    font-family: "Poppins", "Open Sans", sans-serif !important;
    font-size: clamp(54px, 7vw, 112px) !important;
    font-weight: 800 !important;
    letter-spacing: -.06em !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    will-change: transform !important;
    animation: redAppTextRight 18s linear infinite !important;
}

/* ===== Sección RED App interna ===== */
.red-product-view--app {
    --app-aqua: #52d2b8;
    --app-cyan: #38b8c8;
    --app-blue: #6e7ee8;
    --app-violet: #7657dc;
    --app-ink: #17485a;
    --app-muted: rgba(23,72,90,.68);
    --app-soft: #f5fffc;
    --app-card: rgba(255,255,255,.78);
    --app-border: rgba(56,184,200,.18);
    position: relative;
    z-index: 6;
    background: linear-gradient(180deg, #f7fffc 0%, #eefbff 46%, #f7f4ff 100%);
}

.red-app-main .red-section-shell {
    width: min(1240px, calc(100% - 42px));
    margin: 0 auto;
}

.red-app-section {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 8vw, 128px) 0;
    background:
        radial-gradient(circle at 14% 16%, rgba(82,210,184,.30), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(118,87,220,.18), transparent 28%),
        linear-gradient(180deg, #f7fffc 0%, #eefbff 100%);
    border-top: 1px solid rgba(56,184,200,.12);
}

.red-app-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(56,184,200,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,184,200,.08) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .38;
    pointer-events: none;
    mask-image: radial-gradient(circle at 48% 35%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 48% 35%, #000 0%, transparent 72%);
}

.red-app-section > * {
    position: relative;
    z-index: 2;
}

.red-app-hero-section.first-section {
    padding-top: clamp(110px, 9vw, 150px) !important;
    padding-bottom: clamp(92px, 9vw, 140px) !important;
    background:
        radial-gradient(circle at 18% 22%, rgba(82,210,184,.34), transparent 32%),
        radial-gradient(circle at 84% 20%, rgba(110,126,232,.22), transparent 31%),
        linear-gradient(135deg, #f5fffc 0%, #edfaff 52%, #f4f1ff 100%);
}

.red-app-hero-bg,
.red-app-orb,
.red-app-wave {
    position: absolute;
    pointer-events: none;
}

.red-app-hero-bg {
    inset: 0;
    overflow: hidden;
}

.red-app-orb {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    filter: blur(58px);
    opacity: .38;
    background: var(--app-aqua);
    animation: redAppOrb 8s ease-in-out infinite alternate;
}

.red-app-orb--one {
    left: -80px;
    top: 12%;
}

.red-app-orb--two {
    right: -90px;
    bottom: 12%;
    background: var(--app-blue);
    animation-delay: -2s;
}

.red-app-wave {
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    opacity: .34;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(82,210,184,.28), transparent 44%),
        radial-gradient(ellipse at 70% 100%, rgba(118,87,220,.20), transparent 42%);
    animation: redAppWave 10s linear infinite alternate;
}

.red-app-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    align-items: center;
    gap: clamp(34px, 6vw, 86px);
}

.red-app-main .red-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--app-violet);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.red-app-main .red-section-kicker::before {
    content: "";
    width: 38px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-aqua), var(--app-violet));
}

.red-app-copy h2,
.red-app-feature-copy h2,
.red-app-ecosystem-copy h2,
.red-section-head h2 {
    margin: 0;
    color: var(--app-ink);
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: clamp(46px, 6.5vw, 86px);
    line-height: .92;
    letter-spacing: -.075em;
    font-weight: 900;
}

.red-app-copy p,
.red-app-feature-copy p,
.red-app-ecosystem-copy p,
.red-section-head p {
    max-width: 690px;
    margin: 26px 0 0;
    color: var(--app-muted);
    font-size: 17px;
    line-height: 1.72;
    font-weight: 600;
}

.red-app-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
    margin-top: 32px;
}

.red-app-quick-actions article,
.red-app-flow-card,
.red-app-feature-list article,
.red-app-ecosystem-points article {
    position: relative;
    overflow: hidden;
    padding: 23px;
    border: 1px solid var(--app-border);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.54));
    box-shadow: 0 18px 48px rgba(64, 144, 178, .10), inset 0 1px 0 rgba(255,255,255,.74);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.red-app-quick-actions article::after,
.red-app-flow-card::after,
.red-app-feature-list article::after,
.red-app-ecosystem-points article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(82,210,184,.20), transparent 34%);
    opacity: .9;
    pointer-events: none;
}

.red-app-quick-actions article:hover,
.red-app-flow-card:hover,
.red-app-feature-list article:hover,
.red-app-ecosystem-points article:hover {
    border-color: rgba(118,87,220,.26);
    box-shadow: 0 24px 60px rgba(64, 144, 178, .16), inset 0 1px 0 rgba(255,255,255,.82);
}

/* =========================================================
   Hover por producto - evita rojo global fuera de RED Software
   ========================================================= */

/* RED App */
.red-app-section .red-hover-tilt::before,
.red-app-main .red-hover-tilt::before {
    background: radial-gradient(
        circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(82, 210, 184, .22),
        transparent 38%
    ) !important;
}

.red-app-section .red-hover-tilt:hover,
.red-app-main .red-hover-tilt:hover {
    border-color: rgba(82, 210, 184, .38) !important;
    box-shadow:
        0 24px 60px rgba(64, 144, 178, .18),
        0 0 0 1px rgba(82, 210, 184, .10),
        inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

/* RED Tag */
.red-tag-section .red-hover-tilt::before,
.red-tag-main .red-hover-tilt::before {
    background:
        radial-gradient(
            circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(54, 244, 155, .24),
            transparent 38%
        ),
        linear-gradient(135deg, rgba(113, 240, 255, .12), transparent 58%) !important;
}

.red-tag-section .red-hover-tilt:hover,
.red-tag-main .red-hover-tilt:hover {
    border-color: rgba(54, 244, 155, .46) !important;
    box-shadow:
        0 34px 110px rgba(0, 0, 0, .44),
        0 0 0 1px rgba(113, 240, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

/* RED Persona */
.red-persona-section .red-hover-tilt::before,
.red-persona-main .red-hover-tilt::before {
    background:
        radial-gradient(
            circle at var(--glow-x, 50%) var(--glow-y, 50%),
            rgba(61, 240, 255, .22),
            transparent 36%
        ),
        linear-gradient(135deg, rgba(139, 92, 255, .16), rgba(244, 94, 215, .10), transparent 62%) !important;
}

.red-persona-section .red-hover-tilt:hover,
.red-persona-main .red-hover-tilt:hover {
    border-color: rgba(61, 240, 255, .42) !important;
    box-shadow:
        0 30px 90px rgba(5, 9, 28, .34),
        0 0 0 1px rgba(139, 92, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.red-app-quick-actions b,
.red-app-feature-list b {
    display: block;
    color: var(--app-ink);
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -.05em;
}

.red-app-quick-actions span,
.red-app-feature-list span,
.red-app-ecosystem-points span {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 10px;
    color: var(--app-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.red-adaptive-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.red-app-main .red-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--app-violet), var(--app-cyan)) !important;
    border-color: rgba(255,255,255,.55) !important;
    box-shadow: 0 20px 42px rgba(74, 138, 206, .22) !important;
}

.red-app-main .red-btn--ghost {
    color: var(--app-ink) !important;
    background: rgba(255,255,255,.64) !important;
    border-color: rgba(56,184,200,.22) !important;
    box-shadow: 0 16px 34px rgba(64,144,178,.08) !important;
}

/* RED App: imágenes de celulares, no pantallas armadas con CSS */
.red-app-phone-stage {
    position: relative;
    min-height: 690px;
    perspective: 1200px;
    isolation: isolate;
}

.red-app-phone-backdrop {
    position: absolute;
    inset: 10% 3% 0 6%;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 48% 42%, rgba(82,210,184,.32), transparent 40%),
        radial-gradient(circle at 62% 62%, rgba(118,87,220,.18), transparent 44%);
    filter: blur(10px);
}

.red-app-phone {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.red-app-phone img,
.red-app-feature-image-frame img,
.red-app-ecosystem-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 30px 46px rgba(31, 95, 131, .20));
}

.red-app-phone span {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    color: var(--app-ink);
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 38px rgba(64,144,178,.12);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.red-app-phone--main {
    width: min(340px, 38vw);
    height: 690px;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateZ(80px);
    animation: redAppPhoneMain 6s ease-in-out infinite alternate;
}

.red-app-phone--left {
    width: min(340px, 38vw);
    height: 540px;
    left: -50px;
    top: 90px;
    transform: rotate(-7deg) scale(.92);
    animation: redAppPhoneLeft 6.8s ease-in-out infinite alternate;
}

.red-app-phone--right {
    width: min(340px, 38vw);
    height: 540px;
    right: -50px;
    top: 92px;
    transform: rotate(7deg) scale(.94);
    animation: redAppPhoneRight 6.4s ease-in-out infinite alternate;
}

.red-app-floating-card {
    position: absolute;
    z-index: 4;
    min-width: 220px;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.70);
    border-radius: 22px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 24px 52px rgba(54, 128, 164, .16), inset 0 1px 0 rgba(255,255,255,.84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: redAppFloatCard 4.8s ease-in-out infinite alternate;
}

.red-app-floating-card--one {
    left: 2%;
    bottom: 78px;
}

.red-app-floating-card--two {
    right: 5%;
    bottom: 118px;
    animation-delay: -1.4s;
}

.red-app-floating-card small {
    display: block;
    color: var(--app-violet);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.red-app-floating-card strong {
    display: block;
    margin-top: 6px;
    color: var(--app-ink);
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: -.05em;
}

/* Flujo */
.red-app-flow-section {
    background:
        radial-gradient(circle at 86% 10%, rgba(82,210,184,.24), transparent 30%),
        linear-gradient(180deg, #eefbff 0%, #f7fffc 100%);
}

.red-section-head--split {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(300px, .55fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    margin-bottom: 34px;
}

.red-app-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

.red-app-flow-card span:first-child,
.red-app-ecosystem-points b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 22px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--app-aqua), var(--app-violet));
    box-shadow: 0 14px 28px rgba(74, 138, 206, .18);
    font-size: 13px;
    font-weight: 900;
}

.red-app-flow-card h3 {
    margin: 0;
    color: var(--app-ink);
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.red-app-flow-card p {
    margin: 15px 0 0;
    color: var(--app-muted);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 700;
}

/* Funciones */
.red-app-features-section {
    background:
        radial-gradient(circle at 16% 24%, rgba(118,87,220,.15), transparent 30%),
        radial-gradient(circle at 84% 74%, rgba(82,210,184,.25), transparent 32%),
        linear-gradient(180deg, #f7fffc 0%, #f4f1ff 100%);
}

.red-app-feature-layout {
    display: grid;
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: center;
}

.red-app-feature-phone {
    position: relative;
    min-height: 670px;
    display: grid;
    place-items: center;
}

.red-app-feature-image-frame {
    position: relative;
    width: min(430px, 86vw);
    height: 660px;
    display: grid;
    place-items: center;
}

.red-app-feature-image-frame::before {
    content: "";
    position: absolute;
    inset: 8% -12% 2% -10%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 46% 42%, rgba(82,210,184,.30), transparent 42%),
        radial-gradient(circle at 66% 66%, rgba(118,87,220,.18), transparent 46%);
    filter: blur(8px);
}

.red-app-image-badge {
    position: absolute;
    right: -18px;
    bottom: 76px;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    color: var(--app-ink);
    background: rgba(255,255,255,.78);
    box-shadow: 0 18px 42px rgba(64,144,178,.14);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.red-app-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 13px;
    margin-top: 32px;
}

/* Ecosistema rediseñado con imágenes */
.red-app-ecosystem-section {
    padding-bottom: clamp(92px, 9vw, 150px);
    background:
        radial-gradient(circle at 24% 18%, rgba(82,210,184,.30), transparent 31%),
        radial-gradient(circle at 78% 22%, rgba(110,126,232,.22), transparent 32%),
        linear-gradient(135deg, #f7fffc 0%, #edfaff 50%, #f4f1ff 100%);
}

.red-app-ecosystem-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
    gap: clamp(34px, 6vw, 90px);
    align-items: center;
    padding: clamp(32px, 5vw, 70px);
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 46px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
        radial-gradient(circle at 84% 22%, rgba(82,210,184,.22), transparent 38%);
    box-shadow: 0 32px 90px rgba(55, 134, 176, .14), inset 0 1px 0 rgba(255,255,255,.88);
}

.red-app-ecosystem-card::before {
    content: "";
    position: absolute;
    inset: auto -12% -28% auto;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82,210,184,.30), transparent 66%);
    pointer-events: none;
}

.red-app-ecosystem-points {
    display: grid;
    gap: 12px;
    margin: 30px 0 30px;
}

.red-app-ecosystem-points article {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 15px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 24px;
}

.red-app-ecosystem-points b {
    grid-row: 1 / 3;
    margin: 0;
}

.red-app-ecosystem-points strong {
    color: var(--app-ink);
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 20px;
    letter-spacing: -.04em;
}

.red-app-ecosystem-points span {
    margin-top: 4px;
}

.red-app-ecosystem-visual {
    position: relative;
    min-height: 610px;
    isolation: isolate;
}

.red-app-ecosystem-photo {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
}

.red-app-ecosystem-photo--person {
    right: -5%;
    bottom: 1%;
    width: min(360px, 36vw);
    height: 520px;
    z-index: 4;
}

.red-app-ecosystem-photo--phone {
    left: 3%;
    bottom: -4%;
    width: min(360px, 36vw);
    height: 520px;
    transform: rotate(-6deg);
    animation: redAppPhoneLeft 6s ease-in-out infinite alternate;
}

.red-app-ecosystem-photo--panel {
    right: 7%;
    top: 10%;
    width: min(410px, 42vw);
    height: 300px;
    transform: rotate(3deg);
    animation: redAppFloatCard 5.4s ease-in-out infinite alternate;
}

.red-app-ecosystem-photo--panel img {
    border-radius: 32px;
    object-fit: cover;
    background: rgba(255,255,255,.52);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 30px 70px rgba(55, 134, 176, .18);
}

.red-app-ecosystem-ribbon {
    position: absolute;
    left: 7%;
    right: 8%;
    bottom: 44px;
    z-index: 5;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 999px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 24px 56px rgba(64,144,178,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.red-app-ecosystem-ribbon span {
    color: var(--app-ink);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    white-space: nowrap;
}

.red-app-ecosystem-ribbon i {
    display: block;
    width: 52px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-aqua), var(--app-violet));
}

/* Estado de panel activo */
.red-product-view--app.is-hidden {
    display: none;
}

body[data-active-product="app"] [data-product-panel="app"] {
    display: block !important;
}

/* Animaciones RED App */
@keyframes redAppPersonFloat {
    from { transform: translate3d(0, 0, 0) rotate(-1deg); }
    to { transform: translate3d(0, -16px, 0) rotate(1deg); }
}

@keyframes redAppTextLeft {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-100vw - 140%), 0, 0); }
}

@keyframes redAppTextRight {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(100vw + 160%), 0, 0); }
}

@keyframes redAppOrb {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(28px,-22px,0) scale(1.08); }
}

@keyframes redAppWave {
    from { transform: translateX(-2%); }
    to { transform: translateX(2%); }
}

@keyframes redAppPhoneMain {
    from { transform: translateX(-50%) translateZ(80px) translateY(0) rotate(0deg); }
    to { transform: translateX(-50%) translateZ(80px) translateY(-18px) rotate(1deg); }
}

@keyframes redAppPhoneLeft {
    from { transform: rotate(-7deg) scale(.92) translateY(0); }
    to { transform: rotate(-4deg) scale(.94) translateY(18px); }
}

@keyframes redAppPhoneRight {
    from { transform: rotate(7deg) scale(.94) translateY(0); }
    to { transform: rotate(4deg) scale(.96) translateY(-16px); }
}

@keyframes redAppFloatCard {
    from { transform: translate3d(0,0,0) rotate(0deg); }
    to { transform: translate3d(0,-18px,0) rotate(1deg); }
}

/* Responsive RED App */
@media only screen and (max-width: 1180px) {
    .red-product-strip--four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        bottom: 18px !important;
    }

    .red-app-hero-grid,
    .red-app-feature-layout,
    .red-app-ecosystem-card,
    .red-section-head--split {
        grid-template-columns: 1fr;
    }

    .red-app-phone-stage {
        min-height: 660px;
    }

    .red-app-copy h2,
    .red-app-feature-copy h2,
    .red-app-ecosystem-copy h2,
    .red-section-head h2 {
        font-size: clamp(40px, 8vw, 70px);
    }

    .red-app-ecosystem-visual {
        min-height: 560px;
    }

    .red-app-ecosystem-photo--person {
        right: 0;
        width: min(330px, 42vw);
    }

    .red-app-ecosystem-photo--phone {
        left: 4%;
        width: min(260px, 34vw);
    }

    .red-app-ecosystem-photo--panel {
        width: min(380px, 48vw);
    }
}

@media only screen and (max-width: 760px) {
    body[data-active-product="app"] #header-fixed.red-topbar {
        background: linear-gradient(180deg, rgba(247,255,252,.94), rgba(247,255,252,.66)) !important;
    }

    body[data-active-product="app"] .red-brand__name,
    body[data-active-product="app"] .red-header-products a {
        color: #17485a !important;
        text-shadow: none !important;
    }

    body[data-active-product="app"] .red-hero__visual {
        display: grid !important;
        min-height: 360px !important;
    }

    body[data-active-product="app"] .red-hero__app-person {
        right: -18% !important;
        bottom: -6% !important;
        width: min(420px, 82vw) !important;
    }

    .red-product-strip--four {
        width: calc(100% - 32px) !important;
        grid-template-columns: 1fr !important;
    }

    .red-app-main .red-section-shell {
        width: min(100% - 30px, 680px);
    }

    .red-app-section {
        padding: 68px 0;
    }

    .red-app-hero-section.first-section {
        padding-top: 74px !important;
    }

    .red-app-quick-actions,
    .red-app-flow-grid,
    .red-app-feature-list {
        grid-template-columns: 1fr;
    }

    .red-app-phone-stage {
        min-height: 560px;
        overflow: hidden;
    }

    .red-app-phone--main {
        width: 260px;
        height: 520px;
        left: 50%;
        top: 0;
    }

    .red-app-phone--left,
    .red-app-phone--right {
        display: none;
    }

    .red-app-floating-card {
        min-width: 190px;
        padding: 14px 15px;
    }

    .red-app-floating-card--one {
        left: 0;
        bottom: 92px;
    }

    .red-app-floating-card--two {
        right: 0;
        bottom: 36px;
    }

    .red-app-feature-phone {
        min-height: 560px;
    }

    .red-app-feature-image-frame {
        width: min(330px, 88vw);
        height: 540px;
    }

    .red-app-ecosystem-card {
        padding: 28px;
        border-radius: 32px;
    }

    .red-app-ecosystem-visual {
        min-height: 520px;
    }

    .red-app-ecosystem-photo--person {
        right: -18%;
        bottom: -8%;
        width: 280px;
        height: 430px;
    }

    .red-app-ecosystem-photo--phone {
        left: -3%;
        width: 210px;
        height: 420px;
    }

    .red-app-ecosystem-photo--panel {
        right: -4%;
        top: 18%;
        width: 250px;
        height: 190px;
    }

    .red-app-ecosystem-ribbon {
        left: 0;
        right: 0;
        bottom: 22px;
        gap: 8px;
        padding: 10px 12px;
    }

    .red-app-ecosystem-ribbon i {
        width: 24px;
    }

    .red-app-ecosystem-ribbon span {
        font-size: 9px;
    }
}


/* =========================================================
   RED Persona - cabeza digital amable con ojitos vivos
   Solo afecta RED Persona
   ========================================================= */

body[data-active-product="persona"] .red-hero__persona-signal {
    width: min(560px, 44vw) !important;
    aspect-ratio: 1 !important;
}

.red-persona-digital-head {
    --persona-aqua: #3df0ff;
    --persona-cyan: #70f5ff;
    --persona-blue: #5b75ff;
    --persona-violet: #8b5cff;
    --persona-pink: #f45ed7;
    position: relative;
    width: min(430px, 76%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
    transform-style: preserve-3d;
    filter: drop-shadow(0 40px 78px rgba(0, 0, 0, .34));
    animation: redPersonaHeadFloat 6.8s ease-in-out infinite alternate;
}

.red-persona-digital-head--hero {
    width: 76%;
}

.red-persona-digital-head--main {
    width: min(440px, 74%);
}

.red-persona-digital-head::before,
.red-persona-digital-head::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.red-persona-digital-head::before {
    inset: -13%;
    background: radial-gradient(circle, rgba(61,240,255,.20), rgba(139,92,255,.12) 42%, transparent 72%);
    filter: blur(18px);
    animation: redPersonaAuraBreath 4.8s ease-in-out infinite alternate;
}

.red-persona-digital-head::after {
    inset: 8%;
    background:
        repeating-conic-gradient(from 0deg, rgba(255,255,255,.24) 0deg 1deg, transparent 1deg 6deg),
        radial-gradient(circle, transparent 58%, rgba(255,255,255,.12) 59%, transparent 61%);
    opacity: .32;
    mix-blend-mode: screen;
    mask-image: radial-gradient(circle, transparent 48%, #000 50%, #000 62%, transparent 66%);
    -webkit-mask-image: radial-gradient(circle, transparent 48%, #000 50%, #000 62%, transparent 66%);
    animation: redPersonaRotate 30s linear infinite;
}

.red-persona-head-layer,
.red-persona-head-light,
.red-persona-head-halo,
.red-persona-head-scan {
    position: absolute;
    pointer-events: none;
}

.red-persona-head-layer {
    inset: 0;
    border-radius: 46% 54% 47% 53% / 50% 42% 58% 50%;
    mix-blend-mode: screen;
}

.red-persona-head-layer--back {
    inset: 1% -2% -2% 0;
    background:
        radial-gradient(circle at 38% 38%, rgba(255,255,255,.42), rgba(112,245,255,.28) 20%, transparent 38%),
        conic-gradient(from 18deg, rgba(61,240,255,.95), rgba(91,117,255,.82), rgba(139,92,255,.92), rgba(244,94,215,.90), rgba(61,240,255,.95));
    box-shadow:
        0 0 82px rgba(61,240,255,.34),
        0 0 120px rgba(139,92,255,.22),
        inset 0 0 48px rgba(255,255,255,.18);
    opacity: .92;
    filter: blur(.2px);
    animation: redPersonaHeadMorphOne 7.4s ease-in-out infinite alternate, redPersonaRotate 28s linear infinite;
}

.red-persona-head-layer--skin {
    inset: 7% 4% 5% 5%;
    border-radius: 54% 46% 57% 43% / 43% 50% 50% 57%;
    background:
        radial-gradient(circle at 48% 47%, rgba(255,255,255,.86) 0 10%, rgba(209,252,255,.62) 19%, rgba(112,245,255,.28) 38%, rgba(139,92,255,.38) 62%, rgba(244,94,215,.18) 82%, transparent 100%),
        conic-gradient(from 210deg, rgba(112,245,255,.62), rgba(91,117,255,.44), rgba(244,94,215,.54), rgba(61,240,255,.46), rgba(112,245,255,.62));
    filter: blur(2px);
    opacity: .96;
    animation: redPersonaHeadMorphTwo 6.2s ease-in-out infinite alternate-reverse, redPersonaHeadDrift 9s ease-in-out infinite alternate;
}

.red-persona-head-layer--veil {
    inset: -4% 5% 8% -3%;
    border-radius: 58% 42% 49% 51% / 57% 37% 63% 43%;
    background:
        linear-gradient(128deg, rgba(255,255,255,.12), transparent 36%),
        radial-gradient(circle at 22% 34%, rgba(244,94,215,.48), transparent 34%),
        radial-gradient(circle at 74% 40%, rgba(61,240,255,.50), transparent 38%);
    border: 1px solid rgba(255,255,255,.16);
    opacity: .74;
    filter: blur(.4px);
    animation: redPersonaVeil 5.7s ease-in-out infinite alternate;
}

.red-persona-head-layer--core {
    inset: 24%;
    border-radius: 50% 50% 48% 52% / 52% 49% 51% 48%;
    background: radial-gradient(circle, rgba(255,255,255,.98) 0 20%, rgba(214,252,255,.70) 34%, rgba(111,186,255,.32) 60%, transparent 78%);
    box-shadow:
        0 0 44px rgba(255,255,255,.70),
        0 0 92px rgba(61,240,255,.50),
        0 0 128px rgba(244,94,215,.26);
    opacity: .86;
    filter: blur(4px);
    animation: redPersonaCoreGlow 3.2s ease-in-out infinite;
}

.red-persona-head-light--one {
    width: 34%;
    height: 15%;
    left: 18%;
    top: 20%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,0));
    filter: blur(11px);
    opacity: .46;
    transform: rotate(-15deg);
    mix-blend-mode: screen;
    animation: redPersonaLightSweep 4.8s ease-in-out infinite alternate;
}

.red-persona-head-light--two {
    width: 28%;
    height: 12%;
    right: 13%;
    bottom: 24%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(244,94,215,0), rgba(244,94,215,.58), rgba(61,240,255,.32));
    filter: blur(12px);
    opacity: .54;
    transform: rotate(24deg);
    mix-blend-mode: screen;
    animation: redPersonaLightSweep 5.4s ease-in-out infinite alternate-reverse;
}

.red-persona-head-eye {
    --eye-delay: 0s;
    position: absolute;
    z-index: 5;
    top: 51%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: .78;
    background:
        radial-gradient(circle at 38% 34%,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.72) 34%,
            rgba(185,246,255,.34) 58%,
            rgba(244,94,215,.12) 76%,
            rgba(255,255,255,0) 100%);
    box-shadow:
        0 0 10px rgba(255,255,255,.54),
        0 0 22px rgba(112,245,255,.34),
        0 0 34px rgba(244,94,215,.18);
    filter: blur(.55px);
    transform-origin: center;
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
    animation:
        redPersonaEyeLife 12.6s cubic-bezier(.44, 0, .22, 1) infinite,
        redPersonaEyeGlow 6.4s ease-in-out infinite alternate;
    animation-delay: 0s, .18s;
}

.red-persona-head-eye::after {
    content: "";
    position: absolute;
    inset: -32%;
    border-radius: 50%;
    background:
        radial-gradient(circle at center,
            rgba(255,255,255,.24) 0%,
            rgba(112,245,255,.18) 32%,
            rgba(244,94,215,.10) 58%,
            transparent 78%);
    opacity: .28;
    filter: blur(10px);
    transform: scale(.88);
    animation: redPersonaEyeHappyGlow 12.6s ease-in-out infinite;
    animation-delay: 0s;
    pointer-events: none;
}

.red-persona-head-eye--left {
    --eye-delay: 0s;
    left: 31%;
}

.red-persona-head-eye--right {
    --eye-delay: 0s;
    right: 31%;
}

.red-persona-head-halo {
    inset: 8%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    opacity: .42;
    mix-blend-mode: screen;
}

.red-persona-head-halo--one {
    transform: rotate(-10deg) scaleX(1.04);
    animation: redPersonaRotate 24s linear infinite;
}

.red-persona-head-halo--two {
    inset: 18%;
    border-color: rgba(112,245,255,.26);
    transform: rotate(18deg) scaleY(.92);
    animation: redPersonaRotateReverse 18s linear infinite;
}

.red-persona-head-scan {
    z-index: 4;
    width: 68%;
    height: 1px;
    left: 16%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.60), rgba(112,245,255,.52), transparent);
    box-shadow: 0 0 20px rgba(112,245,255,.42);
    opacity: .38;
    mix-blend-mode: screen;
}

.red-persona-head-scan--one {
    top: 33%;
    animation: redPersonaScanOne 4.8s ease-in-out infinite;
}

.red-persona-head-scan--two {
    bottom: 30%;
    animation: redPersonaScanTwo 5.2s ease-in-out infinite;
}

.red-persona-head-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 30px rgba(61,240,255,.08), 0 0 26px rgba(139,92,255,.08);
    opacity: .78;
}

.red-persona-head-orbit--outer {
    width: 76%;
    aspect-ratio: 1;
    animation: redPersonaRotate 32s linear infinite;
}

.red-persona-head-orbit--middle {
    width: 58%;
    aspect-ratio: 1;
    border-color: rgba(112,245,255,.18);
    animation: redPersonaRotateReverse 24s linear infinite;
}

.red-persona-head-pulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(112,245,255,.20);
    opacity: 0;
    animation: redPersonaPulseRing 3.8s ease-out infinite;
}

.red-persona-head-pulse--one { width: 36%; aspect-ratio: 1; }
.red-persona-head-pulse--two { width: 49%; aspect-ratio: 1; animation-delay: 1.15s; }

.red-persona-siri-stage .red-persona-digital-head {
    z-index: 3;
}

@keyframes redPersonaHeadFloat {
    from { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
    to { transform: translate3d(10px, -18px, 0) rotate(1deg) scale(1.025); }
}

@keyframes redPersonaAuraBreath {
    from { opacity: .50; transform: scale(.95); }
    to { opacity: .88; transform: scale(1.07); }
}

@keyframes redPersonaHeadMorphOne {
    0% { border-radius: 46% 54% 47% 53% / 50% 42% 58% 50%; transform: rotate(0deg) scale(1); }
    50% { border-radius: 55% 45% 53% 47% / 44% 55% 45% 56%; transform: rotate(3deg) scale(1.025); }
    100% { border-radius: 42% 58% 55% 45% / 56% 40% 60% 44%; transform: rotate(-2deg) scale(1.015); }
}

@keyframes redPersonaHeadMorphTwo {
    0% { border-radius: 54% 46% 57% 43% / 43% 50% 50% 57%; transform: translate3d(-4px, 3px, 0) rotate(-3deg); }
    100% { border-radius: 43% 57% 44% 56% / 55% 40% 60% 45%; transform: translate3d(5px, -4px, 0) rotate(3deg); }
}

@keyframes redPersonaHeadDrift {
    from { filter: blur(2px) hue-rotate(0deg); }
    to { filter: blur(3px) hue-rotate(16deg); }
}

@keyframes redPersonaVeil {
    from { transform: rotate(-4deg) scale(.99); opacity: .62; }
    to { transform: rotate(5deg) scale(1.035); opacity: .84; }
}

@keyframes redPersonaCoreGlow {
    0%, 100% { opacity: .72; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes redPersonaLightSweep {
    from { transform: translateX(-8px) rotate(-15deg); opacity: .32; }
    to { transform: translateX(12px) rotate(8deg); opacity: .72; }
}

@keyframes redPersonaEyeLife {
    0%, 7.4% {
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
        opacity: .78;
    }

    8.05% {
        transform: translate3d(0, 1px, 0) scaleX(1.08) scaleY(.18);
        opacity: .48;
    }

    8.62%, 22% {
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
        opacity: .78;
    }

    28%, 37% {
        transform: translate3d(6px, .5px, 0) scaleX(.98) scaleY(1);
        opacity: .82;
    }

    44%, 53% {
        transform: translate3d(-6px, .5px, 0) scaleX(.98) scaleY(1);
        opacity: .82;
    }

    61%, 67% {
        transform: translate3d(0, -1.5px, 0) scaleX(1.04) scaleY(.96);
        opacity: .88;
    }

    73%, 80.2% {
        transform: translate3d(3px, .5px, 0) scaleX(1) scaleY(1);
        opacity: .80;
    }

    81.05% {
        transform: translate3d(3px, 1px, 0) scaleX(1.08) scaleY(.16);
        opacity: .46;
    }

    81.55% {
        transform: translate3d(3px, 0, 0) scaleX(1) scaleY(1);
        opacity: .78;
    }

    82.12% {
        transform: translate3d(3px, 1px, 0) scaleX(1.04) scaleY(.34);
        opacity: .56;
    }

    82.72%, 100% {
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
        opacity: .78;
    }
}

@keyframes redPersonaEyeFocus {
    0%, 15%, 30%, 44%, 59%, 74%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.68);
    }

    20%, 27% {
        opacity: .86;
        transform: translate3d(18px, -3px, 0) scale(.94);
    }

    47%, 55% {
        opacity: .86;
        transform: translate3d(-18px, -3px, 0) scale(.94);
    }

    79%, 87% {
        opacity: .48;
        transform: translate3d(0, -6px, 0) scale(.72);
    }
}

@keyframes redPersonaEyeHappyGlow {
    0%, 56%, 70%, 100% {
        opacity: .18;
        transform: scale(.84);
    }

    61%, 67% {
        opacity: .46;
        transform: scale(1.18);
    }

    80%, 84% {
        opacity: .34;
        transform: scale(1.02);
    }
}

@keyframes redPersonaEyeGlow {
    from {
        box-shadow:
            0 0 8px rgba(255,255,255,.46),
            0 0 20px rgba(112,245,255,.30),
            0 0 32px rgba(244,94,215,.14);
        filter: blur(.55px);
    }

    to {
        box-shadow:
            0 0 12px rgba(255,255,255,.62),
            0 0 28px rgba(112,245,255,.42),
            0 0 44px rgba(244,94,215,.22);
        filter: blur(.9px);
    }
}

@keyframes redPersonaScanOne {
    0%, 100% { transform: translateY(-16px) scaleX(.55); opacity: 0; }
    35%, 62% { opacity: .48; }
    72% { transform: translateY(88px) scaleX(.92); opacity: 0; }
}

@keyframes redPersonaScanTwo {
    0%, 100% { transform: translateY(20px) scaleX(.38); opacity: 0; }
    28%, 58% { opacity: .36; }
    74% { transform: translateY(-92px) scaleX(.86); opacity: 0; }
}

@media only screen and (max-width: 1180px) {
    body[data-active-product="persona"] .red-hero__persona-signal {
        width: min(460px, 70vw) !important;
    }

    .red-persona-digital-head--main {
        width: min(390px, 72%);
    }
}

@media only screen and (max-width: 760px) {
    .red-persona-digital-head--main {
        width: min(330px, 76%);
    }

    .red-persona-head-eye {
        border-bottom-width: 4px;
    }
}


/* =========================================================
   RED Tag - ajuste blanco sofisticado
   Solo afecta RED Tag y estados activos de RED Tag
   ========================================================= */

body[data-active-product="tag"] {
    --red-tag-ink: #1b2026;
    --red-tag-muted: rgba(27, 32, 38, .64);
    --red-tag-soft: rgba(255, 255, 255, .48);
    --red-tag-line: rgba(27, 32, 38, .12);
    --red-tag-green: #ffffff;
    --red-tag-green-deep: #dfe4e8;
    --red-tag-green-soft: rgba(255, 255, 255, .42);
    --red-tag-red: #f5f7f9;
    --red-tag-red-soft: rgba(255, 255, 255, .46);
    --red-tag-cyan: #eef2f5;
    --red-tag-blue: #f8f9fb;
    --red-tag-navy: #f4f6f8;
    --red-tag-steel: #ffffff;
}

/* Header adaptado a RED Tag */
body[data-active-product="tag"] #header-fixed.red-topbar {
    background:
        linear-gradient(180deg, rgba(5,8,12,.42), rgba(5,8,12,.18) 58%, rgba(5,8,12,0)) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

body[data-active-product="tag"] #header-fixed.red-topbar.red-topbar--scrolled {
    background:
        linear-gradient(180deg, rgba(5,8,12,.48), rgba(5,8,12,.22) 58%, rgba(5,8,12,0)) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body[data-active-product="tag"] .red-brand__name,
body[data-active-product="tag"] .red-header-products a {
    color: rgba(255, 255, 255, .78) !important;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .36) !important;
}

body[data-active-product="tag"] .red-brand:hover .red-brand__name,
body[data-active-product="tag"] .red-header-products a:hover,
body[data-active-product="tag"] .red-header-products a.is-active {
    color: #ffffff !important;
}

body[data-active-product="tag"] .red-brand__mark {
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)) drop-shadow(0 0 14px rgba(255,255,255,.24)) !important;
}

body[data-active-product="tag"] .red-header-products a::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), rgba(255,255,255,.48), transparent) !important;
    box-shadow: 0 0 18px rgba(255,255,255,.28) !important;
}

body[data-active-product="tag"] .red-header-products a.is-active {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}

body[data-active-product="tag"] .red-login-launcher {
    color: #1b2026 !important;
    border-color: rgba(27,32,38,.14) !important;
    background: linear-gradient(135deg, #ffffff, #f4f6f8 42%, #e3e8ed) !important;
    box-shadow: 0 16px 38px rgba(20,24,28,.12), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

body[data-active-product="tag"] .red-login-card {
    color: #1b2026 !important;
    border-color: rgba(27,32,38,.12) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,.70), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,246,248,.92)) !important;
    box-shadow: 0 28px 74px rgba(20,24,28,.14), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body[data-active-product="tag"] .red-login-close {
    color: #ffffff !important;
    border-color: rgba(255, 92, 104, .24) !important;
    background: linear-gradient(135deg, rgba(255, 92, 104, .22), rgba(255, 92, 104, .34)) !important;
    box-shadow: 0 12px 26px rgba(255, 92, 104, .14), inset 0 1px 0 rgba(255,255,255,.58) !important;
}

body[data-active-product="tag"] .red-login-close:hover,
body[data-active-product="tag"] .red-login-close:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff6b76, #ff4d5d) !important;
    border-color: rgba(255, 92, 104, .38) !important;
}

body[data-active-product="tag"] .red-login-card::before {
    background: linear-gradient(135deg, rgba(255,255,255,.86), transparent 40%, rgba(210,216,222,.42)) !important;
}

body[data-active-product="tag"] .red-login-card__head strong,
body[data-active-product="tag"] .red-login-product strong {
    color: #1b2026 !important;
}

body[data-active-product="tag"] .red-login-eyebrow,
body[data-active-product="tag"] .red-login-product small,
body[data-active-product="tag"] .red-input-wrap span,
body[data-active-product="tag"] .red-login-policy {
    color: rgba(27,32,38,.58) !important;
}

body[data-active-product="tag"] .red-login-tabs {
    border-color: rgba(27,32,38,.10) !important;
    background: rgba(255,255,255,.58) !important;
}

body[data-active-product="tag"] .red-login-tab {
    color: rgba(27,32,38,.56) !important;
}

body[data-active-product="tag"] .red-login-tab:hover,
body[data-active-product="tag"] .red-login-tab.is-active {
    color: #111418 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(232,236,240,.78)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 12px 24px rgba(20,24,28,.08) !important;
}

body[data-active-product="tag"] .red-login-product {
    border-color: rgba(27,32,38,.10) !important;
    background: radial-gradient(circle at 12% 20%, rgba(255,255,255,.72), transparent 38%), rgba(248,249,251,.88) !important;
}

body[data-active-product="tag"] .red-login-form input[type="text"],
body[data-active-product="tag"] .red-login-form input[type="password"] {
    color: #1b2026 !important;
    border-color: rgba(27,32,38,.14) !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body[data-active-product="tag"] .red-login-form input[type="text"]:focus,
body[data-active-product="tag"] .red-login-form input[type="password"]:focus,
body[data-active-product="tag"] .red-login-form input[type="text"]:hover,
body[data-active-product="tag"] .red-login-form input[type="password"]:hover {
    border-color: rgba(27,32,38,.28) !important;
    background: #fff !important;
}

body[data-active-product="tag"] .red-login-form input[type="submit"] {
    color: #1b2026 !important;
    border-color: rgba(27,32,38,.14) !important;
    background: linear-gradient(135deg, #ffffff, #f2f4f6 42%, #dfe4e8) !important;
    box-shadow: 0 14px 30px rgba(20,24,28,.12) !important;
}

/* Hero RED Tag: video más limpio, con blanco sofisticado */
body[data-active-product="tag"] .red-hero {
    background: #f4f6f8 !important;
}

body[data-active-product="tag"] .red-hero__tag-video {
    opacity: 1 !important;
    visibility: visible !important;
    filter: saturate(.88) contrast(1.02) brightness(1.04) !important;
}

body[data-active-product="tag"] .red-hero__overlay {
    background:
        radial-gradient(circle at 76% 22%, rgba(255,255,255,.18), transparent 30%),
        radial-gradient(circle at 50% 82%, rgba(255,255,255,.16), transparent 36%),
        linear-gradient(90deg, rgba(5,8,12,.58) 0%, rgba(5,8,12,.34) 40%, rgba(255,255,255,.04) 74%, rgba(255,255,255,.18) 100%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(5,8,12,.40)) !important;
}

body[data-active-product="tag"] .red-hero__grid {
    opacity: .06 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px) !important;
}

body[data-active-product="tag"] .red-hero__kicker::before,
body[data-active-product="tag"] .red-hero h1::after {
    background: linear-gradient(90deg, #ffffff, rgba(225,230,235,.88), transparent) !important;
    box-shadow: 0 0 28px rgba(255,255,255,.34) !important;
}

body[data-active-product="tag"] .red-btn--primary {
    color: #1b2026 !important;
    border-color: rgba(255,255,255,.62) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f4f6f8 38%, #dfe4e8 100%) !important;
    box-shadow: 0 22px 54px rgba(20,24,28,.16), 0 0 32px rgba(255,255,255,.22) !important;
}

body[data-active-product="tag"] .red-btn--ghost {
    color: #fff !important;
    border-color: rgba(255,255,255,.42) !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 14px 32px rgba(0,0,0,.10) !important;
}

body[data-active-product="tag"] .red-btn--ghost:hover {
    border-color: rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.20) !important;
}

body[data-active-product="tag"] .red-hero__proof article,
body[data-active-product="tag"] .red-product-card.is-active {
    border-color: rgba(255,255,255,.46) !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.24), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.12)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 18px 46px rgba(20,24,28,.12) !important;
}

/* Secciones RED Tag: predominio blanco sofisticado */
.red-tag-main {
    background: #f4f6f8 !important;
}

.red-tag-section {
    color: #1b2026 !important;
    background:
        radial-gradient(circle at 11% 16%, rgba(255,255,255,.72), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(230,234,238,.34), transparent 28%),
        radial-gradient(circle at 74% 94%, rgba(255,255,255,.48), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f5f7f9 100%) !important;
    border-top: 1px solid rgba(27,32,38,.08) !important;
}

.red-tag-section:nth-of-type(even) {
    background:
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.68), transparent 32%),
        radial-gradient(circle at 18% 86%, rgba(224,229,234,.42), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%) !important;
}

.red-tag-section::before {
    opacity: .20 !important;
    background-image:
        linear-gradient(rgba(27,32,38,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,32,38,.05) 1px, transparent 1px) !important;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%) !important;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%) !important;
}

.red-tag-section::after {
    background: linear-gradient(90deg, transparent, rgba(210,216,222,.26), rgba(255,255,255,.88), transparent) !important;
}

.red-tag-copy h2,
.red-tag-main .red-section-head h2 {
    color: #1b2026 !important;
    text-shadow: none !important;
}

.red-tag-copy p,
.red-tag-main .red-section-head p,
.red-tag-summary span,
.red-tag-flow-mini span,
.red-tag-security-stack span,
.red-tag-class-card p,
.red-tag-image-slot small,
.red-tag-media-card__fallback small,
.red-tag-detection-card p,
.red-tag-floating-panel p {
    color: rgba(27,32,38,.64) !important;
}

.red-tag-main .red-section-kicker {
    color: rgba(27,32,38,.58) !important;
}

.red-tag-main .red-section-kicker::before {
    background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(170,178,186,.34)) !important;
    box-shadow: 0 0 18px rgba(255,255,255,.30) !important;
}

.red-tag-summary article,
.red-tag-class-card,
.red-tag-flow-mini article,
.red-tag-security-stack article,
.red-tag-control-window,
.red-tag-media-card,
.red-tag-control-image,
.red-tag-image-slot {
    border-color: rgba(27,32,38,.10) !important;
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(255,255,255,.70), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,246,248,.84)) !important;
    box-shadow: 0 24px 70px rgba(20, 24, 28, .09), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.red-tag-summary article:hover,
.red-tag-class-card:hover,
.red-tag-flow-mini article:hover,
.red-tag-security-stack article:hover,
.red-tag-control-window:hover,
.red-tag-media-card:hover,
.red-tag-control-image:hover,
.red-tag-image-slot:hover {
    border-color: rgba(27,32,38,.18) !important;
    background:
        radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgba(255,255,255,.86), transparent 42%),
        linear-gradient(145deg, #ffffff, #f1f3f5) !important;
    box-shadow: 0 30px 86px rgba(20,24,28,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.red-tag-summary strong,
.red-tag-class-card h3,
.red-tag-flow-mini strong,
.red-tag-security-stack strong,
.red-tag-detection-card strong,
.red-tag-floating-panel strong,
.red-tag-plate-big,
.red-tag-status-list strong {
    color: #1b2026 !important;
    text-shadow: none !important;
}

.red-tag-camera-stage {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.red-tag-camera-stage.red-hover-tilt:hover {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px);
    border-color: transparent!important;
    box-shadow: none !important;
}


.red-tag-image-slot__fallback,
.red-tag-media-card__fallback {
    color: #1b2026 !important;
}

.red-tag-image-slot span,
.red-tag-media-card__fallback span,
.red-tag-detection-card em {
    color: #1b2026 !important;
    background: rgba(255,255,255,.70) !important;
    border-color: rgba(27,32,38,.12) !important;
    box-shadow: 0 10px 24px rgba(20,24,28,.08) !important;
}

.red-tag-image-slot h3,
.red-tag-media-card__fallback h3 {
    color: #1b2026 !important;
    text-shadow: none !important;
}

.red-tag-image-slot--with-image::after,
.red-tag-media-card::after,
.red-tag-control-image::after {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(246,248,250,.70)) !important;
}

.red-tag-detection-card,
.red-tag-floating-panel {
    color: #1b2026 !important;
    border-color: rgba(27,32,38,.12) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.72), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,244,246,.92)) !important;
    box-shadow: 0 26px 72px rgba(20,24,28,.13), inset 0 1px 0 rgba(255,255,255,.92) !important;
    backdrop-filter: blur(18px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
}

.red-tag-detection-card small,
.red-tag-floating-panel small,
.red-tag-control-window small,
.red-tag-class-card span {
    color: rgba(27,32,38,.52) !important;
}

.red-tag-scan-beam {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(210,216,222,.74), transparent) !important;
    box-shadow: 0 0 30px rgba(255,255,255,.48), 0 0 46px rgba(20,24,28,.12) !important;
}

.red-tag-flow-mini b,
.red-tag-security-stack i {
    color: #1b2026 !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(225,230,235,.44)),
        rgba(255,255,255,.68) !important;
    border: 1px solid rgba(27,32,38,.12) !important;
    box-shadow: 0 18px 40px rgba(20,24,28,.10) !important;
}

.red-tag-control-window__top {
    border-bottom-color: rgba(27,32,38,.10) !important;
}

.red-tag-control-window__top span {
    background: rgba(27,32,38,.16) !important;
}

.red-tag-control-window__top span:first-child {
    background: #ffffff !important;
    box-shadow: 0 0 16px rgba(255,255,255,.58), 0 0 0 1px rgba(27,32,38,.12) !important;
}

.red-tag-control-window__top em {
    color: rgba(27,32,38,.54) !important;
}

.red-tag-plate-big {
    border-color: rgba(27,32,38,.12) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 54%),
        linear-gradient(135deg, #ffffff, #f4f6f8) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(20,24,28,.08) !important;
}

.red-tag-status-list article {
    border-color: rgba(27,32,38,.10) !important;
    background: rgba(255,255,255,.86) !important;
}

.red-tag-control-window:hover .red-tag-status-list article {
    border-color: rgba(27,32,38,.16) !important;
    background: rgba(246,248,250,.94) !important;
}

.red-tag-control-room {
    background:
        radial-gradient(circle at 16% 24%, rgba(255,255,255,.72), transparent 30%),
        radial-gradient(circle at 84% 76%, rgba(222,227,232,.42), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%) !important;
}

body[data-active-product="tag"] [data-product-panel="tag"] {
    background: #f4f6f8 !important;
}
/* =========================================================
   RED Corp - Responsive mobile final
   Objetivo: celulares elegantes, resumidos y sin módulos decorativos
   ========================================================= */
@media only screen and (max-width: 820px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.red-home {
        background: #07080b !important;
        -webkit-text-size-adjust: 100%;
    }

    /* Header mobile: sin login y con productos visibles */
    #header-fixed.red-topbar {
        min-height: 104px !important;
        height: 104px !important;
        padding: 12px 14px 10px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        background: linear-gradient(180deg, rgba(4,5,9,.98), rgba(4,5,9,.84) 68%, rgba(4,5,9,.28) 100%) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
        backdrop-filter: blur(18px) saturate(1.12) !important;
        -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
    }

    #header-fixed.red-topbar.red-topbar--scrolled {
        background: linear-gradient(180deg, rgba(4,5,9,.98), rgba(4,5,9,.88)) !important;
    }
    
    #header-fixed.red-topbar {
    min-height: 82px !important;
    height: 82px !important;
    padding: 14px 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}

.red-brand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.red-brand__mark {
    width: 34px !important;
    height: 34px !important;
}

.red-brand__name {
    display: none !important;
}

.red-header-products {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 52px) !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    border-radius: 999px !important;
}

.red-header-products a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
    text-align: center !important;
}
    

    .red-login-zone,
    .red-login-launcher,
    .red-login-card,
    #red-login-card {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    

    .red-header-products::-webkit-scrollbar {
        display: none !important;
    }

    

    .red-header-products a::after {
        display: none !important;
    }

    .red-header-products a:hover,
    .red-header-products a.is-active {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(255,88,88,.92), rgba(170,18,27,.86)) !important;
        box-shadow: 0 10px 22px rgba(255,58,58,.18), inset 0 1px 0 rgba(255,255,255,.14) !important;
        transform: none !important;
    }

    /* Hero mobile: limpio, sin cards de prueba ni visuales de escritorio */
    .red-hero {
        min-height: 100vh !important;
        min-height: 100svh !important;
        height: 100vh !important;
        height: 100svh !important;
    }

    .red-hero__bg img {
        opacity: .42 !important;
        filter: saturate(.86) contrast(1.08) brightness(.68) !important;
        transform: none !important;
        animation: none !important;
    }

    .red-hero__overlay {
        background:
            radial-gradient(circle at 76% 22%, rgba(255,88,88,.22), transparent 32%),
            radial-gradient(circle at 20% 72%, rgba(255,255,255,.10), transparent 34%),
            linear-gradient(90deg, rgba(6,7,10,.96) 0%, rgba(6,7,10,.86) 58%, rgba(6,7,10,.72) 100%),
            linear-gradient(180deg, rgba(6,7,10,.36), rgba(6,7,10,.95)) !important;
    }

    .red-hero__grid,
    .red-hero__glow,
    .red-product-strip,
    .red-product-strip--four,
    .red-scroll-cue,
    .red-hero__proof,
    body[data-active-product="software"] .red-hero__visual,
    body[data-active-product="app"] .red-hero__visual,
    body[data-active-product="tag"] .red-hero__visual,
    body[data-active-product="persona"] .red-hero__visual,
    .red-hero__visual {
        display: none !important;
    }

    .red-hero__content {
        width: calc(100% - 28px) !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 128px 0 62px !important;
        margin: 0 auto !important;
    }

    .red-hero__copy {
        max-width: 100% !important;
        text-align: left !important;
    }

    .red-hero__kicker {
        margin-bottom: 16px !important;
        gap: 9px !important;
        color: rgba(255,255,255,.68) !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
        letter-spacing: .14em !important;
    }

    .red-hero__kicker::before {
        width: 24px !important;
        flex: 0 0 24px !important;
    }

    .red-hero h1 {
        font-size: clamp(44px, 18vw, 68px) !important;
        line-height: .92 !important;
        letter-spacing: -.074em !important;
        text-shadow: 0 24px 58px rgba(0,0,0,.52) !important;
    }

    .red-hero h1::after {
        width: min(260px, 74vw) !important;
        height: 2px !important;
        margin-top: 18px !important;
    }

    .red-hero__lead {
        max-width: none !important;
        margin-top: 20px !important;
        color: rgba(255,255,255,.74) !important;
        font-size: 15px !important;
        line-height: 1.56 !important;
    }

    .red-hero__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 28px !important;
    }

    .red-btn,
    .red-hero__actions .red-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        letter-spacing: .12em !important;
    }

    /* Secciones mobile: menos aire, más lectura */
    .first-section,
    .red-product-view > .first-section,
    .red-suite-intro.first-section,
    .red-software-main--v5 .red-suite-intro.first-section,
    .red-tag-section.first-section,
    .red-persona-section.first-section,
    .red-app-section.first-section {
        margin-top: 100vh !important;
        margin-top: 100svh !important;
    }

    .red-product-view > .no-fixed,
    .red-software-section,
    .red-tag-section,
    .red-persona-section,
    .red-app-section,
    .red-software-main--v5 .red-software-section,
    .red-software-main--v5 .red-section-slim {
        padding: 52px 16px !important;
        min-height: auto !important;
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }

    .red-suite-intro.first-section,
    .red-software-main--v5 .red-suite-intro.first-section {
        padding-top: 52px !important;
    }

    .red-section-shell,
    .red-footer__inner,
    .red-footer__bar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .red-section-head,
    .red-section-head--split {
        display: block !important;
        margin-bottom: 22px !important;
        gap: 0 !important;
    }

    .red-section-head--split p,
    .red-section-head p {
        max-width: none !important;
        margin-top: 12px !important;
    }

    .red-section-kicker {
        font-size: 10px !important;
        letter-spacing: .13em !important;
        line-height: 1.4 !important;
    }

    .red-section-kicker::before {
        width: 22px !important;
        flex-basis: 22px !important;
    }

    .red-software-main--v5 h2,
    .red-software-section h2,
    .red-tag-section h2,
    .red-persona-section h2,
    .red-app-section h2,
    .red-adaptive-copy h2,
    .red-software-video-copy h2 {
        font-size: clamp(30px, 11vw, 42px) !important;
        line-height: .98 !important;
        letter-spacing: -.058em !important;
    }

    .red-software-section p,
    .red-tag-section p,
    .red-persona-section p,
    .red-app-section p,
    .red-adaptive-copy p,
    .red-software-video-copy p {
        font-size: 14px !important;
        line-height: 1.58 !important;
    }

    /* RED Software: ocultar piezas que en mobile ocupan demasiado */
    .red-command-card,
    .red-suite-points,
    .red-flow-section,
    .red-dashboard-showcase,
    .red-dashboard-visual,
    .red-dashboard-window,
    .red-dashboard-bullets,
    .red-adaptive-visual,
    .red-building-model,
    .red-floating-chip {
        display: none !important;
    }

    .red-suite-grid,
    .red-suite-grid--balanced,
    .red-dashboard-grid,
    .red-security-grid,
    .red-adaptive-grid,
    .red-software-video-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Funcionalidades: cards compactas en lugar de bloques gigantes */
    .red-modules-grid,
    .red-modules-grid--v5 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .red-modules-grid--v5 .red-module-card,
    .red-modules-grid--v5 .red-module-card--featured,
    .red-module-card {
        grid-column: auto !important;
        min-height: auto !important;
        padding: 16px !important;
        border-radius: 20px !important;
        background: linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.035)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 14px 34px rgba(0,0,0,.15) !important;
    }

    .red-module-card span {
        font-size: 9.5px !important;
        letter-spacing: .14em !important;
    }

    .red-module-card h3 {
        margin-top: 8px !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
        letter-spacing: -.04em !important;
    }

    .red-module-card p,
    .red-module-card ul {
        display: none !important;
    }

    .red-module-card--featured p {
        display: block !important;
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .red-modules-grid--v5 .red-module-card:nth-child(8) {
        display: none !important;
    }

    /* Roles y seguridad: compactos, sin ornamentos */
    .red-roles-grid,
    .red-roles-grid--v5,
    .red-security-stack {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .red-role-card,
    .red-security-stack article {
        min-height: auto !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .red-role-icon,
    .red-role-tags,
    .red-security-stack b {
        display: none !important;
    }

    .red-role-card span {
        font-size: 9.5px !important;
        letter-spacing: .14em !important;
    }

    .red-role-card h3,
    .red-security-stack strong {
        margin-top: 8px !important;
        font-size: 18px !important;
        line-height: 1.16 !important;
        letter-spacing: -.035em !important;
    }

    .red-role-card p,
    .red-security-stack span {
        margin-top: 9px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Video explicativo responsive */
    .red-software-video-section {
        display: block !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .red-software-video-shell {
        gap: 18px !important;
        align-items: stretch !important;
    }

    .red-software-video-copy h2 {
        max-width: 100% !important;
    }

    .red-software-video-copy p {
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    .red-software-video-frame {
        width: 100% !important;
        border-radius: 22px !important;
        box-shadow: 0 22px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .red-software-video-frame video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }

    /* Cierre: sin el mockup de configuración del edificio */
    .red-adaptive-finale {
        min-height: auto !important;
        padding-top: 54px !important;
        padding-bottom: 62px !important;
    }

    .red-adaptive-actions,
    .red-cta-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }

    .red-adaptive-actions .red-btn,
    .red-cta-actions .red-btn {
        width: 100% !important;
    }



    /* Ajustes puntuales pedidos para mobile: RED App, RED Tag y RED Persona */
    .red-app-ecosystem-visual {
        display: none !important;
    }

    .red-app-ecosystem-card {
        grid-template-columns: 1fr !important;
        padding-bottom: 28px !important;
    }

    .red-tag-flow-mini {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 18px !important;
    }

    .red-tag-flow-mini article {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        padding: 10px 8px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .red-tag-flow-mini b {
        width: 25px !important;
        height: 25px !important;
        margin: 0 0 8px !important;
        font-size: 11px !important;
        flex: 0 0 auto !important;
    }

    .red-tag-flow-mini strong {
        margin: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
    }

    .red-tag-flow-mini span {
        display: none !important;
    }

    .red-tag-image-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 18px !important;
    }

    .red-tag-image-grid .red-tag-image-slot,
    .red-tag-image-grid .red-tag-image-slot--with-image {
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 18px !important;
    }

    .red-tag-image-grid .red-tag-image-slot img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: inherit !important;
    }

    .red-tag-control-room {
        display: none !important;
    }

    .red-persona-siri-stage,
    .red-persona-console {
        display: none !important;
    }

    .red-persona-hero-grid,
    .red-persona-report-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Footer mobile */
    .red-footer__inner {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 38px 16px !important;
    }

    .red-footer__bar {
        padding: 18px 16px !important;
    }
}

@media only screen and (max-width: 390px) {
    #header-fixed.red-topbar {
        padding: 13px 12px !important;
        gap: 10px !important;
    }

    .red-brand {
        flex-basis: 34px !important;
        width: 34px !important;
    }

    .red-brand__mark {
        width: 31px !important;
        height: 31px !important;
    }

    .red-header-products {
        max-width: calc(100% - 44px) !important;
        height: 54px !important;
        padding: 5px !important;
    }

    .red-header-products a {
        height: 44px !important;
        font-size: 9px !important;
        letter-spacing: .07em !important;
    }
}

@media only screen and (max-width: 380px) {
    .red-header-products a {
        padding: 0 10px !important;
        font-size: 9.5px !important;
        letter-spacing: .075em !important;
    }

    .red-hero h1 {
        font-size: clamp(40px, 17vw, 58px) !important;
    }

    .red-hero__lead {
        font-size: 14px !important;
    }
}