/* ==========================================================
   VARIABLES GLOBALES
   Design System - Bsale Landings
========================================================== */

:root {

  /* ==========================================================
     COLORS
  ========================================================== */

  /* Brand */

  --color-primary-orange: #FF5C1A;
  --color-primary-orange-hover: #DA460C;

  --color-primary-blue: #2068C5;
  --color-secondary-blue: #33517A;

  /* Secondary */

  --color-secondary-orange: #F9D6C4;

  /* Neutral */

  --color-secondary-gray: #505A68;
  --color-gray-light: #6A788A;

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Backgrounds */

  --background-white: #FFFFFF;
  --background-gray: #F0F2F4;
  --background-light-blue: #F8FBFF;

  /* Blue Scale */

  --color-blue-50: #F8FBFF;
  --color-blue-100: #EDF5FF;
  --color-blue-200: #EAF1FA;
  --color-blue-300: #DCE6F5;

  /* Borders */

  --color-border: #E8EEF6;
  --color-border-hover: #D5E4F8;

  /* Semantic */

  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  /* Misc */

  --color-text-underlined: #C7D9F1;
  --color-focus-ring: rgba(32,104,197,.18);


  /* ==========================================================
     TYPOGRAPHY
  ========================================================== */

  /* Families */

  --font-title-family: "Inter", sans-serif;
  --font-body-family: "Inter", sans-serif;
  --font-cursive-family: "Rosario", sans-serif;

  /* Sizes */

  --font-size-display: 2.8rem;
  --font-size-heading: 2.25rem;
  --font-size-subheading: 1.35rem;

  --font-size-body-lg: 1.1rem;
  --font-size-body: 1rem;
  --font-size-small: .9rem;
  --font-size-xs: .8rem;

  /* Weights */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Height */

  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;


  /* ==========================================================
     SPACING
  ========================================================== */

  /* Space Scale */

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Sections */

  --section-padding-y: 6rem;
  --section-padding-y-tablet: 4rem;
  --section-padding-y-mobile: 3rem;

  /* Content */

  --content-width-sm: 580px;
  --content-width-md: 760px;
  --content-width-lg: 960px;

  /* Grid */

  --grid-gap: 2rem;


  /* ==========================================================
     SIZING
  ========================================================== */

  /* Buttons */

  --button-height-sm: 40px;
  --button-height: 48px;
  --button-min-width: 170px;

  /* Icons */

  --icon-size-sm: 48px;
  --icon-size-md: 64px;
  --icon-size-lg: 90px;

  /* Cards */

  --card-padding: 2rem;
  --card-padding-lg: 2.25rem;


  /* ==========================================================
     LAYOUT
  ========================================================== */

  /* Bootstrap containers (referencia) */

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;


  /* ==========================================================
     BORDER RADIUS
  ========================================================== */

  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;


  /* ==========================================================
     SHADOWS
  ========================================================== */

  --shadow-sm: 0 10px 25px rgba(23,56,104,.08);
  --shadow-md: 0 18px 45px rgba(23,56,104,.10);
  --shadow-lg: 0 20px 45px rgba(23,56,104,.12);

  --shadow-dropdown: 0 12px 30px rgba(12,0,46,.12);


  /* ==========================================================
     TRANSITIONS
  ========================================================== */

  --transition-fast: .2s ease;
  --transition-normal: .3s ease;
  --transition-slow: .45s ease;


  /* ==========================================================
     Z-INDEX
  ========================================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 500;

  /* NUEVO — el botón flotante de WhatsApp no es un modal; le damos su
     propio token semántico en vez de pedir prestado --z-modal.
     Mismo valor numérico que tenía antes (500), así que no cambia
     ningún comportamiento de stacking, solo el nombre. */
  --z-fab: 500;


  /* ==========================================================
     BREAKPOINTS
  ========================================================== */

  /*
    xs  <576px
    sm  ?576px
    md  ?768px
    lg  ?992px
    xl  ?1200px
  */

}



/* ==========================================================
   COMPONENTE SITE NAV
========================================================== */

.site-nav {
    font-family: var(--font-body-family);
    background: var(--background-white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
}

/* Compensa el espacio que deja el nav al salir del flujo normal (fixed).
   CAMBIO: en vez de un número mágico (118px / 72px) que había que
   "confiar" a ojo, se expresa como calc() de las mismas medidas que
   definen la altura real del nav (paddings de topbar + main + alto
   del logo). Si mañana cambia algún padding acá abajo, este valor
   se recalcula solo con el mismo cambio, en vez de quedar desincronizado.
   Sigue siendo una aproximación en CSS puro: la solución 100% exacta
   requeriría medir el nav en runtime (ResizeObserver) y no forma
   parte de este ajuste. */
.site-nav__spacer{
    /* topbar: 8px + 8px padding + ~16px de línea de texto (.85rem) */
    /* main:   14px + 14px padding + 48px alto del logo */
    height:calc((8px + 8px + 16px) + (14px + 14px + 48px));
}

@media (max-width:991.98px){
    .site-nav__spacer{
        /* mobile: sin topbar visible + main más compacto */
        height:calc(14px + 14px + 44px);
    }
}
/* ==========================================================
   TOPBAR
========================================================== */

.site-nav__topbar {
    background: var(--color-secondary-blue);
    color: var(--background-white);
    padding: 8px 0;
}
.site-nav__topbar-list{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:28px;
    margin:0;
    padding:0;
    list-style:none;
}

.site-nav__topbar-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
}
.site-nav__topbar a,
.site-nav__topbar i{
    color:inherit;
}

.site-nav__topbar a{
    transition:opacity var(--transition-fast);
}

.site-nav__topbar a:hover{
    opacity:.75;
    text-decoration:none;
}

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

.site-nav__main{
    padding:14px 0;
}

/* Ancla de posicionamiento: hace que el mega menu se centre respecto
   al container (mismo ancho/margenes que el resto del sitio) en vez
   de expandirse al ancho completo del viewport. */
.site-nav__main .container{
    position:relative;
}

.site-nav__logo{
    height:48px;
    width:auto;
    display:block;
}

/* ==========================================================
   LINKS
========================================================== */

.site-nav__link{
    padding:.5rem 1rem;
    border-radius:var(--radius-sm);
    color:var(--color-secondary-blue);
    font-size:1rem;
    font-weight:600;
    transition:var(--transition-fast);
}

.site-nav__link:hover{
    background:var(--background-gray);
    color:var(--color-secondary-gray);
    text-decoration:none;
}

/* Bootstrap agrega su propia flecha ::after a .dropdown-toggle;
   la quitamos para que quede solo nuestro ícono <i class="arrow"> */
.site-nav__link.dropdown-toggle::after{
    display:none;
}

.site-nav__link .arrow{
    margin-left:4px;
    font-size:.7rem;
    transition:transform var(--transition-fast);
}

.show>.site-nav__link .arrow{
    transform:rotate(180deg);
}

/* ==========================================================
   DROPDOWN
========================================================== */

.site-nav__dropdown-menu{
    border:0;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-dropdown);
    min-width:240px;
    padding:10px 0;
}

.site-nav__dropdown-item{
    display:block;
    padding:8px 20px;
    color:var(--color-secondary-blue);
    font-size:.9rem;
    transition:var(--transition-fast);
}

.site-nav__dropdown-item:hover{
    background:var(--background-gray);
    color:var(--color-secondary-gray);
    text-decoration:none;
}

.site-nav__dropdown-divider{
    border-top:1px solid var(--background-gray);
    margin:8px 0;
}

/* ==========================================================
   MEGA MENU
========================================================== */

.site-nav__mega{
    position:static;
}

.site-nav__mega-panel{
    width:100%;
    left:0;
    right:0;
    padding:24px;
    border:0;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-dropdown);
}

.site-nav__mega-panel .row{
    margin-left:0;
    margin-right:0;
}

.site-nav__mega-col{
    padding:0 28px;
}

.site-nav__mega-col+.site-nav__mega-col{
    border-left:1px solid var(--background-gray);
}

.site-nav__mega-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    color:var(--color-secondary-blue);
    font-size:.95rem;
    font-weight:600;
}

.site-nav__mega-title i{
    color:var(--color-secondary-blue);
}

.site-nav__mega-link{
    display:block;
    padding:6px 0;
    color:var(--color-secondary-gray);
    font-size:.88rem;
    transition:var(--transition-fast);
}

.site-nav__mega-link:hover{
    background: var(--background-gray);
    color: var(--color-secondary-gray);
    text-decoration: none;
}

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

.site-nav__right-group{
    display:flex;
    align-items:center;
    gap:16px;
}

.site-nav__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 26px;
    border:1px solid var(--color-primary-orange);
    border-radius:var(--radius-pill);
    background:var(--color-primary-orange);
    color:var(--background-white);
    font-family:var(--font-body-family);
    font-size:.85rem;
    font-weight:600;
    transition:var(--transition-fast);
}

.site-nav__cta:hover{
    background:var(--color-primary-orange-hover);
    border-color:var(--color-primary-orange-hover);
    color:var(--background-white);
    text-decoration:none;

}

.site-nav__login{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 18px;
    border:1px solid var(--color-secondary-blue);
    border-radius:var(--radius-pill);
    color:var(--color-secondary-blue);
    font-family:var(--font-body-family);
    font-size:.8rem;
    font-weight:600;
    transition:var(--transition-fast);
}

.site-nav__login:hover{
    background:var(--color-secondary-blue);
    color:var(--background-white);
    text-decoration:none;
}

/* ==========================================================
   CARRITO
========================================================== */

.site-nav__cart{
    position:relative;
    color:var(--color-secondary-blue);
    font-size:1.2rem;
}

.site-nav__cart:hover{
    color:var(--color-primary-orange);
}

.site-nav__cart-badge{
    position:absolute;
    top:-8px;
    right:-10px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    border-radius:50%;
    background:var(--color-primary-orange);
    color:var(--background-white);
    font-size:.65rem;
    font-weight:600;
}

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

.site-nav__toggler{
    border:0;
    padding:4px 8px;
}

.site-nav__toggler .bar{
    display:block;
    width:24px;
    height:2px;
    margin:5px 0;
    background:var(--color-secondary-blue);
}

@media (max-width:991px){

.navbar-nav .nav-item{
padding-left:20px;
padding-right:20px;
}

.site-nav__mega-panel{
box-shadow:none;
padding:16px 20px;

}

.site-nav__mega-col{
padding:0;
}

.site-nav__mega-col+.site-nav__mega-col{
border-left:0;
border-top:1px solid var(--background-gray);
margin-top:12px;
padding-top:12px;
}

.site-nav__right-group{
margin-top:16px;
margin-left:20px;
gap:12px;
}
}

/* ==========================================================
   ACCESIBILIDAD — Focus visible (NUEVO)
   --color-focus-ring existía en las variables pero no se usaba en
   ningún selector: no había ningún estado de foco visible en toda
   la navegación por teclado. Se agrega a todos los elementos
   interactivos del nav, footer y equipos-sugeridos usando
   :focus-visible (no interfiere con click de mouse, solo teclado).
========================================================== */

.site-nav__link:focus-visible,
.site-nav__dropdown-item:focus-visible,
.site-nav__mega-link:focus-visible,
.site-nav__cta:focus-visible,
.site-nav__login:focus-visible,
.site-nav__cart:focus-visible,
.site-nav__toggler:focus-visible,
.site-footer__link:focus-visible,
.site-footer__social-icon:focus-visible,
.site-footer__whatsapp-btn:focus-visible,
.c-hw__toggle:focus-visible,
.c-hw__provider-tab:focus-visible,
.c-btn:focus-visible,
.c-logo-pill:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px var(--color-focus-ring);
}

.site-nav__toggler:focus-visible{
    border-radius:var(--radius-sm);
}


/* ==========================================================
   COMPONENTS BASE
   Design System - Bsale Landings
   Sincronizado con la última versión de Chile.
========================================================== */

/* ==========================================================
   Section
========================================================== */

.c-section{
    padding:var(--section-padding-y) 0;
    /* Si esta sección es destino de un link ancla (#id), evita que el
       nav fijo la tape al hacer scroll — mismo alto que .site-nav__spacer. */
    scroll-margin-top:calc((8px + 8px + 16px) + (14px + 14px + 48px));
}

.c-section--white{
    background:var(--background-white);
}

.c-section--gray{
    background:var(--background-gray);
}

.c-section--light-blue{
    background:var(--background-light-blue);
}

/* Hero: reduce el padding superior a la mitad para que el usuario
   vea antes el contenido de servicios. Modifier aditivo. */
.c-section--hero{
    padding-top:calc(var(--section-padding-y) / 2);
}

@media (max-width:991.98px){
    .c-section--hero{
        padding-top:calc(var(--section-padding-y-tablet) / 2);
    }
}
@media (max-width:767.98px){
    .c-section--hero{
        padding-top:calc(var(--section-padding-y-mobile) / 2);
    }
}

/* Extra aire al final de página antes del footer. Aditivo. */
.c-section--pb-xl{
    padding-bottom:var(--space-3xl);
}

/* ==========================================================
   Section Header
========================================================== */

.c-section__header{
    margin-bottom:4rem;
}

.c-section__header--center{
    text-align:center;
}

.c-section__header--left{
    text-align:left;
}

/* ==========================================================
   Tag
========================================================== */

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

    padding:.55rem 1rem;

    margin-bottom:1rem;

    border-radius:var(--radius-pill);

    background:rgba(32,104,197,.08);

    color:var(--color-primary-blue);

    font-size:var(--font-size-small);

    font-weight:var(--font-weight-bold);

    text-transform:uppercase;

    letter-spacing:.05em;

}


/* ==========================================================
   Title
========================================================== */

.c-title{

    margin-bottom:1.25rem;

    font-family:var(--font-title-family);

    font-size:var(--font-size-display);

    font-weight:var(--font-weight-bold);

    line-height:var(--line-height-tight);

    color:var(--color-secondary-blue);
}

.c-title span{

    color:var(--color-primary-blue);

}

/* Jerarquía H1 (hero) vs H2 (título de sección). Selector por
   etiqueta sobre la misma clase .c-title: cero clases nuevas. */
h2.c-title{
    font-size:var(--font-size-heading);
    line-height:1.3;
}

/* ==========================================================
   Description
========================================================== */

.c-description{

    max-width:var(--content-width-md);

    color:var(--color-secondary-gray);

    font-size:var(--font-size-body-lg);

    line-height:var(--line-height-relaxed);

}

.c-section__header--center .c-description{
    margin-left:auto;
    margin-right:auto;
}

/* NUEVO — Link dentro de una descripción (ej. hero de México con link
   a integraciones). Sin esto heredaba el azul/subrayado por defecto
   del navegador. */
.c-description a{
    color:var(--color-primary-blue);
    font-weight:var(--font-weight-semibold);
}

.c-description a:hover{
    color:var(--color-secondary-blue);
}

/* Hero v2 — línea de categorías como texto (no badges), y fila de
   acciones con un solo CTA real + un link secundario. */
.c-hero-categories{
    max-width:var(--content-width-md);
    margin:0 auto 2rem;
    color:var(--color-gray-light);
    font-size:var(--font-size-small);
    font-weight:var(--font-weight-semibold);
    letter-spacing:.02em;
}

.c-hero-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:1.25rem;
    margin-bottom:1.5rem;
}

.c-hero-actions__link{
    color:var(--color-primary-blue);
    font-weight:var(--font-weight-semibold);
    text-decoration:underline;
    text-underline-offset:.2em;
}

.c-hero-actions__link:hover{
    color:var(--color-secondary-blue);
}

/* ==========================================================
   Button
========================================================== */

.c-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:var(--button-min-width);

    min-height:var(--button-height);

    padding:0 1.75rem;

    border-radius:var(--radius-pill);

    border:1px solid transparent;

    font-family:var(--font-body-family);

    font-size:var(--font-size-body);

    font-weight:var(--font-weight-semibold);

    text-decoration:none;

    transition:var(--transition-normal);

}

.c-btn:hover{

    text-decoration:none;

}


/* Primary */

.c-btn--primary{
    background:var(--color-primary-blue);

    border-color:var(--color-primary-blue);

    color:var(--color-white);

}
.c-btn--primary:hover{

    background:var(--color-white);

    border-color:var(--color-primary-blue);

    color:var(--color-primary-blue);

}


/* Secondary */

.c-btn--secondary{

    background:var(--color-white);

    border-color:var(--color-primary-blue);

    color:var(--color-primary-blue);

}
.c-btn--secondary:hover{

    background:var(--color-primary-blue);

    color:var(--color-white);

}

/* ==========================================================
   Card
========================================================== */

.c-card{

    height:100%;

    padding:var(--card-padding-lg);

    background:var(--color-white);

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

    border-radius:var(--radius-xl);

    transition:var(--transition-normal);

}

.c-card:hover{

    transform:translateY(-8px);

    border-color:var(--color-border-hover);

    box-shadow:var(--shadow-md);

}

.c-card__title{

    margin-bottom:1rem;

    font-family:var(--font-title-family);

    font-size:var(--font-size-body-lg);

    font-weight:var(--font-weight-bold);

    line-height:var(--line-height-tight);

    color:var(--color-secondary-blue);

}

.c-card__text{

    margin-bottom:1.25rem;

    color:var(--color-secondary-gray);

    font-size:var(--font-size-body);

    line-height:var(--line-height-normal);

}

/* Precio con más protagonismo */
.c-card__price{

    margin:0 0 .35rem;

    color:var(--color-secondary-blue);

    font-size:1.4rem;

    font-weight:var(--font-weight-extrabold);

}

.c-card__price-note{

    margin:0 0 1.5rem;

    color:var(--color-secondary-gray);

    font-size:var(--font-size-small);

    line-height:var(--line-height-normal);

}

.c-card__price:last-of-type{
    margin-bottom:1.5rem;
}


/* ==========================================================
   Icon
========================================================== */

.c-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:var(--icon-size-md);

    height:var(--icon-size-md);

    margin-bottom:var(--space-sm);

    border-radius:var(--radius-lg);

    background:var(--color-blue-100);

    color:var(--color-primary-blue);

    font-size:1.6rem;

}



/* ==========================================================
   Divider
========================================================== */

.c-divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}


/* ==========================================================
   Grid gap
========================================================== */

.c-section .row{
    row-gap:var(--grid-gap);
}


/* ==========================================================
   FAQ
========================================================== */

.c-faq{
    border-top: 1px solid var(--color-border);
}

.c-faq__item{
    border-bottom: 1px solid var(--color-border);
}

.c-faq__item > summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1.5rem 0;

    cursor: pointer;
    list-style: none;

    font-family: var(--font-title-family);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-blue);
}

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

/* NUEVO — permite envolver el texto de la pregunta en un <h3> real
   dentro del <summary> (mejor semántica/SEO: la pregunta queda como
   heading de verdad, no solo texto clickeable) sin que el h3 traiga
   su propio tamaño/peso/márgenes por defecto del navegador. */
.c-faq__item > summary h3{
    margin:0;
    font:inherit;
    color:inherit;
}

.c-faq__question-icon{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-primary-blue);
    transition: transform .2s ease;
}

.c-faq__item[open] > summary .c-faq__question-icon{
    transform: rotate(180deg);
}

.c-faq__answer{
    margin: 0 0 1.5rem;

    color: var(--color-secondary-gray);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
}

.c-faq__answer a{
    color: var(--color-primary-blue);
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:991.98px){

    .c-section{
        padding:var(--section-padding-y-tablet) 0;
    }

    .c-section__header{
        margin-bottom:3rem;
    }

    .c-title{
        font-size:2.2rem;
    }

    h2.c-title{
        font-size:1.8rem;
    }

}

@media (max-width:767.98px){

    .c-section{
        padding:var(--section-padding-y-mobile) 0;
    }

    .c-title{
        font-size:1.9rem;
    }

    h2.c-title{
        font-size:1.6rem;
    }

    .c-description{
        font-size:var(--font-size-body);
    }

    .c-btn{
        width:100%;
    }

}

/* ==========================================================
   COMPONENTE SITE FOOTER
   Reconstruido desde 0. Namespace: .site-footer
   Requiere: Bootstrap 4 (grid)
========================================================== */

.site-footer{
    padding:var(--space-xl) 0;
    background:var(--color-secondary-blue);
    color:var(--color-white);
}

/* ==========================================================
   TOP: logo + tagline
========================================================== */

.site-footer__top{
    padding-bottom:var(--space-lg);
    border-bottom:2px solid rgba(255,255,255,.35);
}

.site-footer__logo{
    width:220px;
    height:auto;
    display:block;
}

.site-footer__tagline{
    margin: 0;
    color: var(--color-white);
    /* CAMBIO: 2.1rem hardcodeado -> var(--font-size-heading) (2.25rem),
       el token más cercano de tu escala. */
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    text-align: end;
    /* CAMBIO: 10rem hardcodeado -> clamp() escalable. Antes solo estaba
       calibrado para un viewport puntual; entre 992px y ~1400px+
       (fuera del único breakpoint que trae este componente) se
       desalineaba. clamp() lo mantiene proporcional en todo ese rango. */
    padding-left: clamp(2rem, 15vw, 10rem);
}

/* ==========================================================
   DIVIDER (entre contacto y descarga app)
========================================================== */

.site-footer__divider--sm{
    width:100%;
    height:1px;
    margin-left:0;
    margin-bottom:var(--space-sm);
    background:rgba(255,255,255,.3);
}

/* ==========================================================
   ASIDE (Contacto + Descarga app, pegado al borde derecho)
========================================================== */

.site-footer__aside{
    width: 100%;
    max-width: none;
    margin-left: 0;
    text-align: end;
}

.site-footer__aside-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-sm);
    white-space: nowrap;
}

/* ==========================================================
   COLUMNAS DE LINKS
========================================================== */

.site-footer__col{
    padding-top:var(--space-xl);
}

.site-footer__col-title{
    margin-bottom:var(--space-sm);
    color:var(--color-white);
    font-size:var(--font-size-body-lg);
    font-weight:var(--font-weight-bold);
}

.site-footer__list{
    margin:0;
    padding:0;
    list-style:none;
}

.site-footer__list li{
    margin-bottom:.35rem;
}

.site-footer__link{
    color:var(--color-white);
    transition:opacity var(--transition-fast);
}

.site-footer__link:hover{
    color:var(--color-white);
    opacity:.5;
    text-decoration:none;
}

.site-footer__contact-icon{
    margin-right:.5rem;
    color:var(--color-white);
}

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

.site-footer__social{
    gap:6px;
    margin-bottom:.5rem;
}

.site-footer__social-icon{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--color-white);
    color:var(--color-secondary-blue);
    font-size:1.3rem;
    transition:var(--transition-fast);
}

.site-footer__social-icon:hover{
    color:var(--color-primary-blue);
    text-decoration:none;
}

/* ==========================================================
   WHATSAPP FLOTANTE
========================================================== */

.site-footer__whatsapp{
    position:fixed;
    right:35px;
    bottom:15px;
    /* CAMBIO: var(--z-modal) -> var(--z-fab). Mismo valor numérico
       (500), pero el nombre ahora describe lo que es (un FAB), no
       "modal". Cero cambio de comportamiento visual. */
    z-index:var(--z-fab);
}

.site-footer__whatsapp-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:.65rem 1.5rem;
    border-radius:var(--radius-pill);
    background:#22C35E;
    color:var(--color-white);
    font-family:var(--font-body-family);
    font-size:var(--font-size-body);
    font-weight:var(--font-weight-bold);
    box-shadow:var(--shadow-md);
    transition:var(--transition-fast);
}

.site-footer__whatsapp-btn i{
    font-size:1.3rem;
}

.site-footer__whatsapp-btn:hover{
    background:#1CA750;
    color:var(--color-white);
    text-decoration:none;
    transform:translateY(-2px);
}

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

@media (max-width:991.98px){

    .site-footer__top{
        text-align:center;
    }

    .site-footer__tagline{
        max-width:none;
        padding-left:0;
        text-align:center;
        font-size:1.6rem;
        margin-top:var(--space-sm);
    }

    .site-footer__logo{
        margin:0 auto;
    }

    .site-footer__aside{
        max-width:none;
        margin-left:0;
        text-align:left;
    }

    .site-footer__aside-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .site-footer__col{
        padding-top:var(--space-lg);
    }

    .site-footer__divider--sm{
        margin-bottom:var(--space-md);
    }
}

@media (max-width:575.98px){

    .site-footer__logo{
        width:170px;
    }
}




/* ==========================================================
   COMPONENTE: EQUIPOS SUGERIDOS
   Extiende variables.css / components-base.css
========================================================== */

/* ----------------------------------------------------------
   Portada / Hero (sin cambios)
---------------------------------------------------------- */
 
.c-banner{
    background:linear-gradient(135deg, var(--color-blue-50) 0%, var(--background-white) 60%);
    overflow:hidden;
}
 
.c-banner__grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:var(--space-2xl);
    align-items:center;
}
 
@media (max-width:991.98px){
    .c-banner__grid{
        grid-template-columns:1fr;
    }
}
 
.c-banner__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-sm);
    margin-top:var(--space-md);
}
 
.c-banner__media{
    position:relative;
    text-align:center;
}
 
.c-banner__media::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:86%;
    padding-bottom:86%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:var(--color-secondary-orange);
    opacity:.5;
    z-index:0;
}
 
.c-banner__image{
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    display:block;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}
 
@media (max-width:991.98px){
    .c-banner{
        text-align:center;
    }
    .c-banner .c-description{
        margin-left:auto;
        margin-right:auto;
    }
    .c-banner__actions{
        justify-content:center;
    }
    .c-banner__media{
        margin-top:var(--space-xl);
    }
}
 
/* ----------------------------------------------------------
   Franja "Proveedores de confianza" (sin cambios)
---------------------------------------------------------- */
 
.c-providers{
    background:var(--background-light-blue);
    text-align:center;
}
 
.c-providers .c-title{
    color:var(--color-secondary-blue);
    margin-left:auto;
    margin-right:auto;
}
 
.c-providers .c-description{
    color:var(--color-secondary-gray);
    margin-left:auto;
    margin-right:auto;
}
 
.c-providers__logos{
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:var(--space-lg);
}
 
.c-logo-pill{
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:1rem 1.75rem;
    font-family:var(--font-title-family);
    font-weight:var(--font-weight-bold);
    color:var(--color-secondary-blue);
    text-decoration:none;
    display:inline-flex;
    transition:var(--transition-fast);
}
 
.c-logo-pill:hover{
    border-color:var(--color-border-hover);
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}
 
 
/* ==========================================================
   RECOMENDACIONES — Bento asimétrico
   Reemplaza por completo el antiguo grid de tarjetas idénticas.
========================================================== */
 
.c-hw{
    background:var(--background-white);
}
 
.c-hw__layout{
    display:grid;
    grid-template-columns:minmax(260px,.85fr) 1.7fr;
    gap:var(--space-2xl);
    align-items:start;
}
 
/* ----------------------------------------------------------
   Panel izquierdo — fijo (sticky) mientras el bento scrollea
---------------------------------------------------------- */
 
.c-hw__intro{
    position:sticky;
    top:140px;
    padding:6rem 0 2rem;
}
 
.c-hw__intro-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:var(--font-size-small);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--color-primary-blue);
    margin-bottom:1.5rem;
}
 
.c-hw__intro-title{
    font-family:var(--font-title-family);
    /* CAMBIO: 900 hardcodeado -> var(--font-weight-extrabold) (800).
       900 no existe en tu escala tipográfica y, si esa variante
       específica de Inter no está cargada, el navegador la simula
       con "fake bold" (peor render, más CLS al cargar la fuente real). */
    font-weight:var(--font-weight-extrabold);
    font-size:clamp(2.4rem,4vw,3.4rem);
    line-height:.98;
    letter-spacing:-.02em;
    color:var(--color-secondary-blue);
    margin:0 0 1.5rem;
}
 
.c-hw__intro-copy{
    color:var(--color-secondary-gray);
    font-size:var(--font-size-body-lg);
    line-height:var(--line-height-relaxed);
    max-width:34ch;
    margin-bottom:2rem;
}
 
/* ----------------------------------------------------------
   Grid bento — 4 columnas, celdas con distinto peso visual
   según cuánto espacio real ocupa ese equipo / cuántas
   opciones de compra tiene.
---------------------------------------------------------- */
 
.c-hw__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
    align-items:start;
}
 
.c-hw__cell{
    grid-column:span 2;
    border-radius:28px;
    padding:2rem;
    box-shadow:0 20px 45px -25px rgba(23,56,104,.35);
    transition:box-shadow var(--transition-normal), transform var(--transition-normal);
}
 
.c-hw__cell:hover{
    box-shadow:0 28px 60px -25px rgba(23,56,104,.4);
    transform:translateY(-2px);
}
 
.c-hw__cell--hero{
    grid-column:span 4;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    align-items:center;
    background:var(--color-blue-50);
}
 
/* CAMBIO: los selectores por ID (#impresora-termica, #lector, etc.)
   acoplaban el estilo a IDs específicos del HTML de esta página,
   sin poder reutilizarse en otra landing con el mismo componente.
   Se reemplazan por modifiers de clase, en línea con el resto del
   design system (todo por clase, nunca por ID).
   OJO: esto requiere que el HTML de "Equipos Sugeridos" agregue
   estas clases a cada .c-hw__cell (puede convivir con el id= si ese
   id se usa además como ancla de navegación interna). Cuando me
   pases ese componente lo dejo aplicado en el HTML también. */
.c-hw__cell--impresora-termica{ background:var(--color-blue-50); }
.c-hw__cell--lector{ background:var(--color-blue-100); }
.c-hw__cell--cajon{ background:var(--background-light-blue); }
.c-hw__cell--pc{ background:var(--color-white); }
.c-hw__cell--etiquetas{ background:var(--background-gray); }
.c-hw__cell--rollo{ background:var(--color-blue-100); }

/* Compatibilidad temporal: si el HTML todavía no trae las clases de
   arriba, esto mantiene el mismo resultado visual mientras se migra. */
#impresora-termica.c-hw__cell{ background:var(--color-blue-50); }
#lector.c-hw__cell{ background:var(--color-blue-100); }
#cajon.c-hw__cell{ background:var(--background-light-blue); }
#pc.c-hw__cell{ background:var(--color-white); }
#etiquetas.c-hw__cell{ background:var(--background-gray); }
#rollo.c-hw__cell{ background:var(--color-blue-100); }
 
.c-hw__meta{
    display:block;
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-bold);
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--color-primary-blue);
    margin-bottom:.5rem;
}
 
.c-hw__cell-title{
    font-family:var(--font-title-family);
    /* CAMBIO: 800 hardcodeado -> var(--font-weight-extrabold), incluso
       siendo el mismo valor numérico: si el token cambia a futuro,
       este selector queda sincronizado en vez de quedarse atrás. */
    font-weight:var(--font-weight-extrabold);
    font-size:1.4rem;
    line-height:1.15;
    color:var(--color-secondary-blue);
    margin:0 0 .6rem;
}
 
.c-hw__cell--hero .c-hw__cell-title{
    font-size:1.9rem;
}
 
.c-hw__cell-copy{
    color:var(--color-secondary-gray);
    font-size:var(--font-size-small);
    line-height:var(--line-height-relaxed);
    margin-bottom:.75rem;
}
 
.c-hw__cell-media{
    margin-bottom:1.25rem;
}
 
.c-hw__cell-media img{
    width:100%;
    max-width:230px;
    height:auto;
    display:block;
}
 
.c-hw__cell--hero .c-hw__cell-media img{
    max-width:100%;
}
 
/* Tips: mismo formato de guion que antes, mas compacto */
.c-hw__tips{
    list-style:none;
    margin:0 0 1rem;
    padding:0;
}
 
.c-hw__tips li{
    color:var(--color-secondary-gray);
    font-size:var(--font-size-xs);
    line-height:var(--line-height-normal);
    margin-bottom:.4rem;
}
 
/* Incluye: chips del Kit completo */
.c-hw__bundle{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:1.25rem;
}
 
.c-hw__bundle-chip{
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
    padding:.4rem .9rem;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.6);
    color:var(--color-secondary-blue);
}
 
/* ----------------------------------------------------------
   Toggle "Ver proveedores" — controla un .collapse de Bootstrap
---------------------------------------------------------- */
 
.c-hw__toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:none;
    border:none;
    padding:0;
    font-family:var(--font-body-family);
    font-weight:var(--font-weight-bold);
    font-size:var(--font-size-small);
    color:var(--color-secondary-blue);
    cursor:pointer;
}
 
.c-hw__toggle-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--color-secondary-blue);
    color:var(--color-white);
    font-size:.8rem;
    line-height:1;
    transition:transform var(--transition-fast);
}
 
.c-hw__toggle[aria-expanded="true"] .c-hw__toggle-icon{
    transform:rotate(45deg);
}
 
/* ----------------------------------------------------------
   Panel expandido — controlado por equipos-sugeridos.js
   (clase .is-open, sin depender de Bootstrap)
---------------------------------------------------------- */
 
.c-hw__panel{
    display:none;
}
 
.c-hw__panel.is-open{
    display:block;
}
 
.c-hw__panel-inner{
    padding-top:1.25rem;
    margin-top:1.25rem;
    border-top:1px solid rgba(51,81,122,.12);
}
 
/* Tabs de proveedor: estilo subrayado, no pills — botones simples,
   sin marcado de Bootstrap, controlados por equipos-sugeridos.js. */
.c-hw__provider-tabs{
    display:flex;
    gap:1.1rem;
    flex-wrap:wrap;
    margin-bottom:1rem;
    border-bottom:1px solid rgba(51,81,122,.12);
}
 
.c-hw__provider-tab{
    background:none;
    border:none;
    padding:0 0 .6rem;
    font-family:inherit;
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
    color:var(--color-gray-light);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    cursor:pointer;
    transition:var(--transition-fast);
}
 
.c-hw__provider-tab:hover{
    color:var(--color-secondary-blue);
}
 
.c-hw__provider-tab.is-active{
    color:var(--color-primary-orange-hover);
    border-bottom-color:var(--color-primary-orange);
}
 
/* Lista de productos: manifiesto, no card-grid.
   Oculta por defecto, visible solo cuando esta activa. */
.c-hw__product-list{
    display:none;
    flex-direction:column;
}
 
.c-hw__product-list.is-active{
    display:flex;
}
 
.c-hw__product{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    padding:.65rem 0;
    border-bottom:1px solid rgba(51,81,122,.08);
    font-size:var(--font-size-small);
    color:var(--color-secondary-blue);
    font-weight:var(--font-weight-semibold);
}
 
.c-hw__product:last-child{
    border-bottom:none;
}
 
.c-hw__product span{
    flex-shrink:0;
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
    color:var(--color-primary-blue);
    transition:margin var(--transition-fast);
}
 
.c-hw__product span::after{
    content:"\2192";
    margin-left:.35em;
}
 
.c-hw__product:hover span{
    margin-left:3px;
}
 
/* Producto único (kit, etiquetas) sin tabs */
.c-hw__single{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    padding:.75rem 1rem;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.55);
    font-size:var(--font-size-small);
    font-weight:var(--font-weight-semibold);
    color:var(--color-secondary-blue);
}
 
.c-hw__single span{
    flex-shrink:0;
    font-size:var(--font-size-xs);
    color:var(--color-primary-blue);
}
 
.c-hw__single span::after{
    content:"\2192";
    margin-left:.35em;
}
 
/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
 
@media (max-width:991.98px){
 
    .c-hw__layout{
        grid-template-columns:1fr;
    }
 
    .c-hw__intro{
        position:static;
        padding:3rem 0 2rem;
        text-align:center;
    }
 
    .c-hw__intro-copy{
        max-width:none;
        margin-left:auto;
        margin-right:auto;
    }
 
    .c-hw__grid{
        grid-template-columns:1fr;
    }
 
    .c-hw__cell,
    .c-hw__cell--hero{
        grid-column:span 1;
    }
 
    .c-hw__cell--hero{
        grid-template-columns:1fr;
    }
}
 
@media (max-width:575.98px){
 
    .c-hw__cell{
        padding:1.5rem;
    }
}