/* ==========================================================
   VARIABLES GLOBALES
   Design System - Bsale Landings
   (v2 — actualizado por Danae: .c-tag rediseñada, nuevos
   componentes c-link-arrow / c-note / c-callout / c-video-pill /
   c-split-card / c-cards-grid--2up, --font-size-display 2.5rem,
   etc.)
========================================================== */

: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;
  --color-star: #F5A623;

  /* 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.5rem;
  --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;
  --content-media-ratio: 487 / 325;

  /* 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;
  --card-padding-sm: 1.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
  */

}

/* ==========================================================
   Promo Bar (nueva, aditiva)
   Franja de aviso de ancho completo, para ubicar entre el nav y
   el primer <section> de la página (ej. sobre el hero/banner).
========================================================== */
.c-promo-bar{
    padding: .75rem 0;
    background: var(--color-secondary-orange);
    text-align: center;
}

.c-promo-bar__text{
    margin: 0;
    color: var(--color-secondary-blue);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

.c-promo-bar__text strong{
    font-weight: var(--font-weight-bold);
}

.c-promo-bar__icon{
    color: var(--color-primary-orange);
}

.c-promo-bar__link{
    color: var(--color-secondary-blue);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

.c-promo-bar__link:hover{
    color: var(--color-primary-blue);
}

@media (max-width: 575.98px){
    .c-promo-bar{
        padding: .6rem var(--space-sm);
        margin-top: 2rem;
    }

    .c-promo-bar__text{
        font-size: var(--font-size-xs);
    }
}

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

.site-nav__spacer{
    height:118px;
}

@media (max-width:991.98px){
    .site-nav__spacer{
        height:72px;
    }
}
.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;
}

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

.site-nav__main .container{
    position:relative;
}

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

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

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

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

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

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

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

.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){
    .site-nav__mega-panel{
        box-shadow:none;
        padding:16px 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;
        gap:12px;
    }
}

/* ==========================================================
   COMPONENTE SITE FOOTER
========================================================== */

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

.site-footer__top{
    padding-bottom:var(--space-lg);
    border-bottom:2px solid var(--color-white);
}

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

.site-footer__tagline{
    margin: 0;
    color: var(--color-white);
    font-size: 2.1rem;
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    text-align: end;
    padding-left: 10rem;
}

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

.site-footer__aside{
    max-width: 340px;
    margin-left: auto;
    text-align: end;
}

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

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

.site-footer__col-title{
    max-width:151px;
    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);
}

.site-footer__social{
    display:inline-flex;
    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:1rem;
    transition:var(--transition-fast);
}

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

.site-footer__whatsapp{
    position:fixed;
    right:35px;
    bottom:15px;
    z-index:var(--z-modal);
}

.site-footer__whatsapp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px; /* PageSpeed: área táctil mínima recomendada */
    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);
}

/* ==========================================================
   WhatsApp — Contraste accesible
========================================================== */
.site-footer__whatsapp-btn--accessible{
    background:#0E6B39;
}

.site-footer__whatsapp-btn--accessible:hover{
    background:#0B5A2F;
}

.site-footer__whatsapp-btn--on-dark{
    background:var(--color-white);
    color:#0E6B39;
}

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

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

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

/* ==========================================================
   COMPONENTS BASE
========================================================== */

.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);
}
.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);
    }
}
.c-section--pb-xl{
    padding-bottom:var(--space-3xl);
}

/* ==========================================================
   Section — Degradé claro
========================================================== */
.c-section--degr_light {
    --bleed: min(calc((100vw - min(1180px, 92vw)) / 2), 160px);
    background: radial-gradient(1000px 520px at 82% 0%, rgba(105, 159, 221, .20), transparent 64%), radial-gradient(700px 420px at 2% 100%, rgba(255, 92, 26, .07), transparent 60%), #fff;
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(48px, 5vw, 72px);
    overflow: hidden;
}

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

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

.c-section__header--left{
    text-align:left;
}
.c-banner{
    background:linear-gradient(135deg, var(--color-blue-50) 0%, var(--background-white) 60%);
    overflow:hidden;
}
.c-banner__note{
    display:flex;
    align-items:baseline;
    gap:.4rem;
    flex-wrap:wrap;
    margin:0 0 var(--space-xs);
    padding:.5rem .9rem;
    border-radius:var(--radius-md);
    background:var(--color-blue-100);
    color:var(--color-secondary-blue);
    font-size:var(--font-size-small);
}

.c-banner__note strong{
    color:var(--color-primary-blue);
}

@media (max-width:991.98px){
    .c-banner__note{
        justify-content:center;
    }
}

.c-banner__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-sm);
    margin-top:var(--space-md);
}

/* ==========================================================
   Actions — Center
========================================================== */
.c-actions--center{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:var(--space-sm);
    margin-top:var(--space-md);
}

.c-banner__media{
    position:relative;
    text-align:center;
}

.c-banner__image{
    position:relative;
    z-index:1;
    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);
    }
}

/* ==========================================================
   Banner Media — Bleed
========================================================== */
.c-banner__media--bleed{
    margin-right: calc(var(--bleed) * -1 + 18px);
}

@media (max-width:991.98px){
    .c-banner__media--bleed{
        margin-right: 0;
    }
}

.c-tag {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-pill);
    background: rgb(248 248 248 / 8%);
    color: var(--color-secondary-gray);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    letter-spacing: .02em;
    border: 1px solid var(--color-gray-light);
}

.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--sm{
    font-size: 1.75rem;
    line-height: 1.3;
}
.c-title span{
    color:var(--color-primary-blue);
}

h2.c-title{
    font-size:var(--font-size-heading);
    line-height:1.3;
}

.c-description{
    max-width:var(--content-width-md);
    color:var(--color-secondary-gray);
    font-size:var(--font-size-body);
    line-height:var(--line-height-relaxed);
}

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

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

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

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

.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_h{
    height:100%;
    padding:var(--card-padding-sm);
    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-blue);
    font-size:var(--font-size-body);
    line-height:var(--line-height-normal);
}
.c-card--compact{
    padding: var(--card-padding);
}

.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;
}
.c-card__badge{
position: relative;
    top: -1.5rem;
    left: -4.5rem;
    padding: .8rem 2.1rem .95rem;
    background: var(--color-secondary-blue);
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: .06em;
    box-shadow: 0 8px 16px -4px rgba(23, 56, 104, .35);
    border-radius: 25px;
}


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

.c-icon svg{
    width: 28px;
    height: 28px;
}
.c-icon--sm{
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    font-size: 1.2rem;
}

.c-icon--sm svg{
    width: 22px;
    height: 22px;
}

/* ==========================================================
   Icon — Large
========================================================== */
.c-icon--lg{
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    font-size: 2rem;
}

.c-icon--lg svg{
    width: 36px;
    height: 36px;
}

.c-divider{
    width:100%;
    height:1px;
    background:var(--color-border);
}

/* ==========================================================
   Container — Wide (nueva, aditiva)
========================================================== */
.container--wide{
    max-width: min(1180px, 92vw);
}

/* ==========================================================
   Cards Grid — 4 columnas (nueva, aditiva)
========================================================== */
.c-cards-grid--4up{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 991.98px){
    .c-cards-grid--4up{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px){
    .c-cards-grid--4up{
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Cards Grid — 3 columnas (nueva, aditiva)
========================================================== */
.c-cards-grid--3up{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 991.98px){
    .c-cards-grid--3up{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px){
    .c-cards-grid--3up{
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Reviews — Estrellas, resumen de calificación y tarjeta de
   reseña
========================================================== */
.c-stars{
    display:inline-flex;
    align-items:center;
    gap:2px;
}
.c-stars .c-star{
    width:16px;
    height:16px;
    fill:var(--color-star);
}
.c-stars .c-star--empty{
    fill:var(--color-border);
}

.c-rating-summary{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:var(--space-sm);
    font-size:var(--font-size-small);
    color:var(--color-secondary-gray);
}
.c-rating-summary__value{
    font-size:var(--font-size-body-lg);
    font-weight:var(--font-weight-semibold);
    color:var(--color-secondary-blue);
}

.c-review__stars{
    margin-bottom:var(--space-xs);
}
.c-review__quote{
    margin-bottom: var(--space-sm);
    color: var(--color-secondary-gray);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}
.c-review__author{
    display:flex;
    align-items:center;
    gap:11px;
}
.c-review__author-name{
    display:block;
    font-size:var(--font-size-small);
    font-weight:var(--font-weight-semibold);
    color:var(--color-secondary-blue);
}
.c-review__author-role{
    display:block;
    font-size:var(--font-size-xs);
    color:var(--color-secondary-gray);
}

.c-avatar{
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--color-blue-100);
    color:var(--color-secondary-blue);
    font-size:var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
}

/* ==========================================================
   Card — Accent Hover
========================================================== */
.c-card--accent-hover{
    position: relative;
    overflow: hidden;
}
.c-card--accent-hover::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-primary-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-normal);
}
.c-card--accent-hover:hover::before{
    transform: scaleX(1);
}

/* ==========================================================
   Card — Featured (nueva, aditiva)
========================================================== */
.c-card--feat{
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-white) 60%);
    border-color: var(--color-border-hover);
}

.c-card--feat .c-icon{
    margin-bottom: 0;
}

@media (max-width: 767.98px){
    .c-card--feat{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================
   Check List (nueva, aditiva)
   Lista con ícono de check en verde (usa el token semántico
   --color-success).
========================================================== */
.c-check-list{
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.c-check-list li{
    display: flex;
    align-items: baseline;
    gap: .6rem;
    color: var(--color-secondary-gray);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

.c-check-list__icon{
    flex-shrink: 0;
    color: var(--color-success);
    font-size: .85em;
}

/* ==========================================================
   Feature Row — texto + imagen alternados
========================================================== */

.c-feature-row{
    padding: var(--space-2xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.c-feature-row:first-of-type{
    padding-top: 0;
}

.c-feature-row:last-of-type{
    padding-bottom: 0;
    border-bottom: 0;
}


.c-feature-row__list{
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.c-feature-row__list li{
    display: flex;
    align-items: baseline;
    gap: .75rem;
    color: var(--color-secondary-gray);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}

.c-feature-row__num{
    flex-shrink: 0;
    font-family: var(--font-title-family);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
}

/* Modificador para cuando el número necesita más peso visual
   que el tamaño de texto normal. */

.c-feature-row__num--lg{
    min-width: 2.2rem;
    font-size: 1.75rem;
    line-height: 1.1;
}
.c-feature-row--rev .row{
    flex-direction: row-reverse;
}

@media (max-width: 991.98px){
    .c-feature-row--rev .row{
        flex-direction: column;
    }
}

.c-feature-row__media{
    background: linear-gradient(150deg, #F4F8FD, #FFF6F2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: clamp(18px, 2.4vw, 30px);
}

/* ==========================================================
   Media Fluid
========================================================== */
.c-media-fluid{
    width:100%;
    height:auto;
    display:block;
}

.c-section .row{
    row-gap:var(--grid-gap);
}
.c-section__block{
    margin-top: var(--space-3xl);
}
.c-faq{
    border-top: 1px solid var(--color-border);
}

/* ==========================================================
   FAQ — Narrow
========================================================== */
.c-faq--narrow{
    max-width: var(--content-width-md);
    margin: 0 auto;
}

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

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

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

.c-faq-item__question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:1.25rem 0;
    background:none;
    border:none;
    text-align:left;
    font-family:var(--font-title-family);
    font-size:1.1rem;
    font-weight:var(--font-weight-bold);
    color:var(--color-secondary-blue);
    cursor:pointer;
}

.c-faq-item__question:focus{
    outline:none;
    box-shadow:0 0 0 3px var(--color-focus-ring);
}

.c-faq-item__icon{
    flex-shrink:0;
    margin-left:var(--space-md);
    color:var(--color-primary-blue);
    font-size:.9rem;
    transition:var(--transition-fast);
}

.c-faq-item__question[aria-expanded="true"] .c-faq-item__icon{
    transform:rotate(180deg);
}

.c-faq-item__answer{
    padding:0 0 1.25rem;
    margin-bottom:0;
    max-width:var(--content-width-md);
    color:var(--color-secondary-gray);
    font-size:var(--font-size-body);
    line-height:var(--line-height-normal);
}

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

}

.c-video-modal{
    position:fixed;
    inset:0;
    z-index:var(--z-modal);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-md);
}

.c-video-modal[hidden]{
    display:none;
}

.c-video-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.85);
}

.c-video-modal__dialog{
    position:relative;
    width:100%;
    max-width:960px;
    aspect-ratio:16/9;
    background:#000;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    animation:cVideoModalIn .2s ease;
}

.c-video-modal__frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.c-video-modal__frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.c-video-modal__close{
    position:absolute;
    top:-44px;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:var(--color-white);
    font-size:1.1rem;
    transition:var(--transition-fast);
}

.c-video-modal__close:hover{
    background:rgba(255,255,255,.3);
}

@keyframes cVideoModalIn{
    from{ opacity:0; transform:scale(.96); }
    to{ opacity:1; transform:scale(1); }
}

body.c-video-modal-open{
    overflow:hidden;
}

@media (max-width:575.98px){
    .c-video-modal__close{
        top:-40px;
        width:32px;
        height:32px;
        font-size:1rem;
    }
}

.c-video-trigger{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    width:100%;
    border-radius:var(--radius-xl);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    background:#000;
}

.c-video-trigger__thumb{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.c-video-trigger__play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:var(--color-primary-orange);
    font-size:1.4rem;
    padding-left:4px;
    transition:var(--transition-fast);
    border: 1px solid var(--color-primary-orange);
}

.c-video-trigger:hover .c-video-trigger__play{
    background:var(--color-white);
    transform:translate(-50%,-50%) scale(1.08);
}

@media (max-width:575.98px){

    .c-video-trigger__play{
        width:56px;
        height:56px;
        font-size:1.1rem;
    }
}

.c-steps{
    position:relative;
    margin-top:var(--space-xl);
}

.c-steps::before{
    content:"";
    position:absolute;
    top:88px;
    left:12.5%;
    right:12.5%;
    height:1px;
    background:var(--color-border);
    z-index:0;
}

.c-steps__step{
    position:relative;
    padding-top:56px;
}

.c-steps__number{
    position:absolute;
    top:0;
    left:0;
    right:0;
    font-family:var(--font-title-family);
    font-size:3.5rem;
    font-weight:var(--font-weight-extrabold);
    line-height:1;
    color:var(--color-primary-blue);
    z-index:0;
    margin-top: -2rem;
}

.c-steps__icon{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    align-items:center;
    width:var(--icon-size-md);
    height:var(--icon-size-md);
    margin:-20px auto var(--space-sm);
    background:var(--color-white);
    border:2px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    color:var(--color-primary-blue);
    font-size:1.4rem;
}

.c-steps--simple .c-steps__step{
    padding-top: 0;
}

.c-steps--simple .c-steps__number{
    display: none;
}

.c-steps--simple .c-steps__icon{
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-sm);
    background: var(--color-primary-blue);
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: none;
    color: var(--color-white);
    font-family: var(--font-title-family);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
}

.c-steps--simple.c-steps::before{
    top: 20px;
}

@media (max-width:991.98px){

    .c-steps::before{
        display:none;
    }

    .c-steps__step {
        margin-top: 3rem;
    }
}

/* ==========================================================
   Roadmap — Timeline vertical de pasos
========================================================== */
.c-roadmap{
    position: relative;
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
    max-width: var(--content-width-md);
    margin-left: auto;
    margin-right: auto;
}

.c-roadmap__stop{
    position: relative;
    display: flex;
    gap: var(--space-md);
    padding-bottom: var(--space-xl);
}

.c-roadmap__stop:last-child{
    padding-bottom: 0;
}

.c-roadmap__stop:not(:last-child)::before{
    content: "";
    position: absolute;
    top: var(--icon-size-md);
    left: calc(var(--icon-size-md) / 2 - .5px);
    width: 1px;
    height: calc(100% - var(--icon-size-md));
    background: var(--color-border);
}

.c-roadmap__node{
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary-blue);
    font-size: 1.4rem;
}

.c-roadmap__node--goal{
    background: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
    color: var(--color-white);
}

.c-roadmap__panel{
    flex: 1;
    padding-top: .3rem;
}

.c-roadmap__panel--goal{
    padding: var(--card-padding-sm);
    background: var(--color-white);
    border: 1px solid rgba(22,163,74,.18);
    border-radius: var(--radius-lg);
}

.c-roadmap__num{
    display: block;
    margin-bottom: .35rem;
    color: var(--color-primary-blue);
    font-family: var(--font-title-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.c-roadmap__title{
    margin-bottom: .5rem;
    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-roadmap__text{
    margin: 0;
    color: var(--color-secondary-gray);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}

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

.c-roadmap__link:hover{
    text-decoration: underline;
}

.c-roadmap__chip{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .6rem;
    padding: .3rem .75rem;
    border-radius: var(--radius-pill);
    background: var(--color-blue-100);
    color: var(--color-primary-blue);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 575.98px){
    .c-roadmap__stop{
        gap: var(--space-sm);
    }
}
/* ^ FIX: acá faltaba la llave de cierre de este @media — por eso
   .c-qa, .c-quick-answer y .contact_form_box quedaban atrapados
   dentro de "max-width: 575.98px" y no se veían en desktop. */

.c-qa{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-xl);
}

.c-qa + .c-qa{
    margin-top:var(--space-xl);
}

.c-qa--single{
    grid-template-columns:1fr;
}

.c-qa__question{
    margin-bottom:.5rem;
    font-family:var(--font-title-family);
    font-size:1.35rem;
    font-weight:var(--font-weight-extrabold);
    color:var(--color-secondary-blue);
}

.c-qa__answer{
    margin-bottom:0;
    color:var(--color-secondary-gray);
    font-size:var(--font-size-body);
    line-height:var(--line-height-normal);
}

.c-qa__link{
    color:var(--color-primary-blue);
    font-weight:var(--font-weight-semibold);
    transition:var(--transition-fast);
}

.c-qa__link:hover{
    color:var(--color-primary-blue);
    text-decoration:underline;
}

.c-qa__link--whatsapp i{
    color:#25D366;
    margin-right:.15rem;
}

@media (max-width:767.98px){

    .c-qa{
        grid-template-columns:1fr;
        gap:var(--space-lg);
    }
}

.c-quick-answer{
    margin-top:var(--space-2xl);
    padding:var(--card-padding);
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-left:4px solid var(--color-primary-blue);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    text-align:left;
}

.c-quick-answer__question{
    margin-bottom:.75rem;
    font-family:var(--font-title-family);
    font-size:var(--font-size-subheading);
    font-weight:var(--font-weight-bold);
    color:var(--color-secondary-blue);
}

.c-quick-answer__answer{
    margin:0;
    color:var(--color-secondary-gray);
    font-size:var(--font-size-body);
    line-height:var(--line-height-relaxed);
}

@media (max-width:991.98px){
    .c-quick-answer{
        margin-top:var(--space-xl);
    }
}

/* ==========================================================
   Contact Form Box — estilos para formularios de plataforma
   (Liquid error: wrong number of arguments (1 for 4..5))
========================================================== */

.contact_form_box{
    max-width: var(--content-width-sm);
    margin: var(--space-lg) auto 0;
    text-align: left;
}

.contact_form_box input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact_form_box select,
.contact_form_box textarea{
    display: block;
    width: 100%;
    min-height: var(--button-height);
    margin-bottom: var(--space-sm);
    padding: .85rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-secondary-gray);
    font-family: var(--font-body-family);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    transition: var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.contact_form_box textarea{
    min-height: 120px;
    padding-top: .85rem;
    resize: vertical;
}

.contact_form_box input::placeholder,
.contact_form_box textarea::placeholder{
    color: var(--color-gray-light);
}

.contact_form_box input:not([type="submit"]):focus,
.contact_form_box select:focus,
.contact_form_box textarea:focus{
    outline: none;
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.contact_form_box input:hover:not(:focus):not([type="submit"]),
.contact_form_box select:hover:not(:focus),
.contact_form_box textarea:hover:not(:focus){
    border-color: var(--color-border-hover);
}

/* Flecha custom para <select>, reemplaza la nativa del navegador */
.contact_form_box select{
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23505A68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 18px 18px;
    cursor: pointer;
}

.contact_form_box select::-ms-expand{
    display: none;
}

/* Botón enviar — mismo look que .c-btn.c-btn--primary */
.contact_form_box button[type="submit"],
.contact_form_box input[type="submit"]{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: var(--button-min-width);
    min-height: var(--button-height);
    margin-top: var(--space-xs);
    padding: 0 1.75rem;
    background: var(--color-primary-blue);
    border: 1px solid var(--color-primary-blue);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    font-family: var(--font-body-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
}

.contact_form_box button[type="submit"]:hover,
.contact_form_box input[type="submit"]:hover{
    background: var(--color-white);
    border-color: var(--color-primary-blue);
    color: var(--color-primary-blue);
}

@media (max-width: 575.98px){
    .contact_form_box button[type="submit"],
    .contact_form_box input[type="submit"]{
        width: 100%;
    }
}

@media (min-width: 992px){
  .c-banner__media--bleed{
    max-width: 620px;
    margin-left: auto;
  }
}

 /* ==========================================================
   Link — Arrow
   Link de texto con flecha, para "ver más"
========================================================== */
.c-link-arrow{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-primary-blue);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
}

.c-link-arrow svg{
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast);
}

.c-link-arrow:hover{
    color: var(--color-primary-orange);
    text-decoration: none;
}

.c-link-arrow:hover svg{
    transform: translateX(3px);
}
/* ==========================================================
   Note
   Texto de nota / disclaimer al pie de una sección.
========================================================== */
.c-note{
    margin-top: var(--space-lg);
    color: var(--color-gray-light);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}
/* ==========================================================
   Callout
   Bloque destacado con texto + acciones, fondo suave.
========================================================== */
.c-callout{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    padding: var(--card-padding);
    background: var(--color-blue-100);
    border-radius: var(--radius-xl);
}

.c-callout__content{
    max-width: 560px;
}

.c-callout__title{
    margin-bottom: .5rem;
    font-family: var(--font-title-family);
    font-size: var(--font-size-subheading);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-blue);
}

.c-callout__text{
    margin: 0;
    color: var(--color-secondary-gray);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}

.c-callout__actions{
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

@media (max-width: 991.98px){
    .c-callout{
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .c-callout__content{
        max-width: none;
    }

    .c-callout__actions{
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ==========================================================
   Cards Grid — 2 columnas
========================================================== */
.c-cards-grid--2up{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 767.98px){
    .c-cards-grid--2up{
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Card — Accent Left
========================================================== */
.c-card--accent-left{
    border-left: 4px solid var(--color-primary-blue);
}
/* ==========================================================
   Avatar — soporte para foto + tamaño grande
========================================================== */
.c-avatar img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.c-avatar--lg{
    width: 76px;
    height: 76px;
}

/* ==========================================================
   Video Pill
========================================================== */
.c-video-pill{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .3rem .9rem .3rem .3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-primary-blue);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
}

.c-video-pill__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-blue-100);
    color: var(--color-primary-blue);
}

.c-video-pill__icon svg{
    width: 9px;
    height: 9px;
    margin-left: 1px;
}

.c-video-pill:hover{
    border-color: var(--color-border-hover);
    background: var(--color-blue-50);
    color: var(--color-primary-blue);
    text-decoration: none;
}
/* ==========================================================
   Split Card
========================================================== */
.c-split-card{
    display: flex;
    align-items: stretch;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.c-split-card__body{
    flex: 1 1 60%;
    padding: var(--card-padding-lg) var(--space-2xl);
}

.c-split-card__list-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-xl);
    margin-top: var(--space-lg);
}

.c-split-card__aside{
    flex: 0 0 380px;
    padding: var(--card-padding-lg) var(--space-xl);
    background: var(--color-secondary-blue);
    color: var(--color-white);
}

.c-split-card__eyebrow{
    display: block;
    margin-bottom: .5rem;
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.c-split-card__value{
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-family: var(--font-title-family);
    font-size: 2.75rem;
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    color: var(--color-white);
}

.c-split-card__value span{
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: rgba(255,255,255,.7);
}

.c-split-card__note{
    margin: 0 0 var(--space-md);
    color: var(--color-white);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

.c-split-card__divider{
    height: 1px;
    margin-bottom: var(--space-md);
    background: rgba(255,255,255,.18);
}

.c-split-card__highlight{
    display: flex;
    gap: .75rem;
    margin-bottom: var(--space-lg);
}

.c-split-card__highlight-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: .15rem;
    border-radius: 50%;
    background: var(--color-primary-blue);
    color: var(--color-white);
}

.c-split-card__highlight-icon svg{
    width: 12px;
    height: 12px;
}

.c-split-card__highlight strong{
    display: block;
    margin-bottom: .2rem;
    color: var(--color-white);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
}

.c-split-card__highlight p{
    margin: 0;
    color: var(--color-white);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

.c-split-card__fine{
    margin: var(--space-md) 0 0;
    color: var(--color-white);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    text-align: center;
}

@media (max-width: 991.98px){
    .c-split-card{
        flex-direction: column;
    }

    .c-split-card__aside{
        flex-basis: auto;
    }
}

@media (max-width: 575.98px){
    .c-split-card__list-grid{
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Cookie Banner — override de color 
========================================================== */
#cookies__container{
    background: var(--color-secondary-blue) !important;
    color: var(--color-white);
    font-family: var(--font-body-family);
    box-shadow: 0 -8px 24px rgba(23,56,104,.18);
}

.cookies__text{
    color: var(--color-white);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
}

/* Botones/links dentro de .cookies__buttons */
.cookies__buttons a,
.cookies__buttons button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* PageSpeed: área táctil mínima recomendada */
    padding: .55rem 1.25rem;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-body-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.cookies__buttons a:hover,
.cookies__buttons button:hover{
    background: var(--color-white);
    color: var(--color-secondary-blue);
    text-decoration: none;
}

/* ==========================================================
   Cookie Banner — botones 
========================================================== */
#btnAcceptCookies{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    min-height: 48px;
    padding: .55rem 1.5rem;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-secondary-blue);
    font-family: var(--font-body-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

#btnAcceptCookies:hover{
    background: var(--color-secondary-blue);
    color: var(--color-white);
    border-color: var(--color-white);
    text-decoration: none;
}

#btnCloseCookies{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: .5rem;
    background: transparent;
    border: 0;
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

#btnCloseCookies:hover{
    opacity: .75;
}

/* ==========================================================
   CONTENT HUB
   Listado de contenido con destacado + filtros + grilla
   (feature article, filter bar, media grid)
   listados filtrables (blog, casos de éxito, recursos, etc.).
========================================================== */

/* ==========================================================
   Section — Flush Top 
========================================================== */
.c-section--flush-top{
    padding-top: 0;
}

/* ==========================================================
   Empty State 
========================================================== */
.c-empty-state{
    grid-column: 1 / -1;
    padding: var(--space-2xl) 0;
    text-align: center;
    color: var(--color-gray-light);
    font-size: var(--font-size-body);
}

/* ==========================================================
   Masthead
========================================================== */
.c-masthead{
    margin-bottom: var(--space-xl);
}

.c-masthead__kicker{
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-sm);
    color: var(--color-secondary-gray);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
}

.c-masthead__kicker::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.c-masthead__title{
    margin: 0;
    font-family: var(--font-title-family);
    font-size: clamp(2.5rem, 5vw, var(--font-size-display));
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    letter-spacing: -.01em;
    color: var(--color-secondary-blue);
}

/* ==========================================================
   Highlight Card — v3
========================================================== */
.c-highlight-card{
    display: block;
}

.c-highlight-card:hover .c-highlight-card__img{
    transform: scale(1.03);
}

.c-highlight-card__media{
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--background-gray);
}

.c-highlight-card__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.c-highlight-card__scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15,23,42,.75) 0%, rgba(15,23,42,0) 45%);
    pointer-events: none;
}

.c-highlight-card__body{
    max-width: 760px;
    margin-top: var(--space-lg);
}

.c-highlight-card__meta{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.c-highlight-card__source{
    padding: 0;
    background: none;
    color: var(--color-primary-blue);
}

.c-highlight-card__date{
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-gray-light);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: 0;
}

.c-highlight-card__date::before{
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-border-hover);
}

.c-highlight-card__title{
    margin: 0 0 var(--space-sm);
    font-family: var(--font-title-family);
    font-size: 2rem;
    font-weight: var(--font-weight-extrabold);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--color-secondary-blue);
}

.c-highlight-card__excerpt{
    margin: 0 0 var(--space-md);
    color: var(--color-secondary-gray);
    font-size: 1.15rem;
    line-height: var(--line-height-relaxed);
}

.c-highlight-card__cta{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    min-width: 0;
    min-height: 0;
    background: none;
    border: 0;
    color: var(--color-primary-blue);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.c-highlight-card__cta i{
    margin-left: 0;
    transition: transform var(--transition-fast);
}

.c-highlight-card__cta:hover{
    background: none;
    color: var(--color-primary-orange);
    text-decoration: none;
}

.c-highlight-card__cta:hover i{
    transform: translateX(4px);
}

@media (max-width: 575.98px){
    .c-highlight-card__media{
        aspect-ratio: 4 / 3;
    }

    .c-highlight-card__title{
        font-size: 1.5rem;
    }

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

/* ==========================================================
   Filter Bar
========================================================== */
.c-filter-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.c-filter-bar__list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-filter-bar__btn{
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-secondary-gray);
    font-family: var(--font-body-family);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
    cursor: pointer;
}

.c-filter-bar__btn:hover{
    border-color: var(--color-border-hover);
    color: var(--color-primary-blue);
}

.c-filter-bar__btn.is-active{
    background: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
    color: var(--color-white);
}

.c-filter-bar__count{
    color: var(--color-secondary-gray);
    font-size: var(--font-size-xs);
}

@media (max-width: 575.98px){
    .c-filter-bar{
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================
   Media Card
========================================================== */
.c-media-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.c-media-card:hover{
    transform: translateY(-4px);
    border-color: var(--color-border-hover);
    box-shadow: var(--shadow-md);
}

.c-media-card.is-playing,
.c-media-card.is-playing:hover{
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
}

.c-media-card__media{
    position: relative;
    aspect-ratio: var(--content-media-ratio, 487 / 325);
    overflow: hidden;
    background: var(--background-gray);
}

.c-media-card__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.c-media-card:hover .c-media-card__img{
    transform: scale(1.05);
}

.c-media-card__badge{
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 1;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 1px 4px rgba(15,23,42,.18);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.c-media-card__badge--type-news{
    background: var(--color-blue-100);
    color: var(--color-primary-blue);
}

.c-media-card__badge--type-event{
    background: #E3F5EA;
    color: #0E6B39;
}

.c-media-card__badge--type-video{
    background: var(--color-secondary-orange);
    color: #A8380A;
}

/* ---- Reproducción inline (video) ---- */
.c-media-card__play{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.c-media-card__play::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.28);
    transition: var(--transition-fast);
}

.c-media-card:hover .c-media-card__play::before{
    background: rgba(15,23,42,.4);
}

.c-media-card__play i{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding-left: 3px;
    border: 1px solid var(--color-primary-orange);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--color-primary-orange);
    font-size: 1.1rem;
    transition: var(--transition-fast);
}

.c-media-card__play:hover i{
    background: var(--color-white);
    transform: scale(1.08);
}

.c-media-card__media iframe{
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
}

.c-media-card__body{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--card-padding-sm);
}

.c-media-card__meta{
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.c-media-card__source{
    color: var(--color-primary-blue);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.c-media-card__date{
    color: var(--color-gray-light);
    font-size: var(--font-size-xs);
}

.c-media-card__date i{
    margin-right: .3rem;
}

.c-media-card__title{
    margin: 0 0 .5rem;
    font-family: var(--font-title-family);
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-blue);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c-media-card__title a{
    color: inherit;
}

.c-media-card__title a:hover{
    color: var(--color-primary-blue);
    text-decoration: none;
}

.c-media-card__excerpt{
    margin: 0 0 var(--space-sm);
    color: var(--color-secondary-gray);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.c-media-card__link{
    margin-top: auto;
}

.c-link-arrow i{
    transition: transform var(--transition-fast);
}

.c-link-arrow:hover i{
    transform: translateX(3px);
}

@media (max-width: 575.98px){
    .c-media-card__play i{
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}