/* ============================================================
     SISTEMA VISUAL SEGÚN MANUAL DE IDENTIDAD PRO-CITY
     Color   : #425CC7 (Pantone 2726 C) · #FFFFFF · #000000
     Tipo    : Gotham (Black 900 / Medium 500 / Light 300)
               Sustituto web: Montserrat. Si se licencia Gotham,
               reemplazar en --font.
     Escala  : ratio 1.333 -> 76 / 57 / 32 / 24 / 18
     Regla   : alineación SIEMPRE a la izquierda
     ============================================================ */
  :root{
    --blue:#425CC7;
    --orange:#E36C09;   /* acento de enfasis y estado activo (deck de propuestas) */
    --white:#FFFFFF;
    --black:#000000;
    /* neutros derivados del negro corporativo */
    --ink:#000000;
    --body:rgba(0,0,0,.66);
    --soft:rgba(0,0,0,.45);
    --line:rgba(0,0,0,.12);
    --bg:#F4F4F6;
    --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    --max:1160px;
    --r:4px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font);font-weight:300;font-size:18px;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;text-align:left}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
  a{color:inherit;text-decoration:none}
  strong,b{font-weight:500}
  h1,h2,h3,h4,h5{text-align:left;letter-spacing:-.02em}
  h1{font-size:clamp(38px,5.6vw,76px);font-weight:900;line-height:1.04}
  h2{font-size:clamp(29px,3.9vw,57px);font-weight:900;line-height:1.08}
  h3{font-size:clamp(22px,2.2vw,32px);font-weight:500;line-height:1.2}
  h4{font-size:24px;font-weight:500;line-height:1.25}
  p{color:var(--body);font-weight:300}
  section{padding:96px 0}
  .kicker{display:block;font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
  .kicker.on-dark{color:var(--white)}
  .badge{display:inline-block;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 20px;font-size:15px;font-weight:500;color:var(--white);margin-bottom:24px}
  .lead{font-size:clamp(18px,1.35vw,22px);max-width:52ch;font-weight:300}
  .sec-head{max-width:34ch;margin-bottom:52px}
  .sec-head p{margin-top:18px;max-width:62ch}
  .sec-head.ctr{margin-left:0;margin-right:0;text-align:left}

  /* ---- ISOTIPO Y ELEMENTO GRÁFICO (barras verticales) ---- */
  .iso{width:34px;height:34px;display:block;color:var(--blue);flex-shrink:0}
  /* logotipo oficial embebido: header (color) y footer (negativo) */
  .iso.neg{color:var(--white)}
  .barmark{display:flex;align-items:flex-end;gap:3px;height:26px;margin-bottom:20px}
  .barmark i{display:block;width:5px;background:var(--blue)}
  .barmark.neg i{background:var(--white)}
  .barstrip{display:flex;align-items:flex-end;gap:5px;height:44px}
  .barstrip i{display:block;width:8px;background:var(--white);opacity:.9}

  /* ---- TOPBAR ---- */
  .topbar{background:var(--black);color:var(--white);font-size:13.5px;padding:11px 0;font-weight:500}
  .topbar .wrap{display:flex;justify-content:flex-start}
  .topbar a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}

  /* ---- HEADER ---- */
  header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo{display:flex;align-items:center}
  .logo img{display:block;width:150px;height:auto}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links button,.nav-links a[data-nav]{background:none;border:0;font-family:var(--font);font-size:15px;font-weight:500;color:var(--body);cursor:pointer;padding:7px 0;border-bottom:2px solid transparent;transition:.15s}
  .nav-links button:hover,.nav-links a[data-nav]:hover{color:var(--black)}
  .nav-links button.active,.nav-links a[data-nav].active{color:var(--orange);border-bottom-color:var(--orange)}
  .menu-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--black);line-height:1}

  /* ---- BOTONES ---- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 32px;border-radius:999px;font-family:var(--font);font-weight:500;font-size:18px;border:2px solid transparent;cursor:pointer;transition:.18s;text-align:center;line-height:1.2}
  .btn-primary{background:var(--orange);color:var(--white);border-color:var(--orange)}
  .btn-primary:hover{background:#C25A05;border-color:#C25A05}
  .btn-ghost{background:var(--white);color:var(--black);border-color:rgba(0,0,0,.22)}
  .btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
  .btn-light{background:var(--white);color:var(--blue);border-color:var(--white)}
  .btn-light:hover{background:var(--orange);color:var(--white);border-color:var(--orange)}
  .btn-outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
  .btn-outline-light:hover{background:var(--white);color:var(--blue);border-color:var(--white)}
  .btn-sm{padding:12px 22px;font-size:16px}
  .btn-block{width:100%}

  /* ---- HERO (versión negativa sobre azul corporativo) ---- */
  .hero{background:var(--blue);color:var(--white);padding:88px 0 88px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero-art{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(0,0,0,.22))}
  @media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero-art{max-width:480px}}
  .hero h1{color:var(--white);max-width:15ch}
  .hero .lead{color:rgba(255,255,255,.9);margin-top:26px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px;justify-content:flex-start}
  .hero-note{margin-top:28px;font-size:14px;color:rgba(255,255,255,.72)}
  .platforms{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;justify-content:flex-start}
  .chip{padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.45);font-size:14px;font-weight:500;color:var(--white)}

  /* ---- LOGOS CLIENTES ---- */
  .logos{background:var(--white);padding:56px 0;border-bottom:1px solid var(--line)}
  .logos small{display:block;text-align:left;text-transform:none;letter-spacing:0;
    font-size:20px;font-weight:900;color:var(--black);line-height:1.2;margin-bottom:34px}

  /* Tres topes de alto segun la proporcion del logo, para que todos ocupen
     una superficie parecida. Con un tope unico, un logo apaisado (ratio 3.2)
     ocupa el doble de superficie que uno cuadrado del mismo alto: por eso
     Manpower y Domino se veian chicos al lado de Mutual o Plaenge.
     El nivel de cada logo se asigna en el HTML segun su archivo.
     El tope de ancho evita que los muy apaisados (Plaenge es 10:1) se coman
     el espacio de los vecinos en la cinta. */
  img.client{max-height:54px;max-width:170px;width:auto;height:auto;
    object-fit:contain;display:block;transition:.2s}
  img.client-medio{max-height:68px}   /* ratio 1.40 a 2.40: TVN, Cemco, Manpower, Domino, Molino */
  img.client-alto{max-height:82px}    /* ratio bajo 1.40: Aguas Pacifico, Club de Polo, Comercial Castro */
  img.client:hover{transform:scale(1.06)}

  /* Carrusel de logos: cinta continua que avanza hacia la derecha.
     animaciones.js duplica la lista dentro de la pista y le pone is-loop; la
     animacion corre de -50% a 0, o sea exactamente una tanda, asi que el
     reinicio cae sobre un fotograma identico y no se ve el salto.
     La separacion va como margin-right de cada logo y NO como gap del flex:
     con gap, media pista no coincide con una tanda completa (queda medio
     espacio de diferencia) y el ciclo pega un tiron.
     Sin JavaScript o con prefers-reduced-motion no se agrega is-loop y la
     cinta queda quieta pero arrastrable, con los 21 logos alcanzables. */
  /* min-width:0 es imprescindible: en nosotros.html la cinta vive dentro de
     una columna de .two-col y, con el min-width:auto que traen los items de
     grid, la pista de 8.800 px estiraba la columna y sacaba scroll horizontal
     a la pagina entera. */
  /* El difuminado de los bordes va en porcentaje, no en pixeles: en la columna
     angosta de nosotros.html un fade fijo de 80px se comia un tercio de la
     cinta. */
  .logos-carrusel{overflow-x:auto;scrollbar-width:none;min-width:0;max-width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .logos-carrusel::-webkit-scrollbar{display:none}
  .logos-carrusel:has(.is-loop){overflow:hidden}
  .logos-track{display:flex;align-items:center;width:max-content;padding:6px 0}
  .logos-track>img.client{flex:0 0 auto;margin-right:64px}
  .logos-track.is-loop{animation:pc-logos 64s linear infinite}
  .logos-carrusel:hover .logos-track.is-loop{animation-play-state:paused}
  @keyframes pc-logos{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  @media(prefers-reduced-motion:reduce){.logos-track.is-loop{animation:none}}

  /* ---- BLOQUES CLAROS ---- */
  .enemy{background:var(--bg)}
  /* Va dentro de .wrap, no sobre el. Cuando compartia elemento con .wrap su
     margin:0 pisaba el margin:0 auto y el bloque se despegaba a la izquierda
     del viewport, fuera de la grilla del resto de la pagina. */
  .enemy-inner{max-width:62ch;margin:0;text-align:left}
  .enemy h2{margin-bottom:26px}
  .enemy p{margin-bottom:18px}
  .enemy .punch{font-weight:500;color:var(--black);font-size:22px;line-height:1.35}
  .rating{display:inline-flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:12px 24px;margin-top:28px;font-weight:500;color:var(--black);font-size:16px}

  /* ---- BENEFICIOS ---- */
  .bens{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
  .ben{text-align:left}
  .ben h3{margin-bottom:12px;color:var(--black);font-size:24px}
  .ben p{font-size:17px}

  /* ---- QUIZ (sobre negro) ---- */
  .quiz{background:var(--black);color:var(--white)}
  .quiz h2{color:var(--white)}
  .quiz-box{background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:var(--r);padding:40px;max-width:820px;margin:0}
  .q-step{display:none}
  .q-step.on{display:block}
  .q-label{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);font-weight:900;margin-bottom:14px;opacity:.7}
  .q-title{color:var(--white);font-size:clamp(22px,2.2vw,32px);font-weight:500;margin-bottom:26px;line-height:1.2;text-align:left}
  .q-opts{display:flex;flex-direction:column;gap:10px}
  .q-opt{background:transparent;border:1px solid rgba(255,255,255,.32);color:var(--white);text-align:left;padding:17px 22px;border-radius:var(--r);font-family:var(--font);font-size:17px;font-weight:300;cursor:pointer;transition:.15s}
  .q-opt:hover{background:var(--blue);border-color:var(--blue)}
  .q-result{text-align:left}
  .q-result .rec{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:900}
  .q-result h3{color:var(--white);font-size:clamp(28px,3.4vw,57px);font-weight:900;margin:12px 0 16px}
  .q-result p{color:rgba(255,255,255,.82);max-width:56ch;margin:0 0 30px}
  .q-progress{height:3px;background:rgba(255,255,255,.25);margin-bottom:30px;overflow:hidden}
  .q-progress i{display:block;height:100%;background:var(--orange);width:33%;transition:.3s}

  /* ---- PLANES ---- */
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  .plan{border:1px solid var(--line);border-radius:var(--r);padding:32px;background:var(--white);display:flex;flex-direction:column;position:relative;transition:.2s}
  .plan:hover{border-color:var(--blue)}
  .plan.featured{border:2px solid var(--blue)}
  .tag{position:absolute;top:-11px;left:30px;background:var(--orange);color:var(--white);font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px}
  .plan .name{font-size:24px;font-weight:900;color:var(--black);letter-spacing:-.02em;line-height:1.15}
  .plan .sub{font-size:16px;color:var(--blue);font-weight:500;margin:8px 0 18px}
  .plan .who{font-size:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
  .plan li{font-size:15.5px;color:var(--body);padding-left:22px;position:relative;font-weight:300}
  .plan li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--blue)}
  .plan .meta{font-size:14px;color:var(--soft);margin-bottom:16px}
  .plan .price{font-size:17px;font-weight:500;color:var(--black);margin-bottom:20px}
  .plan .price small{display:block;font-weight:300;color:var(--soft);font-size:13.5px;margin-top:4px}
  .plan .cta-wrap{margin-top:auto}

  /* ---- NIVELES ---- */
  .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
  .tier{border:1px solid var(--line);border-radius:var(--r);padding:32px;background:var(--white)}
  .tier.featured{border:2px solid var(--blue)}
  .tier h3{font-size:24px;color:var(--black);margin-bottom:6px;font-weight:900}
  .tier .apellido{font-size:15.5px;color:var(--blue);font-weight:500;margin-bottom:20px}
  .tier ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .tier li{font-size:15.5px;padding-left:22px;position:relative;color:var(--body);font-weight:300}
  .tier li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--blue)}
  .pill{font-size:11.5px;background:var(--orange);color:var(--white);padding:4px 11px;vertical-align:middle;letter-spacing:.14em;font-weight:900}

  /* ---- TABLA COMPARATIVA ---- */
  .cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
  table{width:100%;border-collapse:collapse;min-width:760px;background:var(--white)}
  th,td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:300}
  thead th{background:var(--black);color:var(--white);font-weight:500;font-size:14px}
  thead th.col-us{background:var(--blue);color:var(--white);font-weight:900}
  thead th:first-child{width:30%;background:var(--black)}
  td.col-us{background:rgba(66,92,199,.07);font-weight:500;color:var(--blue)}
  tbody td:first-child{font-weight:500;color:var(--black)}
  .yes{color:var(--blue);font-weight:900}
  .no{color:rgba(0,0,0,.3);font-weight:300}
  .mid{color:rgba(0,0,0,.55);font-weight:300}
  tbody tr:last-child td{border-bottom:0}

  /* ---- PASOS ---- */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  .step{background:var(--white);padding:34px 28px}
  .step-n{font-size:57px;font-weight:900;color:var(--blue);line-height:1;margin-bottom:18px;letter-spacing:-.04em}
  .step h3{margin-bottom:10px;font-size:24px;color:var(--black)}
  .step p{font-size:16px}

  /* ---- DOLORES ---- */
  .pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
  .pain-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:16px;transition:.2s}
  .pain-card:hover{border-color:var(--blue)}
  .quote{font-size:19px;font-weight:500;color:var(--black);line-height:1.35}
  .quote::before{content:"“"}.quote::after{content:"”"}
  .answer{display:flex;gap:12px;align-items:flex-start;padding-top:16px;border-top:1px solid var(--line)}
  .answer .tick{color:var(--blue);font-weight:900;flex-shrink:0}
  .answer p{font-size:16px;margin:0}
  .answer strong{color:var(--black);font-weight:500}

  /* ---- SERVICIOS ---- */
  .svc-group{margin-bottom:64px}
  .svc-group-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
  .svc-group-head h3{font-size:32px;color:var(--black);font-weight:900}
  .verb{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;background:var(--blue);color:var(--white);padding:6px 14px}
  .svc-group>p.intro{margin-bottom:28px;max-width:66ch}
  .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
  .svc{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--white);transition:.2s}
  .svc:hover{border-color:var(--blue)}
  .svc h3{font-size:20px;margin-bottom:12px;color:var(--black);font-weight:900}
  .svc p{font-size:16px;margin-bottom:16px}
  .svc ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .svc li{font-size:15px;color:var(--body);padding-left:20px;position:relative;font-weight:300}
  .svc li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--blue)}

  /* ---- CASO (sobre negro) ---- */
  .case{background:var(--black);color:var(--white)}
  .case h2{color:var(--white);max-width:18ch}
  .case p{color:rgba(255,255,255,.78)}
  .case-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .case-video{border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.28);aspect-ratio:16/9;background:#000}
  .case-video iframe{width:100%;height:100%;border:0;display:block}

  /* ---- CIFRAS ---- */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
  .stat{border-top:3px solid var(--blue);padding:24px 0 0}
  .stat .num{font-size:57px;font-weight:900;color:var(--black);letter-spacing:-.04em;line-height:1}
  .stat .lbl{margin-top:12px;font-size:15.5px;color:var(--body);font-weight:300}

  /* ---- FUNDADOR ---- */
  .founder{max-width:760px}
  .founder blockquote{font-size:clamp(22px,2.2vw,32px);font-weight:500;color:var(--black);line-height:1.3;letter-spacing:-.015em;font-style:italic}
  .founder .sig{margin-top:26px;font-size:16px;color:var(--body)}
  .founder .sig strong{color:var(--black);display:block;font-weight:900}

  /* ---- FAQ ---- */
  .faq{max-width:78ch;margin:0}
  details{border-bottom:1px solid var(--line);padding:24px 0}
  summary{cursor:pointer;font-weight:500;font-size:20px;color:var(--black);list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:flex-start;text-align:left}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:26px;color:var(--blue);font-weight:300;flex-shrink:0;line-height:1}
  details[open] summary::after{content:"–"}
  details p{margin-top:16px;font-size:17px}
  details p+p{margin-top:12px}

  /* ---- LEAD MAGNET ---- */
  .magnet{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:48px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
  .magnet h3{font-size:32px;color:var(--black);margin-bottom:16px;font-weight:900}
  .form-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
  .form-row input{flex:1;min-width:220px;padding:15px 22px;border:1px solid var(--line);border-radius:999px;font-family:var(--font);font-size:16px;font-weight:300;background:var(--white)}
  .form-row input:focus{outline:2px solid var(--blue);outline-offset:1px}

  /* ---- CTA ---- */
  .cta-outer{display:block}
  .cta{background:var(--blue);color:var(--white);text-align:left;border-radius:var(--r);padding:72px;margin:0 24px 96px;max-width:var(--max)}
  .cta h2{color:var(--white);max-width:20ch;margin:0}
  .cta p{color:rgba(255,255,255,.9);margin:20px 0 34px;max-width:56ch}
  .cta-btns{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}
  @media(min-width:1208px){.cta{margin-left:auto;margin-right:auto}}

  /* ---- VARIOS ---- */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
  /* Un item de grid trae min-width:auto, asi que crece hasta el ancho minimo
     de su contenido y se lleva la columna por delante. Con la cinta de logos
     dentro (8.800 px de pista) eso sacaba scroll horizontal en nosotros.html. */
  .two-col>*{min-width:0}
  .panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:36px}
  .panel h3{color:var(--black);margin-bottom:16px;font-size:24px;font-weight:900}
  .panel p{font-size:16px}
  .val-list{display:flex;flex-direction:column;gap:24px}
  .val{display:flex;gap:18px}
  .val .ic{width:40px;height:40px;background:var(--blue);color:var(--white);display:grid;place-items:center;font-weight:900;flex-shrink:0;font-size:16px}
  .val h4{font-size:20px;margin-bottom:6px;color:var(--black);font-weight:500}
  .val p{font-size:16px}

  /* ---- RUTA DE IMPLEMENTACION (carta gantt simplificada) ---- */
  /* Doce columnas = doce semanas, el techo del rango "2 a 3 meses". Cada barra
     se posiciona con --ini/--fin, que son numeros de semana, asi que mover una
     etapa es cambiar dos numeros en el HTML y no tocar el CSS. */
  .ruta{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
  .ruta-cab{display:grid;grid-template-columns:minmax(230px,1.1fr) 3fr;
    background:var(--bg);border-bottom:1px solid var(--line)}
  .ruta-cab>span{padding:14px 20px;font-size:12px;font-weight:900;letter-spacing:.14em;
    text-transform:uppercase;color:var(--body)}
  .ruta-meses{display:grid;grid-template-columns:repeat(3,1fr)}
  .ruta-meses span{padding:14px 10px;text-align:center;border-left:1px solid var(--line);
    font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
  .ruta-fila{display:grid;grid-template-columns:minmax(230px,1.1fr) 3fr;
    border-bottom:1px solid var(--line);align-items:center}
  .ruta-fila:last-child{border-bottom:0}
  .ruta-tarea{padding:18px 20px}
  .ruta-tarea strong{display:block;color:var(--black);font-weight:500;font-size:17px;margin-bottom:4px}
  .ruta-tarea span{display:block;font-size:14px;color:var(--body);line-height:1.45}
  .ruta-barras{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;
    padding:14px 12px;gap:0;position:relative;min-height:64px}
  /* lineas de mes al fondo, para leer la duracion de un vistazo */
  .ruta-barras::before{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(90deg,transparent,transparent calc(33.333% - 1px),
      var(--line) calc(33.333% - 1px),var(--line) 33.333%)}
  .barra{grid-column:var(--ini)/var(--fin);position:relative;z-index:1;
    background:var(--blue);color:var(--white);border-radius:99px;
    padding:9px 14px;font-size:13px;font-weight:500;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;text-align:center}
  .barra.hito{background:var(--orange)}
  /* Para lo que dura un dia: una sola columna, con el texto justo. */
  .barra.punto{padding:9px 8px;font-size:12px}
  .barra.suave{background:#DDE3F7;color:var(--blue)}

  @media(max-width:820px){
    /* En pantalla chica la grilla de semanas no se lee: la etapa pasa a
       tarjeta y la duracion se dice con palabras. */
    .ruta-cab{display:none}
    .ruta-fila{grid-template-columns:1fr}
    .ruta-tarea{padding:18px 20px 0}
    .ruta-barras{grid-template-columns:1fr;min-height:0;padding:12px 20px 18px}
    .ruta-barras::before{display:none}
    .barra{grid-column:1/2 !important;justify-self:start;white-space:normal}
  }

  /* ---- BLOG ---- */
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:26px}
  .post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r);padding:30px;transition:transform .25s,box-shadow .25s,border-color .25s}
  .post-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.09);border-color:var(--blue)}
  .post-card .post-tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:900;
    letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
    border:1px solid var(--blue);border-radius:99px;padding:5px 12px;margin-bottom:18px}
  .post-card h3{font-size:21px;line-height:1.28;margin-bottom:14px;color:var(--black)}
  /* El nombre del cliente dentro del titular: solo cambia de color, hereda el
     peso 500 del h3 para no pesar mas que el resto de la frase. */
  .post-card h3 .empresa{color:var(--orange)}
  .post-card p{font-size:16px;color:var(--body);margin-bottom:20px;flex:1}
  .post-meta{font-size:14px;color:var(--body);opacity:.75}
  .post-card .leer{margin-top:16px;font-weight:500;color:var(--blue)}

  /* Cuerpo del articulo: medida de lectura corta, que es lo unico que hace
     legible un texto largo. El resto del sitio usa 62ch; aca 68ch porque el
     cuerpo va en una sola columna sin nada al lado. */
  /* Logo del cliente en la cabecera de un caso. Los archivos de logo vienen
     con fondo blanco (no llevan transparencia), asi que sobre el azul del hero
     van dentro de una placa blanca: puestos directos se verian como un
     rectangulo blanco recortado. */
  .post-logo{display:flex;justify-content:center;margin-bottom:28px}
  .post-logo span{display:flex;align-items:center;justify-content:center;background:var(--white);
    border-radius:var(--r);padding:20px 28px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
  .post-logo img{max-height:76px;max-width:200px;width:auto;height:auto;object-fit:contain;display:block}
  /* Un escudo vertical necesita mas alto que un logotipo apaisado para tener
     la misma presencia: a 76 px de alto el del Club de Polo mide 56 de ancho
     y se pierde. Va con archivo propio en alta resolucion. */
  .post-logo img.logo-alto{max-height:140px;max-width:160px}
  .post-head{max-width:68ch}
  /* El bloque centrado va mas ancho que la medida de lectura del cuerpo: con
     68ch el titular se parte en cinco lineas y queda apretado bajo el logo. */
  .post-head.centrado{max-width:52rem;margin-left:auto;margin-right:auto;text-align:center}
  /* .hero h1 topea en 15ch y h1 alinea a la izquierda: ambos hay que soltarlos
     aca, si no el titular del caso queda angosto y descolgado bajo el logo. */
  .post-head.centrado h1{max-width:100%;text-align:center}
  .post-head.centrado .hero-sub{max-width:46ch;margin-left:auto;margin-right:auto}

  /* En la tarjeta del indice el fondo ya es blanco, asi que el logo va suelto. */
  .post-card .card-logo{display:flex;align-items:center;justify-content:center;
    height:78px;margin-bottom:20px}
  .post-card .card-logo img{max-height:48px;max-width:170px;width:auto;height:auto;
    object-fit:contain;display:block}
  .post-card .card-logo img.logo-alto{max-height:78px;max-width:110px}
  .post-body{max-width:68ch;font-size:18px}
  .post-body p{margin-bottom:22px}
  .post-body h2{font-size:26px;margin:44px 0 18px;color:var(--black)}
  .post-body h3{font-size:20px;margin:32px 0 14px;color:var(--black)}
  .post-body ul,.post-body ol{margin:0 0 22px 22px}
  .post-body li{margin-bottom:11px}
  .post-body blockquote{margin:30px 0;padding:20px 26px;background:var(--bg);
    border-left:3px solid var(--blue);font-style:italic;color:var(--black)}
  .post-body blockquote cite{display:block;margin-top:10px;font-style:normal;
    font-size:15px;color:var(--body)}
  .post-body a{color:var(--blue);text-decoration:underline}
  .post-nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:56px;padding-top:30px;
    border-top:1px solid var(--line)}

  /* ---- FOOTER ---- */
  footer{background:var(--black);color:rgba(255,255,255,.72);padding:80px 0 32px;font-size:16px}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.2)}
  footer .foothead{color:var(--white);font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px;font-weight:900}
  footer a:hover{color:var(--white)}
  .foot-links{display:flex;flex-direction:column;gap:11px}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:14px;color:rgba(255,255,255,.5)}

  /* Redes sociales: el icono es el enlace, asi que el nombre de la red va en
     aria-label para quien navega con lector de pantalla. */
  .social{display:flex;gap:12px;margin-top:14px}
  .social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:50%;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);
    transition:background .2s,color .2s,transform .2s}
  .social a:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}
  .social svg{width:18px;height:18px;fill:currentColor;display:block}

  /* ---- BOTON FLOTANTE DE WHATSAPP ---- */
  /* El globo con la pregunta aparece solo despues de unos segundos para no
     saltarle encima al visitante apenas entra. En pantallas chicas se esconde
     y queda solo el boton redondo, que ahi es lo unico que cabe sin tapar
     contenido. */
  .wa-float{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:12px;
    text-decoration:none;font-family:var(--font)}
  .wa-float .wa-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;
    border-radius:50%;background:#25D366;color:#fff;flex:0 0 auto;
    box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .2s,box-shadow .2s}
  .wa-float:hover .wa-btn{transform:scale(1.06);box-shadow:0 12px 30px rgba(0,0,0,.3)}
  .wa-float .wa-btn svg{width:30px;height:30px;fill:currentColor;display:block}
  .wa-float .wa-globo{background:var(--white);color:var(--black);font-size:15px;font-weight:500;
    padding:11px 16px;border-radius:22px;border:1px solid var(--line);white-space:nowrap;
    box-shadow:0 6px 20px rgba(0,0,0,.12);opacity:0;transform:translateX(10px);
    animation:pc-wa-globo .45s ease 2.4s forwards}
  @keyframes pc-wa-globo{to{opacity:1;transform:translateX(0)}}
  @media(prefers-reduced-motion:reduce){
    .wa-float .wa-globo{animation:none;opacity:1;transform:none}
  }
  @media(max-width:700px){
    .wa-float{right:16px;bottom:16px}
    .wa-float .wa-globo{display:none}
    .wa-float .wa-btn{width:54px;height:54px}
  }
  .foot-logo{display:block;margin-bottom:18px}
  .foot-logo img{display:block;width:160px;height:auto}
  .slogan{color:var(--white);font-weight:500;font-size:20px;margin-bottom:14px;font-style:italic}

  .hero-sub{font-size:clamp(22px,2.6vw,32px);font-weight:500;color:var(--white);margin-top:18px;max-width:22ch;line-height:1.2}
  .sr-head{font-size:32px;font-weight:900;color:var(--black);margin-bottom:36px;max-width:26ch}
  .page{display:none}
  .page.active{display:block}
  .note{background:var(--white);border-left:3px solid var(--blue);padding:18px 22px;font-size:15px;color:var(--body);margin-top:26px}
  .note strong{color:var(--black);font-weight:500}

  @media(max-width:980px){
    .case-grid,.two-col,.magnet{grid-template-columns:1fr;gap:36px}
    .foot-grid{grid-template-columns:1fr;gap:36px}
    .logos-track>img.client{margin-right:52px}
  }
  @media(max-width:560px){
    .logos-track>img.client{margin-right:40px}
    img.client{max-height:46px}
    img.client-medio{max-height:58px}
    img.client-alto{max-height:70px}
  }

  /* ---- Testimonios en video ---- */
  /* min(420px,100%) evita que la columna quede mas ancha que la pantalla
     en moviles angostos y provoque scroll horizontal */
  .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:24px}
  .testi{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
    overflow:hidden;display:flex;flex-direction:column;transition:.2s}
  .testi:hover{border-color:var(--blue)}
  .testi .vid{aspect-ratio:16/9;background:#000;border-bottom:1px solid var(--line)}
  .testi .vid iframe{width:100%;height:100%;border:0;display:block}
  .testi-body{padding:26px 28px 30px}
  .testi-body .name{margin-bottom:4px}
  .testi-body .meta{margin-bottom:14px}
  .testi-body p{font-size:16px}

  /* ============================================================
     ANIMACIONES AL HACER SCROLL — las activa animaciones.js
     El estado oculto vive bajo html.js-anim: sin JavaScript la
     pagina se ve completa y Google la indexa igual.
     ============================================================ */
  html.js-anim .reveal{opacity:0;will-change:opacity,transform;
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  html.js-anim .reveal.from-left{transform:translateX(-24px)}
  html.js-anim .reveal.from-below{transform:translateY(20px)}
  html.js-anim .reveal.is-in{opacity:1;transform:none}

  /* Bloque de conversion: se levanta cuando queda a la vista */
  .cta{transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease}
  html.js-anim .cta.is-live{transform:translateY(-5px);box-shadow:0 20px 54px rgba(66,92,199,.3)}
  .quiz-box{transition:border-color .55s ease,box-shadow .55s ease}
  html.js-anim .quiz-box.is-live{border-color:rgba(255,255,255,.75);
    box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 50px rgba(0,0,0,.45)}

  /* Un pulso del boton del header al dejar atras el hero */
  @keyframes pc-nudge{0%,100%{transform:none}32%{transform:scale(1.07)}64%{transform:scale(.985)}}
  html.js-anim .nav .btn-primary.is-nudge{animation:pc-nudge .8s cubic-bezier(.16,1,.3,1)}

  /* Si el sistema pide menos movimiento, no se anima nada */
  @media(prefers-reduced-motion:reduce){
    html.js-anim .reveal{opacity:1!important;transform:none!important;transition:none}
    html.js-anim .cta.is-live{transform:none;box-shadow:none}
    html.js-anim .quiz-box.is-live{box-shadow:none}
    html.js-anim .nav .btn-primary.is-nudge{animation:none}
  }
  @media(max-width:900px){
    body{font-size:17px}
    .nav-links{display:none;position:absolute;top:78px;left:0;right:0;background:var(--white);flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 22px;border-bottom:1px solid var(--line)}
    .nav-links.open{display:flex}
    .nav-links button,.nav-links a[data-nav]{text-align:left;padding:14px 0;border-bottom:1px solid var(--line)}
    .nav-links .btn{justify-content:center;margin-top:14px}
    .menu-toggle{display:block}
    section{padding:64px 0}
    .hero{padding:72px 0 64px}
    .cta{padding:44px 28px;margin:0 16px 64px}
    .quiz-box,.magnet,.panel{padding:28px}
    .plan,.tier,.svc,.pain-card{padding:26px}
  }

  /* ---- AVISO DE COOKIES ---- */
  .cookie-note{position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--black);color:var(--white);
    padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;
    font-size:13.5px;font-weight:500}
  .cookie-note p{margin:0;max-width:60ch}
  .cookie-note button{background:var(--white);color:var(--black);border:none;border-radius:999px;
    padding:8px 20px;font-family:var(--font);font-weight:500;font-size:13.5px;cursor:pointer;white-space:nowrap}
  .cookie-note[hidden]{display:none}