/* Tipografía autoalojada: sin peticiones a terceros */
    @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
      src:url('/fuentes/inter-latin-400-normal.woff2') format('woff2');
      unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
      src:url('/fuentes/inter-latin-500-normal.woff2') format('woff2');
      unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
      src:url('/fuentes/inter-latin-600-normal.woff2') format('woff2');
      unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
      src:url('/fuentes/inter-latin-700-normal.woff2') format('woff2');
      unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
    @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
      src:url('/fuentes/inter-latin-800-normal.woff2') format('woff2');
      unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --red:#cc5a1c;      /* identidad: adornos, iconos, superficies grandes */
      --red-dark:#a84613; /* funcional: texto pequeño, enlaces y botones (5.9:1) */
      --red-soft:#fdf2ea;
      --red-deep:#83350e; /* sólo para el hover de los botones ya oscuros */
      --ink:#222221;--ink-2:#3a3a38;--gray:#5a6069;--gray-2:#8b9199;
      --line:#e4e6ea;--bg:#fff;--bg-soft:#f7f8fa;--bg-dark:#222221;
      --gold:#a67c1e;--max:1140px;
    }
    /* La barra de navegación es fija y mide 70 px. Sin esto, al saltar a una
       sección el encabezado queda escondido detrás de ella y el contenido
       aparece desplazado hacia arriba. */
    html{scroll-behavior:smooth;scroll-padding-top:86px}
    section[id]{scroll-margin-top:86px}

    /* Accesibilidad: respetar la preferencia del sistema de reducir el movimiento.
       Hace falta !important porque las transiciones están declaradas en clases,
       que tienen más especificidad que el selector universal. */
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        transition-delay:0s !important;
        scroll-behavior:auto !important;
      }
    }
    html,body{max-width:100%;overflow-x:clip}
    p,li,h1,h2,h3,h4,a,span,b{overflow-wrap:break-word}
    /* Partición de palabras: sólo en pantallas estrechas.
       En columna ancha no hace falta y afea el texto (Codex señaló bien que
       parte «responsabilidad»); en un móvil de 320 px, en cambio, evita los
       huecos enormes y que las palabras largas desborden. Se activa por
       debajo de 560 px y con lang="es", que es lo que hace que el navegador
       corte por sílabas y ponga el guion. */
    @media(max-width:560px){
      p,li{hyphens:auto;-webkit-hyphens:auto}
    }
    body{font-family:'Inter',-apple-system,sans-serif;color:var(--ink);background:var(--bg);
         line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
    /* Accesibilidad */
    .saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-dark);color:#fff;
            padding:12px 20px;font-weight:600;border-radius:0 0 7px 0}
    .saltar:focus{left:0}
    a:focus-visible,button:focus-visible,input:focus-visible{
      outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

    /* Redes sociales */
    .redes{display:flex;gap:10px;align-items:center}
    .red{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
         border:1px solid rgba(255,255,255,.16);transition:all .2s;flex-shrink:0}
    .red svg{width:17px;height:17px;fill:rgba(255,255,255,.72);transition:fill .2s}
    .red:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
    .red:hover svg{fill:#fff}
    /* variante clara, para la barra superior */
    .red-nav{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
             border:1px solid var(--line);transition:all .2s;flex-shrink:0}
    .red-nav svg{width:16px;height:16px;fill:var(--gray);transition:fill .2s}
    .red-nav:hover{background:var(--red);border-color:var(--red)}
    .red-nav:hover svg{fill:#fff}
    /* Los botones de redes van dentro de contenedores que dan padding y bordes
       a todos los <a>. Hay que devolverles su forma cuadrada. */
    .nav-links a.red-nav,.mob .redes a.red-nav{padding:0;border:1px solid var(--line)}

    /* NAV */
    /* Sin backdrop-filter a propósito. El fondo ya es blanco al 97 %, así que
       el desenfoque no se apreciaba, pero obligaba al navegador a rasterizar
       toda la barra en una capa aparte y eso hacía que el logotipo vectorial
       se viese pastoso en pantallas grandes. */
    .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
         border-bottom:1px solid var(--line)}
    .nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:70px;
            display:flex;align-items:center;justify-content:space-between;gap:20px}
    .logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
    .logo img{width:42px;height:42px;object-fit:contain}
    .logo .logo-h{width:auto;height:34px}
    .logo-inv{filter:brightness(0) invert(1)}
    .logo b{font-weight:800;font-size:1.05rem;letter-spacing:.045em}
    .nav-links{display:flex;gap:1px;list-style:none;align-items:center}
    .nav-links a{padding:9px 12px;font-size:.885rem;font-weight:500;color:var(--gray);
                 border-radius:6px;white-space:nowrap}
    .nav-links a:hover{color:var(--ink)}
    .nav-links a.cta{background:var(--red-dark);color:#fff;font-weight:600;margin-left:10px;
                     padding:10px 18px;white-space:nowrap}
    .nav-links a.cta:hover{background:var(--red-deep)}
    .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
    .burger span{width:23px;height:2px;background:var(--ink);border-radius:2px}
    .mob{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--line)}
    .mob.open{display:flex}
    .mob a{padding:15px 28px;font-weight:500;color:var(--gray);border-top:1px solid var(--line)}

    /* La barra completa necesita unos 950 px para los seis enlaces, el icono
       de LinkedIn y el botón. Entre 720 y 960 px el botón se partía en dos
       líneas y se salía de la barra: por eso el menú compacto entra antes. */
    @media(max-width:1080px){
      .nav-links{gap:0}
      .nav-links a{padding:9px 9px;font-size:.85rem}
      .nav-links a.cta{padding:10px 15px;margin-left:6px}
    }
    @media(max-width:1000px){
      .nav-links{display:none}
      .burger{display:flex}
    }

    /* HERO */
    .hero{padding:80px 0 64px;background:
      radial-gradient(ellipse 900px 420px at 12% -5%, var(--red-soft) 0%, transparent 62%),#fff}
    .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;
             letter-spacing:.12em;text-transform:uppercase;color:var(--red-dark);margin-bottom:20px}
    .eyebrow::before{content:'';width:26px;height:2px;background:var(--red)}
    h1,h2,h3,h4,.kpi strong,.eq strong,.zona,.tit,.cia{hyphens:none}
    h1{font-size:clamp(2rem,4vw,2.95rem);font-weight:800;line-height:1.14;
       letter-spacing:-.023em;margin-bottom:20px}
    h1 em{font-style:normal;color:var(--red)}
    .lead{font-size:1.1rem;color:var(--gray);max-width:570px;margin-bottom:30px}
    .btns{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:7px;
         font-size:.93rem;font-weight:600;transition:all .18s;border:1.5px solid transparent}
    .btn-1{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}
    .btn-1:hover{background:var(--red-deep);border-color:var(--red-deep)}
    .btn-2{background:#fff;color:var(--ink);border-color:var(--line)}
    .btn-2:hover{border-color:var(--gray-2)}

    .hero-card{background:var(--bg-dark);border-radius:14px;padding:34px;color:#fff}
    .hero-card h2{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
                  color:rgba(255,255,255,.48);margin-bottom:24px}
    .kpi{display:grid;grid-template-columns:1fr 1fr;gap:24px 18px}
    .kpi strong{display:block;font-size:1.95rem;font-weight:800;letter-spacing:-.022em;line-height:1.1}
    .kpi span{font-size:.82rem;color:rgba(255,255,255,.56);line-height:1.35;display:block;margin-top:3px;hyphens:none}

    /* PREMIO */
    .premio{background:var(--bg-dark);color:#fff;padding:34px 0;border-top:3px solid var(--gold)}
    .premio-in{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;text-align:center}
    .premio svg{width:38px;height:38px;stroke:var(--gold);fill:none;stroke-width:1.7;flex-shrink:0}
    .premio b{display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
    .premio p{font-size:.9rem;color:rgba(255,255,255,.62);margin-top:4px}
    .anios{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:11px}
    .anio{background:rgba(166,124,30,.16);border:1px solid rgba(166,124,30,.4);color:#d9b871;
          border-radius:4px;padding:3px 9px;font-size:.76rem;font-weight:600}

    /* SECCIONES */
    section{padding:82px 0}
    .soft{background:var(--bg-soft)}
    .dark{background:var(--bg-dark);color:#fff}
    .head{max-width:680px;margin-bottom:50px}
    .head.mid{margin-left:auto;margin-right:auto;text-align:center}
    h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;
       line-height:1.2;margin-bottom:15px}
    .head p{font-size:1.03rem;color:var(--gray)}
    .dark .head p{color:rgba(255,255,255,.62)}

    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
    .card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:30px 27px;transition:all .22s}
    .card:hover{border-color:var(--gray-2);box-shadow:0 10px 32px rgba(34,34,33,.08);transform:translateY(-2px)}
    .ico{width:43px;height:43px;border-radius:9px;background:var(--red-soft);
         display:flex;align-items:center;justify-content:center;margin-bottom:18px}
    .ico svg{width:21px;height:21px;stroke:var(--red);fill:none;stroke-width:1.9;
             stroke-linecap:round;stroke-linejoin:round}
    .card h3{font-size:1.03rem;font-weight:700;margin-bottom:9px;letter-spacing:-.008em}
    .card p{font-size:.92rem;color:var(--gray)}

    /* Dos modelos */
    .modelos{display:grid;grid-template-columns:1fr 1fr;gap:26px}
    .modelo{border:1px solid var(--line);border-radius:13px;padding:36px 32px;background:#fff;position:relative}
    .modelo.destacado{background:var(--bg-dark);color:#fff;border-color:var(--bg-dark)}
    .modelo .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;
                 text-transform:uppercase;padding:5px 11px;border-radius:4px;margin-bottom:18px}
    .modelo .tag{background:var(--red-soft);color:var(--red-dark)}
    .modelo.destacado .tag{background:var(--red-dark);color:#fff}
    .modelo h3{font-size:1.32rem;font-weight:800;letter-spacing:-.018em;margin-bottom:11px}
    .modelo>p{font-size:.96rem;color:var(--gray);margin-bottom:22px}
    .modelo.destacado>p{color:rgba(255,255,255,.72)}
    .modelo ul{list-style:none;display:flex;flex-direction:column;gap:11px}
    .modelo li{display:flex;gap:11px;align-items:flex-start;font-size:.91rem;color:var(--gray)}
    .modelo.destacado li{color:rgba(255,255,255,.85)}
    .modelo li b{color:var(--ink)}
    .modelo.destacado li b{color:#fff}
    .modelo li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);
                       flex-shrink:0;margin-top:9px}
    .aval{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
          font-size:.87rem;color:rgba(255,255,255,.7);line-height:1.6}
    .aval b{color:#fff}

    /* Galería de casos */
    .casos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
    .casos figure{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
    .casos img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
    .casos figcaption{padding:13px 15px;font-size:.79rem;color:var(--gray);line-height:1.45}
    .pie-casos{margin-top:14px;font-size:.8rem;color:var(--gray);font-style:italic}
    .pie-dron{margin-top:16px;font-size:.8rem;color:var(--gray);font-style:italic}

    /* Cobertura */
    .cob{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
    .zonas{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
    .zona{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 15px;font-size:.88rem;font-weight:500}
    .nac{background:var(--bg-dark);color:#fff;border-radius:11px;padding:30px}
    .nac h3{font-size:1.04rem;font-weight:700;margin-bottom:10px}
    .nac p{font-size:.92rem;color:rgba(255,255,255,.66);margin-bottom:16px}
    .hito{display:flex;gap:11px;align-items:flex-start;font-size:.89rem;color:rgba(255,255,255,.86);margin-bottom:9px}
    .hito b{color:#fff}
    .pin{color:var(--red-dark);font-weight:800;flex-shrink:0}

    /* Titulaciones */
    .tits{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
    .tit{background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 17px;font-size:.87rem;font-weight:500}
    .tit.alt{background:var(--red-soft);border-color:#f2ddcb;color:var(--red-dark)}

    /* Proceso */
    .pasos{display:grid;grid-template-columns:repeat(5,1fr)}
    .paso{position:relative;padding:0 14px}
    .paso::before{content:'';position:absolute;top:17px;left:0;right:0;height:2px;background:rgba(255,255,255,.14)}
    .paso:first-child::before{left:50%} .paso:last-child::before{right:50%}
    .num{position:relative;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;
         display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.16rem;
         margin:0 auto 16px;z-index:1}
    .paso h3{font-size:.93rem;font-weight:700;text-align:center;margin-bottom:6px}
    .paso p{font-size:.82rem;color:rgba(255,255,255,.58);text-align:center;line-height:1.5}

    /* Drones */
    /* Tarjeta con fotografía de ejemplo del propio servicio.
       La imagen va a sangre en la parte superior, así que el relleno pasa
       de la tarjeta al cuerpo interior. */
    .card-foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
    .card-foto .card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
                         background:var(--bg-soft)}
    .card-foto .card-cuerpo{padding:26px 27px 30px}
    .card-foto:hover .card-img{transform:none}
    .aesa{display:inline-flex;align-items:center;gap:9px;background:var(--red-soft);border:1px solid #f2ddcb;
          border-radius:7px;padding:11px 18px;font-size:.9rem;font-weight:600;color:var(--red-dark);margin-top:6px}
    .aesa svg{width:17px;height:17px;stroke:var(--red);fill:none;stroke-width:2.2}

    /* Compañías */
    .cias{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
    .cia{border:1px solid var(--line);border-radius:9px;padding:19px 32px;background:#fff;
         font-weight:700;font-size:1rem;letter-spacing:.035em;color:var(--ink-2);min-width:145px;text-align:center}

    /* Equipo */
    .eq{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
    .eq.eq-3{grid-template-columns:repeat(3,1fr)}
    .eq div{text-align:center;padding:26px 15px;background:#fff;border:1px solid var(--line);border-radius:11px}
    .eq strong{display:block;font-size:1.95rem;font-weight:800;color:var(--red);letter-spacing:-.022em}
    .eq span{font-size:.86rem;color:var(--gray);display:block;margin-top:5px;line-height:1.35;hyphens:none}

    /* Asistente */
    .asist{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
    .feats{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:13px}
    .feats li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--gray)}
    .feats svg{width:17px;height:17px;stroke:var(--red);fill:none;stroke-width:2.5;flex-shrink:0;margin-top:4px}
    .nota{margin-top:24px;padding:15px 19px;background:#fff;border-left:3px solid var(--red);
          border-radius:0 7px 7px 0;font-size:.86rem;color:var(--gray)}
    .chat{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
          box-shadow:0 14px 44px rgba(34,34,33,.10)}
    .chat-top{background:var(--bg-dark);padding:16px 20px;display:flex;align-items:center;gap:12px}
    .chat-top img{width:34px;height:34px;border-radius:7px;background:#fff;object-fit:contain;padding:3px}
    .chat-top b{color:#fff;font-size:.91rem;display:block;font-weight:600}
    .chat-top span{font-size:.75rem;color:rgba(255,255,255,.5)}
    .dot{display:inline-block;width:6px;height:6px;background:#3ddc84;border-radius:50%;margin-right:5px}
    .msgs{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:255px;max-height:325px;overflow-y:auto}
    .msg{max-width:88%;padding:11px 15px;border-radius:11px;font-size:.87rem;line-height:1.55}
    .msg.bot{background:var(--bg-soft);align-self:flex-start;border-bottom-left-radius:3px}
    .msg.user{background:var(--red-dark);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
    .sugs{display:flex;flex-wrap:wrap;gap:7px;padding:0 20px 14px}
    .sugs:empty{display:none}
    .sugs button{background:#fff;border:1px solid var(--line);color:var(--gray);
                 font:inherit;font-size:.775rem;font-weight:500;padding:7px 12px;
                 border-radius:20px;cursor:pointer;transition:all .18s;line-height:1.2}
    .sugs button:hover{border-color:var(--red-dark);color:var(--red-dark);background:var(--red-soft)}
    .chat-in{display:flex;gap:8px;padding:15px 20px;border-top:1px solid var(--line)}
    .chat-in input{flex:1;padding:11px 15px;border:1px solid var(--line);border-radius:7px;
                   font-family:inherit;font-size:.87rem;background:var(--bg-soft)}
    .chat-in input:focus{outline:none;border-color:var(--red);background:#fff}
    .chat-in button{background:var(--red-dark);color:#fff;border:0;border-radius:7px;cursor:pointer;
                    flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center}
    .chat-in button:hover{background:var(--red-deep)}

    /* Contacto */
    .cont{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
    .cont h3{font-size:.77rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
             color:var(--gray);margin-bottom:10px}
    .cont p{font-size:1rem;color:var(--ink-2);line-height:1.6}
    .cont a{color:var(--red-dark);font-weight:600}

    /* PÁGINA DE CONFIRMACIÓN (gracias.html) */
    .gracias{min-height:calc(100vh - 70px - 92px);display:flex;align-items:center;
             justify-content:center;padding:64px 24px;
             background:radial-gradient(ellipse 800px 380px at 50% -8%, var(--red-soft) 0%, transparent 62%),#fff}
    .gracias-caja{max-width:620px;width:100%;text-align:center}
    .gracias-ico{width:66px;height:66px;margin:0 auto 26px;border-radius:50%;
                 background:var(--red-soft);display:flex;align-items:center;justify-content:center}
    .gracias-ico svg{width:30px;height:30px;stroke:var(--red-dark);fill:none;
                     stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
    .gracias .eyebrow{justify-content:center}
    .gracias .eyebrow::before{display:none}
    .gracias-tit{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800;line-height:1.16;
                 letter-spacing:-.022em;margin-bottom:14px}
    .gracias-lead{font-size:1.03rem;color:var(--gray);max-width:480px;margin:0 auto 34px}
    .gracias-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
                   text-align:left;margin-bottom:30px}
    .gracias-paso{background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;
                  padding:18px 18px 20px}
    .gracias-paso strong{display:flex;align-items:center;justify-content:center;
                         width:26px;height:26px;border-radius:50%;background:var(--red-dark);
                         color:#fff;font-size:.8rem;font-weight:700;margin-bottom:10px}
    .gracias-paso span{display:block;font-size:.86rem;color:var(--gray);line-height:1.5}
    .gracias-urgente{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);
                     border-radius:0 9px 9px 0;padding:15px 20px;font-size:.9rem;
                     color:var(--gray);text-align:left;margin-bottom:30px}
    .gracias-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
    .gracias-pie{font-size:.84rem;color:var(--gray)}
    @media(max-width:640px){
      .gracias{padding:44px 20px}
      .gracias-pasos{grid-template-columns:1fr;gap:10px}
      .gracias-paso{display:flex;align-items:flex-start;gap:13px;padding:14px 16px}
      .gracias-paso strong{margin-bottom:0;flex-shrink:0}
      .gracias-btns .btn{width:100%;justify-content:center}
    }

    /* Llamada a la acción de la sección de contacto */
    .cont-cta{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);
              display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    .cont-cta .btn{border:0;cursor:pointer;font:inherit;font-size:.93rem;font-weight:600}
    .cont-cta-nota{font-size:.88rem;color:var(--gray)}

    /* VENTANA DE CONTACTO (dialog nativo) */
    .modal{border:0;padding:0;background:transparent;max-width:min(640px,calc(100vw - 32px));
           width:100%;max-height:calc(100vh - 48px);overflow:visible}
    .modal::backdrop{background:rgba(34,34,33,.62)}
    .modal-caja{background:#fff;border-radius:14px;overflow:hidden;
                box-shadow:0 24px 70px rgba(34,34,33,.28);
                max-height:calc(100vh - 48px);display:flex;flex-direction:column}
    .modal-top{display:flex;align-items:flex-start;gap:16px;padding:26px 28px 0;flex-shrink:0}
    .modal-tit{font-size:1.3rem;font-weight:800;letter-spacing:-.018em;flex:1}
    .modal-x{background:none;border:0;cursor:pointer;width:40px;height:40px;flex-shrink:0;
             border-radius:8px;display:flex;align-items:center;justify-content:center;
             margin:-6px -8px 0 0;transition:background .18s}
    .modal-x:hover{background:var(--bg-soft)}
    .modal-x svg{width:20px;height:20px;stroke:var(--gray);fill:none;stroke-width:2;
                 stroke-linecap:round}
    .modal-cuerpo{padding:0 28px 28px;overflow-y:auto}
    .modal-intro{font-size:.93rem;color:var(--gray);margin:8px 0 22px}
    /* dentro de la ventana el formulario no necesita marco propio */
    .form-modal{margin-top:0;background:transparent;border:0;padding:0}

    /* FORMULARIO DE CONTACTO */
    .form{margin-top:44px;background:var(--bg-soft);border:1px solid var(--line);
          border-radius:13px;padding:34px}
    .form-tit{font-size:1.12rem;font-weight:700;margin-bottom:22px;letter-spacing:-.01em}
    .form-fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .campo{margin-bottom:18px;display:flex;flex-direction:column}
    .campo label{font-size:.83rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
    .req{color:var(--red-dark)}
    .campo input,.campo select,.campo textarea{
      font:inherit;font-size:.94rem;padding:12px 14px;border:1px solid var(--line);
      border-radius:7px;background:#fff;color:var(--ink);width:100%;min-height:44px}
    .campo textarea{resize:vertical;min-height:104px;line-height:1.55}
    .campo input:focus,.campo select:focus,.campo textarea:focus{
      outline:none;border-color:var(--red-dark);box-shadow:0 0 0 3px rgba(168,70,19,.12)}
    .campo input:invalid:not(:placeholder-shown){border-color:#b3261e}
    .campo-check{display:flex;gap:11px;align-items:flex-start;margin:6px 0 22px}
    .campo-check input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--red-dark)}
    .campo-check label{font-size:.86rem;color:var(--gray);font-weight:400;line-height:1.5}
    .form-enviar{border:0;cursor:pointer;font:inherit;font-size:.95rem;font-weight:600;
                 min-height:48px;padding:14px 30px}
    .form-pie{font-size:.84rem;color:var(--gray);margin-top:16px}
    /* trampa antispam: presente en el HTML, invisible para las personas */
    .oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .cont a:hover{text-decoration:underline}

    /* Footer */
    footer{background:var(--bg-dark);color:rgba(255,255,255,.55);padding:54px 0 28px;font-size:.87rem}
    .f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:42px;padding-bottom:34px;
           border-bottom:1px solid rgba(255,255,255,.1)}
    .f-top p{margin-top:13px;max-width:330px;line-height:1.65}
    .f-col h3{color:#fff;font-size:.77rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
    .f-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
    .f-col a:hover{color:#fff}
    .f-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;
           flex-wrap:wrap;gap:12px;font-size:.82rem}
    .f-bot a{margin-left:14px}
    .f-bot a:hover{color:#fff}
    /* Logotipos de financiación. Van sobre fondo blanco a propósito: son
       logotipos institucionales y no pueden recolorearse ni invertirse para
       encajar con el pie oscuro. */
    .padih{margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
           display:flex;align-items:center;gap:22px;flex-wrap:wrap}
    .padih-logos{background:#fff;border-radius:7px;padding:9px 13px;
                 width:auto;height:46px;flex-shrink:0}
    .padih-txt{font-size:.78rem;font-style:italic;line-height:1.6;
               color:rgba(255,255,255,.62);flex:1;min-width:260px}

    .fab{position:fixed;bottom:24px;right:24px;background:var(--red-dark);color:#fff;border:0;border-radius:50px;
         padding:14px 22px;font-family:inherit;font-size:.89rem;font-weight:600;cursor:pointer;
         box-shadow:0 8px 26px rgba(204,90,28,.38);z-index:90;display:flex;align-items:center;gap:9px;
         transition:transform .18s}
    .fab:hover{transform:translateY(-2px)}
    .fab svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}

    @media(max-width:960px){
      .hero-grid,.cob,.asist,.grid2,.modelos{grid-template-columns:1fr;gap:38px}
      .grid3{grid-template-columns:1fr 1fr}
      .casos{grid-template-columns:1fr 1fr}
      .pasos{grid-template-columns:1fr;gap:24px}
      .paso::before{display:none}
      .eq,.eq.eq-3{grid-template-columns:1fr 1fr}
      .f-top{grid-template-columns:1fr 1fr}
      .f-brand{grid-column:span 2}
      .cont{grid-template-columns:1fr}
      .form-fila{grid-template-columns:1fr;gap:0}
    }
    @media(max-width:720px){
      .grid3{grid-template-columns:1fr}
      .casos{grid-template-columns:1fr 1fr;gap:10px}
      section{padding:58px 0} .hero{padding:56px 0 48px}
      .padih{gap:16px}
      .padih-logos{height:38px;padding:8px 11px}
      .f-bot{flex-direction:column;align-items:flex-start}
      .f-bot a{margin:0 14px 0 0}
      .wrap,.nav-in{padding-left:18px;padding-right:18px}
      .modelo{padding:28px 22px}
      .hero-card{padding:26px}
      .card{padding:26px 22px}
      .form{padding:26px 20px}
      .card-foto{padding:0}
      .card-foto .card-cuerpo{padding:24px 22px 26px}
      .fab{right:14px;bottom:14px;padding:12px 18px;font-size:.85rem}
    }
    /* En pantallas estrechas el botón flotante ocupaba más de 200 px y se
       cruzaba con el contenido. Pasa a ser un círculo de 56 px: sigue
       cumpliendo el mínimo táctil y el texto se conserva como etiqueta
       accesible para quien use lector de pantalla. */
    @media(max-width:430px){
      .fab{width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;
           right:16px;bottom:16px}
      .fab .fab-txt{position:absolute;width:1px;height:1px;overflow:hidden;
                    clip-path:inset(50%);white-space:nowrap}
      .fab svg{width:22px;height:22px}
    }
    @media(max-width:380px){
      .kpi{grid-template-columns:1fr}
      .eq,.eq.eq-3{grid-template-columns:1fr}
      .kpi strong{font-size:1.7rem}
      .wrap,.nav-in{padding-left:14px;padding-right:14px}
    }


/* ================================================================
   Utilidades que sustituyen a los antiguos atributos style="…".
   Sacarlos del HTML permite que la CSP prohíba los estilos inline.
   ================================================================ */
.sep-izq{margin-left:8px}
.mt-18{margin-top:18px}
.mt-20{margin-top:20px}
.mt-44{margin-top:44px}
.redes-mob{padding:16px 28px 20px;border-top:1px solid var(--line)}
.sub{font-size:1.03rem;font-weight:700;margin-bottom:5px}
.sub-6{margin-bottom:6px}
.sub-txt{font-size:.94rem;color:var(--gray)}
.sub-ancho{max-width:700px}
.blanco{color:#fff}
.logo-cia{height:32px}
.intro-asist{font-size:1.03rem;color:var(--gray)}
.enl{color:var(--red-dark);font-weight:600}
.ico-enviar{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;margin:auto}