/**
 * Autorys - Páginas de servicio (autorys.com/services/<servicio>/<idioma>/) · estilos propios
 * Developed by Autorys · https://autorys.com · sales@autorys.com
 *
 * [Autorys · Páginas por servicio 2026-10-25] Va ENCIMA de /catalogo/assets/catalogo.css (mismos colores,
 * letra, botones, tarjetas, cierre y pie). Aquí solo: menú de secciones, migas, inicio con ilustración,
 * secciones, pasos, "por qué", preguntas y relacionados.
 */

/* ---------- 1. Menú de secciones (solo en pantallas anchas) ---------- */
.sv-links { display: flex; gap: 20px; margin-right: 8px; }
.sv-links a { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--muted); }
.sv-links a:hover { color: var(--blue-text); }
@media (max-width: 1020px) { .sv-links { display: none; } }

/* ---------- 2. Migas ---------- */
.sv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 14px 0 0; font-size: 14px; color: var(--muted); }
.sv-crumbs li { display: flex; align-items: center; }
.sv-crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.sv-crumbs a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--blue-text); font-weight: 600; }
.sv-crumbs span { display: inline-flex; align-items: center; min-height: 48px; }

/* ---------- 3. Inicio con la ilustración del catálogo ---------- */
.sv-hero { padding-top: 26px; }
.sv-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.sv-hero h1 { font-size: clamp(32px, 4.6vw, 54px); }
.sv-art { background: linear-gradient(135deg, #eef5ff, #f9fbff); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-soft); }
.sv-art img { display: block; width: 100%; height: auto; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 4. Secciones ---------- */
.sv-sec { padding: 64px 0; }
.sv-tint { background: linear-gradient(180deg, rgba(226, 240, 255, .55), rgba(226, 240, 255, .1)); }
.sv-narrow { max-width: 820px; }
.sv-sec h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 16px; }
.sv-narrow > p { font-size: 17px; color: var(--muted); }
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sv-card h3, .sv-rel h3 { font-size: 19px; }
.sv-card p, .sv-rel p { color: var(--muted); font-size: 15px; margin: 0; }
.sv-rel h3 a { text-decoration: none; }
.sv-rel h3 a::after { content: " →"; color: var(--blue-text); }
.sv-rel h3 a:hover { color: var(--blue-text); }
.sv-all { margin: 26px 0 0; }

/* ---------- 5. Pasos ---------- */
.sv-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sv-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.sv-num { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-text); font-weight: 800; margin-bottom: 12px; }
.sv-steps h3 { font-size: 18px; margin-bottom: 6px; }
.sv-steps p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- 6. Por qué Autorys + garantía ---------- */
.sv-why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.sv-why li { position: relative; padding-left: 34px; display: grid; gap: 4px; }
.sv-why li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%230b7a59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.sv-why b { font-size: 17px; }
.sv-why span { color: var(--muted); font-size: 15px; }
.sv-guarantee { margin: 28px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--green-soft); color: var(--green-text); font-weight: 700; max-width: 820px; }

/* ---------- 7. Preguntas ---------- */
.sv-faq { display: grid; gap: 10px; }
.sv-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; }
.sv-faq summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; justify-content: space-between; gap: 12px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--blue-text); }
.sv-faq details[open] summary::after { content: "−"; }
.sv-faq summary h3 { font-size: 17px; margin: 0; }
.sv-faq details p { color: var(--muted); margin: 0 0 16px; }

/* ---------- 8. Tableta y celular ---------- */
@media (max-width: 1020px) {
  .sv-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .sv-art { max-width: 560px; }
  .sv-grid, .sv-grid-4 { grid-template-columns: 1fr 1fr; }
  .sv-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sv-grid, .sv-grid-4, .sv-steps, .sv-why { grid-template-columns: 1fr; }
  .sv-sec { padding: 48px 0; }
}