/* Soluciones · SMD como la Apple Store (28-10-2026): la página de la familia y la de cada etapa (soluciones-familias.js, TIENDA).
   Viene de la muestra que aprobó David (muestras/smd-store, v4 del 27-10, y v5 del 28-10 con sus decisiones). Va encima de
   piel-b.css (letra Inter, colores de Bwit) y de soluciones-familias.css (el deslizador «¿Cuánto produces?»).
   Las medidas son las de apple.com/es/store, tomadas con el navegador a 1440 y a 390 px el 27-10: margen de 140 px (22 en el
   móvil), titular de 80, tarjetas de 400 × 500 y 313 × 500 (309 × 450 en el móvil) separadas 20 px, radio de 18, títulos de fila
   en dos tonos a 28 px y flechas redondas de 56 px. Fondo gris con tarjetas blancas, como Apple (David, 27-10): los renders traen
   su fondo gris claro y se funden con la tarjeta por los bordes con una máscara (la máquina no se toca).
   Sin animación al pasar el ratón por las tarjetas (David, 27-10) y sin transición entre páginas (David, 28-10). */
.st{
  --st-borde:max(22px,calc((100% - 1160px) / 2));   /* Apple: 140 px a 1440 (contenido de 1160) y 22 px en el móvil */
  --st-tarjeta:#fff;
  --st-ojo:#5E6E81;
  background:var(--b-gris);
}

/* ---------- La firma, arriba (como la banda fina de Apple encima de la cabecera) ---------- */
.st .st-firma{--b-pt:64px;--b-pb:0px}   /* la web le pone 104 px arriba y abajo */
.st-firma .b-ojo{margin:0}

/* ---------- Cabecera: el titular a la izquierda y la ayuda a la derecha ---------- */
.st-cab{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:48px var(--st-borde) 0;background:var(--b-gris)}
.st-cab-izq{flex:1 1 auto;min-width:0}
.st-h1{margin:0;font-size:80px;line-height:84px;font-weight:600;letter-spacing:-.015em;color:var(--tinta)}
.st-cab-sub{margin:10px 0 0;font-size:17px;line-height:1.47;color:var(--gris)}
.st-cab-sub span{white-space:nowrap}
.st-cab-der{flex:0 0 auto;text-align:right}
.st-cab-der .st-ayuda-enl{font-size:17px;line-height:25px}   /* v3: un solo enlace, «Habla con nosotros ›» */
.st-ayuda{margin:0;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.007em;color:var(--tinta);text-wrap:balance}
.st-ayuda-enl{margin:0;font-size:14px;line-height:20px;letter-spacing:-.016em}
.st-ayuda + .st-ayuda-enl{margin-top:16px}
.st-ayuda-enl + .st-ayuda-enl{margin-top:8px}
.st-ayuda-enl a{color:var(--azul);text-decoration:none}
.st-ayuda-enl a:hover{text-decoration:underline}

/* ---------- Carril: una fila que se desliza de lado (la tira de etapas y las filas de tarjetas) ---------- */
.st-carril{position:relative}
.st-lista{display:flex;gap:20px;margin:0;padding:16px var(--st-borde) 40px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--st-borde);scrollbar-width:none}
.st-lista::-webkit-scrollbar{display:none}
.st-item{flex:none;scroll-snap-align:start}
/* Flechas: círculos de 56 px a los lados, a media altura de las tarjetas; la de atrás no sale hasta que hay algo detrás */
.st-flechas{position:absolute;inset:16px 0 40px;pointer-events:none}
.st-flechas button{position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;padding:0;border:0;border-radius:50%;
  background:rgba(210,215,222,.64);color:rgba(21,40,61,.56);cursor:pointer;pointer-events:auto;transition:opacity .2s,background-color .2s;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.st-flechas button:hover{background:rgba(205,211,219,.86);color:rgba(21,40,61,.72)}
.st-flechas button:disabled{opacity:0;pointer-events:none}
.st-flechas svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.st-ant{left:24px}.st-sig{right:18px}
.st-flechas button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* ---------- La tira de etapas (como la de Mac, iPhone, iPad…): icono de 120 × 78 y nombre debajo ---------- */
.st-tira{background:var(--b-gris);padding:30px 0 22px}
.st-tira .st-lista{gap:0;padding-top:0;padding-bottom:0;padding-inline:calc(var(--st-borde) - 13px);scroll-snap-type:x mandatory}
.st-tira .st-flechas{inset:0}
.st-etapa{display:flex;flex-direction:column;align-items:center;width:146px;padding:18px 0 14px;color:var(--tinta);text-decoration:none}
.st-etapa img{display:block;width:120px;height:78px;object-fit:contain}
.st-etapa span{margin-top:16px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.016em;text-align:center}
.st-etapa:hover span{text-decoration:underline}
.st-etapa[aria-current] span{color:var(--azul)}
.st-etapa[aria-current]{position:relative}
.st-etapa:focus-visible{outline:2px solid var(--azul);outline-offset:-2px;border-radius:12px}
.st-etapa[aria-current]::after{content:"";position:absolute;left:50%;bottom:4px;width:24px;height:2px;margin-left:-12px;border-radius:2px;background:var(--azul)}

/* ---------- Cabecera de una etapa: su icono 3D (llega volando desde la fila de etapas) encima del titular ---------- */
.st-cab-ico{display:block;width:128px;height:128px;margin:0 0 6px -6px;object-fit:contain}
.st-cab-nombre{display:inline-block}

/* ---------- Filas de tarjetas: título en dos tonos (28 px) y tarjetas de 500 px de alto ---------- */
.st-fila,.st-cuanto{padding-top:67px;scroll-margin-top:var(--b-menu)}
.st-tira + .st-fila{padding-top:48px}
.st-fila-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;margin:0 0 8px;padding:0 var(--st-borde)}
.st-ver{font-size:17px;line-height:25px;color:var(--azul);text-decoration:none;white-space:nowrap}
.st-ver:hover{text-decoration:underline}
.st-h2{margin:0;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.007em;color:var(--tinta)}
.st-gris{color:var(--gris)}
.st-tarjeta{position:relative;display:flex;flex-direction:column;height:500px;box-sizing:border-box;border-radius:18px;overflow:hidden;
  background:var(--st-tarjeta);box-shadow:2px 4px 12px rgba(0,0,0,.08);color:var(--tinta);text-decoration:none}
.st-tarjeta:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.st-t-texto{display:flex;flex-direction:column;padding:28px 28px 0}
.st-ojo{font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em;color:var(--st-ojo)}
.st-t-titulo{margin-top:8px;font-size:28px;line-height:32px;font-weight:600;letter-spacing:.007em}
.st-t-sub{margin-top:10px;font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.016em}
.st-t-foto{position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden}
.st-t-foto img{position:absolute;inset:16px 20px;width:calc(100% - 40px);height:calc(100% - 32px);object-fit:contain;mix-blend-mode:multiply}
.st-t-foto img.st-render{inset:0 0 auto;width:100%;height:109%;object-fit:cover;object-position:50% 70%;mix-blend-mode:normal;
  /* Fundido: el fondo gris del render se va a blanco por los cuatro lados (solo hay fondo y sombra en los bordes) */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent 96%),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent 96%),linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.st-rec{position:absolute;right:16px;bottom:12px;font-size:13px;line-height:1;color:#4A5868}   /* R17: «Recreación 3D» que se lea */

/* Grande (400 × 500, «Lo último»): texto arriba, la máquina abajo */
.st-grande .st-tarjeta{width:400px}
/* Pequeña (313 × 500, «Accesorios»): la máquina arriba, y debajo el rótulo, el nombre y el dato */
.st-peq .st-tarjeta{width:313px}
.st-peq .st-t-foto{flex:0 0 300px}
.st-peq .st-t-texto{flex:1 1 auto;padding:22px 28px 28px}
.st-t-nombre{margin-top:6px;font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.022em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-t-dato{margin-top:auto;padding-top:12px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--gris)}

/* «Por qué con Bwit» (como «El Apple Store marca la diferencia», 480 de ancho). Sin foto: no hay ninguna posterior al 22-10 */
.st-ancha .st-tarjeta{width:480px;height:300px}
.st-ancha .st-t-titulo{font-size:28px}
.st-ancha .st-t-sub{font-size:17px;line-height:25px;font-weight:400;color:var(--gris);max-width:30em}
.st-t-enl{margin-top:auto;padding:0 28px 28px;font-size:17px;color:var(--azul)}

/* ---------- ¿Cuánto produces? El deslizador de Soluciones, en la página de cada etapa (v2) ---------- */
.st-nv{padding-top:0}
.st-nv .sol-fila{padding-top:0}
.st-nv .sol-nv{width:auto;margin:0 var(--st-borde);border-radius:18px;background:#fff;box-shadow:2px 4px 12px rgba(0,0,0,.08)}
.st-nv .sol-nv-panel{background:var(--b-gris)}   /* al revés que en la web: el recuadro blanco y «Te toca» en gris */
.st-nv .sol-tarjeta a:hover img{transform:none}   /* sin animación al pasar el ratón (27-10) */
.st-nv .sol-tarjeta a:hover .sol-ver{text-decoration:none}

/* ---------- «¿Cuánto produces?» v3: compacto. La caja (máquina en grande, datos con iconos) está en soluciones-familias.css ---------- */
.st-nv .sol-nv{padding:36px 32px 32px}
.st-nv .sol-nv-cab{margin:0}
.st-nv .sol-nv-res{margin-top:20px}
.st-nv .st-panel{--pp:28px;padding:var(--pp);border-radius:18px;background:var(--b-gris)}   /* la caja (soluciones-familias.css), al revés: recuadro blanco y panel gris */
/* ---------- Sin flechas con el dedo ni en pantallas estrechas (como Apple) ---------- */
@media (hover:none),(max-width:734px){.st-flechas{display:none}}

/* ---------- Móvil (Apple a 390 px): titular de 48, tarjetas de 309 × 450, borde de 22 ---------- */
@media (max-width:734px){
  .st .st-firma{--b-pt:64px}
  .st-cab{display:block;padding-top:24px}
  .st-cab-izq{padding-top:0}
  .st-h1{font-size:48px;line-height:52px;letter-spacing:-.003em}
  .st-cab-der{margin-top:18px;text-align:left}
  .st-ayuda{font-size:21px;line-height:25px}
  .st-ayuda + .st-ayuda-enl{margin-top:20px}
  .st-ayuda-enl + .st-ayuda-enl{margin-top:12px}
  .st-tira{padding:24px 0 16px}
  .st-tira .st-lista{gap:10px;padding-inline:22px;scroll-snap-type:none}
  .st-etapa{width:100px;padding:16px 0 12px}
  .st-etapa img{width:92px;height:60px}
  .st-etapa span{margin-top:14px}
  .st-fila,.st-cuanto{padding-top:49px}
  .st-h2{font-size:24px;line-height:28px;letter-spacing:.009em}
  .st-cab-ico{width:96px;height:96px}
  .st-nv .sol-nv{padding:28px 16px 16px}
  .st-nv .st-panel{--pp:16px}
    .st-lista{scroll-snap-type:none}
  .st-grande .st-tarjeta,.st-peq .st-tarjeta{width:309px;height:450px}
  .st-peq .st-t-foto{flex-basis:260px}
  .st-t-texto{padding:24px 24px 0}
  .st-peq .st-t-texto{padding:20px 24px 24px}
  .st-t-titulo{font-size:24px;line-height:28px}
  .st-ancha .st-tarjeta{width:309px;height:300px}
  .st-ancha .st-t-titulo{font-size:21px;line-height:25px}
  .st-t-enl{padding:0 24px 24px}
      .st-nv .sol-nv{margin:0 16px}
  /* Las paradas del deslizador, más pequeñas: a 390 px «Semiautomática» y «Automática en línea» se pisaban */
  .st-nv .sol-nv-paradas button{padding:6px 2px}
  .st-nv .sol-nv-paradas b{font-size:14px;line-height:1.2;letter-spacing:-.02em}
  .st-nv .sol-nv-paradas span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.st-flechas button{transition:none}}

/* ==================== Menos huecos (David, 27-10: «eliminar huecos») ====================
   A 1440 × 900 se ve de entrada la fila de etapas y el arranque de la fila siguiente. En la página de una etapa, el icono va a la
   izquierda del titular, en la misma línea. */
.st .st-firma{--b-pt:40px}
.st-cab{padding-top:14px}
.st-h1{font-size:72px;line-height:76px}
.st-cab-sub{margin-top:4px}
.st-cab-con-ico{display:flex;align-items:center;gap:20px}
.st-cab-con-ico .st-cab-ico{width:104px;height:104px;margin:0;flex:none}
.st-tira{padding:14px 0 6px}
.st-etapa{padding:10px 0 10px}
.st-etapa span{margin-top:10px}
.st-fila,.st-cuanto{padding-top:40px}
.st-tira + .st-fila,.st-tira + .st-cuanto{padding-top:24px}
.st-lista{padding-top:12px;padding-bottom:28px}
.st-flechas{inset:12px 0 28px}
.st-nv .sol-nv{padding-top:26px}
.st-nv .sol-nv-escena{height:220px}
.st-pq{padding-bottom:48px}
.st > :last-child.st-fila{padding-bottom:40px}
@media (max-width:734px){
  .st .st-firma{--b-pt:40px}
  .st-cab{padding-top:8px}
  .st-h1{font-size:44px;line-height:48px}
  .st-cab-der{margin-top:10px}
  .st-cab-con-ico{gap:12px}
  .st-cab-con-ico .st-cab-ico{width:72px;height:72px}
  .st-tira{padding:10px 0 4px}
  .st-fila,.st-cuanto{padding-top:32px}
  .st-tira + .st-fila,.st-tira + .st-cuanto{padding-top:16px}
  .st-nv .sol-nv-escena{height:170px}
}

/* ==================== «Novedades» y «Por qué con Bwit» (David, 28-10) ====================
   «Novedades» en lugar de «Las estrellas»: cada tarjeta lleva el rótulo «Novedad» (David, 28-10; antes «Nuevo», como Apple), a 12/16 px, peso 600 y en su
   naranja (#B64400 = rgb(182, 68, 0), el color de «NUEVO» en apple.com/es/store, medido el 27-10). La marca y la etapa van
   abajo, donde Apple pone el precio. */
/* (el rótulo, .st-nuevo, en soluciones-familias.css: también lo llevan la AOI dual y BomX) */
.st-t-pie{margin-top:8px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--gris)}
/* «Por qué con Bwit»: tres tarjetas con títulos largos (las frases de David), en dos líneas */
.st-pq .st-t-titulo{text-wrap:balance}

/* Sin el cierre «¿Ya sabes qué máquina buscas?» de soluciones.html: la muestra aprobada no lo lleva (David quitó también los
   «Enlaces rápidos», 27-10). La página acaba en «Por qué con Bwit». */
#soluciones:has(> .st) ~ .sol-cierre{display:none}