/* PINTA - home.css
   Estilos especificos de esta pagina. Requiere base.css cargado antes. */

  .model, .ecosystem, .reviews, .close, footer {
    cursor: url('/assets/images/cursor-interactive.png') 4 4, auto;
  }
  /* Keep anchored section titles clear of the fixed header on scroll */
  #ecosistema-digital, #soluciones, #casos, #diagnostico-digital{
    scroll-margin-top: 100px;
  }

  /* ===== SECTION 02 — PROBLEM ===== */
  .problem{ padding:170px 0; border-top:1px solid var(--ink-12); }
  .problem-grid{ display:grid; grid-template-columns:280px 1fr; gap:60px; }
  .problem-label{ font-family:var(--mono); font-size:13px; color:var(--ink-45); text-transform:uppercase; letter-spacing:.06em; padding-top:10px;}
  .problem-def{ font-size:17px; line-height:1.5; color:var(--ink-65); max-width:640px; margin-bottom:56px; padding-bottom:56px; border-bottom:1px solid var(--ink-12);}
  .problem-op{ font-family:var(--display); font-weight:700; font-size:34px; line-height:1.15; color:var(--ink-45); max-width:680px; margin-bottom:34px; }
  .problem-tension{ font-family:var(--display); font-weight:900; font-size:52px; line-height:1.06; max-width:760px; }
  .problem-symptoms{ font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; line-height:1.9; max-width:600px; margin-top:34px; }
  .problem-symptoms .hl{ background:var(--yellow); color:var(--ink); padding:2px 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

  /* ===== SECTION 03 — MODEL ===== */
  .model{ padding:170px 0 150px; background:var(--bg-dark); color:var(--paper); }
  .model-centered{ width:max-content; max-width:100%; margin:0 auto; }
  .section-label{ font-family:var(--mono); font-size:13px; color:var(--paper-45,rgba(250,249,246,.45)); text-transform:uppercase; letter-spacing:.06em; margin-bottom:40px; }
  .section-label.on-light{ color:var(--ink-45); }
  .model .wrap > .model-centered > .section-head{ margin-bottom:90px; }
  .section-head h2{ font-size:46px; max-width:640px; margin-bottom:20px; text-align:left; }
  .section-head p{ font-size:18px; color:var(--paper-65); max-width:560px; line-height:1.5; }
  .model .section-head p{ color:var(--paper-65); }

  .model-copy{ display:flex; align-items:flex-start; justify-content:flex-start; gap:0; margin-top:70px; }
  .model-copy-item{ flex:0 0 auto; width:200px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
  .model-connector{ display:flex; align-items:center; padding-top:24px; flex:0 0 auto; }
  .micon-badge{
    width:56px; height:56px; border-radius:50%; border:1px solid rgba(241,232,1,.35);
    display:flex; align-items:center; justify-content:center; margin-bottom:4px;
    color:var(--yellow);
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  .model-copy-item:hover .micon-badge{
    color:var(--paper); border-color:var(--paper); background:rgba(250,249,246,.06);
  }
  .model-copy-item h4{ font-family:var(--body); font-weight:900; font-size:26px; color:var(--paper); letter-spacing:-.01em; line-height:1.1; }
  .model-copy-item p{ font-family:var(--mono); font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; line-height:1.5; color:var(--paper-65); }
  .model-cta{ margin-top:80px; }

  /* ===== SECTION 04 — IMPACT ===== */
  .impact{ padding:170px 0; }
  .impact-head{ display:flex; flex-wrap:wrap; justify-content:center; gap:100px; margin-bottom:100px; align-items:flex-start; }
  .impact-title h2{ font-size:52px; max-width:600px; }
  .impact-h2{
    font-size:44px; max-width:none; white-space:nowrap;
    display:flex; align-items:baseline; gap:2px;
  }
  .impact-h2 .plus{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--yellow); color:var(--ink);
    width:.62em; height:.62em; border-radius:6px;
    font-size:.62em; margin:0 6px 0 0; transform:translateY(-.06em);
  }
  .impact-h2 .dim{ color:var(--ink-45); }
  .impact-results{ display:flex; gap:70px; }
  .impact-result{ max-width:340px; }
  .impact-result .num{ font-family:var(--mono); font-size:12px; color:var(--yellow-hover); background:var(--ink); display:inline-block; padding:4px 10px; margin-bottom:14px; border-radius:6px; }
  .impact-result h3{ font-family:var(--display); font-weight:900; font-size:46px; line-height:.98; margin-bottom:16px; }
  .impact-result p{ font-size:16px; color:var(--ink-65); line-height:1.5; }

  .solutions-map{ position:relative; }
  .sol-svg-layer{ margin-bottom:-2px; }
  .solutions-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--ink-12); border:1px solid var(--ink-12); border-radius:14px; overflow:hidden;}
  .sol-cell{
    background:var(--bg-light); padding:30px 20px; min-height:170px;
    display:flex; flex-direction:column; justify-content:space-between;
    cursor:pointer; transition:background .2s ease;
  }
  .sol-cell:hover{ background:var(--ink); }
  .sol-cell:hover .sol-name, .sol-cell:hover .sol-arrow{ color:var(--paper); }
  .sol-cell:hover .sol-tag{ color:var(--yellow); border-color:var(--yellow);}
  .sol-tag{
    font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-45); border:1px solid var(--ink-12); padding:3px 8px; border-radius:20px; width:fit-content;
    transition:color .2s ease, border-color .2s ease;
  }
  .sol-name{ font-family:var(--body); font-weight:700; font-size:15.5px; line-height:1.25; margin-top:20px; transition:color .2s ease;}
  .sol-arrow{ font-size:18px; margin-top:14px; color:var(--ink-45); transition:color .2s ease;}
  .impact-cta{ display:flex; justify-content:center; margin-top:60px; }

  /* ===== SECTION 05 — METHOD ===== */
  .method{ padding:170px 0; background:var(--bg-light); border-top:1px solid var(--ink-12); }
  .method-title{ margin-bottom:90px; }
  .method-title h2{ font-size:52px; max-width:700px; }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); position:relative; }
  .steps::before{
    content:''; position:absolute; top:12px; left:0; right:0; height:1px; background:var(--ink-12); z-index:0;
  }
  .step{ padding-right:40px; position:relative; z-index:1; }
  .step:last-child{ padding-right:0; }
  .step-num{
    font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em;
    color:var(--yellow-hover); background:var(--ink); display:inline-block;
    padding:4px 10px; margin-bottom:26px;
  }
  .step h3{ font-family:var(--body); font-weight:700; font-size:18px; margin-bottom:10px; }
  .step p{ font-size:14.5px; color:var(--ink-65); line-height:1.5; }

  /* ===== SECTION 06+07 — ECOSYSTEM + JOURNEY ===== */
  .ecosystem{ padding:170px 0 0; background:var(--bg-dark); color:var(--paper); }
  .eco-head{ margin-bottom:20px; }
  .eco-head h2{ font-size:52px; max-width:700px; margin-bottom:22px; }
  .eco-head p{ font-size:18px; color:var(--paper-65); max-width:600px; line-height:1.5; margin-bottom:10px;}
  .eco-note{ font-size:15px; color:var(--paper-45,rgba(250,249,246,.45)); max-width:540px; margin-top:16px; }
  .eco-cta{ margin-top:40px; margin-bottom:90px; }

  .arch-ref{ padding:0 0 130px; border-bottom:1px solid var(--paper-14); }
  .arch-layers{ display:flex; flex-direction:column; gap:1px; background:var(--paper-14); border:1px solid var(--paper-14); max-width:920px; margin:0 auto; border-radius:14px; overflow:hidden;}
  .arch-layer{
    background:var(--bg-dark); padding:20px 34px;
    display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:24px;
    transition:background .2s ease;
  }
  .arch-layer:hover{ background:rgba(250,249,246,.04); }
  .arch-layer .n{ font-family:var(--mono); font-size:12px; color:var(--yellow); }
  .arch-layer .name{ font-family:var(--body); font-weight:700; font-size:16px; text-align:left; }
  .arch-layer .items{ font-family:var(--mono); font-size:12.5px; color:var(--paper-65); text-align:right; letter-spacing:.01em; white-space:nowrap; }
  .arch-transverse{ max-width:920px; margin:22px auto 0; display:flex; gap:1px; }
  .arch-tlayer{
    flex:1; border:1px dashed var(--paper-30); padding:14px 20px; border-radius:10px;
    font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--paper-65);
    display:flex; align-items:center; gap:10px;
  }
  .arch-tlayer .dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow); flex:0 0 auto; }
  .arch-loop-note{
    text-align:center; margin-top:34px; font-family:var(--mono); font-size:12px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--yellow);
  }

  .journey{ padding:130px 0 150px; }
  .journey-head{ text-align:left; margin-bottom:80px; }
  .journey-head .eyebrow{ color:var(--paper-65); text-align:left; }
  .journey-head h3{ font-family:var(--body); font-weight:900; font-size:30px; margin-top:16px; }
  .journey-track{ position:relative; max-width:520px; margin:0 auto; }
  .journey-line{ position:absolute; left:20.5px; top:2px; width:1px; background:var(--paper-14); height:0; }
  .journey-progress{ position:absolute; left:20.5px; top:2px; width:1px; background:var(--yellow); height:0; transition:height .1s linear; }
  .jstation{ position:relative; padding:0 0 56px 60px; }
  .jstation:last-child{ padding-bottom:0; }
  .jstation .dot{
    position:absolute; left:15px; top:2px; width:12px; height:12px;
    clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background:var(--bg-dark); border:1.5px solid var(--paper-30); transition:all .3s ease;
  }
  .jstation.active .dot{ background:var(--yellow); border-color:var(--yellow); filter:drop-shadow(0 0 4px rgba(241,232,1,.5)); }
  .jstation .jn{ font-family:var(--mono); font-size:11px; color:var(--paper-45,rgba(250,249,246,.45)); margin-bottom:4px; transition:color .3s ease;}
  .jstation.active .jn{ color:var(--yellow); }
  .jstation h4{ font-family:var(--body); font-weight:700; font-size:17px; color:var(--paper-65); transition:color .3s ease;}
  .jstation.active h4{ color:var(--paper); }
  .jstation .jdot-token{
    position:absolute; left:10px; top:-3px; width:20px; height:20px;
    clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background:var(--yellow); opacity:0; transition:opacity .3s ease, transform .3s ease;
    filter:drop-shadow(0 0 10px rgba(241,232,1,.55));
  }
  .jstation.active .jdot-token{ opacity:1; }
  .journey-loop{
    margin-top:56px; padding:26px 30px; border:1px dashed rgba(241,232,1,.35); border-radius:14px;
    display:flex; align-items:center; gap:16px; max-width:520px; margin-left:auto; margin-right:auto;
  }
  .journey-loop svg{ flex:0 0 auto; }
  .journey-loop-icon{ flex:0 0 auto; width:26px; height:auto; opacity:.95; }
  .journey-loop p{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--yellow); line-height:1.5; }
  .journey-cta{ display:flex; justify-content:center; margin-top:56px; }

  /* ===== SECTION 08 — CASES ===== */
  .cases{ padding:170px 0; background:var(--bg-light); }
  .cases-head{ display:block; margin-bottom:90px; }
  .cases-cta{ display:flex; justify-content:center; margin-top:70px; }
  .cases-head h2{ font-size:52px; max-width:600px; margin-bottom:16px; }
  .case{
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
    padding:70px 0; border-top:1px solid var(--ink-12);
  }
  .case:last-of-type{ border-bottom:1px solid var(--ink-12); }
  .case-video{
    aspect-ratio:16/10; background:var(--ink); border-radius:14px; position:relative;
    overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer;
    border:1px solid rgba(250,249,246,.08);
  }
  .case-video .bgpattern{ position:absolute; inset:0; opacity:.5; }
  .case-video::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(120% 90% at 30% 20%, rgba(241,232,1,.05), transparent 60%);
    pointer-events:none;
  }
  .case-video .play{
    width:68px; height:68px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; position:relative; z-index:2;
    box-shadow:0 0 0 0 rgba(241,232,1,0);
  }
  .case-video:hover .play{ transform:scale(1.08); box-shadow:0 8px 28px rgba(0,0,0,.35); }
  .case-video .play svg{ margin-left:4px; }
  .case-video .dur{
    position:absolute; bottom:16px; right:16px; z-index:2;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--paper);
    background:rgba(0,0,0,.55); border:1px solid rgba(250,249,246,.12);
    padding:5px 10px; border-radius:6px;
  }
  .case-video .caselabel{
    position:absolute; top:16px; left:16px; z-index:2;
    font-family:var(--mono); font-size:10.5px; color:var(--paper-65,rgba(250,249,246,.65));
    text-transform:uppercase; letter-spacing:.06em;
    border:1px solid rgba(250,249,246,.14); padding:5px 10px; border-radius:20px;
  }
  .case-body .rubro{ font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-45); margin-bottom:16px; }
  .case-body h3{ font-family:var(--display); font-weight:900; font-size:32px; margin-bottom:18px; }
  .case-stack{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .case-stack span{
    font-family:var(--mono); font-size:11.5px; border:1px solid var(--ink-12); padding:5px 10px; border-radius:20px;
    background:var(--bg-light); color:var(--ink-65);
    transition:background .15s ease, color .15s ease, border-color .15s ease; cursor:default;
  }
  .case-stack span:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .case-body p.desc{ font-size:16px; color:var(--ink-65); line-height:1.55; max-width:440px; margin-bottom:26px; }
  .case-body .btn-ghost{ color:var(--ink); border-bottom:1px solid var(--yellow-hover); }
  .case-body .btn-ghost .arrow-y{ color:var(--yellow-hover); }
  .case-body .btn-ghost:hover{ color:var(--ink); border-color:var(--ink); }
  .case-body .btn-ghost:hover .arrow-y{ color:var(--ink); }

  /* ===== SECTION 09 — REVIEWS ===== */
  .reviews{ padding:170px 0; background:var(--bg-dark); color:var(--paper); }
  .reviews-head{ text-align:center; margin-bottom:64px; }
  .reviews-head h2{ font-size:44px; margin-bottom:24px; }
  .rating-line{ display:flex; align-items:center; justify-content:center; gap:14px; }
  .stars{ color:var(--yellow); font-size:20px; letter-spacing:2px; }
  .rating-num{ font-family:var(--mono); font-size:14px; color:var(--paper-65); }
  .reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-14); border:1px solid var(--paper-14); max-width:1000px; margin:0 auto; border-radius:14px; overflow:hidden; }
  .review-card{ background:var(--bg-dark); padding:34px 30px; display:flex; flex-direction:column; gap:18px; }
  .review-card .stars-sm{ color:var(--yellow); font-size:14px; letter-spacing:2px; }
  .review-card p.quote{ font-size:15px; line-height:1.55; color:var(--paper-65); flex:1; }
  .review-card .who{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--paper-45,rgba(250,249,246,.45)); text-transform:uppercase; letter-spacing:.04em; padding-top:14px; border-top:1px solid var(--paper-14); }
  .reviews-cta{ text-align:center; margin-top:50px; }

  /* ===== SECTION 10 — DIAGNOSTIC ===== */
  .diagnostic{ padding:170px 0; background:var(--bg-light); }
  .diag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:100px; }
  .diag-left .tag-product{
    font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink); background:var(--yellow); padding:5px 11px; display:inline-block; margin-bottom:26px; border-radius:6px;
  }
  .diag-left h2{ font-family:var(--display); font-weight:900; font-size:48px; margin-bottom:22px; }
  .diag-left p.sub{ font-size:18px; color:var(--ink-65); line-height:1.55; max-width:460px; margin-bottom:30px; }
  .diag-left p.note{ font-size:14.5px; color:var(--ink-45); max-width:420px; margin-bottom:36px; font-style:italic;}
  .diag-cols{ display:flex; flex-direction:column; gap:44px; }
  .diag-col h4{ font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-45); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--ink-12); }
  .diag-col ul li{ font-size:15.5px; color:var(--ink); padding:8px 0; border-bottom:1px solid var(--ink-12); }
  .diag-col ul li:last-child{ border-bottom:none; }
  .diag-mobile-cta{ display:none; }

  /* ===== SECTION 11 — CLOSE ===== */
  .close{ padding:170px 0; text-align:center; background:var(--bg-dark); color:var(--paper); }

  /* ===== FOOTER ===== */
  footer{ background:#262626; color:var(--paper); padding:80px 0 34px; }
  .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid var(--paper-14); align-items:center; }

  /* ===== WHATSAPP FLOTANTE (solo Home) ===== */
  .wa-float{
    position:fixed;
    right:max(24px, env(safe-area-inset-right));
    bottom:max(24px, env(safe-area-inset-bottom));
    z-index:90;
    width:52px; height:52px;
    border-radius:50%;
    background:var(--ink);
    border:1px solid var(--paper-14);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(30,18,11,.25);
    transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .wa-float svg{ width:24px; height:24px; display:block; }
  .wa-float svg path{ fill:var(--paper); transition:fill .2s ease; }
  .wa-float:hover, .wa-float:focus-visible{
    background:var(--yellow);
    border-color:var(--yellow);
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(30,18,11,.3);
  }
  .wa-float:hover svg path, .wa-float:focus-visible svg path{ fill:var(--ink); }
  .wa-float:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  /* ============================================================
     MOBILE — 320px a 767px
     Diseñado específicamente para mobile, no es el desktop reducido.
     ============================================================ */
  @media (max-width: 767px){

    .wrap{ padding:0 20px; }

    #ecosistema-digital, #soluciones, #casos, #diagnostico-digital{
      scroll-margin-top: 76px;
    }

    .wa-float{
      width:48px; height:48px;
      right:max(16px, env(safe-area-inset-right));
      bottom:max(16px, env(safe-area-inset-bottom));
    }
    .wa-float svg{ width:22px; height:22px; }

    /* ---------- HEADER / NAV ---------- */
    header{ padding:16px 20px; }
    header.scrolled{ padding:12px 20px; }
    .logo-iso{ height:28px; }
    nav{ display:none; }
    .nav-cta{ display:none; }
    .hamburger{ display:flex; }

    /* ---------- SECTION RHYTHM ---------- */
    .hero{ padding:120px 0 56px; min-height:auto; }
    .problem{ padding:72px 0; }
    .model{ padding:72px 0 64px; }
    .impact{ padding:72px 0; }
    .method{ padding:72px 0; }
    .ecosystem{ padding:72px 0 0; }
    .cases{ padding:72px 0; }
    .reviews{ padding:72px 0; }
    .diagnostic{ padding:72px 0; }
    .close{ padding:88px 0; }

    /* ---------- HERO ---------- */
    .hero-brandline{ font-size:11px; letter-spacing:.03em; margin-bottom:14px; line-height:1.5; }
    .hero h1{
      font-size:44px; max-width:100%; white-space:normal; margin-left:0; margin-bottom:4px; line-height:1.02;
    }
    .hero-sub{ font-size:17px; }
    .eyebrow{ font-size:12px; line-height:1.55; max-width:100%; }
    .hero-ctas{ flex-direction:column; align-items:stretch; gap:14px; margin-top:32px; }
    .hero-ctas .btn-primary{ text-align:center; padding:16px 20px; }
    .hero-ctas .btn-ghost{ text-align:center; padding:12px 4px; }
    .hero-nodes-static{ width:110px; margin:0 0 22px auto; }
    .scroll-cue{ display:none; }

    /* ---------- 02 PUNTO DE PARTIDA ---------- */
    .problem-grid{ grid-template-columns:1fr; gap:24px; }
    .problem-label{ padding-top:0; }
    .problem-def{ font-size:15px; margin-bottom:28px; padding-bottom:28px; }
    .problem-tension{ font-size:30px; max-width:100%; }
    .problem-symptoms{ font-size:12px; max-width:100%; margin-top:24px; }

    /* ---------- 03 QUÉ HACEMOS ---------- */
    .section-label{ font-size:12px; margin-bottom:24px; }
    .section-head h2{ font-size:30px; max-width:100%; }
    .model-centered{ width:100%; }
    .model-copy{
      flex-direction:column; align-items:center; gap:0; margin-top:44px;
    }
    .model-copy-item{ width:100%; max-width:260px; }
    .model-connector{ padding:14px 0; transform:rotate(90deg); }
    .model-cta{ margin-top:48px; }

    /* ---------- 04 IMPACTO ---------- */
    .impact-head{ flex-direction:column; align-items:stretch; gap:40px; margin-bottom:56px; }
    .impact-results{ flex-direction:column; gap:32px; }
    .impact-result{ max-width:100%; width:100%; }
    .impact-result h3{ font-size:32px; }
    .solutions-grid{ grid-template-columns:1fr; border-radius:12px; }
    .sol-cell{ padding:22px 20px; min-height:auto; flex-direction:row; align-items:center; justify-content:space-between; }
    .sol-name{ margin-top:0; font-size:14.5px; }
    .sol-tag{ display:none; }
    .impact-cta{ margin-top:44px; }
    .impact-cta .btn-primary{ width:100%; text-align:center; }

    /* ---------- 05 METODOLOGÍA ---------- */
    .method-title h2{ font-size:30px; max-width:100%; }
    .steps{ grid-template-columns:1fr; gap:32px; }
    .steps::before{ display:none; }
    .step{ padding-right:0; padding-left:24px; border-left:1.5px dashed var(--ink-12); }
    .step-num{ margin-bottom:14px; }

    /* ---------- 06 ECOSISTEMA ---------- */
    .eco-head h2{ font-size:30px; max-width:100%; }
    .eco-head p{ font-size:15px; }
    .eco-note{ font-size:13px; }
    .arch-layer{
      display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto;
      grid-template-areas:"num name" "blank items"; row-gap:6px; column-gap:10px; padding:16px 18px;
    }
    .arch-layer .n{ grid-area:num; }
    .arch-layer .name{ grid-area:name; text-align:left; font-size:14.5px; }
    .arch-layer .items{ grid-area:items; text-align:left; white-space:normal; font-size:11px; }
    .arch-transverse{ flex-direction:column; gap:8px; }
    .arch-tlayer{ font-size:10.5px; }
    .arch-loop-note{ font-size:11px; }

    .journey-head h3{ font-size:22px; }
    .journey-track{ max-width:100%; }
    .jstation{ padding:0 0 40px 46px; }
    .jstation .dot{ left:11px; }
    .jstation .jdot-token{ left:6px; }
    .journey-line, .journey-progress{ left:16.5px; }
    .journey-loop{ padding:20px 18px; max-width:100%; }
    .journey-loop p{ font-size:11px; }

    /* ---------- 07 CASOS ---------- */
    .cases-head h2{ font-size:32px; }
    .case{ grid-template-columns:1fr; gap:24px; padding:44px 0; }
    .case-body h3{ font-size:24px; }
    .case-body p.desc{ max-width:100%; }
    .case-video .play{ width:52px; height:52px; }

    /* ---------- 08 RESEÑAS ---------- */
    .reviews-head h2{ font-size:28px; }
    .reviews-grid{ grid-template-columns:1fr; max-width:100%; }

    /* ---------- 09 DIAGNÓSTICO DIGITAL ---------- */
    .diag-grid{ grid-template-columns:1fr; gap:44px; }
    .diag-left h2{ font-size:30px; }
    .diag-cols{ gap:32px; }
    .diag-mobile-cta{ display:flex; margin-top:8px; }
    .diag-mobile-cta .btn-primary{ width:100%; text-align:center; }

    /* ---------- 10 CIERRE ---------- */
    .close h2{ font-size:38px; }

    /* ---------- FOOTER ---------- */
    .footer-top{ grid-template-columns:1fr; gap:36px; padding-bottom:36px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
  }

  /* ============================================================
     TABLET — 768px a 1023px
     Diseñado específicamente para tablet: ni Desktop reducido
     ni Mobile ensanchado. Mismo contenido y jerarquía conceptual,
     composición propia.
     ============================================================ */
  @media (min-width: 768px) and (max-width: 1023px){

    .wrap{ padding:0 48px; }

    /* ---------- HEADER / NAV ----------
       Decisión estructural: el menú horizontal completo (5 links + CTA + logo)
       no entra con comodidad en 768–1023px sin apretar tipografía o cortar
       aire. Tablet reutiliza el panel de navegación (hamburguesa) pero
       ligeramente más ancho que en Mobile, pensado para dedo/lápiz, no para
       simular el header de Desktop. */
    header{ padding:20px 48px; }
    header.scrolled{ padding:14px 48px; }
    nav{ display:none; }
    .nav-cta{ display:none; }
    .hamburger{ display:flex; }
    .mobile-nav{ width:56%; max-width:380px; padding:110px 40px 40px; }
    .mobile-nav a{ font-size:18px; padding:16px 0; }

    /* ---------- SECTION RHYTHM ---------- */
    .hero{ padding:132px 0 72px; min-height:auto; }
    .problem{ padding:120px 0; }
    .model{ padding:130px 0 110px; }
    .impact{ padding:120px 0; }
    .method{ padding:120px 0; }
    .ecosystem{ padding:120px 0 0; }
    .arch-ref{ padding:0 0 90px; }
    .journey{ padding:90px 0 110px; }
    .cases{ padding:120px 0; }
    .reviews{ padding:120px 0; }
    .diagnostic{ padding:120px 0; }
    .close{ padding:120px 0; }

    /* ---------- 01 HERO ---------- */
    .hero-brandline{ font-size:12.5px; margin-bottom:20px; }
    .hero h1{
      font-size:clamp(46px, 7.6vw, 68px); max-width:100%; white-space:normal;
      margin-left:0; margin-bottom:8px; line-height:1.02;
    }
    .hero-sub{ font-size:18px; max-width:520px; margin-top:24px; }
    .eyebrow{ font-size:13px; }
    .hero-ctas{ gap:24px; margin-top:40px; flex-wrap:wrap; }
    .hero-nodes-static{ width:clamp(140px,20vw,190px); margin-bottom:20px; }
    .scroll-cue{ left:48px; }

    /* ---------- 02 PUNTO DE PARTIDA ---------- */
    .problem-grid{ grid-template-columns:180px 1fr; gap:40px; }
    .problem-def{ font-size:16px; margin-bottom:44px; padding-bottom:44px; }
    .problem-op{ font-size:28px; }
    .problem-tension{ font-size:clamp(34px,4.6vw,44px); max-width:640px; }
    .problem-symptoms{ font-size:12.5px; max-width:520px; margin-top:28px; }

    /* ---------- 03 QUÉ HACEMOS ----------
       Se conserva la lectura horizontal (Marketing → Sistemas → AI): a este
       ancho el flujo completo entra sin necesidad de apilar como en Mobile. */
    .section-label{ margin-bottom:32px; }
    .section-head h2{ font-size:clamp(30px,4.2vw,40px); max-width:520px; }
    .model-copy{ gap:0; margin-top:56px; justify-content:center; }
    .model-copy-item{ width:150px; }
    .model-copy-item h4{ font-size:21px; }
    .model-copy-item p{ font-size:11px; }
    .micon-badge{ transform:scale(.86); }
    .model-connector{ padding-top:22px; }
    .model-cta{ margin-top:60px; }

    /* ---------- 04 IMPACTO ----------
       Título a la izquierda y resultados en fila al lado, no centrado como
       Desktop ni apilado y centrado como Mobile: aprovecha el ancho medio
       en dos bloques alineados a la izquierda. */
    .impact-head{
      flex-direction:column; align-items:flex-start; justify-content:flex-start;
      gap:48px; margin-bottom:72px;
    }
    .impact-title h2{ font-size:clamp(34px,4.6vw,42px); }
    .impact-results{ flex-direction:row; gap:44px; flex-wrap:wrap; }
    .impact-result{ max-width:280px; }
    .impact-result h3{ font-size:36px; }
    .solutions-grid{ grid-template-columns:repeat(3,1fr); }
    .sol-cell{ padding:24px 18px; min-height:130px; }
    .sol-name{ font-size:14px; }
    .impact-cta{ margin-top:56px; }

    /* ---------- 05 METODOLOGÍA ---------- */
    .method-title{ margin-bottom:64px; }
    .method-title h2{ font-size:clamp(32px,4.4vw,42px); max-width:520px; }
    .steps{ grid-template-columns:repeat(2,1fr); row-gap:44px; column-gap:40px; }
    .steps::before{ display:none; }
    .step{ padding-right:24px; }
    .step h3{ font-size:17px; }

    /* ---------- 06 ECOSISTEMA — ARQUITECTURA ----------
       Sin scroll horizontal: cada capa pasa de fila-tabla (Desktop) a una
       tarjeta de dos líneas (nombre arriba, ítems abajo en texto corrido),
       más espaciosa que la grilla 2 columnas de Mobile. */
    .eco-head h2{ font-size:clamp(36px,5vw,46px); max-width:560px; }
    .eco-head p{ font-size:16px; max-width:520px; }
    .eco-cta{ margin-bottom:64px; }
    .arch-layers{ max-width:100%; }
    .arch-layer{
      display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px 22px;
    }
    .arch-layer .n{ order:-1; }
    .arch-layer .name{ font-size:16px; text-align:left; }
    .arch-layer .items{ font-size:12.5px; text-align:left; white-space:normal; color:var(--paper-65); }
    .arch-transverse{ flex-direction:row; gap:1px; margin-top:24px; }
    .arch-tlayer{ font-size:11.5px; }

    /* ---------- 06b JOURNEY DEL DATO ---------- */
    .journey-head h3{ font-size:26px; max-width:480px; }
    .journey-track{ max-width:480px; }
    .journey-loop{ max-width:480px; margin-left:auto; margin-right:auto; }

    /* ---------- 07 CASOS ----------
       Video centrado con ancho propio (no full-bleed como Mobile, no
       partido 50/50 como Desktop): el texto conserva jerarquía completa
       debajo, con más aire que en Mobile. */
    .cases-head h2{ font-size:clamp(36px,5vw,44px); }
    .case{
      grid-template-columns:1fr; gap:36px; padding:60px 0; max-width:560px;
      margin:0 auto;
    }
    .case-body h3{ font-size:27px; }
    .case-body p.desc{ max-width:100%; }

    /* ---------- 08 RESEÑAS ---------- */
    .reviews-head h2{ font-size:34px; }
    .reviews-grid{ grid-template-columns:repeat(3,1fr); max-width:100%; }
    .review-card{ padding:26px 22px; }

    /* ---------- 09 DIAGNÓSTICO DIGITAL ----------
       Una sola columna de lectura (como Desktop conceptualmente), pero con
       las dos listas ("qué analizamos" / "qué entregamos") en paralelo para
       aprovechar el ancho medio, en vez de todo apilado como en Mobile. */
    .diag-grid{ grid-template-columns:1fr; gap:56px; }
    .diag-left h2{ font-size:clamp(30px,4.4vw,38px); max-width:520px; }
    .diag-left p.sub{ max-width:560px; }
    .diag-cols{ flex-direction:row; gap:48px; }
    .diag-col{ flex:1; }

    /* ---------- 10 CIERRE ---------- */
    .close h2{ font-size:clamp(42px,6vw,54px); }

    /* ---------- FOOTER ---------- */
    .footer-top{ grid-template-columns:1fr 1fr; gap:44px; row-gap:48px; }
    .footer-bottom{ gap:24px; }
  }

  /* ============================================================
     LAPTOP — 1024px a 1439px
     Conserva la composición Desktop aprobada: solo se ajustan
     márgenes, ancho máximo, escala tipográfica, separación,
     diagramas, navegación y densidad. Sin cambios estructurales.
     ============================================================ */
  @media (min-width: 1024px) and (max-width: 1439px){

    .wrap{ padding:0 clamp(28px, 3vw, 40px); }

    /* ---------- HEADER / NAV ---------- */
    header{ padding:20px clamp(28px,3vw,40px); }
    header.scrolled{ padding:13px clamp(28px,3vw,40px); }
    nav{ gap:clamp(18px,2.2vw,34px); }
    nav a{ font-size:clamp(13.5px,1.1vw,14.5px); }
    .nav-cta{ padding:10px clamp(14px,1.6vw,20px); font-size:clamp(13px,1vw,14px); }

    /* ---------- 01 HERO ---------- */
    .hero{ padding:clamp(120px,13vw,150px) 0 80px; }
    .hero h1{ font-size:clamp(64px, 7.3vw, 104px); max-width:min(1000px,92%); }
    .hero-sub{ font-size:clamp(18px,1.6vw,22px); }
    .hero-ctas{ gap:clamp(20px,2.4vw,32px); }
    .hero-nodes-static{ width:clamp(170px,16vw,230px); }

    /* ---------- 02 PUNTO DE PARTIDA ---------- */
    .problem{ padding:clamp(120px,13vw,170px) 0; }
    .problem-grid{ grid-template-columns:clamp(220px,20vw,280px) 1fr; gap:clamp(40px,4.5vw,60px); }
    .problem-tension{ font-size:clamp(40px,4.2vw,52px); }
    .problem-op{ font-size:clamp(28px,2.8vw,34px); }

    /* ---------- 03 QUÉ HACEMOS ---------- */
    .model{ padding:clamp(120px,13vw,170px) 0 clamp(100px,11vw,150px); }
    .section-head h2{ font-size:clamp(38px,3.6vw,46px); }
    .model-copy{ margin-top:clamp(50px,6vw,70px); }
    .model-copy-item{ width:clamp(160px,15vw,200px); }
    .model-copy-item h4{ font-size:clamp(22px,2vw,26px); }

    /* ---------- 04 IMPACTO ---------- */
    .impact{ padding:clamp(120px,13vw,170px) 0; }
    .impact-head{ gap:clamp(56px,7vw,100px); margin-bottom:clamp(70px,8vw,100px); }
    .impact-title h2{ font-size:clamp(40px,4vw,52px); }
    .impact-results{ gap:clamp(44px,5vw,70px); }
    .impact-result h3{ font-size:clamp(36px,3.6vw,46px); }
    .sol-name{ font-size:clamp(14px,1.1vw,15.5px); }

    /* ---------- 05 METODOLOGÍA ---------- */
    .method{ padding:clamp(120px,13vw,170px) 0; }
    .method-title{ margin-bottom:clamp(60px,7vw,90px); }
    .method-title h2{ font-size:clamp(40px,4vw,52px); }

    /* ---------- 06 ECOSISTEMA — ARQUITECTURA ---------- */
    .ecosystem{ padding:clamp(120px,13vw,170px) 0 0; }
    .eco-head h2{ font-size:clamp(40px,4vw,52px); }
    .arch-ref{ padding:0 0 clamp(90px,10vw,130px); }
    .arch-layers, .arch-transverse{ max-width:clamp(720px,72vw,920px); }
    .arch-layer{ padding:16px clamp(18px,2vw,26px); }

    /* ---------- 06b JOURNEY DEL DATO ---------- */
    .journey{ padding:clamp(100px,10vw,130px) 0 clamp(120px,13vw,150px); }
    .journey-track{ max-width:clamp(440px,42vw,520px); }

    /* ---------- 07 CASOS ---------- */
    .cases{ padding:clamp(120px,13vw,170px) 0; }
    .cases-head h2{ font-size:clamp(40px,4vw,52px); }
    .case{ gap:clamp(44px,5.5vw,70px); padding:clamp(52px,6vw,70px) 0; }
    .case-body h3{ font-size:clamp(26px,2.4vw,32px); }

    /* ---------- 08 RESEÑAS ---------- */
    .reviews{ padding:clamp(120px,13vw,170px) 0; }
    .reviews-head h2{ font-size:clamp(36px,3.4vw,44px); }
    .reviews-grid{ max-width:clamp(780px,76vw,1000px); }

    /* ---------- 09 DIAGNÓSTICO DIGITAL ---------- */
    .diagnostic{ padding:clamp(120px,13vw,170px) 0; }
    .diag-grid{ gap:clamp(60px,7vw,100px); }
    .diag-left h2{ font-size:clamp(38px,3.6vw,48px); }

    /* ---------- 10 CIERRE ---------- */
    .close{ padding:clamp(120px,13vw,170px) 0; }
    .close h2{ font-size:clamp(50px,5.4vw,64px); }

    /* ---------- FOOTER ---------- */
    .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(32px,3.5vw,50px); }
  }

  .footer-bottom .legal{ display:flex; gap:24px; }

  .bee-mark{ position:absolute; opacity:.9; }