/* sec-A.css: services (.svc-), process (.pr-), about (.ab-). Usa variables de base.css */

/* ================= SERVICES: hoja de especificaciones, una fila por sistema ================= */
.svc-head{display:flex;align-items:flex-end;gap:clamp(18px,4vw,56px);margin-bottom:clamp(26px,4vw,48px)}
.svc-head h2{margin:0;flex:none;max-width:14ch}
.svc-ruler{display:none;flex:1;min-width:40px;margin-bottom:.5em;color:var(--ink)}
.svc-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.svc-row{position:relative;display:grid;gap:6px 18px;grid-template-columns:52px minmax(0,1fr);align-items:start;padding:22px 14px 24px 0;border-bottom:1px solid var(--slab-3);transition:background .35s var(--ease)}
.svc-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.svc-row:hover,.svc-row:focus-within{background:color-mix(in srgb,var(--white) 45%,transparent)}
.svc-row:hover::before,.svc-row:focus-within::before{transform:none}
.svc-no{display:none;font:800 1.05rem/1 var(--f-display);font-variation-settings:"wdth" 118;color:var(--orange-d);padding-top:.35em}
.svc-sw{grid-row:1/3;width:52px;height:52px;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--slab-3)}
.svc-name{margin:0;font-size:clamp(1.25rem,2.2vw,1.65rem);align-self:center}
.svc-what,.svc-where{grid-column:2;margin:0;font-size:1.1rem;line-height:1.5}
.svc-where{color:var(--txt-mute);font-style:italic}
@media(min-width:700px){.svc-ruler{display:block}}
@media(min-width:1000px){
  .svc-row{grid-template-columns:44px 64px minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:0 clamp(20px,3vw,44px);align-items:center;padding-block:28px}
  .svc-no{display:block;padding:0}
  .svc-sw{grid-row:auto;width:64px;height:64px}
  .svc-what,.svc-where{grid-column:auto;font-size:1.15rem}
  .svc-where{border-left:1px solid var(--slab-3);padding-left:clamp(18px,2.4vw,34px)}
}
/* muestras de acabado: cada sistema con su textura real (solo CSS) */
.svc-sw-epoxy{background:linear-gradient(135deg,var(--steel) 0 38%,var(--steel-l) 50%,var(--steel-d) 62%)}
.svc-sw-metallic{background:radial-gradient(60% 70% at 25% 25%,var(--lilac),transparent 70%),radial-gradient(70% 60% at 80% 80%,var(--petrol),transparent 70%),radial-gradient(40% 40% at 70% 20%,var(--violet),transparent),var(--violet-d)}
.svc-sw-flake{background:var(--flake),var(--flake-g);background-size:90px,auto}
.svc-sw-polishing{background:linear-gradient(115deg,var(--pearl-d) 0 30%,var(--pearl) 46%,var(--pearl-m) 58%,var(--pearl-s))}
.svc-sw-garage{background:var(--flake),linear-gradient(var(--ink-3),var(--ink));background-size:90px,auto}
.svc-sw-refinishing{background:linear-gradient(100deg,transparent 47%,var(--slab-d) 48% 51%,transparent 52%),linear-gradient(var(--paper-g),var(--slab-3))}

/* ================= PROCESS: foto de Phil esmerilando + recorrido con junta vertical ================= */
.pr-grid{display:grid;gap:clamp(34px,6vw,84px);grid-template-columns:minmax(0,1fr);align-items:start}
.pr-art{position:relative;justify-self:center;width:min(86%,400px)}
.pr-photo{aspect-ratio:4/5;background:var(--ink-2);box-shadow:0 26px 50px -24px color-mix(in srgb,var(--ink) 70%,transparent)}
.pr-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pr-body h2{margin-bottom:clamp(24px,3.4vw,40px)}
.pr-steps{list-style:none;margin:0;padding:0 0 0 clamp(52px,6vw,66px);position:relative;counter-reset:pr}
.pr-steps::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(var(--copper) 0 8px,transparent 8px 14px);opacity:.6}
.pr-step{position:relative;padding:0 0 clamp(22px,2.6vw,30px)}
.pr-step:last-child{padding-bottom:0}
.pr-step h3{margin:0 0 .25em;font-size:clamp(1.2rem,1.9vw,1.5rem);color:var(--txt-i)}
.pr-step p{margin:0;color:var(--txt-i-mute);font-size:1.1rem;line-height:1.5;max-width:52ch}
.pr-n{position:absolute;left:calc(-1 * clamp(52px,6vw,66px));top:-2px;width:40px;height:40px;display:grid;place-items:center;background:var(--ink);border:2px solid var(--copper);color:var(--copper);font:800 1.05rem/1 var(--f-display);font-variation-settings:"wdth" 118;transition:background .3s,color .3s}
.pr-step:hover .pr-n{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.pr-coastal{display:flex;gap:16px;align-items:flex-start;margin:clamp(28px,4vw,44px) 0 0;padding:20px 22px;border:1px solid var(--ink-3);border-top:4px solid var(--copper);background:var(--ink-2);font-size:1.12rem;line-height:1.5}
.pr-coastal svg{width:26px;height:30px;flex:none;margin-top:2px}
@media(min-width:900px){
  .pr-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .pr-grid{align-items:stretch}
  .pr-art{justify-self:start;width:min(100%,440px);margin-left:2%;display:flex;flex-direction:column}
  .pr-art .frame{flex:1;display:flex}
  .pr-photo{aspect-ratio:auto;flex:1;min-height:480px}
}

/* ================= ABOUT: Phil con foto desplazada sobre bloque navy + hechos como casillas de inspección ================= */
.ab-grid{display:grid;gap:clamp(36px,6vw,84px);grid-template-columns:minmax(0,1fr);align-items:center}
.ab-art{position:relative;justify-self:center;width:min(78%,400px);margin-bottom:28px}
.ab-block{position:absolute;z-index:0;left:-9%;right:12%;top:8%;bottom:-7%;background:var(--navy);box-shadow:0 30px 50px -30px color-mix(in srgb,var(--ink) 60%,transparent)}
.ab-art .frame{position:relative;z-index:1;transform:translate(5%,-2%)}
.ab-photo{aspect-ratio:3/4;background:var(--slab-3);box-shadow:0 24px 46px -22px color-mix(in srgb,var(--ink) 55%,transparent)}
.ab-photo img{width:100%;height:100%;object-fit:cover;object-position:75% 50%}
.ab-body h2{margin-bottom:.5em}
.ab-body p{max-width:58ch}
.ab-body .lede{color:var(--ink)}
.ab-facts{list-style:none;margin:26px 0 30px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border-top:2px solid var(--ink);padding-top:18px}
.ab-facts li{position:relative;padding-left:34px;font:700 .86rem/1.3 var(--f-display);font-variation-settings:"wdth" 100;letter-spacing:.08em;text-transform:uppercase;min-height:24px;display:flex;align-items:center}
.ab-facts li::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid var(--ink);background:var(--slab)}
.ab-facts li::after{content:"";position:absolute;left:6px;top:50%;width:6px;height:11px;margin-top:-9px;border:solid var(--orange-d);border-width:0 3px 3px 0;transform:rotate(40deg)}
.ab-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media(min-width:560px){.ab-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px}}
@media(min-width:900px){
  .ab-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
  .ab-art{width:min(100%,420px);justify-self:center;margin-bottom:0}
  .ab-art .frame{transform:translate(8%,-3%)}
}
@media(max-width:899px){.ab-cta .btn{flex:1 1 auto}}

@media(prefers-reduced-motion:reduce){.svc-row,.svc-row::before,.pr-n{transition:none}}