/* ==========================================================================
   ACTIVA - /desarrollo-web
   Sistema editorial propio, sobre la marca WebParaguay (Montserrat / Karla,
   rojo #de091e, indigo #393185 / #2c4d93). Todo prefijado .activa- para no
   tocar estilos globales del sitio.
   ========================================================================== */

.activa-page {
    --red: #de091e;
    --red-deep: #b30717;
    --indigo: #393185;
    --indigo-2: #2c4d93;
    --ink: #14141f;
    --paper: #ffffff;
    --paper-2: #f5f5f8;
    --line: #e4e4ec;
    --muted: #63636f;

    --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --serif: "Karla", "Helvetica Neue", Arial, sans-serif;

    --fs-display: clamp(47px, 7.5vw, 97px);
    --fs-h2: clamp(32px, 3.3vw, 46px);
    --fs-h3: clamp(22px, 2vw, 28px);
    --fs-lead: clamp(19px, 1.6vw, 23px);
    --fs-body: 19px;
    --fs-price: clamp(47px, 6.5vw, 73px);
    --fs-numeral: clamp(58px, 9vw, 113px);

    --pad-x: clamp(20px, 5.5vw, 68px);
    --pad-y: clamp(84px, 14vh, 168px);
    --wrap: 1260px;

    font-family: var(--serif);
    font-size: var(--fs-body);
    line-height: 1.62;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.activa-page ::selection {
    background: var(--red);
    color: #fff;
}

/* :where() para especificidad 0 — asi cada componente puede fijar su
   propio margen sin que este reset lo pise. */
.activa-page :where(h1, h2, h3) {
    font-family: var(--sans);
    letter-spacing: -0.03em;
    margin: 0;
    text-wrap: balance;
}

/* El layout dark envuelve el contenido en .content (padding 50px); lo anulamos
   solo cuando contiene la pagina ACTIVA para trabajar a sangre completa. */
.content:has(> #activa-main) {
    padding: 0;
}

/* Rompe el .container del layout para trabajar a sangre completa */
.activa-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.activa-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

.activa-section {
    padding: var(--pad-y) 0;
}

/* Encabezado editorial de seccion: desalineado, grande, con barra roja */
.activa-shead {
    max-width: 46ch;
    margin-bottom: clamp(44px, 6vw, 84px);
}

.activa-shead::before {
    content: "";
    display: block;
    width: 64px;
    height: 5px;
    background: var(--red);
    margin-bottom: clamp(22px, 3vw, 34px);
}

.activa-shead--wide { max-width: 52ch; }

.activa-shead__title {
    /* Tamaño unico para el titulo de todos los bloques */
    font-size: clamp(26px, 2.7vw, 35px);
    font-weight: 800;
    line-height: 1.05;
}

.activa-shead__lead {
    font-family: var(--serif);
    letter-spacing: normal;
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: #3d3d47;
    margin: 22px 0 0;
    max-width: 48ch;
}

.activa-section--dark .activa-shead__title,
.activa-section--red .activa-shead__title {
    color: #fff;
}

.activa-section--dark .activa-shead__lead {
    color: #b9bad4;
}

.activa-section--red .activa-shead__lead {
    color: #ffd9dd;
}

.activa-accent {
    font-style: normal;
    color: var(--red);
}

.activa-section--dark .activa-accent,
.activa-section--red .activa-accent {
    color: #ff5c6c;
}

/* -------------------------------------------------------------------------- */
/* Fondos                                                                      */
/* -------------------------------------------------------------------------- */
.activa-section--paper2 { background: var(--paper-2); }

.activa-section--dark {
    background: var(--ink);
    color: #ececf4;
}

.activa-section--red {
    background: linear-gradient(160deg, var(--red) 0%, var(--red-deep) 100%);
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Botones                                                                     */
/* -------------------------------------------------------------------------- */
.activa-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 19px 34px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease;
}

.activa-btn::after {
    content: "\2192";
    font-size: 1.1em;
    transition: transform .18s cubic-bezier(.2,.7,.3,1);
}

.activa-btn:hover::after,
.activa-btn:focus-visible::after { transform: translateX(5px); }

.activa-btn:hover,
.activa-btn:focus-visible { transform: translateY(-2px); text-decoration: none; }

.activa-btn--red { background: var(--red); color: #fff; }
.activa-btn--red:hover,
.activa-btn--red:focus-visible { color: #fff; box-shadow: 0 16px 34px -12px rgba(222,9,30,.6); }

.activa-btn--white { background: #fff; color: var(--red); }
.activa-btn--white:hover,
.activa-btn--white:focus-visible { color: var(--red-deep); box-shadow: 0 16px 34px -12px rgba(0,0,0,.45); }

.activa-btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: var(--indigo);
}
.activa-btn--ghost:hover,
.activa-btn--ghost:focus-visible { background: var(--indigo); border-color: var(--indigo); color: #fff; }

.activa-section--dark .activa-btn--ghost { color: #fff; }
.activa-section--dark .activa-btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* La tarjeta del selector es blanca aunque este en una seccion oscura:
   su boton fantasma vuelve al estilo sobre fondo claro. */
.activa-section--dark .activa-selector .activa-btn--ghost { color: var(--indigo); }
.activa-section--dark .activa-selector .activa-btn--ghost:hover,
.activa-section--dark .activa-selector .activa-btn--ghost:focus-visible { background: var(--indigo); border-color: var(--indigo); color: #fff; }

.activa-page :focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                        */
/* -------------------------------------------------------------------------- */
.activa-hero {
    position: relative;
    isolation: isolate;
    background: radial-gradient(125% 135% at 50% 100%, #3a3286 0%, #0b0826 44%, #05030f 78%, #02020a 110%);
    color: #fff;
    padding: clamp(72px, 12vh, 150px) 0 clamp(72px, 12vh, 140px);
    overflow: hidden;
}

.activa-hero .activa-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 48px);
}

.activa-hero__wordmark {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(17px, 1.4vw, 22px);
    letter-spacing: 0.62em;
    text-indent: 0.62em;
    color: #fff;
    opacity: .85;
}

.activa-hero__titulo {
    font-size: clamp(29px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    max-width: 20ch;
    text-wrap: balance;
}

.activa-hero__titulo .activa-accent {
    color: #ff8a95;
}

.activa-hero__side {
    display: grid;
    gap: 22px;
    align-content: center;
    max-width: 42ch;
}

.activa-hero__subtitulo {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(22px, 2.1vw, 31px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0;
}

.activa-hero__parrafo {
    font-size: 19px;
    line-height: 1.62;
    color: rgba(255,255,255,.85);
    margin: 0;
}

.activa-hero__cta {
    justify-self: start;
    padding: 22px 40px;
    font-size: 17px;
}

@media (min-width: 900px) {
    .activa-hero .activa-wrap {
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
        row-gap: clamp(32px, 4vw, 52px);
    }
    .activa-hero__wordmark { grid-column: 1 / -1; align-self: start; }
    .activa-hero__titulo { grid-row: 2; }
    .activa-hero__side { grid-row: 2; grid-column: 2; padding-left: clamp(24px, 3vw, 48px); border-left: 2px solid rgba(255,255,255,.25); }
    .activa-hero__cta { grid-column: 1 / -1; grid-row: 3; }
}

/* -------------------------------------------------------------------------- */
/* Selector                                                                    */
/* -------------------------------------------------------------------------- */
#activa-selector { position: relative; }

/* Seccion del selector sobre fondo oscuro: se adapta el texto de la intro */
.activa-section--dark .activa-selector-benef li { color: #fff; }
.activa-section--dark .activa-selector-benef li::before { background: #ff5c6c; }
.activa-section--dark .activa-selector-cue { color: #ff5c6c; }

.activa-selector-shell {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
}

@media (min-width: 940px) {
    .activa-selector-shell {
        grid-template-columns: 0.9fr 1.1fr;
        align-items: start;
    }
}

.activa-selector-intro { display: grid; gap: clamp(24px, 3vw, 36px); align-content: start; }
.activa-selector-intro .activa-shead { margin-bottom: 0; }

/* Lista de motivos para completar el formulario */
.activa-selector-benef {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    max-width: 42ch;
}

.activa-selector-benef li {
    position: relative;
    padding-left: 34px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.activa-selector-benef li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75L18.2 5.9l1.4 1.4z'/%3E%3C/svg%3E") center/100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75L18.2 5.9l1.4 1.4z'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* Señal direccional hacia el formulario */
.activa-selector-cue {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--red);
    font-family: var(--sans);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.activa-selector-cue__arrow { flex-shrink: 0; }

@media (prefers-reduced-motion: no-preference) {
    .activa-selector-cue__arrow { animation: activaCueNudge 1.8s ease-in-out infinite; }
}

@keyframes activaCueNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

@media (max-width: 939px) {
    .activa-selector-cue { display: none; }
}

/* Marco del formulario: badge + tarjeta elevada */
.activa-selector-frame { position: relative; }

.activa-selector-frame__badge {
    position: absolute;
    top: -15px;
    left: clamp(20px, 4vw, 36px);
    z-index: 2;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 0;
    box-shadow: 0 12px 24px -10px rgba(222,9,30,.55);
}

#activa-selector-app { min-height: 300px; }

.activa-selector {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: clamp(32px, 4vw, 52px);
    box-shadow: 0 44px 90px -48px rgba(20,20,31,.55);
}

/* Pulso de atencion una sola vez al entrar en viewport */
@media (prefers-reduced-motion: no-preference) {
    .activa-page.is-armed .activa-selector-frame.is-in .activa-selector {
        animation: activaSelectorPulse 1.4s cubic-bezier(.16,1,.3,1) .35s 1;
    }
}

@keyframes activaSelectorPulse {
    0%   { box-shadow: 0 44px 90px -48px rgba(20,20,31,.55), 0 0 0 0 rgba(222,9,30,0); }
    35%  { box-shadow: 0 44px 90px -48px rgba(20,20,31,.55), 0 0 0 12px rgba(222,9,30,.14); }
    100% { box-shadow: 0 44px 90px -48px rgba(20,20,31,.55), 0 0 0 0 rgba(222,9,30,0); }
}

.activa-selector__progress {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 16px;
}

.activa-selector__pregunta {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 clamp(28px, 3vw, 40px);
    text-wrap: balance;
}

.activa-selector__opciones { display: grid; gap: 12px; margin-bottom: 24px; }

.activa-selector__opcion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 20px 22px;
    border: 2px solid var(--line);
    border-radius: 0;
    background: #fff;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.activa-selector__opcion:hover,
.activa-selector__opcion:focus-visible,
.activa-selector__opcion.is-selected {
    border-color: var(--red);
    background: #fff4f5;
    transform: translateX(4px);
}

.activa-selector__nav { display: flex; justify-content: space-between; align-items: center; }

.activa-selector__back {
    background: none;
    border: none;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--muted);
    cursor: pointer;
    padding: 8px 0;
}

.activa-selector__back:hover { color: var(--red); }

/* Resultado */
.activa-resultado__label {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
}

.activa-resultado__nombre {
    font-family: var(--sans);
    font-size: clamp(26px, 2.8vw, 37px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--indigo);
    margin: 0 0 22px;
}

.activa-resultado__precio {
    font-family: var(--sans);
    font-size: var(--fs-price);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin: 0;
}

.activa-resultado__precio small {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    margin-top: 12px;
}

.activa-resultado__activacion { color: var(--muted); font-weight: 700; margin: 14px 0 28px; }

.activa-resultado__ctas { display: grid; gap: 12px; }
.activa-resultado__ctas .activa-btn { justify-content: center; }

/* -------------------------------------------------------------------------- */
/* Planes                                                                      */
/* -------------------------------------------------------------------------- */
.activa-planes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
}

.activa-plan {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 36px);
}

.activa-plan__nombre {
    font-size: clamp(21px, 1.9vw, 26px);
    font-weight: 800;
    color: var(--indigo);
    margin: 0 0 14px;
}

.activa-plan__claim {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.32;
    letter-spacing: -0.01em;
    margin: 0 0 30px;
}

.activa-plan__precio {
    font-family: var(--sans);
    font-size: var(--fs-price);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
}

.activa-plan__gs {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--muted);
}

.activa-plan__mes {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--muted);
}

.activa-plan__iva {
    font-size: 14px;
    color: var(--muted);
    margin: 12px 0 4px;
}

.activa-plan__activacion {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.activa-plan__activacion span { font-weight: 400; color: var(--muted); }

.activa-plan__lista {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.activa-plan__lista li {
    position: relative;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.4;
    color: #45454f;
}

.activa-plan__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: var(--red);
}

.activa-plan--destacado .activa-plan__lista li { color: rgba(255, 255, 255, .88); }
.activa-plan--destacado .activa-plan__lista li::before { background: #ff5c6c; }

.activa-plan__ideal {
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0 0 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    flex-grow: 1;
}

.activa-plan__ideal span {
    display: block;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 4px;
}

.activa-plan--destacado .activa-plan__ideal { border-color: rgba(255,255,255,.25); color: #fff; }
.activa-plan--destacado .activa-plan__ideal span { color: #fff; }

.activa-plan__cta { justify-content: center; width: 100%; }

/* Plan destacado: rompe la fila, sube, cambia de mundo */
.activa-plan--destacado {
    background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-2) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 44px 80px -40px rgba(57,49,133,.7);
    position: relative;
}

.activa-plan--destacado .activa-plan__nombre { color: #fff; }
.activa-plan--destacado .activa-plan__precio { color: #fff; }
.activa-plan--destacado .activa-plan__gs,
.activa-plan--destacado .activa-plan__mes { color: #cdc9ea; }
.activa-plan--destacado .activa-plan__iva { color: #c9c6e6; }
.activa-plan--destacado .activa-plan__activacion { border-color: rgba(255,255,255,.25); }
.activa-plan--destacado .activa-plan__activacion span { color: #c9c6e6; }
.activa-plan--destacado .activa-btn--red { background: #fff; color: var(--red); }
.activa-plan--destacado .activa-btn--red:hover { color: var(--red-deep); box-shadow: 0 16px 34px -12px rgba(0,0,0,.5); }

.activa-plan__badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 0;
    margin-bottom: 18px;
}

@media (min-width: 940px) {
    .activa-planes { align-items: start; }
    .activa-plan--destacado {
        margin-top: -36px;
        margin-bottom: -36px;
        padding-top: clamp(36px, 3.4vw, 56px);
        padding-bottom: clamp(36px, 3.4vw, 56px);
        z-index: 1;
    }
}

.activa-planes--dos {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
}

@media (max-width: 780px) {
    .activa-planes--dos { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

.activa-tienda__parrafos {
    display: grid;
    gap: 18px;
    max-width: 60ch;
    margin-bottom: clamp(40px, 5vw, 64px);
    font-size: 19px;
    line-height: 1.62;
    color: #3d3d47;
}

.activa-tienda__parrafos p { margin: 0; }

.activa-tienda__combo {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: -0.01em;
    margin: clamp(28px, 4vw, 44px) 0 0;
}

.activa-tienda__combo b { color: var(--red); }
.activa-tienda__combo span { font-weight: 400; color: var(--muted); }

/* -------------------------------------------------------------------------- */
/* Modulos - grilla de 3, compacta: es complementario a los planes             */
/* -------------------------------------------------------------------------- */
.activa-section--tight { padding: clamp(56px, 8vh, 96px) 0; }
.activa-section--tight .activa-shead { margin-bottom: clamp(32px, 4vw, 52px); }

.activa-modulos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.activa-modulo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(22px, 2.2vw, 30px);
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
}

.activa-modulo__nombre {
    font-size: 19px;
    font-weight: 800;
    color: var(--indigo);
    margin: 0;
}

.activa-modulo__promesa {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.activa-modulo__texto {
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    flex-grow: 1;
}

.activa-modulo__precio {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    margin: 14px 0 0;
}

.activa-modulo__plus { color: var(--red); }

.activa-modulo__config { font-size: 14px; color: var(--muted); margin: 0; }

.activa-modulo__compat {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
    .activa-modulos { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* -------------------------------------------------------------------------- */
/* Diferenciacion — fondo oscuro, la frase ocupa todo el ancho                 */
/* -------------------------------------------------------------------------- */
.activa-dif__frase {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(21px, 2.3vw, 30px);
    line-height: 1.35;
    letter-spacing: -0.02em;
    max-width: none;
    margin: 0;
    color: #fff;
    text-wrap: balance;
}

.activa-dif__frase strong,
.activa-dif__frase b { color: #ff5c6c; }

/* -------------------------------------------------------------------------- */
/* ¿Qué es ACTIVA? (ciclo de vida) — fondo claro con la trama hexagonal       */
/* -------------------------------------------------------------------------- */
#activa-quees {
    position: relative;
    overflow: hidden;
    background-color: var(--paper-2);
    background-image:
        radial-gradient(55% 45% at 12% 20%, rgba(222,9,30,.05) 0%, rgba(222,9,30,0) 70%),
        radial-gradient(55% 55% at 92% 88%, rgba(57,49,133,.06) 0%, rgba(57,49,133,0) 70%);
    background-repeat: no-repeat, no-repeat;
}

#activa-quees::before,
#activa-quees::after {
    content: "";
    position: absolute;
    background: url('/img/fondo-testimonios.png') no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: .9;
}

#activa-quees::before {
    right: -60px;
    bottom: -70px;
    width: min(58vw, 780px);
    aspect-ratio: 972 / 501;
}

#activa-quees::after {
    left: -140px;
    top: -90px;
    width: min(40vw, 460px);
    aspect-ratio: 972 / 501;
    transform: scaleX(-1);
    opacity: .55;
}

#activa-quees > .activa-wrap { position: relative; z-index: 1; }

.activa-quees__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 56px);
    margin-bottom: clamp(36px, 4vw, 56px);
}

.activa-quees__item {
    padding-top: 20px;
    border-top: 2px solid var(--ink);
}

.activa-quees__item h3 {
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--indigo);
    margin: 0 0 8px;
}

.activa-quees__item p {
    font-size: 15px;
    line-height: 1.55;
    color: #45454f;
    margin: 0;
}

.activa-quees__cierre {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
    background: linear-gradient(160deg, var(--red) 0%, var(--red-deep) 100%);
    padding: clamp(12px, 1.6vw, 18px) clamp(22px, 2.6vw, 36px);
    margin: 0;
}

@media (max-width: 860px) {
    .activa-quees__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .activa-quees__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* Todos los planes incluyen (dentro de la seccion de planes)                  */
/* -------------------------------------------------------------------------- */
/* Menos aire entre la grilla de planes y este bloque (comparten fondo) */
#activa-planes { padding-bottom: clamp(56px, 6vw, 84px); }

#activa-incluye {
    background-color: var(--paper-2);
    padding-top: 0;
}

.activa-incluye {
    padding-top: clamp(28px, 3.5vw, 44px);
    border-top: 2px solid var(--ink);
}

.activa-incluye__intro {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 16px;
}

.activa-incluye__titulo {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 24px;
}

.activa-incluye__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px clamp(28px, 3vw, 48px);
}

.activa-incluye__lista li {
    position: relative;
    padding-left: 24px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.activa-incluye__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background: var(--red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75L18.2 5.9l1.4 1.4z'/%3E%3C/svg%3E") center/100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.75L18.2 5.9l1.4 1.4z'/%3E%3C/svg%3E") center/100% no-repeat;
}

@media (max-width: 860px) {
    .activa-incluye__lista { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .activa-incluye__lista { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* Como funciona - fila unica de 5 pasos, compacta                             */
/* -------------------------------------------------------------------------- */
.activa-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: paso;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, 1.4vw, 18px);
}

/* El recorrido: arranca en blanco, se va tiñendo de indigo, el paso 4
   (implementacion) es rojo con texto negro y el paso 5 (producto en
   gestion) queda con la estetica del plan destacado. */
.activa-paso {
    --paso-bg: #ffffff;
    --paso-fg: var(--ink);
    --paso-fg-2: #45454f;
    --paso-num: var(--red);
    --paso-num-fill: transparent;
    --paso-num-stroke: 2px;
    counter-increment: paso;
    display: flex;
    flex-direction: column;
    background: var(--paso-bg);
    color: var(--paso-fg);
    padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.6vw, 24px) clamp(26px, 2.4vw, 34px);
    box-shadow: 0 14px 34px -22px rgba(20, 20, 31, .35);
}

.activa-paso:nth-child(1) { --paso-bg: #ffffff; }
.activa-paso:nth-child(2) { --paso-bg: #e4e2f2; }
.activa-paso:nth-child(3) { --paso-bg: #c9c5e8; --paso-fg-2: #33333d; }
.activa-paso:nth-child(4) { --paso-bg: #aea8dc; --paso-fg-2: #2c2c36; }

.activa-paso--final {
    --paso-bg: linear-gradient(160deg, #393185 0%, #2c4d93 100%);
    --paso-fg: #ffffff;
    --paso-fg-2: rgba(255, 255, 255, .82);
    box-shadow: 0 34px 70px -34px rgba(57, 49, 133, .65);
}

.activa-paso::before {
    content: counter(paso);
    order: 0;
    display: block;
    font-family: var(--sans);
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--paso-num-fill);
    -webkit-text-stroke-width: var(--paso-num-stroke);
    -webkit-text-stroke-color: var(--paso-num);
    margin-bottom: 16px;
}

/* Orden en el paso 5: numeral, titulo, texto y por ultimo el cuadro */
.activa-paso__tag {
    order: 2;
    align-self: flex-start;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 12px;
    margin-top: 24px;
}

.activa-paso__body { order: 1; }

.activa-paso h3 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--paso-fg);
}

.activa-paso p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--paso-fg-2);
    margin: 0;
}

@media (max-width: 1080px) {
    .activa-pasos { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px) clamp(16px, 2vw, 28px); }
}

@media (max-width: 680px) {
    .activa-pasos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
    .activa-pasos { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------- */
/* FAQ                                                                         */
/* -------------------------------------------------------------------------- */
.activa-faq {
    border-top: 2px solid var(--ink);
    max-width: 900px;
}

.activa-faq__item { border-bottom: 1px solid var(--line); }

.activa-faq__item summary {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 23px);
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    padding: clamp(22px, 3vw, 34px) 56px clamp(22px, 3vw, 34px) 0;
    position: relative;
}

.activa-faq__item summary::-webkit-details-marker { display: none; }

.activa-faq__item summary::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background:
        linear-gradient(var(--red), var(--red)) center/100% 2px no-repeat,
        linear-gradient(var(--red), var(--red)) center/2px 100% no-repeat;
    transition: transform .2s ease;
}

.activa-faq__item[open] summary::after { transform: rotate(45deg); }
.activa-faq__item summary:hover { color: var(--red); }

.activa-faq__item p {
    margin: 0;
    padding: 0 56px clamp(24px, 3vw, 34px) 0;
    font-size: 17px;
    line-height: 1.62;
    color: #45454f;
    max-width: 68ch;
}

/* -------------------------------------------------------------------------- */
/* Cierre                                                                      */
/* -------------------------------------------------------------------------- */
.activa-cierre__titulo {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 clamp(40px, 5vw, 64px);
    max-width: 18ch;
}

.activa-cierre__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: clamp(32px, 4vw, 48px);
}

.activa-cierre__opcion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2vw, 28px);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.activa-cierre__opcion:hover,
.activa-cierre__opcion:focus-visible {
    background: #fff;
    color: var(--red);
    transform: translateY(-3px);
    text-decoration: none;
}

.activa-cierre__quiero {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.4;
    color: inherit;
    opacity: .9;
}

.activa-cierre__plan {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(17px, 1.7vw, 20px);
    letter-spacing: -0.02em;
}

.activa-cierre__plan svg { flex-shrink: 0; }

.activa-cierre__firma {
    margin: clamp(28px, 3.5vw, 40px) 0 0;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}

@media (max-width: 900px) {
    .activa-cierre__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .activa-cierre__grid { grid-template-columns: 1fr; }
    .activa-cierre__opcion { gap: 10px; }
    .activa-cierre__plan { margin-top: 0; }
}

/* Prueba social */
.activa-social__trayectoria {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(23px, 3vw, 36px);
    letter-spacing: -0.03em;
    line-height: 1.15;
    max-width: 22ch;
    margin: 0 0 40px;
}

/* -------------------------------------------------------------------------- */
/* Reveal on scroll: una sola señal de movimiento. El contenido es visible por  */
/* defecto; solo se oculta si el observador de JS quedo activo (is-armed).      */
/* -------------------------------------------------------------------------- */
.activa-page.is-armed .activa-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

.activa-page.is-armed .activa-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Entrada del hero (sin depender de scroll ni de JS) */
@keyframes activaHeroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.activa-hero__wordmark { animation: activaHeroIn .6s cubic-bezier(.16,1,.3,1) both; }
.activa-hero__titulo   { animation: activaHeroIn .7s cubic-bezier(.16,1,.3,1) .06s both; }
.activa-hero__side     { animation: activaHeroIn .7s cubic-bezier(.16,1,.3,1) .14s both; }
.activa-hero__cta      { animation: activaHeroIn .7s cubic-bezier(.16,1,.3,1) .22s both; }

@media (prefers-reduced-motion: reduce) {
    .activa-page.is-armed .activa-reveal { opacity: 1; transform: none; transition: none; }
    .activa-hero__wordmark, .activa-hero__titulo, .activa-hero__side, .activa-hero__cta { animation: none; }
    .activa-btn, .activa-btn::after, .activa-selector__opcion { transition: none; }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */
@media (max-width: 940px) {
    .activa-planes { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
    .activa-plan--destacado { margin: 0; }
    .activa-hero__side { justify-self: start; }
}

@media (max-width: 620px) {
    .activa-page { --fs-body: 18px; }
    .activa-shead::before { width: 52px; height: 4px; }
    .activa-paso::before { -webkit-text-stroke-width: 1.5px; }
}

/* -------------------------------------------------------------------------- */
/* Fondo animado del hero: campo de estrellas (mismo efecto que el home)        */
/* -------------------------------------------------------------------------- */
.activa-hero .activa-stars{position:absolute;top:0;left:0;width:1px;height:1px;border-radius:50%;background:transparent;pointer-events:none;opacity:0.9;box-shadow:714px 1455px #fff, 766px 1090px #fff, 270px 1057px #fff, 691px 1726px #fff, 63px 1333px #fff, 1546px 637px #fff, 323px 1541px #fff, 1101px 1695px #fff, 859px 252px #fff, 436px 1528px #fff, 1399px 1471px #fff, 888px 81px #fff, 402px 885px #fff, 411px 434px #fff, 1723px 1441px #fff, 1716px 529px #fff, 217px 619px #fff, 563px 573px #fff, 803px 1189px #fff, 1671px 1403px #fff, 562px 1334px #fff, 1605px 411px #fff, 437px 134px #fff, 1774px 1288px #fff, 690px 565px #fff, 977px 1058px #fff, 161px 988px #fff, 1041px 1261px #fff, 240px 324px #fff, 1381px 1251px #fff, 1075px 767px #fff, 558px 326px #fff, 59px 526px #fff, 94px 736px #fff, 1193px 749px #fff, 847px 1250px #fff, 1256px 370px #fff, 62px 1014px #fff, 164px 1557px #fff, 291px 1330px #fff, 529px 1089px #fff, 100px 308px #fff, 1142px 1334px #fff, 623px 66px #fff, 1415px 828px #fff, 1541px 1377px #fff, 1432px 42px #fff, 1513px 798px #fff, 755px 1285px #fff, 1604px 552px #fff, 340px 221px #fff, 1258px 157px #fff, 604px 774px #fff, 1540px 172px #fff, 650px 1052px #fff, 1428px 832px #fff, 1019px 1317px #fff, 535px 1164px #fff, 673px 766px #fff, 302px 1729px #fff, 494px 390px #fff, 126px 1153px #fff, 824px 1227px #fff, 996px 183px #fff, 1671px 253px #fff, 1760px 732px #fff, 1180px 1446px #fff, 904px 1519px #fff, 1454px 80px #fff, 1396px 918px #fff;animation:activaStar 140s linear infinite;}
.activa-hero .activa-stars::after{content:"";position:absolute;top:1800px;left:0;width:1px;height:1px;border-radius:50%;background:transparent;box-shadow:714px 1455px #fff, 766px 1090px #fff, 270px 1057px #fff, 691px 1726px #fff, 63px 1333px #fff, 1546px 637px #fff, 323px 1541px #fff, 1101px 1695px #fff, 859px 252px #fff, 436px 1528px #fff, 1399px 1471px #fff, 888px 81px #fff, 402px 885px #fff, 411px 434px #fff, 1723px 1441px #fff, 1716px 529px #fff, 217px 619px #fff, 563px 573px #fff, 803px 1189px #fff, 1671px 1403px #fff, 562px 1334px #fff, 1605px 411px #fff, 437px 134px #fff, 1774px 1288px #fff, 690px 565px #fff, 977px 1058px #fff, 161px 988px #fff, 1041px 1261px #fff, 240px 324px #fff, 1381px 1251px #fff, 1075px 767px #fff, 558px 326px #fff, 59px 526px #fff, 94px 736px #fff, 1193px 749px #fff, 847px 1250px #fff, 1256px 370px #fff, 62px 1014px #fff, 164px 1557px #fff, 291px 1330px #fff, 529px 1089px #fff, 100px 308px #fff, 1142px 1334px #fff, 623px 66px #fff, 1415px 828px #fff, 1541px 1377px #fff, 1432px 42px #fff, 1513px 798px #fff, 755px 1285px #fff, 1604px 552px #fff, 340px 221px #fff, 1258px 157px #fff, 604px 774px #fff, 1540px 172px #fff, 650px 1052px #fff, 1428px 832px #fff, 1019px 1317px #fff, 535px 1164px #fff, 673px 766px #fff, 302px 1729px #fff, 494px 390px #fff, 126px 1153px #fff, 824px 1227px #fff, 996px 183px #fff, 1671px 253px #fff, 1760px 732px #fff, 1180px 1446px #fff, 904px 1519px #fff, 1454px 80px #fff, 1396px 918px #fff;}
.activa-hero .activa-stars2{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:transparent;pointer-events:none;opacity:0.8;box-shadow:773px 720px #fff, 1063px 353px #fff, 675px 1027px #fff, 1146px 503px #fff, 1537px 83px #fff, 989px 638px #fff, 1788px 37px #fff, 1652px 333px #fff, 55px 632px #fff, 1224px 1355px #fff, 1170px 1457px #fff, 424px 1425px #fff, 57px 152px #fff, 1424px 993px #fff, 1341px 1640px #fff, 1470px 669px #fff, 926px 406px #fff, 258px 41px #fff, 1041px 766px #fff, 1464px 1253px #fff, 697px 1243px #fff, 1186px 1151px #fff, 1256px 534px #fff, 521px 11px #fff, 833px 1388px #fff, 1549px 119px #fff, 1356px 339px #fff, 272px 551px #fff, 1193px 933px #fff, 1071px 862px #fff, 1413px 1045px #fff, 930px 691px #fff, 1013px 930px #fff, 1499px 422px #fff, 1203px 361px #fff, 748px 94px #fff, 265px 1473px #fff, 292px 1256px #fff, 1750px 1059px #fff, 636px 520px #fff, 51px 868px #fff, 1461px 1752px #fff, 137px 1646px #fff, 1559px 1141px #fff, 64px 383px #fff;animation:activaStar 90s linear infinite;}
.activa-hero .activa-stars2::after{content:"";position:absolute;top:1800px;left:0;width:2px;height:2px;border-radius:50%;background:transparent;box-shadow:773px 720px #fff, 1063px 353px #fff, 675px 1027px #fff, 1146px 503px #fff, 1537px 83px #fff, 989px 638px #fff, 1788px 37px #fff, 1652px 333px #fff, 55px 632px #fff, 1224px 1355px #fff, 1170px 1457px #fff, 424px 1425px #fff, 57px 152px #fff, 1424px 993px #fff, 1341px 1640px #fff, 1470px 669px #fff, 926px 406px #fff, 258px 41px #fff, 1041px 766px #fff, 1464px 1253px #fff, 697px 1243px #fff, 1186px 1151px #fff, 1256px 534px #fff, 521px 11px #fff, 833px 1388px #fff, 1549px 119px #fff, 1356px 339px #fff, 272px 551px #fff, 1193px 933px #fff, 1071px 862px #fff, 1413px 1045px #fff, 930px 691px #fff, 1013px 930px #fff, 1499px 422px #fff, 1203px 361px #fff, 748px 94px #fff, 265px 1473px #fff, 292px 1256px #fff, 1750px 1059px #fff, 636px 520px #fff, 51px 868px #fff, 1461px 1752px #fff, 137px 1646px #fff, 1559px 1141px #fff, 64px 383px #fff;}
.activa-hero .activa-stars3{position:absolute;top:0;left:0;width:3px;height:3px;border-radius:50%;background:transparent;pointer-events:none;opacity:0.7;box-shadow:1572px 628px #fff, 1179px 1325px #fff, 52px 1681px #fff, 1419px 1061px #fff, 1079px 952px #fff, 1677px 1458px #fff, 1756px 44px #fff, 646px 1564px #fff, 961px 461px #fff, 149px 1137px #fff, 795px 333px #fff, 561px 1701px #fff, 1013px 1248px #fff, 92px 155px #fff, 1728px 1352px #fff, 16px 419px #fff, 1112px 1427px #fff, 982px 358px #fff, 1292px 140px #fff, 757px 198px #fff, 427px 1018px #fff, 591px 651px #fff;animation:activaStar 60s linear infinite;}
.activa-hero .activa-stars3::after{content:"";position:absolute;top:1800px;left:0;width:3px;height:3px;border-radius:50%;background:transparent;box-shadow:1572px 628px #fff, 1179px 1325px #fff, 52px 1681px #fff, 1419px 1061px #fff, 1079px 952px #fff, 1677px 1458px #fff, 1756px 44px #fff, 646px 1564px #fff, 961px 461px #fff, 149px 1137px #fff, 795px 333px #fff, 561px 1701px #fff, 1013px 1248px #fff, 92px 155px #fff, 1728px 1352px #fff, 16px 419px #fff, 1112px 1427px #fff, 982px 358px #fff, 1292px 140px #fff, 757px 198px #fff, 427px 1018px #fff, 591px 651px #fff;}
@keyframes activaStar{from{transform:translateY(0)}to{transform:translateY(-1800px)}}
@media (prefers-reduced-motion: reduce){
  .activa-hero .activa-stars,.activa-hero .activa-stars2,.activa-hero .activa-stars3{animation:none;}
}

/* -------------------------------------------------------------------------- */
/* Ajustes de contraste sobre el layout (footer de copyright)                  */
/* -------------------------------------------------------------------------- */
.copyright .texto p,
.copyright .texto { color: #58585f; }
.copyright .texto a { text-decoration: underline; }