/* ============================================================
   PÁGINAS DE SERVICIO — tarjetas con pictograma (template `service`)
   Piloto: /services/impresion (es + eu). Marcado en
   templates/service.html.twig; iconos en partials/service-icon.html.twig.
   Todo scopeado a .svc-page para no tocar galerías ni portfolio.
   ============================================================ */
/* Banda negra con el título, igual que /services, /contact y el resto de páginas principales */
.svc-band { background-color: #000; }
.svc-band h1 { color: #fff; }
.svc-page .svc-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.svc-page .svc-head { text-align: center; padding: 10px 0 30px; }
.svc-page .svc-hero { display: block; width: 230px; max-width: 60%; height: auto; margin: 0 auto 6px; }
.svc-page .svc-title { font-size: clamp(1.7rem, 7.5vw, 3.2rem); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.svc-page .svc-intro { max-width: 720px; margin: 16px auto 0; font-size: 1.05rem; }
.svc-page .svc-intro p { margin: 0; }

.svc-page .svc-block { padding: 30px 0 10px; }
.svc-page .svc-block-title { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.svc-page .svc-block-title::before { content: ""; width: 34px; height: 5px; background: #E8185A; border-radius: 3px; flex: none; }
.svc-page .svc-block-title h2 { font-size: clamp(1.25rem, 5.2vw, 2.2rem); font-weight: 700; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.svc-page .svc-lead { max-width: 760px; margin: 0 0 22px; }

.svc-page .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 18px; }
.svc-page .svc-card { border: 1px solid #e9e9e9; border-radius: 16px; padding: 24px; background: #fff; transition: transform .2s, border-color .2s, box-shadow .2s; }
.svc-page .svc-card:hover { transform: translateY(-4px); border-color: #E8185A; box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.svc-page .svc-badge { width: 52px; height: 52px; border-radius: 50%; background: #FDE8EF; color: #E8185A; display: grid; place-items: center; margin-bottom: 14px; }
.svc-page .svc-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc-page .svc-card h3 { font-size: 1.15rem; line-height: 1.2; margin: 0 0 8px; }
.svc-page .svc-card p { margin: 0; font-size: .93rem; }

.svc-page .svc-cta { background: #000; color: #fff; border-radius: 18px; padding: 40px 28px; margin: 50px 0 60px; text-align: center; }
.svc-page .svc-cta h3 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.svc-page .svc-cta p { margin: 10px 0 22px; color: #ddd; }
.svc-page .svc-btn { display: inline-block; background: #E8185A; color: #fff; font-family: var(--font-display); font-weight: 700; padding: 13px 26px; border-radius: 99px; text-decoration: none; }
.svc-page .svc-btn:hover { filter: brightness(1.1); color: #fff; }
.svc-page .svc-link { display: inline-block; margin-left: 18px; color: #fff; text-decoration: none; border-bottom: 1px solid #E8185A; padding-bottom: 2px; }
.svc-page .svc-link:hover { color: #fff; }
@media (max-width: 480px) {
  .svc-page .svc-link { display: block; margin: 16px 0 0; }
}

/* Bloques extra: párrafo, chips de marcas, botón solo, filas dentro de tarjeta */
.svc-page .svc-intro p + p { margin-top: 1em; }
.svc-page .svc-text { max-width: 760px; }
.svc-page .svc-text p { margin: 0; }
.svc-page .svc-text a { color: #E8185A; }
.svc-page .svc-chips-label { margin: 22px 0 10px; font-weight: 600; }
.svc-page .svc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.svc-page .svc-chips li { margin: 0; padding: 8px 18px; border: 1px solid #e9e9e9; border-radius: 99px; background: #fff; font-weight: 600; font-size: .92rem; }
.svc-page .svc-card .svc-row { display: block; }
.svc-page .svc-card .svc-row + .svc-row { margin-top: .6em; }
.svc-page .svc-card .svc-row strong { color: #111; }
.svc-page .svc-cta-solo { text-align: center; margin: 40px 0 70px; }

/* Reparto según nº de tarjetas de la sección (1, 2 o 4 quedaban descompensadas con auto-fill) */
.svc-page .svc-grid-n1 { grid-template-columns: minmax(0, 520px); }
.svc-page .svc-grid-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-page .svc-grid-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .svc-page .svc-grid-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-page .svc-grid-n2, .svc-page .svc-grid-n4 { grid-template-columns: minmax(0, 1fr); } }

/* 3 tarjetas: 3 columnas iguales (auto-fill dejaba una 4ª columna vacía y las descentraba) */
.svc-page .svc-grid-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .svc-page .svc-grid-n3 { grid-template-columns: minmax(0, 1fr); } }