/* ==========================================================
   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;


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

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

}

/* ==========================================================
   COMPONENTS BASE
   Design System - Bsale Landings
========================================================== */

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

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

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

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

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

/* NUEVO — Hero: reduce el padding superior a la mitad para que el
   usuario vea antes el contenido de servicios (feedback punto 1).
   Modifier aditivo: no cambia .c-section para el resto del sitio. */
.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);
    }
}

/* NUEVO — Extra aire al final de página antes del footer (feedback punto 8).
   Aditivo: solo se aplica donde se agregue explícitamente esta clase. */
.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);

    /* CAMBIO: extrabold (800) -> bold (700). El display a 800 se veía
       muy pesado, sobre todo en títulos de 2 líneas dentro de las cards. */
    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);

}

/* CAMBIO NUEVO: jerarquía H1 (hero) vs H2 (título de sección).
   Selector por etiqueta sobre la MISMA clase .c-title -> cero clases
   nuevas, cero cambios de HTML. Usa --font-size-heading, que ya
   existía en tus variables pero no se aplicaba en ningún selector. */
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);

}

/* CAMBIO NUEVO: dentro de un header centrado, la descripción hereda
   text-align:center de .c-section__header--center pero no queda
   centrada como bloque porque max-width no trae margin:auto. */
.c-section__header--center .c-description{
    margin-left:auto;
    margin-right:auto;
}

/* ==========================================================
   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);

}

/* NUEVO — Precio con más protagonismo (feedback punto 3).
   Antes vivía en <p> con utilidades ad-hoc (f_400 f_size_16 f_600),
   sin relación visual entre sí ni con el resto del design system. */
.c-card__price{

    margin:0 0 .35rem;

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

    font-size:1.4rem;

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

}

/* Línea secundaria del precio (ej. "0.5 UF + IVA / mes", "SIN COSTO") */
.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);

}

/* Cuando el precio es la última pieza de info antes del botón (sin nota
   secundaria), igual necesita el mismo respiro antes del c-btn. */
.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 (NUEVO)
   --grid-gap ya existía en las variables pero no se usaba en
   ningún selector. Se aplica acá, acotado a filas dentro de
   .c-section, para no salir a modificar .row de forma global
   en todo el sitio (Bootstrap se usa fuera de estos componentes
   también). Con esto ya no hace falta el mb-4/mb-30 manual que
   se venía agregando a mano en cada columna de las cards.
========================================================== */

.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;
}

.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%;
    }

}