/* HACHE V5 visual prototype — editorial rhythm, not a redesign. */

@media (min-width: 901px) {
  /* A clearer hierarchy: the hero keeps the loudest voice. */
  #recomendaciones .intro-grid .h2,
  #servicios .services-head .h2 {
    font-size: clamp(54px, 4.75vw, 68px);
    line-height: .96;
    letter-spacing: -.038em;
  }

  /* Editorial hinge: a short tonal pause between proof and proposition. */
  #partners-link {
    background: #d9d2c4;
  }
  #partners-link .wrap {
    padding-top: 50px;
    padding-bottom: 52px;
  }
  #partners-link .partner-link-grid {
    grid-template-columns: .32fr 1.68fr;
    align-items: start;
  }
  #partners-link .h3 {
    font-size: clamp(34px, 3vw, 44px);
    line-height: 1;
    letter-spacing: -.028em;
  }
  #partners-link .body {
    max-width: 780px;
    margin-top: 15px;
  }

  /* Denser service and method chapters: more publication, less scroll deck. */
  #servicios {
    padding-top: 104px;
    padding-bottom: 108px;
  }
  #servicios .service {
    padding-top: 27px;
    padding-bottom: 27px;
  }
  #como-trabajamos {
    padding-top: 106px;
    padding-bottom: 112px;
  }
  #como-trabajamos .method-head .h2 {
    font-size: clamp(54px, 4.85vw, 70px);
  }
  #como-trabajamos .method-process {
    margin-top: 52px;
  }
  #como-trabajamos .project-outcomes {
    margin-top: 68px;
    padding-top: 48px;
    padding-bottom: 42px;
  }
  #como-trabajamos .final-tools {
    margin-top: 68px;
    padding-top: 46px;
    padding-bottom: 38px;
  }
  #como-trabajamos .final-tools .tool-card {
    min-height: 550px;
  }

  /* Referral closing spread: proof without turning the founder into a second hero. */
  #referencia {
    background: #1c1c1b;
    color: #e9e5d9;
    border-color: rgba(233,229,217,.2);
  }
  #referencia .referral-grid {
    grid-template-columns: .30fr 1.70fr;
    gap: 72px;
    min-height: 390px;
    padding-top: 76px;
    padding-bottom: 78px;
    align-items: center;
  }
  #referencia .micro {
    color: rgba(233,229,217,.56);
  }
  #referencia .h3 {
    font-family: var(--serif);
    font-size: clamp(40px, 3.6vw, 54px);
    line-height: 1.01;
    font-weight: 400;
    letter-spacing: -.035em;
    max-width: 980px;
  }
  #referencia .body {
    color: rgba(233,229,217,.72);
    max-width: 660px;
    margin-top: 24px;
  }
}

/* Case study: make the diagnosis visible without turning the homepage into a report. */
.case-diagnosis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.case-diagnosis > div { padding: 22px 24px 24px 0; }
.case-diagnosis > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.case-diagnosis span {
  display: block;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}
.case-diagnosis p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.58;
  text-wrap: pretty;
}
@media (max-width: 700px) {
  .case-diagnosis { grid-template-columns: 1fr; }
  .case-diagnosis > div { padding: 20px 0; }
  .case-diagnosis > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  #partners-link {
    background: #d9d2c4;
  }
  #referencia {
    background: #1c1c1b;
    color: #e9e5d9;
    padding-bottom: 0 !important;
  }
  #referencia .referral-grid {
    display: block;
    padding-bottom: 64px;
  }
  #referencia .micro {
    color: rgba(233,229,217,.56);
  }
  #referencia .h3 {
    font-family: var(--serif);
    font-size: clamp(36px, 8.5vw, 50px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.032em;
    margin-top: 22px;
  }
  #referencia .body {
    color: rgba(233,229,217,.72);
    margin-top: 22px;
  }
}

@media (max-width: 560px) {
  #partners-link .wrap {
    padding-top: 48px;
    padding-bottom: 50px;
  }
  #partners-link .h3 {
    font-size: 34px;
    line-height: 1.02;
  }
  #servicios .service {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  #como-trabajamos {
    padding-top: 78px;
    padding-bottom: 82px;
  }
}

/* V5.2: commercial clarity, same visual identity. */
.v52-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.v52-button{display:inline-flex;padding:16px 22px;background:var(--ink,#1c1c1b);color:var(--paper,#e9e5d9);font-size:15px;text-decoration:none;line-height:1.4}
.v52-secondary,.v52-panel-cta a,.v52-engagements a{font-size:15px;text-underline-offset:5px}
.v52-panel-cta{margin-top:24px}.v52-engagements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);margin-top:36px}
.v52-engagements article{padding:30px 26px;display:flex;flex-direction:column;min-width:0}.v52-engagements article:first-child{padding-left:0}.v52-engagements article+article{border-left:1px solid var(--line)}
.v52-engagements h3{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.1;letter-spacing:-.025em;margin:20px 0}
.v52-engagements p{font-size:16px;line-height:1.65;margin:0 0 20px}.v52-engagements .v52-output{border-top:1px solid var(--line);padding-top:18px;margin-top:auto;font-weight:600}.v52-engagements a{margin-top:8px}
.v52-details{border-top:1px solid var(--line);margin-top:28px;padding:24px 0}.v52-details summary{cursor:pointer;font-size:16px;font-weight:600;line-height:1.5}.v52-details[open]>summary{margin-bottom:28px}.v52-tools{border-color:rgba(233,229,217,.35)}
.v52-next{margin:30px 0;border-top:1px solid var(--line);padding-top:26px}.v52-next h3{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.2}.v52-next ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-left:22px;margin-top:24px}.v52-next li{font-size:16px;line-height:1.65;padding-left:5px}
.contact-option.conversation-request{font-size:17px;font-weight:600;justify-content:center}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:900px){.v52-engagements{grid-template-columns:1fr}.v52-engagements article,.v52-engagements article:first-child{padding:26px 0}.v52-engagements article+article{border-left:0;border-top:1px solid var(--line)}.v52-next ol{grid-template-columns:1fr;gap:18px}}
@media(max-width:560px){.v52-actions{gap:18px}.v52-button{width:100%;justify-content:center}.v52-engagements h3{font-size:30px}.contact-option.conversation-request{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}


/* V5.3 surgical pruning: compact economic tree + concise intervention areas. */
.v52-areas-line{
  display:grid;
  grid-template-columns:.34fr 1.66fr;
  gap:40px;
  align-items:start;
  border-top:1px solid var(--line);
  margin-top:28px;
  padding-top:22px;
}
.v52-areas-line p{
  margin:0;
  font-size:16px;
  line-height:1.65;
}
.what-section .hache-tree-shell{margin-top:52px}
.hache-tree-shell .tree-intro{padding-top:22px;padding-bottom:22px}
.hache-tree-shell .tree-v31{padding-top:20px;padding-bottom:0}
.hache-tree-shell .tree-v31 svg{min-height:0}
.hache-tree-shell .tree-principle{padding-top:20px;padding-bottom:22px}
.hache-tree-shell .tree-principle p{font-size:clamp(26px,2.8vw,38px)}
.hache-tree-shell .tree-mobile{padding-top:24px;padding-bottom:24px}
.hache-tree-shell .tree-mobile-v31 .tm-branch-grid>div{min-height:68px;padding:11px 10px}

@media(max-width:900px){
  .v52-areas-line{grid-template-columns:1fr;gap:10px}
  .what-section .hache-tree-shell{margin-top:42px}
}
@media(max-width:520px){
  .hache-tree-shell .tree-mobile-v31 .tm-branch-grid{grid-template-columns:1fr 1fr;gap:8px}
  .hache-tree-shell .tree-mobile-v31 .tm-branch-grid>div{min-height:auto;padding:10px 9px}
  .hache-tree-shell .tree-mobile-v31 .tm-branch-grid span{font-size:10.5px;margin-top:5px}
  .hache-tree-shell .tree-principle p{font-size:27px}
}
@media(max-width:350px){
  .hache-tree-shell .tree-mobile-v31 .tm-branch-grid{grid-template-columns:1fr}
}


/* ===== V5.5 · human layer / economic tree removed ===== */
.what-human-note{font-family:var(--serif);font-size:17px;line-height:1.5;letter-spacing:-.012em;font-style:italic;color:var(--muted);margin:18px 0 0 18%;max-width:690px;text-wrap:pretty}
@media(max-width:900px){.what-human-note{margin-left:0;max-width:720px}}
@media(max-width:560px){.what-human-note{font-size:16px;line-height:1.52;margin-top:16px}}