/* =====================================================================
   SoloVasos · Inicio nuevo (secciones svh-*) — CSS para el tema Lima
   ---------------------------------------------------------------------
   - Todo vive dentro de .svh-inicio: nada global (ni body, ni h1, ni a,
     ni img, ni button). Así no choca con el CSS de Lima (Bootstrap).
   - Las variables (colores, letras, sombras) están en .svh-inicio, no en :root.
   - Letras: las del tema (--heading-font / --body-font); si no existen,
     Lexend y Mulish (la vista previa las carga de Google Fonts).
   ===================================================================== */

.svh-inicio {
  --svh-marino: #1D3055;
  --svh-marino-hondo: #0e2b4d;
  --svh-accion: #1a74c4;          /* botones de compra: blanco encima 4,8:1 (AA) */
  --svh-accion-hover: #155f9f;
  --svh-enlace: #1c64b8;
  --svh-whatsapp: #25D366;
  --svh-whatsapp-hover: #1fbd5a;
  --svh-foco: #9cc9f2;
  --svh-fondo: #f5f7fa;
  --svh-blanco: #ffffff;
  --svh-celeste: #eef3fb;
  --svh-foto: #f2f5f8;
  --svh-borde: #e3e6ea;
  --svh-texto: #2b2b2d;
  --svh-texto-suave: #5f6368;
  --svh-perso-fondo: #fff3ea;
  --svh-perso-borde: #f6d2b8;
  --svh-perso: #c2410c;           /* personalización: sobre #fff3ea 4,75:1 */
  --svh-eco: #2f9e6a;
  --svh-eco-fondo: #f2faf6;
  --svh-eco-borde: #cde8da;
  --svh-info-fondo: #eef6ff;
  --svh-info-borde: #cfe3fb;
  --svh-promo-fondo: #e7f7ee;      /* ofertas: verde suave (no es el verde de WhatsApp) */
  --svh-promo-borde: #b7e3c8;
  --svh-promo-texto: #0f7a3d;      /* sobre --svh-promo-fondo 4,9:1; blanco encima 5,6:1 */
  --svh-sombra: 0 2px 10px rgba(14,43,77,.06);
  --svh-sombra-alta: 0 8px 24px rgba(14,43,77,.12);
  --svh-sombra-boton: 0 6px 14px rgba(26,116,196,.28);
  --svh-titulos: var(--heading-font, "Lexend"), "Lexend", system-ui, sans-serif;
  --svh-letra: var(--body-font, "Mulish"), "Mulish", "Muli", system-ui, sans-serif;
  --svh-alto-encabezado: 60px;    /* alto del encabezado fijo del tema (para el ancla) */
  --svh-alto-arriba: 92px;        /* barra de anuncios + encabezado del tema en celular (para el alto de la portada) */

  display: block;
  background: var(--svh-fondo);
  color: var(--svh-texto);
  font-family: var(--svh-letra);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Reinicio mínimo, solo dentro del inicio */
.svh-inicio *, .svh-inicio *::before, .svh-inicio *::after { box-sizing: border-box; }
.svh-inicio img { max-width: 100%; display: block; }
.svh-inicio a { color: inherit; -webkit-tap-highlight-color: rgba(26,116,196,.15); }
.svh-inicio ul, .svh-inicio ol { list-style: none; margin: 0; padding: 0; }
.svh-inicio h1, .svh-inicio h2, .svh-inicio h3, .svh-inicio p, .svh-inicio figure, .svh-inicio blockquote { margin: 0; text-transform: none; }

.svh-inicio .svh-contenedor {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
}
.svh-inicio .svh-bloque { padding: 40px 0; }
.svh-inicio .svh-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.svh-inicio .svh-h2 {
  font-family: var(--svh-titulos); font-weight: 800; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--svh-marino-hondo); margin: 0 0 6px;
}
.svh-inicio .svh-h3 { font-family: var(--svh-titulos); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--svh-marino-hondo); margin: 0 0 12px; }
.svh-inicio .svh-entrada { font-size: 16px; line-height: 1.5; color: var(--svh-texto-suave); margin: 0 0 20px; }
.svh-inicio .svh-cabeza { margin-bottom: 4px; }
.svh-inicio .svh-antetitulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  border-radius: 999px; padding: 5px 11px; margin: 0 0 10px;
}

/* ===================== Botones y enlaces ===================== */
.svh-inicio .svh-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border-radius: 12px; border: 2px solid transparent;
  font-family: var(--svh-letra); font-size: 16px; font-weight: 800; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.svh-inicio .svh-boton:focus-visible, .svh-inicio .svh-card:focus-visible, .svh-inicio .svh-cat:focus-visible, .svh-inicio .svh-enlace:focus-visible, .svh-inicio .svh-pildora:focus-visible, .svh-inicio .svh-complemento:focus-visible {
  outline: 3px solid var(--svh-foco); outline-offset: 2px;
}
.svh-inicio .svh-boton--accion { background: var(--svh-accion); color: #fff; box-shadow: var(--svh-sombra-boton); }
.svh-inicio .svh-boton--accion:hover { background: var(--svh-accion-hover); color: #fff; }
.svh-inicio .svh-boton--wa { background: var(--svh-whatsapp); color: var(--svh-marino-hondo); }
.svh-inicio .svh-boton--wa:hover { background: var(--svh-whatsapp-hover); color: var(--svh-marino-hondo); }
.svh-inicio .svh-boton--contorno { background: #fff; color: var(--svh-marino-hondo); border-color: var(--svh-borde); }
.svh-inicio .svh-boton--contorno:hover { border-color: var(--svh-accion); color: var(--svh-enlace); }
.svh-inicio .svh-boton--ancho-cel { width: 100%; }
.svh-inicio .svh-boton--claro { background: #fff; color: var(--svh-marino-hondo); border-color: #fff; }
.svh-inicio .svh-boton--claro:hover { background: var(--svh-info-fondo); color: var(--svh-marino-hondo); border-color: var(--svh-info-fondo); }
.svh-inicio .svh-ico-wa { width: 20px; height: 20px; flex: 0 0 auto; }
.svh-inicio .svh-enlace { color: var(--svh-enlace); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.svh-inicio .svh-enlace--toque { display: inline-flex; align-items: center; min-height: 44px; }

/* ===================== 1 · Portada (foto + "Ver video") ===================== */
/* La foto del pedido de La Guajira llena la portada; el degradado marino va encima y el
   título y los botones van sobre él. El video de YouTube no se carga aquí: se abre en un
   visor al tocar "Ver video" o la foto (.svh-vvisor), así el reproductor nunca queda tapado. */
.svh-inicio .svh-portada {
  position: relative; overflow: hidden; isolation: isolate; background: var(--svh-marino); color: #fff;
  --svh-foto-base: 245px; /* celular: distancia del letrero "LA GUAJIRA" al borde de abajo */
}
.svh-inicio .svh-portada__media { position: absolute; inset: 0; z-index: 0; }
/* Celular: la foto a lo ancho, puesta para que el letrero "Pedido para LA GUAJIRA" (entre el
   72 % y el 88 % del alto de la foto) quede entre el botón "Ver video" y los botones.
   Arriba se recorta la pared; abajo la foto se funde con el marino (sin franjas). */
.svh-inicio .svh-portada__foto {
  position: absolute; left: 0; bottom: var(--svh-foto-base); width: 100%; height: auto;
  aspect-ratio: 640 / 1112; object-fit: cover; transform: translateY(12%);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.svh-inicio .svh-portada__grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto; grid-template-areas: "titulo" "ver" "resto";
  min-height: clamp(600px, calc(100vh - var(--svh-alto-arriba) + 64px), 680px);
}
@supports (height: 1svh) { .svh-inicio .svh-portada__grid { min-height: clamp(600px, calc(100svh - var(--svh-alto-arriba) + 64px), 680px); } }
.svh-inicio .svh-portada__titulo {
  grid-area: titulo; margin: 0 -16px; padding: 14px 16px 40px;
  background: linear-gradient(180deg, rgba(29,48,85,.95) 0%, rgba(29,48,85,.85) 55%, rgba(29,48,85,0) 100%);
}
/* Zona de la foto que abre el video (el botón y alrededor). */
.svh-inicio .svh-portada__ver { grid-area: ver; display: flex; align-items: flex-start; justify-content: center; padding: 0 0 12px; cursor: pointer; }
.svh-inicio .svh-portada__resto {
  grid-area: resto; position: relative; display: flex; flex-direction: column;
  margin: 0 -16px; padding: 56px 16px 14px;
  background: linear-gradient(to bottom, rgba(29,48,85,0) 0%, rgba(29,48,85,.6) 24%, rgba(29,48,85,.92) 46%, var(--svh-marino) 70%);
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .svh-inicio .svh-portada__resto::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
  }
}
/* Botón "Ver video": círculo blanco translúcido con ▶, etiqueta y un pulso suave. */
.svh-inicio .svh-portada__play {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px; min-height: 56px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: #fff; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--svh-titulos); font-weight: 700; font-size: 16px; line-height: 1;
}
.svh-inicio .svh-portada__play:hover, .svh-inicio .svh-portada__play:focus, .svh-inicio .svh-portada__play:visited { color: #fff; text-decoration: none; }
.svh-inicio .svh-portada__play-circulo {
  position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.26); border: 1.5px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(8,20,40,.35); transition: transform .2s ease, background-color .2s ease;
}
.svh-inicio .svh-portada__play-circulo svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.svh-inicio .svh-portada__play-circulo::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6); animation: svh-pulso 2.6s ease-out infinite;
}
@keyframes svh-pulso { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.svh-inicio .svh-portada__play-texto {
  padding: 7px 14px; border-radius: 999px; background: rgba(14,43,77,.55); font-size: 15px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(8,20,40,.25);
}
.svh-inicio .svh-portada__play:hover .svh-portada__play-circulo { transform: scale(1.06); background: rgba(255,255,255,.36); }
.svh-inicio .svh-portada__play:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .svh-inicio .svh-portada__play-circulo::after { animation: none; opacity: 0; }
  .svh-inicio .svh-portada__play-circulo { transition: none; }
}
/* Visor del video (pantalla completa). El reproductor va entero en 9:16, sin nada encima:
   la ✕ queda en su propia barra, arriba del video. */
.svh-inicio .svh-vvisor {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 16px; background: rgba(8,20,40,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: svh-vvisor-entra .2s ease-out;
}
.svh-inicio .svh-vvisor[hidden] { display: none; }
@keyframes svh-vvisor-entra { from { opacity: 0; } to { opacity: 1; } }
.svh-inicio .svh-vvisor__barra, .svh-inicio .svh-vvisor__marco { width: min(100%, calc((100vh - 90px) * 9 / 16)); }
@supports (height: 1svh) { .svh-inicio .svh-vvisor__barra, .svh-inicio .svh-vvisor__marco { width: min(100%, calc((100svh - 90px) * 9 / 16)); } }
.svh-inicio .svh-vvisor__barra { display: flex; justify-content: flex-end; }
.svh-inicio .svh-vvisor__marco { aspect-ratio: 9 / 16; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.svh-inicio .svh-vvisor__marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.svh-inicio .svh-vvisor__cerrar {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.95); color: var(--svh-marino-hondo);
  font-family: var(--svh-titulos); font-size: 20px; font-weight: 700; line-height: 1; box-shadow: var(--svh-sombra-alta);
}
.svh-inicio .svh-vvisor__cerrar:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 2px; }
.svh-inicio .svh-vvisor__centinela { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .svh-inicio .svh-vvisor { animation: none; } }
.svh-inicio .svh-portada__botones { order: 1; display: grid; gap: 10px; }
.svh-inicio .svh-portada__nota { order: 2; margin: 12px 0 0; text-align: center; font-size: 13.5px; line-height: 1.4; letter-spacing: .01em; color: rgba(255,255,255,.9); }
.svh-inicio .svh-chips { order: 3; }
/* Botón secundario claro (contorno) sobre marino */
.svh-inicio .svh-boton--claro-borde { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.6); }
.svh-inicio .svh-boton--claro-borde:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.svh-inicio .svh-portada .svh-antetitulo { background: rgba(255,255,255,.12); color: #fff; margin-bottom: 10px; }
.svh-inicio .svh-h1 {
  font-family: var(--svh-titulos); font-weight: 800;
  font-size: 27px; line-height: 1.12; letter-spacing: -0.02em;
  margin: 0; color: #fff; text-shadow: 0 1px 12px rgba(14,43,77,.35);
}
.svh-inicio .svh-boton--wa-borde { background: transparent; color: #fff; border-color: var(--svh-whatsapp); }
.svh-inicio .svh-boton--wa-borde .svh-ico-wa { color: var(--svh-whatsapp); }
.svh-inicio .svh-boton--wa-borde:hover { background: rgba(37,211,102,.12); color: #fff; }
.svh-inicio .svh-chips { display: none; gap: 8px; flex-wrap: wrap; }
.svh-inicio .svh-chips li {
  white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1.3;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.16);
}

/* ===================== 2 · Categorías: una fila compacta ===================== */
.svh-inicio .svh-categorias { background: var(--svh-blanco); padding: 16px 0 14px; }
.svh-inicio .svh-categorias__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-bottom: 8px; }
.svh-inicio .svh-h2--chico { font-size: 19px; margin: 0; }
.svh-inicio .svh-categorias__nota { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--svh-texto-suave); }
/* En celular, si no caben las 4, la fila avanza sola (svh-inicio.js) y se desliza con el dedo. */
.svh-inicio .svh-cats-fila {
  --svh-borde-fila: 16px;
  position: relative; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: var(--svh-borde-fila);
  padding: 4px var(--svh-borde-fila) 8px; scrollbar-width: none;
}
.svh-inicio .svh-cats-fila::-webkit-scrollbar { display: none; }
.svh-inicio .svh-cats-fila.svh-auto, .svh-inicio .svh-cats-fila.svh-arrastrando { scroll-snap-type: none; }
.svh-inicio .svh-cats-fila.svh-arrastrando { cursor: grabbing; user-select: none; }
.svh-inicio .svh-cats-fila > li { display: flex; flex: 0 0 auto; scroll-snap-align: start; }
.svh-inicio .svh-cat {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px;
  background: #fff; border: 1px solid var(--svh-borde); border-radius: 14px; box-shadow: var(--svh-sombra);
  padding: 6px 14px 6px 6px; text-decoration: none; color: var(--svh-marino-hondo);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.svh-inicio .svh-cat:hover { color: var(--svh-marino-hondo); text-decoration: none; }
.svh-inicio .svh-cat__foto { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--svh-celeste); }
.svh-inicio .svh-cat__foto img { width: 100%; height: 100%; object-fit: cover; }
.svh-inicio .svh-cat__nombre { font-family: var(--svh-titulos); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.svh-inicio .svh-cat__ir { margin-left: auto; color: var(--svh-enlace); font-weight: 800; font-size: 15px; }
.svh-inicio .svh-cat:active { transform: scale(.985); }
@media (hover: hover) {
  .svh-inicio .svh-cat:hover { box-shadow: var(--svh-sombra-alta); transform: translateY(-2px); border-color: var(--svh-info-borde); }
}

/* ===================== Tarjeta de producto (molde único) ===================== */
.svh-inicio .svh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svh-inicio .svh-grid > li { display: flex; min-width: 0; }
.svh-inicio .svh-card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--svh-borde); border-radius: 14px;
  box-shadow: var(--svh-sombra); padding: 8px;
  text-decoration: none; color: inherit;
  transition: box-shadow .25s ease, transform .25s ease;
}
.svh-inicio .svh-card:hover { color: inherit; text-decoration: none; }
/* Toda la tarjeta lleva al producto: el enlace del nombre se estira (::after) y cubre la
   tarjeta entera (foto, precio y "Comprar"). Un solo enlace = un solo clic medido.
   Al tocarla se hunde un poco. */
.svh-inicio .svh-card { -webkit-tap-highlight-color: transparent; }
.svh-inicio .svh-card__enlace { color: inherit; text-decoration: none; outline: none; }
.svh-inicio .svh-card__enlace:hover { color: inherit; text-decoration: none; }
.svh-inicio .svh-card__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; cursor: pointer; }
.svh-inicio .svh-card__enlace:focus-visible::after { outline: 3px solid var(--svh-foco); outline-offset: 2px; }
.svh-inicio .svh-card:active { transform: scale(.985); box-shadow: var(--svh-sombra); }
.svh-inicio .svh-card:active .svh-card__boton { background: var(--svh-accion-hover); }
.svh-inicio .svh-card__foto { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--svh-foto); }
.svh-inicio .svh-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.svh-inicio .svh-insignia {
  position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px);
  background: rgba(255,255,255,.94); color: var(--svh-marino);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(14,43,77,.10);
}
.svh-inicio .svh-dcto {
  position: absolute; right: 8px; bottom: 8px;
  background: var(--svh-marino); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1.3;
  padding: 4px 9px; border-radius: 999px;
}
.svh-inicio .svh-card__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 10px 4px 2px; }
.svh-inicio .svh-card__nombre {
  font-family: var(--svh-letra); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--svh-marino-hondo);
  margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svh-inicio .svh-prueba { font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--svh-marino); margin: -2px 0 8px; }
.svh-inicio .svh-incluido {
  align-self: flex-start; white-space: nowrap; letter-spacing: -.01em;
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  color: var(--svh-perso); background: var(--svh-perso-fondo);
  padding: 3px 9px; border-radius: 999px; margin: 0 0 8px;
}
/* Pastilleros: pastilla pequeña "🤫 Compartimiento secreto" (bajo "Personalizado a láser gratis").
   Si no cabe en una línea, va en dos, entera. */
.svh-inicio .svh-secreto {
  align-self: flex-start; max-width: 100%; white-space: normal; text-wrap: balance;
  font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  color: var(--svh-marino); background: var(--svh-info-fondo); border: 1px solid #d3e4f6;
  padding: 2px 8px; border-radius: 10px; margin: -4px 0 8px;
}
.svh-inicio .svh-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: auto 0 2px; }
.svh-inicio .svh-precio__ahora { font-family: var(--svh-titulos); font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--svh-marino-hondo); }
.svh-inicio .svh-precio__desde { font-weight: 700; font-size: 13px; color: var(--svh-texto-suave); margin-right: -4px; }
.svh-inicio .svh-precio__antes { font-size: 13px; color: var(--svh-texto-suave); text-decoration: line-through; flex-basis: 100%; }
.svh-inicio .svh-variedad { font-size: 13px; line-height: 1.45; color: var(--svh-texto-suave); margin: 2px 0 0; }
/* Agotado (solo en listas manuales): franja discreta y encargo por WhatsApp encima del enlace. */
.svh-inicio .svh-agotado {
  margin: 8px 0 0; padding: 4px 8px; border-radius: 8px; text-align: center;
  background: #eef1f5; color: var(--svh-texto-suave); font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.svh-inicio .svh-card__boton.svh-card__boton--wa {
  position: relative; z-index: 2; margin-top: 8px; padding: 0 8px; text-align: center; text-decoration: none;
  background: var(--svh-whatsapp); color: var(--svh-marino-hondo); box-shadow: none; font-size: 15px; line-height: 1.2;
}
.svh-inicio .svh-card:hover .svh-card__boton--wa, .svh-inicio .svh-card:active .svh-card__boton--wa { background: var(--svh-whatsapp); }
.svh-inicio .svh-card .svh-card__boton--wa:hover { background: var(--svh-whatsapp-hover); color: var(--svh-marino-hondo); }
.svh-inicio .svh-card__boton--wa:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 2px; }
.svh-inicio .svh-card__boton {
  margin-top: 10px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--svh-accion); color: #fff; border-radius: 12px;
  font-weight: 800; font-size: 16px; box-shadow: var(--svh-sombra-boton);
  transition: background-color .2s ease;
}
.svh-inicio .svh-card:hover .svh-card__boton { background: var(--svh-accion-hover); }
@media (hover: hover) {
  .svh-inicio .svh-card:hover { box-shadow: var(--svh-sombra-alta); transform: translateY(-2px); }
}
/* Celular angosto: "🎨 Personalizado a láser gratis" no cabe en una línea en la tarjeta de
   2 columnas; va en dos líneas parejas, en pastilla y nunca cortada. */
@media (max-width: 420px) {
  .svh-inicio .svh-card { padding: 6px; }
  .svh-inicio .svh-card__cuerpo { padding: 10px 2px 2px; }
  .svh-inicio .svh-incluido { white-space: normal; text-wrap: balance; font-size: 11px; line-height: 1.25; padding: 3px 8px; border-radius: 8px; }
  .svh-inicio .svh-secreto { font-size: 10.5px; letter-spacing: -.02em; padding: 2px 7px; }
  .svh-inicio .svh-card__boton.svh-card__boton--wa { font-size: 14px; }
}
/* Anchos donde "🎨 Personalizado a láser gratis" no cabe en una línea en la tarjeta (se salía
   hasta 26 px): 421-499 px (2 columnas), 700-759 px (3 columnas) y 1000-1139 px (4 columnas).
   Ahí también va en dos líneas parejas, entera y sin cortar. */
@media (min-width: 421px) and (max-width: 499px), (min-width: 700px) and (max-width: 759px), (min-width: 1000px) and (max-width: 1139px) {
  .svh-inicio .svh-incluido { white-space: normal; text-wrap: balance; max-width: 100%; font-size: 11.5px; line-height: 1.25; padding: 3px 8px; border-radius: 8px; }
}
@media (max-width: 389px) {
  .svh-inicio .svh-insignia { white-space: nowrap; font-size: 11.5px; padding: 4px 8px; }
}
/* Insignias largas ("🔥 +110 BJPK de 32 oz vendidos"): en 2 líneas antes que cortadas. */
.svh-inicio .svh-insignia.svh-insignia--larga { white-space: normal; }

/* Tarjeta horizontal (una sola, en Personalización) */
/* Más específica que .svh-grid de tableta y PC (3 y 4 columnas): siempre una sola columna. */
.svh-inicio .svh-grid.svh-grid--uno { grid-template-columns: minmax(0, 1fr); }
.svh-inicio .svh-grid--uno .svh-card { display: grid; grid-template-columns: 42% minmax(0, 1fr); column-gap: 12px; align-items: start; }
.svh-inicio .svh-grid--uno .svh-card__foto { align-self: stretch; aspect-ratio: auto; min-height: 100%; }
.svh-inicio .svh-grid--uno .svh-card__cuerpo { padding: 2px 2px 0; height: 100%; }
.svh-inicio .svh-grid--uno .svh-insignia {
  position: static; grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal;
  background: var(--svh-celeste); box-shadow: none; margin: 2px 0 10px;
  font-weight: 600; font-size: 12.5px; padding: 5px 11px;
}

/* ===================== 3 · Más vendidos ===================== */
.svh-inicio .svh-vendidos { padding-top: 28px; background: var(--svh-blanco); scroll-margin-top: var(--svh-alto-encabezado); }
.svh-inicio .svh-complemento {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 0; padding: 10px 12px 10px 10px;
  background: #fff; border: 1px solid var(--svh-borde); border-radius: 14px; box-shadow: var(--svh-sombra);
  text-decoration: none; color: inherit;
}
.svh-inicio .svh-complemento:hover { color: inherit; text-decoration: none; }
.svh-inicio .svh-complemento img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--svh-foto); flex: 0 0 64px; }
.svh-inicio .svh-complemento__texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.svh-inicio .svh-complemento__texto strong { color: var(--svh-marino-hondo); }
.svh-inicio .svh-complemento__texto span { display: block; color: var(--svh-texto-suave); font-size: 13px; }
.svh-inicio .svh-complemento__ir { flex: 0 0 auto; color: var(--svh-enlace); font-weight: 800; font-size: 14px; white-space: nowrap; }
.svh-inicio .svh-centro { text-align: center; margin-top: 20px; }

/* ===================== 4 · Empresas (carrusel de logos estilo 3DM) ===================== */
.svh-inicio .svh-empresas { background: var(--svh-fondo); overflow: hidden; scroll-margin-top: var(--svh-alto-encabezado); }
.svh-inicio .svh-empresas__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-bottom: 14px; }
/* La pausa del carrusel va junto al título (Daniel, 2026-10-08), no suelta debajo del texto. */
.svh-inicio .svh-empresas__titulo { display: flex; align-items: center; gap: 10px; }
.svh-inicio .svh-empresas__titulo .svh-pausa { margin-left: 0; align-self: flex-end; margin-bottom: 4px; }
.svh-inicio .svh-empresas__cabeza .svh-h2 { max-width: 15em; margin: 0; }
.svh-inicio .svh-empresas__cabeza p { max-width: 26em; margin: 0; font-size: 16px; line-height: 1.5; color: var(--svh-texto-suave); }
.svh-inicio .svh-azul { color: var(--svh-enlace); }
.svh-inicio .svh-muro {
  display: grid; gap: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.svh-inicio .svh-carril { display: flex; width: max-content; animation: svh-desliza 40s linear infinite; }
.svh-inicio .svh-carril--inverso { animation-duration: 46s; animation-direction: reverse; }
.svh-inicio .svh-carril > li { margin-right: 12px; }
.svh-inicio .svh-muro:focus-within .svh-carril { animation-play-state: paused; }
/* Pausa al pasar el mouse solo donde hay mouse (en iPhone el :hover se queda pegado). */
@media (hover: hover) { .svh-inicio .svh-muro:hover .svh-carril { animation-play-state: paused; } }
/* Botón de pausa del carrusel de logos */
.svh-inicio .svh-muro.svh-detenido .svh-carril { animation-play-state: paused; }
@keyframes svh-desliza { to { transform: translateX(-50%); } }
.svh-inicio .svh-logo-pill {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--svh-borde); border-radius: 999px;
  padding: 8px 20px 8px 8px; box-shadow: var(--svh-sombra);
}
.svh-inicio .svh-logo-pill img, .svh-inicio .svh-logo-pill__circulo { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px; object-fit: cover; background: #fff; }
.svh-inicio .svh-logo-pill__circulo { background: #eef1f5; }
.svh-inicio .svh-logo-pill__nombre { font-weight: 700; font-size: 14.5px; color: var(--svh-marino-hondo); white-space: nowrap; }
.svh-inicio .svh-logo-pill--vacio { border-style: dashed; border-color: #c9d1dc; box-shadow: none; }
.svh-inicio .svh-logo-pill--vacio .svh-logo-pill__nombre { color: var(--svh-texto-suave); font-weight: 600; }
/* Sin logos todavía: aviso quieto de "Próximamente" en lugar de los carriles. */
.svh-inicio .svh-muro--pronto { -webkit-mask-image: none; mask-image: none; padding: 0 16px; }
.svh-inicio .svh-pronto {
  margin: 0 auto; max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; padding: 16px 20px; text-align: center;
  background: #fff; border: 1.5px dashed #c9d1dc; border-radius: 18px;
}
.svh-inicio .svh-pronto__etiqueta {
  display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--svh-marino); color: #fff;
  font-family: var(--svh-titulos); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.svh-inicio .svh-pronto__texto { font-size: 15px; line-height: 1.45; color: var(--svh-texto-suave); font-weight: 600; }
/* Reducir movimiento: dos filas quietas que se desplazan con el dedo. */
@media (prefers-reduced-motion: reduce) {
  .svh-inicio .svh-carril {
    animation: none; width: auto; flex-wrap: nowrap; overflow-x: auto;
    padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .svh-inicio .svh-carril::-webkit-scrollbar { display: none; }
  .svh-inicio .svh-carril > li { flex: 0 0 auto; scroll-snap-align: start; }
  .svh-inicio .svh-carril [aria-hidden="true"] { display: none; }
  .svh-inicio .svh-muro { -webkit-mask-image: none; mask-image: none; }
}
/* Panel marino para cotizar */
.svh-inicio .svh-empresas__panel { margin-top: 28px; background: var(--svh-marino); color: #fff; border-radius: 14px; padding: 22px 16px; }
.svh-inicio .svh-empresas__panel .svh-h3 { color: #fff; margin-bottom: 14px; }
.svh-inicio .svh-lista { margin: 0 0 18px; display: grid; gap: 10px; }
.svh-inicio .svh-lista li {
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; line-height: 1.35;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px;
}
.svh-inicio .svh-lista span[aria-hidden] { font-size: 18px; }
.svh-inicio .svh-boton--combos { margin-top: 10px; }
.svh-inicio .svh-combos-nota { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.85); }
.svh-inicio .svh-empresas__links { display: grid; gap: 2px; margin-top: 6px; }
.svh-inicio .svh-empresas__links a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.svh-inicio .svh-empresas__links a:hover { color: var(--svh-info-borde); }

/* ===================== 5 · Personalización ===================== */
.svh-inicio .svh-personaliza {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(26,116,196,.11), transparent 26%),
    radial-gradient(circle at 94% 82%, rgba(194,65,12,.09), transparent 24%),
    linear-gradient(145deg, #fff 0%, var(--svh-perso-fondo) 54%, #fff 100%);
}
.svh-inicio .svh-personaliza::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .32;
  background-image: linear-gradient(rgba(29,48,85,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(29,48,85,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 65%);
  mask-image: linear-gradient(to bottom, #000, transparent 65%);
}
.svh-inicio .svh-personaliza .svh-contenedor { position: relative; z-index: 1; }
.svh-inicio .svh-personaliza .svh-cabeza { max-width: 780px; }
.svh-inicio .svh-personaliza .svh-antetitulo {
  background: rgba(255,255,255,.86); color: var(--svh-perso); border: 1px solid var(--svh-perso-borde);
  box-shadow: 0 6px 18px rgba(14,43,77,.08);
}
.svh-inicio .svh-perso-titulo { position: relative; display: inline-block; }
.svh-inicio .svh-perso-titulo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--svh-accion) 40%, #fff 50%, var(--svh-accion) 60%, transparent 100%);
  opacity: 0; transform: translate3d(-65%,0,0); pointer-events: none;
}
.svh-inicio .svh-cabeza.svh-in .svh-perso-titulo::after { animation: svh-rayo-laser .9s .16s ease-out 1 both; }
@keyframes svh-rayo-laser {
  0% { opacity: 0; transform: translate3d(-65%,0,0); }
  24% { opacity: 1; }
  72% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(65%,0,0); }
}
.svh-inicio .svh-perso-galeria {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 2px 0 26px; padding: 8px 6px 14px;
}
.svh-inicio .svh-perso-galeria li { aspect-ratio: 1 / 1; overflow: visible; background: transparent; }
.svh-inicio .svh-perso-galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.svh-inicio .svh-perso-galeria__foto {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; cursor: zoom-in;
  background: var(--svh-foto); border: 5px solid #fff; border-radius: 14px;
  box-shadow: 0 12px 28px rgba(14,43,77,.17); transition: transform .25s ease, box-shadow .25s ease;
}
.svh-inicio .svh-perso-galeria li:nth-child(1) .svh-perso-galeria__foto { transform: rotate(-1.5deg) translateY(5px); }
.svh-inicio .svh-perso-galeria li:nth-child(2) .svh-perso-galeria__foto { transform: rotate(1.7deg) translateY(-3px); }
.svh-inicio .svh-perso-galeria li:nth-child(3) .svh-perso-galeria__foto { transform: rotate(1.2deg) translateY(2px); }
.svh-inicio .svh-perso-galeria li:nth-child(4) .svh-perso-galeria__foto { transform: rotate(-1.8deg) translateY(-5px); }
.svh-inicio .svh-perso-galeria__foto:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 2px; }
@media (hover: hover) {
  .svh-inicio .svh-perso-galeria__foto:hover { box-shadow: 0 18px 36px rgba(14,43,77,.22); }
  .svh-inicio .svh-perso-galeria__foto:hover img { transform: scale(1.045); }
}
/* Lupa abajo a la derecha (abajo a la izquierda va la marca de agua). */
.svh-inicio .svh-perso-galeria__lupa {
  position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: var(--svh-marino-hondo); font-size: 17px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(14,43,77,.18);
}
.svh-inicio .svh-visor {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 60px 16px 20px; background: rgba(8,20,40,.95);
}
.svh-inicio .svh-visor[hidden] { display: none; }
.svh-inicio .svh-visor__caja { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.svh-inicio .svh-visor__img { width: 100%; max-height: 66vh; object-fit: contain; border-radius: 14px; background: #0b1a33; }
.svh-inicio .svh-visor__pie { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.svh-inicio .svh-visor__textos { flex: 1 1 220px; min-width: 0; }
.svh-inicio .svh-visor__cuenta { margin: 0 0 2px; color: #fff; font-weight: 800; font-size: 14px; }
.svh-inicio .svh-visor__texto { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.4; }
.svh-inicio .svh-visor__ir { flex: 0 0 auto; }
.svh-inicio .svh-visor__cerrar, .svh-inicio .svh-visor__nav {
  position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.95); color: var(--svh-marino-hondo);
  font-family: var(--svh-titulos); font-size: 26px; line-height: 1; box-shadow: var(--svh-sombra-alta);
}
.svh-inicio .svh-visor__cerrar { top: 10px; right: 10px; font-size: 30px; }
.svh-inicio .svh-visor__nav { top: 40%; }
.svh-inicio .svh-visor__nav--ant { left: 8px; }
.svh-inicio .svh-visor__nav--sig { right: 8px; }
.svh-inicio .svh-visor__cerrar:focus-visible, .svh-inicio .svh-visor__nav:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 2px; }
@media (min-width: 1000px) {
  .svh-inicio .svh-visor__nav--ant { left: calc(50% - 400px); }
  .svh-inicio .svh-visor__nav--sig { right: calc(50% - 400px); }
  .svh-inicio .svh-visor__cerrar { top: 20px; right: 24px; }
}
.svh-inicio .svh-personaliza__grid { display: grid; gap: 16px; }
.svh-inicio .svh-caja-perso {
  background: rgba(255,255,255,.91); border: 1px solid var(--svh-perso-borde); border-radius: 18px; padding: 20px 16px;
  box-shadow: 0 16px 42px rgba(14,43,77,.11); backdrop-filter: blur(6px);
}
.svh-inicio .svh-caja-perso > .svh-h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.svh-inicio .svh-caja-perso > .svh-h3::after { content: ""; height: 2px; flex: 1; border-radius: 999px; background: linear-gradient(90deg, var(--svh-perso-borde), transparent); }
/* Foto de un pedido al por mayor debajo de la tarjeta del Pit 12 (para que esa columna no
   quede en blanco). Texto abajo sobre un difuminado oscuro; la lupa arriba a la derecha. */
.svh-inicio .svh-personaliza__lado { display: grid; gap: 16px; align-content: start; min-width: 0; }
.svh-inicio .svh-mayor {
  position: relative; display: block; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3;
  border-radius: 18px; background: var(--svh-foto); border: 1px solid var(--svh-perso-borde);
  box-shadow: 0 16px 42px rgba(14,43,77,.11); color: #fff; text-decoration: none;
}
.svh-inicio .svh-mayor img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transition: transform .35s ease;
}
.svh-inicio .svh-mayor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top, rgba(8,20,40,.8), rgba(8,20,40,.35) 55%, rgba(8,20,40,0));
}
.svh-inicio .svh-mayor__texto { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 3px; }
.svh-inicio .svh-mayor__texto b { font-family: var(--svh-titulos); font-size: 18px; font-weight: 800; line-height: 1.2; }
.svh-inicio .svh-mayor__texto span { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.92); }
.svh-inicio .svh-mayor .svh-perso-galeria__lupa { z-index: 1; top: 10px; right: 10px; bottom: auto; }
.svh-inicio .svh-mayor:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 3px; }
@media (hover: hover) { .svh-inicio .svh-mayor:hover img { transform: scale(1.04); } }
.svh-inicio .svh-pasos { margin: 0 0 18px; display: grid; gap: 8px; }
.svh-inicio .svh-pasos li {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 68px; padding: 4px 0; font-size: 15.5px; line-height: 1.45;
}
.svh-inicio .svh-pasos li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; left: 26px; top: 54px; bottom: -18px;
  width: 2px; background: linear-gradient(var(--svh-accion), var(--svh-perso-borde));
}
.svh-inicio .svh-paso__icono {
  position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--svh-perso-fondo); border: 1px solid var(--svh-perso-borde); color: var(--svh-perso);
  box-shadow: 0 5px 14px rgba(14,43,77,.09);
}
.svh-inicio .svh-paso__icono svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.svh-inicio .svh-paso__icono b {
  position: absolute; right: -4px; bottom: -4px; width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--svh-marino); color: #fff;
  border: 2px solid #fff; font-family: var(--svh-titulos); font-size: 11px; line-height: 1; font-weight: 800;
}
.svh-inicio .svh-nota { font-size: 14px; line-height: 1.5; color: var(--svh-texto); margin: 0 0 8px; }
.svh-inicio .svh-nota:last-child { margin-bottom: 0; }
.svh-inicio .svh-nota--incluido {
  padding: 11px 12px; background: var(--svh-perso-fondo); border: 1px solid var(--svh-perso-borde); border-radius: 12px;
}
.svh-inicio .svh-nota--incluido strong {
  display: inline-flex; margin: 0 4px 2px 0; padding: 3px 9px; border-radius: 999px;
  background: #fff; color: var(--svh-perso); border: 1px solid var(--svh-perso-borde); white-space: nowrap;
}
.svh-inicio .svh-nota--dtf { margin-top: 10px; padding: 9px 0 9px 12px; border-left: 3px solid var(--svh-accion); }
.svh-inicio .svh-personaliza__acciones { display: grid; gap: 4px; justify-items: center; margin-top: 14px; }
.svh-inicio .svh-personaliza__acciones .svh-boton { width: 100%; }

/* ===================== Promociones (fila que avanza sola) ===================== */
.svh-inicio .svh-promos { background: var(--svh-fondo); overflow: hidden; }
.svh-inicio .svh-promos__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 24px; margin-bottom: 8px; }
.svh-inicio .svh-promos__cabeza .svh-entrada { margin-bottom: 4px; }
/* Título "Promociones" con la pastilla verde al lado (baja sola si no cabe). */
.svh-inicio .svh-promos__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; }
.svh-inicio .svh-promos__titulo .svh-h2 { margin: 0; }
.svh-inicio .svh-pastilla-promo {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 11px; white-space: nowrap;
  background: var(--svh-promo-fondo); border: 1px solid var(--svh-promo-borde); border-radius: 999px;
  color: var(--svh-promo-texto); font-size: 13.5px; font-weight: 800; line-height: 1.3;
}
.svh-inicio .svh-promos__marco { position: relative; }
/* La fila va a todo el ancho y se alinea con el contenido de la página. */
.svh-inicio .svh-carrusel {
  --svh-borde-fila: 16px;
  position: relative; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--svh-borde-fila);
  padding: 6px var(--svh-borde-fila) 16px; scrollbar-width: none;
}
.svh-inicio .svh-carrusel::-webkit-scrollbar { display: none; }
.svh-inicio .svh-carrusel > li { display: flex; flex: 0 0 46%; min-width: 0; scroll-snap-align: start; }
.svh-inicio .svh-carrusel.svh-auto, .svh-inicio .svh-carrusel.svh-arrastrando { scroll-snap-type: none; }
.svh-inicio .svh-carrusel.svh-arrastrando { cursor: grabbing; user-select: none; }
.svh-inicio .svh-carrusel.svh-arrastrando .svh-card { transform: none; }
@media (hover: hover) and (pointer: fine) { .svh-inicio .svh-carrusel { cursor: grab; } }
/* Tarjetas compactas en Promociones: casi cuadradas (foto 1:1 + ~110 px de texto), sin huecos. */
.svh-inicio .svh-carrusel .svh-card { padding: 6px; }
.svh-inicio .svh-carrusel .svh-card__cuerpo { padding: 8px 2px 0; }
.svh-inicio .svh-carrusel .svh-card__nombre {
  display: block; margin: 0 0 4px; font-size: 14px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset;
}
.svh-inicio .svh-carrusel .svh-insignia {
  top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 3px 8px; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svh-inicio .svh-carrusel .svh-dcto { right: 6px; bottom: 6px; padding: 3px 8px; font-size: 11px; background: var(--svh-promo-texto); color: #fff; } /* el verde de ofertas */
/* Pastilleros: "🤫 Compartimiento secreto", pequeña y debajo de "Personalizado a láser gratis". */
.svh-inicio .svh-carrusel .svh-secreto { margin: 0 0 4px; padding: 1px 6px; font-size: 10.5px; border-radius: 8px; }
.svh-inicio .svh-carrusel .svh-incluido { margin: 0 0 4px; padding: 2px 6px; font-size: 10.5px; letter-spacing: -.02em; max-width: 100%; white-space: normal; text-wrap: balance; line-height: 1.25; border-radius: 7px; } /* en 2 líneas si no cabe; nunca cortada */
.svh-inicio .svh-carrusel .svh-precio { margin: 2px 0 0; gap: 0 6px; }
.svh-inicio .svh-carrusel .svh-precio__ahora { font-size: 16px; }
.svh-inicio .svh-carrusel .svh-precio__antes { flex-basis: auto; font-size: 12px; }
.svh-inicio .svh-carrusel .svh-variedad { margin: 1px 0 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* En Promociones no se dice cuántos colores hay. */
.svh-inicio .svh-carrusel .svh-variedad { display: none; }
/* Promo de un solo color: pastilla verde antes del precio. */
.svh-inicio .svh-promo-color {
  display: inline-block; align-self: flex-start; margin: 0 0 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px;
  background: var(--svh-promo-fondo); border: 1px solid var(--svh-promo-borde); color: var(--svh-promo-texto);
  font-size: 11px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svh-inicio .svh-carrusel .svh-card__boton { margin-top: auto; min-height: 40px; font-size: 15px; }
/* El botón queda abajo, con al menos 8 px de aire sobre él. */
.svh-inicio .svh-carrusel .svh-card__cuerpo > :nth-last-child(2) { margin-bottom: 8px; }
/* Con más de 6 promociones van dos filas que se mueven en sentidos opuestos. */
.svh-inicio .svh-carrusel + .svh-carrusel { padding-top: 0; }

.svh-inicio .svh-flecha {
  display: none; position: absolute; top: calc(50% - 22px); z-index: 3; width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center; border-radius: 50%;
  background: #fff; border: 1px solid var(--svh-borde); box-shadow: var(--svh-sombra-alta);
  color: var(--svh-marino-hondo); font-family: var(--svh-titulos); font-size: 26px; line-height: 1; cursor: pointer;
}
.svh-inicio .svh-flecha[hidden] { display: none !important; }
.svh-inicio .svh-flecha:hover { border-color: var(--svh-accion); color: var(--svh-enlace); }
.svh-inicio .svh-flecha:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 2px; }

/* ===================== Así quedan personalizados (slider de fotos) ===================== */
.svh-inicio .svh-galeria { background: var(--svh-fondo); }
.svh-inicio .svh-galeria__pista {
  position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 14px; background: var(--svh-foto); box-shadow: var(--svh-sombra);
}
.svh-inicio .svh-galeria__pista::-webkit-scrollbar { display: none; }
.svh-inicio .svh-galeria__pista.svh-arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .svh-inicio .svh-galeria__pista { cursor: grab; } }
.svh-inicio .svh-galeria__pista > li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.svh-inicio .svh-galeria__pista img { width: 100%; height: auto; aspect-ratio: 1024 / 520; object-fit: cover; }
.svh-inicio .svh-galeria__pc { display: none; }
.svh-inicio .svh-galeria__pc .svh-galeria__pista img { aspect-ratio: 1024 / 388; }
.svh-inicio .svh-puntos { display: flex; justify-content: center; gap: 2px; margin-top: 8px; }
.svh-inicio .svh-puntos button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.svh-inicio .svh-puntos button:not(.svh-pausa)::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: #c9d1dc;
  transition: width .25s ease, background-color .25s ease;
}
.svh-inicio .svh-puntos button[aria-current="true"]::before { width: 22px; background: var(--svh-marino); }
.svh-inicio .svh-puntos button:focus-visible { outline: 3px solid var(--svh-foco); outline-offset: 0; border-radius: 8px; }

/* ===================== 6 · Los más lindos ===================== */
.svh-inicio .svh-lindos { background: var(--svh-blanco); }
.svh-inicio .svh-linea-final { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }

/* ===================== 7 · Compra tranquilo ===================== */
.svh-inicio .svh-confianza { background: var(--svh-celeste); }
.svh-inicio .svh-garantias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 32px; }
.svh-inicio .svh-garantia { background: #fff; border: 1px solid var(--svh-borde); border-radius: 14px; box-shadow: var(--svh-sombra); padding: 14px 12px; }
.svh-inicio .svh-garantia__ico {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--svh-info-fondo); border: 1px solid var(--svh-info-borde); font-size: 20px; margin-bottom: 10px;
}
.svh-inicio .svh-garantia h3 { font-family: var(--svh-titulos); font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--svh-marino-hondo); margin: 0 0 4px; }
.svh-inicio .svh-garantia p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--svh-texto-suave); }
.svh-inicio .svh-pagos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.svh-inicio .svh-pagos img { height: 18px; width: auto; }
.svh-inicio .svh-pagos img.svh-pagos--addi { height: 20px; }
.svh-inicio .svh-pagos img.svh-pagos--siste { height: 12px; }
.svh-inicio .svh-h2--sub { font-size: 20px; }
.svh-inicio .svh-testimonios { display: grid; gap: 12px; margin: 0 0 8px; }
.svh-inicio .svh-testimonios > li { display: flex; }
.svh-inicio .svh-testimonios .svh-testimonio { width: 100%; }
.svh-inicio .svh-testimonio {
  position: relative; display: flex; flex-direction: column; margin: 0; padding: 26px 18px 16px;
  background: #fff; border: 1px solid var(--svh-borde); border-radius: 14px; box-shadow: var(--svh-sombra);
}
/* Comillas grandes de adorno */
.svh-inicio .svh-testimonio::before {
  content: "\201C"; position: absolute; top: 2px; left: 14px;
  font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 1; color: var(--svh-accion); opacity: .22;
}
.svh-inicio .svh-testimonio blockquote { position: relative; margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--svh-texto); border: 0; padding: 0; }
.svh-inicio .svh-testimonio__pie { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.svh-inicio .svh-testimonio__foto {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: var(--svh-foto); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--svh-info-borde);
}
.svh-inicio .svh-testimonio__foto img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--svh-av-pos, 50% 30%); transform: scale(var(--svh-av-zoom, 1)); transform-origin: var(--svh-av-pos, 50% 30%);
}
.svh-inicio .svh-testimonio__pie strong { display: block; font-size: 15.5px; line-height: 1.25; color: var(--svh-marino-hondo); }
.svh-inicio .svh-testimonio__pie small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--svh-texto-suave); }
.svh-inicio .svh-ig { margin: 0 0 24px; font-size: 15px; }
.svh-inicio .svh-marcas__titulo { font-size: 13px; font-weight: 700; color: var(--svh-texto-suave); margin: 0 0 10px; }
.svh-inicio .svh-marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.svh-inicio .svh-pildora {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; background: #fff; border: 1px solid var(--svh-borde);
  font-family: var(--svh-titulos); font-weight: 700; font-size: 14px; color: var(--svh-marino-hondo); text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.svh-inicio .svh-pildora:hover { border-color: var(--svh-accion); color: var(--svh-enlace); text-decoration: none; }

/* ===================== 8 · Cierre ===================== */
.svh-inicio .svh-cierre { background: var(--svh-blanco); padding-bottom: 96px; }
.svh-inicio .svh-cierre__caja { max-width: 960px; margin: 0 auto; text-align: center; }
.svh-inicio .svh-eco {
  display: grid; gap: 18px; align-items: center; min-width: 0; margin: 0 0 32px; padding: 24px 20px;
  overflow: hidden; border: 1px solid var(--svh-eco-borde); border-radius: 18px;
  background: linear-gradient(135deg, var(--svh-eco-fondo) 0%, var(--svh-info-fondo) 100%);
  box-shadow: 0 14px 34px rgba(14,43,77,.10); text-align: center;
}
.svh-inicio .svh-eco__visual { min-width: 0; }
.svh-inicio .svh-eco__ilustracion { display: block; width: min(100%, 520px); height: auto; margin: 0 auto; }
.svh-inicio .svh-eco__contenido { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.svh-inicio .svh-eco__pastilla {
  display: inline-flex; align-items: center; width: fit-content; margin: 0 0 10px; padding: 6px 12px;
  border: 1px solid var(--svh-eco-borde); border-radius: 999px; background: #e5f5ec;
  color: #197447; font-size: 13px; font-weight: 800; line-height: 1.3;
}
.svh-inicio .svh-eco__titulo {
  margin: 0 0 8px; color: var(--svh-marino); font-family: var(--svh-titulos); font-size: 27px;
  font-weight: 800; letter-spacing: -.025em; line-height: 1.16;
}
.svh-inicio .svh-eco__texto { max-width: 34rem; color: var(--svh-texto); font-size: 16px; line-height: 1.5; }
.svh-inicio .svh-cierre__consulta { max-width: 640px; margin: 0 auto; }
.svh-inicio .svh-cierre .svh-entrada { margin-bottom: 18px; }
.svh-inicio .svh-eco__hoja, .svh-inicio .svh-eco__brillo { transform-box: fill-box; transform-origin: center; }
.svh-inicio .svh-eco__hoja { animation: svh-eco-hoja 4.8s ease-in-out infinite; }
.svh-inicio .svh-eco__hoja--dos { animation-delay: -2.1s; }
.svh-inicio .svh-eco__brillo { animation: svh-eco-brillo 3.8s ease-in-out infinite; }
@keyframes svh-eco-hoja {
  0%, 100% { transform: translate3d(0,0,0) rotate(-1deg); }
  50% { transform: translate3d(0,-5px,0) rotate(3deg); }
}
@keyframes svh-eco-brillo {
  0%, 30%, 100% { opacity: .28; transform: scale(.9); }
  48%, 62% { opacity: 1; transform: scale(1.06); }
}

/* ===================== Animación de aparición =====================
   El estado oculto solo existe si el script de arriba de las secciones le pone
   "svh-anima" a .svh-inicio. Sin JS o con "reducir movimiento", todo se ve quieto. */
.svh-inicio.svh-anima .svh-r {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(8px);
  transition: opacity .6s ease-out, transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease-out;
  transition-delay: var(--svh-d, 0ms);
}
.svh-inicio.svh-anima .svh-r.svh-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .svh-inicio.svh-anima .svh-r { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .svh-inicio .svh-cabeza.svh-in .svh-perso-titulo::after { animation: none !important; opacity: 0 !important; }
  .svh-inicio .svh-eco__hoja, .svh-inicio .svh-eco__brillo { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ===================== Tableta (700 px en adelante) ===================== */
@media (min-width: 700px) {
  .svh-inicio .svh-mayor { aspect-ratio: 16 / 9; }
  .svh-inicio .svh-contenedor { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .svh-inicio .svh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .svh-inicio .svh-perso-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .svh-inicio .svh-eco { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; padding: 28px 32px; text-align: left; }
  .svh-inicio .svh-eco__contenido { align-items: flex-start; }
  .svh-inicio .svh-eco__titulo { font-size: 29px; }
  .svh-inicio .svh-eco__texto { font-size: 17px; }
  .svh-inicio .svh-garantias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svh-inicio .svh-testimonios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svh-inicio .svh-cats-fila { --svh-borde-fila: max(24px, calc((100% - 1152px) / 2)); gap: 12px; }
  .svh-inicio .svh-cats-fila > li { flex: 1 1 0; min-width: 0; }
  .svh-inicio .svh-carril > li { margin-right: 20px; }
  .svh-inicio .svh-carrusel { --svh-borde-fila: max(24px, calc((100% - 1152px) / 2)); gap: 16px; }
  .svh-inicio .svh-carrusel > li { flex-basis: calc((100% - 32px) / 3.3); }
  .svh-inicio .svh-galeria__cel { display: none; }
  .svh-inicio .svh-galeria__pc { display: block; }
  .svh-inicio .svh-muro { gap: 16px; }
  .svh-inicio .svh-empresas__panel { padding: 28px; }
  .svh-inicio .svh-lista { grid-template-columns: 1fr 1fr; }

  /* Portada en dos columnas desde tableta */
  .svh-inicio .svh-portada__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-rows: 1fr 1fr; column-gap: 32px;
    grid-template-areas: "titulo ver" "resto ver"; min-height: 560px; padding-top: 40px; padding-bottom: 40px;
  }
  .svh-inicio .svh-portada__titulo { align-self: end; margin: 0; padding: 0 0 12px; background: none; }
  .svh-inicio .svh-portada__resto { align-self: start; margin: 0; padding: 0; background: none; }
  .svh-inicio .svh-portada__resto::before { display: none; }
  .svh-inicio .svh-portada__nota { text-align: left; }
  /* La foto ocupa la mitad derecha y se funde con el marino hacia el texto. */
  .svh-inicio .svh-portada__media { left: 50%; }
  .svh-inicio .svh-portada__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--svh-marino) 0%, rgba(29,48,85,.55) 12%, rgba(29,48,85,0) 30%);
  }
  .svh-inicio .svh-portada__foto {
    top: 0; bottom: 0; height: 100%; aspect-ratio: auto; transform: none; object-position: 50% 88%;
    -webkit-mask-image: none; mask-image: none;
  }
  /* "Ver video" sobre la foto, por encima del letrero "LA GUAJIRA". */
  .svh-inicio .svh-portada__ver { align-items: flex-start; padding: clamp(24px, 14vh, 140px) 0 0; }
  .svh-inicio .svh-h1 { font-size: 30px; }
  .svh-inicio .svh-chips { display: flex; margin: 16px 0 0; }
}

/* ===================== PC (1000 px en adelante) ===================== */
@media (min-width: 1000px) {
  .svh-inicio { --svh-alto-encabezado: 76px; }
  .svh-inicio .svh-bloque, .svh-inicio .svh-vendidos { padding: 72px 0; }
  .svh-inicio .svh-h1 { font-size: 40px; }
  .svh-inicio .svh-h2 { font-size: 34px; margin-bottom: 8px; }
  .svh-inicio .svh-h2--sub { font-size: 26px; }
  .svh-inicio .svh-h3 { font-size: 22px; }
  .svh-inicio .svh-entrada { font-size: 18px; margin-bottom: 28px; }

  .svh-inicio .svh-portada__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 56px;
    min-height: clamp(540px, calc(100vh - var(--svh-alto-arriba) - 40px), 640px); padding-top: 48px; padding-bottom: 48px;
  }
  .svh-inicio .svh-portada__titulo { padding-bottom: 14px; }
  .svh-inicio .svh-portada__play { font-size: 17px; }
  .svh-inicio .svh-portada__play-circulo { width: 64px; height: 64px; }
  .svh-inicio .svh-portada__play-circulo svg { width: 26px; height: 26px; }
  .svh-inicio .svh-portada__botones { display: flex; flex-wrap: wrap; gap: 12px; }
  .svh-inicio .svh-chips { margin: 22px 0 0; }

  .svh-inicio .svh-categorias { padding: 28px 0 24px; }
  .svh-inicio .svh-h2--chico { font-size: 24px; }
  .svh-inicio .svh-categorias__nota { font-size: 15px; }
  .svh-inicio .svh-cats-fila { gap: 20px; }
  .svh-inicio .svh-cat { padding: 8px 18px 8px 8px; gap: 14px; }
  .svh-inicio .svh-cat__foto { flex-basis: 60px; width: 60px; height: 60px; border-radius: 12px; }
  .svh-inicio .svh-cat__nombre { font-size: 18px; }

  .svh-inicio .svh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .svh-inicio .svh-card { padding: 10px; }
  .svh-inicio .svh-card__nombre { font-size: 16px; }
  .svh-inicio .svh-precio__ahora { font-size: 20px; }
  .svh-inicio .svh-precio__antes { font-size: 14px; flex-basis: auto; }
  .svh-inicio .svh-insignia { font-size: 12.5px; }
  .svh-inicio .svh-complemento { max-width: 620px; margin: 24px auto 0; }

  .svh-inicio .svh-empresas__cabeza { margin-bottom: 20px; }
  .svh-inicio .svh-empresas__cabeza p { font-size: 17px; }
  .svh-inicio .svh-empresas__panel {
    margin-top: 40px; padding: 32px 36px;
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px 40px; align-items: center;
  }
  .svh-inicio .svh-empresas__panel .svh-lista { margin: 0; }
  .svh-inicio .svh-boton--ancho-cel { width: auto; }

  .svh-inicio .svh-perso-galeria { gap: 20px; margin: 8px 0 42px; padding: 12px 10px 18px; }
  .svh-inicio .svh-personaliza__grid { grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 28px; align-items: start; }
  .svh-inicio .svh-caja-perso { padding: 28px 30px; }
  .svh-inicio .svh-pasos li { font-size: 16.5px; }
  .svh-inicio .svh-nota { font-size: 15px; }
  .svh-inicio .svh-personaliza__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
  .svh-inicio .svh-personaliza__acciones .svh-boton { width: auto; }
  .svh-inicio .svh-grid--uno .svh-card { grid-template-columns: 46% minmax(0, 1fr); column-gap: 20px; padding: 14px; }
  .svh-inicio .svh-grid--uno .svh-card__foto { aspect-ratio: 1 / 1; min-height: 0; align-self: start; }
  .svh-inicio .svh-grid--uno .svh-card__cuerpo { padding: 4px 4px 0; }
  .svh-inicio .svh-grid--uno .svh-card__nombre { font-size: 18px; }
  /* La columna del Pit 12 llega hasta abajo: la foto al por mayor ocupa lo que sobra. */
  .svh-inicio .svh-personaliza__lado { align-self: stretch; grid-template-rows: auto minmax(190px, 1fr); }
  .svh-inicio .svh-mayor { aspect-ratio: auto; height: 100%; }
  .svh-inicio .svh-eco { gap: 48px; padding: 34px 44px; border-radius: 20px; }
  .svh-inicio .svh-eco__titulo { font-size: 32px; }
  .svh-inicio .svh-eco__texto { font-size: 18px; }

  .svh-inicio .svh-grid--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

  .svh-inicio .svh-carrusel { gap: 20px; }
  .svh-inicio .svh-carrusel > li { flex-basis: calc((100% - 60px) / 4); }
  .svh-inicio .svh-flecha { display: flex; }
  .svh-inicio .svh-flecha--ant { left: max(4px, calc((100% - 1152px) / 2 - 22px)); }
  .svh-inicio .svh-flecha--sig { right: max(4px, calc((100% - 1152px) / 2 - 22px)); }

  .svh-inicio .svh-garantias { gap: 20px; margin-bottom: 48px; }
  .svh-inicio .svh-garantia { padding: 20px 18px; }
  .svh-inicio .svh-garantia h3 { font-size: 17px; }
  .svh-inicio .svh-garantia p { font-size: 14.5px; }
  .svh-inicio .svh-testimonios { gap: 20px; }
  .svh-inicio .svh-testimonio { padding: 30px 24px 20px; }

  .svh-inicio .svh-cierre { padding-bottom: 88px; }
}

/* ===================== Botón de pausa (WCAG 2.2.2) =====================
   Pequeño y discreto, junto al título del bloque o junto a los puntos del slider. */
.svh-inicio .svh-pausa {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: auto; padding: 0; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--svh-borde); color: var(--svh-marino-hondo); opacity: .8;
  transition: opacity .2s ease, border-color .2s ease;
}
.svh-inicio .svh-pausa svg { width: 12px; height: 12px; }
.svh-inicio .svh-pausa:hover { opacity: 1; border-color: var(--svh-accion); }
.svh-inicio .svh-pausa:focus-visible { opacity: 1; outline: 3px solid var(--svh-foco); outline-offset: 2px; }
.svh-inicio .svh-pausa[aria-pressed="true"] { opacity: 1; background: var(--svh-celeste); }
.svh-inicio .svh-puntos .svh-pausa { width: 28px; height: 28px; margin-left: 6px; background: #fff; border: 1px solid var(--svh-borde); border-radius: 50%; }
.svh-inicio .svh-puntos .svh-pausa[aria-pressed="true"] { background: var(--svh-celeste); }
/* Zona de toque de 44 px sin cambiar cómo se ven: el botón de pausa (32 px, o 28 px junto a
   los puntos) y los puntos del slider (28 px) reciben el toque también un poco por fuera. */
.svh-inicio .svh-pausa, .svh-inicio .svh-puntos button { position: relative; }
.svh-inicio .svh-pausa::after { content: ""; position: absolute; inset: -6px; }
.svh-inicio .svh-puntos .svh-pausa::after { inset: -8px -8px -8px -5px; }
.svh-inicio .svh-puntos button:not(.svh-pausa)::after { content: ""; position: absolute; inset: -8px 0; }

/* ---------- Defensa contra el CSS propio de la tienda ----------
   El CSS de la tienda (Diseño › CSS) pinta h1, h2 y h3 de #0e2b4d, con peso 800 y letras
   juntas, todo con !important: el título de la portada y "Regalos con el logo de tu empresa"
   quedaban azul sobre azul. Cada título del inicio recupera aquí su color y su peso (también
   con !important; gana por ser más específico). */
.svh-inicio .svh-h2, .svh-inicio .svh-h3, .svh-inicio .svh-card__nombre { color: var(--svh-marino-hondo) !important; }
.svh-inicio .svh-h3, .svh-inicio .svh-card__nombre { font-weight: 700 !important; letter-spacing: normal !important; }
.svh-inicio .svh-eco__titulo { color: var(--svh-marino) !important; letter-spacing: -.025em !important; }
.svh-inicio .svh-h1, .svh-inicio .svh-empresas__panel .svh-h3 { color: #fff !important; }

/* ===================== Estados (2026-10-14) =====================
   Botones: hover (PC) sube 1 px; presionado se hunde; deshabilitado gris y quieto, para que
   nunca se confunda con el hover. Cargando: tarjetas esqueleto con brillo mientras llegan los
   productos del CRM (svh-inicio.js las pone y las quita). */
.svh-inicio .svh-boton { transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; }
@media (hover: hover) { .svh-inicio .svh-boton:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-1px); } }
.svh-inicio .svh-boton:not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(.97); box-shadow: inset 0 3px 8px rgba(8,30,60,.22); transition-duration: .06s;
}
.svh-inicio .svh-boton--accion:not(:disabled):active { background: #11528a; }
.svh-inicio .svh-boton--wa:not(:disabled):active { background: #1aa64f; }
.svh-inicio .svh-boton:disabled, .svh-inicio .svh-boton[aria-disabled="true"],
.sv-vacio__boton:disabled {
  background: #e7ecf2 !important; border-color: #e7ecf2 !important; color: #7d8a9c !important;
  box-shadow: none !important; transform: none !important; cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) { .svh-inicio .svh-boton { transition: none; } .svh-inicio .svh-boton:active { transform: none; } }

.svh-inicio .svh-esqueleto { display: flex; min-width: 0; }
.svh-inicio .svh-card--esqueleto { pointer-events: none; box-shadow: none; }
.svh-inicio .svh-esq-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 12px 4px 4px; }
.svh-inicio .svh-esq {
  border-radius: 8px;
  background: linear-gradient(100deg, #edf1f5 30%, #f8fafc 50%, #edf1f5 70%) 0 0 / 300% 100%;
  animation: svh-esq-brillo 1.3s ease-in-out infinite;
}
.svh-inicio .svh-esq--foto { aspect-ratio: 1 / 1; border-radius: 12px; }
.svh-inicio .svh-esq--linea { height: 14px; margin-bottom: 8px; }
.svh-inicio .svh-esq--corta { width: 60%; }
.svh-inicio .svh-esq--precio { width: 42%; height: 20px; margin: 6px 0 14px; }
.svh-inicio .svh-esq--boton { height: 40px; margin-top: auto; border-radius: 10px; }
.svh-inicio .svh-grid--uno .svh-esq-cuerpo { padding-top: 4px; }
@keyframes svh-esq-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .svh-inicio .svh-esq { animation: none; } }