/* ==========================================================================
   Comerciativa — estilos compartidos por todas las páginas interiores.

   Contiene: reset, variables de marca (:root), tipografía, botones,
   header/navegación/dropdown, footer, scroll reveal, responsive,
   botón flotante de WhatsApp y banner de cookies.

   El CSS propio de cada página sigue embebido en su <style>, DESPUÉS
   del <link> a este archivo, para que pueda sobrescribir lo que necesite.

   ⚠ Al modificar este archivo hay que subir el ?v= de los <link>
     en las páginas (ver CLAUDE.md → "CSS y JS compartidos").
   ========================================================================== */


  :root{
    --blue:#2c74ff;
    --teal:#01c2ce;
    --grad:linear-gradient(135deg, var(--blue), var(--teal));
    --grad-text:linear-gradient(90deg, var(--blue), var(--teal));
    --navy:#021228;
    --navy-2:#04193a;
    --ink:#000000;
    --ink-soft:#3a3f4b;
    --muted:#666b78;
    --paper:#ffffff;
    --paper-soft:#f4f7fb;
    --line:#e6e9f1;

    --font:'Outfit', sans-serif;
    --container:1280px;
    --ease:cubic-bezier(.16,.84,.32,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;overflow-x:hidden;}
  body{
    margin:0;
    font-family:var(--font);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{list-style:none;margin:0;padding:0;}
  button{font-family:inherit;cursor:pointer;background:none;border:none;}
  ::selection{background:var(--teal);color:#fff;}
  :focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;}

  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
  }

  h1,h2,h3,h4{
    font-family:var(--font);
    font-weight:700;
    margin:0;
    line-height:1.18;
    letter-spacing:-.01em;
  }

  .text-grad{
    background:var(--grad-text);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .section{padding:140px 0;position:relative;}
  .section-head{max-width:680px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head p{color:var(--muted);font-size:18px;line-height:1.75;margin-top:20px;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--font);font-weight:600;font-size:13.5px;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--blue);
    margin-bottom:22px;
  }
  .eyebrow::before{
    content:'';width:7px;height:7px;border-radius:50%;
    background:var(--grad);flex:none;
  }
  .eyebrow.on-dark{color:#8fc7ff;}

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:17px 32px;border-radius:100px;
    font-family:var(--font);font-weight:600;font-size:15.5px;
    border:1.5px solid transparent;white-space:nowrap;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, border-color .25s ease, color .25s ease;
  }
  .btn svg{width:16px;height:16px;transition:transform .35s var(--ease);}
  .btn-grad{background:var(--grad);color:#fff;box-shadow:0 16px 32px -14px rgba(44,116,255,.55);}
  .btn-grad:hover{transform:translateY(-3px);box-shadow:0 20px 38px -12px rgba(1,194,206,.5);}
  .btn-grad:hover svg{transform:translate(3px,-3px);}
  .btn-dark{background:var(--navy);color:#fff;}
  .btn-dark:hover{background:#000;transform:translateY(-3px);}
  .btn-ghost{border-color:rgba(0,0,0,.18);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
  .btn-ghost-light{border-color:rgba(255,255,255,.32);color:#fff;}
  .btn-ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff;}

  .link-arrow{
    display:inline-flex;align-items:center;gap:8px;
    font-weight:600;font-size:14.5px;color:var(--ink);
    border-bottom:1.5px solid var(--ink);padding-bottom:2px;
  }
  .link-arrow svg{width:14px;height:14px;transition:transform .3s var(--ease);}
  .link-arrow:hover svg{transform:translateX(4px);}

  /* ===== Header ===== */
  header.site-header{position:fixed;top:18px;left:0;right:0;z-index:1000;}
  .nav-shell{max-width:var(--container);margin:0 auto;padding:0 40px;}
  .nav-bar{
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(255,255,255,1);
    border:1px solid rgba(2,18,40,.08);
    border-radius:100px;
    padding:9px 12px 9px 22px;
    /* Sin backdrop-filter a propósito: el fondo es blanco opaco, así que el desenfoque
       no se veía, pero creaba un "backdrop root" del que el dropdown es descendiente.
       En Safari eso hace que la parte del dropdown que sobresale de la barra se pinte
       por debajo del contenido de la página, y el texto del hero se ve encima. */
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -26px rgba(2,18,40,.3);
    transition:background .35s ease, box-shadow .35s ease;
  }
  header.site-header.scrolled .nav-bar{
    background:rgba(255,255,255,1);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 46px -24px rgba(2,18,40,.35);
  }
  header.site-header.nav-hidden{
    transform:translateY(-120%);
    transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  header.site-header{
    transition:transform .4s cubic-bezier(.4,0,.2,1);
  }

  .logo-img{height:30px;width:auto;display:block;flex-shrink:0;min-width:0;}

  nav.main-nav > ul{display:flex;gap:4px;align-items:center;}
  nav.main-nav > ul > li{position:relative;}
  nav.main-nav > ul > li > a{
    font-family:var(--font);font-weight:500;font-size:14.5px;color:var(--ink-soft);
    padding:9px 16px;border-radius:100px;display:flex;align-items:center;gap:5px;
    transition:background .25s ease, color .25s ease;
  }
  nav.main-nav > ul > li > a:hover{background:rgba(2,18,40,.06);color:var(--ink);}
  nav.main-nav > ul > li.active > a{background:var(--navy);color:#fff;}

  .nav-caret{width:9px;height:9px;flex:none;transition:transform .25s ease;}
  li.has-dropdown:hover .nav-caret{transform:rotate(180deg);}

  .nav-dropdown{
    position:absolute;top:calc(100% + 10px);left:0;width:300px;
    background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:0 28px 54px -18px rgba(10,17,40,.22);
    padding:10px;visibility:hidden;transform:translateY(8px);
    /* No se anima la opacidad: mientras el panel iba de 0 a 1 se transparentaba entero
       y se leía el texto del hero a través de él. Ahora entra opaco y solo se desliza. */
    transition:transform .22s ease, visibility .22s ease;
    z-index:80;
  }
  /* Puente invisible sobre el hueco que queda entre el enlace y el panel. Sin él,
     al bajar el ratón hacia el submenú se cruza una franja que no es ni el <li> ni
     el panel: se pierde el :hover y el menú se cierra en la cara, así que había que
     bajar muy rápido para alcanzar a elegir un ítem.
     Cuelga del <li> y no del panel por dos razones: el panel se desliza 8px al
     abrirse (el hueco real llega a 18px, no 10), y colgado del panel el puente
     quedaría por encima del enlace y se comería sus clics. Empieza justo donde
     termina el enlace, así que no lo tapa.
     Solo en escritorio: en ≤1200px el menú es una columna y esta franja quedaría
     encima del ítem siguiente, comiéndose sus toques. */
  @media (min-width:1201px){
    nav.main-nav > ul > li.has-dropdown::after{
      content:'';position:absolute;left:0;top:100%;width:100%;height:20px;
    }
  }
  li.has-dropdown:hover .nav-dropdown,
  li.has-dropdown:focus-within .nav-dropdown,
  li.has-dropdown.open .nav-dropdown{visibility:visible;transform:translateY(0);}
  .nav-dropdown a{
    display:flex;flex-direction:row;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  }
  .nav-dropdown a .dd-text{display:flex;flex-direction:column;gap:2px;}
  .nav-dropdown a:hover{background:var(--paper-soft);}
  .nav-dropdown a b{font-family:var(--font);font-size:14px;font-weight:600;color:var(--ink);}
  .nav-dropdown a span{font-size:12.5px;color:var(--muted);}

  .header-cta{display:flex;align-items:center;gap:10px;}
  .header-cta .btn{padding:11px 22px;font-size:14px;}

  .nav-toggle{display:none;width:38px;height:38px;border-radius:50%;background:var(--navy);align-items:center;justify-content:center;flex-direction:column;gap:4px;}
  .nav-toggle span{display:block;width:16px;height:1.5px;background:#fff;border-radius:2px;transition:transform .3s ease, opacity .3s ease;}
  .nav-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

  /* ===== HERO ===== */
  .hero{position:relative;padding:172px 0 0;overflow:hidden;background:var(--paper);}
  .hero-rings{position:absolute;inset:0;pointer-events:none;z-index:0;}
  .hero-rings svg{position:absolute;}
  .hero-rings .r1{top:-180px;right:-180px;width:560px;height:560px;opacity:.5;}
  .hero-rings .r2{bottom:-120px;left:-160px;width:380px;height:380px;opacity:.35;}

  .hero-grid{
    display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:start;
    position:relative;z-index:2;padding-bottom:90px;
  }
  .hero-badge{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink-soft);
    background:#fff;border:1px solid var(--line);
    padding:8px 16px 8px 10px;border-radius:100px;margin-bottom:32px;
    box-shadow:0 10px 24px -16px rgba(2,18,40,.2);
  }
  .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none;}

  .hero h1{
    font-size:clamp(38px,4.4vw,60px);
    font-weight:700;color:var(--ink);max-width:22ch;
  }
  @media (min-width:1201px){
    .hero h1{font-size:clamp(28px,3vw,44px);}
  }
  .hero-main p{font-size:18px;line-height:1.75;color:var(--ink-soft);max-width:46ch;margin:22px 0 0;}
  .hero-side{padding-top:6px;}

  .hero-meta{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;margin-top:32px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;margin-bottom:0;}
  .hero-meta .m b{display:block;font-weight:700;font-size:15px;color:var(--ink);}
  .hero-meta .m span{font-size:13px;color:var(--muted);}

  /* Visual del hero: panel con metricas, lo que le gusto al cliente */
  .hero-visual{position:relative;height:460px;margin-top:8px;}
  .hero-visual .panel-main{
    position:absolute;inset:0;border-radius:28px;overflow:hidden;
    background:var(--navy);
    box-shadow:0 50px 100px -36px rgba(2,18,40,.55);
  }
  .hero-visual .panel-main::before{
    content:'';position:absolute;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle, rgba(44,116,255,.35), transparent 70%);
    top:-120px;right:-100px;
  }
  .hero-visual .panel-main::after{
    content:'';position:absolute;width:260px;height:260px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.08);
    bottom:-80px;left:-60px;
  }
  .panel-head{position:relative;z-index:2;padding:28px 30px 0;display:flex;align-items:center;justify-content:space-between;}
  .panel-head .ph-title{font-size:13px;color:rgba(255,255,255,.55);font-weight:500;}
  .panel-head .ph-live{display:flex;align-items:center;gap:7px;font-size:12px;color:#8fe3c9;font-weight:600;}
  .panel-head .ph-live .pulse{width:7px;height:7px;border-radius:50%;background:#3ee08f;position:relative;}
  .panel-head .ph-live .pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #3ee08f;animation:pulse 2.2s var(--ease) infinite;}
  @keyframes pulse{0%{transform:scale(.6);opacity:1;}100%{transform:scale(1.9);opacity:0;}}

  .panel-chart{position:relative;z-index:2;margin:18px 30px 0;}
  .panel-chart svg{width:100%;height:auto;display:block;}

  .panel-metrics{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);margin-top:22px;}
  .panel-metrics .pm{background:var(--navy);padding:20px 30px;}
  .panel-metrics .pm b{display:block;font-size:24px;font-weight:700;color:#fff;}
  .panel-metrics .pm b .grad-span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .panel-metrics .pm span{font-size:12px;color:rgba(255,255,255,.5);}

  .hero-float-tag{
    position:absolute;right:-28px;top:42%;transform:translateY(-50%);z-index:3;
    background:#fff;border-radius:16px;padding:16px 20px;
    box-shadow:0 30px 60px -24px rgba(2,18,40,.35);
    display:flex;align-items:center;gap:13px;
  }
  .hero-float-tag .ring-mini{width:48px;height:48px;flex:none;transform:rotate(-90deg);}
  .hero-float-tag .ring-progress{
    transition:stroke-dashoffset 1.8s cubic-bezier(.25,.85,.35,1);
  }
  .hero-float-tag.in-view .ring-progress{stroke-dashoffset:0;}
  .hero-float-tag .ring-progress.pulse-loop{animation:ringMetric 6s cubic-bezier(.45,0,.55,1) .4s infinite;}
  @keyframes ringMetric{
    0%{stroke-dashoffset:0;}
    18%{stroke-dashoffset:34;}
    36%{stroke-dashoffset:14;}
    54%{stroke-dashoffset:46;}
    72%{stroke-dashoffset:8;}
    88%{stroke-dashoffset:26;}
    100%{stroke-dashoffset:0;}
  }
  .hero-float-tag b{display:block;font-size:14px;}
  .hero-float-tag span{font-size:11.5px;color:var(--muted);}

  .hero-curve{position:relative;display:block;width:100%;height:auto;z-index:1;margin-bottom:-2px;}

  .partner-strip{background:var(--navy);padding:22px 0;}
  .partner-strip-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
  .partner-strip-inner span{font-family:var(--font);font-size:14px;color:rgba(255,255,255,.6);}
  .partner-strip-inner b{color:#fff;font-weight:600;}
  .shopify-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
    padding:7px 16px 7px 10px;border-radius:100px;
  }
  .shopify-badge svg{width:16px;height:18.2px;}
  .shopify-badge span{color:#fff;font-weight:600;font-size:13.5px;}

  /* ===== PHILOSOPHY / PROPUESTA DE VALOR ===== */
  .philosophy{background:var(--paper);}
  .philosophy .section-head{max-width:640px;}

  .phil-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;align-items:stretch;}
  .phil-block{
    background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px 34px;
    display:flex;flex-direction:column;
  }
  .phil-block h3{font-size:18.5px;font-weight:600;margin-bottom:26px;color:var(--ink);}
  .phil-block.is-highlight{
    background:var(--navy);border:none;color:#fff;
    box-shadow:0 32px 56px -20px rgba(10,17,40,.35);
  }
  .phil-block.is-highlight h3{color:#fff;}

  .check-list{display:flex;flex-direction:column;gap:16px;}
  /* El item NO puede ser flex: el <strong> y el texto que le sigue se
     convertirían en dos items separados y el texto se partiría en dos
     columnas, que en móvil queda ilegible. Con el tick en absoluto, el
     contenido fluye como un párrafo normal con sangría francesa. */
  .check-list li{
    position:relative;padding-left:32px;
    font-size:15px;line-height:1.55;color:var(--ink-soft);
  }
  .check-list li strong{color:var(--ink);font-weight:600;}
  .check-mark{
    position:absolute;left:0;top:2px;
    width:20px;height:20px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .check-mark svg{width:11px;height:11px;}
  .phil-block.is-highlight .check-list li{color:rgba(255,255,255,.78);}
  .phil-block.is-highlight .check-mark{background:rgba(255,255,255,.12);color:#8fc7ff;}

  /* ===== QUE ES / QUIEN ES ===== */
  .about-split{background:var(--paper-soft);}

  /* --- Bloque institucional: ¿Qué es Comerciativa? --- */
  .about-intro{
    margin-top:56px;background:var(--navy);color:#fff;border-radius:28px;
    padding:56px 52px;position:relative;overflow:hidden;
  }
  .about-intro::before{
    content:'';position:absolute;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle, rgba(1,194,206,.22), transparent 70%);
    top:-160px;right:-120px;
  }
  .about-intro-text{position:relative;z-index:2;max-width:660px;}
  .about-intro-text h3{font-size:25px;color:#fff;margin-bottom:16px;}
  .about-intro-text p{font-size:16px;line-height:1.85;color:rgba(255,255,255,.72);}
  .about-intro-text strong{color:#fff;font-weight:600;}

  .about-pillars{
    position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
    margin-top:42px;
  }
  .pillar{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    border-radius:16px;padding:24px 22px;
  }
  .pillar-icon{
    width:42px;height:42px;border-radius:12px;margin-bottom:18px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
  }
  .pillar-icon svg{width:19px;height:19px;}
  .pillar h4{font-family:var(--font);color:#fff;font-size:15px;font-weight:600;margin-bottom:8px;}
  .pillar p{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.65;}

  /* --- Bloque personal: ¿Quién lidera Comerciativa? --- */
  .about-person{
    margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:28px;
    padding:50px;display:grid;grid-template-columns:290px 1fr;gap:54px;align-items:start;
  }
  .ap-photo{position:sticky;top:120px;}
  .ap-photo .person-photo{
    width:100%;aspect-ratio:290/330;border-radius:18px;overflow:hidden;
    background:var(--grad);display:flex;align-items:center;justify-content:center;
    box-shadow:0 24px 46px -16px rgba(44,116,255,.45);
  }
  .person-photo img{width:100%;height:100%;object-fit:cover;}
  .person-photo-fallback{color:#fff;font-weight:700;font-size:22px;}
  .ap-photo-tag{
    display:inline-flex;align-items:center;gap:7px;margin-top:18px;
    font-size:12.5px;font-weight:600;color:var(--blue);
    background:rgba(44,116,255,.08);padding:7px 14px;border-radius:100px;
  }
  .ap-photo-tag svg{width:14px;height:14px;flex:none;}

  .ap-info h3{font-size:24px;margin-bottom:18px;}
  .ap-info p{font-size:15.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:18px;}
  .ap-info p:last-child{margin-bottom:0;}

  .person-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
  .person-avatar{
    width:56px;height:56px;border-radius:50%;flex:none;
    background:var(--grad);display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:18px;
  }
  .person-name{font-weight:700;font-size:16px;color:var(--ink);}
  .person-role{font-size:13px;color:var(--muted);margin-top:2px;}

  /* ===== METODOLOGÍA ===== */
  .method{background:var(--navy);color:#fff;position:relative;overflow:hidden;}
  .method::before{
    content:'';position:absolute;width:640px;height:640px;border-radius:50%;
    border:1px solid rgba(255,255,255,.05);top:-300px;left:50%;transform:translateX(-50%);
  }
  .method::after{
    content:'';position:absolute;width:440px;height:440px;border-radius:50%;
    border:1px solid rgba(255,255,255,.06);top:-200px;left:50%;transform:translateX(-50%);
  }
  .method .section-head h2{color:#fff;}
  .method .section-head p{color:rgba(255,255,255,.6);}

  .method-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1);border-radius:24px;overflow:hidden;margin-top:64px;}
  .method-step{background:var(--navy);padding:42px 30px;}
  .method-step .ms-icon{
    width:50px;height:50px;border-radius:14px;margin-bottom:26px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
  }
  .method-step .ms-icon svg{width:22px;height:22px;}
  .method-step h4{font-family:var(--font);font-weight:600;font-size:18.5px;margin-bottom:12px;color:#fff;}
  .method-step p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.6);}

  /* ===== SERVICIOS ===== */
  .services{background:var(--paper);}
  .services-list{display:flex;flex-direction:column;margin-top:64px;}
  .service-row{
    display:grid;grid-template-columns:64px 1.3fr 1.5fr 56px;align-items:center;gap:32px;
    padding:36px 18px;border-top:1px solid var(--line);
    transition:background .35s var(--ease), padding .35s var(--ease), border-radius .35s var(--ease);
    border-radius:18px;
  }
  .services-list .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-row .s-num{font-family:var(--font);font-weight:700;font-size:15px;color:var(--blue);}
  .service-row h3{font-size:23px;font-weight:600;}
  .service-row p{font-size:15px;color:var(--muted);line-height:1.65;}
  .service-row .s-arrow{
    width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;justify-self:end;
    transition:background .35s var(--ease), border-color .35s ease, transform .35s var(--ease);
  }
  .service-row .s-arrow svg{width:17px;height:17px;transition:transform .35s var(--ease);stroke:var(--ink);}
  .service-row:hover{background:var(--paper-soft);}
  .service-row:hover .s-arrow{background:var(--grad);border-color:transparent;transform:rotate(45deg);}
  .service-row:hover .s-arrow svg{stroke:#fff;}

  /* ===== ACOMPAÑAMIENTO ===== */
  .accompaniment{background:var(--paper-soft);}
  .accomp-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
  .accomp-visual{position:relative;height:420px;}
  .accomp-visual .ring-frame{position:absolute;inset:0;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 80px -36px rgba(2,18,40,.18);}
  .accomp-visual .ring-frame svg{position:absolute;}
  .accomp-q{
    position:absolute;z-index:3;background:var(--navy);color:#fff;border-radius:18px;
    padding:22px 24px;max-width:280px;box-shadow:0 30px 60px -24px rgba(2,18,40,.4);
  }
  .accomp-q.q1{top:10%;left:8%;}
  .accomp-q.q2{bottom:10%;right:6%;}
  .accomp-q .qmark{font-size:13px;color:#8fc7ff;font-weight:700;margin-bottom:8px;display:block;}
  .accomp-q p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.85);}

  .accomp-text h2{font-size:clamp(28px,3vw,38px);margin-bottom:24px;}
  .accomp-text p{font-size:16.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:28px;}
  .accomp-list{display:flex;flex-direction:column;gap:18px;margin-bottom:34px;}
  .accomp-list li{display:flex;align-items:flex-start;gap:13px;font-size:15.5px;color:var(--ink);font-weight:500;}
  .accomp-list li svg{flex:0 0 20px;margin-top:3px;}

  /* ===== POSICIONAMIENTO ===== */
  .positioning{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:120px 0;}
  .positioning::before{
    content:'';position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle, rgba(44,116,255,.18), transparent 70%);
    bottom:-220px;right:-160px;
  }
  .positioning-inner{position:relative;z-index:2;text-align:center;max-width:880px;margin:0 auto;}
  .positioning .eyebrow{justify-content:center;}
  .positioning h2{font-size:clamp(28px,3.4vw,42px);color:#fff;margin-bottom:40px;}
  .not-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:46px;}
  .not-item{
    display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 22px;text-align:left;
  }
  .not-item svg{flex:none;width:20px;height:20px;}
  .not-item span{font-size:15px;color:rgba(255,255,255,.82);font-weight:500;}
  .focus-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
  .focus-pill{
    font-size:14px;font-weight:600;color:#fff;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    padding:10px 20px;border-radius:100px;
  }

  /* ===== CTA FINAL ===== */
  .final-cta{padding:130px 0;position:relative;overflow:hidden;background:var(--paper-soft);}
  .final-cta::before{
    content:'';position:absolute;width:380px;height:380px;border-radius:50%;
    border:1.5px solid rgba(2,18,40,.08);top:-160px;right:-100px;
  }
  .contact-head{position:relative;z-index:2;max-width:680px;margin-bottom:60px;}
  .contact-head h2{font-size:clamp(32px,3.8vw,48px);margin-bottom:20px;}
  .contact-head p{font-size:17px;line-height:1.75;color:var(--ink-soft);}

  .contact-grid{
    position:relative;z-index:2;
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  }
  .contact-card{
    background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:28px 24px;display:flex;flex-direction:column;gap:18px;
    position:relative;overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s ease;
  }
  .contact-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -26px rgba(2,18,40,.22);border-color:transparent;}
  .contact-card .cc-icon{
    width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none;
  }
  .cc-icon.cc-whatsapp,
  .cc-icon.cc-phone,
  .cc-icon.cc-mail,
  .cc-icon.cc-linkedin{
    background:linear-gradient(135deg,rgba(44,116,255,.12),rgba(1,194,206,.12));
  }
  .contact-card b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:4px;}
  .contact-card span{font-size:13.5px;color:var(--muted);word-break:break-word;}
  .contact-card .cc-arrow{
    position:absolute;top:24px;right:22px;width:16px;height:16px;color:var(--muted);
    transition:transform .3s var(--ease), color .3s ease;
  }
  .contact-card:hover .cc-arrow{transform:translate(3px,-3px);color:var(--ink);}

  /* ===== FOOTER ===== */
  footer{background:var(--navy);color:#fff;padding-top:90px;position:relative;overflow:hidden;}
  footer::before{
    content:'';position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle, rgba(44,116,255,.18), transparent 70%);
    bottom:-220px;right:-160px;pointer-events:none;
  }
  footer > .container{position:relative;z-index:2;}
  .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:50px;padding-bottom:70px;border-bottom:1px solid rgba(255,255,255,.1);}
  .footer-brand .logo-img{height:34px;margin-bottom:22px;}
  .footer-brand p{font-size:15px;color:rgba(255,255,255,.55);line-height:1.75;max-width:280px;}
  footer h5{font-family:var(--font);font-weight:600;font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.05em;text-transform:uppercase;margin-bottom:22px;}
  footer .f-links li{margin-bottom:14px;}
  footer .f-links a{font-size:15px;color:rgba(255,255,255,.85);transition:color .2s ease, padding-left .2s ease;}
  footer .f-links a:hover{color:#8fc7ff;padding-left:4px;}
  .footer-contact-item{margin-bottom:18px;}
  .footer-contact-item span{display:block;font-size:12.5px;color:rgba(255,255,255,.45);margin-bottom:4px;}
  .footer-contact-item a, .footer-contact-item p{font-size:15px;color:#fff;margin:0;}
  .footer-social{display:flex;gap:10px;margin-top:24px;}
  .footer-social a{
    width:40px;height:40px;border-radius:50%;border:1px solid transparent;
    background:var(--grad);color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 26px -12px rgba(44,116,255,.55);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .footer-social a:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px rgba(1,194,206,.55);}
  .footer-partner{display:flex;align-items:center;gap:16px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:0;}
  .footer-partner span{font-size:12.5px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
  .footer-partner a{display:inline-flex;align-items:center;opacity:.7;transition:opacity .2s ease;}
  .footer-partner a:hover{opacity:1;}
  .footer-partner img{height:22px;width:auto;filter:brightness(0) invert(1);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:28px 0;font-size:13.5px;color:rgba(255,255,255,.45);}
  .footer-bottom a{color:rgba(255,255,255,.7);}
  .footer-bottom-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

  /* ===== SCROLL REVEAL ===== */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .panel-head .ph-live .pulse::after{animation:none;}
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width:1200px){
    .hero-grid{grid-template-columns:1fr;gap:40px;}
    .hero-visual{height:420px;margin-top:20px;}
    .phil-blocks{grid-template-columns:1fr;gap:20px;}
    .about-intro{padding:44px 36px;}
    .about-person{grid-template-columns:240px 1fr;gap:36px;padding:40px;}
    .method-grid{grid-template-columns:1fr 1fr;}
    .accomp-grid{grid-template-columns:1fr;gap:50px;}
    .accomp-visual{height:340px;}
    .not-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr 1fr;gap:16px;}
    .footer-top{grid-template-columns:1fr 1fr;}
  }

  @media (max-width:1200px){
    nav.main-nav{
      /* 86px = los 74 donde termina la píldora del header + 12 de aire. Con 60px el
         panel entraba por debajo de la barra y quedaba pegado al botón de cerrar. */
      position:fixed;top:86px;right:-100%;height:auto;width:70%;max-width:320px;border-radius:18px;
      background:var(--navy);padding:32px 32px 40px;
      transition:right .45s var(--ease);
      z-index:999;overflow-y:auto;
      border-radius:18px 0 0 18px;
    }
    nav.main-nav.open{right:0;}
    header.site-header.nav-hidden:has(nav.main-nav.open){transform:none;}
    nav.main-nav > ul{flex-direction:column;align-items:flex-start;gap:4px;}
    nav.main-nav > ul > li{width:100%;}
    nav.main-nav > ul > li > a{font-size:17px;padding:13px 0;width:100%;color:rgba(255,255,255,.85);}
    nav.main-nav > ul > li.active > a{background:none;color:#8fc7ff;padding-left:0;}
    nav.main-nav > ul > li > a:hover{background:none;color:#8fc7ff;}
    .nav-caret{display:none;}
    .nav-dropdown{
      position:static;width:auto;opacity:0;visibility:hidden;transform:none;max-height:0;overflow:hidden;
      background:none;border:none;box-shadow:none;padding:0 0 0 4px;margin-top:0;
      transition:opacity .3s ease, max-height .35s ease, padding .3s ease;
    }
    li.has-dropdown.open .nav-dropdown{opacity:1;visibility:visible;max-height:300px;padding:4px 0 8px 4px;}
    .nav-caret{display:block !important;color:rgba(255,255,255,.5);transition:transform .3s ease;}
    li.has-dropdown.open .nav-caret{transform:rotate(180deg);}
    .nav-dropdown a{display:flex;flex-direction:row;align-items:center;gap:10px;padding:9px 0;border-radius:0;text-align:left;}
    .nav-dropdown a:hover{background:none;}
    .nav-dropdown a b{color:rgba(255,255,255,.85);font-weight:500;font-size:15px;}
    .nav-dropdown a .dd-text span{display:none;}
    .dd-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);flex-shrink:0;}
    .nav-dropdown a .dd-text{display:flex;flex-direction:column;gap:2px;}
    .header-cta{display:none;}
    .nav-toggle{display:flex;}
    .nav-bar{padding:8px 8px 8px 18px;}
    .nav-shell{padding:0 20px;}

    .section{padding:90px 0;}
    .hero{padding-top:130px;}
    .hero h1{max-width:none;}
    .hero-br{display:none;}
    .hero-visual{height:auto;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;gap:18px;}
    .hero-visual .panel-main{position:relative;width:100%;}
    .hero-float-tag{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;padding:12px 16px;}
    .service-row{grid-template-columns:40px 1fr;row-gap:14px;padding:28px 12px;}
    .service-row p{grid-column:1/-1;}
    .service-row .s-arrow{display:none;}
    .method-grid{grid-template-columns:1fr;}
    .about-intro{padding:36px 26px;border-radius:22px;}
    .about-pillars{grid-template-columns:1fr;margin-top:32px;}
    .about-person{grid-template-columns:1fr;gap:28px;padding:32px 26px;border-radius:22px;}
    .ap-photo{position:static;}
    .ap-photo .person-photo{max-width:280px;}
    .accomp-q{position:static;max-width:none;margin-bottom:16px;}
    .accomp-visual{height:auto;}
    .accomp-visual .ring-frame{display:none;}
    .footer-top{grid-template-columns:1fr;gap:40px;}
    .partner-strip-inner{flex-direction:column;gap:10px;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
    .footer-bottom-right{flex-direction:column;align-items:flex-start;gap:8px;}
  }

  @media (max-width:520px){
    .hero-actions{flex-direction:column;align-items:stretch;}
    .hero-actions .btn{width:100%;}
    .final-cta-actions{flex-direction:column;align-items:stretch;}
    .final-cta-actions .btn{width:100%;}
    .hero-meta{gap:22px;}
    .contact-grid{grid-template-columns:1fr;}
    .ap-photo .person-photo{max-width:230px;}
  }

  /* ===== WHATSAPP FLOTANTE ===== */
  .wa-float{
    position:fixed;right:26px;bottom:26px;z-index:1100;
    width:60px;height:60px;border-radius:50%;
    background:var(--grad);color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 16px 34px -10px rgba(44,116,255,.55);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .wa-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 20px 40px -8px rgba(1,194,206,.6);}
  .wa-float .wa-pulse{
    position:absolute;inset:0;border-radius:50%;border:2px solid var(--teal);
    animation:waPulse 2.4s var(--ease) infinite;
  }
  @keyframes waPulse{
    0%{transform:scale(1);opacity:.7;}
    100%{transform:scale(1.55);opacity:0;}
  }
  @media (max-width:600px){
    .wa-float{right:18px;bottom:18px;width:54px;height:54px;}
  }
  @media (prefers-reduced-motion: reduce){
    .wa-float .wa-pulse{animation:none;}
  }


/* ===== Variantes puntuales (usadas por el home y por acompañamiento) ===== */
  .link-arrow.muted{color:var(--muted);border-bottom-color:var(--line);}
  .link-arrow.muted:hover{color:var(--ink);border-bottom-color:var(--ink);}
  .accomp-actions{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;}

/* ===== BANNER DE COOKIES ===== */

  #cookie-banner{
    position:fixed;left:24px;right:24px;bottom:24px;z-index:9999;
    max-width:520px;margin:0 auto;
    background:var(--navy,#021228);color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:22px 24px;
    box-shadow:0 24px 60px -18px rgba(2,18,40,.65);
    font-family:var(--font,'Outfit',sans-serif);
    transform:translateY(20px);opacity:0;pointer-events:none;
    transition:transform .5s cubic-bezier(.16,.84,.32,1),opacity .4s ease;
  }
  #cookie-banner.is-visible{transform:translateY(0);opacity:1;pointer-events:auto;}
  #cookie-banner p{margin:0 0 16px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);}
  #cookie-banner a{color:#8fc7ff;text-decoration:underline;text-underline-offset:2px;}
  #cookie-banner a:hover{color:#fff;}
  #cookie-banner .cb-actions{display:flex;gap:10px;flex-wrap:wrap;}
  #cookie-banner .cb-btn{
    flex:1 1 auto;min-width:120px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:11px 20px;border-radius:100px;
    font-weight:600;font-size:14px;
    border:1.5px solid transparent;cursor:pointer;
    font-family:inherit;
    transition:transform .3s cubic-bezier(.16,.84,.32,1),background .25s ease,border-color .25s ease,color .25s ease;
  }
  #cookie-banner .cb-accept{background:linear-gradient(135deg,#2c74ff,#01c2ce);color:#fff;}
  #cookie-banner .cb-accept:hover{transform:translateY(-2px);}
  #cookie-banner .cb-reject{background:transparent;border-color:rgba(255,255,255,.3);color:#fff;}
  #cookie-banner .cb-reject:hover{background:rgba(255,255,255,.1);border-color:#fff;}
  @media(max-width:520px){
    #cookie-banner{left:14px;right:14px;bottom:14px;padding:20px;}
    #cookie-banner .cb-btn{flex:1 1 100%;}
  }

/* ===== Enlace "Saltar al contenido" (accesibilidad) =====
   Invisible hasta que recibe foco con el teclado. */
  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:2000;
    background:var(--navy);color:#fff;
    padding:14px 22px;border-radius:0 0 14px 0;
    font-family:var(--font);font-size:14.5px;font-weight:600;
    text-decoration:none;
  }
  .skip-link:focus{left:0;}

  /* Último ítem del desplegable: enlace al listado completo */
  .nav-dropdown .dd-all{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:6px;padding-top:12px;
  }
  .nav-dropdown .dd-all .dd-text b{color:#8fc7ff;}

  /* Datos de contacto del footer */
  .footer-contact{margin-top:20px;display:flex;flex-direction:column;gap:9px;}
  .footer-contact li{font-size:14.5px;color:rgba(255,255,255,.55);line-height:1.5;}
  .footer-contact a{color:rgba(255,255,255,.72);transition:color .2s ease;}
  .footer-contact a:hover{color:#8fc7ff;}