/* ============================================================================
   PAGINAS DE SERVICIO (servicios.php): indice y una pagina por categoria.

   POR QUE UNA HOJA PROPIA: tw.css esta compilado y en este equipo no hay
   Tailwind para recompilarlo; las clases nuevas de una sola pagina van aca y
   solo se cargan en servicios.php (_header.php, $current === 'servicios').

   Identidad: los mismos tokens de la tienda (--brand, --brand-texto,
   --brand-fondo, --verde-wa, sombras, radios y tiempos de tokens.css) y la
   fuente Inter del sitio. Ningun color nuevo: los fondos suaves salen de
   color-mix sobre --brand.

   Composicion por tamano (CLAUDE.md): telefono < 640, tablet 640-1023,
   escritorio >= 1024 (y 1280 alinea el ancho con la cabecera).
   Espacios en escala de 8.
   ========================================================================== */

.sv {
  --sv-tinta: #0f172a;      /* slate-900, el de los titulos del sitio */
  --sv-texto: #475569;      /* slate-600: 7.5:1 sobre blanco */
  --sv-suave: #64748b;      /* slate-500: 4.7:1, solo metadatos */
  --sv-borde: #e2e8f0;      /* slate-200 */
  --sv-gris:  #f8fafc;      /* slate-50, fondo de seccion alterna */
  --sv-tinte: color-mix(in srgb, var(--brand) 6%, #ffffff);
  color: var(--sv-texto);
}

/* El mismo ancho que la cabecera: max-w-6xl y 1288px desde 1280. */
.sv-caja { max-width: 72rem; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1280px) { .sv-caja { max-width: 1288px; } }

.sv-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Tipografia ---------------------------------------------------- */
.sv-ante {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radio-pill, 999px);
  background: var(--brand-50); color: var(--brand-texto);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sv-h1 {
  margin-top: 16px; color: var(--sv-tinta);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -.032em;
  text-wrap: balance;
}
.sv-lead {
  margin-top: 16px; color: #334155; font-size: 18px; line-height: 1.5; font-weight: 500;
  max-width: 40rem; text-wrap: pretty;
}
.sv-intro { margin-top: 12px; font-size: 16px; line-height: 1.65; max-width: 40rem; text-wrap: pretty; }
.sv-h2 {
  color: var(--sv-tinta); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.15; font-weight: 800; letter-spacing: -.024em; text-wrap: balance;
}
.sv-h3 { color: var(--sv-tinta); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Ruta ---------------------------------------------------------- */
.sv-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-suave); }
.sv-ruta a { color: var(--sv-suave); text-decoration: none; padding-block: 4px; }
.sv-ruta a:hover { color: var(--brand-texto); text-decoration: underline; }
.sv-ruta [aria-current] { color: #334155; font-weight: 600; padding-block: 4px; }

/* ---------- Botones (44px minimo) ----------------------------------------- */
.sv-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sv-acciones-centro { justify-content: center; margin-top: 40px; }
.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--t-rapida, .15s), border-color var(--t-rapida, .15s),
              box-shadow var(--t-base, .2s), transform var(--t-rapida, .15s);
}
.sv-btn .bi { font-size: 1.1em; }
.sv-btn:active { transform: scale(.98); }
.sv-btn-wa { background: var(--verde-wa, #047857); color: #fff; box-shadow: 0 6px 16px -8px rgba(4, 120, 87, .7); }
.sv-btn-wa:hover { background: var(--verde-wa-hover, #036347); color: #fff; }
.sv-btn-sec { background: #fff; color: #334155; border-color: #cbd5e1; }
.sv-btn-sec:hover { border-color: var(--brand); color: var(--brand-texto); }
.sv-btn-claro { background: #fff; color: var(--sv-tinta); }
.sv-btn-claro .bi { color: var(--verde-wa, #047857); }
.sv-btn-claro:hover { background: #f1f5f9; color: var(--sv-tinta); }
.sv-btn-linea-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.sv-btn-linea-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.sv-btn-chico { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.sv a:focus-visible, .sv summary:focus-visible {
  outline: var(--foco-grosor, 3px) solid var(--foco-color, var(--brand));
  outline-offset: 2px;
}
.sv-banda a:focus-visible { outline-color: #fff; }

/* ---------- Heroe --------------------------------------------------------- */
.sv-heroe {
  position: relative; overflow: hidden;
  padding-block: 24px 48px;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%),
    radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--brand2, var(--brand)) 8%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--sv-tinte) 0%, #ffffff 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 10%, #ffffff);
}
.sv-heroe-rej { display: grid; gap: 40px; margin-top: 24px; align-items: center; }
.sv-heroe-texto { min-width: 0; }
.sv-heroe-visual { position: relative; min-width: 0; }

.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sv-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--sv-borde);
  color: #334155; font-size: 13px; font-weight: 600; line-height: 1.3;
}
.sv-chips .bi { color: var(--brand-texto); font-size: 15px; }

/* Mosaico de fotos del catalogo (fondo blanco: las fotos son de producto). */
.sv-mosaico { display: grid; gap: 12px; }
.sv-mosaico-celda {
  margin: 0; background: #fff; border-radius: var(--radio-3, 16px);
  box-shadow: var(--sombra-2, 0 8px 24px -12px rgba(15, 23, 42, .25));
  border: 1px solid rgba(15, 23, 42, .06);
  overflow: hidden; display: grid; place-items: center; aspect-ratio: 1;
}
.sv-mosaico-celda img { width: 100%; height: 100%; object-fit: cover; }
.sv-mosaico[data-n="1"] .sv-mosaico-celda { aspect-ratio: 4 / 3; }
.sv-mosaico[data-n="2"] { grid-template-columns: 1fr 1fr; }
.sv-mosaico[data-n="2"] .sv-mosaico-celda { aspect-ratio: 3 / 4; }
/* Tres: la principal arriba a lo ancho y dos debajo. */
.sv-mosaico[data-n="3"] { grid-template-columns: 1fr 1fr; }
.sv-mosaico[data-n="3"] .sv-mosaico-celda { aspect-ratio: 4 / 3; }
.sv-mosaico[data-n="3"] .sv-mosaico-celda:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }

.sv-flota-precio {
  position: absolute; left: 16px; bottom: -16px;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 10px 16px; border-radius: 12px; background: #fff;
  box-shadow: var(--sombra-3, 0 18px 40px -16px rgba(15, 23, 42, .35));
  border: 1px solid rgba(15, 23, 42, .06); color: var(--sv-tinta);
}
.sv-flota-precio small { font-size: 12px; color: var(--sv-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sv-flota-precio strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }

/* Ilustracion de linea: la categoria sin fotos (icono grande y anillos). */
.sv-ilus {
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--brand) 18%, #ffffff) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, #ffffff), color-mix(in srgb, var(--brand2, var(--brand)) 6%, #ffffff));
  color: var(--brand-texto);
}
.sv-ilus-heroe {
  position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, #ffffff);
}
.sv-ilus-anillo, .sv-ilus-anillo::before {
  position: absolute; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 30%, transparent);
}
.sv-ilus-anillo { width: 72%; aspect-ratio: 1; }
.sv-ilus-anillo::before { content: ''; inset: 14%; border-style: solid; border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.sv-ilus-centro {
  position: relative; width: 34%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  box-shadow: var(--sombra-marca-3, 0 18px 40px -16px rgba(0, 0, 0, .3));
  font-size: clamp(40px, 7vw, 76px);
}
.sv-ilus-mini {
  position: absolute; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; background: #fff; font-size: 20px;
  box-shadow: var(--sombra-2, 0 8px 24px -12px rgba(15, 23, 42, .25));
}
.sv-ilus-mini-1 { top: 14%; left: 12%; }
.sv-ilus-mini-2 { top: 20%; right: 12%; }
.sv-ilus-mini-3 { bottom: 14%; right: 22%; }

/* ---------- Secciones y ritmo de fondos ----------------------------------- */
.sv-sec { padding-block: 56px; }
.sv-sec-corta { padding-block: 40px; }
.sv-sec-blanca { background: #fff; }
.sv-sec-gris { background: var(--sv-gris); border-block: 1px solid #f1f5f9; }
.sv-sec-marca { background: var(--sv-tinte); border-block: 1px solid color-mix(in srgb, var(--brand) 10%, #ffffff); }
.sv-sec-cab { margin-bottom: 32px; max-width: 44rem; }
.sv-sec-cab-centro { margin-inline: auto; text-align: center; }
.sv-sec-sub { margin-top: 12px; font-size: 16px; line-height: 1.6; }

/* ---------- Rejilla que se adapta a la cantidad --------------------------- */
.sv-rej { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .sv-rej { gap: 20px; grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); }
  .sv-rej > .sv-ancha-t { grid-column: span var(--span-t, 1); }
}
@media (min-width: 1024px) {
  .sv-rej { gap: 24px; grid-template-columns: repeat(var(--cols-d, 3), minmax(0, 1fr)); }
  .sv-rej > .sv-ancha-t { grid-column: auto; }
  .sv-rej > .sv-ancha-d { grid-column: span var(--span-d, 1); }
}

/* ---------- Precio y flecha (tarjetas) ------------------------------------ */
.sv-precio { white-space: nowrap; color: var(--sv-tinta); font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sv-precio small {
  display: block; font-size: 11px; font-weight: 700; color: var(--sv-suave);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}
.sv-flecha {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; margin-left: auto;
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-texto);
  transition: background-color var(--t-base, .2s), color var(--t-base, .2s), transform var(--t-base, .2s);
}

/* ---------- Tarjetas de servicio ------------------------------------------ */
.sv-serv-enlace, .sv-cat-enlace {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--sv-borde); border-radius: var(--radio-3, 16px);
  text-decoration: none; color: inherit;
  box-shadow: var(--sombra-1, 0 1px 2px rgba(15, 23, 42, .06));
  transition: border-color var(--t-base, .2s), box-shadow var(--t-base, .2s), transform var(--t-base, .2s) var(--curva-suave, ease);
}
.sv-serv-enlace:hover, .sv-cat-enlace:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, #ffffff);
  box-shadow: var(--sombra-2, 0 8px 24px -12px rgba(15, 23, 42, .25));
}
.sv-serv-enlace:hover .sv-flecha { background: var(--brand-fondo, var(--brand)); color: #fff; }
.sv-serv-media, .sv-cat-media {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--sv-gris); border-bottom: 1px solid #f1f5f9;
}
.sv-serv-media img, .sv-cat-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--curva-suave, ease);
}
.sv-serv-media.sv-ilus .bi, .sv-cat-media.sv-ilus > .bi {
  position: relative; z-index: 1; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; font-size: 48px;
  box-shadow: var(--sombra-2, 0 8px 24px -12px rgba(15, 23, 42, .25));
}
/* Anillos de linea alrededor del icono: la misma ilustracion que el heroe. */
.sv-serv-media.sv-ilus::before, .sv-cat-media.sv-ilus::before,
.sv-serv-media.sv-ilus::after, .sv-cat-media.sv-ilus::after {
  content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.sv-serv-media.sv-ilus::before, .sv-cat-media.sv-ilus::before {
  width: 176px; height: 176px; border: 1.5px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.sv-serv-media.sv-ilus::after, .sv-cat-media.sv-ilus::after {
  width: 240px; height: 240px; border: 1.5px dashed color-mix(in srgb, var(--brand) 24%, transparent);
}
.sv-serv-cuerpo, .sv-cat-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px; gap: 8px; }
.sv-serv-titulo, .sv-cat-titulo { color: var(--sv-tinta); font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.sv-serv-texto, .sv-cat-texto {
  font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-serv-pie, .sv-cat-pie { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; gap: 12px; }

/* Una sola tarjeta, o la ultima que cierra una fila: horizontal (foto a la izquierda). */
@media (min-width: 640px) {
  .sv-serv-unico .sv-serv-enlace,
  .sv-rej > .sv-ancha-t .sv-serv-enlace,
  .sv-rej > .sv-ancha-t .sv-cat-enlace { flex-direction: row; }
  .sv-serv-unico .sv-serv-media,
  .sv-rej > .sv-ancha-t .sv-serv-media,
  .sv-rej > .sv-ancha-t .sv-cat-media { width: 42%; flex-shrink: 0; aspect-ratio: auto; min-height: 220px; border-bottom: 0; border-right: 1px solid #f1f5f9; }
  .sv-serv-unico .sv-serv-cuerpo,
  .sv-rej > .sv-ancha-t .sv-serv-cuerpo,
  .sv-rej > .sv-ancha-t .sv-cat-cuerpo { padding: 28px 32px; justify-content: center; }
}
@media (min-width: 1024px) {
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d) .sv-serv-enlace,
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d) .sv-cat-enlace { flex-direction: column; }
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d) .sv-serv-media,
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d) .sv-cat-media { width: auto; aspect-ratio: 4 / 3; min-height: 0; border-right: 0; border-bottom: 1px solid #f1f5f9; }
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d) .sv-serv-cuerpo,
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d) .sv-cat-cuerpo { padding: 20px; justify-content: flex-start; }
  .sv-rej > .sv-ancha-d .sv-serv-enlace,
  .sv-rej > .sv-ancha-d .sv-cat-enlace { flex-direction: row; }
  .sv-rej > .sv-ancha-d .sv-serv-media,
  .sv-rej > .sv-ancha-d .sv-cat-media { width: 42%; flex-shrink: 0; aspect-ratio: auto; min-height: 240px; border-bottom: 0; border-right: 1px solid #f1f5f9; }
  .sv-rej > .sv-ancha-d .sv-serv-cuerpo,
  .sv-rej > .sv-ancha-d .sv-cat-cuerpo { padding: 32px 40px; justify-content: center; }
  .sv-serv-unico .sv-serv-titulo { font-size: 22px; }
}

/* Telefono: carrusel deslizable con la siguiente tarjeta asomando. */
@media (max-width: 639.98px) {
  .sv-carrusel {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 4px 16px 16px;
    scrollbar-width: none;
  }
  .sv-carrusel::-webkit-scrollbar { display: none; }
  .sv-carrusel > li { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- Indice: tarjetas de categoria --------------------------------- */
.sv-heroe-indice { padding-bottom: 56px; }
.sv-heroe-indice + .sv-sec { padding-top: 48px; }
.sv-heroe-centro { max-width: 48rem; margin: 24px auto 0; text-align: center; }
.sv-heroe-centro .sv-lead { margin-inline: auto; }
.sv-heroe-centro .sv-acciones { justify-content: center; }
.sv-cat-media { aspect-ratio: 16 / 10; }
.sv-cat-sello {
  position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: #fff; color: var(--brand-texto); font-size: 18px;
  box-shadow: var(--sombra-1, 0 1px 2px rgba(15, 23, 42, .08));
}
.sv-cat-media.sv-ilus .sv-cat-sello { display: none; }
.sv-cat-titulo { font-size: 20px; }
.sv-cat-ver {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--brand-texto); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.sv-cat-ver .bi { transition: transform var(--t-base, .2s); }
.sv-cat-enlace:hover .sv-cat-ver .bi { transform: translateX(3px); }
/* Telefono: lista con foto (foto cuadrada a la izquierda), no seis bloques altos. */
@media (max-width: 639.98px) {
  .sv-cats .sv-cat-enlace { flex-direction: row; }
  .sv-cats .sv-cat-media { width: 112px; flex-shrink: 0; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid #f1f5f9; }
  .sv-cats .sv-cat-media.sv-ilus > .bi { width: 64px; height: 64px; font-size: 28px; }
  .sv-cats .sv-cat-media.sv-ilus::before { width: 88px; height: 88px; }
  .sv-cats .sv-cat-media.sv-ilus::after { display: none; }
  .sv-cats .sv-cat-sello { display: none; }
  .sv-cats .sv-cat-cuerpo { padding: 14px 16px; gap: 4px; }
  .sv-cats .sv-cat-titulo { font-size: 17px; }
  .sv-cats .sv-cat-texto { -webkit-line-clamp: 2; font-size: 13px; }
  .sv-cats .sv-cat-pie { padding-top: 4px; align-items: center; }
  .sv-cats .sv-precio { font-size: 16px; }
  /* En la lista del telefono basta la flecha: el texto partia el precio en dos. */
  .sv-cats .sv-cat-ver-txt { display: none; }
  .sv-cats .sv-cat-ver { width: 36px; min-height: 36px; justify-content: center; border-radius: 50%; background: var(--brand-50); }
}

/* ---------- Estado vacio -------------------------------------------------- */
.sv-vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  padding: 40px 24px; border-radius: var(--radio-3, 16px);
  background: var(--sv-tinte); border: 1px dashed color-mix(in srgb, var(--brand) 30%, #ffffff);
}
.sv-vacio p { max-width: 34rem; font-size: 16px; line-height: 1.6; color: #334155; }
.sv-vacio-icono {
  width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--brand-texto); font-size: 36px;
  box-shadow: var(--sombra-2, 0 8px 24px -12px rgba(15, 23, 42, .25));
}

/* ---------- Fallas: chips con icono; la ultima fila se estira ------------- */
.sv-fallas { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-fallas li {
  flex: 1 1 340px; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--sv-borde);
  color: #334155; font-size: 15px; font-weight: 500; line-height: 1.4;
}
.sv-falla-icono {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-texto); font-size: 18px;
}

/* ---------- Como funciona: linea de pasos --------------------------------- */
/* Telefono: vertical compacta con la linea a la izquierda. */
.sv-pasos { position: relative; display: grid; gap: 24px; list-style: none; margin: 0; padding: 0; }
.sv-paso { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.sv-paso:not(:last-child)::after {
  content: ''; position: absolute; left: 27px; top: 60px; bottom: -20px; width: 2px;
  background: color-mix(in srgb, var(--brand) 22%, #ffffff);
}
.sv-paso-icono {
  position: relative; z-index: 1; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: #fff; color: var(--brand-texto);
  border: 2px solid color-mix(in srgb, var(--brand) 28%, #ffffff);
  box-shadow: 0 0 0 6px #fff;
}
.sv-paso-num {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding-inline: 6px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--brand-fondo, var(--brand)); color: #fff; font-size: 12px; font-weight: 800;
}
.sv-paso-cuerpo { display: block; padding-top: 4px; }
.sv-paso-titulo { color: var(--sv-tinta); font-size: 17px; font-weight: 700; line-height: 1.3; }
.sv-paso-texto { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; }
/* Tablet y escritorio: horizontal, iconos unidos por un conector. */
@media (min-width: 768px) {
  .sv-pasos { grid-template-columns: repeat(var(--pasos, 5), minmax(0, 1fr)); gap: 20px; }
  .sv-paso { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .sv-paso:not(:last-child)::after {
    left: calc(50% + 36px); right: calc(-50% + 26px); top: 27px; bottom: auto; width: auto; height: 2px;
  }
  .sv-paso-cuerpo { padding-top: 0; }
  .sv-paso-texto { font-size: 13.5px; }
}
@media (min-width: 1024px) {
  .sv-pasos { gap: 32px; }
  .sv-paso-icono { width: 64px; height: 64px; font-size: 26px; }
  .sv-paso:not(:last-child)::after { left: calc(50% + 40px); right: calc(-50% + 24px); top: 31px; }
  .sv-paso-texto { font-size: 14px; }
}

/* ---------- Preguntas: acordeon, dos columnas en escritorio --------------- */
.sv-faq { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1024px) {
  /* Columnas independientes: abrir una pregunta no estira a su vecina. */
  .sv-faq { display: block; columns: 2; column-gap: 24px; }
  .sv-faq-item { break-inside: avoid; margin-bottom: 12px; }
}
.sv-faq-item { background: #fff; border: 1px solid var(--sv-borde); border-radius: var(--radio-2, 12px); }
.sv-faq-item[open] { border-color: color-mix(in srgb, var(--brand) 35%, #ffffff); box-shadow: var(--sombra-1, 0 1px 2px rgba(15, 23, 42, .06)); }
.sv-faq-item .acordeon-titulo { padding: 16px 20px; min-height: 56px; }
.sv-faq-p { color: var(--sv-tinta); font-size: 15px; font-weight: 600; line-height: 1.4; padding-right: 8px; }
.sv-faq-r { padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: #334155; }

/* ---------- Sucursales ---------------------------------------------------- */
.sv-suc {
  display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid var(--sv-borde); border-radius: var(--radio-3, 16px);
  box-shadow: var(--sombra-1, 0 1px 2px rgba(15, 23, 42, .06));
}
/* Mapa dibujado: manzanas con calles (dos degradados) y el pin de marca. */
.sv-suc-mapa {
  position: relative; height: 128px; display: grid; place-items: center;
  background-color: color-mix(in srgb, var(--brand) 9%, #ffffff);
  background-image:
    linear-gradient(90deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(0deg, transparent 44%, #fff 44%, #fff 52%, transparent 52%),
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, .7) 18% 20%, transparent 20% 78%, rgba(255, 255, 255, .7) 78% 80%, transparent 80%),
    linear-gradient(0deg, transparent 0 20%, rgba(255, 255, 255, .7) 20% 23%, transparent 23% 76%, rgba(255, 255, 255, .7) 76% 79%, transparent 79%);
  background-size: 100% 100%, 100% 100%, 160px 100%, 100% 128px;
  border-bottom: 1px solid #f1f5f9;
}
.sv-suc-pin {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-fondo, var(--brand)); color: #fff; font-size: 24px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 20%, transparent), var(--sombra-2, 0 8px 24px -12px rgba(15, 23, 42, .25));
}
.sv-suc-cuerpo { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.sv-suc-nombre { color: var(--sv-tinta); font-size: 18px; font-weight: 700; }
.sv-suc-datos { margin-top: 12px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.sv-suc-datos li { display: flex; gap: 10px; align-items: flex-start; }
.sv-suc-datos .bi { color: var(--brand-texto); margin-top: 2px; flex-shrink: 0; }
.sv-suc-datos a { color: #334155; text-decoration: none; }
.sv-suc-datos a:hover { color: var(--brand-texto); text-decoration: underline; }
.sv-suc-acciones { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 640px) {
  .sv-rej > .sv-ancha-t.sv-suc { flex-direction: row; }
  .sv-rej > .sv-ancha-t.sv-suc .sv-suc-mapa { width: 40%; height: auto; min-height: 200px; border-bottom: 0; }
}
@media (min-width: 1024px) {
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d).sv-suc { flex-direction: column; }
  .sv-rej > .sv-ancha-t:not(.sv-ancha-d).sv-suc .sv-suc-mapa { width: auto; height: 128px; min-height: 0; }
  .sv-rej > .sv-ancha-d.sv-suc { flex-direction: row; }
  .sv-rej > .sv-ancha-d.sv-suc .sv-suc-mapa { width: 40%; height: auto; min-height: 220px; }
}

/* ---------- Otros servicios ----------------------------------------------- */
.sv-otros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- Banda final de color de marca --------------------------------- */
.sv-banda {
  padding-block: 56px; color: #fff;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--brand) 60%, transparent) 0%, transparent 70%),
    var(--brand-fondo, var(--brand));
}
.sv-banda-caja { display: flex; flex-direction: column; gap: 8px; }
.sv-banda-titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 800; letter-spacing: -.024em; line-height: 1.15; color: #fff; }
.sv-banda-texto { margin-top: 8px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .92); max-width: 38rem; }
.sv-banda .sv-acciones { margin-top: 24px; }

/* ---------- Telefono: botones del heroe a todo el ancho ------------------- */
@media (max-width: 639.98px) {
  .sv-heroe .sv-acciones .sv-btn { flex: 1 1 100%; }
  .sv-banda .sv-acciones .sv-btn { flex: 1 1 100%; }
  .sv-heroe-visual { margin-inline: 8px; }
  /* En telefono solo la foto principal: el mosaico entero medía media pantalla. */
  .sv-mosaico { grid-template-columns: 1fr !important; }
  .sv-mosaico .sv-mosaico-celda { grid-column: auto !important; aspect-ratio: 16 / 10 !important; }
  .sv-mosaico .sv-mosaico-celda:not(:first-child) { display: none; }
  /* Fallas: una sola tarjeta con divisores en vez de seis cajas sueltas. */
  .sv-fallas { flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--sv-borde); border-radius: 16px; overflow: hidden; }
  .sv-fallas li { flex: none; border: 0; border-radius: 0; padding: 12px 16px; font-size: 14px; }
  .sv-fallas li + li { border-top: 1px solid #f1f5f9; }
  .sv-falla-icono { width: 36px; height: 36px; font-size: 16px; }
  /* Menos alto en telefono: sin mapa dibujado (el boton "Como llegar" queda),
     otros servicios en una fila deslizable y los dos botones de pasos lado a lado. */
  .sv-suc-mapa { display: none; }
  .sv-suc-cuerpo { padding: 20px; }
  .sv-sec { padding-block: 40px; }
  .sv-sec-cab { margin-bottom: 24px; }
  .sv-otros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .sv-otros::-webkit-scrollbar { display: none; }
  .sv-otros > li { flex-shrink: 0; }
  .sv-acciones-centro { margin-top: 32px; gap: 8px; }
  .sv-acciones-centro .sv-btn { flex: 1 1 100%; }
  .sv-heroe .sv-acciones { margin-top: 24px; }
  .sv-ilus-heroe { aspect-ratio: 16 / 10; }
  .sv-ilus-mini { width: 40px; height: 40px; font-size: 17px; border-radius: 12px; }
  .sv-flota-precio strong { font-size: 18px; }
}

/* ---------- Tablet -------------------------------------------------------- */
@media (min-width: 640px) {
  .sv-heroe { padding-block: 32px 64px; }
  .sv-sec { padding-block: 72px; }
  .sv-sec-corta { padding-block: 48px; }
  .sv-banda { padding-block: 64px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sv-mosaico[data-n="3"] { grid-template-columns: 2fr 1fr 1fr; }
  .sv-mosaico[data-n="3"] .sv-mosaico-celda,
  .sv-mosaico[data-n="3"] .sv-mosaico-celda:first-child { grid-column: auto; aspect-ratio: auto; height: 240px; }
  .sv-mosaico[data-n="2"] .sv-mosaico-celda { aspect-ratio: 16 / 10; }
  .sv-mosaico[data-n="1"] .sv-mosaico-celda,
  .sv-ilus-heroe { aspect-ratio: 21 / 9; }
  .sv-ilus-centro { width: 22%; }
  .sv-ilus-anillo { width: 46%; }
}

/* ---------- Escritorio ---------------------------------------------------- */
@media (min-width: 1024px) {
  .sv-heroe { padding-block: 32px 88px; }
  .sv-heroe-indice { padding-bottom: 72px; }
  .sv-heroe-rej { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; margin-top: 32px; }
  .sv-heroe-visual { max-width: none; }
  .sv-sec { padding-block: 96px; }
  .sv-sec-corta { padding-block: 56px; }
  .sv-sec-cab { margin-bottom: 40px; }
  .sv-banda { padding-block: 72px; }
  .sv-banda-caja { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .sv-banda .sv-acciones { margin-top: 0; flex-shrink: 0; }
  .sv-lead { font-size: 20px; }
}

/* ---------- Movimiento: solo si el usuario no pidio reducirlo ------------- */
@media (prefers-reduced-motion: no-preference) {
  .sv-serv-enlace:hover, .sv-cat-enlace:hover { transform: translateY(-3px); }
  .sv-serv-enlace:hover img, .sv-cat-enlace:hover img { transform: scale(1.04); }
  .sv-btn:hover { transform: translateY(-1px); }
  .sv-carrusel { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .sv *, .sv *::before, .sv *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* Dos tarjetas a lo ancho en escritorio: foto mas baja para no comerse la pantalla. */
@media (min-width: 1024px) {
  .sv-servs:has(> li:nth-child(2):last-child) .sv-serv-media { aspect-ratio: 16 / 9; }
}