/* ============================================================
   Dartel Solutions — Instalaciones page layout
   (El acordeón de ventanas `.svc-win` está en foundations.css)
   ============================================================ */

/* ---- Fases: acordeón centrado ---- */
.fase-acc{max-width:820px;margin-inline:auto}

/* ---- Por qué local: tarjetas (sin imagen) ---- */
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reason-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--sh-xs);transition:box-shadow .2s ease,transform .2s ease}
.reason-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.reason-card .r-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(24,169,87,.1);color:var(--green-deep);margin-bottom:16px}
.reason-card .r-ic .ic{width:23px;height:23px}
.reason-card strong{font-family:var(--font-display);font-weight:600;font-size:17px;display:block;margin-bottom:8px;color:var(--ink-1)}
.reason-card p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.6}
@media (max-width:880px){.reason-grid{grid-template-columns:1fr;gap:16px}}

/* ---- Marcas (logos) ---- */
.brand-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.brand-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 20px;text-align:center;box-shadow:var(--sh-xs);transition:box-shadow .2s,transform .2s}
.brand-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.brand-card img{margin:0 auto 14px;max-height:36px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s ease,opacity .25s ease}
.brand-card:hover img{filter:none;opacity:1}
.brand-card p{margin:0;font-size:14px;color:var(--ink-3);line-height:1.5}
@media (max-width:880px){.brand-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.brand-cards{grid-template-columns:1fr;gap:12px}}

/* ---- Móvil estrecho ---- (hero/final-actions en columna ya en site.css) */
@media (max-width:480px){
  .brand-card{padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){
  .reason-card,.brand-card,.brand-card img{transition:none}
}