:root{
      --red:#d71920;
      --red-dark:#b40f16;
      --black:#070707;
      --black-2:#0d0f11;
      --black-3:#15171a;
      --white:#ffffff;
      --text:#f5f5f5;
      --muted:#b7b7b7;
      --line:#2c2f33;
      --paper:#f7f7f7;
      --ink:#141414;
      --placeholder:#777;
      --max:1024px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, Arial, Helvetica, sans-serif;
      color:var(--text);
      background:#090a0b;
    }
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}

    .page{
      width:100%;
      max-width:none;
      margin:0;
      overflow:hidden;
      background:#0b0c0d;
      box-shadow:none;
    }

    /* ---------- HEADER ---------- */
    .header{
      height:56px;
      padding:0 28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:#050505;
      border-bottom:1px solid #111;
      position:relative;
      z-index:20;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:150px;
    }
    .brand-cross{
      width:34px;height:34px;position:relative;flex:none;
    }
    .brand-cross::before,.brand-cross::after{
      content:"";position:absolute;background:#fff;border-radius:1px;
    }
    .brand-cross::before{width:12px;height:34px;left:11px;top:0}
    .brand-cross::after{height:12px;width:34px;left:0;top:11px}
    .brand-text{font-weight:800;line-height:.88;font-size:17px;letter-spacing:.1px}
    .brand-text span{color:var(--red)}

    .nav{
      display:flex;
      align-items:center;
      gap:27px;
      font-size:9px;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .nav a{
      height:56px;
      display:flex;
      align-items:center;
      position:relative;
      opacity:.95;
    }
    .nav a.active::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:10px;
      height:2px;background:var(--red);
    }
    .nav-cta{
      background:var(--red);
      padding:10px 18px;
      border-radius:3px;
      font-weight:700;
      display:flex;
      gap:8px;
      align-items:center;
      font-size:9px;
    }

    /* ---------- HERO ---------- */
    .hero{
      min-height:438px;
      display:grid;
      grid-template-columns:48% 52%;
      background:
        radial-gradient(circle at 32% 40%, rgba(34,34,34,.55), transparent 36%),
        #08090a;
    }
    .hero-copy{
      padding:39px 28px 24px 68px;
      position:relative;
      z-index:2;
    }
    .eyebrow{
      color:var(--red);
      text-transform:uppercase;
      font-weight:800;
      letter-spacing:.2px;
      font-size:12px;
      margin-bottom:10px;
    }
    h1{
      margin:0;
      font-size:36px;
      line-height:1.08;
      letter-spacing:-1.3px;
      max-width:430px;
    }
    h1 .accent{color:var(--red)}
    .hero-copy > p{
      max-width:370px;
      margin:17px 0 23px;
      color:#e7e7e7;
      line-height:1.62;
      font-size:12px;
    }
    .benefits{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0;
      max-width:410px;
    }
    .benefit{
      min-height:112px;
      padding:0 14px 0 0;
      margin-right:12px;
      border-right:1px solid #242629;
    }
    .benefit:last-child{border-right:0}
    .icon{
      width:36px;height:36px;
      border:2px solid var(--red);
      color:var(--red);
      border-radius:11px;
      display:grid;place-items:center;
      margin-bottom:9px;
      font-size:18px;
      font-weight:800;
    }
    .benefit b{
      display:block;
      font-size:10px;
      margin-bottom:7px;
    }
    .benefit small{
      display:block;
      color:#d6d6d6;
      font-size:8.5px;
      line-height:1.65;
    }

    .hero-media{position:relative;min-height:438px}
    .image-placeholder{
      width:100%;height:100%;
      background:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 40%),
        var(--placeholder);
      color:#efefef;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-weight:800;
      letter-spacing:.4px;
      position:relative;
      overflow:hidden;
    }
    .image-placeholder::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,.14) 50%, transparent 50.5%),
        linear-gradient(-45deg, transparent 49.5%, rgba(255,255,255,.14) 50%, transparent 50.5%);
      pointer-events:none;
    }
    .image-placeholder .ph-label{
      position:relative;
      z-index:2;
      background:rgba(0,0,0,.55);
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.35);
      border-radius:4px;
      line-height:1.35;
      font-size:13px;
    }
    .image-placeholder .ph-label small{
      font-weight:500;display:block;margin-top:4px;color:#ddd;
    }

    /* ---------- CONTACT PANEL ---------- */
    .contact-wrap{
      background:#0b0d0f;
      padding:0 26px 18px;
    }
    .contact-panel{
      min-height:405px;
      display:grid;
      grid-template-columns:47% 53%;
      margin-top:0;
      border-top:1px solid #1d1f22;
    }
    .form-side{
      background:#fafafa;
      color:var(--ink);
      padding:27px 26px;
    }
    .section-kicker{
      color:var(--red);
      text-transform:uppercase;
      font-size:10px;
      font-weight:800;
      margin-bottom:8px;
    }
    .form-side h2,.why h2{
      margin:0;
      font-size:20px;
      letter-spacing:-.45px;
    }
    .form-side .lead{
      color:#555;
      font-size:10px;
      margin:8px 0 22px;
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:11px 12px;
    }
    .form-grid input,.form-grid select,.form-grid textarea{
      border:1px solid #ddd;
      background:#fff;
      border-radius:3px;
      padding:11px;
      font-size:9.5px;
      width:100%;
      outline:none;
    }
    .form-grid textarea{
      grid-column:1/-1;
      min-height:86px;
      resize:vertical;
    }
    .check{
      margin:10px 0 11px;
      display:flex;
      align-items:flex-start;
      gap:7px;
      color:#666;
      font-size:8.5px;
    }
    .check input{margin:0}
    .submit{
      width:100%;
      border:0;
      color:#fff;
      background:linear-gradient(90deg,var(--red-dark),var(--red));
      height:38px;
      border-radius:3px;
      font-size:10px;
      font-weight:800;
      cursor:pointer;
    }

    .info-side{
      display:grid;
      grid-template-columns:52% 48%;
      background:
        radial-gradient(circle at 82% 35%, rgba(90,90,90,.15), transparent 37%),
        #101214;
      padding:28px 14px 18px 25px;
      gap:12px;
    }
    .info-title{
      grid-column:1/-1;
      color:var(--red);
      text-transform:uppercase;
      font-size:10px;
      font-weight:800;
      margin-bottom:0;
    }
    .info-list{min-width:0}
    .info-item{
      display:grid;
      grid-template-columns:44px 1fr;
      gap:10px;
      padding:11px 0;
      border-bottom:1px solid #2a2d31;
    }
    .info-item:last-child{border-bottom:0}
    .round-icon{
      width:40px;height:40px;
      border:1px solid #35393d;
      border-radius:50%;
      display:grid;place-items:center;
      color:var(--red);
      font-size:18px;
    }
    .info-item b{font-size:10px;display:block;margin-bottom:5px}
    .info-item strong{font-size:11px;display:block;margin-bottom:4px}
    .info-item small{color:#c6c6c6;font-size:8px;line-height:1.45;display:block}

    .map-col{min-width:0}
    .map-placeholder{
      height:236px;
      border-radius:2px;
    }
    .training-card{
      border:1px solid #35383c;
      margin-top:16px;
      min-height:97px;
      padding:17px 14px;
      display:grid;
      grid-template-columns:37px 1fr;
      gap:10px;
      align-items:start;
    }
    .training-card .truck{
      color:var(--red);font-size:25px;
    }
    .training-card b{font-size:10px;display:block;line-height:1.25}
    .training-card small{color:#d0d0d0;font-size:8px;line-height:1.55;display:block;margin-top:6px}

    /* ---------- WHY ---------- */
    .why{
      background:#f8f8f8;
      color:#171717;
      padding:23px 48px 28px;
      text-align:center;
    }
    .why .section-kicker{margin-bottom:7px}
    .why-grid{
      margin-top:19px;
      display:grid;
      grid-template-columns:repeat(5,1fr);
    }
    .why-item{
      padding:0 17px;
      border-right:1px solid #ddd;
    }
    .why-item:last-child{border-right:0}
    .why-icon{
      color:var(--red);
      font-size:32px;
      line-height:1;
      height:43px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .why-item b{
      font-size:10px;
      display:block;
      margin:7px 0 6px;
    }
    .why-item p{
      margin:0;
      color:#4a4a4a;
      font-size:8.5px;
      line-height:1.6;
    }

    /* ---------- CTA ---------- */
    .company-cta{
      min-height:158px;
      display:grid;
      grid-template-columns:49% 51%;
      background:#0c0e10;
    }
    .company-copy{
      padding:32px 28px 27px 68px;
      display:grid;
      grid-template-columns:85px 1fr;
      gap:20px;
      align-content:center;
    }
    .bubble{
      width:82px;height:60px;
      border:4px solid var(--red);
      border-radius:10px;
      position:relative;
    }
    .bubble::after{
      content:"";position:absolute;left:10px;bottom:-18px;
      width:24px;height:24px;border-left:4px solid var(--red);
      transform:skewY(-35deg);
    }
    .bubble::before{
      content:"";
      position:absolute;left:15px;right:15px;top:17px;height:4px;background:var(--red);
      box-shadow:0 13px 0 var(--red);
    }
    .company-copy h3{
      margin:0 0 8px;
      font-size:23px;
      line-height:1.05;
      letter-spacing:-.7px;
    }
    .company-copy p{margin:0;color:#d5d5d5;font-size:9.5px;line-height:1.55}
    .cta-media{position:relative;min-height:158px}
    .cta-actions{
      position:absolute;
      z-index:3;
      left:0;top:39px;
      width:205px;
      display:grid;
      gap:10px;
      transform:translateX(-12%);
    }
    .cta-actions a{
      min-height:36px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:2px;
      font-size:9px;
      font-weight:800;
    }
    .cta-actions a:first-child{background:var(--red)}
    .cta-actions a:last-child{border:1px solid #aaa;background:rgba(0,0,0,.45)}

    /* ---------- FOOTER ---------- */
    .footer{
      background:#121416;
      padding:24px 52px 14px;
      color:#eee;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .85fr 1.05fr 1.1fr;
      gap:42px;
      padding-bottom:19px;
    }
    .footer .brand{margin-bottom:14px}
    .footer p{
      font-size:9px;
      color:#d0d0d0;
      line-height:1.65;
      margin:0;
    }
    .social{display:flex;gap:18px;margin-top:18px;font-weight:800}
    .footer h4{
      font-size:9px;
      font-weight:500;
      text-transform:uppercase;
      color:#d9d9d9;
      margin:2px 0 14px;
    }
    .footer ul{list-style:none;padding:0;margin:0}
    .footer li{font-size:9px;line-height:1.8;color:#efefef}
    .footer li.active{color:var(--red)}
    .footer-contact .whatsapp{
      display:block;
      background:var(--red);
      text-align:center;
      margin-top:15px;
      padding:10px;
      font-size:8px;
      font-weight:800;
      border-radius:2px;
    }
    .footer-bottom{
      border-top:1px solid #2b2d30;
      padding-top:13px;
      display:flex;
      justify-content:space-between;
      gap:20px;
      font-size:8px;
      color:#a9a9a9;
    }
    .footer-links{display:flex;gap:38px}

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 860px){
      .header{padding:0 18px}
      .nav{display:none}
      .hero{grid-template-columns:1fr}
      .hero-copy{padding:36px 28px}
      .hero-media{min-height:360px}
      .contact-panel{grid-template-columns:1fr}
      .info-side{grid-template-columns:1fr 1fr}
      .why-grid{grid-template-columns:1fr 1fr;gap:26px}
      .why-item{border-right:0}
      .company-cta{grid-template-columns:1fr}
      .company-copy{padding:30px 34px}
      .cta-media{min-height:230px}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 560px){
      h1{font-size:34px}
      .benefits{grid-template-columns:1fr;gap:16px}
      .benefit{border-right:0;border-bottom:1px solid #242629;padding-bottom:13px}
      .form-grid{grid-template-columns:1fr}
      .form-grid textarea{grid-column:1}
      .info-side{grid-template-columns:1fr}
      .info-title{grid-column:1}
      .why{padding:28px 22px}
      .why-grid{grid-template-columns:1fr}
      .company-copy{grid-template-columns:1fr}
      .cta-actions{left:20px;transform:none}
      .footer{padding:26px 24px 14px}
      .footer-grid{grid-template-columns:1fr}
      .footer-bottom{flex-direction:column}
    }
  
    /* =========================================================
       AJUSTE V3: ANCHO COMPLETO + TIPOGRAFÍA GRANDE
       Mantiene las secciones a 100% de ancho, pero escala
       textos, espacios y paneles para pantallas grandes.
       ========================================================= */

    :root{
      --content-max: 1600px;
    }

    body{
      font-size:16px;
    }

    /* Header más grande, similar a la referencia */
    .header{
      min-height:76px;
      height:76px;
      padding-left:clamp(28px, 4vw, 76px);
      padding-right:clamp(28px, 4vw, 76px);
    }

    .brand{
      min-width:190px;
      gap:13px;
    }

    .brand-cross{
      width:42px;
      height:42px;
    }

    .brand-cross::before{
      width:14px;
      height:42px;
      left:14px;
    }

    .brand-cross::after{
      height:14px;
      width:42px;
      top:14px;
    }

    .brand-text{
      font-size:22px;
      line-height:.9;
    }

    .nav{
      gap:clamp(18px, 2vw, 40px);
      font-size:clamp(10px, .72vw, 14px);
    }

    .nav a{
      height:76px;
    }

    .nav a.active::after{
      bottom:15px;
      height:3px;
    }

    .nav-cta{
      padding:13px 23px;
      font-size:clamp(10px, .72vw, 14px);
    }

    /* HERO */
    .hero{
      min-height:clamp(540px, 42vw, 760px);
      grid-template-columns:48% 52%;
    }

    .hero-copy{
      padding:
        clamp(48px, 4.5vw, 86px)
        clamp(26px, 3.5vw, 68px)
        clamp(36px, 4vw, 72px)
        clamp(55px, 6vw, 125px);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .eyebrow{
      font-size:clamp(13px, .9vw, 18px);
      margin-bottom:16px;
    }

    h1{
      font-size:clamp(42px, 3.6vw, 72px);
      line-height:1.04;
      letter-spacing:-1.8px;
      max-width:760px;
    }

    .hero-copy > p{
      max-width:620px;
      margin:24px 0 34px;
      font-size:clamp(15px, 1vw, 20px);
      line-height:1.6;
    }

    .benefits{
      max-width:720px;
      grid-template-columns:repeat(3,1fr);
    }

    .benefit{
      min-height:155px;
      padding-right:22px;
      margin-right:20px;
    }

    .icon{
      width:48px;
      height:48px;
      font-size:24px;
      border-radius:13px;
      margin-bottom:14px;
    }

    .benefit b{
      font-size:clamp(12px, .83vw, 16px);
      margin-bottom:9px;
    }

    .benefit small{
      font-size:clamp(11px, .7vw, 14px);
      line-height:1.55;
    }

    .hero-media{
      min-height:clamp(540px, 42vw, 760px);
    }

    .image-placeholder .ph-label{
      font-size:clamp(14px, 1vw, 18px);
      padding:14px 18px;
    }

    .image-placeholder .ph-label small{
      font-size:clamp(12px, .8vw, 15px);
    }

    /* CONTACTO */
    .contact-wrap{
      padding:0 clamp(24px, 2.6vw, 50px) clamp(24px, 2.6vw, 50px);
    }

    .contact-panel{
      width:100%;
      max-width:var(--content-max);
      margin-left:auto;
      margin-right:auto;
      min-height:520px;
      grid-template-columns:47% 53%;
    }

    .form-side{
      padding:clamp(34px, 3vw, 58px) clamp(30px, 3vw, 58px);
    }

    .section-kicker{
      font-size:clamp(12px, .8vw, 15px);
      margin-bottom:11px;
    }

    .form-side h2,
    .why h2{
      font-size:clamp(25px, 1.8vw, 36px);
      letter-spacing:-.7px;
    }

    .form-side .lead{
      font-size:clamp(12px, .82vw, 16px);
      margin:12px 0 28px;
    }

    .form-grid{
      gap:15px 16px;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea{
      padding:15px 16px;
      font-size:clamp(12px, .8vw, 15px);
      min-height:50px;
    }

    .form-grid textarea{
      min-height:125px;
    }

    .check{
      margin:14px 0 15px;
      font-size:clamp(11px, .7vw, 13px);
      gap:9px;
    }

    .submit{
      height:50px;
      font-size:clamp(12px, .8vw, 15px);
    }

    .info-side{
      padding:
        clamp(34px, 3vw, 58px)
        clamp(20px, 2vw, 38px)
        clamp(28px, 2.5vw, 48px)
        clamp(28px, 2.5vw, 48px);
      gap:18px;
    }

    .info-title{
      font-size:clamp(12px, .8vw, 15px);
    }

    .info-item{
      grid-template-columns:58px 1fr;
      gap:14px;
      padding:15px 0;
    }

    .round-icon{
      width:52px;
      height:52px;
      font-size:23px;
    }

    .info-item b{
      font-size:clamp(12px, .8vw, 15px);
      margin-bottom:6px;
    }

    .info-item strong{
      font-size:clamp(13px, .88vw, 17px);
      margin-bottom:5px;
    }

    .info-item small{
      font-size:clamp(10px, .68vw, 13px);
    }

    .map-placeholder{
      height:clamp(280px, 21vw, 390px);
    }

    .training-card{
      min-height:125px;
      margin-top:20px;
      padding:21px 18px;
      grid-template-columns:45px 1fr;
    }

    .training-card .truck{
      font-size:31px;
    }

    .training-card b{
      font-size:clamp(12px, .8vw, 15px);
    }

    .training-card small{
      font-size:clamp(10px, .68vw, 13px);
      margin-top:8px;
    }

    /* POR QUÉ CONTACTARME */
    .why{
      padding:clamp(34px, 3.5vw, 62px) clamp(40px, 5vw, 100px);
    }

    .why-grid{
      max-width:var(--content-max);
      margin:30px auto 0;
    }

    .why-item{
      padding:0 clamp(18px, 1.8vw, 34px);
    }

    .why-icon{
      font-size:46px;
      height:60px;
    }

    .why-item b{
      font-size:clamp(12px, .82vw, 16px);
      margin:10px 0 9px;
    }

    .why-item p{
      font-size:clamp(11px, .72vw, 14px);
      line-height:1.6;
    }

    /* CTA EMPRESAS */
    .company-cta{
      min-height:clamp(220px, 17vw, 310px);
    }

    .company-copy{
      padding:
        clamp(40px, 4vw, 76px)
        clamp(28px, 3vw, 60px)
        clamp(38px, 4vw, 72px)
        clamp(55px, 6vw, 125px);
      grid-template-columns:110px 1fr;
      gap:28px;
    }

    .bubble{
      width:105px;
      height:77px;
    }

    .company-copy h3{
      font-size:clamp(28px, 2.2vw, 44px);
      margin-bottom:13px;
    }

    .company-copy p{
      font-size:clamp(12px, .82vw, 16px);
      max-width:510px;
    }

    .cta-media{
      min-height:clamp(220px, 17vw, 310px);
    }

    .cta-actions{
      top:50%;
      transform:translate(-12%, -50%);
      width:clamp(240px, 18vw, 340px);
      gap:13px;
    }

    .cta-actions a{
      min-height:48px;
      font-size:clamp(11px, .75vw, 14px);
    }

    /* FOOTER */
    .footer{
      padding:
        clamp(34px, 3.4vw, 64px)
        clamp(45px, 5vw, 100px)
        20px;
    }

    .footer-grid{
      max-width:var(--content-max);
      margin:0 auto;
      grid-template-columns:1.25fr .85fr 1.05fr 1.1fr;
      gap:clamp(36px, 4vw, 80px);
      padding-bottom:28px;
    }

    .footer .brand{
      margin-bottom:18px;
    }

    .footer p{
      font-size:clamp(11px, .75vw, 14px);
    }

    .footer h4{
      font-size:clamp(11px, .75vw, 14px);
      margin-bottom:18px;
    }

    .footer li{
      font-size:clamp(11px, .74vw, 14px);
      line-height:1.9;
    }

    .footer-contact .whatsapp{
      margin-top:20px;
      padding:13px 10px;
      font-size:clamp(10px, .7vw, 13px);
    }

    .footer-bottom{
      max-width:var(--content-max);
      margin:0 auto;
      padding-top:17px;
      font-size:clamp(10px, .68vw, 13px);
    }

    /* Tablet */
    @media (max-width: 1100px){
      .header{
        height:66px;
        min-height:66px;
      }

      .nav{
        gap:14px;
        font-size:9px;
      }

      .nav a{
        height:66px;
      }

      .brand-text{
        font-size:19px;
      }

      h1{
        font-size:clamp(38px, 5vw, 54px);
      }

      .hero-copy > p{
        font-size:15px;
      }
    }

    /* Móvil: conserva texto cómodo de leer */
    @media (max-width: 860px){
      .hero-copy{
        padding:48px 30px;
      }

      .hero-media{
        min-height:420px;
      }

      .contact-wrap{
        padding:0 16px 22px;
      }

      .contact-panel{
        max-width:760px;
      }

      .form-side,
      .info-side{
        padding:34px 24px;
      }

      .info-side{
        grid-template-columns:1fr 1fr;
      }

      .company-copy{
        padding:40px 30px;
      }

      .footer{
        padding:36px 28px 18px;
      }
    }

    @media (max-width: 560px){
      h1{
        font-size:38px;
      }

      .form-side h2,
      .why h2{
        font-size:26px;
      }

      .info-side{
        grid-template-columns:1fr;
      }

      .why-grid{
        gap:32px;
      }

      .why-item b{
        font-size:15px;
      }

      .why-item p{
        font-size:13px;
      }

      .company-copy h3{
        font-size:31px;
      }

      .footer li,
      .footer p{
        font-size:13px;
      }
    }

  
    /* ===== MENÚ FIJO ===== */
    .header{
      position:fixed !important;
      top:0;
      left:0;
      right:0;
      width:100%;
      z-index:1000;
      box-shadow:0 8px 24px rgba(0,0,0,.22);
    }

    .page{
      padding-top:76px;
    }

    @media (max-width:1100px){
      .page{ padding-top:66px; }
    }

    /* ===== WHATSAPP FLOTANTE + MINI CHAT ===== */
    .whatsapp-float{
      position:fixed;
      right:26px;
      bottom:118px;
      z-index:1200;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:12px;
      transition:bottom .25s ease;
    }

    body.cookies-hidden .whatsapp-float{
      bottom:26px;
    }

    .wa-bubble{
      width:62px;
      height:62px;
      border-radius:50%;
      border:0;
      background:#25D366;
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      box-shadow:0 10px 30px rgba(0,0,0,.28);
      font-size:29px;
      font-weight:800;
      transition:transform .2s ease, box-shadow .2s ease;
    }

    .wa-bubble:hover{
      transform:translateY(-2px) scale(1.03);
      box-shadow:0 14px 34px rgba(0,0,0,.34);
    }

    .wa-chat{
      width:min(360px, calc(100vw - 32px));
      background:#fff;
      color:#1c1c1c;
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 18px 50px rgba(0,0,0,.35);
      opacity:0;
      transform:translateY(12px) scale(.98);
      pointer-events:none;
      transition:.22s ease;
    }

    .wa-chat.open{
      opacity:1;
      transform:translateY(0) scale(1);
      pointer-events:auto;
    }

    .wa-chat-header{
      background:#075E54;
      color:#fff;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .wa-chat-title{
      display:flex;
      align-items:center;
      gap:11px;
      min-width:0;
    }

    .wa-avatar{
      width:42px;
      height:42px;
      border-radius:50%;
      background:#25D366;
      display:grid;
      place-items:center;
      font-size:20px;
      flex:none;
    }

    .wa-chat-title strong{
      display:block;
      font-size:14px;
      line-height:1.2;
    }

    .wa-chat-title small{
      display:block;
      margin-top:3px;
      font-size:11px;
      opacity:.85;
    }

    .wa-close{
      border:0;
      background:transparent;
      color:#fff;
      font-size:24px;
      cursor:pointer;
      line-height:1;
      padding:2px 4px;
    }

    .wa-chat-body{
      padding:18px;
      background:#efeae2;
    }

    .wa-msg{
      max-width:90%;
      background:#fff;
      border-radius:8px 8px 8px 2px;
      padding:11px 12px;
      font-size:13px;
      line-height:1.5;
      box-shadow:0 1px 2px rgba(0,0,0,.08);
      margin-bottom:14px;
    }

    .wa-chat textarea{
      width:100%;
      min-height:92px;
      resize:none;
      border:1px solid #ddd;
      border-radius:10px;
      padding:12px 13px;
      font-size:13px;
      outline:none;
      background:#fff;
      color:#222;
    }

    .wa-chat textarea:focus{
      border-color:#25D366;
      box-shadow:0 0 0 3px rgba(37,211,102,.12);
    }

    .wa-send{
      width:100%;
      margin-top:10px;
      min-height:46px;
      border:0;
      border-radius:10px;
      background:#25D366;
      color:#fff;
      font-weight:800;
      cursor:pointer;
      font-size:13px;
    }

    /* ===== BANNER DE COOKIES ===== */
    .cookie-banner{
      position:fixed;
      left:18px;
      right:18px;
      bottom:18px;
      z-index:1100;
      max-width:1180px;
      margin:0 auto;
      background:#16181b;
      color:#fff;
      border:1px solid #2b2f34;
      box-shadow:0 14px 44px rgba(0,0,0,.36);
      border-radius:12px;
      padding:17px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
    }

    .cookie-banner.hidden{
      display:none;
    }

    .cookie-copy{
      max-width:760px;
    }

    .cookie-copy strong{
      display:block;
      font-size:14px;
      margin-bottom:5px;
    }

    .cookie-copy p{
      margin:0;
      color:#d1d1d1;
      font-size:12px;
      line-height:1.5;
    }

    .cookie-copy a{
      color:#fff;
      text-decoration:underline;
      text-underline-offset:2px;
    }

    .cookie-actions{
      display:flex;
      gap:10px;
      flex:none;
    }

    .cookie-actions button{
      min-height:40px;
      border-radius:7px;
      padding:0 16px;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
    }

    .cookie-reject{
      background:transparent;
      color:#fff;
      border:1px solid #555;
    }

    .cookie-accept{
      background:var(--red);
      color:#fff;
      border:1px solid var(--red);
    }

    @media (max-width:680px){
      .whatsapp-float{
        right:16px;
        bottom:170px;
      }

      body.cookies-hidden .whatsapp-float{
        bottom:16px;
      }

      .wa-bubble{
        width:56px;
        height:56px;
      }

      .cookie-banner{
        left:10px;
        right:10px;
        bottom:10px;
        padding:15px;
        flex-direction:column;
        align-items:stretch;
      }

      .cookie-actions{
        width:100%;
      }

      .cookie-actions button{
        flex:1;
      }
    }

  
    /* =========================================================
       RESPONSIVE FINAL
       Desktop / laptop / tablet / móvil
       ========================================================= */

    html, body{
      width:100%;
      max-width:100%;
      overflow-x:hidden;
    }

    img, svg, video{
      max-width:100%;
      height:auto;
    }

    .page{
      width:100%;
      max-width:none;
    }

    /* Texto legible: no bajar de 16px en contenido */
    body,
    p,
    li,
    label,
    input,
    textarea,
    select,
    button,
    .benefit b,
    .benefit small,
    .info-item b,
    .info-item strong,
    .info-item small,
    .training-card b,
    .training-card small,
    .why-item p,
    .footer p,
    .footer li,
    .footer-bottom,
    .cookie-copy p,
    .cookie-copy strong,
    .cookie-actions button,
    .wa-chat-title strong,
    .wa-chat-title small,
    .wa-msg,
    .wa-chat textarea,
    .wa-send{
      font-size:max(16px, 1rem);
    }

    /* El header sigue fijo */
    .header{
      height:88px;
      min-height:88px;
      padding:0 clamp(22px, 4vw, 76px);
    }

    .page{
      padding-top:88px;
    }

    .brand{
      flex:0 0 auto;
      min-width:auto;
    }

    .brand-text{
      font-size:22px;
    }

    .nav{
      flex:1 1 auto;
      justify-content:center;
      gap:clamp(14px, 1.65vw, 32px);
      margin:0 22px;
      font-size:16px;
    }

    .nav a{
      height:88px;
      font-size:clamp(14px, .82vw, 16px);
    }

    .nav-cta{
      flex:0 0 auto;
      font-size:16px;
      white-space:nowrap;
    }

    .mobile-menu-toggle{
      display:none;
      width:48px;
      height:48px;
      border:0;
      background:transparent;
      padding:10px;
      cursor:pointer;
      flex:0 0 auto;
    }

    .mobile-menu-toggle span{
      display:block;
      height:2px;
      width:100%;
      background:#fff;
      margin:6px 0;
      transition:transform .25s ease, opacity .25s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1){
      transform:translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2){
      opacity:0;
    }

    .mobile-menu-toggle.active span:nth-child(3){
      transform:translateY(-8px) rotate(-45deg);
    }

    /* HERO */
    .hero{
      width:100%;
      grid-template-columns:minmax(0, 48%) minmax(0, 52%);
      min-height:clamp(560px, 43vw, 780px);
    }

    .hero-copy{
      min-width:0;
      padding:
        clamp(50px, 4.5vw, 90px)
        clamp(28px, 4vw, 76px)
        clamp(42px, 4vw, 78px)
        clamp(48px, 6vw, 126px);
    }

    h1{
      max-width:760px;
      font-size:clamp(44px, 3.6vw, 72px);
      overflow-wrap:anywhere;
    }

    .hero-copy > p{
      max-width:650px;
      font-size:clamp(16px, 1vw, 20px);
    }

    .benefits{
      width:100%;
      max-width:760px;
      gap:18px;
    }

    .benefit{
      min-width:0;
      margin-right:0;
      padding-right:18px;
    }

    .hero-media{
      min-width:0;
      min-height:clamp(560px, 43vw, 780px);
    }

    /* CONTACTO */
    .contact-wrap{
      width:100%;
      padding:0 clamp(18px, 2.6vw, 50px) clamp(24px, 2.8vw, 54px);
    }

    .contact-panel{
      width:100%;
      max-width:1600px;
      margin:0 auto;
      grid-template-columns:minmax(0, 47%) minmax(0, 53%);
    }

    .form-side,
    .info-side,
    .info-list,
    .map-col{
      min-width:0;
    }

    .form-side{
      padding:clamp(32px, 3vw, 58px);
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea{
      width:100%;
      min-width:0;
      font-size:16px;
    }

    .info-side{
      grid-template-columns:minmax(0, 52%) minmax(0, 48%);
      padding:clamp(30px, 3vw, 58px) clamp(20px, 2.2vw, 42px);
    }

    .info-item{
      grid-template-columns:58px minmax(0,1fr);
    }

    .info-item strong,
    .info-item small{
      overflow-wrap:anywhere;
    }

    /* BENEFICIOS */
    .why{
      padding:clamp(36px, 4vw, 68px) clamp(24px, 5vw, 100px);
    }

    .why-grid{
      width:100%;
      max-width:1600px;
      margin-left:auto;
      margin-right:auto;
    }

    /* CTA EMPRESA */
    .company-cta{
      grid-template-columns:minmax(0, 49%) minmax(0, 51%);
    }

    .company-copy,
    .cta-media{
      min-width:0;
    }

    .cta-actions{
      max-width:calc(100% - 20px);
    }

    /* FOOTER */
    .footer-grid,
    .footer-bottom{
      width:100%;
      max-width:1600px;
      margin-left:auto;
      margin-right:auto;
    }

    .footer-grid > *{
      min-width:0;
    }

    /* =========================
       LAPTOP PEQUEÑA / TABLET
       ========================= */
    @media (max-width:1200px){

      .header{
        height:78px;
        min-height:78px;
        padding:0 24px;
      }

      .page{
        padding-top:78px;
      }

      .brand-text{
        font-size:20px;
      }

      .nav{
        gap:16px;
        margin:0 16px;
      }

      .nav a{
        height:78px;
        font-size:14px;
      }

      .nav-cta{
        padding:12px 15px;
        font-size:14px;
      }

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

      .hero-copy{
        padding:54px 38px 48px 46px;
      }

      h1{
        font-size:clamp(40px, 4.7vw, 58px);
      }

      .benefits{
        grid-template-columns:1fr;
        gap:0;
      }

      .benefit{
        display:grid;
        grid-template-columns:48px 1fr;
        column-gap:15px;
        min-height:auto;
        padding:14px 0;
        border-right:0;
        border-bottom:1px solid #242629;
      }

      .benefit:last-child{
        border-bottom:0;
      }

      .benefit .icon{
        grid-row:1 / span 2;
        margin-bottom:0;
      }

      .benefit b,
      .benefit small{
        grid-column:2;
      }

      .contact-panel{
        grid-template-columns:1fr;
      }

      .info-side{
        grid-template-columns:1fr 1fr;
      }

      .why-grid{
        grid-template-columns:repeat(3, 1fr);
        row-gap:34px;
      }

      .why-item{
        border-right:1px solid #ddd;
      }

      .why-item:nth-child(3){
        border-right:0;
      }

      .company-cta{
        grid-template-columns:1fr 1fr;
      }

      .footer-grid{
        grid-template-columns:1.2fr 1fr 1fr;
      }

      .footer-contact{
        grid-column:1 / -1;
      }
    }

    /* =========================
       TABLET + MENÚ HAMBURGUESA
       ========================= */
    @media (max-width:980px){

      .header{
        height:72px;
        min-height:72px;
        padding:0 20px;
      }

      .page{
        padding-top:72px;
      }

      .mobile-menu-toggle{
        display:block;
        order:3;
      }

      .nav-cta{
        margin-left:auto;
        margin-right:8px;
        order:2;
      }

      .nav{
        position:fixed;
        top:72px;
        left:0;
        right:0;
        width:100%;
        height:auto;
        max-height:calc(100dvh - 72px);
        overflow-y:auto;
        margin:0;
        padding:12px 20px 22px;
        background:#050505;
        border-top:1px solid #1d1d1d;
        border-bottom:1px solid #1d1d1d;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        transform:translateY(-130%);
        visibility:hidden;
        opacity:0;
        transition:transform .28s ease, opacity .28s ease, visibility .28s;
        z-index:999;
      }

      .nav.open{
        transform:translateY(0);
        visibility:visible;
        opacity:1;
      }

      .nav a{
        width:100%;
        height:auto;
        min-height:52px;
        padding:15px 4px;
        font-size:16px;
        border-bottom:1px solid #1c1c1c;
      }

      .nav a.active::after{
        left:0;
        right:auto;
        bottom:7px;
        width:44px;
      }

      .hero{
        grid-template-columns:1fr;
        min-height:auto;
      }

      .hero-copy{
        padding:56px clamp(24px, 6vw, 60px);
      }

      .hero-copy > p{
        max-width:720px;
      }

      .benefits{
        grid-template-columns:repeat(3,1fr);
        gap:0;
        max-width:100%;
      }

      .benefit{
        display:block;
        min-height:160px;
        padding:0 20px 0 0;
        margin-right:20px;
        border-bottom:0;
        border-right:1px solid #242629;
      }

      .benefit:last-child{
        border-right:0;
      }

      .benefit .icon{
        margin-bottom:14px;
      }

      .hero-media{
        min-height:clamp(400px, 58vw, 600px);
      }

      .info-side{
        grid-template-columns:1fr 1fr;
      }

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

      .why-item,
      .why-item:nth-child(3){
        border-right:0;
        border-bottom:1px solid #ddd;
        padding-bottom:28px;
      }

      .why-item:last-child{
        grid-column:1 / -1;
        border-bottom:0;
      }

      .company-cta{
        grid-template-columns:1fr;
      }

      .company-copy{
        padding:48px clamp(24px, 6vw, 60px);
      }

      .cta-media{
        min-height:300px;
      }

      .cta-actions{
        left:50%;
        top:50%;
        width:min(360px, calc(100% - 40px));
        transform:translate(-50%, -50%);
      }

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

      .footer-contact{
        grid-column:auto;
      }
    }

    /* =========================
       MÓVIL
       ========================= */
    @media (max-width:680px){

      .header{
        height:68px;
        min-height:68px;
        padding:0 14px;
      }

      .page{
        padding-top:68px;
      }

      .nav{
        top:68px;
        max-height:calc(100dvh - 68px);
      }

      .brand-cross{
        width:34px;
        height:34px;
      }

      .brand-cross::before{
        width:12px;
        height:34px;
        left:11px;
      }

      .brand-cross::after{
        width:34px;
        height:12px;
        top:11px;
      }

      .brand-text{
        font-size:17px;
      }

      .nav-cta{
        display:none;
      }

      .mobile-menu-toggle{
        margin-left:auto;
      }

      .hero-copy{
        padding:42px 20px 38px;
      }

      h1{
        font-size:clamp(36px, 11vw, 48px);
        line-height:1.06;
        letter-spacing:-1.2px;
      }

      .hero-copy > p{
        margin:20px 0 26px;
        font-size:16px;
      }

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

      .benefit{
        display:grid;
        grid-template-columns:48px minmax(0,1fr);
        column-gap:14px;
        min-height:auto;
        margin:0;
        padding:16px 0;
        border-right:0;
        border-bottom:1px solid #242629;
      }

      .benefit:last-child{
        border-bottom:0;
      }

      .benefit .icon{
        grid-row:1 / span 2;
        margin:0;
      }

      .benefit b,
      .benefit small{
        grid-column:2;
      }

      .hero-media{
        min-height:360px;
      }

      .contact-wrap{
        padding:0;
      }

      .contact-panel{
        border-top:0;
      }

      .form-side,
      .info-side{
        padding:34px 20px;
      }

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

      .form-grid textarea{
        grid-column:1;
      }

      .info-side{
        grid-template-columns:1fr;
      }

      .info-title{
        grid-column:1;
      }

      .map-placeholder{
        height:330px;
      }

      .why{
        padding:38px 20px 42px;
      }

      .why-grid{
        grid-template-columns:1fr;
        gap:0;
      }

      .why-item,
      .why-item:nth-child(3),
      .why-item:last-child{
        grid-column:auto;
        border-right:0;
        border-bottom:1px solid #ddd;
        padding:24px 0;
      }

      .why-item:last-child{
        border-bottom:0;
      }

      .company-copy{
        grid-template-columns:1fr;
        gap:26px;
        padding:42px 20px;
      }

      .bubble{
        width:92px;
      }

      .cta-media{
        min-height:320px;
      }

      .footer{
        padding:38px 20px 20px;
      }

      .footer-grid{
        grid-template-columns:1fr;
        gap:34px;
      }

      .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
      }

      .footer-links{
        flex-wrap:wrap;
        gap:14px 24px;
      }

      /* WhatsApp */
      .whatsapp-float{
        right:12px;
        bottom:190px;
      }

      body.cookies-hidden .whatsapp-float{
        bottom:14px;
      }

      .wa-chat{
        width:min(360px, calc(100vw - 24px));
      }

      /* Cookies */
      .cookie-banner{
        left:10px;
        right:10px;
        bottom:10px;
        padding:16px;
        max-height:70dvh;
        overflow:auto;
      }

      .cookie-actions{
        flex-direction:column;
      }

      .cookie-actions button{
        width:100%;
        min-height:48px;
      }
    }

    /* =========================
       MÓVILES MUY PEQUEÑOS
       ========================= */
    @media (max-width:390px){

      .header{
        padding:0 10px;
      }

      .brand{
        gap:7px;
      }

      .brand-text{
        font-size:16px;
      }

      .hero-copy{
        padding-left:16px;
        padding-right:16px;
      }

      h1{
        font-size:34px;
      }

      .form-side,
      .info-side,
      .why,
      .company-copy,
      .footer{
        padding-left:16px;
        padding-right:16px;
      }

      .info-item{
        grid-template-columns:50px minmax(0,1fr);
      }

      .round-icon{
        width:46px;
        height:46px;
      }
    }

    /* Accesibilidad: reducir movimiento si el usuario lo pide */
    @media (prefers-reduced-motion: reduce){
      *,
      *::before,
      *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
      }
    }

  
    /* =========================================================
       TIPOGRAFÍA FINAL
       Escala equilibrada por contexto y tamaño de pantalla.
       ========================================================= */

    body{
      font-size:16px;
      line-height:1.55;
    }

    /* Navegación */
    .nav,
    .nav a{
      font-size:14px !important;
    }

    .nav-cta{
      font-size:14px !important;
    }

    .brand-text{
      font-size:21px !important;
    }

    /* Hero */
    .eyebrow{
      font-size:14px !important;
    }

    h1{
      font-size:clamp(42px, 3.6vw, 70px) !important;
      line-height:1.04;
    }

    .hero-copy > p{
      font-size:clamp(16px, 1vw, 19px) !important;
      line-height:1.65;
    }

    .benefit b{
      font-size:15px !important;
    }

    .benefit small{
      font-size:14px !important;
      line-height:1.55;
    }

    /* Secciones y formulario */
    .section-kicker{
      font-size:13px !important;
    }

    .form-side h2,
    .why h2{
      font-size:clamp(28px, 2vw, 38px) !important;
      line-height:1.15;
    }

    .form-side .lead{
      font-size:15px !important;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea{
      font-size:15px !important;
    }

    .check{
      font-size:13px !important;
      line-height:1.45;
    }

    .submit{
      font-size:14px !important;
    }

    /* Datos de contacto */
    .info-title{
      font-size:14px !important;
    }

    .info-item b{
      font-size:14px !important;
    }

    .info-item strong{
      font-size:16px !important;
    }

    .info-item small{
      font-size:13px !important;
      line-height:1.5;
    }

    .training-card b{
      font-size:14px !important;
    }

    .training-card small{
      font-size:13px !important;
    }

    /* Beneficios */
    .why-item b{
      font-size:15px !important;
    }

    .why-item p{
      font-size:14px !important;
      line-height:1.6;
    }

    /* CTA empresa */
    .company-copy h3{
      font-size:clamp(28px, 2.2vw, 42px) !important;
      line-height:1.08;
    }

    .company-copy p{
      font-size:15px !important;
      line-height:1.6;
    }

    .cta-actions a{
      font-size:14px !important;
    }

    /* Footer */
    .footer h4{
      font-size:13px !important;
    }

    .footer p,
    .footer li{
      font-size:13px !important;
    }

    .footer-bottom{
      font-size:12px !important;
    }

    .footer-contact .whatsapp{
      font-size:13px !important;
    }

    /* WhatsApp flotante */
    .wa-chat-title strong{
      font-size:14px !important;
    }

    .wa-chat-title small{
      font-size:12px !important;
    }

    .wa-msg,
    .wa-chat textarea,
    .wa-send{
      font-size:14px !important;
    }

    /* Cookies */
    .cookie-copy strong{
      font-size:14px !important;
    }

    .cookie-copy p{
      font-size:13px !important;
    }

    .cookie-actions button{
      font-size:13px !important;
    }

    /* Tablet */
    @media (max-width:980px){
      .nav a{
        font-size:16px !important;
      }

      .hero-copy > p{
        font-size:17px !important;
      }

      .benefit b{
        font-size:15px !important;
      }

      .benefit small{
        font-size:14px !important;
      }
    }

    /* Móvil */
    @media (max-width:680px){
      body{
        font-size:16px;
      }

      .brand-text{
        font-size:17px !important;
      }

      h1{
        font-size:clamp(36px, 10vw, 46px) !important;
      }

      .eyebrow{
        font-size:13px !important;
      }

      .hero-copy > p{
        font-size:16px !important;
      }

      .form-side h2,
      .why h2{
        font-size:28px !important;
      }

      /* 16px en formularios móviles evita zoom automático en iPhone */
      .form-grid input,
      .form-grid select,
      .form-grid textarea,
      .wa-chat textarea{
        font-size:16px !important;
      }

      .info-item strong{
        font-size:15px !important;
      }

      .company-copy h3{
        font-size:30px !important;
      }

      .footer p,
      .footer li{
        font-size:14px !important;
      }

      .footer-bottom{
        font-size:12px !important;
      }

      .cookie-copy p{
        font-size:13px !important;
      }
    }