/* ===========================
   CONDUSECURE — HOME STYLES
   Modern / premium / decent
   =========================== */

   :root{
    --brand:#d7261b;
    --black:#0b0b0b;
    --white:#ffffff;
    --muted:#6b7280;
    --muted2:#94a3b8;
    --soft:#f5f6f7;
    --line:#e9ecef;
  
    --radius: 18px;
    --radius2: 26px;
    --shadow: 0 16px 50px rgba(11,11,11,.12);
    --shadow2: 0 10px 30px rgba(11,11,11,.10);
    --shadow3: 0 8px 22px rgba(11,11,11,.10);
    --shadowIn: inset 0 1px 0 rgba(255,255,255,.35);
  
    --container: 1180px;
    --ease: cubic-bezier(.2,.8,.2,1);
  
    --gradRed: radial-gradient(1200px 600px at 20% 30%, rgba(215,38,27,.25), rgba(215,38,27,0) 60%),
               radial-gradient(900px 500px at 80% 20%, rgba(215,38,27,.16), rgba(215,38,27,0) 60%);
    --gradBlack: radial-gradient(1200px 600px at 20% 30%, rgba(215,38,27,.24), rgba(11,11,11,0) 60%),
                 radial-gradient(900px 500px at 80% 20%, rgba(255,255,255,.10), rgba(11,11,11,0) 55%);
  }
  
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; overflow-x:hidden; width:100%; max-width:100vw}
  body{
    margin:0;
    font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:#111827;
    background: var(--white);
    overflow-x:hidden;
    width:100%;
    max-width:100vw;
  }
  
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  button{font-family:inherit}
  
  .container{
    width:min(var(--container), calc(100% - 40px));
    margin-inline:auto;
  }
  
  .skip-link{
    position:absolute;
    left:-999px; top:8px;
    background:#fff; color:#111;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--line);
    z-index:9999;
  }
  .skip-link:focus{left:12px}
  
  /* Ajuste fino del scroll al hacer clic en Licencias / Certificaciones */
  #licencias{scroll-margin-top: 150px}
  #certificaciones{scroll-margin-top: -120px}
  
  /* Topbar: fija arriba para que siempre se vea con el header */
  .topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:49;
    background: linear-gradient(180deg, #ffffff, #fbfbfb);
    border-bottom: 1px solid var(--line);
  }
  .topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    font-size:13px;
    color:#0f172a;
  }
  .topbar__left,.topbar__right{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .topbar__item{
    display:flex; align-items:center; gap:8px;
    opacity:.92;
  }
  .topbar__item a{opacity:.95}
  .topbar__item a:hover{color:var(--brand)}
  .topbar__sep{opacity:.35}
  .topbar__actions--mobile{display:none}
  
  /* Header: fixed debajo de la topbar para que no baje con el scroll */
  .header{
    position:fixed;
    top:44px;
    left:0;
    right:0;
    width:100%;
    z-index:50;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(233,236,239,.75);
    transition: all .35s var(--ease);
  }
  .header.is-scrolled{
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 30px rgba(11,11,11,.06);
  }
  .header__inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:18px;
    padding:14px 0;
  }
  
  .brand{
    display:flex; align-items:center; gap:12px;
    min-width:260px;
  }
  .brand__logo{
    width:46px; height:46px; object-fit:contain;
    filter: drop-shadow(0 12px 18px rgba(215,38,27,.10));
  }
  .brand__text{display:flex; flex-direction:column; line-height:1.05}
  .brand__name{font-weight:800; letter-spacing:.6px}
  .brand__tag{font-size:12px; color:var(--muted)}
  
  .nav{display:flex; align-items:center; gap:18px}
  .nav__link{
    position:relative;
    font-weight:600;
    font-size:14px;
    opacity:.85;
    padding:10px 10px;
    border-radius:12px;
    transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
  }
  .nav__link:hover{background: rgba(215,38,27,.06); opacity:1; color: var(--brand)}
  .nav__link.active{
    background: rgba(215,38,27,.10);
    opacity:1;
    color:#0f172a;
  }
  .header__actions{
    display:flex; align-items:center; gap:10px;
  }
  
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:12px 14px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    user-select:none;
  }
  .btn:active{transform: scale(.98)}
  .btn--primary{
    background: linear-gradient(135deg, #d7261b, #b11a12);
    color:#fff;
    box-shadow: 0 16px 40px rgba(215,38,27,.20);
  }
  .btn--primary:hover{box-shadow: 0 20px 55px rgba(215,38,27,.28)}
  .btn--soft{
    background: rgba(11,11,11,.04);
    border-color: rgba(11,11,11,.08);
  }
  .btn--soft:hover{
    background: rgba(11,11,11,.06);
    border-color: rgba(11,11,11,.10);
  }
  .btn--outline{
    background: transparent;
    border-color: rgba(11,11,11,.14);
  }
  .btn--outline:hover{
    background: rgba(11,11,11,.04);
    border-color: rgba(11,11,11,.18);
  }
  .btn--full{width:100%}
  .btn--sm{padding:8px 10px; font-size:12px; border-radius:12px}
  .btn__shine{
    position:absolute;
    inset:0;
    border-radius: 16px;
    overflow:hidden;
    pointer-events:none;
  }
  .btn__shine::before{
    content:"";
    position:absolute;
    top:-40%;
    left:-40%;
    width:80%;
    height:180%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
    transform: rotate(25deg);
    animation: shine 4.2s linear infinite;
  }
  @keyframes shine{
    0%{transform: translateX(-90%) rotate(25deg)}
    60%{transform: translateX(260%) rotate(25deg)}
    100%{transform: translateX(260%) rotate(25deg)}
  }
  
  .btn--dark{
    background:#0b0b0b;
    color:#fff;
  }
  .btn--dark:hover{box-shadow: 0 18px 50px rgba(11,11,11,.20)}
  .btn--light{
    background:#fff;
    color:#111;
    border-color: rgba(255,255,255,.25);
  }
  
  /* Burger */
  .burger{
    display:none;
    width:44px; height:44px;
    border-radius: 16px;
    border:1px solid rgba(11,11,11,.12);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    align-items:center; justify-content:center;
    gap:5px;
    flex-direction:column;
  }
  .burger span{
    width:18px; height:2px;
    background:#0b0b0b;
    border-radius:10px;
    opacity:.9;
  }
  
  /* Mobile menu: oculto por defecto; solo visible cuando no tiene [hidden] */
  .mobile[hidden]{ display:none !important; }
  .mobile{
    position:fixed;
    inset:0;
    z-index:60;
    display:grid;
    grid-template-columns: 1fr;
  }
  .mobile__backdrop{
    position:absolute;
    inset:0;
    z-index:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
  }
  .mobile__panel{
    position:relative;
    z-index:1;
    margin-left:auto;
    width:min(420px, 86%);
    height:100%;
    background:#fff;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    padding:18px;
    border-left: 1px solid rgba(233,236,239,.9);
    animation: slideIn .35s var(--ease) both;
  }
  @keyframes slideIn{
    from{transform: translateX(24px); opacity:0}
    to{transform: translateX(0); opacity:1}
  }
  .mobile__top{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 0 12px;
  }
  .mobile__title{font-weight:800}
  .mobile__close{
    width:42px; height:42px;
    border-radius: 14px;
    border:1px solid rgba(11,11,11,.10);
    background: rgba(11,11,11,.04);
    cursor:pointer;
    position:relative;
  }
  .mobile__close .x{
    position:absolute;
    inset:0;
    margin:auto;
    width:18px; height:18px;
  }
  .mobile__close .x::before,
  .mobile__close .x::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:18px; height:2px;
    background:#0b0b0b;
    border-radius:10px;
  }
  .mobile__close .x::before{transform: translate(-50%,-50%) rotate(45deg)}
  .mobile__close .x::after{transform: translate(-50%,-50%) rotate(-45deg)}
  
  .mobile__link{
    display:block;
    padding:12px 12px;
    border-radius: 14px;
    font-weight:700;
    color:#0f172a;
    margin:2px 0;
    background: rgba(11,11,11,.02);
    border:1px solid rgba(11,11,11,.06);
  }
  .mobile__link:hover{background: rgba(215,38,27,.06); border-color: rgba(215,38,27,.12); color: var(--brand)}
  .mobile__divider{height:1px; background: var(--line); margin:16px 0}
  .mobile__meta{margin-top:14px; display:grid; gap:8px; font-size:13px; color:#0f172a}
  .mobile__metaRow{display:flex; align-items:flex-start; gap:10px}
  
  /* Small UI chips */
  .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(11,11,11,.08);
    font-weight:700;
    font-size:12px;
    background:#fff;
  }
  .chip--ghost{
    background: rgba(11,11,11,.02);
  }
  .dot{display:inline-block; width:8px; height:8px; border-radius:99px; background:#111}
  .dot--red{background: var(--brand)}
  
  /* Icons (simple CSS icons) */
  .icon, .trustCard__icon, .quick__icon, .point__icon, .whatsapp__icon{
    width:18px; height:18px;
    display:inline-block;
    position:relative;
  }
  .i-mail::before{content:"✉"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-phone::before{content:"☎"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-landline::before{content:"📞"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-pin::before{content:"📍"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-clock::before{content:"⏱"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-shield::before{content:"🛡"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-card::before{content:"💳"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-doc::before{content:"📄"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-badge::before{content:"🏅"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-umbrella::before{content:"☂"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .i-check::before{content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:16px; font-weight:900}
  
  /* HERO */
  .hero{
    position:relative;
    min-height: 84vh;
    display:grid;
    align-items:center;
    overflow:hidden;
    background: #0b0b0b;
  }
  .hero__bg{
    position:absolute; inset:0;
  }
  .hero__img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter: saturate(1.05) contrast(1.05);
    transform: scale(1.02);
  }
  .hero__overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(11,11,11,.85) 0%, rgba(11,11,11,.55) 55%, rgba(11,11,11,.25) 100%),
      var(--gradBlack);
  }
  .hero__noise{
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    opacity:.55;
    mix-blend-mode: overlay;
  }
  .hero__inner{
    position:relative;
    display:grid;
    grid-template-columns: 1.2fr .9fr;
    gap:28px;
    padding: 56px 0 68px;
  }
  .hero__eyebrow{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-bottom:14px;
  }
  .pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px;
    border-radius: 999px;
    font-weight:800;
    font-size:12px;
    letter-spacing:.25px;
  }
  .pill--dark{background: rgba(215,38,27,.18); color:#fff; border:1px solid rgba(215,38,27,.20)}
  .pill--light{background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.16)}
  
  .hero__title{
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.03;
    margin:0 0 14px;
    color:#fff;
    letter-spacing: -0.02em;
    font-weight:900;
  }
  .hero__subtitle{
    margin:0 0 20px;
    color: rgba(255,255,255,.88);
    max-width: 56ch;
  }
  .hero__cta{
    display:flex; gap:12px; flex-wrap:wrap;
    margin-bottom: 22px;
  }
  .hero__trust{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:12px;
    margin-top: 16px;
  }
  .trustCard{
    display:flex; gap:10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    padding:12px 12px;
    box-shadow: var(--shadowIn);
  }
  .trustCard__icon{width:20px; height:20px}
  .trustCard__title{color:#fff; font-weight:800; font-size:13px}
  .trustCard__desc{color: rgba(255,255,255,.74); font-size:12px; margin-top:2px}
  
  .heroCard{
    position:relative;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 26px;
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
    overflow:hidden;
  }
  .heroCard::before{
    content:"";
    position:absolute; inset:-2px;
    background: var(--gradRed);
    opacity:.65;
    pointer-events:none;
  }
  .heroCard__top{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    border-bottom: 1px solid rgba(233,236,239,.8);
  }
  .heroCard__badge{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:900; font-size:12px;
    background: rgba(215,38,27,.08);
    border:1px solid rgba(215,38,27,.12);
    padding:8px 10px;
    border-radius:999px;
  }
  .heroCard__mini{display:flex; align-items:center; gap:8px; font-weight:800; font-size:12px}
  .heroCard__mini a:hover{color: var(--brand)}
  .heroCard__content{
    position:relative;
    padding: 16px 16px 18px;
  }
  .heroCard__title{margin:0; font-weight:900; font-size:20px}
  .heroCard__text{margin:8px 0 14px; color:#334155; font-size:13px}
  
  .quickGrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
  }
  .quick{
    display:grid;
    grid-template-columns: 18px 1fr;
    gap:10px 10px;
    padding:12px 12px;
    border-radius: 20px;
    border:1px solid rgba(11,11,11,.08);
    background: rgba(255,255,255,.75);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .quick:hover{
    transform: translateY(-2px);
    border-color: rgba(215,38,27,.20);
    box-shadow: var(--shadow3);
  }
  .quick__label{font-weight:900; font-size:14px}
  .quick__meta{
    grid-column: 2 / -1;
    font-size:12px; color: var(--muted);
  }
  .heroCard__cta{margin-top: 14px}
  .heroCard__note{margin:10px 0 0; font-size:12px; color: var(--muted)}
  
  .floatingMarks{
    position:absolute;
    right:-30px;
    bottom:-30px;
    width:220px;
    height:220px;
    pointer-events:none;
    opacity:.85;
  }
  .mark{
    position:absolute;
    inset:0;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(215,38,27,.32), rgba(215,38,27,0) 60%);
    filter: blur(0px);
    animation: float 8s ease-in-out infinite;
  }
  .mark--2{
    inset: 30px;
    background: radial-gradient(circle at 60% 40%, rgba(11,11,11,.18), rgba(11,11,11,0) 60%);
    animation-duration: 10s;
  }
  .mark--3{
    inset: 64px;
    background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
    animation-duration: 12s;
  }
  @keyframes float{
    0%,100%{transform: translate(0,0)}
    50%{transform: translate(-8px,-10px)}
  }
  
  .hero__curve{
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:90px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
    clip-path: polygon(0 20%, 10% 30%, 30% 55%, 55% 35%, 78% 60%, 100% 42%, 100% 100%, 0 100%);
  }
  
  /* SECTIONS */
  .section{
    padding: 70px 0;
  }
  .section--tight{padding-top:56px}
  .section--soft{background: linear-gradient(180deg, #fff, #fbfbfb)}
  .sectionHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom: 24px;
  }
  .sectionHead__left{max-width: 72ch}
  .sectionHead__right{display:flex; gap:10px; flex-wrap:wrap}
  .kicker{
    display:inline-block;
    color: var(--brand);
    font-weight:900;
    letter-spacing:.18em;
    text-transform: uppercase;
    font-size:12px;
    margin-bottom: 10px;
  }
  .kicker--light{color:#fff; opacity:.95}
  .h2{
    font-size: clamp(26px, 3vw, 38px);
    margin:0 0 10px;
    font-weight:900;
    letter-spacing:-0.02em;
  }
  .h2--light{color:#fff}
  .lead{
    margin:0;
    color:#475569;
  }
  .lead--light{color: rgba(255,255,255,.82)}
  
  /* Cards grid */
  .grid4{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
  }
  .card{
    background:#fff;
    border:1px solid rgba(11,11,11,.08);
    border-radius: 22px;
    overflow:hidden;
    box-shadow: var(--shadowIn);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .card:hover{
    transform: translateY(-4px);
    border-color: rgba(215,38,27,.16);
    box-shadow: var(--shadow2);
  }
  .card__media{
    position:relative;
    height: 150px;
    background: linear-gradient(180deg, rgba(215,38,27,.10), rgba(215,38,27,0));
    display:grid;
    place-items:center;
  }
  .card__media img{
    height: 110px;
    width:auto;
    object-fit:contain;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.10));
  }
  .card__glow{
    position:absolute;
    inset:-30px;
    background: radial-gradient(circle at 40% 30%, rgba(215,38,27,.26), rgba(215,38,27,0) 60%);
    opacity:.7;
    pointer-events:none;
  }
  .card__body{padding:14px 14px 16px}
  .card__title{margin:0 0 10px; font-weight:900}
  .bullets{margin:0 0 12px; padding-left:18px; color:#334155; font-size:13px}
  .bullets li{margin:6px 0}
  .card__link{
    font-weight:900;
    color: var(--brand);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .card__link:hover{opacity:.85}
  
  /* mini banner */
  .miniBanner{
    margin-top: 16px;
    background: rgba(215,38,27,.06);
    border: 1px solid rgba(215,38,27,.14);
    border-radius: 22px;
    padding: 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
  .miniBanner__text{color:#0f172a}
  
  /* License cards */
  .licenseGrid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:14px;
  }
  .licenseCard{
    background:#fff;
    border:1px solid rgba(11,11,11,.08);
    border-radius: 26px;
    overflow:hidden;
    box-shadow: var(--shadowIn);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .licenseCard:hover{
    transform: translateY(-4px);
    border-color: rgba(215,38,27,.16);
    box-shadow: var(--shadow2);
  }
  .licenseCard__media{
    position:relative;
    height: 170px;
    background: linear-gradient(180deg, rgba(215,38,27,.12), rgba(215,38,27,0));
    display:grid; place-items:center;
  }
  .licenseCard__media img{height: 120px; width:auto; object-fit:contain}
  .licenseBadge{
    position:absolute;
    top:12px; left:12px;
    background: rgba(11,11,11,.80);
    color:#fff;
    padding:8px 10px;
    border-radius: 999px;
    font-weight:900;
    font-size:12px;
    border:1px solid rgba(255,255,255,.14);
  }
  .licenseCard__body{padding:16px}
  .licenseCard__body h3{margin:0 0 8px; font-weight:900}
  .licenseCard__body p{margin:0 0 12px; color:#475569; font-size:13px}
  .licenseCard__meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px}
  .tag{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 10px;
    border-radius: 999px;
    border:1px solid rgba(11,11,11,.10);
    background: rgba(11,11,11,.03);
    font-weight:800;
    font-size:12px;
  }
  
  /* SOAT impact */
  .impact{
    position:relative;
    background:#0b0b0b;
    overflow:hidden;
  }
  .impact__stripe{
    position:absolute;
    inset:0;
    background: var(--gradBlack);
    opacity:.9;
    pointer-events:none;
  }
  .impact__inner{
    position:relative;
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:18px;
    padding: 70px 0;
  }
  .impact__cta{display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0}
  .btn--outlineLight{
    border-color: rgba(255,255,255,.18);
    color:#fff;
  }
  .btn--outlineLight:hover{background: rgba(255,255,255,.08)}
  .impact__points{display:grid; gap:10px; margin-top: 10px}
  .point{
    display:flex; align-items:center; gap:10px;
    color: rgba(255,255,255,.86);
    font-weight:700;
  }
  .point__icon{
    width:26px; height:26px;
    border-radius: 10px;
    background: rgba(215,38,27,.18);
    border:1px solid rgba(215,38,27,.20);
    display:grid; place-items:center;
  }
  .impactCard{
    position:relative;
    border-radius: 30px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
  }
  .impactCard img{
    width:100%;
    height: 280px;
    object-fit: contain;
    object-position: center;
  }
  .impactCard__fade{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
  }
  .impactCard__label{
    display: none;
    position:absolute;
    left:16px; bottom:16px;
    background: rgba(11,11,11,.55);
    border: 1px solid rgba(255,255,255,.14);
    color:#fff;
    padding:10px 12px;
    border-radius: 999px;
    font-weight:900;
    display:inline-flex; align-items:center; gap:10px;
  }
  .impact__curve{
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:90px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
    clip-path: polygon(0 40%, 14% 56%, 30% 42%, 50% 62%, 70% 45%, 86% 66%, 100% 52%, 100% 100%, 0 100%);
  }
  
  /* Timeline */
  .timeline{
    display:grid;
    gap:12px;
  }
  .step{
    display:flex; gap:12px;
    padding:14px 14px;
    border-radius: 22px;
    border:1px solid rgba(11,11,11,.08);
    background: rgba(255,255,255,.72);
    box-shadow: var(--shadowIn);
  }
  .step__num{
    width:42px; height:42px;
    border-radius: 16px;
    background: rgba(215,38,27,.10);
    border:1px solid rgba(215,38,27,.14);
    font-weight:900;
    display:grid; place-items:center;
    color:#0f172a;
  }
  .step__num--final{background: rgba(215,38,27,.18)}
  .step__body h3{margin:0 0 6px; font-weight:900}
  .step__body p{margin:0; color:#475569}
  
  /* Stats */
  .statsWrap{padding: 16px 0}
  .statsIntro{margin-bottom: 18px}
  .statsGrid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:14px;
  }
  .stat{
    border-radius: 26px;
    background:#fff;
    border:1px solid rgba(11,11,11,.08);
    padding:16px;
    box-shadow: var(--shadowIn);
  }
  .stat__num{font-size: 34px; font-weight:900; letter-spacing:-0.02em}
  .stat__plus{color: var(--brand)}
  .stat__badge{
    display:inline-flex;
    padding:10px 14px;
    border-radius: 999px;
    background: rgba(11,11,11,.05);
    border:1px solid rgba(11,11,11,.10);
    font-size:16px;
    font-weight:900;
  }
  .stat__label{margin-top: 8px; font-weight:900}
  .stat__desc{margin-top: 6px; color:#475569; font-size:13px}
  
  /* Testimonials */
  .testGrid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:14px;
  }
  .tCard{
    border-radius: 26px;
    background:#fff;
    border:1px solid rgba(11,11,11,.08);
    padding:16px;
    box-shadow: var(--shadowIn);
  }
  .tCard__top{
    display:flex; align-items:center; gap:10px;
    margin-bottom: 12px;
  }
  .avatar{
    width:42px; height:42px;
    border-radius: 16px;
    background: rgba(215,38,27,.12);
    border:1px solid rgba(215,38,27,.16);
    font-weight:900;
    display:grid; place-items:center;
  }
  .tCard__name{font-weight:900}
  .tCard__meta{font-size:12px; color: var(--muted)}
  .stars{margin-left:auto; color:#f59e0b; letter-spacing:1px}
  .tCard__text{margin:0; color:#475569}
  
  /* FAQ */
  .faq{display:grid; gap:10px}
  .faqItem{
    border-radius: 22px;
    background:#fff;
    border:1px solid rgba(11,11,11,.08);
    box-shadow: var(--shadowIn);
    overflow:hidden;
  }
  .faqItem summary{
    list-style:none;
    cursor:pointer;
    padding:14px 16px;
    font-weight:900;
    display:flex; align-items:center; justify-content:space-between;
  }
  .faqItem summary::-webkit-details-marker{display:none}
  .faqItem__icon{
    width:22px; height:22px;
    border-radius: 10px;
    border:1px solid rgba(11,11,11,.12);
    background: rgba(11,11,11,.04);
    position:relative;
  }
  .faqItem__icon::before{
    content:"+";
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-weight:900;
  }
  .faqItem[open] .faqItem__icon::before{content:"–"}
  .faqItem__content{padding: 0 16px 14px; color:#475569}
  .faqCta{
    margin-top: 14px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:16px;
    border-radius: 22px;
    background: rgba(215,38,27,.06);
    border:1px solid rgba(215,38,27,.14);
  }
  
  /* Gallery */
  .gallery{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:14px;
    align-items:stretch;
  }
  .gallery__big{
    position:relative;
    border-radius: 30px;
    overflow:hidden;
    border:1px solid rgba(11,11,11,.10);
    box-shadow: var(--shadow2);
  }
  .gallery__big img{width:100%; height: 420px; object-fit:cover}
  .gallery__cap{
    position:absolute;
    left:16px; bottom:16px;
    background: rgba(11,11,11,.55);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    padding:10px 12px;
    border-radius: 999px;
    font-weight:900;
    display:inline-flex; align-items:center; gap:10px;
  }
  .gallery__grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .gItem{
    border-radius: 24px;
    overflow:hidden;
    border:1px solid rgba(11,11,11,.10);
    box-shadow: var(--shadowIn);
    background:#fff;
  }
  .gItem img{width:100%; height: 202px; object-fit:cover}
  
  /* Final CTA */
  .ctaFinal{
    position:relative;
    background: #0b0b0b;
    overflow:hidden;
  }
  .ctaFinal__noise{
    position:absolute; inset:0;
    background: var(--gradBlack);
    opacity:.9;
  }
  .ctaFinal__inner{
    position:relative;
    padding: 70px 0;
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:18px;
    align-items:center;
  }
  .ctaFinal__left h2{
    margin:0 0 10px;
    color:#fff;
    font-weight:900;
    font-size: clamp(26px, 3vw, 40px);
  }
  .ctaFinal__left p{margin:0 0 16px; color: rgba(255,255,255,.82)}
  .ctaFinal__buttons{display:flex; gap:12px; flex-wrap:wrap}
  .ctaCard{
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
    padding: 16px;
  }
  .ctaCard__top{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px}
  .ctaCard__mid{display:grid; gap:10px; margin: 12px 0}
  .ctaCard__row{display:flex; gap:10px; align-items:flex-start; color:#0f172a; font-weight:700}
  .ctaCard__rowText{min-width:0; flex:1}
  .ctaCard__rowText a{color:inherit; font-weight:700}
  .muted{opacity:.5}
  
  /* Footer */
  .footer{
    background:#0b0b0b;
    color:#fff;
  }
  .footer__grid{
    display:grid;
    grid-template-columns: 1.2fr .7fr 1fr;
    gap:14px;
    padding: 50px 0;
  }
  .footer__logo{width:52px; height:52px; object-fit:contain}
  .footer__desc{margin:12px 0 0; color: rgba(255,255,255,.75)}
  .footer__col h3{margin:0 0 10px; font-weight:900}
  .footer__col a{
    display:block;
    margin:6px 0;
    color: rgba(255,255,255,.80);
  }
  .footer__col a:hover{color:#fff}
  .footer__item{display:flex; gap:10px; align-items:flex-start; margin:10px 0; color: rgba(255,255,255,.80)}
  .footer__bottom{
    border-top:1px solid rgba(255,255,255,.10);
  }
  .footer__bottomInner{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding: 16px 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
  }
  .footer__cta{color:#fff; font-weight:900}
  .footer__cta:hover{color: rgba(255,255,255,.85)}
  
  /* Footer móvil: más compacto y mejor uso del espacio */
  @media (max-width: 980px){
    .footer__grid{
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 28px 0 20px;
    }
    .footer__brand{
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .footer__logo{width: 40px; height: 40px; flex-shrink: 0}
    .footer__desc{
      margin: 0;
      font-size: 13px;
      line-height: 1.4;
    }
    .footer__grid .footer__col{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 20px;
    }
    .footer__grid .footer__col:nth-child(2){
      grid-template-columns: 1fr;
    }
    .footer__grid .footer__col:nth-child(3) h3{
      grid-column: 1 / -1;
    }
    .footer__col h3{
      margin: 0 0 8px;
      font-size: 14px;
    }
    .footer__col a{margin: 4px 0; font-size: 13px}
    .footer__item{
      margin: 4px 0;
      font-size: 13px;
      gap: 8px;
    }
    .footer__item .icon{flex-shrink: 0}
    .footer__bottomInner{
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 14px 0;
      font-size: 12px;
      text-align: center;
    }
    .footer__bottomInner span{text-align: center; width: 100%}
    .footer__cta{font-size: 13px}
  }
  
  /* Floating WhatsApp */
  .whatsapp{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index: 40;
    display:flex;
    align-items:center;
    gap:10px;
    background: linear-gradient(135deg, #1aa86b, #0f7b4d);
    color:#fff;
    padding: 12px 14px;
    border-radius: 999px;
    box-shadow: 0 18px 60px rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.14);
    transition: transform .25s var(--ease);
  }
  .whatsapp:hover{transform: translateY(-2px)}
  .whatsapp__icon::before{content:"🟢"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px}
  .whatsapp__text{font-weight:900; font-size:13px}
  
  /* Back to top */
  .toTop{
    position:fixed;
    right:18px;
    bottom:86px;
    width:44px; height:44px;
    border-radius: 16px;
    border:1px solid rgba(11,11,11,.12);
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 55px rgba(0,0,0,.12);
    cursor:pointer;
    display:grid;
    place-items:center;
    opacity:0;
    transform: translateY(12px);
    pointer-events:none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .toTop.is-show{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  
  /* Toast */
  .toast{
    position:fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: rgba(11,11,11,.86);
    color:#fff;
    padding: 12px 14px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 55px rgba(0,0,0,.22);
    display:flex;
    align-items:center;
    gap:10px;
    z-index: 50;
  }
  .toast__dot{
    width:10px; height:10px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 6px rgba(215,38,27,.18);
  }
  .toast__text{font-weight:900}
  
  /* Reveal animations */
  .reveal{opacity:0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.reveal-left{transform: translateX(14px)}
  .reveal.reveal-right{transform: translateX(-14px)}
  .reveal.is-visible{opacity:1; transform: translate(0,0)}
  
  /* Espacio para topbar + header fixed: contenido no queda tapado */
  main{padding-top:130px}
  
  /* Responsive */
  /* Escritorio: menú normal visible, más margen lateral en toda la página */
  @media (min-width: 981px){
    .nav{display:flex}
    .burger{display:none !important}
    #mobileMenu,.mobile{display:none !important; visibility:hidden; pointer-events:none}
    .container,.header .container,.topbar .container{
      width:min(var(--container), calc(100% - 96px));
    }
  }
  /* Móvil/tablet: fila 1 = ubicación + botones, fila 2 = logo + hamburguesa; menos altura */
  @media (max-width: 980px){
    .nav{display:none}
    .burger{display:flex}
    main{overflow-x:hidden; max-width:100%; padding-top:100px}
    .container,.header .container{
      width:calc(100% - 48px);
      max-width:calc(100% - 48px);
      margin-inline:auto;
      padding-inline:0;
    }
    .topbar__right{display:none}
    .topbar__actions--mobile{display:flex; align-items:center; gap:6px; flex-shrink:0}
    .topbar__inner{padding:8px 0; flex-wrap:nowrap; gap:10px}
    .topbar__left .topbar__item{display:none}
    .topbar__left .chip{margin:0}
    .header{top:40px}
    .header__inner{
      flex-direction:row;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:8px 0;
    }
    .header__btns{display:none}
    .header__actions{flex:0 0 auto}
    .brand{
      flex-direction:row;
      align-items:center;
      text-align:left;
      min-width:unset;
      gap:10px;
    }
    .brand__text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.05}
    .brand__logo{width:40px; height:40px}
    .hero__inner{grid-template-columns: 1fr; gap:16px}
    .hero__trust{grid-template-columns: 1fr; }
    .grid4{grid-template-columns: repeat(2, minmax(0,1fr))}
    .licenseGrid{grid-template-columns: 1fr}
    .impact__inner{grid-template-columns: 1fr}
    .impactCard img{height: 200px}
    .testGrid{grid-template-columns: repeat(2, minmax(0,1fr))}
    .gallery{grid-template-columns: 1fr}
    .gallery__big img{height: 340px}
    
    /* CTA final móvil: legible, sin recortes, espacios claros */
    .ctaFinal__inner{
      grid-template-columns: 1fr;
      padding: 40px 0 36px;
      gap: 28px;
    }
    .ctaFinal__left h2{font-size: clamp(22px, 5.5vw, 28px); line-height: 1.2}
    .ctaFinal__left p{font-size: 15px; margin-bottom: 18px}
    .ctaFinal__buttons{gap: 10px}
    .ctaFinal__buttons .btn{padding: 12px 16px; font-size: 14px}
    .ctaCard{
      padding: 20px 18px;
      border-radius: 24px;
    }
    .ctaCard__top{
      gap: 8px 10px;
      margin-bottom: 16px;
    }
    .ctaCard__top .pill{padding: 8px 12px; font-size: 12px}
    .ctaCard__mid{
      gap: 12px;
      margin: 16px 0 20px;
    }
    .ctaCard__row{
      gap: 10px;
      font-size: 14px;
      align-items: flex-start;
    }
    .ctaCard__row .icon{flex-shrink: 0; margin-top: 2px}
    .ctaCard__rowText{
      min-width: 0;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .ctaCard__rowText a{word-break: break-all}
  }
  @media (max-width: 560px){
    .brand{min-width:unset}
    .grid4{grid-template-columns: 1fr}
    .statsGrid{grid-template-columns: 1fr}
    .testGrid{grid-template-columns: 1fr}
    .whatsapp__text{display:none}
  }
  
  /* ===========================
     Mobile Carousels (solo en celular)
     Convierte secciones con cards en slider:
     - 1 card por pantalla
     - Flechas animadas
     - Auto-avanza cada 8s (JS)
     =========================== */
  .carousel{
    position: relative;
  }
  
  .carousel__track{
    will-change: transform;
  }
  
  .carousel__btn{
    display:none;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(11,11,11,.62);
    color: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
    cursor:pointer;
    z-index: 3;
    place-items:center;
    transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  }
  
  .carousel__btn--prev{ left: 10px; }
  .carousel__btn--next{ right: 10px; }
  
  .carousel__btn::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius: 22px;
    background: radial-gradient(circle at 30% 30%, rgba(215,38,27,.35), rgba(215,38,27,0) 60%);
    opacity:.0;
    transition: opacity .25s var(--ease);
    pointer-events:none;
  }
  
  .carousel__btn:hover{
    transform: translateY(-50%) scale(1.04);
    background: rgba(11,11,11,.74);
    box-shadow: 0 22px 55px rgba(0,0,0,.28);
  }
  .carousel__btn:hover::after{ opacity: 1; }
  
  .carousel__btn:active{
    transform: translateY(-50%) scale(.98);
  }
  
  .carousel__icon{
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    transform: translateY(-1px);
  }
  
  .carousel__btn.is-bump{
    animation: bump .28s var(--ease) both;
  }
  @keyframes bump{
    0%{ transform: translateY(-50%) scale(1); }
    55%{ transform: translateY(-50%) scale(1.10); }
    100%{ transform: translateY(-50%) scale(1); }
  }
  
  /* Pequeña animación “respirar” para llamar la atención */
  @keyframes arrowPulse{
    0%,100%{ transform: translateY(-50%) }
    50%{ transform: translateY(calc(-50% - 4px)) }
  }
  
  .carousel.is-enabled .carousel__btn{
    display:grid;
    animation: arrowPulse 1.9s ease-in-out infinite;
  }
  .carousel.is-enabled .carousel__btn[aria-disabled="true"]{
    opacity:.4;
    pointer-events:none;
    cursor:default;
  }
  
  .carousel.is-enabled{
    padding-inline: 64px; /* espacio para flechas */
    overflow: hidden;
  }
  
  .carousel.is-enabled .carousel__track{
    display:flex !important;
    gap:0 !important;
    overflow:visible;
    border-radius: 0;
    transition: transform .55s var(--ease);
  }
  
  .carousel.is-enabled .carousel__track > *{
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
  }
  
  /* Licencias: mismo tamaño en móvil (misma altura todas las cards) */
  .carousel[data-carousel="licenses"].is-enabled .carousel__track > *{
    display:flex;
    align-items:stretch;
  }
  .carousel[data-carousel="licenses"].is-enabled .carousel__track .licenseCard{
    width:100%;
    min-height:100%;
    display:flex;
    flex-direction:column;
  }
  .carousel[data-carousel="licenses"].is-enabled .carousel__track .licenseCard__body{
    flex:1;
    display:flex;
    flex-direction:column;
  }
  .carousel[data-carousel="licenses"].is-enabled .carousel__track .licenseCard__body p{
    flex:1;
  }
  
  /* Evita que las cards queden pegadas al borde en slider */
  .carousel.is-enabled .carousel__track > *{
    padding-inline: 2px;
  }
  
  /* En sliders oscuros, sube contraste de flechas */
  .impact .carousel__btn,
  .ctaFinal .carousel__btn{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.18);
  }
  
  
  /* ===========================
     Banner full width (antes del hero)
     =========================== */
  
  .bannerHero{
    width: 100%;
    max-width: 100vw;
    background: #000;
    position: relative;
    overflow-x: hidden;
  }
  
  .bannerHero__media{
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  
  /* Alto real: NO recorta, muestra la imagen completa */
  .bannerHero__img{
    width: 100%;
    height: auto;          /* clave: mantiene alto real */
    display: block;
  }
  
  /* Sombra suave para que el texto se lea (sin tapar la foto) */
  .bannerHero__shade{
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%);
    pointer-events:none;
  }
  
  /* Contenedor del texto encima del banner */
  .bannerHero__content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    padding-right: clamp(14px, 4vw, 56px);
    padding-left: 14px;
    pointer-events:none;
  }
  
  /* Caja roja grande */
  .bannerHero__box{
    background: var(--brand);
    padding: clamp(14px, 2.2vw, 26px) clamp(16px, 2.5vw, 34px);
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
  }
  
  /* Título en bloque, estilo fuerte */
  .bannerHero__title{
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: .92;
    text-transform: uppercase;
    font-size: clamp(28px, 5vw, 76px);
    text-align: left;
  }
  
  .bannerHero__title .line{
    display:block;
  }
  
  /* Subtítulo blanco debajo */
  .bannerHero__sub{
    margin-top: 14px;
    color: rgba(255,255,255,.95);
    font-weight: 800;
    font-size: clamp(16px, 2.2vw, 30px);
    line-height: 1.05;
    text-align: right;
    text-transform: lowercase;
    text-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
  
  /* Animaciones de entrada */
  .revealBanner{
    opacity: 0;
    transform: translateY(16px);
  }
  
  .revealBanner.is-visible{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  
  .revealBanner--delay.is-visible{
    transition-delay: .14s;
  }
  
  /* Animación extra del texto (como “impact”) */
  .bannerHero__box.is-visible .line--1{
    animation: bannerSlideIn .75s var(--ease) both;
  }
  .bannerHero__box.is-visible .line--2{
    animation: bannerSlideIn .75s var(--ease) both;
    animation-delay: .08s;
  }
  @keyframes bannerSlideIn{
    0%{ transform: translateX(18px); opacity:0; }
    100%{ transform: translateX(0); opacity:1; }
  }
  
  /* Ajustes mobile: texto más pequeño y más a la derecha para no tapar la foto */
  @media (max-width: 700px){
    .bannerHero__content{
      align-items: flex-end;
      padding-left: 38%;
      padding-right: 14px;
      justify-content: center;
    }
    .bannerHero__box{
      padding: 10px 12px;
    }
    .bannerHero__title{
      font-size: clamp(18px, 5vw, 24px);
    }
    .bannerHero__sub{
      font-size: clamp(12px, 2.5vw, 16px);
      text-align: right;
      margin-top: 8px;
    }
  }