:root {
    --gs1-color-orange: #F26334;
    --gs1-color-raspberry: #F05587;
    --gs1-color-purple: #BD80B7;
    --gs1-color-lavender: #AF96D4;
    --gs1-color-slate: #89AADB;
    --gs1-color-sky: #00B6DE;
    --gs1-color-link: #008DBD;
    --gs1-color-mist: #8DB9CA;
    --gs1-color-teal: #22BCB9;
    /* ==========================
       GS1 Nature Colors
       ========================== */
    --gs1-color-mint: #71B790;
    --gs1-color-grass: #7AC143;
    --gs1-color-forest: #00AC4A;
    --gs1-color-olive: #9DBB68;
    --gs1-color-lime: #C1D82F;
    /* ==========================
       GS1 Warm Colors
       ========================== */
    --gs1-color-gold: #C4B000;
    --gs1-color-peach: #FBB034;
    --gs1-color-tangerine: #FF8200;
    --gs1-color-honey: #B78B20;
    --gs1-color-terracotta: #D18158;
    /* ==========================
       Accessible Colors
       ========================== */
    --gs1-color-orange-accessible: #CD3C0D;
    --gs1-color-raspberry-accessible: #D12B61;
    --gs1-color-purple-accessible: #A2539A;
    --gs1-color-lavender-accessible: #835CBC;
    --gs1-color-slate-accessible: #3A70BF;
    --gs1-color-sky-accessible: #007B93;
    --gs1-color-link-accessible: #00799F;
    --gs1-color-mist-accessible: #41778C;
    --gs1-color-teal-accessible: #177C7A;
    --gs1-color-mint-accessible: #3F7C5A;
    --gs1-color-grass-accessible: #417E12;
    --gs1-color-forest-accessible: #008037;
    --gs1-color-olive-accessible: #677642;
    --gs1-color-lime-accessible: #667800;
    --gs1-color-gold-accessible: #826F00;
    --gs1-color-peach-accessible: #9D6304;
    --gs1-color-tangerine-accessible: #A15700;
    --gs1-color-honey-accessible: #8D6B19;
    --gs1-color-terracotta-accessible: #AB5A2F;
    /* ==========================
       UI Colors
       ========================== */
    --gs1-color-ui-1: #F0F5FA;
    --gs1-color-ui-2: #e5f0fc;
    --gs1-color-ui-3: #C4D7ED;
    --gs1-color-ui-4: #E5E8EB;
    --gs1-color-ui-5: #A6B0BB;
    --gs1-color-ui-6: #696D73;
    --gs1-color-ui-7: #414345;
    --gs1-color-ui-8: #262626;
    /* ==========================
       Semantic Colors
       ========================== */
    --gs1-color-danger: #BA1B23;
    /* Azul institucional GS1 (se define explícitamente como fallback) */
    --gs1-color-blue: #002C6C;
    /* Ancho de "caja" único: todo el contenido alinea con el título inicial */
    /* ==========================
       Alias semánticos -> SIEMPRE apuntan a la paleta institucional
       ========================== */
    --brand-blue: var(--gs1-color-blue);
    /* No existe un azul más oscuro en la paleta: se deriva del azul + ui-8 */
    --brand-blue-dark: color-mix(in srgb, var(--gs1-color-blue) 78%, var(--gs1-color-ui-8));
    --brand-blue-light: var(--gs1-color-ui-2);
    --brand-surface: var(--gs1-color-ui-1);
    --foreground: var(--gs1-color-ui-8);
    --muted-foreground: var(--gs1-color-ui-6);
    --secondary: var(--gs1-color-ui-1);
    --secondary-foreground: var(--gs1-color-ui-7);
    --border: var(--gs1-color-ui-4);
    --brand-orange: var(--gs1-color-orange-accessible);
    --font-main: "Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
    /*    #e5f0fc
*/
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--foreground);
    background-color: #ffffff;
}

section, input, button, select, textarea {
    font-family: var(--font-main);
    font-variant-numeric: tabular-nums;
}

/* FIX: antes era 150% y desbordaba (rompía el pasador de logos) */
img {
    max-width: 100%;
}


/* ==========================================================
   HERO BANNER — banda superior con foto (carrousel_codigo.jpg)
   ========================================================== */


.hero {
    padding: 4rem 1.5rem 1rem; /* antes: 4rem 1.5rem 3rem  → bajé el de abajo */
    background-color: #ffffff;
}


.hero-banner {
    position: relative;
    background-color: var(--gs1-color-blue);
    overflow: hidden;
}

.hero-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    z-index: 0;
    display: block;
}

.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Azul institucional GS1 (#002C6C = 0,44,108) con transparencia */
    background: linear-gradient(90deg, rgba(0,44,108,0.96) 0%, rgba(0,44,108,0.92) 32%, rgba(0,44,108,0.45) 55%, rgba(0,44,108,0) 72%);
}

.hero-banner__inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-banner__content {
    max-width: 800px;
}

/* CAMBIO: eyebrow (h4 / .gs1-h4) ahora en BLANCO y con tamaño de h4 */
.hero-banner__eyebrow {
    display: block;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    margin: 0 0 0.85rem 0;
}



/* CAMBIO: subtítulo más grande y en BLANCO (antes celeste y muy chico) */
.hero-banner__subtitle {
    font-size: 1.18rem;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 1.75rem 0;
    max-width: 480px;
}

.hero-banner__cta {
    display: inline-block;
    background-color: var(--gs1-color-orange-accessible);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.85rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .hero-banner__cta:hover,
    .hero-banner__cta:focus {
        /* hover más oscuro derivado del naranja accesible */
        background-color: color-mix(in srgb, var(--gs1-color-orange-accessible) 86%, var(--gs1-color-ui-8));
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
        /* sombra = naranja accesible (#CD3C0D = 205,60,13) con alpha */
        box-shadow: 0 6px 18px rgba(205,60,13,0.35);
    }

@media (max-width: 768px) {
    .hero-banner {
        display: none;
    }

    .hero-banner__img {
        object-position: 72% center;
    }

    .hero-banner::before {
        background: linear-gradient(180deg, rgba(0,44,108,0.92) 0%, rgba(0,44,108,0.86) 60%, rgba(0,44,108,0.86) 100%);
    }

    .hero-banner__inner {
        padding: 2.5rem 1.25rem;
        min-height: 300px;
    }

    .hero-banner__subtitle {
        font-size: 1.05rem;
    }
}


/* ==========================================================
   HERO (sección blanca "Bienvenido")
   ========================================================== */
.hero {
    padding: 4rem 1.5rem 1rem; /* antes: 4rem 1.5rem 3rem  → bajé el de abajo */
    background-color: #ffffff;
}

.hero__inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 3rem; /* antes: 2rem 3rem  → ahora el column-gap coincide con .hero__features */

    align-items: center;
}

.hero__content {
    grid-column: 1 / 4;
    max-width: none;
}

/* CAMBIO: título liviano (no bold), estilo h2/h3 GS1 */
.hero__title {
    font-size: 1.9rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--gs1-color-blue);
    margin: 0 auto 1.5rem;
    letter-spacing: -0.01em;
}

/* CAMBIO: párrafo de cuerpo (no justificado, peso regular, tono GS1) */
.hero__subtitle {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gs1-color-ui-7);
    margin: 0;
    max-width: none;
    text-align: left;
}

/* antes: justify-content: center; */
.hero__visual {
    grid-column: 4 / 5;
    display: flex;
    justify-content: flex-start; /* alinea el código de barras a la izquierda */
    align-items: center;
}

.hero__barcode-card {
    max-width: 340px;
    width: 100%;
}

.hero__barcode-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 900px) {

    /* MOBILE: centrar título de la sección de planes */
    .planes__header {
        text-align: center;
    }

    .planes__title {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }


    .hero {
        padding: 3rem 1.25rem 2.5rem;
    }



    .hero__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero__content {
        grid-column: 1 / -1;
        max-width: none;
    }

    .hero__visual {
        grid-column: 1 / -1;
        order: 2;
        justify-content: center; /* MOBILE: código de barras centrado */
    }

    .hero__barcode-card {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__title br {
        display: none;
    }

    .cuantos-codigos {
        position: relative;
        z-index: 1;
        clear: both;
        margin-top: 2rem;
    }

    
}

@media (max-width: 480px) {
    .hero__title {
        font-size: 1.55rem;
    }

    .hero__subtitle {
        font-size: 1rem;
    }
}


/* ==========================================================
   HERO EXTRAS — pastillas (4) + botón "Cuántos códigos necesito"
   (Se ubican debajo del pasador de logos, alineados a la caja)
   ========================================================== */
.hero-extras {
    background-color: #ffffff;
    padding: 0.5rem 1.5rem 2.5rem;
}

.hero-extras__inner {
    margin: 0 auto;
}

.hero__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.hero__feature {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.1rem;
    background-color: var(--brand-blue-light);
    color: var(--gs1-color-blue);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    width: 100%;
}

    .hero__feature img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        flex-shrink: 0;
    }

@media (max-width: 900px) {
    .hero__features {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .hero__features {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .hero__feature {
        font-size: 13px;
        padding: 0.5rem 1rem;
        /* FIX mobile: permitir salto de línea para que el texto no desborde
           la pastilla ni genere scroll horizontal en pantallas angostas */
        white-space: normal;
    }
}


/* ==========================================================
   PLANES — Sección completa  (fondo GRIS #ededed)
   ========================================================== */
.planes {
    background-color: #ededed;
    padding: 3rem 1.5rem 4rem;
}

.planes__inner {
}

/* Botón "Cuántos códigos necesito" — centrado, color #008bd2 */
.cuantos-codigos-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.cuantos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: #008bd2;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .cuantos-btn:hover,
    .cuantos-btn:focus {
        background-color: color-mix(in srgb, #008bd2 86%, var(--gs1-color-ui-8));
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,139,210,0.30);
    }

    .cuantos-btn img,
    .cuantos-btn svg {
        width: 36px;
        height: 36px;
        object-fit: contain;
        flex-shrink: 0;
        transform: scale(1.4); /* agranda solo visualmente (~50px) */
        transform-origin: center;
    }

.planes__header {
    text-align: left;
    margin-bottom: 2.5rem;
}

/* CAMBIO: título de sección liviano (no bold) */
.planes__title {
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--gs1-color-blue);
    letter-spacing: -0.01em;
    margin: 0;
}


/* ==========================================================
   BLOQUES (Starter / Anual)
   ========================================================== */
.plan-block {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* --- Recuadros (banners) UNIFICADOS: mismo tamaño y tipografía --- */
.plan-block__banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

.plan-block__banner--orange {
    /* tinte claro derivado del naranja institucional */
    background-color: color-mix(in srgb, var(--gs1-color-orange) 12%, #ffffff);
}

    .plan-block__banner--orange .plan-block__banner-icon {
        color: var(--gs1-color-orange-accessible);
    }

.plan-block__banner--blue {
    background-color: var(--brand-blue-light);
}

    .plan-block__banner--blue .plan-block__banner-icon {
        color: var(--gs1-color-blue);
    }

.plan-block__banner-icon {
    height: 55px;
    width: auto;
    flex-shrink: 0;
    margin-top: 2px;
}

img.plan-block__banner-icon {
    object-fit: contain;
}

/* Título de recuadro: MISMO tamaño/peso para naranja y azul */
.plan-block__banner-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 0 0 0; /* antes 0.3rem */
}

.plan-block__banner--orange .plan-block__banner-title {
    color: var(--gs1-color-blue);
}

.plan-block__banner--blue .plan-block__banner-title {
    color: var(--gs1-color-blue);
}

.plan-block__banner-text {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--gs1-color-orange-accessible);
}

.plan-block__banner-sub {
    margin: 0.2rem 0 0 0;
    font-size: 0.85rem;
    color: var(--muted-foreground);
    line-height: 1.35;
}

.plan-block__banner-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

    .plan-block__banner-row .plan-block__banner {
        flex: 1 1 0;
        margin-bottom: 0;
    }

    /* centra verticalmente ícono + texto en las cajas con menos contenido
       (PAGO ANUAL / AL INSTANTE) */
    .plan-block__banner-row .plan-block__banner--blue:last-child,
    .plan-block__banner-row .plan-block__banner--orange:last-child {
        align-items: center;
    }

    .plan-block__banner-row .plan-block__banner:first-child {
        grid-column: span 2;
    }

/* ==========================================================
   PLAN CARDS
   ========================================================== */
.plan-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor: pointer;
}

.plan-card__head {
    text-align: left;
    margin-bottom: 1rem;
}

/* CAMBIO: cantidad de códigos (eyebrow) más grande para que no se lea como cero */
.plan-card__eyebrow {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--muted-foreground);
    margin-bottom: 0.35rem;
    white-space: nowrap;
}

/* CAMBIO: nombre del plan liviano (estilo título GS1, sin negrita pesada) */
.plan-card__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gs1-color-blue);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Hexágono / contenedor de imagen central */
.plan-hex {
    align-self: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 1.25rem;
}

.plan-hex--annual {
    background: transparent;
}

    .plan-hex--annual .plan-card__image {
        width: 92px;
        height: auto;
        object-fit: contain;
    }

.plan-card__features li img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}


/* ==========================================================
   PACK STARTER — layout en 3 columnas
   ========================================================== */
.plan-card--starter {
    margin: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr;
    gap: 1.75rem;
    align-items: stretch;
    cursor: default;
}

.starter-col {
    display: flex;
    flex-direction: column;
}

.starter-col--left {
    align-items: center;
    text-align: center;
    justify-content: center;
}

    .starter-col--left .plan-card__eyebrow,
    .starter-col--left .plan-card__name {
        text-align: center;
    }

.starter-icon {
    width: 92px;
    height: auto;
    object-fit: contain;
    margin: 0.75rem 0 1rem;
}

/* "El Pack Starter incluye …" en una sola línea */
.starter-includes {
    padding-top: 2rem; /* antes 1rem → más separación de arriba */
    font-size: 0.82rem;
    color: var(--muted-foreground);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* antes left → ahora centrado */
    align-items: center; /* antes self-start */
    gap: 0.25rem 0.75rem;
}





    .starter-includes .starter-includes__label {
        font-weight: 600;
        color: var(--gs1-color-ui-7);
    }

    .starter-includes .starter-includes__item {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        white-space: nowrap;
    }

    .starter-includes img {
        width: 15px;
        height: 15px;
        object-fit: contain;
    }

/* Botones de cantidad: fondo celeste, tipografía más grande, apilados */
.starter-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.starter-tab {
    appearance: none;
    background: var(--gs1-color-ui-2);
    border: none;
    color: var(--gs1-color-blue);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
}

    .starter-tab:hover {
        background: var(--gs1-color-ui-3);
    }

    .starter-tab.active {
        background-color: var(--brand-blue-dark);
        color: #ffffff;
        border-color: var(--brand-blue-dark);
    }

.starter-col--right {
    align-items: stretch;
    gap: 1rem;
}

    .starter-col--right .plan-card__price {
        margin-bottom: 0;
    }

    .starter-col--right .plan-card__cta {
        margin-bottom: 0;
    }


/* --- Precio --- */
.plan-card__price {    
    text-align: center;
    margin-top: 3rem;
}

/* Precio: número con presencia (no negrita extrema) */
.plan-card__amount {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--gs1-color-blue);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.plan-card__period {
    display: block;
    font-size: 0.78rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
    letter-spacing: 0.3px;
}

/* PAGO ÚNICO ahora en gris */
.plan-card__period--gray {
    color: var(--muted-foreground);
    font-weight: 600;
    letter-spacing: 1.2px;
    font-size: 0.78rem;
}

/* Pastilla "Equivale a …/mes": celeste, un punto más grande y en bold */
.plan-card__equiv {
    align-self: center;
    background-color: var(--brand-blue-light);
    color: var(--gs1-color-blue);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-top: 0.85rem;
    margin-bottom: 1.25rem;
    text-align: center;
    max-width: 100%;
}


/* --- Features list --- */
.plan-card__features-title {
    font-size: 0.88rem;
    color: var(--gs1-color-ui-6);
    margin: 0 0 0.6rem 0;
}

/* Interlínea más compacta */
.plan-card__features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

    .plan-card__features li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.7rem;
        font-weight: 400;
        color: var(--gs1-color-ui-6);
    }

        /* Primer ítem en médium para destacar como en el boceto */
        .plan-card__features li:first-child {
            font-weight: 600;
            color: var(--foreground);
        }


/* --- CTAs (todos del mismo tamaño, cambia el color) --- */
.plan-card__cta {
    margin-top: auto;
    display: inline-block;
    padding: 0.75rem 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
}

/* Comprar Starter: color #CD3C0D */
.plan-card__cta--starter {
    background-color: var(--gs1-color-orange-accessible);
    color: #ffffff;
    border: 2px solid var(--gs1-color-orange-accessible);
}

    .plan-card__cta--starter:hover,
    .plan-card__cta--starter:focus {
        background-color: #ffffff;
        color: var(--gs1-color-orange-accessible);
        border-color: var(--gs1-color-orange-accessible);
        text-decoration: none;
    }

.plan-card__cta--outline {
    background: #ffffff;
    color: var(--gs1-color-blue);
    border: 2px solid var(--gs1-color-blue);
}

    .plan-card__cta--outline:hover {
        background-color: var(--gs1-color-blue);
        color: #ffffff;
        text-decoration: none;
    }

.plan-card__cta--solid {
    background-color: var(--brand-blue-dark);
    color: #ffffff;
    border: 2px solid var(--brand-blue-dark);
}

    .plan-card__cta--solid:hover {
        background-color: var(--gs1-color-blue);
        border-color: var(--gs1-color-blue);
        color: #ffffff;
        text-decoration: none;
    }


/* ==========================================================
   GRILLA ANUAL (4 cards)
   ========================================================== */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

/* Ícono de información junto a "por año" */
.plan-card__info-icon {
    vertical-align: -2px;
    margin-left: 0.15rem;
    color: var(--gs1-color-link);
    cursor: help;
}

/* Recuadro unificado: Todas las membresías incluyen */
.memberships-includes {
    margin-top: 1.25rem;
    background: #ffffff;
    border: 1px solid var(--border, #d8dde5);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

    .memberships-includes__title {
        font-weight: 700;
        color: var(--gs1-color-blue);
        margin: 0 0 0.5rem 0;
        font-size: 1rem;
    }

    .memberships-includes__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: 0.15rem 1rem;
    }

        .memberships-includes__list li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
            line-height: 1.2;
            color: var(--gs1-color-ui-6);
            white-space: nowrap;
            overflow: hidden;
        }

        .memberships-includes__list li img {
            width: 15px;
            height: 15px;
            object-fit: contain;
            flex-shrink: 0;
        }

/* Recuadro "MÁS ELEGIDO": color GS1 #008DBD */
.plan-card__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gs1-color-link);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.85rem;
    border-radius: 0 0 8px 8px;
    letter-spacing: 1.2px;
    z-index: 2;
    white-space: nowrap;
    text-align: center;
}

/* Estado "elegido" (persistente al hacer click) */
.plan-card.is-selected {
    border-color: var(--gs1-color-blue) !important;
    border-width: 2px;
    box-shadow: 0 10px 36px rgba(0,44,108,0.22);
    transform: translateY(-3px);
}


/* ==========================================================
   RESPONSIVE (planes)
   ========================================================== */
@media (max-width: 900px) {
    .plan-block__banner-row {
        grid-template-columns: 1fr;
    }

    /* FIX mobile: la fila de banners anual también debe colapsar a 1 columna. */
    .plan-block__banner-row--annual {
        grid-template-columns: 1fr;
    }

        .plan-block__banner-row .plan-block__banner:first-child,
        .plan-block__banner-row--annual .plan-block__banner:first-child {
            grid-column: auto;
        }

    .plan-card--starter {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        text-align: center;
    }

   

    .memberships-includes__list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    /* MOBILE: respetar el orden del HTML → Básico, Estándar, Completo
       (antes order:-1 forzaba a Estándar al primer lugar) */
    .plan-card--featured {
        order: 0;
    }

    .plan-card--annual .plan-card__head {
        min-height: 0;
    }
    .plans-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.5rem 11% 1.5rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    }

        .plans-grid::-webkit-scrollbar {
            display: none;
        }

    .plan-card--annual {
        flex: 0 0 78%;
        max-width: 320px;
        scroll-snap-align: center;
    }


















}

@media (max-width: 600px) {
    .planes {
        padding: 2.5rem 1rem 3rem;
    }

    .plan-block {
        padding: 1rem;
    }

    .plan-block__banner {
        padding: 0.85rem 1rem;
    }

    .plan-card__amount {
        font-size: 1.7rem;
    }
}


/* ==========================================================
   MONOTRIBUTISTAS — sin recuadro contenedor
   ========================================================== */
.planes__monotributo {
    background-color: transparent;
    border: none;
    padding: 0.75rem 0 0;
    margin: 1.25rem 0 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.planes__monotributo-text {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--gs1-color-blue);
}

    .planes__monotributo-text strong {
        font-weight: 700;
    }

/* Equivalencia en pastilla celeste (igual a los packs) + bold y un punto más grande */
.planes__monotributo-equiv {
    background-color: var(--brand-blue-light);
    color: var(--gs1-color-blue);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .planes__monotributo {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }
}


/* ==========================================================
   ADVISOR BAR — Info + Hablar con un asesor
   ========================================================== */
.advisor-bar {
    background-color: #ffffff;
    padding: 1.5rem;
}

/* Variante dentro del .plan-block: sin padding de sección, a todo el ancho */
.advisor-bar--inblock {
    padding: 0;
    margin-top: 1rem;
}

    .advisor-bar--inblock .advisor-bar__inner {
        max-width: none;
        margin: 0;
    }

.advisor-bar__inner {
    margin: 0 auto;
    background-color: var(--brand-blue-light);
    border: none;
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: nowrap;
}

.advisor-bar__cta-block {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
}

.advisor-bar__info {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 320px;
    min-width: 0;
}

.advisor-bar__info-icon {
    width: 22px;
    height: 22px;
    color: var(--gs1-color-blue);
    flex-shrink: 0;
    margin-top: 1px;
}

.advisor-bar__info-text {
    display: flex;
    flex-direction: column;
}

.advisor-bar__info-main {
    margin: 0;
    color: var(--gs1-color-blue);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.advisor-bar__info-sub {
    margin: 0.15rem 0 0 0;
    color: var(--gs1-color-ui-6);
    font-size: 0.75rem;
    line-height: 1.35;
}



.advisor-bar__cta-text {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.advisor-bar__cta-title {
    margin: 0;
    color: var(--foreground);
    font-size: 0.7rem; /* antes 0.95rem */
    font-weight: 600;
    line-height: 1.35;
}

.advisor-bar__cta-sub {
    margin: 0.15rem 0 0 0;
    color: var(--muted-foreground);
    font-size: 0.7rem;
    line-height: 1.35;
}

.advisor-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    background-color: var(--gs1-color-blue);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .advisor-bar__btn:hover,
    .advisor-bar__btn:focus {
        background-color: var(--brand-blue-dark);
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,44,108,0.25);
    }

    .advisor-bar__btn img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        flex-shrink: 0;
    }

@media (max-width: 900px) {
    .advisor-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.6rem 0.75rem;
        max-height:250px;
    }

    .advisor-bar__cta-block {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
    }

    .advisor-bar__cta-text {
        text-align: left;
        flex: 1 1 auto;
    }

    .advisor-bar__btn {
        flex-shrink: 0;
    }

    .advisor-bar__info {
        gap: 0.5rem;
    }

    .advisor-bar__info-main {
        font-size: 0.75rem;
    }

    .advisor-bar__info-sub {
        font-size: 0.7rem;
    }
}

@media (max-width: 560px) {
    .advisor-bar {
        padding: 1rem;
    }

    .advisor-bar--inblock {
        padding: 0;
    }

    .advisor-bar__cta-block {
        flex-direction: column;
        align-items: stretch;
    }

    .advisor-bar__btn {
        justify-content: center;
        width: 100%;
        font-size: 0.85rem;
        min-height: 44px;
    }

    .advisor-bar__cta-text {
        text-align: left;
    }

    .advisor-bar__info-main,
    .advisor-bar__cta-title {
        font-size: 0.85rem;
    }

    .advisor-bar__info-sub,
    .advisor-bar__cta-sub {
        font-size: 0.8rem;
    }
}


/* ==========================================================
   PAYMENT BAR — Formas de pago (dentro de la sección gris)
   ========================================================== */
.payment-bar {
    background-color: transparent; /* CAMBIO: deja ver el gris de la sección .planes */
    border-top: none; /* CAMBIO: sin línea arriba */
    border-bottom: none; /* CAMBIO: sin línea abajo */
}

.payment-bar__inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding: 0.4rem 1.5rem; /* CAMBIO: poco espacio arriba/abajo de los logos */
}

.payment-bar__label {
    color: var(--muted-foreground);
    font-size: 1.05rem;
    font-weight: 600;
}

.payment-bar__methods {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
}

.payment-bar__method {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--foreground);
    font-size: 1.05rem;
    font-weight: 600;
}

.payment-bar__icon {
    width: 22px;
    height: 22px;
    color: var(--gs1-color-blue);
    flex-shrink: 0;
}

.payment-bar__method img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* CAMBIO: logo Mercado Pago más chico y sin alto fijo (no infla la fila) */
.payment-bar__method .ml {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
@media (max-width: 600px) {
    .payment-bar__inner {
        gap: 1rem;
        justify-content: center;
        padding: 0.4rem 1.25rem;
    }

    .payment-bar__methods {
        gap: 1.25rem;
        justify-content: center;
    }

    .payment-bar__method {
        font-size: 0.95rem;
    }
}

@media (max-width: 380px) {
    .payment-bar__methods {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
}


/* ==========================================================
   INFO NOTE — "Tené en cuenta"
   ========================================================== */
.info-note {
    background-color: #ffffff;
    padding: 1.5rem;
    margin-top: 1.5rem; /* separa el alert de lo de arriba */
}

.info-note__inner {
    margin: 0 auto;
    background-color: var(--brand-blue-light);
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.info-note__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.info-note__title {
    margin: 0 0 0.3rem 0;
    font-size: 0.95rem;
    color: var(--brand-blue-dark);
}

.info-note__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--gs1-color-blue);
}


/* ==========================================================
   BRAND CAROUSEL — pasador de marcas (logos)
   ========================================================== */
.brand-carousel {
    background-color: #ffffff;
    padding: 1rem 1.5rem 1.5rem; /* antes: 2.5rem ... → bajé el de arriba */
}

.brand-carousel__inner {
    margin: 0 auto;
}

.brand-carousel .d-none.d-md-block,
.brand-carousel .d-md-none {
    position: relative;
}

.brand-carousel__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    gap: 2rem;
    min-height: 110px;
    padding: 0 3.5rem;
}

    .brand-carousel__track img {
        max-width: 100%;
        max-height: 80px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.brand-carousel__controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    padding: 0;
    pointer-events: none;
    z-index: 3;
}

    .brand-carousel__controls .btn-circle-color {
        pointer-events: auto;
    }

@media (max-width: 767.98px) {
    .brand-carousel__track {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem 1rem;
        min-height: 90px;
        padding: 0 3rem;
    }

    .brand-carousel {
        display: none;
    }

    .brand-carousel__track img {
        max-height: 48px;
    }

    .cuantos-codigos-mobile {
        background-color: transparent; /* saca el recuadro #F0F5FA */
        padding: 0;
        margin: 0;
    }

        .cuantos-codigos-mobile img {
            display: block;
            width: 100%;
            height: auto;
        }
}


/* Botón circular de navegación */
.btn-circle-color {
    border: none;
    background: #fff;
    box-shadow: 0 2px 6px rgba(38,38,38,.15);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fondoAcuerdos {
    background: var(--gs1-color-blue);
}




.plan-block__banner-row--annual {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

    .plan-block__banner-row--annual .plan-block__banner:first-child {
        grid-column: span 2;
    }

.starter-col--center {
    justify-content: flex-end;
}

.starter-tab,
.plan-card__cta--starter {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-block__banner--blue .plan-block__banner-title,
.plan-block__banner--blue .plan-block__banner-text,
.plan-block__banner--blue .plan-block__banner-sub {
    color: var(--gs1-color-blue);
}

/* ===== ESTADO ACTIVO: efecto azul que se mueve entre las tarjetas ===== */
.plan-card--annual.is-active .plan-card__eyebrow,
.plan-card--annual.is-active .plan-card__name {
    color: #fff;
}

/* Botón anual: contorno por defecto, sólido cuando la tarjeta está activa */
.plan-card--annual .plan-card__cta {
    background: #fff;
    color: var(--gs1-color-blue);
    border: 2px solid var(--gs1-color-blue);
    font-size: 0.88rem;
    white-space: nowrap;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

    .plan-card--annual .plan-card__cta:hover {
        background: var(--gs1-color-blue);
        color: #fff;
        text-decoration: none;
    }

.plan-card--annual.is-active .plan-card__cta {
    background-color: var(--brand-blue-dark);
    color: #fff;
    border-color: var(--brand-blue-dark);
}

    .plan-card--annual.is-active .plan-card__cta:hover {
        background: var(--gs1-color-blue);
        border-color: var(--gs1-color-blue);
        color: #fff;
    }

@media (max-width:900px) {
    .plan-card--annual.is-active .plan-card__head {
        min-height: 0;
    }

    .plan-block__banner-row--annual {
        grid-template-columns: 1fr;
    }

        .plan-block__banner-row--annual .plan-block__banner:first-child {
            grid-column: auto;
        }
}


/* ==========================================================
   ENCABEZADOS ANUALES (Básico / Estándar / Completo)
   Versión final compacta y alineada
   ========================================================== */
.plan-card--annual .plan-card__head {
    text-align: center;
    padding: 1.25rem 1.5rem 0.85rem;
    margin: 0 -1.5rem 1.25rem;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid var(--border);
}

.plan-card--annual.is-active {
    border-color: var(--gs1-color-blue);
    border-width: 2px;
    box-shadow: 0 4px 24px rgba(0,44,108,0.12);
    overflow: hidden; /* la card redondea y recorta el azul */
}

    .plan-card--annual.is-active .plan-card__head {
        background-color: var(--gs1-color-blue);
        border-bottom: none;
        border-radius: 0; /* el redondeo lo pone la card */
        min-height: calc(88px + 1.5rem);
        /* tapa el padding (1.5rem) + el borde (2px) arriba y a los costados */
        margin: calc(-1.5rem - 2px) calc(-1.5rem - 2px) 1.25rem;
    }


/* ==========================================================
   AJUSTES MOBILE — Home códigos de barras 2026
   (solo afectan ≤767.98px; el desktop queda igual)
   ========================================================== */
@media (max-width: 767.98px) {

    /* "¿Cuántos códigos necesito?" — título y párrafo centrados */
    .cuantos-codigos {
        text-align: center;
    }

        /* Títulos "¿Cuántos códigos necesito?" y "Empezá a codificar…"
       con la MISMA tipografía que "Preguntas frecuentes" (28px / 300 / azul GS1) */
        .cuantos-codigos h3,
        .seccion-cta-membresia h3 {
            font-size: 28px;
            font-weight: 300;
            line-height: 1.2;
            color: #002c6c;
        }
}

/* Menos espacio entre la imagen del pack y el precio (solo cards anuales) */
.plan-hex--annual {
    margin: 0.25rem 0 0.5rem; /* antes: 0.5rem 0 1.25rem (heredado de .plan-hex) */
}

.plan-card--annual .plan-card__price {
    margin-top: 0.75rem; /* antes: 3rem (heredado de .plan-card__price) */
}

.plan-card__period--placeholder {
    visibility: hidden;
}

.plan-card__info-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    vertical-align: -2px;
}

html {
    scroll-behavior: smooth;
}

#info-membresias {
    scroll-margin-top: 100px; /* ajustá según altura de tu header sticky */
}

.advisor-bar__info-icon {
    stroke-linecap: round;
    stroke-linejoin: round;
}