/*
|--------------------------------------------------------------------------
| Invención Digital - Estilos principales
|--------------------------------------------------------------------------
| Paleta inicial inspirada en la identidad azul/cian del sitio actual.
| Este archivo sustituye style.css + botones.css en la primera etapa.
*/

:root {
    /*
     * Azul principal de Invención Digital.
     * Está inspirado en una estética tecnológica tipo HP,
     * pero sigue funcionando como identidad propia del sitio.
     */
    --indi-blue-950: #05263a;
    --indi-blue-900: #003f63;
    --indi-blue-800: #005f8f;
    --indi-blue-700: #0077ad;
    --indi-blue-600: #0096d6;
    --indi-cyan-500: #20b8e6;
    --indi-cyan-300: #7bdcf4;
    --indi-orange-500: #ff8a2a;
    --indi-orange-600: #ed7112;
    --indi-green-500: #1fbd78;
    --indi-red-500: #e65454;

    --indi-ink: #10253b;
    --indi-muted: #60758a;
    --indi-line: #dce7f1;
    --indi-soft: #f3f7fb;
    --indi-white: #ffffff;

    --indi-shadow-sm: 0 8px 24px rgba(12, 55, 91, 0.08);
    --indi-shadow-md: 0 18px 45px rgba(12, 55, 91, 0.13);
    --indi-shadow-lg: 0 28px 70px rgba(6, 39, 68, 0.2);

    --indi-radius-sm: 10px;
    --indi-radius-md: 18px;
    --indi-radius-lg: 28px;

    --indi-transition: 180ms ease;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--indi-white);
    color: var(--indi-ink);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.55;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--indi-white);
    box-shadow: 0 8px 30px rgba(8, 35, 63, 0.08);
}

/* =========================
   BARRA SUPERIOR
========================= */

.top-bar {
    /*
     * Azul marino profundo para separar visualmente la barra
     * superior del degradado brillante de la cabecera principal.
     */
    background: linear-gradient(
        90deg,
        #061f33 0%,
        #082c46 52%,
        #0b3858 100%
    );
    color: rgba(255, 255, 255, 0.97);
    font-size: 0.82rem;
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        0 2px 8px rgba(2, 24, 41, 0.28);
}

.top-bar__inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.top-bar__contact,
.top-bar__phones {
    display: flex;
    align-items: center;
}

.top-bar__contact {
    gap: 14px;
}

.top-bar__phones {
    gap: 10px;
}

.top-bar__contact a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    transition:
        color var(--indi-transition),
        transform var(--indi-transition);
}

.top-bar__phone i {
    color: #ffd237;
    font-size: 0.92rem;
    filter: drop-shadow(0 2px 4px rgba(68, 49, 0, 0.18));
}

.top-bar__phone strong {
    font-weight: 800;
    letter-spacing: 0.01em;
}

.top-bar__separator {
    color: rgba(255, 255, 255, 0.62);
}

.top-bar__email i {
    color: #d8efff;
}

.top-bar__contact a:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

/* =========================
   CABECERA DE MARCA
========================= */

.brand-header {
    position: relative;
    z-index: 1300;
    overflow: visible;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255, 255, 255, 0.18),
            transparent 28%
        ),
        /*
         * Comienza con el azul intenso elegido para Invención Digital
         * (#284CD8) y se aclara progresivamente hacia el cian.
         */
        linear-gradient(
            108deg,
            #284cd8 0%,
            #2764dd 28%,
            #1d82dd 52%,
            #159fdf 74%,
            #37bfe8 100%
        );
}

.brand-header__inner {
    min-height: 116px;
    display: grid;
    grid-template-columns: minmax(245px, 310px) minmax(300px, 1fr) auto;
    align-items: center;
    gap: 30px;
    padding-top: 11px;
    padding-bottom: 11px;
}

.site-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--indi-white);
    text-decoration: none;
    transition:
        transform var(--indi-transition),
        filter var(--indi-transition);
}

.site-brand__logo {
    width: auto;
    max-width: 285px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 7px 15px rgba(0, 45, 78, 0.2));
}

.site-brand:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.04);
}

.site-brand__symbol {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.9rem;
    backdrop-filter: blur(8px);
}

.site-brand__text {
    display: grid;
    line-height: 0.95;
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}

.site-brand__text strong {
    font-weight: 800;
}

.site-brand__text span {
    justify-self: end;
    font-weight: 500;
}

.header-search {
    position: relative;
    z-index: 1055;

    height: 48px;

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

    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 12px;

    background: var(--indi-white);

    box-shadow: var(--indi-shadow-sm);

    /*
        IMPORTANTE:
        no usar overflow:hidden porque cortaría
        las sugerencias que salen debajo.
    */
    overflow: visible;
}

.header-search__input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 18px;
    color: var(--indi-ink);
    background: transparent;
}

.header-search__input::placeholder {
    color: #8699aa;
}

.header-search__button {
    border: 0;
    border-left: 1px solid var(--indi-line);
    border-radius: 0 11px 11px 0;
    background: #f8fbfd;
    color: var(--indi-blue-800);
    font-size: 1.18rem;
    transition:
        background var(--indi-transition),
        color var(--indi-transition);
}

.header-search__button:hover {
    background: var(--indi-blue-950);
    color: var(--indi-white);
}

.header-search {
    position: relative;
    z-index: 1310;
}

.indi-search-wrapper {
    position: relative;
    z-index: 1311;
}

.sugerencias-box {
    z-index: 1320;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-social {
    display: flex;
    gap: 7px;
}

.header-social__link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    box-shadow:
        0 5px 13px rgba(11, 57, 93, 0.20),
        inset 0 1px 1px rgba(255, 255, 255, 0.24);
    transition:
        transform var(--indi-transition),
        box-shadow var(--indi-transition),
        filter var(--indi-transition);
}

.header-social__link--facebook {
    background: #1877f2;
}

.header-social__link--instagram {
    background: radial-gradient(
        circle at 32% 106%,
        #ffd600 0 22%,
        #ff7a00 23% 42%,
        #ff0169 43% 63%,
        #d300c5 64% 78%,
        #7638fa 79% 100%
    );
}

.header-social__link--tiktok {
    background: #101010;
}

.header-social__link--youtube {
    background: #ff0000;
}

.header-social__link--linkedin {
    background: #0a66c2;
}

.header-social__link:hover {
    transform: translateY(-3px) scale(1.08);
    color: #ffffff;
    filter: saturate(1.12) brightness(1.05);
    box-shadow:
        0 9px 18px rgba(11, 57, 93, 0.28),
        0 0 0 3px rgba(255, 255, 255, 0.16);
}

.header-action,
.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--indi-white);
    text-decoration: none;
    white-space: nowrap;
}

.header-action > i,
.header-cart > i {
    font-size: 1.55rem;
}

.header-action span,
.header-cart__text {
    display: grid;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.15;
}

.header-action small,
.header-cart__text small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 500;

}

.header-cart {
    min-height: 48px;
    padding: 0 19px;
    border: 2px solid #00b956;
    border-radius: 13px;
    background: #ffffff;
    color: #079447;
    box-shadow:
        0 7px 18px rgba(5, 83, 48, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65);
    transition:
        transform 0.28s ease,
        background 0.28s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.header-cart > i {
    color: #00a84f;
    transition:
        transform 0.28s ease,
        color 0.28s ease;
}

.header-cart__text {
    color: #087a3f;
    transition: color 0.28s ease;
}

.header-cart__text small {
    color: #2f9461;
    transition: color 0.28s ease;
}

.header-cart:hover,
.header-cart:focus-visible {
    transform: translateY(-3px) scale(1.025);
    border-color: #00c853;
    background: #00c853;
    color: #ffffff;
    box-shadow:
        0 13px 26px rgba(0, 136, 67, 0.28),
        0 0 0 4px rgba(255, 255, 255, 0.13),
        0 0 24px rgba(0, 200, 83, 0.26);
}

.header-cart:hover > i,
.header-cart:focus-visible > i {
    color: #ffffff;
    transform: translateY(-1px) rotate(-7deg) scale(1.13);
}

.header-cart:hover .header-cart__text,
.header-cart:hover .header-cart__text small,
.header-cart:focus-visible .header-cart__text,
.header-cart:focus-visible .header-cart__text small {
    color: #ffffff;
}

.header-cart:active {
    transform: translateY(-1px) scale(0.99);
}

.header-cart__badge {
    position: absolute;
    top: -11px;
    right: -10px;
    z-index: 3;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #e60023;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        0 4px 10px rgba(120, 0, 20, 0.35),
        0 0 0 2px rgba(230, 0, 35, 0.15);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.header-cart:hover .header-cart__badge {
    transform: scale(1.12);
    box-shadow:
        0 6px 14px rgba(120, 0, 20, 0.42),
        0 0 0 4px rgba(230, 0, 35, 0.18);
}

.header-cart__badge.has-items {
    animation: indiCartBadgePulse 2.4s ease-in-out infinite;
}

@keyframes indiCartBadgePulse {
    0%,
    70%,
    100% {
        transform: scale(1);
    }

    78% {
        transform: scale(1.16);
    }

    86% {
        transform: scale(1);
    }

    93% {
        transform: scale(1.09);
    }
}

/* =========================
   NAVEGACIÓN
========================= */

.site-navigation {
    min-height: 56px;
    padding: 0;
    background: var(--indi-white);
    border-bottom: 1px solid var(--indi-line);
}

.site-navigation .navbar-nav {
    gap: 8px;
}

.site-navigation .nav-link {
    position: relative;
    padding: 18px 14px !important;
    color: var(--indi-ink);

    font-size: 1rem;
    font-weight: 700;
}

.site-navigation .nav-link::after {
    transition: transform var(--indi-transition);
}

.site-navigation .nav-link:not(.dropdown-toggle)::before {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 10px;
    left: 14px;
    height: 2px;
    border-radius: 99px;
    background: var(--indi-blue-600);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--indi-transition);
}

.site-navigation .nav-link:hover,
.site-navigation .nav-link:focus {
    color: var(--indi-blue-700);
}

.site-navigation .nav-link:hover::before {
    transform: scaleX(1);
}

.site-navigation .nav-link--accent {
    color: var(--indi-orange-600);
}

.site-navigation .dropdown-menu {
    padding: 10px;
    border: 1px solid var(--indi-line);
    border-radius: 14px;
    box-shadow: var(--indi-shadow-md);
}

.site-navigation .dropdown-item {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.site-navigation .dropdown-item:hover {
    background: #eaf6fd;
    color: var(--indi-blue-800);
}

.mobile-menu-label {
    margin-left: 10px;
    color: var(--indi-ink);
    font-weight: 700;
}

.mobile-account {
    display: grid;
    gap: 10px;
    padding: 16px 0 20px;
    border-top: 1px solid var(--indi-line);
}

.mobile-account a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--indi-blue-800);
    text-decoration: none;
    font-weight: 700;
}

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

.btn-primary-indi,
.btn-secondary-indi,
.btn-light-indi {
    min-height: 50px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 800;
    transition:
        transform var(--indi-transition),
        box-shadow var(--indi-transition),
        background var(--indi-transition);
}

.btn-primary-indi {
    background: var(--indi-orange-500);
    color: var(--indi-white);
    box-shadow: 0 12px 28px rgba(255, 138, 42, 0.27);
}

.btn-primary-indi:hover {
    transform: translateY(-2px);
    background: var(--indi-orange-600);
    color: var(--indi-white);
}

.btn-secondary-indi {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.12);
    color: var(--indi-white);
    backdrop-filter: blur(8px);
}

.btn-secondary-indi:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
    color: var(--indi-white);
}

.btn-light-indi {
    background: var(--indi-white);
    color: var(--indi-blue-900);
    box-shadow: var(--indi-shadow-sm);
}

.btn-light-indi:hover {
    transform: translateY(-2px);
    color: var(--indi-blue-700);
}

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

.home-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            125deg,
            var(--indi-blue-950) 0%,
            var(--indi-blue-800) 54%,
            var(--indi-blue-600) 100%
        );
    color: var(--indi-white);
}

.home-hero__inner {
    position: relative;
    z-index: 2;
    min-height: 570px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
    align-items: center;
    gap: 70px;
    padding-top: 70px;
    padding-bottom: 70px;
}

.home-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}

.home-hero__glow--one {
    top: -180px;
    right: -120px;
    width: 520px;
    height: 520px;
    background: rgba(32, 185, 232, 0.24);
}

.home-hero__glow--two {
    bottom: -260px;
    left: 30%;
    width: 620px;
    height: 620px;
    background: rgba(255, 255, 255, 0.08);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--indi-blue-700);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-hero .eyebrow {
    color: var(--indi-cyan-300);
}

.eyebrow--light {
    color: var(--indi-cyan-300);
}

.home-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(2.55rem, 5vw, 4.65rem);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.home-hero h1 span {
    display: block;
    color: var(--indi-cyan-300);
}

.home-hero__content > p {
    max-width: 660px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.08rem;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.home-hero__mini-features {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
}

.home-hero__mini-features span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.home-hero__mini-features i {
    color: var(--indi-cyan-300);
}

.home-hero__visual {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-product-card {
    position: relative;
    width: min(100%, 430px);
    min-height: 390px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 34px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(231, 247, 255, 0.9)
        );
    color: var(--indi-ink);
    box-shadow: var(--indi-shadow-lg);
    transform: rotate(2deg);
}

.hero-product-card__label {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--indi-blue-950);
    color: var(--indi-white);
    font-size: 0.72rem;
    font-weight: 800;
}

.hero-product-card > img,
.hero-product-card__placeholder {
    width: 100%;
    height: 270px;
    object-fit: contain;
}

.hero-product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--indi-blue-700);
    font-size: 8rem;
}

.hero-product-card__info {
    display: grid;
    gap: 3px;
}

.hero-product-card__info small {
    color: var(--indi-blue-700);
    font-weight: 800;
    text-transform: uppercase;
}

.hero-product-card__info strong {
    font-size: 1.12rem;
}

.hero-floating-card {
    position: absolute;
    z-index: 3;
    min-width: 210px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    color: var(--indi-ink);
    box-shadow: var(--indi-shadow-md);
    backdrop-filter: blur(12px);
}

.hero-floating-card i {
    color: var(--indi-blue-700);
    font-size: 1.5rem;
}

.hero-floating-card span {
    display: grid;
    color: var(--indi-muted);
    font-size: 0.78rem;
}

.hero-floating-card strong {
    color: var(--indi-ink);
    font-size: 0.88rem;
}

.hero-floating-card--top {
    top: 34px;
    right: -10px;
}

.hero-floating-card--bottom {
    bottom: 26px;
    left: -25px;
}

/* =========================
   BENEFICIOS
========================= */

.service-benefits {
    position: relative;
    z-index: 4;
    margin-top: -34px;
}

.service-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--indi-line);
    border-radius: var(--indi-radius-md);
    background: var(--indi-white);
    box-shadow: var(--indi-shadow-md);
    overflow: hidden;
}

.service-benefit {
    min-width: 0;
    padding: 24px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.service-benefit + .service-benefit {
    border-left: 1px solid var(--indi-line);
}

.service-benefit > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e9f7fd;
    color: var(--indi-blue-700);
    font-size: 1.3rem;
}

.service-benefit strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.92rem;
}

.service-benefit p {
    margin: 0;
    color: var(--indi-muted);
    font-size: 0.78rem;
}

/* =========================
   ENCABEZADOS DE SECCIÓN
========================= */

.section-heading {
    margin-bottom: 34px;
}

.section-heading h2 {
    margin: 0;
    color: var(--indi-ink);
    font-size: clamp(1.9rem, 3vw, 2.75rem);
    font-weight: 850;
    letter-spacing: -0.045em;
}

.section-heading p {
    max-width: 660px;
    margin: 12px 0 0;
    color: var(--indi-muted);
}

.section-heading--center {
    max-width: 760px;
    margin-right: auto;
    margin-bottom: 34px;
    margin-left: auto;
    text-align: center;
}

.section-heading--center p {
    margin-right: auto;
    margin-left: auto;
}

.section-heading--split {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--indi-blue-700);
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
}

/* =========================
   MARCAS
========================= */

.brands-section {
    padding: 110px 0 70px;
    background: var(--indi-white);
}

.brand-pills {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.brand-pills a {
    min-height: 86px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--indi-line);
    border-radius: 16px;
    background: var(--indi-white);
    color: var(--indi-blue-900);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 900;
    box-shadow: var(--indi-shadow-sm);
    transition:
        transform var(--indi-transition),
        border-color var(--indi-transition),
        box-shadow var(--indi-transition);
}

.brand-pills a:hover {
    transform: translateY(-5px);
    border-color: var(--indi-cyan-500);
    box-shadow: var(--indi-shadow-md);
}

/* =========================
   PRODUCTOS
========================= */

.products-section {
    padding: 80px 0 100px;
    background: var(--indi-soft);
}

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

.product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--indi-line);
    border-radius: var(--indi-radius-md);
    background: var(--indi-white);
    box-shadow: var(--indi-shadow-sm);
    overflow: hidden;
    transition:
        transform var(--indi-transition),
        box-shadow var(--indi-transition),
        border-color var(--indi-transition);
}

.product-card:hover {
    transform: translateY(-7px);
    border-color: #b9d9ed;
    box-shadow: var(--indi-shadow-md);
}

.product-card__media {
    position: relative;
    min-height: 290px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at center,
            #ffffff,
            #f2f8fc 75%
        );
    overflow: hidden;
}

.product-card__media > a {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 260ms ease;
}

.product-card:hover .product-card__media img {
    transform: scale(1.045);
}

.product-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #9bb0c2;
    text-align: center;
}

.product-card__placeholder i {
    font-size: 3.6rem;
}

.product-card__placeholder small {
    max-width: 170px;
}

.product-card__badges {
    position: absolute;
    top: 16px;
    right: 16px;
    left: 16px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.product-badge {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.product-badge--offer {
    background: var(--indi-orange-500);
    color: var(--indi-white);
}

.product-badge--stock {
    margin-left: auto;
    background: #e4f8ef;
    color: #087d4b;
}

.product-badge--order {
    margin-left: auto;
    background: #fff0e4;
    color: #b9580c;
}

.product-card__body {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--indi-muted);
    font-size: 0.75rem;
}

.product-card__meta span {
    color: var(--indi-blue-700);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-card__body h3 {
    min-height: 53px;
    margin: 13px 0 6px;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.32;
}

.product-card__body h3 a {
    text-decoration: none;
}

.product-card__body h3 a:hover {
    color: var(--indi-blue-700);
}

.product-card__model {
    margin: 0;
    color: var(--indi-muted);
    font-size: 0.83rem;
}

.product-card__price {
    min-height: 67px;
    margin-top: auto;
    padding-top: 18px;
    display: grid;
    align-content: end;
}

.product-card__price small {
    color: #8798a8;
    text-decoration: line-through;
}

.product-card__price strong {
    color: var(--indi-blue-900);
    font-size: 1.55rem;
    letter-spacing: -0.03em;
}

.product-card__price strong span {
    color: var(--indi-muted);
    font-size: 0.7rem;
    letter-spacing: 0;
}

.product-card__price .price-pending {
    color: var(--indi-blue-700);
    font-size: 1.12rem;
}

.product-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.product-button {
    min-height: 44px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    transition:
        transform var(--indi-transition),
        background var(--indi-transition),
        color var(--indi-transition);
}

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

.product-button--details {
    border-color: var(--indi-blue-700);
    color: var(--indi-blue-700);
}

.product-button--details:hover {
    background: var(--indi-blue-700);
    color: var(--indi-white);
}

.product-button--quote {
    background: var(--indi-green-500);
    color: var(--indi-white);
}

.product-button--quote:hover {
    background: #159961;
    color: var(--indi-white);
}

.empty-products {
    padding: 65px 24px;
    border: 1px dashed #aac5d8;
    border-radius: var(--indi-radius-md);
    background: var(--indi-white);
    text-align: center;
}

.empty-products > i {
    color: var(--indi-blue-600);
    font-size: 3rem;
}

.empty-products h3 {
    margin: 14px 0 4px;
}

.empty-products p {
    margin: 0;
    color: var(--indi-muted);
}

/* =========================
   CTA
========================= */

.business-cta {
    padding: 90px 0;
    background: var(--indi-white);
}

.business-cta__box {
    position: relative;
    overflow: hidden;
    padding: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    border-radius: var(--indi-radius-lg);
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(32, 185, 232, 0.33),
            transparent 32%
        ),
        linear-gradient(
            115deg,
            var(--indi-blue-950),
            var(--indi-blue-700)
        );
    color: var(--indi-white);
    box-shadow: var(--indi-shadow-lg);
}

.business-cta__box > div {
    max-width: 800px;
}

.business-cta h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3.3vw, 3rem);
    font-weight: 850;
    letter-spacing: -0.045em;
}

.business-cta p {
    max-width: 680px;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.75);
}

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

.site-footer {
    padding: 70px 0 0;
    background: var(--indi-blue-950);
    color: rgba(255, 255, 255, 0.72);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.45fr 0.8fr 0.9fr 1.1fr;
    gap: 55px;
    padding-bottom: 52px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--indi-white);
    text-decoration: none;
    font-size: 1.45rem;
    line-height: 0.95;
}

.footer-brand img {
    max-width: 220px;
    max-height: 85px;
    object-fit: contain;
}

.footer-brand__symbol {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

.footer-brand > span:last-child {
    display: grid;
}

.site-footer__brand p {
    max-width: 440px;
    margin: 20px 0 0;
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    gap: 9px;
    margin-top: 23px;
}

.footer-social a {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    color: var(--indi-white);
    text-decoration: none;
    transition:
        transform var(--indi-transition),
        background var(--indi-transition);
}

.footer-social a:hover {
    transform: translateY(-3px);
    background: var(--indi-blue-700);
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.site-footer__column h3 {
    margin: 0 0 8px;
    color: var(--indi-white);
    font-size: 1rem;
}

.site-footer__column > a {
    color: inherit;
    text-decoration: none;
    font-size: 0.88rem;
    transition: color var(--indi-transition);
}

.site-footer__column > a:hover {
    color: var(--indi-cyan-300);
}

.site-footer__contact > a,
.footer-contact-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.site-footer__contact i {
    margin-top: 3px;
    color: var(--indi-cyan-300);
    font-size: 1rem;
}

.site-footer__contact span {
    display: grid;
    overflow-wrap: anywhere;
}

.site-footer__contact small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.site-footer__bottom {
    min-height: 72px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__bottom > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px;
}

.site-footer__bottom a {
    color: inherit;
    text-decoration: none;
}

.site-footer__bottom a:hover {
    color: var(--indi-cyan-300);
}

/* =========================
   FLOTANTES
========================= */

.floating-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1030;
    min-height: 54px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    background: #20bf6b;
    color: var(--indi-white);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow: 0 16px 35px rgba(19, 128, 72, 0.3);
    transition: transform var(--indi-transition);
}

.floating-whatsapp i {
    font-size: 1.3rem;
}

.floating-whatsapp:hover {
    transform: translateY(-4px);
    color: var(--indi-white);
}

.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 1020;
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--indi-blue-950);
    color: var(--indi-white);
    box-shadow: var(--indi-shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity var(--indi-transition),
        transform var(--indi-transition),
        visibility var(--indi-transition);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1199.98px) {
    .brand-header__inner {
        grid-template-columns: 255px 1fr auto;
        gap: 20px;
    }

    .header-action span,
    .header-cart__text {
        display: none;
    }

    .header-cart {
        width: 47px;
        padding: 0;
        justify-content: center;
    }

    .home-hero__inner {
        grid-template-columns: 1fr 0.8fr;
        gap: 40px;
    }

    .service-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-benefit:nth-child(3) {
        border-top: 1px solid var(--indi-line);
        border-left: 0;
    }

    .service-benefit:nth-child(4) {
        border-top: 1px solid var(--indi-line);
    }

    .site-footer__grid {
        grid-template-columns: 1.35fr 0.8fr 0.9fr;
    }

    .site-footer__contact {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .site-footer__contact h3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .top-bar__message {
        display: none;
    }

    .top-bar__inner {
        justify-content: center;
    }

    .brand-header__inner {
        grid-template-columns: 1fr auto;
        min-height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .site-brand__logo {
        max-width: 235px;
        height: 76px;
    }

    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .header-actions {
        justify-self: end;
    }

    .site-navigation {
        min-height: 52px;
    }

    .site-navigation .container-xl {
        justify-content: flex-start;
    }

    .site-navigation .navbar-collapse {
        margin-top: 10px;
        padding: 0 6px;
        border-top: 1px solid var(--indi-line);
    }

    .site-navigation .navbar-nav {
        gap: 0;
    }

    .site-navigation .nav-link {
        padding: 13px 4px !important;
    }

    .site-navigation .nav-link:not(.dropdown-toggle)::before {
        display: none;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .home-hero__content {
        max-width: 760px;
    }

    .home-hero__visual {
        width: min(100%, 570px);
        margin: 0 auto;
    }

    .hero-floating-card--top {
        right: 0;
    }

    .hero-floating-card--bottom {
        left: 0;
    }

    .brand-pills {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .product-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 12px);
        justify-self: center;
    }

    .business-cta__box {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .top-bar__contact {
        width: 100%;
        justify-content: center;
        gap: 9px;
    }

    .top-bar__phones {
        gap: 7px;
    }

    .top-bar__contact a {
        font-size: 0.74rem;
    }

    .top-bar__separator--email,
    .top-bar__email {
        display: none !important;
    }

    .site-brand__symbol {
        width: 48px;
        height: 48px;
    }

    .site-brand__text {
        font-size: 1.25rem;
    }

    .header-action {
        display: none;
    }

    .home-hero__inner {
        min-height: auto;
        padding-top: 52px;
        padding-bottom: 72px;
    }

    .home-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.65rem);
    }

    .home-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-primary-indi,
    .btn-secondary-indi {
        width: 100%;
    }

    .home-hero__visual {
        min-height: 365px;
    }

    .hero-product-card {
        min-height: 340px;
        padding: 22px;
    }

    .hero-product-card > img,
    .hero-product-card__placeholder {
        height: 235px;
    }

    .hero-floating-card {
        min-width: 180px;
        padding: 11px 13px;
    }

    .service-benefits {
        margin-top: -26px;
    }

    .service-benefits__grid {
        grid-template-columns: 1fr;
    }

    .service-benefit + .service-benefit,
    .service-benefit:nth-child(3),
    .service-benefit:nth-child(4) {
        border-top: 1px solid var(--indi-line);
        border-left: 0;
    }

    .brands-section {
        padding-top: 85px;
    }

    .brand-pills {
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-pills a:last-child {
        grid-column: 1 / -1;
    }

    .section-heading--split {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .product-card:last-child {
        grid-column: auto;
        width: 100%;
    }

    .business-cta__box {
        padding: 34px 25px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__contact {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .site-footer__contact h3 {
        grid-column: auto;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__bottom > div {
        justify-content: flex-start;
    }

    .floating-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 54px;
        padding: 0;
        justify-content: center;
    }

    .floating-whatsapp span {
        display: none;
    }

    .back-to-top {
        right: 21px;
        bottom: 82px;
    }
}

@media (max-width: 479.98px) {
    .top-bar__phone {
        font-size: 0.69rem !important;
    }

    .top-bar__phone:first-child strong {
        font-size: 0;
    }

    .top-bar__phone:first-child strong::after {
        content: "(55) 5682-8042";
        font-size: 0.69rem;
    }

    .top-bar__contact {
        justify-content: center;
    }

    .site-brand__logo {
        max-width: 205px;
        height: 65px;
    }

    .header-cart {
        width: 43px;
        min-height: 43px;
    }

    .header-search {
        height: 44px;
        grid-template-columns: 1fr 46px;
    }

    .home-hero__mini-features {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .hero-floating-card {
        display: none;
    }

    .home-hero__visual {
        min-height: 320px;
    }

    .hero-product-card {
        min-height: 310px;
    }

    .brand-pills {
        grid-template-columns: 1fr;
    }

    .brand-pills a:last-child {
        grid-column: auto;
    }

    .product-card__actions {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__brand,
    .site-footer__contact {
        grid-column: auto;
    }
}


/* ============================================================
   CARRUSEL PRINCIPAL - INVENCIÓN DIGITAL
   Geometría basada en el carrusel de Informática para el Diseño.
   Banners de escritorio: 1667 x 670 px.
============================================================ */

.indi-home-carousel-section {
    padding: 1px 0 20px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(40, 76, 216, 0.12),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0b1823 0%,
            #111b24 100%
        );
}

.indi-hero-carousel-shell {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 24px auto 52px;
    padding: 0 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   CARRUSEL CENTRAL
========================= */

.indi-home-carousel {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: visible;
}

.indi-home-carousel .carousel-inner {
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.indi-home-carousel .carousel-item,
.indi-home-carousel .carousel-item.active,
.indi-home-carousel .carousel-item-next,
.indi-home-carousel .carousel-item-prev {
    opacity: 1 !important;
}

.indi-home-carousel .carousel-item {
    height: auto;
    min-height: 0;
    border-radius: 18px;
    background: transparent;
    overflow: hidden;
    transition: transform 0.65s ease-in-out !important;
}

/* =========================
   BANNER 1667 x 670
========================= */

.indi-banner-link {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: transparent;
    text-decoration: none;
}

.indi-banner-link picture {
    width: 100%;
    display: block;
}

.indi-banner-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 18px;
    transform: none !important;

    transition:
        transform 0.38s ease,
        filter 0.38s ease;
}

.indi-banner-link:hover .indi-banner-image {
    transform: scale(1.012) !important;
    filter: saturate(1.025) brightness(1.01);
}

.indi-banner-placeholder {
    width: 100%;
    aspect-ratio: 1667 / 670;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    border-radius: 18px;
    color: #93a8b8;
    background:
        linear-gradient(
            135deg,
            #eaf3fb,
            #ffffff
        );
}

.indi-banner-placeholder i {
    color: #284cd8;
    font-size: 3.4rem;
}

/* =========================
   VISTAS LATERALES
========================= */

.indi-slide-preview {
    position: absolute;
    top: 22px;
    bottom: 22px;
    z-index: 1;
    width: 330px;

    border: 0;
    border-radius: 18px;

    background-color: #101820;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0.42;

    filter:
        brightness(0.82)
        saturate(0.95);

    cursor: pointer;
    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);

    transition:
        background-image 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease,
        filter 0.35s ease;
}

.indi-slide-preview::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.46),
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0.46)
        );
}

.indi-slide-preview--prev {
    left: 0;
}

.indi-slide-preview--next {
    right: 0;
}

.indi-slide-preview:hover,
.indi-slide-preview:focus-visible {
    opacity: 0.60;

    filter:
        brightness(0.9)
        saturate(1);

    transform: scale(1.012);
    outline: none;
}

/* =========================
   FLECHAS
========================= */

.indi-home-carousel .carousel-control-prev,
.indi-home-carousel .carousel-control-next {
    top: 50%;
    bottom: auto;
    z-index: 20;

    width: 64px;
    height: 64px;

    opacity: 1;

    transform: translateY(-50%);
}

.indi-home-carousel .carousel-control-prev {
    left: -82px;
}

.indi-home-carousel .carousel-control-next {
    right: -82px;
}

.indi-home-carousel .carousel-control-prev-icon,
.indi-home-carousel .carousel-control-next-icon {
    width: 58px;
    height: 58px;

    padding: 16px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;

    background-color: rgba(5, 18, 28, 0.72);
    background-size: 42% 42%;

    backdrop-filter: blur(6px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.42);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.indi-home-carousel .carousel-control-prev:hover
.carousel-control-prev-icon,
.indi-home-carousel .carousel-control-next:hover
.carousel-control-next-icon {
    transform: scale(1.08);
    background-color: rgba(40, 76, 216, 0.90);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.45),
        0 0 0 4px rgba(40, 76, 216, 0.14);
}

/* =========================
   INDICADORES
========================= */

.indi-home-carousel .carousel-indicators {
    bottom: -32px;
    z-index: 30;
    margin-bottom: 0;
}

.indi-home-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;

    margin: 0 4px;

    border: 0;
    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.82);

    opacity: 0.50;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease,
        background-color 0.22s ease;
}

.indi-home-carousel .carousel-indicators .active {
    width: 10px;
    opacity: 1;
    background-color: #5d7cff;
    transform: scale(1.13);
}

/* =========================
   CONTADOR PROMOCIONES
   Tamaño inspirado en Informática,
   colores propios de Invención Digital.
========================= */

.indi-promo-countdown {
    position: absolute;

    left: 50%;
    bottom: 14px;

    z-index: 40;

    transform:
        translateX(-50%)
        scale(0.78);

    transform-origin: center bottom;

    display: flex;
    flex-direction: column;
    align-items: center;

    pointer-events: none;
}

.indi-promo-countdown__title {
    width: max-content;
    max-width: min(90vw, 430px);

    margin: 0 auto 6px;

    padding: 5px 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;

    background: rgba(5, 31, 51, 0.88);
    color: #ffffff;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(8px);

    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;

    text-align: center;
    text-transform: uppercase;
}

.indi-promo-countdown__title i {
    color: #ff8a2a;
    font-size: 0.92rem;
}

.indi-countdown-boxes {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;
}

.indi-count-box {
    min-width: 50px;

    padding: 8px 6px;

    display: grid;
    gap: 3px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;

    background: rgba(5, 31, 51, 0.88);
    color: #ffffff;

    text-align: center;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(8px);
}

.indi-count-box .valor {
    color: #78e2ff;

    font-size: 1.10rem;
    font-weight: 800;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.indi-count-box small {
    color: rgba(255, 255, 255, 0.80);

    font-size: 0.55rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.indi-promo-countdown.is-finished {
    bottom: 18px;
}

/* =========================
   SIN BANNERS
========================= */

.indi-carousel-empty {
    min-height: 260px;
    padding: 35px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.25);
}

.indi-carousel-empty__icon {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.10);
    color: #78e2ff;

    font-size: 1.8rem;
}

.indi-carousel-empty strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 1.05rem;
}

.indi-carousel-empty p {
    margin: 0;
}

/*
 * La sección de beneficios conserva su diseño actual.
 * Solo eliminamos el margen negativo del hero anterior.
 */
.indi-home-carousel-section + .service-benefits {
    margin-top: 0;
}

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

@media (max-width: 991.98px) {

    .indi-home-carousel-section {
        padding-top: 1px;
        padding-bottom: 18px;
    }

    .indi-hero-carousel-shell {
        width: 100%;
        max-width: 95%;

        margin: 10px auto 20px;

        padding: 0;
    }

    .indi-slide-preview {
        display: none !important;
    }

    .indi-home-carousel {
        max-width: 100%;
        margin: 0 auto;
    }

    .indi-home-carousel .carousel-control-prev,
    .indi-home-carousel .carousel-control-next {
        width: 52px;
        height: 52px;
    }

    .indi-home-carousel .carousel-control-prev {
        left: 8px;
    }

    .indi-home-carousel .carousel-control-next {
        right: 8px;
    }

    .indi-home-carousel .carousel-control-prev-icon,
    .indi-home-carousel .carousel-control-next-icon {
        width: 45px;
        height: 45px;
        padding: 12px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 767.98px) {

    .indi-home-carousel-section {
        padding-top: 1px;
        padding-bottom: 16px;
    }

    .indi-hero-carousel-shell {
        width: calc(100% - 16px);
        max-width: none;

        margin: 8px auto 18px;
    }

    .indi-home-carousel,
    .indi-home-carousel .carousel-inner,
    .indi-home-carousel .carousel-item,
    .indi-banner-link,
    .indi-banner-image {
        border-radius: 12px;
    }

    /*
     * Si ImagenMovil también usa 1667x670, conservará exactamente
     * la misma proporción. Si más adelante haces banners verticales,
     * basta con añadir una regla específica para esa imagen.
     */
    .indi-banner-image {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .indi-promo-countdown {
        left: 10px;
        right: auto;

        bottom: 15px;

        transform: scale(0.65);
        transform-origin: left bottom;

        align-items: flex-start;
    }

    .indi-promo-countdown__title {
        display: none !important;
    }

    .indi-countdown-boxes {
        justify-content: flex-start;
        gap: 4px;
    }

    .indi-count-box {
        min-width: 32px;

        padding: 4px;

        border-radius: 6px;
    }

    .indi-count-box .valor {
        font-size: 0.75rem;
    }

    .indi-count-box small {
        font-size: 0.40rem;
    }

    .indi-home-carousel .carousel-control-prev,
    .indi-home-carousel .carousel-control-next {
        width: 42px;
        height: 42px;
    }

    .indi-home-carousel .carousel-control-prev {
        left: 5px;
    }

    .indi-home-carousel .carousel-control-next {
        right: 5px;
    }

    .indi-home-carousel .carousel-control-prev-icon,
    .indi-home-carousel .carousel-control-next-icon {
        width: 36px;
        height: 36px;

        padding: 10px;

        border-width: 1px;
    }

    .indi-home-carousel .carousel-indicators {
        bottom: -27px;
    }

    .indi-carousel-empty {
        min-height: 210px;
        padding: 25px 20px;

        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .indi-home-carousel .carousel-item,
    .indi-banner-image,
    .indi-slide-preview {
        transition: none !important;
    }
}


/* ============================================================
   CARRUSEL DE MARCAS - HOME
============================================================ */

.home-brands {
    position: relative;
    z-index: 6;

    padding: 18px 0 22px;

    background: #ffffff;

    border-bottom:
        1px solid rgba(7, 54, 87, 0.08);
}

.brand-carousel {
    position: relative;

    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;

    gap: 10px;

    max-width: 1160px;

    margin: 0 auto;
}

.brand-carousel__viewport {
    width: 100%;

    overflow: hidden;

    /*
     * Permitimos el desplazamiento vertical normal de la página,
     * pero los gestos horizontales del carrusel los controla JS.
     */
    touch-action: pan-y;

    -webkit-user-select: none;
    user-select: none;
}

.brand-carousel__track {
    display: flex;
    align-items: center;

    gap: 18px;

    width: max-content;
    min-width: 0;

    transform: translate3d(0, 0, 0);

    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/*
 * El ancho se calcula con JavaScript usando el viewport visible.
 * Así las tres copias del loop no alteran el tamaño de cada marca.
 */
.brand-carousel__item {
    flex: 0 0 var(--brand-item-width, 190px);
    width: var(--brand-item-width, 190px);
}

.brand-carousel__item {
    position: relative;

    height: 86px;

    padding: 10px 14px;

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

    border-radius: 14px;

    color: var(--indi-blue-900);
    text-decoration: none;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        background 0.25s ease;
}

.brand-carousel__item::after {
    content: "";

    position: absolute;

    right: 15%;
    bottom: 5px;
    left: 15%;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #284cd8,
            transparent
        );

    opacity: 0;

    transform: scaleX(0.55);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.brand-carousel__item img {
    display: block;

    width: auto;
    height: auto;

    max-width: 88%;
    max-height: 58px;

    object-fit: contain;

    filter:
        saturate(0.96)
        contrast(1.02);

    transition:
        transform 0.28s ease,
        filter 0.28s ease;
}

.brand-carousel__fallback {
    font-size: 1.18rem;
    font-weight: 850;

    letter-spacing: -0.02em;

    text-align: center;
}

.brand-carousel__item:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f7fbff
        );
}

.brand-carousel__item:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.brand-carousel__item:hover img {
    transform: scale(1.055);

    filter:
        saturate(1.08)
        contrast(1.03);
}

/* =========================
   FLECHAS
========================= */

.brand-carousel__arrow {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #bcc4cb;

    font-size: 1.45rem;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        transform 0.22s ease;
}

.brand-carousel__arrow:hover,
.brand-carousel__arrow:focus-visible {
    color: #284cd8;

    background:
        rgba(40, 76, 216, 0.08);

    transform: scale(1.08);

    outline: none;
}

.brand-carousel__arrow:active {
    transform: scale(0.96);
}

/* =========================
   INDICADORES
========================= */

.brand-carousel__dots {
    min-height: 13px;

    margin-top: 5px;

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

    gap: 8px;
}

.brand-carousel__dots button {
    width: 5px;
    height: 5px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #c7cdd2;

    opacity: 0.75;

    transition:
        width 0.22s ease,
        height 0.22s ease,
        background 0.22s ease,
        opacity 0.22s ease,
        transform 0.22s ease;
}

.brand-carousel__dots button.is-active {
    width: 7px;
    height: 7px;

    background: #284cd8;

    opacity: 1;

    transform: scale(1.05);
}

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

@media (max-width: 991.98px) {

    .home-brands {
        padding-top: 15px;
        padding-bottom: 19px;
    }

    .brand-carousel {
        grid-template-columns:
            38px minmax(0, 1fr) 38px;

        gap: 6px;
    }

    .brand-carousel__track {
        gap: 16px;
    }

    .brand-carousel__item {
        height: 78px;

        padding:
            9px 12px;
    }

    .brand-carousel__item img {
        max-height: 52px;
    }

    .brand-carousel__arrow {
        width: 36px;
        height: 36px;

        font-size: 1.25rem;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 575.98px) {

    .home-brands {
        padding-top: 12px;
        padding-bottom: 17px;
    }

    .brand-carousel {
        grid-template-columns:
            31px minmax(0, 1fr) 31px;

        gap: 3px;
    }

    .brand-carousel__track {
        gap: 12px;
    }

    .brand-carousel__item {
        height: 68px;

        padding:
            8px 9px;

        border-radius: 10px;
    }

    .brand-carousel__item img {
        max-width: 90%;
        max-height: 44px;
    }

    .brand-carousel__fallback {
        font-size: 0.95rem;
    }

    .brand-carousel__arrow {
        width: 30px;
        height: 30px;

        font-size: 1rem;
    }

    .brand-carousel__dots {
        margin-top: 3px;

        gap: 6px;
    }
}

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

    .brand-carousel__item,
    .brand-carousel__item img,
    .brand-carousel__arrow {
        transition: none !important;
    }
}


/* ============================================================
   SECCIONES DE PRODUCTOS - INVENCIÓN DIGITAL
   Inspiradas en el formato de Informática para el Diseño.
============================================================ */

.indi-product-showcase {
    position: relative;

    padding:
        30px 0 46px;

    overflow: hidden;

    background: #ffffff;

    color: #10253b;

    border-top:
        1px solid rgba(9, 74, 119, 0.08);

    border-bottom:
        1px solid rgba(9, 74, 119, 0.08);
}

.indi-product-showcase__container {
    width: min(
        calc(100% - 28px),
        1500px
    );

    margin: 0 auto;
}

/* =========================
   ENCABEZADO DE SECCIÓN
========================= */

.indi-product-showcase__header {
    min-height: 58px;

    margin-bottom: 18px;

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

    gap: 25px;
}

.indi-product-showcase__header h2 {
    margin: 0;

    color: #10253b;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.75rem,
            2.2vw,
            2.25rem
        );

    font-weight: 400;

    letter-spacing: 0.015em;
    line-height: 1.1;
}

.indi-product-showcase__more {
    min-height: 42px;

    padding:
        0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex: 0 0 auto;

    border-radius: 13px;

    background:
        linear-gradient(
            105deg,
            #0877ee,
            #10b9df
        );

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 0.94rem;
    font-weight: 700;

    box-shadow:
        0 9px 20px
        rgba(0, 126, 230, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.indi-product-showcase__more:hover {
    transform:
        translateY(-2px);

    color: #ffffff;

    filter:
        brightness(1.04);

    box-shadow:
        0 13px 25px
        rgba(0, 126, 230, 0.34);
}

/* =========================
   CARRUSEL
========================= */

.indi-products-carousel {
    position: relative;

    padding:
        0 68px;
}

.indi-products-carousel__viewport {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        10px 0 14px;

    scrollbar-width: none;
    -ms-overflow-style: none;

    scroll-behavior: smooth;

    overscroll-behavior-x:
        contain;

    scroll-snap-type:
        x proximity;
}

.indi-products-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.indi-products-carousel__track {
    display: flex;
    align-items: stretch;

    gap: 24px;

    width: max-content;
}

/* =========================
   TARJETA
========================= */

.indi-catalog-card {
    position: relative;

    flex:
        0 0 332px;

    width: 332px;
    min-height: 0;

    display: flex;
    flex-direction: column;

    scroll-snap-align: start;

    border:
        1px solid #d9e2ea;

    border-radius: 12px;

    background: #ffffff;

    color: #161616;

    overflow: hidden;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    box-shadow:
        0 8px 22px
        rgba(16, 63, 98, 0.10);

    transition:
        transform 0.26s ease,
        box-shadow 0.26s ease,
        border-color 0.26s ease;
}

.indi-catalog-card:hover {
    transform:
        translateY(-5px);

    border-color:
        #9ccce7;

    box-shadow:
        0 15px 30px
        rgba(16, 89, 137, 0.16);
}

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

.indi-catalog-card__media {
    position: relative;

    min-height: 265px;

    padding:
        16px 16px 12px;

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

    background: #ffffff;

    overflow: hidden;
}

.indi-catalog-card__image-link {
    width: 100%;
    height: 235px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.indi-catalog-card__image-link img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.28s ease;
}

.indi-catalog-card:hover
.indi-catalog-card__image-link img {
    transform:
        scale(1.035);
}

.indi-catalog-card__placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;
    align-content: center;

    gap: 7px;

    color: #a6b0b7;
}

.indi-catalog-card__placeholder i {
    font-size: 3rem;
}

.indi-catalog-card__placeholder small {
    font-size: 0.76rem;
}

/* =========================
   BADGES
========================= */

.indi-catalog-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 4;

    padding:
        4px 10px;

    border-radius: 0;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;
}

.indi-catalog-badge--offer {
    background: #119fda;
    color: #ffffff;
}

.indi-catalog-stock {
    position: absolute;

    left: 50%;
    bottom: 11px;

    z-index: 5;

    transform:
        translateX(-50%);

    width: max-content;

    padding:
        7px 15px;

    border-radius: 5px;

    color: #ffffff;

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing:
        0.02em;
}

.indi-catalog-stock--order {
    background: #eba12a;

    box-shadow:
        0 5px 12px
        rgba(187, 117, 6, 0.25);
}

.indi-catalog-stock--available {
    background: #2bba67;

    box-shadow:
        0 5px 12px
        rgba(21, 130, 68, 0.20);
}

/* =========================
   CUERPO DE TARJETA
========================= */

.indi-catalog-card__body {
    flex: 1;

    padding:
        14px 16px 15px;

    display: flex;
    flex-direction: column;
}

.indi-catalog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

    font-size: 0.76rem;
}

.indi-catalog-card__brand {
    color: #0074b8;

    font-size: 0.80rem;
    font-weight: 700;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;
}

.indi-catalog-card__sku {
    color: #82919c;

    font-size: 0.72rem;
    font-weight: 500;

    letter-spacing:
        0.02em;
}

.indi-catalog-card__title {
    min-height: 0;

    margin:
        0 0 5px;

    font-size:
        1.16rem;

    font-weight: 650;

    letter-spacing:
        0.025em;

    line-height:
        1.20;

    text-transform:
        uppercase;
}

.indi-catalog-card__title a {
    color: #242424;

    text-decoration: none;
}

.indi-catalog-card__title a:hover {
    color: #006fb9;
}

.indi-catalog-card__model {
    min-height: 0;

    margin:
        0 0 9px;

    color: #4f6576;

    font-size: 0.98rem;
    font-weight: 450;

    letter-spacing:
        0.005em;

    line-height: 1.30;
}

/* =========================
   PRECIO
========================= */

.indi-catalog-card__price {
    min-height: 0;

    margin-top: 2px;

    padding-top: 3px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.indi-catalog-card__old-price {
    margin-bottom: 2px;

    color: #7f8a92;

    font-size: 0.88rem;
    font-weight: 400;

    text-decoration:
        line-through;
}

.indi-catalog-card__price strong {
    color: #0b3655;

    font-size: 1.32rem;
    font-weight: 700;

    letter-spacing:
        0.01em;
}

.indi-catalog-card__price strong small {
    color: #66727c;

    font-size: 0.63rem;
    font-weight: 600;
}

.indi-catalog-card__price
.indi-catalog-card__quote-price {
    color: #0074b8;

    font-size: 1.05rem;
    font-weight: 600;
}

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

.indi-catalog-card__actions {
    display: grid;
    grid-template-columns: 1fr;

    gap: 7px;

    margin-top: 11px;
}

.indi-product-action {
    min-height: 42px;

    padding:
        0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    text-decoration: none;

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;

    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease,
        border-color 0.22s ease;
}

.indi-product-action--details {
    border:
        2px solid #202020;

    background: #ffffff;

    color: #111111;
}

.indi-product-action--details:hover {
    background: #111111;

    color: #ffffff;

    transform:
        translateY(-1px);
}

.indi-product-action--cart,
.indi-product-action--whatsapp {
    border:
        2px solid #14b95f;

    background: #14b95f;

    color: #ffffff;
}

.indi-product-action--cart {
    width: 100%;
    cursor: pointer;
}

.indi-product-action--cart:hover,
.indi-product-action--whatsapp:hover {
    border-color: #0f994e;

    background: #0f994e;

    color: #ffffff;

    transform:
        translateY(-1px);
}

.indi-product-action--cart.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.indi-product-action--cart.is-added {
    border-color: #087c3e;
    background: #087c3e;
}

/* =========================
   FLECHAS
========================= */

.indi-products-carousel__arrow {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 54px;
    height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform:
        translateY(-50%);

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #068fea,
            #0ec1e8
        );

    color: #ffffff;

    font-size: 1.55rem;

    box-shadow:
        0 8px 20px
        rgba(0, 150, 220, 0.28);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

.indi-products-carousel__arrow--prev {
    left: 7px;
}

.indi-products-carousel__arrow--next {
    right: 7px;
}

.indi-products-carousel__arrow:hover {
    transform:
        translateY(-50%)
        scale(1.07);

    filter:
        brightness(1.05);

    box-shadow:
        0 11px 25px
        rgba(0, 150, 220, 0.40);
}

/* =========================
   ESTADO VACÍO
========================= */

.indi-product-showcase__empty {
    min-height: 220px;

    padding: 35px;

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

    gap: 18px;

    border:
        1px dashed
        #b8cbd9;

    background:
        #f8fbfd;

    color:
        #60758a;
}

.indi-product-showcase__empty > i {
    color: #24b9e8;
    font-size: 2.7rem;
}

.indi-product-showcase__empty strong {
    display: block;

    margin-bottom: 3px;

    color: #10253b;
}

.indi-product-showcase__empty p {
    margin: 0;
}

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

@media (max-width: 991.98px) {

    .indi-product-showcase__container {
        width:
            calc(100% - 18px);
    }

    .indi-product-showcase__header {
        padding:
            0 8px;
    }

    .indi-products-carousel {
        padding:
            0 58px;
    }

    .indi-catalog-card {
        flex-basis: 315px;
        width: 315px;
    }

    .indi-products-carousel__arrow {
        width: 48px;
        height: 48px;

        font-size: 1.3rem;
    }

    .indi-products-carousel__arrow--prev {
        left: 5px;
    }

    .indi-products-carousel__arrow--next {
        right: 5px;
    }
}

/* =========================
   CELULAR
========================= */

@media (max-width: 575.98px) {

    .indi-product-showcase {
        padding:
            23px 0 35px;
    }

    .indi-product-showcase__header {
        min-height: 0;

        margin-bottom: 15px;

        padding:
            0 7px;

        align-items:
            flex-start;

        gap: 13px;
    }

    .indi-product-showcase__header h2 {
        font-size: 1.38rem;
    }

    .indi-product-showcase__more {
        min-height: 38px;

        padding:
            0 12px;

        border-radius: 9px;

        font-size: 0.72rem;
    }

    .indi-products-carousel {
        padding:
            0 46px;
    }

    .indi-products-carousel__viewport {
        padding:
            7px 0 10px;
    }

    .indi-products-carousel__track {
        gap: 16px;
    }

    .indi-catalog-card {
        flex:
            0 0
            min(84vw, 326px);

        width:
            min(84vw, 326px);

        min-height: 0;
    }

    .indi-catalog-card__media {
        min-height: 245px;
    }

    .indi-catalog-card__image-link {
        height: 215px;
    }

    .indi-catalog-card__title {
        min-height: 0;

        font-size: 1.08rem;
    }

    .indi-products-carousel__arrow {
        width: 42px;
        height: 42px;

        font-size: 1.15rem;
    }

    .indi-products-carousel__arrow--prev {
        left: 3px;
    }

    .indi-products-carousel__arrow--next {
        right: 3px;
    }
}


/* ============================================================
   FAVORITOS + CARRITO EN TARJETAS
============================================================ */

.indi-wishlist-btn {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 8;

    width: 43px;
    height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d9e1e7;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.96);
    color: #27323a;

    font-size: 1.25rem;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(19, 54, 78, 0.14);

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.indi-wishlist-btn:hover {
    transform: translateY(-2px) scale(1.06);

    border-color: #e9a9b0;
    color: #d8283d;

    box-shadow:
        0 8px 18px rgba(91, 32, 42, 0.16);
}

.indi-wishlist-btn.active {
    border-color: #e7a1aa;
    color: #e11d3f;
}

.indi-wishlist-btn.clicked {
    animation:
        indiWishlistPop 0.30s ease;
}

@keyframes indiWishlistPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }

    100% {
        transform: scale(1);
    }
}

.header-cart__badge.is-bumping {
    animation:
        indiCartQuickBump 0.35s ease;
}

@keyframes indiCartQuickBump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.28);
    }

    100% {
        transform: scale(1);
    }
}

.indi-toast-container {
    position: fixed;

    right: 22px;
    bottom: 90px;

    z-index: 2500;

    display: grid;

    gap: 9px;

    pointer-events: none;
}

.indi-mini-toast {
    min-width: 245px;
    max-width: min(380px, calc(100vw - 32px));

    padding:
        12px 15px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 12px;

    color: #ffffff;

    font-size: 0.86rem;
    font-weight: 700;

    box-shadow:
        0 13px 30px rgba(10, 42, 64, 0.20);

    opacity: 0;

    transform:
        translateY(12px)
        scale(0.98);

    transition:
        opacity 0.24s ease,
        transform 0.24s ease;
}

.indi-mini-toast.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.indi-mini-toast--ok {
    background:
        linear-gradient(
            110deg,
            #087f43,
            #14b95f
        );
}

.indi-mini-toast--error {
    background:
        linear-gradient(
            110deg,
            #a91f31,
            #e04355
        );
}

@media (max-width: 575.98px) {

    .indi-wishlist-btn {
        width: 40px;
        height: 40px;

        top: 10px;
        right: 10px;
    }

    .indi-toast-container {
        right: 12px;
        bottom: 84px;
    }

    .indi-mini-toast {
        min-width: 0;
        width: calc(100vw - 24px);
    }
}



/* ============================================================
   FOOTER V3 - INVENCIÓN DIGITAL
   Estructura abierta inspirada en Informática para el Diseño.
============================================================ */

.indi-open-footer {
    position: relative;

    margin-top: 0;

    padding:
        62px 0 24px;

    overflow: hidden;

    color: #ffffff;

    /*
     * EXACTAMENTE la misma familia de azul que la cabecera.
     */
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255, 255, 255, 0.18),
            transparent 28%
        ),
        linear-gradient(
            108deg,
            #284cd8 0%,
            #2764dd 28%,
            #1d82dd 52%,
            #159fdf 74%,
            #37bfe8 100%
        );
}

.indi-open-footer::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 19, 39, 0.06),
            rgba(3, 19, 39, 0.24)
        );
}

.indi-open-footer__container {
    position: relative;

    z-index: 1;

    max-width: 1540px;

    padding-right: 34px;
    padding-left: 34px;
}


/* =========================
   DOS GRANDES COLUMNAS
========================= */

.indi-open-footer__grid {
    display: grid;

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

    gap: 68px;

    align-items: start;
}

.indi-open-footer__left,
.indi-open-footer__right {
    min-width: 0;
}

.indi-open-footer__left {
    padding:
        0 26px 0 38px;

    text-align: center;
}

.indi-open-footer__right {
    padding:
        0 38px 0 26px;
}


/* =========================
   LOGO / DESCRIPCIÓN
========================= */

.indi-open-footer__logo {
    display: inline-flex;

    color: #ffffff;

    text-decoration: none;
}

.indi-open-footer__logo img {
    width: auto;
    height: auto;

    max-width: 355px;
    max-height: 145px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0, 45, 78, 0.18)
        );
}

.indi-open-footer__tagline {
    max-width: 720px;

    margin:
        29px auto 0;

    color: #ffffff;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.12rem,
            1.55vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.34;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 8px
        rgba(0, 38, 68, 0.12);
}


/* =========================
   SECCIONES LIBRES
========================= */

.indi-open-footer__section {
    margin-top: 55px;
}

.indi-open-footer__section h3,
.indi-open-footer__location h3,
.indi-open-footer__location h4,
.indi-open-footer__reviews h3 {
    margin:
        0 0 23px;

    color: #ffffff;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            0.97rem,
            1.16vw,
            1.22rem
        );

    font-weight: 600;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    text-shadow:
        0 2px 8px
        rgba(0, 40, 75, 0.10);
}


/* =========================
   CONTACTO
========================= */

.indi-open-footer__contact-lines {
    max-width: 620px;

    margin:
        0 auto;

    display: grid;

    gap: 8px;

    text-align: left;
}

.indi-open-footer__contact-lines a,
.indi-open-footer__contact-lines > div {
    display: flex;
    align-items: center;

    gap: 10px;

    color:
        rgba(255, 255, 255, 0.92);

    text-decoration: none;

    font-size: 0.93rem;

    line-height: 1.45;
}

.indi-open-footer__contact-lines i {
    width: 23px;

    flex: 0 0 23px;

    color: #ffffff;

    font-size: 1.02rem;

    text-align: center;
}

.indi-open-footer__contact-lines strong {
    font-weight: 750;
}

.indi-open-footer__contact-lines a:hover {
    color: #ffffff;

    text-decoration:
        underline;
}


/* =========================
   REDES
========================= */

.indi-open-footer__section--social {
    margin-top: 50px;
}

.indi-open-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;
}

.indi-open-footer__social a {
    width: 45px;
    height: 45px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        rgba(255, 255, 255, 0.85);

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 1.15rem;

    box-shadow:
        0 6px 16px
        rgba(0, 39, 74, 0.18);

    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}

.indi-open-footer__social a:hover {
    transform:
        translateY(-3px)
        scale(1.07);

    color: #ffffff;

    filter:
        brightness(1.05);
}

.indi-open-footer__social .fb {
    background: #1877f2;
}

.indi-open-footer__social .ig {
    background:
        radial-gradient(
            circle at 32% 106%,
            #ffd600 0 22%,
            #ff7a00 23% 42%,
            #ff0169 43% 63%,
            #d300c5 64% 78%,
            #7638fa 79% 100%
        );
}

.indi-open-footer__social .wa {
    background: #15be67;
}

.indi-open-footer__social .tk {
    background: #101010;
}

.indi-open-footer__social .yt {
    background: #ff0000;
}


/* =========================
   PAGOS Y ENVÍOS
========================= */

.indi-open-footer__payments {
    margin-top: 59px;
}

.indi-open-footer__payment-images {
    width:
        min(
            100%,
            620px
        );

    margin:
        0 auto;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 10px 26px
        rgba(0, 44, 79, 0.16);
}

.indi-open-footer__payment-images img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;
}


/* =========================
   OPINIONES
========================= */

.indi-open-footer__reviews {
    margin-bottom: 48px;

    padding-bottom: 35px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.28);

    text-align: center;
}

.indi-open-footer__reviews h3 {
    color: #fff0a9;
}

.indi-open-footer__reviews h3 i {
    margin-right: 8px;

    color: #ffd337;
}

.indi-open-footer__rating {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
}

.indi-open-footer__stars {
    color: #ffd337;

    font-size: 1.45rem;

    letter-spacing:
        0.05em;

    line-height: 1;
}

.indi-open-footer__rating strong {
    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;
}

.indi-open-footer__review-count {
    margin:
        12px 0 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.82rem;
}

.indi-open-footer__review-action {
    width: min(
        100%,
        720px
    );

    min-height: 54px;

    margin:
        24px auto 0;

    padding:
        0 20px;

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

    background:
        rgba(255, 255, 255, 0.88);

    color: #27536f;

    text-decoration: none;

    font-size: 0.92rem;
    font-weight: 500;

    letter-spacing:
        0.05em;

    transition:
        background 0.22s ease,
        transform 0.22s ease;
}

.indi-open-footer__review-action:hover {
    transform:
        translateY(-2px);

    background: #ffffff;

    color: #183f5a;
}


/* =========================
   UBICACIÓN
========================= */

.indi-open-footer__location {
    text-align: center;
}

.indi-open-footer__location h3 {
    margin-bottom: 18px;
}

.indi-open-footer__location > p {
    max-width: 790px;

    margin:
        0 auto 27px;

    color:
        rgba(255, 255, 255, 0.94);

    font-size: 0.95rem;

    line-height: 1.55;
}

.indi-open-footer__location h4 {
    margin-bottom: 12px;

    font-size: 0.92rem;
}

.indi-open-footer__map {
    width: 100%;
    height: 365px;

    overflow: hidden;

    border:
        5px solid
        rgba(255, 255, 255, 0.88);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.86);

    box-shadow:
        0 12px 30px
        rgba(0, 44, 79, 0.18);
}

.indi-open-footer__map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}

.indi-open-footer__map-link {
    margin-top: 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.76rem;
    font-weight: 700;
}

.indi-open-footer__map-link:hover {
    color: #ffffff;

    text-decoration:
        underline;
}


/* =========================
   PARTE INFERIOR
========================= */

.indi-open-footer__bottom {
    margin-top: 40px;

    padding:
        23px 10px 4px;

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

    gap:
        14px 40px;

    flex-wrap: wrap;

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

    text-align: center;
}

.indi-open-footer__bottom p {
    width: 100%;

    margin:
        0 0 4px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 0.76rem;
}

.indi-open-footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap:
        8px 22px;
}

.indi-open-footer__bottom a {
    color: #ffffff;

    text-decoration: none;

    font-size: 0.78rem;
    font-weight: 500;

    letter-spacing:
        0.02em;

    transition:
        opacity 0.20s ease;
}

.indi-open-footer__bottom a:hover {
    opacity: 0.72;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1199.98px) {

    .indi-open-footer__grid {
        gap: 42px;
    }

    .indi-open-footer__left {
        padding:
            0 10px;
    }

    .indi-open-footer__right {
        padding:
            0 10px;
    }

    .indi-open-footer__map {
        height: 325px;
    }
}

@media (max-width: 991.98px) {

    .indi-open-footer {
        padding-top: 48px;
    }

    .indi-open-footer__container {
        padding-right: 24px;
        padding-left: 24px;
    }

    .indi-open-footer__grid {
        grid-template-columns:
            1fr;

        gap: 64px;
    }

    .indi-open-footer__left,
    .indi-open-footer__right {
        padding:
            0;
    }

    .indi-open-footer__payment-images {
        width:
            min(
                100%,
                650px
            );
    }

    .indi-open-footer__map {
        height: 390px;
    }
}

@media (max-width: 575.98px) {

    .indi-open-footer {
        padding:
            40px 0 20px;
    }

    .indi-open-footer__container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .indi-open-footer__grid {
        gap: 52px;
    }

    .indi-open-footer__logo img {
        max-width: 265px;
        max-height: 110px;
    }

    .indi-open-footer__tagline {
        margin-top: 20px;

        font-size: 1rem;
        letter-spacing:
            0.045em;
    }

    .indi-open-footer__section {
        margin-top: 42px;
    }

    .indi-open-footer__section h3,
    .indi-open-footer__location h3,
    .indi-open-footer__location h4,
    .indi-open-footer__reviews h3 {
        font-size: 0.90rem;
        letter-spacing:
            0.10em;
    }

    .indi-open-footer__contact-lines {
        gap: 10px;
    }

    .indi-open-footer__contact-lines a,
    .indi-open-footer__contact-lines > div {
        align-items: flex-start;

        font-size: 0.83rem;
    }

    .indi-open-footer__social {
        gap: 9px;
    }

    .indi-open-footer__social a {
        width: 42px;
        height: 42px;
    }

    .indi-open-footer__payments {
        margin-top: 46px;
    }

    .indi-open-footer__review-action {
        min-height: 50px;

        font-size: 0.80rem;
    }

    .indi-open-footer__location > p {
        font-size: 0.84rem;
    }

    .indi-open-footer__map {
        height: 300px;

        border-width: 3px;
    }

    .indi-open-footer__bottom {
        margin-top: 31px;
    }

    .indi-open-footer__bottom nav {
        gap:
            9px 15px;
    }

    .indi-open-footer__bottom a {
        font-size: 0.72rem;
    }
}


/* ============================================================
   WHATSAPP FLOTANTE V1
   Estilo circular inspirado en Informática para el Diseño
============================================================ */

.indi-social-float {
    position: fixed;

    right: 27px;
    bottom: 24px;

    z-index: 1045;

    width: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity 0.30s ease,
        visibility 0.30s ease,
        transform 0.30s ease;

    pointer-events: auto;
}

.indi-social-float.is-hidden {
    opacity: 0;
    visibility: hidden;

    transform:
        translateY(18px)
        scale(0.94);

    pointer-events: none;
}

.indi-social-float.is-menu-open {
    opacity: 0;
    visibility: hidden;

    transform:
        translateY(18px)
        scale(0.94);

    pointer-events: none;
}


/* =========================
   BOTÓN
========================= */

.indi-social-float__button {
    position: relative;

    width: 64px;
    height: 64px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        3px solid
        rgba(255, 255, 255, 0.92);

    border-radius: 50%;

    background: #20c96b;

    color: #ffffff;

    text-decoration: none;

    font-size: 2rem;

    box-shadow:
        0 10px 28px
        rgba(12, 125, 65, 0.30);

    isolation: isolate;

    /*
     * Pequeña vibración periódica.
     * No se mantiene temblando todo el tiempo.
     */
    animation:
        indiWhatsappVibrate
        4.2s ease-in-out
        infinite;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.indi-social-float__button::before,
.indi-social-float__button::after {
    content: "";

    position: absolute;

    inset: -5px;

    z-index: -1;

    border:
        2px solid
        rgba(32, 201, 107, 0.48);

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    animation:
        indiWhatsappPulse
        2.4s ease-out
        infinite;
}

.indi-social-float__button::after {
    animation-delay:
        1.2s;
}

.indi-social-float__button i {
    display: block;

    line-height: 1;

    transition:
        transform 0.22s ease;
}

.indi-social-float__button:hover {
    background: #16b85d;

    color: #ffffff;

    transform:
        translateY(-3px)
        scale(1.06);

    box-shadow:
        0 14px 32px
        rgba(12, 125, 65, 0.40);
}

.indi-social-float__button:hover i {
    transform:
        rotate(-7deg)
        scale(1.06);
}


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

.indi-social-float__text {
    width: max-content;
    min-width: 124px;
    max-width: 138px;

    padding:
        5px 9px 6px;

    border:
        1px solid
        rgba(16, 37, 59, 0.12);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.94);

    color: #10253b;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 0.75rem;
    font-weight: 750;

    line-height: 1.17;

    text-align: center;

    box-shadow:
        0 6px 16px
        rgba(7, 39, 62, 0.14);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    pointer-events: none;
}


/* =========================
   ANIMACIONES
========================= */

@keyframes indiWhatsappPulse {

    0% {
        opacity: 0.62;

        transform:
            scale(0.92);
    }

    65% {
        opacity: 0;

        transform:
            scale(1.38);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.38);
    }
}

@keyframes indiWhatsappVibrate {

    0%,
    76%,
    100% {
        transform:
            rotate(0deg);
    }

    79% {
        transform:
            rotate(-6deg);
    }

    82% {
        transform:
            rotate(6deg);
    }

    85% {
        transform:
            rotate(-5deg);
    }

    88% {
        transform:
            rotate(5deg);
    }

    91% {
        transform:
            rotate(-3deg);
    }

    94% {
        transform:
            rotate(3deg);
    }

    97% {
        transform:
            rotate(0deg);
    }
}


/* =========================
   BOTÓN VOLVER ARRIBA
   Lo elevamos para evitar que choque
   con WhatsApp.
========================= */

.back-to-top {
    left: 22px;
    right: auto;

    bottom: 24px;
}


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

@media (max-width: 767.98px) {

    .indi-social-float {
        right: 12px;
        bottom: 17px;

        width: 122px;

        gap: 6px;
    }

    .indi-social-float__button {
        width: 58px;
        height: 58px;

        border-width: 2px;

        font-size: 1.75rem;
    }

    .indi-social-float__text {
        min-width: 106px;
        max-width: 116px;

        padding:
            4px 7px 5px;

        border-radius: 8px;

        font-size: 0.67rem;
    }

    .back-to-top {
        left: 14px;
        right: auto;

        bottom: 18px;
    }
}

@media (max-width: 420px) {

    .indi-social-float {
        right: 7px;

        width: 112px;
    }

    .indi-social-float__button {
        width: 55px;
        height: 55px;

        font-size: 1.65rem;
    }

    .indi-social-float__text {
        min-width: 100px;
        max-width: 108px;

        padding:
            4px 7px 5px;

        font-size: 0.64rem;
    }
}


/* Respeta usuarios que prefieren reducir animaciones */
@media (prefers-reduced-motion: reduce) {

    .indi-social-float__button,
    .indi-social-float__button::before,
    .indi-social-float__button::after {
        animation: none !important;
    }
}


@media (max-width: 420px) {

    .back-to-top {
        left: 10px;
        right: auto;

        bottom: 14px;
    }
}


/* ============================================================
   MEGA MENÚ - EQUIPOS V1.1
   Blanco, compacto y con franjas azules tipo HP.
============================================================ */

@media (min-width: 992px) {

    .site-navigation {
        position: relative;
        z-index: 1200;
    }

    .site-navigation > .container-xl,
    .site-navigation .navbar-collapse,
    .site-navigation .navbar-nav,
    .site-navigation .indi-mega-dropdown {
        position: static;
    }

    .site-navigation .indi-mega-menu {
        position: absolute;

        top: calc(100% - 1px);
        left: 50%;

        width: 100vw;
        max-width: none;

        margin: 0;
        padding: 0;

        transform: translateX(-50%);

        border: 0;
        border-top: 1px solid #dce6ee;
        border-radius: 0;

        background: #ffffff;

        box-shadow:
            0 20px 42px
            rgba(11, 62, 97, 0.16);

        max-height: calc(100vh - 205px);

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;
    }
}


/* =========================
   CONTENEDOR + FRANJAS
========================= */

.indi-mega-menu__inner {
    position: relative;
    isolation: isolate;

    width: min(
        calc(100% - 44px),
        1500px
    );

    margin: 0 auto;

    padding:
        18px 6px 18px;

    overflow: hidden;
}

.indi-mega-menu__inner::before,
.indi-mega-menu__inner::after {
    content: "";

    position: absolute;

    z-index: -1;

    pointer-events: none;

    transform: skewX(-18deg);
}

.indi-mega-menu__inner::before {
    top: -32px;
    left: 22px;

    width: 86px;
    height: 145px;

    background: #2f56e0;

    opacity: 1;
}

.indi-mega-menu__inner::after {
    right: 22px;
    bottom: -30px;

    width: 86px;
    height: 195px;

    background: #2f56e0;

    opacity: 1;
}


/* =========================
   CABECERA INTERNA
========================= */

.indi-mega-menu__top {
    min-height: 46px;

    margin-bottom: 11px;

    padding:
        0 14px 11px;

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

    gap: 24px;

    border-bottom:
        1px solid #dce6ee;
}

.indi-mega-menu__top > div {
    display: grid;
    gap: 1px;
}

.indi-mega-menu__eyebrow {
    color: #0078ba;

    font-size: 0.72rem;
    font-weight: 850;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.indi-mega-menu__top strong {
    color: #10253b;

    font-size: 1.02rem;
    font-weight: 650;
}

.indi-mega-menu__all {
    min-height: 36px;

    padding:
        0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    flex: 0 0 auto;

    border:
        1px solid #a9cfe4;

    border-radius: 8px;

    background:
        rgba(9, 130, 198, 0.035);

    color: #0078ba;

    text-decoration: none;

    font-size: 0.80rem;
    font-weight: 750;

    transition:
        background 0.20s ease,
        color 0.20s ease,
        border-color 0.20s ease,
        transform 0.20s ease;
}

.indi-mega-menu__all:hover {
    transform: translateY(-1px);

    border-color: #159fdf;

    background:
        rgba(21, 159, 223, 0.09);

    color: #075b8c;
}


/* =========================
   COLUMNAS
========================= */

.indi-mega-menu__grid {
    display: grid;

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

    gap:
        4px 26px;
}

.indi-mega-menu__group {
    min-width: 0;

    padding:
        6px 14px 10px;
}

.indi-mega-menu__group h3 {
    margin:
        0 0 7px;

    padding-bottom: 8px;

    border-bottom:
        1px solid #d8e2e9;

    color: #030303;

    font-size: 0.82rem;
    font-weight: 650;

    letter-spacing: 0.18em;

    line-height: 1.24;

    text-transform: uppercase;
}

.indi-mega-menu__group ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.indi-mega-menu__group li {
    margin: 0;
    padding: 0;
}

.indi-mega-menu__group a {
    min-height: 25px;

    padding:
        3px 0;

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

    gap: 12px;

    color: #010202;

    text-decoration: none;

    font-size: 0.87rem;
    font-weight: 500;

    letter-spacing: 0.005em;

    transition:
        color 0.18s ease,
        padding-left 0.18s ease;
}

.indi-mega-menu__group a i {
    flex: 0 0 auto;

    color: #159fdf;

    font-size: 0.64rem;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.indi-mega-menu__group a:hover {
    padding-left: 4px;

    color: #0084ff;
}

.indi-mega-menu__group a:hover i {
    opacity: 1;

    transform: translateX(0);
}


/* =========================
   PIE INTERNO
========================= */

.indi-mega-menu__footer {
    margin:
        4px 14px 0;

    padding:
        10px 0 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    border-top:
        1px solid #e0e8ed;

    color: #8093a3;

    font-size: 0.69rem;
}

.indi-mega-menu__footer a {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #0078ba;

    text-decoration: none;

    font-weight: 750;
}

.indi-mega-menu__footer a:hover {
    color: #075b8c;
}


/* =========================
   SCROLL INTERNO
========================= */

@media (min-width: 992px) {

    .site-navigation .indi-mega-menu {
        scrollbar-width: thin;

        scrollbar-color:
            rgba(21, 159, 223, 0.45)
            rgba(220, 230, 238, 0.32);
    }

    .site-navigation
    .indi-mega-menu::-webkit-scrollbar {
        width: 8px;
    }

    .site-navigation
    .indi-mega-menu::-webkit-scrollbar-track {
        background:
            rgba(220, 230, 238, 0.28);
    }

    .site-navigation
    .indi-mega-menu::-webkit-scrollbar-thumb {
        border-radius: 10px;

        background:
            rgba(21, 159, 223, 0.42);
    }
}


/* =========================
   DESKTOP BAJO
========================= */

@media (min-width: 992px) and (max-height: 820px) {

    .site-navigation .indi-mega-menu {
        max-height:
            calc(100vh - 180px);
    }

    .indi-mega-menu__inner {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .indi-mega-menu__top {
        min-height: 40px;

        margin-bottom: 7px;

        padding-bottom: 8px;
    }

    .indi-mega-menu__group {
        padding-top: 4px;
        padding-bottom: 7px;
    }

    .indi-mega-menu__group h3 {
        margin-bottom: 5px;

        padding-bottom: 6px;
    }

    .indi-mega-menu__group a {
    min-height: 24px;

    padding-top: 2px;
    padding-bottom: 2px;

    font-size: 0.82rem;
}

    .indi-mega-menu__footer {
        padding-top: 7px;
    }
}


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

@media (max-width: 991.98px) {

    .site-navigation .indi-mega-menu {
        position: static !important;

        width: 100%;

        max-height: none;

        margin:
            0 0 9px;

        padding: 0;

        overflow: visible;

        transform: none !important;

        border:
            1px solid #d5e1ea;

        border-radius: 12px;

        background: #ffffff;

        box-shadow:
            0 8px 22px
            rgba(16, 63, 98, 0.08);
    }

    .indi-mega-menu__inner {
        width: 100%;

        padding:
            12px 11px 14px;
    }

    .indi-mega-menu__inner::before {
        top: -18px;
        left: -6px;

        width: 42px;
        height: 100px;
    }

    .indi-mega-menu__inner::after {
        right: 10px;
        bottom: -24px;

        width: 52px;
        height: 110px;
    }

    .indi-mega-menu__top {
        min-height: 0;

        margin-bottom: 4px;

        padding:
            4px 5px 10px;

        align-items: flex-start;

        flex-direction: column;

        gap: 9px;
    }

    .indi-mega-menu__top strong {
        font-size: 0.85rem;
    }

    .indi-mega-menu__all {
        min-height: 34px;

        padding:
            0 11px;
    }

    .indi-mega-menu__grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .indi-mega-menu__group {
        padding:
            10px 5px;
    }

    .indi-mega-menu__group
    + .indi-mega-menu__group {
        border-top:
            1px solid #e3ebf0;
    }

    .indi-mega-menu__group h3 {
        margin-bottom: 6px;

        padding-bottom: 7px;

        color: #60758c;

        font-size: 0.68rem;
    }

    .indi-mega-menu__group a {
        min-height: 32px;

        padding:
            5px 2px;

        color: #17293b;

        font-size: 0.79rem;
    }

    .indi-mega-menu__group a i {
        opacity: 0.65;

        transform: none;
    }

    .indi-mega-menu__footer {
        margin:
            4px 5px 0;

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

        color: #8093a3;
    }
}

/* ============================================================
   CARRITO LATERAL - INVENCIÓN DIGITAL
============================================================ */

.indi-side-cart {
    display: grid;
    gap: 14px;
}


/* PRODUCTO */

.indi-side-cart-item {
    display: grid;

    grid-template-columns: 1fr;

    gap: 0;

    margin-bottom: 14px;

    padding:
        14px 14px 13px;

    border:
        1px solid
        #e3e8ec;

    border-radius: 2px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(14, 45, 67, 0.08);
}


/* IMAGEN */

.indi-side-cart-item__image {
    width: 100%;
    height: 180px;

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

    overflow: hidden;

    border: 0;
    border-radius: 0;

    background: #ffffff;
}

.indi-side-cart-item__image > a {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.indi-side-cart-item__image img {
    width: auto;
    height: auto;

    max-width: 92%;
    max-height: 170px;

    display: block;

    object-fit: contain;

    padding: 0;
}

.indi-side-cart-item__placeholder {
    color: #9baab6;

    font-size: 1.5rem;
}


/* CONTENIDO */

.indi-side-cart-item__content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 7px;

    text-align: center;
}


.indi-side-cart-item__top {
    position: relative;

    width: 100%;

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

    gap: 10px;
}


.indi-side-cart-item__top > div {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}


.indi-side-cart-item__brand {
    color: #0078ba;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.indi-side-cart-item__sku {
    color: #8a9aa7;

    font-size: 0.64rem;
}


/* ELIMINAR */

.indi-side-cart-item__remove {
    position: absolute;

    top: -2px;
    right: 0;

    width: 31px;
    height: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #dce4e9;

    border-radius: 50%;

    background: #ffffff;

    color: #8595a1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.indi-side-cart-item__remove:hover {
    border-color: #dc3545;

    background: #fff5f6;

    color: #dc3545;
}


/* NOMBRE */

.indi-side-cart-item__name {
    max-width: 330px;

    margin-top: 12px;

    color: #10253b;

    text-decoration: none;

    font-size: 1rem;
    font-weight: 600;

    line-height: 1.35;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.indi-side-cart-item__name:hover {
    color: #0078ba;
}


/* MODELO */

.indi-side-cart-item__model {
    margin-top: 6px;

    color: #81909c;

    font-size: 0.82rem;

    line-height: 1.3;
}


/* PRECIO */

.indi-side-cart-item__price {
    margin-top: 10px;

    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: 8px;
}


.indi-side-cart-item__old-price {
    color: #99a4ad;

    font-size: 0.70rem;

    text-decoration:
        line-through;
}


.indi-side-cart-item__price strong {
    color: #0b7048;

    font-size: 1.08rem;
    font-weight: 700;
}


.indi-side-cart-item__price small {
    font-size: 0.58rem;
}


/* CONTROLES */

.indi-side-cart-item__controls {
    margin-top: 14px;

    display: inline-flex;
    align-items: center;

    align-self: center;

    overflow: hidden;

    border:
        1px solid #cdd9e1;

    border-radius: 0;
}


.indi-side-cart-item__controls button {
    width: 39px;
    height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: #ffffff;

    color: #0d6f9f;

    cursor: pointer;

    font-size: 1rem;
}


.indi-side-cart-item__controls button:hover:not(:disabled) {
    background: #edf8fd;
}


.indi-side-cart-item__controls button:disabled {
    color: #b8c2c9;

    background: #f4f6f7;

    cursor: not-allowed;
}


.indi-side-cart-item__controls span {
    min-width: 40px;

    text-align: center;

    color: #10253b;

    font-size: 0.88rem;
    font-weight: 700;
}


/* STOCK */

.indi-side-cart-item__stock-warning {
    margin-top: 5px;

    color: #d33c48;

    font-size: 0.65rem;
}


/* SUBTOTAL */

.indi-side-cart-item__subtotal {
    width: 100%;

    margin-top: 15px;

    padding-top: 11px;

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

    gap: 5px;

    border-top:
        1px solid #e1e7eb;

    color: #748592;

    font-size: 0.78rem;
}


.indi-side-cart-item__subtotal strong {
    color: #526978;

    font-size: 0.80rem;
    font-weight: 500;
}


/* =========================
   RESUMEN
========================= */

.indi-side-cart-summary {
    margin-top: 8px;

    padding:
        15px;

    border-radius: 12px;

    background: #f5f9fc;
}


.indi-side-cart-summary__row,
.indi-side-cart-summary__total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.indi-side-cart-summary__row {
    color: #6f8291;

    font-size: 0.76rem;
}


.indi-side-cart-summary__total {
    margin-top: 10px;

    padding-top: 10px;

    border-top:
        1px solid #d9e4eb;

    color: #10253b;
}


.indi-side-cart-summary__total strong {
    color: #063c62;

    font-size: 1.12rem;
}


.indi-side-cart-summary__total small {
    font-size: 0.60rem;
}


.indi-side-cart-summary__view {
    min-height: 43px;

    margin-top: 14px;

    padding:
        0 14px;

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

    gap: 8px;

    border:
        1px solid #0078ba;

    border-radius: 8px;

    color: #0078ba;

    text-decoration: none;

    font-size: 0.76rem;
    font-weight: 750;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.indi-side-cart-summary__view:hover {
    background: #0078ba;

    color: #ffffff;
}


/* =========================
   CARRITO VACÍO
========================= */

.indi-side-cart-empty {
    padding:
        50px 20px;

    text-align: center;
}


.indi-side-cart-empty__icon {
    width: 72px;
    height: 72px;

    margin:
        0 auto 16px;

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

    border-radius: 50%;

    background: #eef8fd;

    color: #0787c7;

    font-size: 1.8rem;
}


.indi-side-cart-empty h4 {
    margin: 0;

    color: #10253b;

    font-size: 1rem;
    font-weight: 750;
}


.indi-side-cart-empty p {
    margin:
        7px 0 18px;

    color: #728493;

    font-size: 0.78rem;
}


.indi-side-cart-empty a {
    color: #0078ba;

    text-decoration: none;

    font-size: 0.76rem;
    font-weight: 750;
}

/* ============================================================
   OFFCANVAS DEL CARRITO
============================================================ */

.indi-cart-offcanvas {
    --bs-offcanvas-width: 465px;

    border-left:
        1px solid #dce5ec;

    background: #ffffff;

    box-shadow:
        -16px 0 40px
        rgba(10, 50, 78, 0.14);
}


/* CABECERA */

.indi-cart-offcanvas__header {
    padding:
        20px 22px 17px;

    border-bottom:
        1px solid #dce5ec;

    background:
        linear-gradient(
            135deg,
            #f7fbfe,
            #ffffff
        );
}


.indi-cart-offcanvas__eyebrow {
    display: block;

    margin-bottom: 2px;

    color: #0787c7;

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.indi-cart-offcanvas__header h5 {
    margin: 0;

    color: #10253b;

    font-size: 1.25rem;
    font-weight: 750;
}


/* CUERPO */

.indi-cart-offcanvas__body {
    padding:
        14px 16px 25px;
}


/* CARGANDO */

.indi-cart-loading {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #6d8190;

    font-size: 0.78rem;
}


.indi-cart-loading .spinner-border {
    width: 30px;
    height: 30px;

    color: #0787c7;
}


/* MENSAJES */

.indi-cart-message {
    margin-bottom: 12px;

    padding:
        10px 12px;

    border:
        1px solid #f0c7ca;

    border-radius: 8px;

    background: #fff5f6;

    color: #b02a37;

    font-size: 0.72rem;
    font-weight: 650;
}


/* WHATSAPP FUERA DEL CAMINO */

.indi-social-float.is-cart-open {
    opacity: 0;
    visibility: hidden;

    transform:
        translateY(18px)
        scale(0.94);

    pointer-events: none;
}


/* MÓVIL */

@media (max-width: 575.98px) {

    .indi-cart-offcanvas {
        --bs-offcanvas-width: 94vw;
    }

    .indi-cart-offcanvas__body {
        padding:
            14px 14px 22px;
    }

}

/* ============================================================
   AJUSTES CARRITO LATERAL
   Marca, SKU, modelo y controles
============================================================ */


/* =========================
   MARCA + SKU
========================= */

.indi-side-cart-item__top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


.indi-side-cart-item__meta {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}


.indi-side-cart-item__brand {
    color: #0078ba;

    font-size: 0.88rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.indi-side-cart-item__sku {
    color: #8797a5;

    font-size: 0.80rem;
    font-weight: 500;

    letter-spacing: 0.02em;
}


/* =========================
   NOMBRE
========================= */

.indi-side-cart-item__name {
    max-width: 350px;

    margin-top: 13px;

    color: #10253b;

    text-decoration: none;

    font-size: 1.05rem;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


/* =========================
   MODELO
========================= */

.indi-side-cart-item__model {
    margin-top: 7px;

    color: #718392;

    font-size: 0.88rem;
    font-weight: 400;

    line-height: 1.35;
}


/* =========================
   PRECIO
========================= */

.indi-side-cart-item__price {
    margin-top: 11px;

    display: flex;
    align-items: baseline;
    justify-content: center;

    gap: 8px;
}


.indi-side-cart-item__price strong {
    color: #087a4d;

    font-size: 1.12rem;
    font-weight: 750;
}


.indi-side-cart-item__price strong small {
    font-size: 0.62rem;
    font-weight: 700;
}


/* ============================================================
   FILA: CANTIDAD + ELIMINAR
============================================================ */

.indi-side-cart-item__actions {
    width: 100%;

    margin-top: 15px;

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

    gap: 12px;
}


/* =========================
   - CANTIDAD +
========================= */

.indi-side-cart-item__controls {
    margin-top: 0;

    display: inline-flex;
    align-items: center;

    align-self: auto;

    overflow: hidden;

    border:
        1px solid #cbd8e1;

    border-radius: 7px;

    background: #ffffff;
}


.indi-side-cart-item__controls button {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: #ffffff;

    color: #0787c7;

    font-size: 1.05rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.indi-side-cart-item__controls button:hover:not(:disabled) {
    background: #edf8fd;

    color: #006fa8;
}


.indi-side-cart-item__controls button:disabled {
    color: #bbc5cc;

    background: #f5f7f8;

    cursor: not-allowed;
}


.indi-side-cart-item__controls span {
    min-width: 42px;

    text-align: center;

    color: #10253b;

    font-size: 0.94rem;
    font-weight: 750;
}


/* =========================
   ELIMINAR
========================= */

.indi-side-cart-item__remove {
    position: static;

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #d4dde4;

    border-radius: 7px;

    background: #ffffff;

    color: #7e8e9a;

    font-size: 1.02rem;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.indi-side-cart-item__remove:hover {
    border-color: #dc3545;

    background: #fff4f5;

    color: #dc3545;

    transform:
        translateY(-1px);
}

/* ============================================================
   CARRITO COMPLETO - INVENCIÓN DIGITAL
============================================================ */

.indi-cart-page {
    min-height: 70vh;

    padding:
        42px 0 70px;

    background:
        #f7f9fb;
}


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

.indi-cart-page__header {
    margin-bottom: 30px;

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

    gap: 30px;
}


.indi-cart-page__eyebrow {
    display: block;

    margin-bottom: 5px;

    color: #0078ba;

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.indi-cart-page__header h1 {
    margin: 0;

    color: #10253b;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.5rem
        );

    font-weight: 750;
}


.indi-cart-page__header p {
    margin:
        7px 0 0;

    color: #718392;

    font-size: 0.92rem;
}


.indi-cart-page__continue {
    min-height: 42px;

    padding:
        0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid #cbd8e1;

    border-radius: 8px;

    background: #ffffff;

    color: #31536a;

    text-decoration: none;

    font-size: 0.82rem;
    font-weight: 650;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}


.indi-cart-page__continue:hover {
    border-color: #159fdf;

    background: #f4fbff;

    color: #0078ba;
}


/* ============================================================
   DISTRIBUCIÓN
============================================================ */

.indi-cart-page__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(300px, 0.75fr);

    gap: 28px;

    align-items: start;
}


/* ============================================================
   LISTA DE PRODUCTOS
============================================================ */

.indi-cart-products {
    display: grid;

    gap: 18px;
}


.indi-cart-product {
    display: grid;

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

    grid-template-areas:
        "image info actions"
        "image subtotal subtotal";

    gap:
        8px 22px;

    padding:
        20px;

    border:
        1px solid #dce5ec;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 6px 18px
        rgba(18, 53, 78, 0.055);
}


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

.indi-cart-product__image {
    grid-area: image;

    width: 185px;
    height: 185px;

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

    overflow: hidden;

    border:
        1px solid #e5ebef;

    border-radius: 10px;

    background: #ffffff;
}


.indi-cart-product__image > a {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


.indi-cart-product__image img {
    width: auto;
    height: auto;

    max-width: 92%;
    max-height: 170px;

    display: block;

    object-fit: contain;
}


.indi-cart-product__placeholder {
    color: #9badb9;

    font-size: 2rem;
}


/* ============================================================
   INFORMACIÓN
============================================================ */

.indi-cart-product__info {
    grid-area: info;

    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.indi-cart-product__meta {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


.indi-cart-product__brand {
    color: #0078ba;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.indi-cart-product__sku {
    color: #8495a2;

    font-size: 0.73rem;
}


.indi-cart-product__name {
    margin-top: 8px;

    color: #10253b;

    text-decoration: none;

    font-size: 1.08rem;
    font-weight: 750;

    line-height: 1.3;
}


.indi-cart-product__name:hover {
    color: #0078ba;
}


.indi-cart-product__model {
    margin-top: 6px;

    color: #718392;

    font-size: 0.82rem;
}


.indi-cart-product__model strong {
    color: #526a7c;

    font-weight: 600;
}


/* ============================================================
   PRECIO
============================================================ */

.indi-cart-product__price {
    margin-top: 12px;

    display: flex;
    align-items: baseline;

    gap: 9px;
}


.indi-cart-product__price > span {
    color: #99a4ad;

    font-size: 0.74rem;

    text-decoration:
        line-through;
}


.indi-cart-product__price > strong {
    color: #087a4d;

    font-size: 1.15rem;
    font-weight: 750;
}


.indi-cart-product__price small {
    font-size: 0.60rem;
}


/* ============================================================
   DISPONIBILIDAD
============================================================ */

.indi-cart-product__availability {
    margin-top: 11px;
}


.indi-cart-product__availability span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    font-size: 0.72rem;
    font-weight: 650;
}


.indi-cart-product__availability .is-available {
    color: #168653;
}


.indi-cart-product__availability .is-warning {
    color: #c48216;
}


/* ============================================================
   ACCIONES
============================================================ */

.indi-cart-product__actions {
    grid-area: actions;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    gap: 9px;
}


.indi-cart-product__quantity-label {
    color: #788b99;

    text-align: center;

    font-size: 0.70rem;
}


.indi-cart-product__quantity {
    display: grid;

    grid-template-columns:
        38px
        1fr
        38px;

    overflow: hidden;

    border:
        1px solid #ccd9e2;

    border-radius: 8px;
}


.indi-cart-product__quantity button {
    height: 38px;

    border: 0;

    background: #ffffff;

    color: #087fbc;

    cursor: pointer;
}


.indi-cart-product__quantity button:hover:not(:disabled) {
    background: #edf8fd;
}


.indi-cart-product__quantity button:disabled {
    color: #b7c1c8;

    background: #f4f6f7;

    cursor: not-allowed;
}


.indi-cart-product__quantity > span {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #10253b;

    font-size: 0.86rem;
    font-weight: 750;
}


.indi-cart-product__warning {
    color: #c5414b;

    text-align: center;

    font-size: 0.64rem;
}


.indi-cart-product__remove {
    min-height: 38px;

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

    gap: 7px;

    border:
        1px solid #dce2e7;

    border-radius: 8px;

    background: #ffffff;

    color: #7b8c98;

    font-size: 0.72rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.indi-cart-product__remove:hover {
    border-color: #dc3545;

    background: #fff5f6;

    color: #dc3545;
}


/* ============================================================
   SUBTOTAL
============================================================ */

.indi-cart-product__subtotal {
    grid-area: subtotal;

    margin-top: 6px;

    padding-top: 12px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 13px;

    border-top:
        1px solid #e1e8ed;

    color: #748592;

    font-size: 0.78rem;
}


.indi-cart-product__subtotal strong {
    color: #10253b;

    font-size: 0.90rem;
}


.indi-cart-product__subtotal small {
    font-size: 0.60rem;
}


/* ============================================================
   RESUMEN
============================================================ */

.indi-cart-summary {
    position: sticky;

    top: 20px;

    padding:
        24px;

    border:
        1px solid #dce5ec;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(19, 55, 81, 0.07);
}


.indi-cart-summary__eyebrow {
    color: #0078ba;

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.indi-cart-summary h2 {
    margin:
        3px 0 22px;

    color: #10253b;

    font-size: 1.35rem;
}


.indi-cart-summary__line {
    padding:
        11px 0;

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

    gap: 20px;

    border-bottom:
        1px solid #e3e9ed;

    color: #728493;

    font-size: 0.80rem;
}


.indi-cart-summary__line strong {
    color: #304d62;
}


/* ENVÍO */

.indi-cart-summary__shipping {
    margin-top: 15px;

    padding:
        13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-radius: 9px;

    background: #f3f9fc;

    color: #087fbc;
}


.indi-cart-summary__shipping > i {
    font-size: 1.15rem;
}


.indi-cart-summary__shipping > div {
    display: grid;

    gap: 2px;
}


.indi-cart-summary__shipping strong {
    color: #31566f;

    font-size: 0.76rem;
}


.indi-cart-summary__shipping span {
    color: #78909f;

    font-size: 0.68rem;
}


/* TOTAL */

.indi-cart-summary__total {
    margin-top: 18px;

    padding-top: 17px;

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

    gap: 20px;

    border-top:
        1px solid #dce5ec;

    color: #10253b;

    font-size: 1rem;
}


.indi-cart-summary__total strong {
    color: #063c62;

    font-size: 1.45rem;
}


.indi-cart-summary__total small {
    font-size: 0.60rem;
}


/* BOTÓN CHECKOUT */

.indi-cart-summary__checkout {
    width: 100%;
    min-height: 48px;

    margin-top: 20px;

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

    gap: 9px;

    border:
        1px solid #18a85b;

    border-radius: 8px;

    background: #18a85b;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 750;

    text-decoration: none;
}


.indi-cart-summary__checkout:disabled {
    opacity: 0.48;

    cursor: not-allowed;
}

.indi-cart-summary__secure {
    margin-top: 22px;

    padding-top: 14px;

    display: flex;
    align-items: center;

    gap: 8px;

    border-top:
        1px solid #e1e7eb;

    color: #718692;

    font-size: 0.68rem;
}


.indi-cart-summary__secure i {
    color: #18a85b;

    font-size: 1rem;
}


/* ============================================================
   CARRITO VACÍO
============================================================ */

.indi-cart-page-empty {
    min-height: 400px;

    padding:
        60px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px solid #dce5ec;

    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}


.indi-cart-page-empty__icon {
    width: 82px;
    height: 82px;

    margin-bottom: 18px;

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

    border-radius: 50%;

    background: #edf8fd;

    color: #0787c7;

    font-size: 2rem;
}


.indi-cart-page-empty h2 {
    margin: 0;

    color: #10253b;

    font-size: 1.5rem;
}


.indi-cart-page-empty p {
    margin:
        8px 0 20px;

    color: #728493;
}


.indi-cart-page-empty a {
    min-height: 44px;

    padding:
        0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 8px;

    background: #0078ba;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.80rem;
    font-weight: 700;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991.98px) {

    .indi-cart-page__layout {
        grid-template-columns: 1fr;
    }


    .indi-cart-summary {
        position: static;
    }

}


@media (max-width: 767.98px) {

    .indi-cart-page {
        padding:
            28px 0 50px;
    }


    .indi-cart-page__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .indi-cart-product {
        grid-template-columns:
            130px
            minmax(0, 1fr);

        grid-template-areas:
            "image info"
            "actions actions"
            "subtotal subtotal";

        gap:
            15px;
    }


    .indi-cart-product__image {
        width: 130px;
        height: 130px;
    }


    .indi-cart-product__image img {
        max-height: 118px;
    }


    .indi-cart-product__actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }


    .indi-cart-product__quantity-label {
        display: none;
    }


    .indi-cart-product__quantity {
        width: 135px;
    }

}


@media (max-width: 520px) {

    .indi-cart-product {
        grid-template-columns: 1fr;

        grid-template-areas:
            "image"
            "info"
            "actions"
            "subtotal";

        padding:
            15px;
    }


    .indi-cart-product__image {
        width: 100%;
        height: 180px;
    }


    .indi-cart-product__info {
        align-items: center;

        text-align: center;
    }


    .indi-cart-product__meta,
    .indi-cart-product__price {
        justify-content: center;
    }


    .indi-cart-product__actions {
        justify-content: center;
    }


    .indi-cart-product__subtotal {
        justify-content: center;
    }


    .indi-cart-summary {
        padding:
            20px;
    }

}

/* ============================================================
   CHECKOUT - INVENCIÓN DIGITAL
============================================================ */

.indi-checkout-page {
    min-height: 70vh;
    background: #f6f8fb;
    color: #10253b;
}


/* CONTENEDOR PRINCIPAL */

.indi-checkout-page .checkout-wrapper {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
    padding: 34px;

    border: 1px solid #dce5ec;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 28px
        rgba(17, 54, 80, 0.07);
}


/* TÍTULO */

.indi-checkout-page .checkout-title {
    margin: 0 0 8px;

    color: #10253b;

    font-size: clamp(
        1.8rem,
        3vw,
        2.4rem
    );

    font-weight: 750;
    letter-spacing: -0.02em;
}


/* ============================================================
   COLORES DEL CHECKOUT ORIGINAL
============================================================ */

/*
   El checkout de Informática estaba diseñado
   sobre fondo oscuro y usa muchísimo text-light.

   Aquí lo adaptamos al fondo blanco de INDI.
*/

.indi-checkout-page .text-light {
    color: #31495c !important;
}

.indi-checkout-page .text-info {
    color: #0078ba !important;
}

.indi-checkout-page .text-warning {
    color: #bd7812 !important;
}

.indi-checkout-page .text-success {
    color: #087a4d !important;
}

.indi-checkout-page hr {
    border-color: #dce5ec;
    opacity: 1;
}


/* ============================================================
   CAMPOS
============================================================ */

.indi-checkout-page .form-control,
.indi-checkout-page .form-select {
    min-height: 54px;

    border: 1px solid #ccd9e2;
    border-radius: 9px;

    background: #ffffff;
    color: #10253b;

    box-shadow: none;
}


.indi-checkout-page .form-control:focus,
.indi-checkout-page .form-select:focus {
    border-color: #159fdf;

    box-shadow:
        0 0 0 3px
        rgba(21, 159, 223, 0.11);
}


.indi-checkout-page .form-floating > label {
    color: #748694;
}


.indi-checkout-page .required {
    color: #dc3545;
}


/* ============================================================
   OPCIONES
============================================================ */

.indi-checkout-page .payment-options {
    display: grid;

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

    gap: 12px;
}


.indi-checkout-page .payment-card {
    position: relative;

    min-height: 95px;

    padding:
        18px 46px 18px 18px;

    display: block;

    border: 1px solid #d5e1e8;
    border-radius: 11px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.indi-checkout-page .payment-card:hover {
    border-color: #8dc9e8;

    transform: translateY(-1px);
}


.indi-checkout-page
.payment-card:has(input[type="radio"]:checked) {
    border-color: #159fdf;

    box-shadow:
        0 0 0 3px
        rgba(21, 159, 223, 0.09);
}


.indi-checkout-page
.payment-card input[type="radio"] {
    position: absolute;

    top: 18px;
    right: 18px;

    accent-color: #0078ba;
}


.indi-checkout-page .payment-content {
    color: #10253b;
}


.indi-checkout-page .payment-content strong {
    color: #10253b !important;
}


.indi-checkout-page .payment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.indi-checkout-page .payment-logos {
    display: flex;
    align-items: center;

    gap: 7px;
}


.indi-checkout-page .payment-logos img {
    width: auto;
    max-width: 60px;
    height: 27px;

    object-fit: contain;
}


/* ============================================================
   RESUMEN
============================================================ */

.indi-checkout-page .checkout-resumen {
    margin: 24px 0;

    padding: 22px;

    border: 1px solid #dce5ec;
    border-radius: 12px;

    background: #f7fafc;
}


.indi-checkout-page .checkout-producto {
    padding: 15px;

    border: 1px solid #e0e7ec;
    border-radius: 9px;

    background: #ffffff;
}


/* ============================================================
   CONSENTIMIENTOS
============================================================ */

.indi-checkout-page .checkout-consentimientos {
    padding: 20px;

    border: 1px solid #dce5ec;
    border-radius: 12px;

    background: #f8fbfd;
}


.indi-checkout-page .checkout-consentimiento {
    margin-bottom: 12px;
    padding: 13px;

    display: flex;

    gap: 11px;

    border-radius: 8px;

    background: #ffffff;

    color: #31495c;
}


.indi-checkout-page
.checkout-consentimiento input {
    margin-top: 4px;

    accent-color: #0078ba;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {

    .indi-checkout-page .checkout-wrapper {
        padding: 22px 16px;

        border-radius: 12px;
    }


    .indi-checkout-page .payment-options {
        grid-template-columns: 1fr;
    }


    .indi-checkout-page .payment-header {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* ============================================================
   CHECKOUT EN TARJETAS - INVENCIÓN DIGITAL
============================================================ */

.indi-checkout-page {
    min-height: 75vh;
    padding-bottom: 60px;
    background: #f5f8fc;
}


/* Quitamos la gran tarjeta blanca anterior */

.indi-checkout-page .checkout-wrapper {
    width: 100%;
    max-width: 1420px;

    margin: 0 auto;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


/* ============================================================
   DISTRIBUCIÓN 3 COLUMNAS
============================================================ */

.indi-checkout-grid {
    display: grid;

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

    gap: 22px;

    align-items: start;

    margin-top: 25px;
}


.indi-checkout-column {
    min-width: 0;

    display: grid;

    gap: 20px;

    align-content: start;
}


/* ============================================================
   TARJETAS
============================================================ */

.indi-checkout-box {
    overflow: hidden;

    border:
        1px solid #d7e3ec;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 7px 22px
        rgba(21, 60, 88, 0.07);
}


.indi-checkout-box__header {
    min-height: 68px;

    padding:
        13px 16px;

    display: flex;
    align-items: center;

    gap: 11px;

    background:
        linear-gradient(
            120deg,
            #086fae 0%,
            #168ed5 100%
        );

    color: #ffffff;
}


.indi-checkout-box__header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 750;
}


.indi-checkout-box__header p {
    margin:
        2px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: 0.68rem;

    line-height: 1.3;
}


.indi-checkout-step {
    width: 29px;
    height: 29px;

    flex:
        0 0 29px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 50%;

    background:
        rgba(255,255,255,.15);

    color: #ffffff;

    font-size: 0.76rem;
    font-weight: 800;
}


.indi-checkout-box__body {
    padding:
        16px;
}


/* ============================================================
   FORMULARIOS MÁS COMPACTOS
============================================================ */

.indi-checkout-page .form-floating {
    margin-bottom:
        11px !important;
}


.indi-checkout-page
.form-floating > .form-control,
.indi-checkout-page
.form-floating > .form-select {
    min-height: 52px;
    height: 52px;

    border-radius: 8px;
}


.indi-checkout-page
.form-floating > label {
    padding:
        0.92rem 0.78rem;
}


.indi-checkout-page textarea.form-control {
    min-height: 82px;
}


/* ============================================================
   DIRECCIÓN EN DOS COLUMNAS
============================================================ */

.indi-address-fields {
    display: grid;

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

    gap:
        0 11px;
}


/* Calle ocupa ambas */

.indi-address-fields
.form-floating:first-child {
    grid-column:
        1 / -1;
}


/* ============================================================
   RESUMEN
============================================================ */

.indi-checkout-summary
.checkout-producto {
    margin-bottom:
        11px !important;

    padding:
        13px;

    border:
        1px solid #e1e8ee;

    border-radius: 9px;

    background: #f8fbfd;
}


.indi-checkout-summary
[style*="min-width:320px"] {
    width: 100%;

    min-width:
        0 !important;
}


/* ============================================================
   PAYMENT OPTIONS EN ESTAS COLUMNAS
============================================================ */

.indi-checkout-box
.payment-options {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 10px;
}


.indi-checkout-box
.payment-card {
    min-height: 78px;

    padding:
        13px 39px 13px 14px;

    border-radius: 9px;
}


/* ============================================================
   CONSENTIMIENTOS
============================================================ */

.indi-checkout-box
.checkout-consentimientos {
    margin: 0 !important;

    padding: 0;

    border: 0;

    background: transparent;
}


.indi-checkout-box
.checkout-consentimiento {
    margin-bottom: 9px;

    padding:
        11px;

    font-size: 0.76rem;
}


/* ============================================================
   BOTÓN FINAL
============================================================ */

.indi-checkout-cta {
    border:
        2px solid #19b85e;
}


.indi-checkout-cta
.indi-checkout-box__body {
    padding:
        14px;
}


.indi-checkout-cta
#btnContinuarPago {
    min-height: 52px;

    border-radius: 9px !important;

    font-size: 0.88rem;
    font-weight: 750;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199.98px) {

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


    .indi-checkout-column--right {
        grid-column:
            1 / -1;

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

}


@media (max-width: 991.98px) {

    .indi-checkout-grid {
        grid-template-columns:
            1fr;
    }


    .indi-checkout-column--right {
        grid-column: auto;

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 575.98px) {

    .indi-address-fields {
        grid-template-columns:
            1fr;
    }


    .indi-address-fields
    .form-floating:first-child {
        grid-column: auto;
    }


    .indi-checkout-box__body {
        padding:
            13px;
    }

}

/* ============================================================
   FONDO GENERAL REUTILIZABLE - INVENCIÓN DIGITAL
============================================================ */

.indi-page-background {
    position: relative;
    background: #f3f7fb;
    overflow: hidden;
    isolation: isolate;
}


.indi-page-background::before,
.indi-page-background::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 280px;
    background: #3159e8;
    pointer-events: none;
    z-index: 0;
    clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%);
}


.indi-page-background::before {
    top: -10px;
    left: 1px;
}

.indi-page-background::after {
    right: -2px;
    bottom: -12px;
}


.indi-page-background > .container-xl,
.indi-page-background > .container {
    position: relative;

    z-index: 1;
}

/* ============================================================
   CHECKOUT - SIN NUMERACIÓN
============================================================ */

.indi-checkout-step {
    display: none;
}

/* ============================================================
   CHECKOUT MÁS COMPACTO
============================================================ */

.indi-checkout-grid {
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(0, 0.92fr)
        minmax(0, 1fr);

    gap: 16px;
}


.indi-checkout-column {
    gap: 14px;
}


.indi-checkout-box__header {
    min-height: 54px;

    padding:
        10px 14px;
}


.indi-checkout-box__header h3 {
    font-size: 0.95rem;
}


.indi-checkout-box__header p {
    margin-top: 2px;

    font-size: 0.65rem;
}


.indi-checkout-box__body {
    padding:
        13px 14px;
}


.indi-checkout-page
.form-floating {
    margin-bottom:
        9px !important;
}


.indi-checkout-page
.form-floating > .form-control,
.indi-checkout-page
.form-floating > .form-select {
    min-height: 48px;
    height: 48px;
}


.indi-checkout-page
.payment-card {
    min-height: 66px;

    padding:
        11px 38px 11px 12px;
}


.indi-checkout-page
.alert {
    padding:
        9px 11px;

    margin-bottom:
        10px;

    font-size: 0.70rem;
}

/* ============================================================
   ENTREGA + DIRECCIÓN COMO UN MISMO BLOQUE
============================================================ */


/*
   Si la dirección está visible,
   quitamos el redondeo inferior
   a Método de entrega.
*/

.indi-checkout-shipping:has(
    + .indi-checkout-address:not(.d-none)
) {
    border-radius:
        15px 15px 0 0;
}


/*
   Dirección aparece pegada
   inmediatamente debajo.
*/

.indi-checkout-address:not(.d-none) {
    margin-top:
        -14px;

    border-top: 0;

    border-radius:
        0 0 15px 15px;
}


/*
   El encabezado de Dirección ya no
   parece otra sección principal.
*/

.indi-checkout-address
.indi-checkout-box__header {
    min-height: 48px;

    padding:
        9px 14px;

    background:
        #eaf6fd;

    border-top:
        1px solid #c6e5f5;

    border-bottom:
        1px solid #d6e7f1;
}


.indi-checkout-address
.indi-checkout-box__header h3 {
    color:
        #086fae;

    font-size:
        0.88rem;
}


.indi-checkout-address
.indi-checkout-box__header p {
    color:
        #638092;
}

/* ============================================================
   RESUMEN DEL PEDIDO DESTACADO
============================================================ */

.indi-checkout-summary {
    border:
        2px solid #a7d6ef;

    box-shadow:
        0 9px 25px
        rgba(0, 120, 186, 0.10);
}


.indi-checkout-summary
.indi-checkout-box__header {
    background:
        linear-gradient(
            120deg,
            #064b78 0%,
            #087fbd 100%
        );
}


.indi-checkout-summary
#totalFinal {
    font-weight: 800;
}

.indi-checkout-consents
.checkout-consentimiento {
    margin-bottom:
        7px;

    padding:
        9px 10px;

    font-size:
        0.70rem;

    line-height:
        1.35;
}


.indi-checkout-consents
.checkout-consentimiento small {
    font-size:
        0.62rem;
}

/* ============================================================
   CHECKOUT - MEJOR LEGIBILIDAD EN ENCABEZADOS
============================================================ */

.indi-checkout-box__header {
    min-height: 64px;
    padding: 12px 15px;
}

.indi-checkout-box__header h3 {
    margin: 0;

    font-size: 1.10rem;
    font-weight: 800;
    line-height: 1.2;

    color: #ffffff;
}

.indi-checkout-box__header p {
    margin: 4px 0 0;

    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;

    color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   CHECKOUT - CORRECCIÓN DE SELECTS
============================================================ */

.indi-checkout-page
.form-floating > .form-select {
    height: 58px !important;
    min-height: 58px !important;

    padding-top: 1.55rem;
    padding-bottom: 0.35rem;

    line-height: 1.25;

    font-size: 0.88rem;
}

.indi-checkout-page
.form-floating > .form-select ~ label {
    padding-top: 0.95rem;

    font-size: 0.84rem;
}

/* ============================================================
   CHECKOUT - INPUTS
============================================================ */

.indi-checkout-page
.form-floating > .form-control:not(textarea) {
    height: 54px !important;
    min-height: 54px !important;

    font-size: 0.88rem;
}

/* ============================================================
   CHECKOUT - ARCHIVO CONSTANCIA FISCAL
============================================================ */

.indi-checkout-page
input[type="file"].form-control {
    height: auto !important;
    min-height: 54px !important;

    padding: 0.48rem 0.65rem;

    line-height: 1.5;

    font-size: 0.82rem;

    overflow: visible;
}

.indi-checkout-page
input[type="file"].form-control::file-selector-button {
    min-height: 36px;

    margin:
        -0.48rem
        0.75rem
        -0.48rem
        -0.65rem;

    padding:
        0.55rem 0.9rem;

    border: 0;
    border-right:
        1px solid #cfdbe6;

    background: #f5f8fb;

    color: #17324d;

    font-size: 0.80rem;

    cursor: pointer;
}

/* ============================================================
   CHECKOUT - PROPORCIÓN DE COLUMNAS
============================================================ */

.indi-checkout-grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.05fr);

    gap: 17px;
}

/* ============================================================
   CHECKOUT - RESPONSIVE FINAL
   IMPORTANTE: mantener al final de style.css
============================================================ */

@media (max-width: 991.98px) {

    .indi-checkout-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .indi-checkout-column,
    .indi-checkout-column--left,
    .indi-checkout-column--center,
    .indi-checkout-column--right {
        width: 100%;
        min-width: 0;

        grid-column: auto;

        grid-template-columns: 1fr;
    }


    .indi-checkout-page .container-xl {
        max-width: 100%;

        padding-right: 16px;
        padding-left: 16px;
    }


    .indi-checkout-page .checkout-wrapper {
        width: 100%;

        margin: 0;

        padding: 0;

        border: 0;

        background: transparent;

        box-shadow: none;
    }


    .indi-checkout-box {
        width: 100%;
        min-width: 0;
    }

}


/* ============================================================
   CHECKOUT - CELULAR
============================================================ */

@media (max-width: 575.98px) {

    .indi-checkout-page .container-xl {
        padding-right: 11px;
        padding-left: 11px;
    }


    .indi-checkout-grid {
        gap: 14px;

        margin-top: 18px;
    }


    .indi-checkout-column {
        gap: 14px;
    }


    /* TÍTULO */

    .indi-checkout-page .checkout-title {
        font-size: 1.75rem;

        line-height: 1.1;

        letter-spacing: -0.025em;
    }


    .indi-checkout-page
    .checkout-wrapper > p {
        font-size: 0.78rem;
    }


    /* ENCABEZADOS */

    .indi-checkout-box__header {
        min-height: 60px;

        padding:
            11px 13px;
    }


    .indi-checkout-box__header h3 {
        font-size: 1.05rem;
    }


    .indi-checkout-box__header p {
        font-size: 0.74rem;

        line-height: 1.3;
    }


    /* DIRECCIÓN */

    .indi-address-fields {
        grid-template-columns: 1fr;
    }


    .indi-address-fields
    .form-floating:first-child {
        grid-column: auto;
    }


    /* MÉTODOS DE PAGO */

    .indi-checkout-box .payment-options,
    .indi-checkout-page .payment-options {
        grid-template-columns: 1fr;
    }


    .indi-checkout-page .payment-card {
        width: 100%;
        min-width: 0;
    }


    .indi-checkout-page .payment-header {
        flex-direction: row;

        align-items: center;

        gap: 10px;
    }


    .indi-checkout-page .payment-logos {
        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 4px;
    }


    .indi-checkout-page
    .payment-logos img {
        max-width: 46px;

        height: 22px;
    }


    /* FRANJAS DECORATIVAS */

    .indi-page-background::before,
    .indi-page-background::after {
        width: 90px;
        height: 200px;
    }


    .indi-page-background::before {
        top: -8px;
        left: -18px;
    }


    .indi-page-background::after {
        right: -20px;
        bottom: -8px;
    }

}

/* ============================================================
   INVENCIÓN DIGITAL
   PÁGINA DE PAGO CON TARJETA
============================================================ */

.indi-payment-page {
    position: relative;
    min-height: 100vh;

    background: #f3f7fb;
}


.indi-payment-page .container-xl {
    position: relative;
    z-index: 1;
}


/* ============================================================
   CONTENEDOR GENERAL
============================================================ */

.indi-payment-page .checkout-wrapper {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}


/* ============================================================
   TÍTULO
============================================================ */

.indi-payment-page .checkout-title {
    margin: 4px 0 20px;

    color: #092f52;

    font-size: 2rem;
    font-weight: 800;

    line-height: 1.15;
}


/* ============================================================
   RESUMEN DEL PEDIDO
============================================================ */

.indi-payment-page .checkout-resumen {
    position: relative;

    padding: 22px;

    border: 1px solid #cfe0ed;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 55, 85, .08);
}


/*
    El pagar.php viejo utiliza text-light porque
    Informática tenía fondo oscuro.

    SOLO en esta página lo convertimos a texto oscuro.
*/

.indi-payment-page .checkout-resumen .text-light {
    color: #17324d !important;
}


.indi-payment-page .checkout-resumen .text-info {
    color: #087fbd !important;
}


.indi-payment-page .checkout-resumen .text-warning {
    color: #d88700 !important;
}


.indi-payment-page .checkout-resumen .text-success {
    color: #00874a !important;
}


/* Título resumen */

.indi-payment-page .checkout-resumen > h4 {
    margin-bottom: 18px !important;

    color: #087fbd !important;

    font-size: 1.25rem;
    font-weight: 800;
}


/* ============================================================
   PRODUCTO
============================================================ */

.indi-payment-page .checkout-producto {
    padding: 17px 18px;

    border: 1px solid #dce7ef;
    border-radius: 13px;

    background: #f9fbfd;
}


.indi-payment-page .checkout-producto > .fw-bold {
    color: #123d60 !important;

    font-size: 1.04rem;
    font-weight: 800 !important;
}


.indi-payment-page .checkout-producto > .small {
    margin-top: 3px;

    color: #60788c !important;

    font-size: .82rem;
}


/*
    El bloque original tiene min-width:320px inline.
    En escritorio lo dejamos respirar.
*/

.indi-payment-page .checkout-producto
.d-flex.justify-content-end > div {
    width: min(100%, 390px);
}


/* Filas del resumen */

.indi-payment-page .checkout-resumen
.d-flex.justify-content-between {
    gap: 15px;

    align-items: center;
}


.indi-payment-page .checkout-resumen hr {
    opacity: 1;

    border-color: #dbe5ec;
}


/* ============================================================
   TOTAL FINAL
============================================================ */

.indi-payment-page .checkout-resumen
strong.text-success.fs-4 {
    color: #00874a !important;

    font-size: 1.45rem !important;
    font-weight: 900 !important;
}


/* ============================================================
   CONFIANZA
============================================================ */

.indi-payment-page .pago-confianza {
    padding: 22px;

    border: 1px solid #cfe0ed;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 55, 85, .07);
}


.indi-payment-page .pago-confianza-encabezado {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.indi-payment-page
.pago-confianza-icono-principal {
    display: flex;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e7f6ff;

    color: #087fbd;

    font-size: 1.45rem;
}


.indi-payment-page .pago-confianza-titulo {
    margin: 0;

    color: #123d60;

    font-size: 1.22rem;
    font-weight: 800;
}


.indi-payment-page .pago-confianza-subtitulo {
    margin: 4px 0 0;

    color: #61778b;

    font-size: .88rem;

    line-height: 1.45;
}


/* ============================================================
   TARJETAS DE CONFIANZA
============================================================ */

.indi-payment-page .pago-confianza-grid {
    display: grid;

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

    gap: 13px;
}


.indi-payment-page .pago-confianza-card {
    display: flex;

    gap: 12px;

    padding: 15px;

    border: 1px solid #dce7ef;
    border-radius: 12px;

    background: #f8fbfd;
}


.indi-payment-page .pago-confianza-card-icono {
    display: flex;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8f7ef;

    color: #00874a;

    font-size: 1rem;
}


.indi-payment-page .pago-confianza-card h4 {
    margin: 0 0 6px;

    color: #17324d;

    font-size: .93rem;
    font-weight: 800;
}


.indi-payment-page .pago-confianza-card p {
    margin-bottom: 8px;

    color: #657b8d;

    font-size: .77rem;

    line-height: 1.45;
}


/* Monto exacto */

.indi-payment-page .pago-confianza-monto {
    display: flex;

    flex-wrap: wrap;

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

    gap: 8px;

    margin-top: 10px;

    padding: 10px 11px;

    border-radius: 9px;

    background: #edf9f2;
}


.indi-payment-page .pago-confianza-monto span {
    color: #536b7e;

    font-size: .72rem;
}


.indi-payment-page .pago-confianza-monto strong {
    color: #00874a;

    font-size: 1rem;
}


/* Pedido / correo */

.indi-payment-page .pago-confianza-pedido {
    color: #087fbd;

    font-weight: 800;
}


.indi-payment-page .pago-confianza-dato {
    overflow-wrap: anywhere;

    margin: 8px 0;

    color: #e66f16;

    font-size: .78rem;
    font-weight: 700;
}


/* Contacto */

.indi-payment-page .pago-confianza-contactos {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.indi-payment-page .pago-confianza-contactos a {
    color: #087fbd;

    font-size: .76rem;
    font-weight: 700;

    text-decoration: none;
}


.indi-payment-page .pago-confianza-contactos a:hover {
    text-decoration: underline;
}


/* ============================================================
   PASOS DESPUÉS DEL PAGO
============================================================ */

.indi-payment-page .pago-confianza-pasos {
    margin-top: 17px;

    padding: 15px;

    border-radius: 12px;

    background: #edf6fc;
}


.indi-payment-page .pago-confianza-pasos > h4 {
    margin: 0 0 12px;

    color: #123d60;

    font-size: .93rem;
    font-weight: 800;
}


.indi-payment-page .pago-confianza-pasos-grid {
    display: grid;

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

    gap: 12px;
}


.indi-payment-page .pago-confianza-pasos-grid > div {
    display: flex;

    align-items: flex-start;

    gap: 8px;
}


.indi-payment-page .pago-confianza-pasos-grid span {
    display: flex;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #087fbd;

    color: #ffffff;

    font-size: .73rem;
    font-weight: 800;
}


.indi-payment-page .pago-confianza-pasos-grid p {
    margin: 3px 0 0;

    color: #536b7e;

    font-size: .75rem;

    line-height: 1.4;
}


/* ============================================================
   AVISO SEGURIDAD
============================================================ */

.indi-payment-page .pago-confianza-seguridad {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 15px;

    padding: 12px 14px;

    border: 1px solid #f1d7a5;
    border-radius: 10px;

    background: #fff8e8;

    color: #75531b;

    font-size: .76rem;

    line-height: 1.45;
}


.indi-payment-page
.pago-confianza-seguridad i {
    margin-top: 1px;

    color: #e49a15;
}


/* ============================================================
   PAYMENT BRICK
============================================================ */

.indi-payment-page .indi-payment-brick {
    overflow: hidden;

    margin-top: 18px;

    border: 1px solid #bcdcee;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(15, 55, 85, .08);
}


.indi-payment-page
.indi-payment-brick__header {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 18px;

    background:
        linear-gradient(
            120deg,
            #075f96 0%,
            #0a96d2 100%
        );

    color: #ffffff;
}


.indi-payment-page
.indi-payment-brick__icon {
    display: flex;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.15);

    font-size: 1.2rem;
}


.indi-payment-page
.indi-payment-brick__header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 800;
}


.indi-payment-page
.indi-payment-brick__header p {
    margin: 3px 0 0;

    color:
        rgba(255,255,255,.9);

    font-size: .73rem;
}


.indi-payment-page
.indi-payment-brick__body {
    padding: 20px;
}


/* Contenedor generado por Mercado Pago */

.indi-payment-page
#paymentBrick_container {
    width: 100%;

    min-height: 120px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {

    .indi-payment-page .container-xl {
        padding-right: 12px;
        padding-left: 12px;
    }


    .indi-payment-page .checkout-title {
        font-size: 1.65rem;
    }


    .indi-payment-page .checkout-resumen,
    .indi-payment-page .pago-confianza {
        padding: 16px;
    }


    .indi-payment-page .pago-confianza-grid,
    .indi-payment-page .pago-confianza-pasos-grid {
        grid-template-columns: 1fr;
    }


    .indi-payment-page
    .checkout-producto
    .d-flex.justify-content-end > div {
        min-width: 0 !important;

        width: 100% !important;
    }


    .indi-payment-page
    .indi-payment-brick__header {
        align-items: flex-start;

        padding: 14px;
    }


    .indi-payment-page
    .indi-payment-brick__body {
        padding: 13px;
    }

}

/* ============================================================
   PAGO INDI - DISTRIBUCIÓN GENERAL
============================================================ */

.indi-payment-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;

    align-items: start;
}


/* ============================================================
   PAGO INDI - ESCRITORIO
   Tres columnas solamente en computadora
============================================================ */

@media (min-width: 1200px) {

    .indi-payment-page .checkout-wrapper {
        max-width: 1160px;
    }


    .indi-payment-grid {
        grid-template-columns:
            minmax(0, 1.03fr)
            minmax(0, .92fr)
            minmax(360px, 1.08fr);

        gap: 16px;

        align-items: start;
    }


    /* ========================================================
       TÍTULO MÁS COMPACTO
    ======================================================== */

    .indi-payment-page .checkout-title {
        margin:
            2px 0
            14px;

        font-size: 1.75rem;
    }


    /* ========================================================
       COLUMNA 1 - RESUMEN
    ======================================================== */

    .indi-payment-page .checkout-resumen {
        margin: 0 !important;

        padding: 15px;

        border-radius: 15px;
    }


    .indi-payment-page
    .checkout-resumen > h4 {
        margin-bottom: 13px !important;

        font-size: 1.05rem;
    }


    .indi-payment-page .checkout-producto {
        margin-bottom: 0 !important;

        padding: 13px;

        border-radius: 11px;
    }


    .indi-payment-page
    .checkout-producto > .fw-bold {
        font-size: .90rem;
    }


    .indi-payment-page
    .checkout-producto > .small {
        font-size: .72rem;
    }


    .indi-payment-page
    .checkout-producto .mt-3 {
        margin-top: 10px !important;
    }


    .indi-payment-page
    .indi-product-price-box {
        width: 100%;

        min-width: 0 !important;
    }


    .indi-payment-page
    .checkout-resumen
    .d-flex.justify-content-between {
        gap: 10px;

        font-size: .78rem;
    }


    .indi-payment-page
    .checkout-resumen hr {
        margin:
            10px 0;
    }


    .indi-payment-page
    .checkout-resumen hr.my-4 {
        margin:
            13px 0 !important;
    }


    .indi-payment-page
    .checkout-resumen
    strong.text-success.fs-4 {
        font-size:
            1.15rem !important;
    }


    /* ========================================================
       COLUMNA 2 - CONFIANZA
    ======================================================== */

    .indi-payment-page .pago-confianza {
        margin: 0 !important;

        padding: 15px;

        border-radius: 15px;
    }


    .indi-payment-page
    .pago-confianza-encabezado {
        gap: 10px;

        margin-bottom: 12px;
    }


    .indi-payment-page
    .pago-confianza-icono-principal {
        flex-basis: 39px;

        width: 39px;
        height: 39px;

        font-size: 1.1rem;
    }


    .indi-payment-page
    .pago-confianza-titulo {
        font-size: .94rem;
    }


    .indi-payment-page
    .pago-confianza-subtitulo {
        font-size: .69rem;

        line-height: 1.35;
    }


    /*
        En la columna central ya NO queremos
        las tres tarjetas lado a lado.
    */

    .indi-payment-page
    .pago-confianza-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .indi-payment-page
    .pago-confianza-card {
        gap: 9px;

        padding: 10px;

        border-radius: 10px;
    }


    .indi-payment-page
    .pago-confianza-card-icono {
        flex-basis: 32px;

        width: 32px;
        height: 32px;

        font-size: .82rem;
    }


    .indi-payment-page
    .pago-confianza-card h4 {
        margin-bottom: 3px;

        font-size: .78rem;
    }


    .indi-payment-page
    .pago-confianza-card p {
        margin-bottom: 5px;

        font-size: .67rem;

        line-height: 1.35;
    }


    .indi-payment-page
    .pago-confianza-monto {
        margin-top: 6px;

        padding: 7px 8px;
    }


    .indi-payment-page
    .pago-confianza-monto span {
        font-size: .64rem;
    }


    .indi-payment-page
    .pago-confianza-monto strong {
        font-size: .83rem;
    }


    .indi-payment-page
    .pago-confianza-dato {
        margin: 5px 0;

        font-size: .67rem;
    }


    .indi-payment-page
    .pago-confianza-contactos {
        gap: 3px;
    }


    .indi-payment-page
    .pago-confianza-contactos a {
        font-size: .67rem;
    }


    /* Qué sucede después */

    .indi-payment-page
    .pago-confianza-pasos {
        margin-top: 9px;

        padding: 10px;
    }


    .indi-payment-page
    .pago-confianza-pasos > h4 {
        margin-bottom: 8px;

        font-size: .77rem;
    }


    .indi-payment-page
    .pago-confianza-pasos-grid {
        grid-template-columns: 1fr;

        gap: 6px;
    }


    .indi-payment-page
    .pago-confianza-pasos-grid span {
        flex-basis: 23px;

        width: 23px;
        height: 23px;

        font-size: .62rem;
    }


    .indi-payment-page
    .pago-confianza-pasos-grid p {
        margin-top: 2px;

        font-size: .65rem;
    }


    .indi-payment-page
    .pago-confianza-seguridad {
        gap: 7px;

        margin-top: 9px;

        padding: 9px;

        font-size: .65rem;

        line-height: 1.35;
    }


    /* ========================================================
       COLUMNA 3 - PAYMENT BRICK
    ======================================================== */

    .indi-payment-page
    .indi-payment-brick {
        min-width: 0;

        margin: 0 !important;

        border-radius: 15px;
    }


    .indi-payment-page
    .indi-payment-brick__header {
        gap: 10px;

        padding: 12px 14px;
    }


    .indi-payment-page
    .indi-payment-brick__icon {
        flex-basis: 36px;

        width: 36px;
        height: 36px;

        font-size: 1rem;
    }


    .indi-payment-page
    .indi-payment-brick__header h3 {
        font-size: .93rem;
    }


    .indi-payment-page
    .indi-payment-brick__header p {
        font-size: .67rem;

        line-height: 1.35;
    }


    .indi-payment-page
    .indi-payment-brick__body {
        padding: 13px;
    }


    .indi-payment-page
    #paymentBrick_container {
        width: 100%;

        min-width: 0;
    }

}

/* ==========================================================
   PAGAR.PHP - AJUSTE VISUAL MÁS LIMPIO Y SIMÉTRICO
========================================================== */

.indi-payment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

@media (min-width: 1200px) {
    .indi-payment-grid {
        grid-template-columns: 1fr 1fr 1.08fr;
        gap: 18px;
        align-items: stretch;
    }
}

/* Tarjetas superiores */
.indi-payment-page .checkout-resumen,
.indi-payment-page .pago-confianza,
.indi-payment-page .indi-payment-brick {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Título principal */
.indi-payment-page .checkout-title {
    font-size: 2rem;
    margin-bottom: 18px;
}

/* Encabezados de tarjetas */
.indi-payment-page .checkout-resumen > h4,
.indi-payment-page .pago-confianza-titulo,
.indi-payment-page .indi-payment-brick__header h3 {
    font-size: 1.15rem;
    line-height: 1.2;
}

/* Subtítulos */
.indi-payment-page .pago-confianza-subtitulo,
.indi-payment-page .indi-payment-brick__header p {
    font-size: .90rem;
    line-height: 1.45;
}

/* ==========================================================
   RESUMEN DEL PEDIDO
========================================================== */

.checkout-producto-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 16px;
    align-items: start;
}

.checkout-producto-titulo {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0b2d57;
    line-height: 1.25;
    margin-bottom: 6px;
}

.checkout-producto-modelo {
    font-size: .95rem;
    color: #5c6f82;
    line-height: 1.4;
}

.checkout-producto-precios .indi-product-price-box {
    width: 100%;
    min-width: 0 !important;
}

.indi-payment-page .checkout-resumen .d-flex.justify-content-between {
    font-size: .95rem;
    line-height: 1.45;
}

.indi-payment-page .checkout-resumen strong.text-success.fs-4 {
    font-size: 1.9rem !important;
}

.indi-payment-page .checkout-resumen hr {
    margin: 12px 0;
}

/* ==========================================================
   COLUMNA CENTRO - CONFIANZA
========================================================== */

.indi-payment-page .pago-confianza {
    padding: 16px;
}

.indi-payment-page .pago-confianza-encabezado {
    gap: 12px;
    margin-bottom: 14px;
}

.indi-payment-page .pago-confianza-icono-principal {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}

.indi-payment-page .pago-confianza-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.indi-payment-page .pago-confianza-card {
    padding: 12px;
    border-radius: 12px;
}

.indi-payment-page .pago-confianza-card h4 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.indi-payment-page .pago-confianza-card p,
.indi-payment-page .pago-confianza-contactos a,
.indi-payment-page .pago-confianza-dato {
    font-size: .90rem;
    line-height: 1.45;
}

.indi-payment-page .pago-confianza-monto strong {
    font-size: 1rem;
}

/* ==========================================================
   COLUMNA DERECHA - FORMULARIO DE PAGO
========================================================== */

.indi-payment-page .indi-payment-brick__header {
    padding: 16px;
    gap: 12px;
}

.indi-payment-page .indi-payment-brick__icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}

.indi-payment-page .indi-payment-brick__body {
    padding: 16px;
    flex: 1;
}

/* ==========================================================
   BLOQUE INFERIOR EXTRA
========================================================== */

.pago-informacion-extra {
    margin-top: 18px;
}

.pago-informacion-extra__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 992px) {
    .pago-informacion-extra__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.pago-informacion-extra__card {
    background: #ffffff;
    border: 1px solid #c8d7e6;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(10, 35, 66, 0.06);
}

/* Pasos */
.pago-informacion-extra .pago-confianza-pasos {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.pago-informacion-extra .pago-confianza-pasos h4 {
    font-size: 1.05rem;
    margin-bottom: 12px;
    color: #0b2d57;
}

.pago-informacion-extra .pago-confianza-pasos-grid {
    display: grid;
    gap: 10px;
}

.pago-informacion-extra .pago-confianza-pasos-grid div {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pago-informacion-extra .pago-confianza-pasos-grid span {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: #1178c2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
}

.pago-informacion-extra .pago-confianza-pasos-grid p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.45;
    color: #2b435a;
}

/* Aviso seguridad */
.pago-informacion-extra .pago-confianza-seguridad {
    margin-top: 0;
    min-height: 100%;
    font-size: .93rem;
    line-height: 1.55;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991.98px) {
    .checkout-producto-grid {
        grid-template-columns: 1fr;
    }

    .checkout-producto-precios {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .indi-payment-page .checkout-title {
        font-size: 1.75rem;
    }

    .indi-payment-page .checkout-resumen > h4,
    .indi-payment-page .pago-confianza-titulo,
    .indi-payment-page .indi-payment-brick__header h3 {
        font-size: 1.05rem;
    }

    .checkout-producto-titulo {
        font-size: 1rem;
    }

    .checkout-producto-modelo,
    .indi-payment-page .checkout-resumen .d-flex.justify-content-between,
    .indi-payment-page .pago-confianza-card p,
    .indi-payment-page .pago-confianza-contactos a,
    .pago-informacion-extra .pago-confianza-pasos-grid p,
    .pago-informacion-extra .pago-confianza-seguridad {
        font-size: .92rem;
    }
}

/* ============================================================
   PAGAR.PHP - DISEÑO FINAL POR SECCIONES
============================================================ */


/* ============================================================
   DISTRIBUCIÓN
============================================================ */

.indi-payment-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    align-items: start;
}


@media (min-width: 1200px) {

    .indi-payment-page .checkout-wrapper {
        max-width: 1220px;
    }


    .indi-payment-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, 1.13fr)
            minmax(0, .92fr);

        gap: 18px;

        align-items: start;
    }

}


/* ============================================================
   TARJETAS PRINCIPALES
============================================================ */

.indi-payment-page .checkout-resumen,
.indi-payment-page .pago-confianza,
.indi-payment-page .indi-payment-brick,
.indi-payment-page .pago-informacion-extra {

    height: auto;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        #bcdcee;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 9px 25px
        rgba(0, 120, 186, .09);
}


/* ============================================================
   CABECERAS AZULES
============================================================ */

.indi-payment-section__header,
.indi-payment-page
.indi-payment-brick__header {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 86px;

    padding:
        14px 16px;

    background:
        linear-gradient(
            120deg,
            #075f96 0%,
            #0a96d2 100%
        );

    color:
        #ffffff;
}


/* ICONO */

.indi-payment-section__icon,
.indi-payment-page
.indi-payment-brick__icon {

    display: flex;

    flex:
        0 0 42px;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.15);

    color:
        #ffffff;

    font-size:
        1.1rem;
}


/* TÍTULOS */

.indi-payment-section__header h3,
.indi-payment-page
.indi-payment-brick__header h3 {

    margin: 0;

    color:
        #ffffff;

    font-size:
        1.02rem;

    font-weight:
        800;

    line-height:
        1.2;
}


/* SUBTÍTULOS */

.indi-payment-section__header p,
.indi-payment-page
.indi-payment-brick__header p {

    margin:
        4px 0 0;

    color:
        rgba(255,255,255,.92);

    font-size:
        .76rem;

    line-height:
        1.4;
}


/* ============================================================
   CUERPO DE LAS SECCIONES
============================================================ */

.indi-payment-section__body,
.indi-payment-page
.indi-payment-brick__body {

    padding:
        16px;
}


/* ============================================================
   RESUMEN
============================================================ */

.indi-payment-page
.checkout-resumen
.checkout-producto {

    margin-bottom:
        13px !important;
}


.indi-payment-page
.checkout-producto-grid {

    grid-template-columns:
        minmax(0, .85fr)
        minmax(150px, 1.15fr);

    gap:
        12px;
}


.indi-payment-page
.checkout-producto-titulo {

    font-size:
        .98rem;
}


.indi-payment-page
.checkout-producto-modelo {

    font-size:
        .82rem;
}


/* TOTAL */

.indi-payment-page
.checkout-resumen
strong.text-success.fs-4 {

    font-size:
        1.45rem !important;

    white-space:
        nowrap;
}


/* ============================================================
   SEGURIDAD Y AYUDA
============================================================ */

.indi-payment-page
.pago-confianza-grid {

    display: grid;

    grid-template-columns:
        1fr;

    gap:
        10px;
}


.indi-payment-page
.pago-confianza-card {

    padding:
        11px;

    gap:
        9px;

    border-radius:
        11px;
}


.indi-payment-page
.pago-confianza-card h4 {

    font-size:
        .90rem;
}


.indi-payment-page
.pago-confianza-card p,
.indi-payment-page
.pago-confianza-contactos a,
.indi-payment-page
.pago-confianza-dato {

    font-size:
        .78rem;

    line-height:
        1.4;
}


/* AVISO DE SEGURIDAD */

.indi-payment-page
.pago-confianza
.pago-confianza-seguridad {

    margin-top:
        11px;

    padding:
        10px 11px;

    font-size:
        .73rem;

    line-height:
        1.42;
}


/* ============================================================
   PAYMENT BRICK
============================================================ */

.indi-payment-page
.indi-payment-brick {

    min-width:
        0;
}


.indi-payment-page
#paymentBrick_container {

    width:
        100%;

    min-width:
        0;
}


/* ============================================================
   DESPUÉS DE PAGAR
============================================================ */

.indi-payment-page
.pago-informacion-extra {

    margin-top:
        18px;
}


.indi-payment-page
.pago-informacion-extra
.pago-confianza-pasos-grid {

    display: grid;

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

    gap:
        14px;
}


.indi-payment-page
.pago-informacion-extra
.pago-confianza-pasos-grid > div {

    min-width:
        0;

    display: flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        12px 13px;

    border:
        1px solid
        #dce7ef;

    border-radius:
        11px;

    background:
        #f8fbfd;
}


.indi-payment-page
.pago-informacion-extra
.pago-confianza-pasos-grid span {

    flex:
        0 0 30px;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #087fbd;

    color:
        #ffffff;

    font-size:
        .76rem;

    font-weight:
        800;
}


.indi-payment-page
.pago-informacion-extra
.pago-confianza-pasos-grid p {

    margin:
        0;

    color:
        #536b7e;

    font-size:
        .79rem;

    line-height:
        1.45;
}


.indi-payment-page
.pago-informacion-extra
.pago-confianza-pasos-grid strong {

    color:
        #17324d;

    font-size:
        .84rem;
}


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

@media (max-width: 1199.98px) {

    .indi-payment-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 767.98px) {

    .indi-payment-section__header,
    .indi-payment-page
    .indi-payment-brick__header {

        min-height:
            76px;

        padding:
            12px 13px;
    }


    .indi-payment-section__body,
    .indi-payment-page
    .indi-payment-brick__body {

        padding:
            13px;
    }


    .indi-payment-page
    .checkout-producto-grid {

        grid-template-columns:
            1fr;
    }


    .indi-payment-page
    .pago-informacion-extra
    .pago-confianza-pasos-grid {

        grid-template-columns:
            1fr;
    }

}

/* ============================================================
   PAGAR.PHP - AVISO DE SEGURIDAD DE TARJETA
============================================================ */

.indi-payment-page
.indi-payment-brick
.indi-payment-security-note {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: 16px;

    padding: 13px 14px;

    border: 1px solid #efcf8c;

    border-radius: 11px;

    background: #fff8e8;

    color: #735018;

    font-size: .84rem;

    line-height: 1.48;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.45);
}


.indi-payment-page
.indi-payment-brick
.indi-payment-security-note i {

    flex: 0 0 auto;

    margin-top: 2px;

    color: #df9511;

    font-size: 1rem;
}


.indi-payment-page
.indi-payment-brick
.indi-payment-security-note strong {

    color: #68460e;

    font-weight: 800;
}


/* Escritorio */
@media (min-width: 1200px) {

    .indi-payment-page
    .indi-payment-brick
    .indi-payment-security-note {

        font-size: .82rem;

        line-height: 1.48;

        padding: 12px 13px;
    }

}


/* Celular */
@media (max-width: 767.98px) {

    .indi-payment-page
    .indi-payment-brick
    .indi-payment-security-note {

        font-size: .90rem;

        line-height: 1.5;

        padding: 13px;
    }

}

/* ============================================================
   COMPRA EXITOSA - INVENCIÓN DIGITAL
============================================================ */

.indi-success-page {
    min-height: 70vh;
}

.indi-success-card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;

    padding: 34px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #c8deeb;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(10, 65, 100, .10);
}

.indi-success-icon {
    display: flex;

    width: 72px;
    height: 72px;

    margin: 0 auto 18px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8f8ef;

    color: #009452;

    font-size: 2rem;
}

.indi-success-icon--pending {
    background: #fff5db;
    color: #d99100;
}

.indi-success-card h1 {
    margin-bottom: 12px;

    color: #082f53;

    font-size: 1.9rem;
    font-weight: 800;
}

.indi-success-message {
    max-width: 560px;

    margin: 0 auto 24px;

    color: #587086;

    line-height: 1.55;
}

.indi-success-order,
.indi-success-total {
    display: flex;

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

    gap: 15px;

    max-width: 460px;

    margin: 10px auto;

    padding: 13px 15px;

    border-radius: 10px;

    background: #f4f8fb;
}

.indi-success-total strong {
    color: #008b4d;

    font-size: 1.2rem;
}

.indi-success-info {
    display: flex;

    gap: 12px;

    max-width: 560px;

    margin: 24px auto;

    padding: 15px;

    text-align: left;

    border: 1px solid #cde4f0;
    border-radius: 12px;

    background: #eef8fd;

    color: #24465e;
}

.indi-success-info i {
    color: #0785be;

    font-size: 1.3rem;
}

.indi-success-info p {
    margin: 4px 0 0;
}

.indi-success-register {
    max-width: 560px;

    margin: 25px auto 0;

    padding-top: 20px;

    border-top: 1px solid #dce7ee;
}

.indi-success-register h3 {
    color: #173b59;

    font-size: 1.1rem;
    font-weight: 800;
}

.indi-success-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-top: 20px;
}

@media (max-width: 767.98px) {

    .indi-success-card {
        padding: 24px 17px;
    }

    .indi-success-card h1 {
        font-size: 1.55rem;
    }

    .indi-success-order,
    .indi-success-total {
        font-size: .92rem;
    }

    .indi-success-actions {
        flex-direction: column;
    }

    .indi-success-actions .btn {
        width: 100%;
    }

}

/* ============================================================
   CATÁLOGO POR CATEGORÍA
============================================================ */

.indi-category-products {
    padding-top: 26px;
    padding-bottom: 55px;
}

.indi-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.indi-category-grid .indi-catalog-card {
    width: 100%;
    height: 100%;
}

@media (max-width: 1199.98px) {

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

}

@media (max-width: 991.98px) {

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

}

@media (max-width: 575.98px) {

    .indi-category-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

/* ============================================================
   ENCABEZADO DE CATEGORÍA
============================================================ */

.indi-category-heading {
    padding: 42px 0 10px;
}

.indi-category-heading__eyebrow {
    display: inline-block;

    margin-bottom: 5px;

    color: #168dcc;

    font-size: .78rem;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.indi-category-title {
    margin: 0;

    color: #062f52;

    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;

    line-height: 1.1;
}

.indi-category-title span {
    color: #168dcc;
}

.indi-category-heading__description {
    max-width: 680px;

    margin: 9px 0 0;

    color: #5d7183;

    font-size: .95rem;
    line-height: 1.5;
}


/* ============================================================
   BREADCRUMBS FLOTANTES
   OCULTOS AL INICIO
============================================================ */

.indi-category-breadcrumb-bar {
    position: fixed;

    top: var(
        --indi-current-header-height,
        0px
    );

    left: 0;
    right: 0;

    z-index: 1025;

    padding: 10px 0;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(-12px);

    transition:
        opacity .20s ease,
        transform .20s ease,
        visibility .20s ease;

    /*
        IMPORTANTE:
        sin fondo, sin sombra y sin barra.
    */
    background: transparent;
    border: 0;
    box-shadow: none;
}


/* APARECEN CUANDO BAJAMOS */

.indi-category-breadcrumb-bar.is-floating {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


.indi-category-breadcrumbs {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}


.indi-category-breadcrumb {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 10px 20px;

    border-radius: 14px;

    text-decoration: none;

    font-size: .94rem;
    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(8, 55, 94, .18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


.indi-category-breadcrumb:hover {
    transform: translateY(-2px);

    box-shadow:
        0 11px 25px rgba(8, 55, 94, .24);

    filter: brightness(1.04);
}


/* INICIO */

.indi-category-breadcrumb--home {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #06b99a 0%,
            #0cc8d7 100%
        );
}


/* CATEGORÍA */

.indi-category-breadcrumb--category {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1769e8 0%,
            #16b9ea 100%
        );
}


/* MARCA */

.indi-category-breadcrumb--brand {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1a2d4d 0%,
            #304f77 100%
        );
}


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

@media (max-width: 767.98px) {

    .indi-category-heading {
        padding: 28px 0 6px;
    }

    .indi-category-title {
        font-size: 1.65rem;
    }

    .indi-category-heading__description {
        font-size: .86rem;
    }

    .indi-category-breadcrumb-bar {
        padding: 7px 0;
    }

    .indi-category-breadcrumbs {
        flex-wrap: nowrap;

        gap: 8px;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .indi-category-breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .indi-category-breadcrumb {
        flex: 0 0 auto;

        min-height: 42px;

        padding: 8px 14px;

        font-size: .80rem;

        white-space: nowrap;
    }

}

/* ============================================================
   MEGA MENÚ PRODUCTOS V2
============================================================ */

.indi-products-dropdown {
    position: static;
}


/* CONTENEDOR */

.site-navigation .indi-products-menu {
    left: 50% !important;
    right: auto !important;

    width: min(1180px, calc(100vw - 42px));

    margin-top: 0;

    padding: 0;

    transform:
        translateX(-50%) !important;

    border:
        1px solid #d5e5ef;

    border-radius:
        0 0 18px 18px;

    background:
        #ffffff;

    box-shadow:
        0 18px 45px
        rgba(9, 55, 91, .15);

    overflow: visible;
}


.indi-products-menu__inner {
    position: relative;

    padding:
        18px 22px 13px;
}


/* ============================================================
   NIVEL 1
============================================================ */

.indi-products-families {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding-bottom: 15px;

    border-bottom:
        1px solid #dce8ef;
}


.indi-products-family {
    min-height: 44px;

    padding:
        8px 18px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    border:
        1px solid transparent;

    border-radius:
        11px;

    background:
        transparent;

    color:
        #17364d;

    font-size:
        .87rem;

    font-weight:
        750;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.indi-products-family i {
    color:
        #159fdf;

    font-size:
        1rem;
}


.indi-products-family:hover,
.indi-products-family.is-active {
    background:
        linear-gradient(
            135deg,
            #196ce5,
            #17b6e4
        );

    border-color:
        transparent;

    color:
        #ffffff;

    transform:
        translateY(-1px);
}


.indi-products-family:hover i,
.indi-products-family.is-active i {
    color:
        #ffffff;
}


/* ============================================================
   NIVEL 2
============================================================ */

.indi-products-categories {
    min-height:
        115px;

    padding:
        18px 4px 10px;
}


.indi-products-category-panel {
    display: none;
}


.indi-products-category-panel.is-active {
    display: flex;

    flex-wrap: wrap;
    align-items: flex-start;

    gap:
        12px 14px;
}


.indi-products-category-item {
    position: relative;

    flex:
        0 0 auto;
}


/* CATEGORÍA */

.indi-products-category-link {
    min-height:
        43px;

    padding:
        9px 15px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid #d8e5ee;

    border-radius:
        10px;

    background:
        #f8fbfd;

    color:
        #102f46;

    text-decoration:
        none;

    font-size:
        .86rem;

    font-weight:
        700;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}


.indi-products-category-link i {
    color:
        #159fdf;

    font-size:
        .70rem;
}


.indi-products-category-item:hover
.indi-products-category-link {

    border-color:
        #94cfeb;

    background:
        #eef8fd;

    color:
        #087db9;

    box-shadow:
        0 5px 15px
        rgba(12, 119, 180, .08);
}


/* ============================================================
   NIVEL 3 - MARCAS
============================================================ */

.indi-products-brands {
    position:
        absolute;

    top:
        calc(100% + 7px);

    left:
        50%;

    z-index:
        30;

    min-width:
        205px;

    padding:
        11px;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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

    border:
        1px solid #cfe2ee;

    border-radius:
        12px;

    background:
        #ffffff;

    box-shadow:
        0 12px 28px
        rgba(9, 56, 91, .16);

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}


/*
    PEQUEÑO PUENTE INVISIBLE PARA
    QUE EL SUBMENÚ NO DESAPAREZCA
    AL MOVER EL MOUSE.
*/

.indi-products-brands::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        -9px;

    height:
        10px;
}


.indi-products-category-item:hover
.indi-products-brands {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

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


.indi-products-brands__label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #70889a;

    font-size:
        .68rem;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;
}


.indi-products-brands__links {
    display:
        flex;

    gap:
        6px;
}


.indi-products-brand {
    min-width:
        49px;

    min-height:
        34px;

    padding:
        7px 10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #d8e5ed;

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #12364f;

    text-decoration:
        none;

    font-size:
        .77rem;

    font-weight:
        750;
}


.indi-products-brand:hover {
    border-color:
        #159fdf;

    background:
        #159fdf;

    color:
        #ffffff;
}


.indi-products-brand--all {
    background:
        #eef6fb;
}


/* ============================================================
   PIE
============================================================ */

.indi-products-menu__footer {
    padding-top:
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;

    border-top:
        1px solid #e0e9ef;

    color:
        #8194a3;

    font-size:
        .70rem;
}


.indi-products-menu__footer a {
    color:
        #087db9;

    font-weight:
        750;

    text-decoration:
        none;
}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 991.98px) {

    .site-navigation
    .indi-products-menu {

        position:
            static !important;

        width:
            100%;

        margin:
            0 0 10px;

        transform:
            none !important;

        border-radius:
            12px;
    }


    .indi-products-menu__inner {
        padding:
            12px;
    }


    .indi-products-families {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .indi-products-families::-webkit-scrollbar {
        display:
            none;
    }


    .indi-products-family {
        flex:
            0 0 auto;

        min-height:
            40px;

        padding:
            7px 13px;
    }


    .indi-products-categories {
        min-height:
            0;

        padding-top:
            13px;
    }


    .indi-products-category-panel.is-active {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .indi-products-category-item {
        width:
            100%;
    }


    .indi-products-category-link {
        width:
            100%;

        justify-content:
            space-between;
    }


    /*
        En celular no usamos hover flotante.
        Las marcas quedan visibles debajo.
    */

    .indi-products-brands {
        position:
            static;

        min-width:
            0;

        margin-top:
            5px;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            none;

        border:
            0;

        box-shadow:
            none;

        background:
            transparent;

        padding:
            3px 5px 8px;
    }


    .indi-products-brands__label {
        display:
            none;
    }


    .indi-products-menu__footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}

/* ============================================================
   PRODUCTO - INVENCIÓN DIGITAL
============================================================ */

.indi-product-page {
    min-height: 100vh;
}

.indi-product-layout {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    gap: 28px;
    align-items: start;
}


/* GALERÍA */

.indi-product-gallery,
.indi-product-info,
.indi-product-details {
    border: 1px solid #cfe1ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(9,55,91,.08);
}

.indi-product-gallery {
    padding: 18px;
}

.indi-product-main-image {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
}

.indi-product-zoom {
    width: 100%;
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.indi-product-zoom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .18s ease;
}

.indi-product-offer {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 11px;
    background: #109ed7;
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}

.indi-product-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 1px solid #d5e1e9;
    border-radius: 50%;
    background: #fff;
    color: #15364e;
    font-size: 1.25rem;
}

.indi-product-heart.active {
    color: #e63946;
}

.indi-product-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
}

.indi-product-thumbnail {
    flex: 0 0 82px;
    width: 82px;
    height: 72px;
    padding: 5px;
    border: 1px solid #d8e3ea;
    border-radius: 10px;
    background: #fff;
}

.indi-product-thumbnail.active {
    border: 2px solid #159fdf;
}

.indi-product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* INFORMACIÓN */

.indi-product-info {
    padding: 26px;
}

.indi-product-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.indi-product-brand {
    color: #0785c6;
    font-weight: 800;
}

.indi-product-sku {
    color: #748798;
    font-size: .82rem;
}

.indi-product-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.indi-product-heading h1 {
    margin: 0;
    color: #082f50;
    font-size: 2rem;
    font-weight: 900;
}

.indi-product-heading p {
    margin: 5px 0 0;
    color: #526b7c;
    font-size: 1.05rem;
}

.indi-product-heart--info {
    position: static;
    flex: 0 0 44px;
}

.indi-product-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: .83rem;
    font-weight: 800;
}

.indi-product-stock--available {
    background: #eaf9ef;
    color: #0b9b4b;
}

.indi-product-stock--order {
    background: #fff5df;
    color: #c27a00;
}


/* PRECIO */

.indi-product-price {
    margin-top: 20px;
}

.indi-product-old-price {
    display: block;
    margin-bottom: 3px;
    color: #7c8790;
    text-decoration: line-through;
}

.indi-product-price strong {
    display: block;
    color: #008e49;
    font-size: 2rem;
    font-weight: 900;
}

.indi-product-price small {
    font-size: .8rem;
}

.indi-product-tax {
    color: #708493;
    font-size: .78rem;
}


/* DESCRIPCIÓN */

.indi-product-description {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e1e9ef;
    color: #475e70;
    line-height: 1.55;
}


/* BOTONES */

.indi-product-actions {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.indi-product-btn {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
}

.indi-product-btn--cart {
    border: 0;
    background: #11b85e;
    color: #fff;
}

.indi-product-btn--pdf {
    border: 1px solid #157fc1;
    background: #fff;
    color: #157fc1;
}

.indi-product-btn--advisor,
.indi-product-btn--whatsapp {
    border: 1px solid #15a85b;
    background: #fff;
    color: #0b914a;
}


/* BENEFICIOS */

.indi-product-benefits {
    margin-top: 20px;
    padding-top: 16px;
    display: grid;
    gap: 8px;
    border-top: 1px solid #e1e9ef;
}

.indi-product-benefits span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #526c7e;
    font-size: .84rem;
}

.indi-product-benefits i {
    color: #128dcc;
}


/* INFORMACIÓN INFERIOR */

.indi-product-details {
    margin-top: 28px;
    overflow: hidden;
}

.indi-product-details__header {
    padding: 18px 22px;
    background: linear-gradient(120deg,#0878b6,#18a9db);
    color: #fff;
}

.indi-product-details__header span {
    font-size: .72rem;
    font-weight: 700;
}

.indi-product-details__header h2 {
    margin: 2px 0 0;
    font-size: 1.25rem;
    font-weight: 900;
}

.indi-product-details__body {
    padding: 24px;
}

.indi-product-details__body h3 {
    color: #073758;
    font-size: 1.1rem;
    font-weight: 850;
}

.indi-product-details__body p {
    color: #50697a;
    line-height: 1.6;
}

.indi-product-data {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.indi-product-data > div {
    padding: 13px;
    border: 1px solid #dce7ee;
    border-radius: 10px;
    background: #f8fbfd;
}

.indi-product-data span,
.indi-product-data strong {
    display: block;
}

.indi-product-data span {
    color: #718594;
    font-size: .72rem;
}

.indi-product-data strong {
    margin-top: 3px;
    color: #113852;
}


/* RESPONSIVE */

@media(max-width:991.98px){

    .indi-product-layout {
        grid-template-columns: 1fr;
    }

    .indi-product-main-image,
    .indi-product-zoom {
        min-height: 390px;
        height: 390px;
    }

}

@media(max-width:575.98px){

    .indi-product-info,
    .indi-product-gallery {
        padding: 14px;
    }

    .indi-product-main-image,
    .indi-product-zoom {
        min-height: 290px;
        height: 290px;
    }

    .indi-product-heading h1 {
        font-size: 1.55rem;
    }

    .indi-product-price strong {
        font-size: 1.65rem;
    }

    .indi-product-data {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   PRODUCTO.PHP - INVENCIÓN DIGITAL
========================================================= */

.indi-product-page {
    color: #0b2d4d;
    background: #f3f7fb;
    padding-bottom: 45px;
}


/* Textos heredados de Informática */

.indi-product-page .text-light {
    color: #0b2d4d !important;
}

.indi-product-page .text-info {
    color: #0786c9 !important;
}

.indi-product-page .text-warning {
    color: #e8a400 !important;
}

.indi-product-page .text-muted {
    color: #667b8e !important;
}


/* =========================================================
   ZONA PRINCIPAL DEL PRODUCTO
========================================================= */

.indi-product-page .slide-box {
    background: #ffffff;
    border: 1px solid #d7e5ef;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(8, 74, 120, .08);
}

.indi-product-page .zoom-wrapper {
    background: #ffffff;
    border-radius: 14px;
}


/* =========================================================
   TABS
========================================================= */

.indi-product-page .tabs-wrapper {
    background: transparent;
}

.indi-product-page .product-tabs {
    border-bottom: 1px solid #cddfea;
    gap: 6px;
}

.indi-product-page .product-tabs .nav-link {
    color: #0b2d4d !important;
    background: #ffffff;
    border: 1px solid #d4e3ed;
    border-radius: 10px 10px 0 0;
    font-weight: 700;
}

.indi-product-page .product-tabs .nav-link .text-light {
    color: #0b2d4d !important;
}

.indi-product-page .product-tabs .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(
        120deg,
        #0879b8,
        #14a5dc
    );
    border-color: #0879b8;
}

.indi-product-page .product-tabs .nav-link.active .text-light {
    color: #ffffff !important;
}


/* =========================================================
   CONTENIDO DE LOS TABS
========================================================= */

.indi-product-page .tab-content.bg-dark {
    background: #ffffff !important;
    color: #0b2d4d !important;
    border: 1px solid #d7e5ef;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 10px 25px rgba(8, 74, 120, .08) !important;
}

.indi-product-page .tab-content .text-light {
    color: #0b2d4d !important;
}


/* Avisos sin contenido */

.indi-product-page .alert-secondary {
    background: #f4f8fb;
    color: #39566d;
    border: 1px solid #d3e2ec;
}

/* ============================================================
   PRODUCTO.PHP - ZONA PRINCIPAL INDI
============================================================ */


/* CONTENEDOR */

.indi-product-page .indi-product-main-container {
    position: relative;
    z-index: 1;
}


/* ============================================================
   STOCK
============================================================ */

.indi-product-page .indi-product-stock-row {
    margin-bottom: -2px;
}

.indi-product-page #estadoStockProducto {
    width: fit-content;
    max-width: 100%;

    margin: 0;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 15px;

    border: 1px solid #bde8ce;
    border-radius: 999px;

    background: #ebf9f0;

    color: #09934a !important;

    font-size: .92rem !important;
    font-weight: 800 !important;
    line-height: 1.3;
}


/* ============================================================
   GALERÍA
============================================================ */

.indi-product-page .indi-product-gallery-panel .slide-box {
    margin: 0 !important;

    padding: 18px;

    border: 1px solid #cfe1ec;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(8, 74, 120, .08);
}


.indi-product-page .indi-product-gallery-panel .zoom-wrapper {
    width: 100%;

    height: clamp(
        420px,
        42vw,
        560px
    );

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

    overflow: hidden;

    border-radius: 14px;

    background: #ffffff;
}


.indi-product-page .indi-product-gallery-panel .zoom-pro {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   INFORMACIÓN DERECHA
============================================================ */

.indi-product-page .indi-product-info-panel {
    padding: 28px 30px;

    border: 1px solid #cfe1ec;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(8, 74, 120, .08);
}


/* SKU */

.indi-product-page .producto-sku {
    margin-bottom: 12px !important;

    padding: 6px 11px;

    border: 1px solid #b8def1;
    border-radius: 999px;

    background: #edf8fd;

    color: #087fbd;

    font-size: .73rem;
    font-weight: 800;

    letter-spacing: .6px;
}


/* TÍTULO */

.indi-product-page
.indi-product-info-panel h2.text-light {

    margin-bottom: 3px !important;

    color: #082f50 !important;

    font-size: clamp(
        1.7rem,
        2.3vw,
        2.15rem
    );

    font-weight: 900;
    line-height: 1.12;
}


.indi-product-page
.indi-product-info-panel h4.text-light {

    margin: 0;

    color: #4e687b !important;

    font-size: 1.05rem;
    font-weight: 500;
}


/* ============================================================
   WISHLIST
============================================================ */

.indi-product-page
.indi-product-info-panel
.btn-wishlist {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    padding: 0;

    border: 1px solid #cfe0ea;
    border-radius: 50%;

    background: #ffffff;

    color: #123851;

    font-size: 1.25rem;

    box-shadow:
        0 6px 16px
        rgba(7, 58, 91, .08);

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.indi-product-page
.indi-product-info-panel
.btn-wishlist:hover {

    transform: translateY(-2px);

    border-color: #149ed6;

    color: #149ed6;
}


.indi-product-page
.indi-product-info-panel
.btn-wishlist.active {

    color: #e63946;
}


/* ============================================================
   RATING
============================================================ */

.indi-product-page
.indi-product-info-panel
.text-warning.fs-5 {

    color: #f4ad00 !important;

    letter-spacing: 1px;
}


/* ============================================================
   PRECIO
============================================================ */

.indi-product-page
.indi-product-info-panel
.text-success.fw-bold {

    color: #008f4b !important;

    font-size: 2rem;
    font-weight: 900 !important;
}


.indi-product-page
.indi-product-info-panel
.text-info {

    color: #0588c9 !important;
}


/* ============================================================
   GARANTÍA
============================================================ */

.indi-product-page
.indi-product-info-panel
.footer-links {

    margin: 18px 0;

    padding: 13px 15px;

    border: 1px solid #cfe4f0;
    border-radius: 12px;

    background: #f3f9fc;
}


.indi-product-page
.indi-product-info-panel
.footer-links p {

    margin: 0 !important;

    color: #123c57 !important;

    font-size: .92rem !important;
    font-weight: 650 !important;

    line-height: 1.45;
}


.indi-product-page
.indi-product-info-panel
.footer-links a {

    color: #087fbd !important;

    font-size: .92rem !important;
}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

.indi-product-page
.indi-product-info-panel h7 {

    display: block;

    margin: 18px 0;

    color: #405d71 !important;

    font-size: .94rem;
    font-weight: 400;

    line-height: 1.65;
}


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

.indi-product-page
.indi-product-info-panel
.d-grid {

    gap: 9px !important;
}


.indi-product-page
.indi-product-info-panel
.btn {

    min-height: 46px;

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

    border-radius: 8px;

    font-size: .86rem;
    font-weight: 800;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.indi-product-page
.indi-product-info-panel
.btn-success {

    border-color: #11b85e;

    background: #11b85e;

    color: #ffffff;
}


.indi-product-page
.indi-product-info-panel
.btn-success:hover {

    transform: translateY(-1px);

    background: #0da753;

    border-color: #0da753;

    box-shadow:
        0 7px 16px
        rgba(17, 184, 94, .18);
}


.indi-product-page
.indi-product-info-panel
.btn-ficha {

    border: 1px solid #087fbd;

    background: #ffffff;

    color: #087fbd;
}


.indi-product-page
.indi-product-info-panel
.btn-outline-success {

    border-color: #0fa75a;

    background: #ffffff;

    color: #09934c;
}


/* ============================================================
   TABS - LIMPIAR FLECHAS ANTIGUAS
============================================================ */

.indi-product-page .tabs-arrow {
    display: none !important;
}


.indi-product-page .tabs-wrapper {
    overflow: visible;
}


.indi-product-page .product-tabs {
    overflow-x: auto !important;

    scrollbar-width: none;
}


.indi-product-page
.product-tabs::-webkit-scrollbar {

    display: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width: 991.98px){

    .indi-product-page
    .indi-product-info-panel {

        padding: 22px;
    }


    .indi-product-page
    .indi-product-gallery-panel
    .zoom-wrapper {

        height: 440px;
    }

}


@media(max-width: 575.98px){

    .indi-product-page
    .indi-product-main-container {

        margin-top: 18px !important;
    }


    .indi-product-page
    .indi-product-info-panel {

        padding: 17px;
    }


    .indi-product-page
    .indi-product-gallery-panel
    .slide-box {

        padding: 10px;
    }


    .indi-product-page
    .indi-product-gallery-panel
    .zoom-wrapper {

        height: 300px;
    }


    .indi-product-page
    #estadoStockProducto {

        font-size: .78rem !important;

        padding: 7px 11px;
    }


    .indi-product-page
    .indi-product-info-panel
    h2.text-light {

        font-size: 1.55rem;
    }

}

/* ============================================================
   PRODUCTO - BREADCRUMBS FLOTANTES
============================================================ */

.indi-product-page .floating-breadcrumbs {

    position: fixed;

    top:
        calc(
            var(
                --header-sticky-height,
                296px
            )
            + 10px
        );

    left: 14px;
    right: 14px;

    z-index: 1035;

    display: flex;
    align-items: center;

    gap: 9px;

    width: fit-content;
    max-width: calc(100vw - 28px);

    margin: 0;

    overflow-x: auto;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


.indi-product-page
.floating-breadcrumbs.scrolled {

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}


/* BOTÓN INICIO */

.indi-product-page
.floating-breadcrumbs
.bc-btn {

    min-height: 42px;

    padding: 9px 15px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border: 0;
    border-radius: 13px;

    color: #ffffff !important;

    font-size: .82rem;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 7px 18px
        rgba(4, 47, 78, .17);
}


/* INICIO */

.indi-product-page
.floating-breadcrumbs
.bc-btn:not(.active):not(.current) {

    background:
        linear-gradient(
            135deg,
            #02b895,
            #08c5c5
        );
}


/* CATEGORÍA */

.indi-product-page
.floating-breadcrumbs
.bc-btn.active {

    background:
        linear-gradient(
            135deg,
            #176fe8,
            #16a8df
        );
}


/* PRODUCTO ACTUAL */

.indi-product-page
.floating-breadcrumbs
.bc-btn.current {

    background:
        linear-gradient(
            135deg,
            #17344c,
            #0b2033
        );
}


.indi-product-page
.floating-breadcrumbs
.bc-btn:hover {

    transform:
        translateY(-2px);

    color: #ffffff !important;
}


/* MOBILE */

@media(max-width: 768px){

    .indi-product-page
    .floating-breadcrumbs {

        top:
            calc(
                var(
                    --header-sticky-height,
                    240px
                )
                + 8px
            );

        left: 8px;
        right: 8px;

        max-width:
            calc(100vw - 16px);
    }


    .indi-product-page
    .floating-breadcrumbs
    .bc-btn {

        min-height: 38px;

        padding: 7px 11px;

        font-size: .72rem;
    }

}

/* ============================================================
   AJUSTE FINO PRODUCTO.PHP - INDI
============================================================ */

/* ------------------------------------------------------------
   1) BREADCRUMBS FLOTANTES
------------------------------------------------------------ */

.indi-product-page .floating-breadcrumbs {
    position: fixed;
    top: 220px;
    left: max(10px, calc((100vw - 1320px) / 2 + 6px));
    right: auto;
    width: auto;
    max-width: calc(100vw - 20px);

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    z-index: 99999 !important;

    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    scrollbar-width: none;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.indi-product-page .floating-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.indi-product-page .floating-breadcrumbs.scrolled {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.indi-product-page .floating-breadcrumbs .bc-btn {
    position: relative;
    z-index: 100000;

    min-height: 42px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: 12px;
    border: 0;

    font-size: .82rem;
    font-weight: 800;
    text-decoration: none !important;
    color: #fff !important;

    box-shadow: 0 8px 18px rgba(7, 46, 80, .18);
}

.indi-product-page .floating-breadcrumbs .bc-btn:not(.active):not(.current) {
    background: linear-gradient(135deg, #08bca5, #17d3d3);
}

.indi-product-page .floating-breadcrumbs .bc-btn.active {
    background: linear-gradient(135deg, #1f74ea, #20a8e6);
}

.indi-product-page .floating-breadcrumbs .bc-btn.current {
    background: linear-gradient(135deg, #192f46, #0d1d2e);
}

.indi-product-page .floating-breadcrumbs .bc-btn:hover {
    transform: translateY(-2px);
    color: #fff !important;
}

/* por si algo los estaba tapando */
.indi-product-page .indi-product-main-container,
.indi-product-page .indi-product-main-row,
.indi-product-page .indi-product-gallery-panel,
.indi-product-page .indi-product-info-panel,
.indi-product-page .slide-box,
.indi-product-page .zoom-wrapper {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   2) STOCK MÁS BONITO Y VISIBLE
------------------------------------------------------------ */

.indi-product-page .indi-product-stock-row {
    margin-bottom: 12px;
}

.indi-product-page #estadoStockProducto {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 11px 18px;

    border: 1px solid #ffe08a;
    border-radius: 999px;

    background: linear-gradient(135deg, #fffbe3, #fff2b8);
    color: #b37a00 !important;

    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.2;

    box-shadow: 0 6px 14px rgba(179, 122, 0, .12);
}

/* ------------------------------------------------------------
   3) IMAGEN PRINCIPAL MÁS COMPACTA
------------------------------------------------------------ */

.indi-product-page .indi-product-gallery-panel .slide-box {
    padding: 14px;
    border-radius: 16px;
}

.indi-product-page .indi-product-gallery-panel .zoom-wrapper {
    height: clamp(320px, 34vw, 430px);
    border-radius: 12px;
}

.indi-product-page .indi-product-gallery-panel .zoom-pro {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
}

/* ------------------------------------------------------------
   4) PANEL DERECHO MÁS COMPACTO
------------------------------------------------------------ */

.indi-product-page .indi-product-info-panel {
    padding: 22px 22px 18px;
    border-radius: 16px;
}

.indi-product-page .indi-product-info-panel .producto-sku {
    margin-bottom: 10px !important;
    padding: 5px 10px;
    font-size: .75rem;
}

.indi-product-page .indi-product-info-panel h2.text-light {
    margin-bottom: 2px !important;
    font-size: clamp(1.55rem, 2vw, 1.95rem);
    line-height: 1.1;
}

.indi-product-page .indi-product-info-panel h4.text-light {
    margin-bottom: 4px !important;
    font-size: 1rem;
}

.indi-product-page .indi-product-info-panel .text-warning.fs-5 {
    font-size: .95rem !important;
}

.indi-product-page .indi-product-info-panel .text-success.fw-bold {
    font-size: 1.75rem;
    line-height: 1.1;
}

.indi-product-page .indi-product-info-panel .text-info {
    font-size: .9rem;
    font-weight: 700;
}

.indi-product-page .indi-product-info-panel .footer-links {
    margin: 14px 0;
    padding: 11px 13px;
    border-radius: 12px;
}

.indi-product-page .indi-product-info-panel .footer-links p {
    font-size: .9rem !important;
    line-height: 1.4;
}

.indi-product-page .indi-product-info-panel h7 {
    display: block;
    margin: 14px 0;
    font-size: .92rem;
    line-height: 1.55;
}

.indi-product-page .indi-product-info-panel .d-grid {
    gap: 9px !important;
}

.indi-product-page .indi-product-info-panel .btn {
    min-height: 44px;
    font-size: .84rem;
    border-radius: 8px;
}

/* wishlist un poco mejor alineado */
.indi-product-page .indi-product-info-panel .btn-wishlist {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

/* ------------------------------------------------------------
   5) RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .indi-product-page .floating-breadcrumbs {
        left: 8px;
        max-width: calc(100vw - 16px);
    }

    .indi-product-page .indi-product-gallery-panel .zoom-wrapper {
        height: 350px;
    }

    .indi-product-page .indi-product-info-panel {
        padding: 18px 18px 16px;
    }
}

@media (max-width: 575.98px) {
    .indi-product-page .floating-breadcrumbs .bc-btn {
        min-height: 38px;
        padding: 7px 11px;
        font-size: .72rem;
    }

    .indi-product-page #estadoStockProducto {
        font-size: .85rem !important;
        padding: 9px 14px;
    }

    .indi-product-page .indi-product-gallery-panel .zoom-wrapper {
        height: 290px;
    }

    .indi-product-page .indi-product-info-panel h2.text-light {
        font-size: 1.45rem;
    }

    .indi-product-page .indi-product-info-panel .text-success.fw-bold {
        font-size: 1.55rem;
    }
}

/* ============================================================
   ESTADO DE STOCK - PRODUCTO INDI
============================================================ */

.indi-product-page .indi-product-stock-row {
    margin-bottom: 12px;
}

.indi-product-page .producto-stock-badge {
    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    border-radius: 12px;

    font-size: .92rem;
    font-weight: 800;
    line-height: 1.35;

    box-shadow: 0 5px 15px rgba(7, 61, 94, .07);
}

/* Disponible */

.indi-product-page .producto-stock-badge.disponible {
    background: #edf9f4;
    border: 1px solid #b8e5d1;
    color: #08784b;
}

.indi-product-page .producto-stock-badge.disponible i {
    color: #0eaa68;
    font-size: 1.05rem;
}

/* Bajo pedido */

.indi-product-page .producto-stock-badge.bajo-pedido {
    background: #fff8e8;
    border: 1px solid #f1d28d;
    color: #866000;
}

.indi-product-page .producto-stock-badge.bajo-pedido i {
    color: #e5a100;
    font-size: 1.05rem;
}

/* ============================================================
   PRODUCTO - BREADCRUMBS SIEMPRE SOBRE EL CONTENIDO
============================================================ */

.indi-product-page > .indi-breadcrumbs-layer {
    position: relative;
    z-index: 1000 !important;
}

.indi-product-page .floating-breadcrumbs {
    z-index: 1001 !important;
}

.indi-product-page .floating-breadcrumbs .bc-btn {
    position: relative;
    z-index: 1002 !important;
}

/* ============================================================
   REVIEWS PRODUCTO - INVENCIÓN DIGITAL
   Adaptación del estilo de Informática
============================================================ */


/* ============================================================
   CONTENEDOR GENERAL
============================================================ */

.indi-product-page .producto-reviews-seccion {
    color: #123a55;
}


/* ============================================================
   RESUMEN DE CALIFICACIÓN
============================================================ */

.indi-product-page .producto-reviews-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px;

    background: #f6fafc;

    border: 1px solid #cbdfe9;
    border-radius: 14px;
}


.indi-product-page .producto-reviews-resumen h5 {
    margin: 0 0 6px;

    color: #087fbd !important;

    font-size: .92rem;
    font-weight: 900;

    letter-spacing: .6px;
}


/* ESTRELLAS DEL PROMEDIO */

.indi-product-page .producto-reviews-promedio-estrellas {
    display: flex;
    align-items: center;
    gap: 3px;
}


.indi-product-page .producto-reviews-promedio-estrellas i {
    color: #f5b400;

    font-size: 1.08rem;
}


.indi-product-page .producto-reviews-resumen strong {
    color: #113b58 !important;
    font-size: .9rem;
}


/* ICONO DERECHA */

.indi-product-page .producto-reviews-resumen-icono {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 50%;

    background: #e8f6fc;
    color: #0794cd;

    font-size: 1.15rem;
}


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

.indi-product-page
.producto-reviews-listado-encabezado h5 {

    color: #087fbd !important;

    font-size: .95rem;
    font-weight: 850;
}


.indi-product-page
.producto-reviews-listado-encabezado p {

    color: #658095 !important;
}


/* ============================================================
   SIN OPINIONES
============================================================ */

.indi-product-page .producto-reviews-vacio {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 13px;
    padding: 15px 17px;

    border: 1px dashed #a8c9db;
    border-radius: 12px;

    background: #f8fbfd;

    color: #234c65;
}


.indi-product-page .producto-reviews-vacio > i {
    color: #078fc7;
    font-size: 1.3rem;
}


.indi-product-page .producto-reviews-vacio strong {
    display: block;

    margin-bottom: 2px;

    color: #123a55;
    font-size: .88rem;
}


.indi-product-page .producto-reviews-vacio p {
    color: #627c8e;

    font-size: .82rem;
}


/* ============================================================
   FORMULARIO DE OPINIÓN
============================================================ */

.indi-product-page .producto-review-formulario {
    padding: 20px;

    border: 1px solid #cbdfe9;
    border-radius: 15px;

    background: #f8fbfd;
}


.indi-product-page
.producto-review-formulario-encabezado {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 16px;
}


.indi-product-page
.producto-review-formulario-titulo {

    color: #123a55;

    font-size: 1rem;
    font-weight: 900;
}


.indi-product-page
.producto-review-formulario-encabezado p {

    color: #698194 !important;

    font-size: .80rem;
}


/* ============================================================
   HONEYPOT ANTIBOTS

   Debe existir pero NO debe verse.
============================================================ */

.indi-product-page .review-honeypot-wrap {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    left: -10000px !important;

    overflow: hidden !important;

    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   BLOQUE "TU CALIFICACIÓN"
============================================================ */

.indi-product-page
.producto-review-calificacion-bloque {

    padding: 14px 16px;

    border: 1px solid #b9dcec;
    border-radius: 12px;

    background: #eef8fc;
}


.indi-product-page
.producto-review-calificacion-encabezado {

    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 8px;
}


.indi-product-page
.producto-review-calificacion-icono {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: #fff5d7;

    color: #e5a500;

    font-size: .95rem;
}


.indi-product-page
.producto-review-calificacion-titulo {

    color: #123a55;

    font-size: .87rem;
    font-weight: 900;
}


.indi-product-page
.producto-review-calificacion-titulo span {

    color: #e05252;
}


.indi-product-page
.producto-review-calificacion-ayuda {

    margin-top: 1px;

    color: #6b8190;

    font-size: .70rem;
}


/* ============================================================
   SELECTOR DE ESTRELLAS
============================================================ */

.indi-product-page .producto-rating-stars {
    display: flex;

    /*
        Los radios vienen en PHP:
        5, 4, 3, 2, 1.

        row-reverse hace que visualmente
        aparezcan 1 → 5.
    */
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;

    gap: 5px;
}


/* OCULTAR LOS CÍRCULOS RADIO */

.indi-product-page
.producto-rating-stars input[type="radio"] {

    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;
}


/* ESTRELLAS SIN SELECCIONAR */

.indi-product-page
.producto-rating-stars label {

    margin: 0;

    color: #b9c7d0;

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;

    user-select: none;

    transition:
        color .16s ease,
        transform .16s ease,
        text-shadow .16s ease;
}


/* HOVER */

.indi-product-page
.producto-rating-stars label:hover,
.indi-product-page
.producto-rating-stars label:hover ~ label {

    color: #f5b400;

    transform: scale(1.10);

    text-shadow:
        0 3px 8px
        rgba(245, 180, 0, .20);
}


/* SELECCIONADAS */

.indi-product-page
.producto-rating-stars input[type="radio"]:checked ~ label {

    color: #f5b400;

    text-shadow:
        0 3px 8px
        rgba(245, 180, 0, .20);
}


/* TECLADO / ACCESIBILIDAD */

.indi-product-page
.producto-rating-stars input[type="radio"]:focus-visible + label {

    outline: 2px solid #159bd1;
    outline-offset: 4px;

    border-radius: 4px;
}


/* ============================================================
   INPUTS DEL FORMULARIO
============================================================ */

.indi-product-page
.producto-review-formulario .form-control {

    border: 1px solid #cfdee7;

    border-radius: 9px;

    background: #ffffff;

    color: #173b53;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.indi-product-page
.producto-review-formulario .form-control:focus {

    border-color: #159bd1;

    box-shadow:
        0 0 0 3px
        rgba(21, 155, 209, .10);
}


.indi-product-page
.producto-review-formulario
.form-floating > label {

    color: #546e80;
}


/* TEXTAREA */

.indi-product-page .producto-review-textarea {
    min-height: 100px !important;

    resize: vertical;
}


/* ARCHIVO */

.indi-product-page
.producto-review-formulario
input[type="file"] {

    min-height: 44px;

    font-size: .82rem;
}


.indi-product-page
.producto-review-formulario
input[type="file"]::file-selector-button {

    margin-right: 12px;
    padding: 8px 13px;

    border: 0;
    border-right: 1px solid #d3e0e8;

    background: #eef5f8;

    color: #21485f;

    cursor: pointer;
}


/* TEXTOS DE AYUDA */

.indi-product-page
.producto-review-formulario .form-text {

    color: #708899 !important;

    font-size: .72rem;
}


/* ============================================================
   BOTÓN ENVIAR OPINIÓN
============================================================ */

.indi-product-page
.producto-review-formulario
button[type="submit"] {

    min-height: 42px;

    padding: 8px 22px !important;

    border: 0;
    border-radius: 999px !important;

    background: #11985d;

    color: #ffffff;

    font-size: .82rem;
    font-weight: 850;

    box-shadow:
        0 5px 14px
        rgba(17, 152, 93, .15);

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.indi-product-page
.producto-review-formulario
button[type="submit"]:hover {

    background: #0c864f;

    transform: translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(17, 152, 93, .20);
}


/* ============================================================
   REVIEWS PUBLICADAS
============================================================ */

.indi-product-page .producto-reviews-carousel {
    position: relative;
}


.indi-product-page .producto-reviews-track {
    display: flex;
    gap: 14px;

    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}


.indi-product-page
.producto-reviews-track::-webkit-scrollbar {

    display: none;
}


.indi-product-page .producto-review-slide {
    flex: 0 0 min(420px, 88%);

    scroll-snap-align: start;

    padding: 17px;

    border: 1px solid #d1e1ea;
    border-radius: 13px;

    background: #ffffff;

    color: #153b53;

    box-shadow:
        0 5px 15px
        rgba(7, 62, 97, .06);
}


.indi-product-page .producto-review-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.indi-product-page .producto-review-nombre {
    color: #123a55;

    font-size: .90rem;
    font-weight: 900;
}


.indi-product-page .producto-review-verificada {
    margin-top: 3px;

    color: #0b9a58;

    font-size: .72rem;
    font-weight: 750;
}


.indi-product-page .producto-review-estrellas {
    margin: 10px 0 8px;

    color: #f5b400;

    font-size: 1.15rem;

    letter-spacing: 2px;
}


.indi-product-page .producto-review-comentario {
    margin: 0;

    color: #496679;

    font-size: .83rem;

    line-height: 1.55;
}


.indi-product-page .producto-review-imagen {
    max-width: 190px;

    margin-top: 12px;

    border-radius: 10px;

    border: 1px solid #d7e4eb;
}


.indi-product-page .producto-review-pie {
    margin-top: 13px;
}


/* FLECHAS CARRUSEL */

.indi-product-page .producto-reviews-flecha {
    position: absolute;

    top: 50%;

    width: 38px;
    height: 38px;

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

    z-index: 5;

    border: 1px solid #c9dce7;
    border-radius: 50%;

    background: #ffffff;

    color: #087fbd;

    box-shadow:
        0 5px 15px
        rgba(7, 59, 92, .12);

    transform: translateY(-50%);
}


.indi-product-page
.producto-reviews-flecha-izquierda {

    left: -14px;
}


.indi-product-page
.producto-reviews-flecha-derecha {

    right: -14px;
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width: 575.98px){

    .indi-product-page
    .producto-reviews-resumen {

        padding: 14px;
    }


    .indi-product-page
    .producto-review-formulario {

        padding: 15px;
    }


    .indi-product-page
    .producto-rating-stars label {

        font-size: 1.8rem;
    }


    .indi-product-page
    .producto-review-slide {

        flex-basis: 92%;
    }


    .indi-product-page
    .producto-reviews-flecha {

        display: none;
    }

}

/* ============================================================
   BUSCADOR INTELIGENTE - INVENCIÓN DIGITAL
============================================================ */

.indi-search-wrapper {
    position: relative;

    width: 100%;
    height: 100%;
    min-width: 0;

    display: flex;
    align-items: center;

    border-radius: 11px 0 0 11px;
}


/* INPUT DEL BUSCADOR */

.indi-search-wrapper .header-search__input {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: block;

    margin: 0;
    padding: 0 18px;

    border: 0;
    border-radius: 11px 0 0 11px;

    outline: none;

    background: transparent;

    color: var(--indi-ink);

    font-size: 0.95rem;
    line-height: 1.2;
}


/* CAJA */

.sugerencias-box {
    display: none;

    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    width: 100%;
    max-height: 460px;

    overflow-x: hidden;
    overflow-y: auto;

    z-index: 99999;

    background: #ffffff;

    border: 1px solid #c9ddea;
    border-radius: 13px;

    box-shadow:
        0 14px 34px
        rgba(4, 45, 73, .18);

    text-align: left;
}


.sugerencias-box.sugerencias-visible {
    display: block;
}


/* ENCABEZADOS */

.sugerencias-header{
    padding:9px 14px;

    background:#f1f7fb;

    border-bottom:1px solid #dce9f0;

    color:#698195;

    font-size:.68rem;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.7px;
}


/* RESULTADO */

.sugerencia-item{
    width:100%;

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 13px;

    border:0;
    border-bottom:1px solid #edf2f5;

    background:#ffffff;

    color:#123a55;

    text-align:left;

    cursor:pointer;

    transition:
        background .16s ease,
        transform .16s ease;
}


.sugerencia-item:hover,
.sugerencia-item.active{
    background:#eef8fd;
}


.sugerencia-producto{
    min-height:86px;
}


/* IMAGEN */

.sugerencia-img{
    width:68px;
    height:68px;

    flex:0 0 68px;

    object-fit:contain;

    border-radius:9px;

    background:#ffffff;
}


.sugerencia-img--vacia{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#f1f6f9;

    color:#8aa0ae;

    font-size:1.3rem;
}


/* INFORMACIÓN */

.sugerencia-text{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;

    flex:1;
}


.sugerencia-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;

    color:#718796;

    font-size:.67rem;
}


.sugerencia-marca{
    color:#0089c7;

    font-size:.69rem;
    font-weight:850;
}


.sugerencia-nombre{
    color:#123a55;

    font-size:.82rem;
    font-weight:800;

    line-height:1.25;
}


.sugerencia-nombre strong,
.sugerencia-sku strong{
    color:#008fcb;

    font-weight:900;
}


/* PRECIOS */

.sugerencia-old{
    color:#8a98a1;

    font-size:.68rem;

    text-decoration:line-through;
}


.sugerencia-precio{
    color:#07934f;

    font-size:.80rem;
    font-weight:900;
}


.sugerencia-cotizacion{
    color:#087fbd;

    font-size:.75rem;
    font-weight:850;
}


/* ESTADOS */

.sugerencia-estados{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}


.sugerencia-estado{
    width:max-content;

    padding:2px 7px;

    border-radius:999px;

    font-size:.60rem;
    font-weight:800;
}


.sugerencia-bajo-pedido{
    background:#fff3d8;
    color:#aa6900;
}


/* HISTORIAL */

.sugerencia-historial{
    min-height:42px;

    color:#486579;

    font-size:.78rem;
}


.sugerencia-historial i{
    color:#0994cd;
}


/* SIN RESULTADOS */

.sugerencias-vacio{
    padding:19px;

    text-align:center;

    color:#6c8291;

    font-size:.78rem;
}


.sugerencias-vacio i{
    margin-right:5px;

    color:#0b95cd;
}


/* MÓVIL */

@media(max-width:767.98px){

    .sugerencias-box{
        max-height:360px;
    }

    .sugerencia-img{
        width:56px;
        height:56px;

        flex-basis:56px;
    }

    .sugerencia-meta{
        flex-direction:column;
        gap:1px;
    }

}

/* ============================================================
   BUSCAR.PHP - INVENCIÓN DIGITAL
============================================================ */

.indi-search-page {
    min-height: 62vh;
}


/* ENCABEZADO */

.indi-search-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;
    padding: 22px 24px;

    border: 1px solid #cfe0eb;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(7, 66, 104, .07);
}


.indi-search-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 5px;

    color: #0789c5;

    font-size: .72rem;
    font-weight: 850;

    text-transform: uppercase;
    letter-spacing: .6px;
}


.indi-search-heading h1 {
    margin: 0;

    color: #082f50;

    font-size: clamp(
        1.55rem,
        2.2vw,
        2.15rem
    );

    font-weight: 900;
    line-height: 1.2;
}


.indi-search-heading h1 span {
    color: #078ac7;
}


.indi-search-heading p {
    margin: 6px 0 0;

    color: #657f91;

    font-size: .88rem;
}


/* LIMPIAR */

.indi-search-clear {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;

    border: 1px solid #c8dce7;
    border-radius: 10px;

    background: #f8fbfd;

    color: #34586e;

    font-size: .78rem;
    font-weight: 750;

    text-decoration: none;
}


.indi-search-clear:hover {
    border-color: #078ac7;

    color: #078ac7;

    background: #eef8fd;
}


/* GRID */

.indi-search-results-grid {
    margin-bottom: 34px;
}


/* SIN RESULTADOS */

.indi-search-empty {
    max-width: 680px;

    margin: 45px auto;
    padding: 42px 28px;

    text-align: center;

    border: 1px solid #cfe0ea;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(8, 66, 102, .07);
}


.indi-search-empty__icon {
    width: 66px;
    height: 66px;

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

    margin: 0 auto 17px;

    border-radius: 50%;

    background: #e9f7fd;

    color: #078bc8;

    font-size: 1.6rem;
}


.indi-search-empty h2 {
    margin-bottom: 8px;

    color: #082f50;

    font-size: 1.5rem;
    font-weight: 900;
}


.indi-search-empty p {
    max-width: 500px;

    margin:
        0 auto
        21px;

    color: #617c8f;

    line-height: 1.55;
}


.indi-search-empty__button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 17px;

    border-radius: 9px;

    background: #087fbd;

    color: #ffffff !important;

    font-weight: 800;

    text-decoration: none;
}


/* PAGINACIÓN */

.indi-search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 35px 0 12px;
}


.indi-search-pagination a,
.indi-search-pagination span {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 14px;

    border-radius: 10px;

    font-size: .80rem;
}


.indi-search-pagination a {
    border: 1px solid #b9d8e8;

    background: #ffffff;

    color: #087fbd;

    font-weight: 800;

    text-decoration: none;
}


.indi-search-pagination a:hover {
    background: #087fbd;
    color: #ffffff;
}


.indi-search-pagination span {
    color: #527084;

    background: #eef5f9;
}


/* MÓVIL */

@media(max-width: 767.98px){

    .indi-search-heading {
        align-items: flex-start;
        flex-direction: column;

        padding: 18px;
    }


    .indi-search-heading h1 {
        font-size: 1.45rem;
    }


    .indi-search-pagination {
        gap: 8px;
    }


    .indi-search-pagination a {
        padding: 8px 10px;
    }

}

/* ============================================================
   LOGIN / REGISTRO - INVENCIÓN DIGITAL
============================================================ */

.indi-auth-page{
    min-height: 75vh;
    padding: 60px 20px 90px;
}

/* ============================================================
   TARJETA
============================================================ */

.indi-auth-card{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 38px 42px 42px;

    background: #ffffff;

    border: 1px solid #d9e6f2;
    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(23, 69, 110, .12);

    overflow: hidden;
}


/* FRANJA SUPERIOR */

.indi-auth-card::before{
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            #2857df,
            #178fd5,
            #34c4e3
        );
}


/* ============================================================
   ICONO
============================================================ */

.indi-auth-icon{
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a57df, #1696da);
    color: #ffffff;
    font-size: 32px;
    box-shadow: 0 10px 25px rgba(40, 87, 223, .22);
}


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

.indi-auth-heading{
    text-align: center;
    margin-bottom: 28px;
}


.indi-auth-kicker{
    display: inline-block;
    margin-bottom: 7px;
    color: #0f6fb8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.indi-auth-heading h1{
    margin: 0 0 8px;
    color: #0b2f53;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.3px;
}


.indi-auth-heading p{
    max-width: 390px;
    margin: 0 auto;
    color: #4d647d;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}


/* ============================================================
   FORMULARIOS
============================================================ */

.indi-auth-card .form-floating{
    position: relative;
}


.indi-auth-card .form-control{
    min-height: 60px;
    border: 1px solid #cddceb;
    border-radius: 11px;
    color: #16324b;
    background: #ffffff;
    font-weight: 500;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}


.indi-auth-card .form-control:focus{
    border-color: #158fd0;

    box-shadow:
        0 0 0 4px
        rgba(21, 143, 208, .10);
}


.indi-auth-card .form-floating > label{
    color: #556b80;
    font-weight: 500;
}


.indi-auth-card .form-floating > .form-control:focus ~ label,
.indi-auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label{
    color: #0f76bd;
}


/* ============================================================
   OJO PASSWORD
============================================================ */

.indi-auth-card .password-wrapper{
    position: relative;
}


.indi-auth-card .password-wrapper .form-control{
    padding-right: 58px;
}


.indi-auth-card .toggle-password{
    position: absolute;
    top: 30px;
    right: 14px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #567089;
    font-size: 18px;
    cursor: pointer;
    z-index: 6;
}


.indi-auth-card .toggle-password:hover{
    color: #0e74bc;
    background: rgba(14, 116, 188, .10);
}


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

.indi-auth-primary{
    min-height: 52px;
    margin-top: 4px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(90deg, #2e57df 0%, #1696da 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 10px 22px rgba(40, 87, 223, .20);
    transition: transform .2s ease, box-shadow .2s ease;
}


.indi-auth-primary:hover{
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 13px 26px
        rgba(40, 87, 223, .25);
}


.indi-auth-secondary{
    min-height: 46px;

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

    border-radius: 11px;

    border:
        1px solid
        #158fd0;

    background: #ffffff;

    color: #1486c4 !important;

    font-weight: 700;

    transition: .2s ease;
}


.indi-auth-secondary:hover{
    background: #edf8fd;
    color: #0872ac !important;
}


/* ============================================================
   TEXTOS SECUNDARIOS
============================================================ */

.indi-auth-card form > .mt-4{
    padding-top: 20px;

    border-top:
        1px solid
        #edf1f5;

    text-align: center;
}


.indi-auth-card form > .mt-4 p{
    color: #6e8091 !important;

    font-size: 14px;
}


.indi-auth-required{
    color: #4c6277;
    font-size: 13px;
    font-weight: 500;
}


.indi-auth-login-link{
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
    text-align: center;
    color: #4f657b;
    font-size: 14px;
    font-weight: 500;
}


.indi-auth-login-link a{
    margin-left: 5px;
    color: #0d72b8;
    font-weight: 800;
    text-decoration: none;
}


.indi-auth-login-link a:hover{
    text-decoration: underline;
}


/* ============================================================
   ALERTAS
============================================================ */

.indi-auth-card .alert{
    border: 0;
    border-radius: 11px;

    font-size: 14px;
}


/* ============================================================
   REGISTRO
============================================================ */

.indi-auth-card--register{
    max-width: 560px;
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width: 575px){

    .indi-auth-page{
        padding:
            28px
            12px
            55px;
    }

    .indi-auth-card{
        padding:
            30px
            20px
            32px;

        border-radius: 18px;
    }

    .indi-auth-icon{
        width: 58px;
        height: 58px;

        font-size: 27px;
    }

    .indi-auth-heading h1{
        font-size: 25px;
    }

}

/* ============================================================
   CUENTA DE USUARIO - CABECERA INDI
============================================================ */

.header-account {
    position: relative;
}

.header-account__toggle {
    min-height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--indi-white);
    font: inherit;
    cursor: pointer;
}

.header-account__toggle:hover,
.header-account__toggle:focus,
.header-account__toggle:focus-visible {
    color: var(--indi-white);
    outline: none;
}

.header-account__arrow {
    margin-left: 1px;
    font-size: 0.72rem !important;
    transition: transform 0.2s ease;
}

.header-account__toggle[aria-expanded="true"] .header-account__arrow {
    transform: rotate(180deg);
}


/* ============================================================
   DROPDOWN DE CUENTA
============================================================ */

.indi-account-menu {
    width: min(330px, calc(100vw - 28px));
    margin-top: 14px !important;
    padding: 0;

    overflow: hidden;

    border: 1px solid #d8e5ef;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 20px 48px
        rgba(8, 49, 82, 0.20);

    z-index: 1600;
}


/* ============================================================
   CABECERA DEL MENÚ
============================================================ */

.indi-account-menu__header {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 18px;

    background:
        linear-gradient(
            110deg,
            #284cd8 0%,
            #159fdf 100%
        );

    color: #ffffff;
}

.indi-account-menu__avatar {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.42);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.14);

    font-size: 1.25rem;
}

.indi-account-menu__header > div {
    min-width: 0;

    display: grid;

    gap: 1px;
}

.indi-account-menu__header small {
    color:
        rgba(255, 255, 255, 0.78);

    font-size: 0.70rem;
    font-weight: 600;
}

.indi-account-menu__header strong {
    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 800;
}


/* ============================================================
   OPCIONES
============================================================ */

.indi-account-menu__links {
    padding: 8px;
}

.indi-account-menu .dropdown-item {
    display: grid;

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

    align-items: center;

    gap: 10px;

    padding:
        10px
        11px;

    border-radius: 10px;

    color: #15344d;

    white-space: normal;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.indi-account-menu .dropdown-item:hover,
.indi-account-menu .dropdown-item:focus {
    background: #edf7fc;

    color: #0878b6;

    transform: translateX(2px);
}

.indi-account-menu .dropdown-item > i {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #eef6fb;

    color: #168acb;

    font-size: 1.05rem;
}

.indi-account-menu .dropdown-item > span {
    min-width: 0;

    display: grid;

    gap: 2px;

    line-height: 1.22;
}

.indi-account-menu .dropdown-item strong {
    color: inherit;

    font-size: 0.82rem;
    font-weight: 800;
}

.indi-account-menu .dropdown-item small {
    color: #718496;

    font-size: 0.70rem;
    font-weight: 500;
}


/* ============================================================
   CERRAR SESIÓN
============================================================ */

.indi-account-menu__footer {
    padding:
        10px
        12px
        12px;

    border-top:
        1px solid
        #e6edf3;
}

.indi-account-logout {
    min-height: 42px;

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

    gap: 8px;

    border-radius: 10px;

    background: #fff1f1;

    color: #c43a3a;

    text-decoration: none;

    font-size: 0.82rem;
    font-weight: 800;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.indi-account-logout:hover,
.indi-account-logout:focus {
    background: #d94747;

    color: #ffffff;
}


/* ============================================================
   CUENTA - MÓVIL
============================================================ */

.mobile-account__hello {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 10px;

    background: #edf7fc;

    color: #123a57;
}

.mobile-account__hello > i {
    color: #1388c8;

    font-size: 1.5rem;
}

.mobile-account__hello > span {
    display: grid;

    line-height: 1.2;
}

.mobile-account__hello small {
    color: #698094;

    font-size: 0.70rem;
}

.mobile-account__hello strong {
    font-size: 0.88rem;
    font-weight: 800;
}

.mobile-account .mobile-account__logout {
    color: #c53b3b;
}

/* ============================================================
   MI CUENTA - INVENCIÓN DIGITAL
============================================================ */

.indi-profile-page {
    position: relative;

    min-height: 75vh;

    padding:
        52px
        20px
        85px;

    background: #f3f7fb;
}


/* ============================================================
   HERO / IDENTIDAD
============================================================ */

.indi-profile-hero {
    position: relative;
    z-index: 1;

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

    gap: 30px;

    margin-bottom: 24px;

    padding:
        28px
        30px;

    border:
        1px solid
        #d9e6f0;

    border-radius: 20px;

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f7fbfe 100%
        );

    box-shadow:
        0 16px 38px
        rgba(16, 68, 108, .09);
}


/* IDENTIDAD */

.indi-profile-hero__identity {
    display: flex;
    align-items: center;

    gap: 20px;

    min-width: 0;
}


/* AVATAR */

.indi-profile-avatar {
    width: 82px;
    height: 82px;

    flex:
        0
        0
        82px;

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

    overflow: hidden;

    border:
        4px solid
        #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2c56df,
            #159bdc
        );

    color: #ffffff;

    font-size: 2rem;

    box-shadow:
        0 10px 25px
        rgba(39, 86, 220, .22);
}


.indi-profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* TEXTO */

.indi-profile-hero__text {
    min-width: 0;
}


.indi-profile-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: #1479b9;

    font-size: .70rem;
    font-weight: 900;

    letter-spacing: .14em;
}


.indi-profile-hero__text h1 {
    margin: 0;

    color: #0b2f53;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.35rem
        );

    font-weight: 850;

    letter-spacing: -.035em;
}


.indi-profile-hero__text p {
    margin:
        7px
        0
        0;

    color: #536b81;

    font-size: .90rem;
}


/* ============================================================
   ESTADO
============================================================ */

.indi-profile-status {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        11px
        14px;

    border:
        1px solid
        #ccecdf;

    border-radius: 13px;

    background: #effaf5;

    color: #126d49;
}


.indi-profile-status__icon {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #d9f4e8;

    color: #16845a;

    font-size: 1.1rem;
}


.indi-profile-status > div {
    display: grid;

    line-height: 1.2;
}


.indi-profile-status small {
    color: #5b7f6d;

    font-size: .67rem;
}


.indi-profile-status strong {
    font-size: .82rem;
    font-weight: 800;
}


/* ============================================================
   GRID
============================================================ */

.indi-profile-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    gap: 24px;
}


/* ============================================================
   CARDS
============================================================ */

.indi-profile-card {
    padding:
        27px
        28px;

    border:
        1px solid
        #d9e6f0;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 13px 32px
        rgba(16, 68, 108, .08);
}


/* ENCABEZADO CARD */

.indi-profile-card__heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 23px;
}


.indi-profile-card__icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #e6f3fb,
            #f1f8fc
        );

    color: #1489c9;

    font-size: 1.2rem;
}


.indi-profile-card__heading > div {
    display: grid;

    line-height: 1.2;
}


.indi-profile-card__heading > div > span {
    color: #1483c1;

    font-size: .65rem;
    font-weight: 900;

    letter-spacing: .12em;
}


.indi-profile-card__heading h2 {
    margin: 3px 0 0;

    color: #103653;

    font-size: 1.08rem;
    font-weight: 800;
}


/* ============================================================
   DATOS PERSONALES
============================================================ */

.indi-profile-info {
    display: grid;

    gap: 9px;
}


.indi-profile-info__row {
    display: grid;

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

    align-items: center;

    gap: 11px;

    padding:
        13px
        12px;

    border-radius: 11px;

    background: #f6f9fc;
}


.indi-profile-info__icon {
    width: 38px;
    height: 38px;

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

    border-radius: 10px;

    background: #e8f4fb;

    color: #1487c7;

    font-size: 1rem;
}


.indi-profile-info__row > div {
    min-width: 0;

    display: grid;

    line-height: 1.28;
}


.indi-profile-info__row small {
    color: #6b8093;

    font-size: .70rem;
}


.indi-profile-info__row strong {
    overflow-wrap: anywhere;

    color: #17374f;

    font-size: .84rem;
    font-weight: 750;
}


/* ============================================================
   ACCESOS RÁPIDOS
============================================================ */

.indi-profile-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;
}


.indi-profile-action {
    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 76px;

    padding:
        11px
        12px;

    border:
        1px solid
        #e0eaf2;

    border-radius: 12px;

    background: #ffffff;

    color: #17364f;

    text-decoration: none;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.indi-profile-action:hover {
    transform:
        translateY(-2px);

    border-color: #b8d9eb;

    background: #f5fbfe;

    color: #0878b6;

    box-shadow:
        0 9px 19px
        rgba(21, 111, 165, .10);
}


.indi-profile-action__icon {
    width: 40px;
    height: 40px;

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

    border-radius: 11px;

    background: #eaf5fb;

    color: #168acb;

    font-size: 1.05rem;
}


.indi-profile-action__text {
    min-width: 0;

    display: grid;

    line-height: 1.25;
}


.indi-profile-action__text strong {
    font-size: .80rem;
    font-weight: 800;
}


.indi-profile-action__text small {
    margin-top: 2px;

    color: #74879a;

    font-size: .67rem;
}


.indi-profile-action > .bi-chevron-right {
    color: #9db0bf;

    font-size: .75rem;
}


/* ============================================================
   SEGURIDAD
============================================================ */

.indi-profile-security {
    position: relative;
    z-index: 1;

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

    gap: 25px;

    margin-top: 24px;

    padding:
        19px
        22px;

    border:
        1px solid
        #dce7ef;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 10px 25px
        rgba(16, 68, 108, .06);
}


.indi-profile-security > div {
    display: flex;
    align-items: center;

    gap: 12px;
}


.indi-profile-security__icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 12px;

    background: #eef5fa;

    color: #416a87;

    font-size: 1.15rem;
}


.indi-profile-security strong {
    color: #183850;

    font-size: .87rem;
}


.indi-profile-security p {
    margin:
        3px
        0
        0;

    color: #6b8093;

    font-size: .73rem;
}


/* LOGOUT */

.indi-profile-logout {
    flex: 0 0 auto;

    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        0
        16px;

    border-radius: 10px;

    background: #fff1f1;

    color: #c43a3a;

    text-decoration: none;

    font-size: .79rem;
    font-weight: 800;

    transition:
        background .18s ease,
        color .18s ease;
}


.indi-profile-logout:hover {
    background: #d94747;

    color: #ffffff;
}


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

@media(max-width: 991.98px) {

    .indi-profile-grid {
        grid-template-columns: 1fr;
    }

}


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

@media(max-width: 767.98px) {

    .indi-profile-page {
        padding:
            30px
            12px
            55px;
    }


    .indi-profile-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 22px;
    }


    .indi-profile-status {
        width: 100%;
    }


    .indi-profile-card {
        padding:
            22px
            18px;
    }


    .indi-profile-actions {
        grid-template-columns: 1fr;
    }


    .indi-profile-security {
        align-items: stretch;
        flex-direction: column;
    }


    .indi-profile-logout {
        width: 100%;
    }

}

/* ============================================================
   MIS PEDIDOS - INVENCIÓN DIGITAL
============================================================ */

.indi-orders-page {
    position: relative;

    min-height: 75vh;

    padding:
        48px
        20px
        85px;

    background: #f3f7fb;
}


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

.indi-orders-heading {
    position: relative;
    z-index: 1;

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

    gap: 25px;

    margin-bottom: 24px;

    padding:
        24px
        27px;

    border:
        1px solid
        #d9e6f0;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 13px 32px
        rgba(16, 68, 108, .08);
}


.indi-orders-eyebrow {
    color: #127bb9;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .14em;
}


.indi-orders-heading h1 {
    margin:
        3px
        0
        0;

    color: #0b2f53;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.35rem
        );

    font-weight: 850;

    letter-spacing: -.035em;
}


.indi-orders-heading p {
    margin:
        5px
        0
        0;

    color: #60778c;

    font-size: .86rem;
}


.indi-orders-back {
    flex: 0 0 auto;

    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        0
        14px;

    border:
        1px solid
        #bcd9e9;

    border-radius: 10px;

    background: #ffffff;

    color: #107dbb;

    text-decoration: none;

    font-size: .78rem;
    font-weight: 800;
}


.indi-orders-back:hover {
    background: #edf8fd;

    color: #086da5;
}


/* ============================================================
   MENSAJES
============================================================ */

.indi-orders-alert {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    padding:
        13px
        16px;

    border-radius: 12px;
}


.indi-orders-alert > i {
    font-size: 1.15rem;
}


.indi-orders-alert > div {
    display: grid;

    line-height: 1.3;
}


.indi-orders-alert strong {
    font-size: .80rem;
}


.indi-orders-alert span {
    margin-top: 2px;

    font-size: .72rem;
}


.indi-orders-alert--success {
    border:
        1px solid
        #bee8d4;

    background: #effaf5;

    color: #146f4b;
}


.indi-orders-alert--warning {
    border:
        1px solid
        #f0ddb1;

    background: #fff9ea;

    color: #8b6212;
}


/* ============================================================
   LISTA
============================================================ */

.indi-orders-list {
    position: relative;
    z-index: 1;

    display: grid;

    gap: 15px;
}


/* ============================================================
   PEDIDO
============================================================ */

.indi-order-card {
    display: grid;

    grid-template-columns:
        minmax(270px, 1.15fr)
        minmax(280px, 1fr)
        minmax(180px, .55fr);

    align-items: center;

    gap: 20px;

    padding:
        19px
        21px;

    border:
        1px solid
        #d9e5ee;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 11px 27px
        rgba(16, 68, 108, .07);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.indi-order-card:hover {
    transform:
        translateY(-2px);

    border-color: #b9d7e8;

    box-shadow:
        0 16px 34px
        rgba(16, 68, 108, .11);
}


.indi-order-card.is-highlighted {
    border:
        2px solid
        #1796d5;

    box-shadow:
        0 0 0 4px
        rgba(23, 150, 213, .08),
        0 16px 34px
        rgba(16, 68, 108, .11);
}


/* ============================================================
   PRODUCTO
============================================================ */

.indi-order-product {
    min-width: 0;

    display: grid;

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

    align-items: center;

    gap: 15px;
}


.indi-order-product__image {
    width: 105px;
    height: 105px;

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

    overflow: hidden;

    border-radius: 13px;

    background: #f4f8fb;

    color: #8ba8ba;

    font-size: 2rem;
}


.indi-order-product__image img {
    width: 100%;
    height: 100%;

    padding: 8px;

    object-fit: contain;
}


.indi-order-product__info {
    min-width: 0;

    display: grid;

    align-content: center;
}


.indi-order-number {
    color: #1480bd;

    font-size: .67rem;
    font-weight: 900;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.indi-order-product__info h2 {
    margin:
        4px
        0
        1px;

    color: #123653;

    font-size: .98rem;
    font-weight: 800;

    line-height: 1.25;
}


.indi-order-model {
    color: #637b8f;

    font-size: .74rem;
}


.indi-order-more-products {
    margin-top: 7px;

    color: #ad7510;

    font-size: .68rem;
    font-weight: 700;
}


.indi-order-units {
    margin-top: 3px;

    color: #738799;

    font-size: .68rem;
}


/* ============================================================
   DETALLES
============================================================ */

.indi-order-details {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        12px
        18px;

    padding:
        4px
        20px;

    border-right:
        1px solid
        #e7eef3;

    border-left:
        1px solid
        #e7eef3;
}


.indi-order-details > div {
    display: grid;

    line-height: 1.25;
}


.indi-order-details span {
    color: #788b9c;

    font-size: .66rem;
}


.indi-order-details strong {
    margin-top: 2px;

    color: #173850;

    font-size: .76rem;
    font-weight: 750;
}


/* ============================================================
   RESUMEN
============================================================ */

.indi-order-summary {
    display: grid;

    justify-items: end;

    gap: 7px;

    text-align: right;
}


.indi-order-status,
.indi-payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding:
        3px
        9px;

    border-radius: 999px;

    font-size: .64rem;
    font-weight: 800;
}


/* PEDIDO */

.indi-order-status--neutral {
    background: #eef2f5;
    color: #5c7080;
}

.indi-order-status--warning {
    background: #fff3ce;
    color: #986600;
}

.indi-order-status--info {
    background: #e5f5fc;
    color: #0879b2;
}

.indi-order-status--primary {
    background: #e8eeff;
    color: #3158ce;
}

.indi-order-status--success {
    background: #e5f7ef;
    color: #14744f;
}

.indi-order-status--danger {
    background: #ffeaea;
    color: #b63c3c;
}


/* PAGO */

.indi-payment-status--neutral {
    background: #eef2f5;
    color: #5c7080;
}

.indi-payment-status--warning {
    background: #fff3ce;
    color: #986600;
}

.indi-payment-status--info {
    background: #e5f5fc;
    color: #0879b2;
}

.indi-payment-status--success {
    background: #e5f7ef;
    color: #14744f;
}

.indi-payment-status--danger {
    background: #ffeaea;
    color: #b63c3c;
}


/* TOTAL */

.indi-order-total {
    color: #087b43;

    font-size: 1.04rem;
    font-weight: 850;
}


.indi-order-total small {
    color: #56766a;

    font-size: .60rem;
}


/* ENVÍO */

.indi-order-shipping-price {
    color: #687f91;

    font-size: .65rem;
}


/* BOTÓN */

.indi-order-view {
    min-height: 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding:
        0
        12px;

    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #2d57df,
            #1597d8
        );

    color: #ffffff;

    text-decoration: none;

    font-size: .72rem;
    font-weight: 800;
}


.indi-order-view:hover {
    color: #ffffff;

    filter: brightness(.96);
}


/* ============================================================
   SIN PEDIDOS
============================================================ */

.indi-orders-empty {
    padding:
        60px
        25px;

    border:
        1px solid
        #d9e5ee;

    border-radius: 18px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 13px 32px
        rgba(16, 68, 108, .07);
}


.indi-orders-empty__icon {
    width: 68px;
    height: 68px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eaf6fc;

    color: #148acb;

    font-size: 1.8rem;
}


.indi-orders-empty h2 {
    margin:
        17px
        0
        6px;

    color: #123653;

    font-size: 1.25rem;
    font-weight: 800;
}


.indi-orders-empty p {
    margin:
        0
        auto;

    max-width: 440px;

    color: #63798c;

    font-size: .82rem;
}


.indi-orders-shop {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 20px;

    padding:
        0
        15px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #2c56df,
            #1596d8
        );

    color: #ffffff;

    text-decoration: none;

    font-size: .78rem;
    font-weight: 800;
}


.indi-orders-shop:hover {
    color: #ffffff;
}


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

@media(max-width: 991.98px) {

    .indi-order-card {
        grid-template-columns:
            1fr
            1fr;
    }


    .indi-order-summary {
        grid-column:
            1
            /
            -1;

        justify-items: start;

        padding-top: 15px;

        border-top:
            1px solid
            #e7eef3;

        text-align: left;
    }


    .indi-order-details {
        border-right: 0;
    }

}


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

@media(max-width: 767.98px) {

    .indi-orders-page {
        padding:
            30px
            12px
            55px;
    }


    .indi-orders-heading {
        align-items: flex-start;
        flex-direction: column;

        padding: 20px;
    }


    .indi-orders-back {
        width: 100%;
    }


    .indi-order-card {
        grid-template-columns: 1fr;

        padding: 17px;
    }


    .indi-order-product {
        grid-template-columns:
            82px
            minmax(0, 1fr);
    }


    .indi-order-product__image {
        width: 82px;
        height: 82px;
    }


    .indi-order-details {
        grid-template-columns: 1fr 1fr;

        padding:
            16px
            0;

        border:
            0;

        border-top:
            1px solid
            #e7eef3;

        border-bottom:
            1px solid
            #e7eef3;
    }


    .indi-order-summary {
        grid-column: auto;

        padding-top: 0;

        border: 0;
    }

}

/* ============================================================
   DETALLE DE PEDIDO - INDI
============================================================ */

.indi-order-detail-page {
    position: relative;
    min-height: 75vh;
    padding: 48px 20px 85px;
    background: #f3f7fb;
}

.indi-order-detail-header,
.indi-order-detail-section,
.indi-order-detail-totals {
    position: relative;
    z-index: 1;
    border: 1px solid #d9e6f0;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 68, 108, .07);
}

.indi-order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 18px;
    padding: 24px 27px;
}

.indi-order-detail-eyebrow,
.indi-order-detail-section__heading span {
    color: #147fbd;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.indi-order-detail-header h1 {
    margin: 3px 0 0;
    color: #0b2f53;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 850;
}

.indi-order-detail-header p {
    margin: 5px 0 0;
    color: #647b8e;
    font-size: .79rem;
}

.indi-order-detail-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.indi-order-detail-back {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid #bcd9e9;
    border-radius: 9px;
    color: #107dbb;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 800;
}

.indi-order-detail-summary-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    margin-bottom: 18px;
}

.indi-order-detail-mini-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dae7f0;
    border-radius: 12px;
    background: #ffffff;
}

.indi-order-detail-mini-card > i {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf5fb;
    color: #158acb;
}

.indi-order-detail-mini-card > div {
    min-width: 0;
    display: grid;
}

.indi-order-detail-mini-card small,
.indi-order-detail-data small,
.indi-order-detail-tax-grid small {
    color: #73889a;
    font-size: .66rem;
}

.indi-order-detail-mini-card strong {
    color: #173850;
    font-size: .76rem;
}

.indi-order-detail-total-mini {
    color: #087c43 !important;
}

.indi-order-detail-section {
    margin-bottom: 18px;
    padding: 22px;
}

.indi-order-detail-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.indi-order-detail-section__heading h2 {
    margin: 3px 0 0;
    color: #103653;
    font-size: 1.05rem;
    font-weight: 800;
}

.indi-order-detail-section__heading > strong {
    color: #61798d;
    font-size: .72rem;
}

.indi-order-detail-products {
    display: grid;
    gap: 10px;
}

.indi-order-detail-product {
    display: grid;
    grid-template-columns: 105px minmax(0,1fr) minmax(235px,.55fr);
    align-items: center;
    gap: 16px;
    padding: 13px;
    border: 1px solid #e0e9f0;
    border-radius: 12px;
    background: #fbfdfe;
}

.indi-order-detail-product__image {
    width: 105px;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: #f2f7fa;
    color: #8fa9ba;
    font-size: 2rem;
}

.indi-order-detail-product__image img {
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.indi-order-detail-product__info {
    min-width: 0;
    display: grid;
}

.indi-order-detail-sku {
    color: #1281bf;
    font-size: .64rem;
    font-weight: 800;
}

.indi-order-detail-product__info h3 {
    margin: 3px 0;
    color: #143650;
    font-size: .94rem;
    font-weight: 800;
}

.indi-order-detail-model,
.indi-order-detail-brand {
    color: #677e91;
    font-size: .70rem;
}

.indi-order-detail-ticket {
    display: grid;
    gap: 7px;
    padding-left: 17px;
    border-left: 1px solid #e3ebf1;
}

.indi-order-detail-ticket > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.indi-order-detail-ticket span {
    color: #6f8395;
    font-size: .69rem;
}

.indi-order-detail-ticket strong {
    color: #087c43;
    font-size: .75rem;
}

.indi-order-detail-ticket del {
    color: #bd5252;
    font-size: .72rem;
}

.indi-order-detail-line-total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #e4ebf1;
}

.indi-order-detail-columns {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.indi-order-detail-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.indi-order-detail-data > div {
    display: grid;
    padding: 12px;
    border-radius: 10px;
    background: #f6f9fb;
}

.indi-order-detail-data strong {
    margin-top: 2px;
    color: #183850;
    font-size: .75rem;
}

.indi-order-detail-address {
    grid-column: 1 / -1;
}

.indi-order-detail-tax-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.indi-order-detail-tax-grid > div {
    display: grid;
    padding: 12px;
    border-radius: 10px;
    background: #f6f9fb;
}

.indi-order-detail-tax-grid strong {
    margin-top: 2px;
    color: #183850;
    font-size: .74rem;
}

.indi-order-detail-totals {
    margin-top: 2px;
    margin-bottom: 20px;
    margin-left: auto;
    width: min(100%, 480px);
    padding: 20px;
}

.indi-order-detail-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    color: #60778a;
    font-size: .77rem;
}

.indi-order-detail-grand-total {
    margin-top: 7px;
    padding-top: 14px !important;
    border-top: 1px solid #dfe8ef;
}

.indi-order-detail-grand-total span {
    color: #153851;
    font-size: .95rem;
    font-weight: 800;
}

.indi-order-detail-grand-total strong {
    color: #087c43;
    font-size: 1.25rem;
}


/* ESTADOS */

.indi-detail-status,
.indi-detail-payment {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
}

.indi-detail-status--neutral,
.indi-detail-payment--neutral {
    background: #eef2f5;
    color: #5e7181;
}

.indi-detail-status--warning,
.indi-detail-payment--warning {
    background: #fff2c9;
    color: #946300;
}

.indi-detail-status--info,
.indi-detail-payment--info {
    background: #e4f5fc;
    color: #0878b1;
}

.indi-detail-status--primary {
    background: #e8eeff;
    color: #3158ce;
}

.indi-detail-status--success,
.indi-detail-payment--success {
    background: #e5f7ef;
    color: #14744f;
}

.indi-detail-status--danger,
.indi-detail-payment--danger {
    background: #ffeaea;
    color: #b63c3c;
}


@media(max-width: 991.98px) {

    .indi-order-detail-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .indi-order-detail-columns {
        grid-template-columns: 1fr;
    }

    .indi-order-detail-product {
        grid-template-columns: 90px minmax(0,1fr);
    }

    .indi-order-detail-product__image {
        width: 90px;
        height: 90px;
    }

    .indi-order-detail-ticket {
        grid-column: 1 / -1;
        padding: 12px 0 0;
        border-left: 0;
        border-top: 1px solid #e3ebf1;
    }

}


@media(max-width: 767.98px) {

    .indi-order-detail-page {
        padding: 30px 12px 55px;
    }

    .indi-order-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .indi-order-detail-header__actions {
        width: 100%;
        justify-content: space-between;
    }

    .indi-order-detail-summary-grid {
        grid-template-columns: 1fr;
    }

    .indi-order-detail-product {
        grid-template-columns: 75px minmax(0,1fr);
    }

    .indi-order-detail-product__image {
        width: 75px;
        height: 75px;
    }

    .indi-order-detail-data,
    .indi-order-detail-tax-grid {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   DIRECCIONES - INVENCIÓN DIGITAL
============================================================ */

.indi-address-page,
.indi-address-form-page {
    position: relative;
    min-height: 75vh;
    padding: 48px 0 85px;
    background: #f3f7fb;
    overflow: hidden;
}

.indi-address-page .container,
.indi-address-form-page .container {
    position: relative;
    z-index: 1;
}

/* ============================================================
   WRAPPER GENERAL
============================================================ */

.indi-address-page .mi-cuenta-wrapper,
.indi-address-form-page .mi-cuenta-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}

/* ============================================================
   TEXTOS HEREDADOS DE INFORMÁTICA
============================================================ */

.indi-address-page .text-light,
.indi-address-form-page .text-light {
    color: #183850 !important;
}

.indi-address-page .text-light.opacity-75,
.indi-address-form-page .text-light.opacity-75 {
    color: #6d8192 !important;
    opacity: 1 !important;
}

.indi-address-page h2.text-light,
.indi-address-form-page h2.text-light {
    margin: 0;
    color: #0b2f53 !important;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -.035em;
}

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

.indi-address-page .d-flex.justify-content-between.align-items-center.mb-4,
.indi-address-form-page .d-flex.justify-content-between.align-items-center.mb-4 {
    margin-bottom: 24px !important;
    gap: 18px;
    flex-wrap: wrap;
}

/* ============================================================
   CARDS DE DIRECCIONES
============================================================ */

.indi-address-page .cuenta-card {
    height: 100%;
    padding: 25px 24px;
    border: 1px solid #d9e6f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 13px 32px rgba(16, 68, 108, .08);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.indi-address-page .cuenta-card:hover {
    transform: translateY(-2px);
    border-color: #bed9ea;
    box-shadow: 0 16px 34px rgba(16, 68, 108, .10);
}

.indi-address-page .cuenta-card h5 {
    margin-bottom: 10px;
    color: #103653 !important;
    font-size: 1.06rem;
    font-weight: 800;
}

.indi-address-page .cuenta-card p {
    margin-bottom: .45rem;
    color: #5f7689 !important;
    line-height: 1.5;
}

.indi-address-page .cuenta-card p strong {
    color: #17364f;
}

.indi-address-page .cuenta-card .badge.bg-success {
    padding: 7px 11px;
    border-radius: 999px;
    background: #1d9a60 !important;
    font-size: .72rem;
    font-weight: 800;
}

.indi-address-page .cuenta-card .btn {
    min-height: 38px;
    font-weight: 700;
}

.indi-address-page .cuenta-card .btn-outline-warning {
    border-color: #e0a526;
    color: #c88912;
}

.indi-address-page .cuenta-card .btn-outline-warning:hover {
    background: #e0a526;
    color: #fff;
}

.indi-address-page .cuenta-card .btn-outline-danger:hover {
    color: #fff;
}

/* ============================================================
   ESTADO VACÍO
============================================================ */

.indi-address-page .cuenta-card.text-center {
    padding: 42px 24px;
}

.indi-address-page .cuenta-card.text-center i {
    display: inline-block;
    margin-bottom: 8px;
}

/* ============================================================
   FORMULARIOS AGREGAR / EDITAR
============================================================ */

.indi-address-form-page .alert-info {
    border: 1px solid #cfe7f4;
    border-radius: 14px;
    background: #eef8fd;
    color: #496a82;
    box-shadow: 0 8px 18px rgba(17, 90, 138, .05);
}

.indi-address-form-page form {
    padding: 27px 28px;
    border: 1px solid #d9e6f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 13px 32px rgba(16, 68, 108, .08);
}

.indi-address-form-page .form-floating {
    position: relative;
}

.indi-address-form-page .form-control,
.indi-address-form-page .form-select {
    min-height: 56px;
    border: 1px solid #cfdee9;
    border-radius: 14px;
    background: #ffffff;
    color: #17374f;
    box-shadow: none;
}

.indi-address-form-page textarea.form-control {
    min-height: 120px;
    height: 120px !important;
    resize: vertical;
}

.indi-address-form-page .form-control:focus,
.indi-address-form-page .form-select:focus {
    border-color: #44afe1;
    box-shadow: 0 0 0 0.2rem rgba(19, 138, 200, .12);
}

.indi-address-form-page .form-control[readonly] {
    background: #f4f8fb;
    color: #47657d;
}

.indi-address-form-page .form-floating > label {
    color: #657b8f;
}

.indi-address-form-page .required {
    color: #d44747;
    font-weight: 800;
}

.indi-address-form-page .invalid-feedback {
    font-size: .76rem;
}

.indi-address-form-page .form-check {
    padding: 14px 16px 14px 2rem;
    border: 1px solid #d9e6f0;
    border-radius: 14px;
    background: #f8fbfd;
}

.indi-address-form-page .form-check-input {
    margin-top: .3rem;
}

.indi-address-form-page .form-check-label {
    color: #183850 !important;
    font-weight: 600;
}

.indi-address-form-page .btn-info {
    border-color: #1488c8;
    background: linear-gradient(90deg, #2f55df 0%, #2496db 100%);
    color: #fff;
    font-weight: 800;
}

.indi-address-form-page .btn-info:hover {
    border-color: #117db8;
    background: linear-gradient(90deg, #244ad1 0%, #188acd 100%);
    color: #fff;
}

.indi-address-form-page .btn-outline-info {
    border-color: #38aee3;
    color: #0f86c4;
    font-weight: 700;
}

.indi-address-form-page .btn-outline-info:hover {
    background: #ebf8fe;
    color: #086da5;
}

.indi-address-form-page .btn-outline-warning {
    font-weight: 700;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {
    .indi-address-page,
    .indi-address-form-page {
        padding: 30px 0 60px;
    }

    .indi-address-page .cuenta-card,
    .indi-address-form-page form {
        padding: 20px 18px;
    }

    .indi-address-page h2.text-light,
    .indi-address-form-page h2.text-light {
        font-size: 1.85rem;
    }

    .indi-address-form-page .btn-info,
    .indi-address-form-page .btn-outline-warning,
    .indi-address-form-page .btn-outline-info {
        width: 100%;
    }
}

/* ============================================================
   FACTURACIÓN - INVENCIÓN DIGITAL
============================================================ */

.indi-billing-page {
    position: relative;

    min-height: 75vh;

    padding:
        48px
        0
        85px;

    background: #f3f7fb;
}


/* ============================================================
   WRAPPER HEREDADO DE INFORMÁTICA
============================================================ */

.indi-billing-page .mi-cuenta-wrapper {
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
    backdrop-filter: none;
}


/* ============================================================
   TEXTOS HEREDADOS DE INFORMÁTICA
============================================================ */

.indi-billing-page .text-light {
    color: #183850 !important;
}

.indi-billing-page .text-light.opacity-75 {
    color: #667d90 !important;

    opacity: 1 !important;
}

.indi-billing-page h2.text-light {
    color: #0b2f53 !important;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.35rem
        );

    font-weight: 850;

    letter-spacing: -.035em;
}

.indi-billing-page .text-info {
    color: #087fbd !important;
}


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

.indi-billing-page
.d-flex.justify-content-between.align-items-center.mb-4 {
    gap: 18px;

    flex-wrap: wrap;
}


/* ============================================================
   AVISO
============================================================ */

.indi-billing-page .alert-info {
    padding: 13px 16px;

    border:
        1px solid
        #cde6f3;

    border-radius: 13px;

    background: #eef8fd;

    color: #496a82;
}


/* ============================================================
   CARDS DE DATOS FISCALES
============================================================ */

.indi-billing-page .cuenta-card {
    height: 100%;

    padding:
        25px
        24px;

    border:
        1px solid
        #d9e6f0;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 13px 32px
        rgba(16, 68, 108, .08);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.indi-billing-page .cuenta-card:hover {
    transform: translateY(-2px);

    border-color: #bed9ea;

    box-shadow:
        0 16px 34px
        rgba(16, 68, 108, .11);
}


.indi-billing-page .cuenta-card h5 {
    margin-bottom: 13px;

    color: #103653 !important;

    font-size: 1.06rem;
    font-weight: 800;
}


.indi-billing-page .cuenta-card p {
    margin-bottom: 7px;

    color: #607689 !important;

    line-height: 1.5;
}


.indi-billing-page .cuenta-card p strong {
    color: #17364f;
}


.indi-billing-page
.cuenta-card
.badge.bg-success {
    padding:
        7px
        11px;

    border-radius: 999px;

    background: #1d9a60 !important;

    font-size: .70rem;
    font-weight: 800;
}


/* ============================================================
   FORMULARIO
============================================================ */

.indi-billing-page form {
    padding:
        28px;

    border:
        1px solid
        #d9e6f0;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 13px 32px
        rgba(16, 68, 108, .08);
}


.indi-billing-page .form-control,
.indi-billing-page .form-select {
    min-height: 56px;

    border:
        1px solid
        #cfdee9;

    border-radius: 13px;

    background: #ffffff;

    color: #17374f;

    box-shadow: none;
}


.indi-billing-page .form-control:focus,
.indi-billing-page .form-select:focus {
    border-color: #3bafe1;

    box-shadow:
        0 0 0 .2rem
        rgba(19, 138, 200, .12);
}


.indi-billing-page
.form-floating > label {
    color: #61778a;
}


.indi-billing-page .form-label {
    color: #183850 !important;

    font-weight: 700;
}


.indi-billing-page .required {
    color: #d34242;

    font-weight: 800;
}


/* ============================================================
   PDF
============================================================ */

.indi-billing-page
input[type="file"] {
    padding-top: 14px;
    padding-bottom: 14px;
}


.indi-billing-page
.alert-info a {
    color: #087fbd;

    font-weight: 800;
}


/* ============================================================
   PREDETERMINADO
============================================================ */

.indi-billing-page .form-check {
    padding:
        14px
        16px
        14px
        2.1rem;

    border:
        1px solid
        #d9e6f0;

    border-radius: 13px;

    background: #f7fafc;
}


.indi-billing-page
.form-check-label {
    color: #183850 !important;

    font-weight: 600;
}


/* ============================================================
   BOTÓN PRINCIPAL
============================================================ */

.indi-billing-page .btn-info {
    border-color: #168bca;

    background:
        linear-gradient(
            90deg,
            #2e55df,
            #1795d7
        );

    color: #ffffff;

    font-weight: 800;
}


.indi-billing-page .btn-info:hover {
    border-color: #107eb9;

    background:
        linear-gradient(
            90deg,
            #254bd2,
            #1388c7
        );

    color: #ffffff;
}


/* ============================================================
   VACÍO
============================================================ */

.indi-billing-page
.cuenta-card.text-center {
    padding:
        42px
        25px;
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width: 767.98px) {

    .indi-billing-page {
        padding:
            30px
            0
            60px;
    }


    .indi-billing-page form,
    .indi-billing-page .cuenta-card {
        padding:
            20px
            18px;
    }


    .indi-billing-page h2.text-light {
        font-size: 1.8rem;
    }


    .indi-billing-page .btn-info,
    .indi-billing-page .btn-outline-warning,
    .indi-billing-page .btn-secondary {
        width: 100%;
    }

}

/* ============================================================
   PÁGINAS INFORMATIVAS / LEGALES - INVENCIÓN DIGITAL
   Agregar al FINAL de style.css
============================================================ */

.indi-info-page {
    position: relative;
    min-height: 75vh;
    padding: 48px 0 85px;
    background: #f3f7fb;
}

.indi-info-page > .container {
    position: relative;
    z-index: 1;
}

.indi-info-page .privacy-container {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid #d9e6f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 68, 108, .09);
}

.indi-info-page .privacy-title {
    margin: 0 0 34px;
    color: #0b2f53;
    font-size: clamp(1.85rem, 3.2vw, 2.65rem);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-align: left;
}

.indi-info-page .privacy-title::before {
    content: "INVENCIÓN DIGITAL";
    display: block;
    margin-bottom: 8px;
    color: #1483c1;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.indi-info-page .privacy-subtitle {
    position: relative;
    margin: 34px 0 16px;
    padding: 11px 14px;
    border-left: 4px solid #188fd2;
    border-radius: 0 10px 10px 0;
    background: #eef7fc;
    color: #103653;
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.35;
}

.indi-info-page .privacy-text {
    margin: 0;
    color: #465f73;
    font-size: .96rem;
    line-height: 1.85;
    text-align: justify;
    overflow-wrap: anywhere;
}

.indi-info-page .privacy-text strong {
    color: #173850;
    font-weight: 800;
}

.indi-info-page .privacy-text a,
.indi-info-page .privacy-container a {
    color: #0d7dbb;
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.indi-info-page .privacy-text a:hover,
.indi-info-page .privacy-container a:hover {
    color: #075f91;
}

.indi-info-page .privacy-container img {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 22px auto 30px;
    border: 1px solid #dbe7ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(16, 68, 108, .08);
}

/* Ayuda a que textos heredados de Informática nunca queden blancos */
.indi-info-page .text-light,
.indi-info-page .text-white {
    color: #173850 !important;
}

.indi-info-page hr {
    margin: 30px 0;
    border-color: #dfe8ef;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .indi-info-page {
        padding: 30px 0 60px;
    }

    .indi-info-page .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .indi-info-page .privacy-container {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .indi-info-page .privacy-title {
        margin-bottom: 26px;
        font-size: 1.85rem;
    }

    .indi-info-page .privacy-subtitle {
        margin-top: 28px;
        font-size: .98rem;
    }

    .indi-info-page .privacy-text {
        font-size: .91rem;
        line-height: 1.75;
        text-align: left;
    }
}

/* ============================================================
   RESEÑAS DE EMPRESA - FOOTER INDI
============================================================ */

.indi-footer-reviews-carousel {
    position: relative;

    margin-top: 17px;
    padding: 0 38px;
}


/* CARD */

.indi-footer-review-card {
    min-height: 155px;

    padding: 17px 18px;

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

    border-radius: 14px;

    background:
        rgba(3, 23, 39, .32);

    text-align: left;
}


.indi-footer-review-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.indi-footer-review-card__name {
    display: block;

    color: #ffffff;

    font-size: .87rem;
    font-weight: 800;
}


.indi-footer-review-card__stars {
    margin-top: 3px;

    color: #ffc928;

    font-size: .9rem;

    letter-spacing: 1px;
}


.indi-footer-review-card__date {
    flex: 0 0 auto;

    color:
        rgba(255, 255, 255, .50);

    font-size: .68rem;
}


.indi-footer-review-card__comment {
    margin-top: 13px;

    color:
        rgba(255, 255, 255, .74);

    font-size: .78rem;
    line-height: 1.55;
}


.indi-footer-review-card__empty {
    color:
        rgba(255, 255, 255, .45);

    font-style: italic;
}


/* FLECHAS */

.indi-footer-review-control {
    width: 32px;

    opacity: .72;
}


.indi-footer-review-control:hover {
    opacity: 1;
}


.indi-footer-review-control
.carousel-control-prev-icon,

.indi-footer-review-control
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}


/* VACÍO */

.indi-footer-review-empty {
    margin-top: 15px;

    padding: 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 13px;

    background:
        rgba(3, 23, 39, .28);

    color:
        rgba(255, 255, 255, .66);

    text-align: left;

    font-size: .76rem;
}


.indi-footer-review-empty > i {
    color: #78e2ff;

    font-size: 1.45rem;
}


.indi-footer-review-empty strong {
    display: block;

    margin-bottom: 2px;

    color: #ffffff;
}


/* BOTÓN */

.indi-footer-review-open {
    border: 0;

    font-family: inherit;
}


.indi-footer-review-open i {
    font-size: .92rem;
}


/* ALERTAS */

.indi-footer-review-alert {
    margin-top: 15px;
    margin-bottom: 0;

    padding: 10px 12px;

    border-radius: 10px;

    font-size: .76rem;

    text-align: left;
}


/* ============================================================
   MODAL
============================================================ */

.indi-company-review-modal {
    overflow: hidden;

    border: 0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 25px 70px
        rgba(3, 31, 54, .24);
}


.indi-company-review-modal__header {
    padding: 20px 24px;

    border-bottom:
        1px solid
        #dde8ef;

    background:
        linear-gradient(
            110deg,
            #2353dd,
            #20a9dc
        );
}


.indi-company-review-modal__header
.modal-title {
    margin-top: 2px;

    color: #ffffff;

    font-weight: 800;
}


.indi-company-review-modal__header
.btn-close {
    filter:
        brightness(0)
        invert(1);

    opacity: .86;
}


.indi-company-review-modal__eyebrow {
    display: block;

    color:
        rgba(255, 255, 255, .72);

    font-size: .66rem;
    font-weight: 850;

    letter-spacing: .1em;
}


/* BODY */

.indi-company-review-modal__body {
    padding: 24px;
}


.indi-company-review-modal__description {
    margin-bottom: 22px;

    color: #536c7e;

    font-size: .88rem;
    line-height: 1.6;
}


.indi-company-review-modal__description strong {
    color: #173b57;
}


.indi-company-review-grid {
    display: grid;

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

    gap: 20px;
}


/* CUENTA */

.indi-company-review-account {
    margin-bottom: 18px;

    padding: 13px 14px;

    display: flex;
    align-items: center;

    gap: 9px;

    border:
        1px solid
        #c9e5f3;

    border-radius: 12px;

    background: #eef9fe;

    color: #35647d;

    font-size: .82rem;
}


.indi-company-review-account i {
    color: #168fca;

    font-size: 1.15rem;
}


/* CALIFICACIÓN */

.indi-company-review-rating {
    padding: 17px;

    border:
        1px solid
        #f0dfaa;

    border-radius: 14px;

    background: #fffaf0;
}


.indi-company-review-rating__title {
    display: flex;
    align-items: center;

    gap: 10px;
}


.indi-company-review-rating__title > i {
    color: #ffc107;

    font-size: 1.15rem;
}


.indi-company-review-rating__title strong {
    display: block;

    color: #1d3b50;

    font-size: .89rem;
}


.indi-company-review-rating__title span {
    display: block;

    margin-top: 2px;

    color: #7b8d9a;

    font-size: .72rem;
}


/* ESTRELLAS INTERACTIVAS */

.indi-company-review-stars-input {
    margin-top: 12px;

    display: inline-flex;
    flex-direction: row-reverse;

    justify-content: flex-end;
}


.indi-company-review-stars-input input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


.indi-company-review-stars-input label {
    margin-right: 3px;

    color: #d6dce0;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    transition:
        color .15s ease,
        transform .15s ease;
}


.indi-company-review-stars-input label:hover,
.indi-company-review-stars-input label:hover ~ label,
.indi-company-review-stars-input input:checked ~ label {
    color: #ffc107;
}


.indi-company-review-stars-input label:hover {
    transform: scale(1.08);
}


/* TEXTAREAS */

.indi-company-review-textarea {
    height: 125px !important;
}


.indi-company-review-suggestion__textarea {
    height: 105px !important;
}


.indi-company-review-help {
    display: block;

    margin-bottom: 18px;

    color: #7b8d9b;

    line-height: 1.45;
}


.indi-company-review-suggestion {
    padding: 15px;

    border:
        1px solid
        #dce8ef;

    border-radius: 14px;

    background: #f8fbfd;
}


.indi-company-review-suggestion__help {
    margin-top: 10px;

    display: flex;
    align-items: flex-start;

    gap: 8px;

    color: #6d8291;

    font-size: .72rem;
    line-height: 1.5;
}


.indi-company-review-suggestion__help i {
    color: #e2a100;

    margin-top: 2px;
}


/* FORMULARIOS */

.indi-company-review-modal
.form-control {
    border-color: #cfdee8;

    color: #17374f;
}


.indi-company-review-modal
.form-control:focus {
    border-color: #25a0d7;

    box-shadow:
        0 0 0 .2rem
        rgba(37, 160, 215, .12);
}


.indi-company-review-modal
.form-floating > label {
    color: #6e8291;
}


/* FOOTER MODAL */

.indi-company-review-modal__footer {
    padding: 17px 24px;

    border-top:
        1px solid
        #dde8ef;

    background: #f8fafc;
}


/* HONEYPOT */

.review-honeypot-wrap {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width: 767.98px) {

    .indi-company-review-grid {
        grid-template-columns: 1fr;
    }


    .indi-company-review-modal__body {
        padding: 19px;
    }


    .indi-footer-reviews-carousel {
        padding:
            0
            29px;
    }


    .indi-footer-review-card {
        min-height: 165px;

        padding:
            15px;
    }


    .indi-company-review-stars-input label {
        font-size: 1.8rem;
    }

}

/* ============================================================
   FIX ANCHO - SUGERENCIA DE MEJORA
============================================================ */

/*
   Permite que ambas columnas del modal
   puedan reducirse correctamente.
*/
.indi-company-review-grid > div {
    min-width: 0;
}


/*
   El bloque de sugerencia nunca podrá
   superar el ancho de su columna.
*/
.indi-company-review-suggestion {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
    overflow: hidden;
}


/*
   El form-floating también debe respetar
   completamente el ancho disponible.
*/
.indi-company-review-suggestion .form-floating {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/*
   El textarea queda encerrado dentro
   del recuadro sin sobresalir.
*/
.indi-company-review-suggestion__textarea {
    display: block;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box;

    resize: vertical;
}

/* ============================================================
   SUGERENCIA DE MEJORA - MODAL
============================================================ */

.indi-company-review-suggestion__label {
    display: block;

    margin-bottom: 8px;

    color: #36566d;

    font-size: .82rem;
    font-weight: 700;

    line-height: 1.35;
}

.indi-company-review-suggestion__label span {
    color: #7d909f;

    font-size: .74rem;
    font-weight: 500;
}

.indi-company-review-suggestion__textarea {
    width: 100% !important;
    max-width: 100% !important;

    height: 105px !important;

    padding: 12px 13px;

    border-radius: 10px;

    box-sizing: border-box;

    resize: vertical;
}

.indi-company-review-suggestion__textarea::placeholder {
    color: #9aabb7;

    font-size: .78rem;
}

.indi-company-review-suggestion__help {
    margin-top: 10px;
}

/* ============================================================
   PRODUCTO.PHP
   EQUIPOS / CONSUMIBLES RELACIONADOS
============================================================ */

.indi-related-products-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 332px)
        );

    justify-content: center;
    align-items: stretch;

    gap: 24px;
}


/*
   Dentro de producto.php la tarjeta debe ocupar
   la celda del grid y no comportarse como carrusel.
*/
.indi-related-products-grid
.indi-catalog-card {
    width: 100%;
    max-width: 332px;

    flex: none;
}


/* MOBILE */

@media(max-width: 575.98px) {

    .indi-related-products-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .indi-related-products-grid
    .indi-catalog-card {
        width: 100%;
        max-width: 100%;
    }

}

/* ============================================================
   IMPORTADOR DE CATÁLOGO - INDI
============================================================ */

.indi-import-page {
    min-height: 75vh;
    background: #f3f7fb;
    color: #17374f;
}

.indi-import-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;

    margin-bottom: 25px;
}

.indi-import-header h1 {
    margin: 3px 0 7px;

    color: #0b3154;

    font-size: clamp(
        1.8rem,
        3vw,
        2.5rem
    );

    font-weight: 850;
}

.indi-import-header p {
    margin: 0;

    color: #667f91;
}

.indi-import-eyebrow {
    color: #168bc7;

    font-size: .7rem;
    font-weight: 850;

    letter-spacing: .1em;
}

.indi-import-card {
    position: relative;

    padding: 25px;

    border: 1px solid #d9e5ed;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(19, 72, 109, .08);
}

.indi-import-card h2 {
    margin-bottom: 18px;

    color: #153b57;

    font-size: 1.2rem;
    font-weight: 800;
}

.indi-import-summary {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(120px, 1fr)
        );

    gap: 12px;

    margin-top: 18px;
}

.indi-import-summary > div {
    padding: 15px;

    border: 1px solid #dce8ef;
    border-radius: 13px;

    background: #f8fbfd;
}

.indi-import-summary span {
    display: block;

    margin-bottom: 4px;

    color: #738897;

    font-size: .72rem;
}

.indi-import-summary strong {
    color: #0c5e93;

    font-size: 1.35rem;
}

.indi-import-table {
    min-width: 1100px;

    font-size: .78rem;
}

.indi-import-table thead th {
    background: #edf6fb;

    color: #184563;

    border-bottom:
        2px solid
        #cfe2ed;

    white-space: nowrap;
}

.indi-import-table td {
    color: #39576c;

    vertical-align: middle;
}

@media(max-width: 991.98px) {

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

}

@media(max-width: 575.98px) {

    .indi-import-card {
        padding: 18px;
    }

    .indi-import-summary {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   TEMA DE MARCA - CANON
   PRODUCTO.PHP
============================================================ */

body.indi-brand-theme--canon {

    --canon-red: #cc0000;
    --canon-red-dark: #970000;
    --canon-red-deep: #6f0000;
    --canon-red-soft: #fff3f3;
    --canon-border: #efcaca;

}


/* ============================================================
   HEADER PRINCIPAL
============================================================ */

body.indi-brand-theme--canon
.site-header {

    --indi-blue-600: #cc0000;
    --indi-blue-700: #a90000;
}


/*
   Zona azul/cyan principal del header.
   Usamos un rojo oscuro → rojo Canon
   sin hacerlo demasiado agresivo.
*/

body.indi-brand-theme--canon
.site-header .header-main,

body.indi-brand-theme--canon
.site-header .main-header,

body.indi-brand-theme--canon
.site-header .header-middle {

    background:
        linear-gradient(
            110deg,
            #790000 0%,
            #b00000 42%,
            #df1b1b 100%
        ) !important;
}


/* ============================================================
   FONDO / FRANJAS DEL PRODUCTO
============================================================ */

body.indi-brand-theme--canon
.indi-product-page.indi-page-background::before,

body.indi-brand-theme--canon
.indi-product-page.indi-page-background::after {

    background:
        linear-gradient(
            180deg,
            #cc0000,
            #8d0000
        ) !important;
}


/* ============================================================
   TEXTOS DE ACENTO
============================================================ */

body.indi-brand-theme--canon
.indi-product-page .text-info {

    color:
        var(--canon-red)
        !important;
}


/* ============================================================
   TABS
============================================================ */

body.indi-brand-theme--canon
.indi-product-page
.product-tabs
.nav-link.active {

    background:
        linear-gradient(
            120deg,
            #8f0000,
            #d71717
        )
        !important;

    border-color:
        #a90000
        !important;
}


/* Tabs normales */

body.indi-brand-theme--canon
.indi-product-page
.product-tabs
.nav-link {

    border-color:
        #ecd4d4;
}


/* ============================================================
   BREADCRUMBS
============================================================ */

body.indi-brand-theme--canon
.indi-product-page
.floating-breadcrumbs
.bc-btn.active {

    background:
        linear-gradient(
            135deg,
            #a00000,
            #df1717
        )
        !important;
}


body.indi-brand-theme--canon
.indi-product-page
.floating-breadcrumbs
.bc-btn.current {

    background:
        linear-gradient(
            135deg,
            #5f0000,
            #1f0707
        )
        !important;
}


/* ============================================================
   CARDS PRINCIPALES DEL PRODUCTO
============================================================ */

body.indi-brand-theme--canon
.indi-product-page .slide-box {

    border-color:
        #ebcaca;

    box-shadow:
        0 12px 30px
        rgba(
            160,
            0,
            0,
            .10
        );
}


body.indi-brand-theme--canon
.indi-product-page
.tab-content.bg-dark {

    border-color:
        #edd0d0;

    box-shadow:
        0 10px 25px
        rgba(
            150,
            0,
            0,
            .08
        )
        !important;
}


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

/*
   Solo dentro de la página del producto Canon.
*/

body.indi-brand-theme--canon
.indi-product-page
.btn-success {

    border-color:
        #ae0000
        !important;

    background:
        linear-gradient(
            120deg,
            #9d0000,
            #d71920
        )
        !important;

    color:
        #ffffff
        !important;
}


body.indi-brand-theme--canon
.indi-product-page
.btn-success:hover {

    border-color:
        #780000
        !important;

    background:
        linear-gradient(
            120deg,
            #780000,
            #bd0000
        )
        !important;
}


/* ============================================================
   ENLACES / ELEMENTOS DESTACADOS
============================================================ */

body.indi-brand-theme--canon
.indi-product-page a.text-info,

body.indi-brand-theme--canon
.indi-product-page .text-info a {

    color:
        #c40000
        !important;
}


/* ============================================================
   PRECIO / ACENTOS
============================================================ */

body.indi-brand-theme--canon
.indi-product-page
.indi-product-price strong,

body.indi-brand-theme--canon
.indi-product-page
.product-price strong {

    color:
        #b30000;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width: 767.98px){

    body.indi-brand-theme--canon
    .indi-product-page
    .product-tabs
    .nav-link.active {

        background:
            linear-gradient(
                120deg,
                #940000,
                #d31919
            )
            !important;
    }

}

/* ============================================================
   TEMA CANON GLOBAL
   Se activa cuando el body tenga:
   .indi-brand-theme--canon
============================================================ */

body.indi-brand-theme--canon{
    --canon-red: #d40000;
    --canon-red-dark: #a30000;
    --canon-red-deep: #7a0000;
    --canon-soft: #fff4f4;
    --canon-border: #efc7c7;
}

/* ============================================================
   CABECERA
============================================================ */

body.indi-brand-theme--canon .site-header,
body.indi-brand-theme--canon .header-main,
body.indi-brand-theme--canon .header-middle,
body.indi-brand-theme--canon .header-bottom {
    background: linear-gradient(90deg, #7a0000 0%, #b30000 45%, #e31b23 100%) !important;
}

body.indi-brand-theme--canon .top-bar,
body.indi-brand-theme--canon .header-top {
    background: #5e0000 !important;
}

/* Links / hover del menú principal */
body.indi-brand-theme--canon .navbar .nav-link:hover,
body.indi-brand-theme--canon .navbar .nav-link.active,
body.indi-brand-theme--canon .menu-principal .nav-link:hover,
body.indi-brand-theme--canon .menu-principal .nav-link.active {
    color: #d40000 !important;
}

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

body.indi-brand-theme--canon footer,
body.indi-brand-theme--canon .site-footer,
body.indi-brand-theme--canon .footer {
    background: linear-gradient(90deg, #6f0000 0%, #a70000 50%, #d61919 100%) !important;
}

body.indi-brand-theme--canon footer h1,
body.indi-brand-theme--canon footer h2,
body.indi-brand-theme--canon footer h3,
body.indi-brand-theme--canon footer h4,
body.indi-brand-theme--canon .site-footer h1,
body.indi-brand-theme--canon .site-footer h2,
body.indi-brand-theme--canon .site-footer h3,
body.indi-brand-theme--canon .site-footer h4 {
    color: #ffffff !important;
}

body.indi-brand-theme--canon footer a:hover,
body.indi-brand-theme--canon .site-footer a:hover {
    color: #ffd2d2 !important;
}

/* ============================================================
   FRANJAS DEL FONDO
============================================================ */

body.indi-brand-theme--canon .indi-page-background::before,
body.indi-brand-theme--canon .indi-page-background::after {
    background: linear-gradient(180deg, #d40000 0%, #8c0000 100%) !important;
}

/* ============================================================
   TITULOS / ACENTOS
============================================================ */

body.indi-brand-theme--canon .text-info,
body.indi-brand-theme--canon .section-eyebrow,
body.indi-brand-theme--canon .eyebrow {
    color: var(--canon-red) !important;
}

body.indi-brand-theme--canon .page-title span,
body.indi-brand-theme--canon .section-title span,
body.indi-brand-theme--canon .category-title span,
body.indi-brand-theme--canon .catalog-title span {
    color: var(--canon-red) !important;
}

/* ============================================================
   PRODUCTO.PHP
============================================================ */

body.indi-brand-theme--canon .indi-product-page .product-tabs .nav-link.active {
    background: linear-gradient(120deg, #9b0000, #dd1b1b) !important;
    border-color: #b30000 !important;
    color: #fff !important;
}

body.indi-brand-theme--canon .indi-product-page .btn-success,
body.indi-brand-theme--canon .indi-product-page .btn-add-cart {
    background: linear-gradient(120deg, #a00000, #e01919) !important;
    border-color: #a00000 !important;
    color: #fff !important;
}

body.indi-brand-theme--canon .indi-product-page .btn-success:hover,
body.indi-brand-theme--canon .indi-product-page .btn-add-cart:hover {
    background: linear-gradient(120deg, #7f0000, #bf1010) !important;
    border-color: #7f0000 !important;
}

body.indi-brand-theme--canon .indi-product-page .floating-breadcrumbs .bc-btn.active {
    background: linear-gradient(120deg, #9b0000, #de1b1b) !important;
    color: #fff !important;
}

body.indi-brand-theme--canon .indi-product-page .floating-breadcrumbs .bc-btn.current {
    background: linear-gradient(120deg, #680000, #300000) !important;
    color: #fff !important;
}

/* Bordes suaves */
body.indi-brand-theme--canon .indi-product-page .slide-box,
body.indi-brand-theme--canon .indi-product-page .product-main-card,
body.indi-brand-theme--canon .indi-product-page .tab-content {
    border-color: var(--canon-border) !important;
}

/* ============================================================
   CATEGORIA.PHP
============================================================ */

body.indi-brand-theme--canon .catalog-hero span,
body.indi-brand-theme--canon .category-hero span,
body.indi-brand-theme--canon .categoria-titulo span,
body.indi-brand-theme--canon .titulo-categoria span {
    color: var(--canon-red) !important;
}

/* Si "Canon" está en text-info también lo pintará rojo */
body.indi-brand-theme--canon .catalog-hero .text-info,
body.indi-brand-theme--canon .category-hero .text-info,
body.indi-brand-theme--canon .categoria-titulo .text-info,
body.indi-brand-theme--canon .titulo-categoria .text-info {
    color: var(--canon-red) !important;
}

/* Tarjetas dentro de categoría */
body.indi-brand-theme--canon .indi-catalog-card__brand,
body.indi-brand-theme--canon .product-card .product-brand,
body.indi-brand-theme--canon .catalog-card .product-brand {
    color: var(--canon-red) !important;
}

/* Botones/acento generales */
body.indi-brand-theme--canon .btn-outline-primary,
body.indi-brand-theme--canon .btn-primary {
    border-color: var(--canon-red) !important;
}

body.indi-brand-theme--canon .btn-primary {
    background: linear-gradient(120deg, #a00000, #e01919) !important;
    color: #fff !important;
}

/* ============================================================
   BADGES
============================================================ */

body.indi-brand-theme--canon .badge-info,
body.indi-brand-theme--canon .badge-primary {
    background: var(--canon-red) !important;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767.98px) {
    body.indi-brand-theme--canon .site-header,
    body.indi-brand-theme--canon .header-main,
    body.indi-brand-theme--canon .header-middle,
    body.indi-brand-theme--canon .header-bottom {
        background: linear-gradient(90deg, #7a0000 0%, #b00000 48%, #df1b1b 100%) !important;
    }
}

/* ============================================================
   CANON - AJUSTES GLOBALES DEFINITIVOS
============================================================ */

/* ------------------------------------------------------------
   CABECERA PRINCIPAL
------------------------------------------------------------ */

body.indi-brand-theme--canon
.brand-header {
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255, 255, 255, .16),
            transparent 28%
        ),
        linear-gradient(
            108deg,
            #7b0000 0%,
            #990000 28%,
            #b60000 52%,
            #cf1515 74%,
            #e52a2a 100%
        ) !important;
}


/* ------------------------------------------------------------
   BARRA SUPERIOR
------------------------------------------------------------ */

body.indi-brand-theme--canon
.top-bar {
    background:
        #650000
        !important;
}


/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-open-footer {
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(255, 255, 255, .14),
            transparent 28%
        ),
        linear-gradient(
            108deg,
            #730000 0%,
            #920000 28%,
            #ad0000 52%,
            #c91818 74%,
            #df2a2a 100%
        ) !important;
}


/* ------------------------------------------------------------
   TITULO DE CATEGORIA
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-category-heading__eyebrow {
    color:
        #c60000
        !important;
}


body.indi-brand-theme--canon
.indi-category-title span {
    color:
        #c60000
        !important;
}


/* ------------------------------------------------------------
   MARCA DE LAS TARJETAS
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-catalog-card__brand {
    color:
        #c60000
        !important;
}


/* ------------------------------------------------------------
   TITULO DE PRODUCTO - HOVER
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-catalog-card__title a:hover {
    color:
        #c60000
        !important;
}


/* ------------------------------------------------------------
   TARJETA - HOVER
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-catalog-card:hover {
    border-color:
        #e4a3a3
        !important;

    box-shadow:
        0 15px 30px
        rgba(160, 0, 0, .14)
        !important;
}


/* ------------------------------------------------------------
   BREADCRUMB DE MARCA EN CATEGORIA
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-category-breadcrumb--brand {
    background:
        linear-gradient(
            135deg,
            #9d0000,
            #db1b1b
        )
        !important;

    color:
        #ffffff
        !important;
}


/* ------------------------------------------------------------
   LINKS AZULES DE ACENTO DENTRO DE CATEGORIA
------------------------------------------------------------ */

body.indi-brand-theme--canon
.indi-category-products a:hover {
    color:
        #c60000;
}

/* ============================================================
   CANON - SIN FRANJAS DECORATIVAS DE FONDO
============================================================ */

body.indi-brand-theme--canon
.indi-page-background::before,

body.indi-brand-theme--canon
.indi-page-background::after {

    display: none !important;

    content: none !important;
}