/* ═══ Bloques de los capítulos Nosotros y Servicios ═══
   Viven en la página única, pero con maquetado propio para que cada
   capítulo no se lea igual que el anterior. */

/* ── declaración de apertura de capítulo: sólo tipografía ── */
.claim{padding:48px var(--gut) 36px;border-bottom:1px solid var(--line);position:relative}
.claim .kicker{margin-bottom:16px}
/* el h1 es el del hero: los capítulos abren con h2 */
.claim h2{font-size:clamp(1.95rem,9.6vw,2.8rem);position:relative;line-height:1.04}
.claim h2 em{font-style:normal;color:var(--yel)}
.claim p{margin-top:18px;font-size:.98rem;max-width:38ch;position:relative}

/* ── tabla comparativa ── */
.vs{border-top:1px solid var(--line)}
.vs__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);
  border-bottom:1px solid var(--line)}
.vs__head div{padding:13px 11px;font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase}
.vs__head .a{background:var(--yel);color:var(--ink)}
.vs__head .b{background:var(--bg-2);color:var(--muted)}
.vs__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line-2)}
.vs__row>div{background:var(--bg);padding:14px 11px;font-size:.85rem;line-height:1.5;display:flex;gap:8px;
  align-items:flex-start;color:var(--text)}
.vs__row>div.b{color:var(--muted)}
.vs__row i{flex:none;width:14px;height:14px;margin-top:3px;font-style:normal;display:grid;place-items:center;
  font-size:9px;font-weight:700;color:var(--ink);background:var(--yel);border-radius:50%}
.vs__row>div.b i{background:var(--bg-3);color:var(--muted)}
.vs__lbl{grid-column:span 2;background:var(--bg-2) !important;font-family:var(--head);font-size:10.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:10px 11px !important;display:block !important}

/* ── línea de tiempo ── */
.tl{position:relative;padding-left:28px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl__i{position:relative;padding:0 0 26px}
.tl__i::before{content:"";position:absolute;left:-26px;top:5px;width:11px;height:11px;background:var(--bg);
  border:2px solid var(--line);border-radius:50%}
.tl__i:first-child::before{background:var(--yel);border-color:var(--yel)}
.tl__i .y{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.tl__i h3{font-size:1.06rem;margin:5px 0 6px}
.tl__i p{font-size:.86rem}

/* ── cifra grande destacada ── */
.big{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;
  padding:24px 0;border-top:1px solid var(--line-2)}
.big b{font-family:var(--head);font-size:2.6rem;font-weight:600;letter-spacing:-.04em;line-height:.95;
  color:var(--text)}
.big span{font-size:.88rem;color:var(--text-2);line-height:1.55}

/* ── SERVICIOS: frente + desplegables ── */
.frente{scroll-margin-top:calc(var(--navh) + 16px);border-top:1px solid var(--line);padding-top:20px;
  margin-top:38px}
.frente__n{display:flex;align-items:baseline;gap:12px;font-family:var(--head);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.frente__n i{flex:1;height:1px;background:var(--line-2);font-style:normal}
.frente h2{font-size:1.6rem;margin:10px 0 9px}
.frente>p{font-size:.9rem;margin-bottom:16px}

.item{border-top:1px solid var(--line-2)}
.item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:15px 0}
.item summary::-webkit-details-marker{display:none}
.item summary b{font-family:var(--head);font-size:.97rem;font-weight:600}
.item summary i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1;transition:.25s}
.item[open] summary i{background:var(--yel);border-color:var(--yel);color:var(--ink);transform:rotate(45deg)}
.item p{font-size:.86rem;padding:0 0 16px;max-width:48ch}
.item ul{list-style:none;padding-bottom:16px;display:grid;gap:6px}
.item ul li{font-size:.84rem;color:var(--text-2);display:flex;gap:9px}
.item ul li::before{content:"—";color:var(--muted)}

@media (min-width:900px){
  .frente h2{font-size:2rem}
  .big b{font-size:3.4rem}
  .vs__row>div{font-size:.92rem;padding:16px 14px}
  .item summary b{font-size:1.05rem}
}

/* Recorte bajo: en fotos de obra apaisadas el centro suele caer en la zona
   quemada por los fluorescentes. Baja el encuadre hacia el trabajo real. */
.bleed--low img{object-position:center 68%}