/* ==================================================================
   web.css — Web publica de PixeliaCom (pixeliacomsoluciones.es)
   Marca: #0B8478 teal · #0F8043 verde · #002454 azul noche
   Industrial y sobrio: radio max 6px, sin degradados, sin emojis.
   ================================================================== */

/* Los nombres se quedan por compatibilidad con las reglas de abajo, pero los
   valores salen de la paleta "papel" compartida (componentes.css): el color de
   accion de la web publica ya no es azul, es el teal de marca. El azul solo
   sobrevive dentro de las capturas de los sistemas. */
:root {
  --azul: var(--px-teal);
  --azul-osc: var(--px-teal-o);
  --verde: var(--px-teal);
  --noche: #002454;
  --wa: #25D366;
  --gris-1: #E9F1ED;
  --gris-2: var(--px-linea);
  --gris-borde: #D3E3DC;
  --gris-txt: #5F6D6A;
  --gris-suave: #8A9793;
  --ambar: #b76e00;
  --radio: 6px;
  --cont: 1320px;
  --sombra: 0 1px 2px rgba(16,33,64,.06);
  --sombra-m: 0 4px 14px rgba(16,33,64,.10);
}

/* ------------------------------------------------------------------
   Adorno del fondo. Fijo a la ventana: acompana al bajar sin tener que
   recolocarlo por secciones, y al ir detras de todo (z-index 0 contra el
   contenido, que sube a 1) nunca tapa ni intercepta nada.
   ------------------------------------------------------------------ */
.w-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.w-deco-mancha { position: absolute; border-radius: 50%; }
.w-deco-mancha-1 { width: 48vw; height: 48vw; max-width: 620px; max-height: 620px;
                   right: -8%; top: 4%;
                   background: radial-gradient(circle at 50% 50%, rgba(215,237,228,.55) 0%, rgba(215,237,228,0) 70%); }
.w-deco-mancha-2 { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
                   left: -10%; bottom: -12%;
                   background: radial-gradient(circle at 50% 50%, rgba(215,237,228,.45) 0%, rgba(215,237,228,0) 72%); }
/* OJO: aqui NO se toca .px-top. Ya viene posicionada por su variante
   (sticky en papel, absolute cuando flota) y con z-index 60; ponerle
   position:relative desde esta hoja, que carga despues, le quitaba el
   sticky y la cabecera se iba al bajar. */
main, .px-pie { position: relative; z-index: 1; }
@media (max-width: 900px) { .w-deco { display: none; } }

* { box-sizing: border-box; }
/* El mismo carril reservado que en estilo.css, y por la misma razon: si no, el
   contenido centrado salta unos pixeles entre una pagina corta y una larga.
   Va repetido aqui porque la web publica NO carga estilo.css.
   Y con el, su barra: aqui no habia ninguna regla de scrollbar, asi que
   reservar el carril a secas dejaria pintada la franja gris del sistema en
   toda pagina corta. Se estiliza SOLO la de la pagina (`html`), no la de los
   carruseles, que la esconden a proposito. */
html { scroll-behavior: smooth; overflow-y: scroll;
       scrollbar-width: thin; scrollbar-color: var(--px-linea) transparent; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--px-linea); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: var(--px-teal-cl); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--px-texto);
  color: var(--noche);
  background: var(--px-papel);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
/* Los atributos width/height del HTML (que evitan el salto de maquetado al cargar)
   fijan el alto e ignoran la proporcion. Con height:auto vuelve a mandar el CSS. */
img { height: auto; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { font-family: var(--px-titular); font-weight: 400; line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.005em; }
h3 { font-family: var(--px-texto); line-height: 1.3; margin: 0 0 .4em; }
h1 { font-size: clamp(33px, 4.4vw, 50px); }
h2 { font-size: clamp(23px, 2.5vw, 30px); }
/* Titulo de una pagina de listado (catalogo, resultados): manda menos que un
   titular de portada, pero sigue siendo el h1 de la pagina. */
.w-tit-pag { font-size: clamp(27px, 3.2vw, 37px); }
/* Subtitulo dentro de una columna estrecha (la ficha de un sistema). */
.w-sub { font-size: clamp(21px, 2.1vw, 25px); margin-top: 30px; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 1em; }

.w-cont { max-width: var(--cont); margin: 0 auto; padding: 0 20px; }
/* El enlace de saltar solo aparece al enfocarlo, y entonces cae sobre blanco:
   se le fija el color en vez de dejarlo al del enlace, que hereda del fondo. */
.salta { position: absolute; left: -9999px; }
.salta:focus { left: 8px; top: 8px; background: #fff; color: var(--px-noche, #002454); padding: 10px 14px; z-index: 100; border-radius: var(--radio); font-weight: 600; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* Cabecera, marca, nav y pie: viven en componentes.css (compartidos). */

/* ---------------- Hero ---------------- */
.w-hero { background: var(--gris-1); border-bottom: 1px solid var(--gris-2); padding: 52px 0 44px; }
.w-hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 42px; align-items: center; }
.w-hero h1 { margin-bottom: 14px; }
.w-hero p.lead { font-size: 17px; color: var(--gris-txt); margin-bottom: 22px; max-width: 46ch; }
.w-hero-acc { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.w-hero-svg { border: 1px solid var(--gris-2); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra-m); overflow: hidden; display: block; }
.w-hero-svg img { display: block; width: 100%; }

.w-sellos { display: flex; gap: 20px; flex-wrap: wrap; }
.w-sello { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gris-txt); }
.w-sello .ico { color: var(--verde); flex-shrink: 0; }

/* ---------------- Botones ---------------- */
.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14.5px; font-weight: 700; padding: 12px 20px; border-radius: var(--radio); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.w-btn:hover { text-decoration: none; }
.w-btn-1 { background: var(--azul); color: #fff; }
.w-btn-1:hover { background: var(--azul-osc); }
.w-btn-2 { background: #fff; color: var(--noche); border-color: var(--gris-borde); }
.w-btn-2:hover { border-color: var(--azul); color: var(--azul); }
/* Mismo caso que .btn-wsp en el panel: el verde de marca de WhatsApp con
   blanco encima da 1.98:1. Se oscurece; el icono ya lo identifica. */
.w-btn-3 { background: #188741; color: #fff; }
.w-btn-3:hover { filter: brightness(.94); }
.w-btn-full { width: 100%; }

/* ---------------- Secciones ---------------- */
.w-sec { padding: 52px 0; }
.w-sec-gris { background: #E9F1ED; border-top: 1px solid var(--gris-2); border-bottom: 1px solid var(--gris-2); }
.w-sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.w-sec-cab p { color: var(--gris-txt); margin: 4px 0 0; max-width: 62ch; }

/* ---------------- Tarjetas de sistema ---------------- */
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 20px; }
.w-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gris-2); border-radius: 14px; overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .12s; }
.w-card:hover { border-color: var(--azul); box-shadow: var(--sombra-m); transform: translateY(-2px); }
.w-card-img { display: block; background: var(--gris-1); border-bottom: 1px solid var(--gris-2); position: relative; }
.w-card-img img { display: block; width: 100%; aspect-ratio: 8/5; object-fit: cover; object-position: top left; }
.w-card-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.w-card-cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--verde); }
.w-card-tit { font-size: 16.5px; font-weight: 700; color: var(--noche); margin: 0; }
.w-card-tit a { color: inherit; }
.w-card-txt { font-size: 13.5px; color: var(--gris-txt); margin: 0; flex: 1; }
.w-card-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 4px; }
.w-precio { display: flex; align-items: baseline; gap: 5px; }
.w-precio-n { font-size: 24px; font-weight: 700; color: var(--noche); letter-spacing: -.02em; }
.w-precio-t { font-size: 12px; color: var(--px-text-muted, #63707B); }
.w-card-inc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--px-precio); font-weight: 700; }
.w-etq { position: absolute; top: 12px; left: 12px; background: var(--px-teal); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 99px; letter-spacing: .02em; }
.w-etq-demo { position: absolute; top: 10px; right: 10px; background: rgba(0,36,84,.88); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 4px; }

/* ==================================================================
   FICHA DE UN SISTEMA (sistema.php)
   Cabecera con la captura y la tarjeta de compra a la derecha, y debajo
   las secciones a todo el ancho. El radio aqui sube a 14px: es la cara
   comercial y pide una forma mas amable que las tablas de Norte.
   ================================================================== */
.w-miga { font-size: 13px; color: var(--gris-suave); padding: 14px 0 12px;
          display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w-miga a { color: var(--px-teal-o); }
.w-miga span { color: var(--gris-suave); }
.w-miga .sep { color: #b9c6c2; }

/* Aqui solo queda la piel de la captura. Quien la coloca y quien decide su
   alto es el bloque de la ficha, al final del fichero. El "align-self: start"
   que tenia y el "400px" fijo de la segunda columna eran justo las dos lineas
   que hacian imposible la simetria que se pidio. */
.w-ficha-img { border-radius: 14px; overflow: hidden; background: #fff;
               box-shadow: 0 14px 32px rgba(0, 36, 84, .10), 0 2px 6px rgba(0, 36, 84, .06); }
.w-ficha-img img { display: block; width: 100%; }
.w-ficha h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.03; margin: 5px 0 10px; }
.w-ficha-cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .09em; color: var(--px-teal-o); }
.w-ficha-desc { font-size: 15px; line-height: 1.5; color: var(--gris-txt); margin: 0; max-width: 70ch; }

/* ---------------- Tarjeta de compra ---------------- */
/* OJO: aqui NO va "position: sticky". Lo tuvo y estaba mal de dos maneras:
   1) pegando solo .w-compra, al bajar la tarjeta se deslizaba encima del bloque
      de formas de pago que va debajo en la misma columna, y lo tapaba entero;
   2) pegando la columna entera (~806px de alto), en un portatil de 768px el
      final del bloque de pagos no habia forma de verlo.
   Desde que la ficha va en dos filas ya NO cabe entera en una ventana: es el
   precio de que la tarjeta empiece a la altura de las funcionalidades en vez
   de subirse al hueco que dejaba el titular. Lo que si se cumple, que es lo
   que vende, es que el precio y el boton de comprar se ven sin desplazar. */
.w-compra { border: 1px solid var(--gris-2); border-radius: 16px; padding: 24px; background: #fff;
            box-shadow: 0 14px 36px rgba(0, 36, 84, .07); }
.w-compra-precio { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.w-compra-precio .n { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1;
                      color: var(--noche); }
.w-compra-precio .t { font-size: 15px; color: var(--gris-txt); }
.w-compra-nota { font-size: 14px; color: var(--gris-txt); margin: 0 0 20px; }
.w-lista { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.w-lista li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--gris-txt);
              line-height: 1.45; }
.w-lista .ico { color: var(--px-teal-o); flex-shrink: 0; margin-top: 1px; }
.w-lista b { color: var(--noche); font-weight: 700; }
.w-compra .w-btn { margin-bottom: 9px; border-radius: 10px; padding: 13px 18px; font-size: 14.5px; }
.w-compra-legal { font-size: 12px; color: var(--gris-suave); margin: 16px 0 0; text-align: center; }

/* ---------------- Formas de pago (debajo de la tarjeta de compra) ----------- */
/* El relleno lateral tiene que ser el MISMO que el de .w-compra (24px): con 20
   los logos y el boton quedaban 4px corridos respecto a los botones de arriba. */
/* Sin margen propio: la separacion la pone ahora el row-gap de la ficha. Con
   margen, esta caja arrancaria 14px mas abajo que "Como lo recibes" y el borde
   superior de la fila 2 dejaria de coincidir. */
.w-pago { border: 1px solid var(--gris-2); border-radius: 16px;
          padding: 20px 24px 22px; background: #fff;
          box-shadow: 0 8px 24px rgba(0, 36, 84, .05); }
.w-pago-tit { display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
              font-family: var(--px-texto); font-size: 13px; font-weight: 700;
              text-transform: uppercase; letter-spacing: .07em; color: var(--noche); }
.w-pago-tit .ico { color: var(--px-teal-o); }
/* Cinco huecos del mismo tamano: se rellenan con los logos que haya puestos en
   el panel, y los que sobran no se pintan. */
/* --huecos lo pone el PHP con cuantos logos hay (1 a 5): asi tres logos ocupan
   el ancho entero en vez de quedarse chicos en la esquina. */
.w-pago-logos { list-style: none; margin: 0; padding: 0;
                display: grid; grid-template-columns: repeat(var(--huecos, 5), 1fr); gap: 8px; }
.w-pago-logos li { aspect-ratio: 1; border: 1px solid var(--gris-2); border-radius: 10px;
                   background: #fff; display: grid; place-items: center; padding: 6px; }
.w-pago-logos img { max-width: 100%; max-height: 100%; object-fit: contain; }
.w-pago-nota { font-size: 12.5px; line-height: 1.45; color: var(--gris-txt); margin: 12px 0 0; }
.w-pago .w-btn { margin-top: 12px; border-radius: 10px; padding: 12px 16px; font-size: 14px; }

/* ---------------- Titulos de seccion, con su rotulo dibujado ---------------- */
.w-tit-sec { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.w-tit-sec h2 { margin: 0; font-size: clamp(21px, 2vw, 26px); }
.w-tit-sec .chispa { color: var(--px-teal-cl); flex-shrink: 0; opacity: .9; }
.w-tit-sec--raya { display: block; }
.w-tit-sec--raya h2 { display: inline-block; padding-bottom: 8px;
                      border-bottom: 2px solid var(--px-teal); }
.w-sec-sub { font-size: 14.5px; color: var(--gris-txt); margin: -14px 0 24px; }

/* ---------------- Que trae este sistema ---------------- */
/* Una sola columna: la lista corre en vertical al lado de la captura. Cada
   tarjeta es una fila (icono, texto, visto), que es lo que la deja baja
   para que las cinco quepan junto a la imagen. */
.w-incluye { display: grid; grid-template-columns: 1fr; gap: 8px; }
.w-inc { display: flex; align-items: center; gap: 11px;
         border: 1px solid var(--gris-2); border-radius: 12px;
         padding: 9px 12px; background: #fff; }
.w-inc-ico { width: 32px; height: 32px; border-radius: 50%; background: #E4F1EC;
             color: var(--px-teal-o); display: grid; place-items: center; flex-shrink: 0; }
.w-inc-txt { min-width: 0; }
.w-inc h3 { font-size: 14px; line-height: 1.25; margin: 0; color: var(--noche); }
.w-inc p { font-size: 12px; line-height: 1.35; color: var(--gris-txt); margin: 2px 0 0;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* El visto de la esquina dice "esto viene incluido", no es un boton. */
/* line-height 0: si no, el span mide mas que el icono y este no queda donde dice. */
.w-inc-si { display: block; line-height: 0; margin-left: auto; align-self: center;
            color: var(--px-teal); flex-shrink: 0; }

/* ---------------- Como lo recibes ---------------- */
.w-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
           gap: 20px; position: relative; }
.w-paso { position: relative; display: block; background: #fff; border: 1px solid var(--gris-2);
          border-radius: 14px; padding: 15px 16px 13px; }
.w-paso-n { position: absolute; top: -15px; left: 22px;
            width: 32px; height: 32px; border-radius: 50%; background: var(--px-teal); color: #fff;
            font-size: 14px; font-weight: 700; display: grid; place-items: center;
            border: 3px solid var(--px-papel); }
.w-paso-ico { width: 34px; height: 34px; border-radius: 50%; background: #E4F1EC;
              color: var(--px-teal-o); display: grid; place-items: center; margin: 2px 0 9px; }
.w-paso h3 { font-size: 15px; margin: 0 0 4px; color: var(--noche); }
.w-paso p { font-size: 12.5px; line-height: 1.4; color: var(--gris-txt); margin: 0; }
/* Rayita de puntos que enlaza un paso con el siguiente. Se dibuja con un borde
   y se apaga en la ultima tarjeta y cuando los pasos se apilan. */
.w-paso::after { content: ""; position: absolute; top: 50%; left: 100%; width: 30px;
                 border-top: 2px dashed var(--px-teal-cl); }
.w-paso:last-child::after { display: none; }

/* ---------------- Aviso de alcance ---------------- */
.w-nota { display: flex; gap: 16px; align-items: flex-start; background: #FFF8EC;
          border: 1px solid #F3D9A4; color: #6B4A12; border-radius: 14px;
          padding: 12px 15px; font-size: 13px; line-height: 1.45; margin-top: 12px; }
.w-nota .ico { flex-shrink: 0; color: #C08019; margin-top: 2px; }
.w-nota b { color: #4A3208; }

/* ==================================================================
   FICHA - dos filas y, en cada fila, dos contenedores
   La simetria no se calcula: la rejilla estira los dos elementos de una
   misma fila a la misma altura (align-items: stretch, que es lo de serie).
   Lo unico que habia que hacer era meter la tarjeta de compra en la MISMA
   fila que las funcionalidades; antes era un aside suelto en la columna 2.

   Y lo de dentro no mira el ancho de la ventana, mira el de SU bloque
   (container-type + @container). Por eso a 1024 la ficha sigue a dos
   columnas en vez de apilarse y estirar las tarjetas a 969px de ancho.

   OJO al medir: una consulta de contenedor se resuelve contra el CUADRO DE
   CONTENIDO del contenedor. Por eso container-type va en envoltorios SIN
   relleno y nunca en .w-compra ni en .w-pago, que llevan 24px de relleno y
   1px de borde: ahi cada umbral se correria 50px.

   Y nunca "container-type: size" en vez de "inline-size": size contiene
   tambien el eje vertical, el alto dejaria de depender del contenido y las
   filas se quedarian en nada.
   ================================================================== */

/* Un elemento no puede consultar su propio contenedor: hace falta este
   envoltorio por encima para poder preguntar por el ancho de la ficha. */
.w-ficha-marco { container-type: inline-size; container-name: ficha; }

/* De movil hacia arriba: una columna, y el precio en el segundo puesto para
   que no acabe enterrado debajo de las funcionalidades, la captura, los
   pasos y el aviso. */
.w-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px;
           align-items: stretch; padding-bottom: 8px; }
.w-ficha-cab { margin: 0; order: 1; }
.w-bloque { min-width: 0; display: flex; flex-direction: column; }
.w-bloque--trae   { container-type: inline-size; container-name: trae;   order: 3; }
.w-bloque--compra { container-type: inline-size; container-name: compra; order: 2; }
.w-bloque--pasos  { container-type: inline-size; container-name: pasos;  order: 4; }
.w-bloque--pago   { container-type: inline-size; container-name: pago;   order: 5; }
.w-bloque .w-tit-sec { margin: 0 0 12px; }
.w-bloque--pasos .w-tit-sec { margin-bottom: 16px; }

/* La segunda columna es una fraccion con suelo, no 400px clavados: al encoger
   la ventana encogen las dos a la vez, en vez de dejar que la captura pague
   sola todo el ajuste (antes caia de 530 a 349 con la tarjeta fija en 400).
   El titular cruza las dos columnas: mientras vivio dentro de la izquierda,
   la tarjeta de compra arrancaba 156px mas arriba que las funcionalidades. */
@container ficha (min-width: 900px) {
  .w-ficha { grid-template-columns: minmax(0, 1fr) minmax(288px, .44fr);
             column-gap: 36px; row-gap: 28px; }
  .w-ficha-cab, .w-bloque { order: 0; }
  .w-ficha-cab { grid-column: 1 / -1; }
  /* Sin formas de pago configuradas, los pasos se quedan solos en la fila 2:
     que se lleven el ancho entero en vez de dejar el hueco. */
  .w-bloque--pasos:last-child { grid-column: 1 / -1; }
}

/* ---------------- FILA 1 - izquierda: que trae ---------------- */
/* Estrecho: la captura arriba a todo el ancho y las funcionalidades debajo,
   en tantas columnas como quepan. Asi dejan de estirarse a 969px de ancho
   para dos lineas de texto. */
.w-ficha-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr);
                  grid-template-rows: auto 1fr; gap: 16px; align-items: stretch; }
/* Sistemas sin captura o sin funcionalidades: lo que quede se lleva la fila Y
   la columna. Solo con grid-row se quedaria en el 40% y el resto en blanco. */
.w-ficha-cuerpo > :only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.w-ficha-func { min-width: 0; display: flex; flex-direction: column; }
/* El min(100%, 232px) es el suelo: sin el, un contenedor mas estrecho que 232
   dejaria la pista en 232 y sacaria desplazamiento horizontal. */
.w-bloque--trae .w-incluye { flex: 1; display: grid;
                             grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
                             grid-auto-rows: minmax(56px, 1fr); gap: 8px; }
.w-ficha-img { order: -1; align-self: stretch; margin: 0; padding: 0;
               display: flex; flex-direction: column; justify-content: center;
               gap: clamp(8px, 1cqw, 12px); min-width: 0; }

/* ---- Galeria del sistema ----
   El hueco que sobraba arriba y abajo de la captura (unos 90px por lado, ver la
   nota de .w-bloque--trae) es justo donde entra la tira de miniaturas. Ya no es
   pasepartu: es contenido.
   La vista se DESLIZA con scroll-snap. No hay carrusel de JavaScript a
   proposito: asi se puede pasar con el dedo, con la rueda o con el teclado, y
   sigue funcionando si el script no carga. Las miniaturas son anclas de toda la
   vida; el JS solo subraya cual esta delante. */
.w-gal-vista {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; border-radius: 12px;
  scrollbar-width: none;                 /* la barra sobra: estan las miniaturas */
  -webkit-overflow-scrolling: touch;
}
.w-gal-vista::-webkit-scrollbar { display: none; }
.w-gal-vista:focus-visible { outline: 2px solid var(--px-teal); outline-offset: 3px; }
.w-gal-hoja { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
/* La captura NO se estira para rellenar el alto: recortarla escondería justo
   la parte de abajo del panel, que es informacion util. El hueco que sobra se
   llena con CONTENIDO (el pie y las miniaturas), no deformando la imagen. */
.w-gal-hoja img { display: block; width: 100%; aspect-ratio: 8 / 5;
                  object-fit: cover; object-position: top center; border-radius: 12px; }
.w-gal-pie { margin: 8px 2px 0; font-size: clamp(12px, 1.5cqw, 13.5px);
             line-height: 1.4; color: var(--px-noche); opacity: .72; text-align: center; }

.w-gal-tiras { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
               scrollbar-width: thin; }
.w-gal-tira {
  /* Se REPARTEN el ancho en vez de tener un tamano fijo: con pocas imagenes
     salen grandes (y entonces se ve de verdad que muestra cada una, que es
     para lo que sirve una miniatura) y de paso ocupan el hueco que sobraba
     debajo de la captura. El minimo evita que con muchas queden ilegibles: a
     partir de ahi la tira se desliza. */
  flex: 1 1 0; min-width: 64px; max-width: 190px;
  border-radius: 8px; overflow: hidden; display: block;
  border: 2px solid transparent; opacity: .55;
  transition: opacity .15s, border-color .15s;
}
.w-gal-tira img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
                  object-position: top center; }
.w-gal-tira:hover, .w-gal-tira:focus-visible { opacity: .85; }
.w-gal-tira.es-actual { opacity: 1; border-color: var(--px-teal); }
.w-gal-tira:focus-visible { outline: 2px solid var(--px-teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .w-gal-vista { scroll-behavior: auto; }
  .w-gal-tira { transition: none; }
}

/* Con las tarjetas en varias columnas el texto no cabe en dos lineas y se
   corta con puntos suspensivos: ahi se le da una linea mas. */
@container trae (max-width: 799.98px) { .w-bloque--trae .w-inc p { -webkit-line-clamp: 3; } }

/* Ancho: la lista en vertical y la captura al lado. */
@container trae (min-width: 800px) {
  /* .34/.66 y no mitad y mitad: la captura es 8:5 y nunca llega a lo alto que
     marca la tarjeta de compra, asi que cuanto mas ancha, menos pasepartu le
     queda arriba y abajo. Con .40 sobraban 108px por lado; con .34, unos 90. */
  .w-ficha-cuerpo { grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
                    grid-template-rows: minmax(0, 1fr); gap: 20px; }
  .w-ficha-img { order: 0; align-self: stretch; padding: 14px; }
  .w-ficha-img img { border-radius: 8px; border: 1px solid var(--gris-2); }
  .w-bloque--trae .w-incluye { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- FILA 1 - derecha: la compra ---------------- */
/* Los botones se anclan abajo con margin-top:auto: cuando la tarjeta es la
   corta de la fila el hueco cae entre los puntos y los botones, que es donde
   menos se nota; cuando es la larga, el auto no hace nada. Se guarda en UN
   hueco a proposito: repartirlo entre los puntos se ve bien con seis y fatal
   con dos, y esos puntos los edita cualquiera desde el panel. */
.w-bloque--compra .w-compra { flex: 1; display: flex; flex-direction: column; }
.w-compra-acc { margin-top: auto; display: flex; flex-direction: column; }
.w-compra-acc .w-btn { margin-bottom: 9px; }
.w-compra-legal { margin: 12px 0 0; }

@container compra (max-width: 320px) {
  .w-bloque--compra .w-compra { padding: 18px; }
  .w-bloque--compra .w-compra-precio .n { font-size: 36px; }
}
/* Apilada, la tarjeta se queda de 700 y pico: ahi un precio de 46px con un
   boton de 700 debajo queda ridiculo, asi que se parte en dos. */
@container compra (min-width: 640px) {
  .w-bloque--compra .w-compra { display: grid; align-content: start; column-gap: 30px;
                                grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
                                grid-template-areas: "cifra acc" "lista acc"; }
  .w-compra-cifra { grid-area: cifra; }
  .w-bloque--compra .w-lista { grid-area: lista; margin-bottom: 0; }
  .w-compra-acc { grid-area: acc; margin-top: 0; align-self: start; }
}

/* ---------------- FILA 2 - izquierda: como lo recibes ---------------- */
.w-bloque--pasos .w-pasos { flex: 1; grid-auto-rows: minmax(0, 1fr); }
.w-bloque--pasos .w-nota { margin-top: 14px; }
@container pasos (max-width: 619.98px) {
  .w-bloque--pasos .w-pasos { grid-template-columns: minmax(0, 1fr); }
  .w-bloque--pasos .w-paso::after { display: none; }
}
/* OJO con el :not(:last-child). Sin el, este selector empata en especificidad
   con .w-paso:last-child::after y, al ir despues, le devuelve la rayita al
   ultimo paso: se sale 30px por la derecha y saca desplazamiento horizontal. */
@container pasos (min-width: 620px) {
  .w-bloque--pasos .w-pasos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .w-bloque--pasos .w-paso:not(:last-child)::after { display: block; }
}

/* ---------------- FILA 2 - derecha: formas de pago ---------------- */
.w-bloque--pago .w-pago { flex: 1; margin-top: 0; display: flex; flex-direction: column; }
.w-pago-pie { margin-top: auto; }
.w-pago-nota { margin: 12px 0 0; }
/* Los huecos son cuadrados (aspect-ratio: 1). En una tarjeta de 700px, cinco
   huecos a 1fr serian cinco cuadrados de 130px: aqui se les pone techo. */
@container pago (min-width: 520px) {
  .w-bloque--pago .w-pago-logos { grid-template-columns: repeat(var(--huecos, 5), minmax(0, 84px));
                                  justify-content: start; }
}
@container pago (min-width: 560px) {
  .w-bloque--pago .w-pago { display: grid; align-content: start; column-gap: 28px;
                            grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
                            grid-template-areas: "tit acc" "logos acc"; }
  .w-pago-tit { grid-area: tit; }
  .w-bloque--pago .w-pago-logos { grid-area: logos; align-self: start; }
  .w-pago-pie { grid-area: acc; margin-top: 0; }
  .w-pago-nota { margin-top: 0; }
}

/* ==================================================================
   PAGINAS LEGALES (privacidad, terminos, cookies)
   Dos contenedores, igual que la ficha: el indice a la izquierda y el
   texto a la derecha. El indice se queda pegado al bajar porque aqui SI
   cabe (es corto) y en un documento largo es justo lo que hace falta.
   ================================================================== */
.w-legal { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
           gap: clamp(20px, 3vw, 44px); align-items: start; padding: 4px 0 40px; }
.w-legal-lado { position: sticky; top: 96px; }
.w-legal-caja { border: 1px solid var(--gris-2); border-radius: 16px; padding: 18px 20px 20px;
                background: #fff; box-shadow: 0 8px 24px rgba(0, 36, 84, .05); }
.w-legal-fecha { margin: 0 0 14px; font-size: 12.5px; color: var(--gris-suave); }
.w-legal-idx-tit { margin: 0 0 9px; font-family: var(--px-texto); font-size: 12px; font-weight: 700;
                   text-transform: uppercase; letter-spacing: .07em; color: var(--noche); }
.w-legal-idx { margin: 0 0 20px; padding-left: 20px; font-size: 13px; line-height: 1.5;
               color: var(--gris-txt); display: flex; flex-direction: column; gap: 7px; }
.w-legal-idx a { color: var(--gris-txt); }
.w-legal-idx a:hover { color: var(--px-teal-o); }
.w-legal-otros { list-style: none; margin: 0; padding: 0;
                 display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.w-legal-otros a { display: flex; align-items: center; gap: 8px; color: var(--px-teal-o); }
.w-legal-otros .ico { flex-shrink: 0; }

.w-legal-texto { min-width: 0; max-width: 76ch; }
.w-legal-texto h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin: 0 0 22px; }
/* La serif no tiene negrita, asi que los apartados se distinguen por tamano y
   por la rayita, no por peso. */
.w-legal-texto h2 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2;
                    margin: 32px 0 10px; padding-top: 16px;
                    border-top: 1px solid var(--gris-2); scroll-margin-top: 110px; }
.w-legal-texto h2:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.w-legal-texto p { font-size: 15px; line-height: 1.62; color: var(--gris-txt); margin: 0 0 12px; }
.w-legal-texto ul { margin: 0 0 14px; padding-left: 20px;
                    display: flex; flex-direction: column; gap: 7px; }
.w-legal-texto li { font-size: 15px; line-height: 1.55; color: var(--gris-txt); }
.w-legal-texto b { color: var(--noche); font-weight: 700; }
.w-legal-vacio { border: 1px dashed var(--gris-2); border-radius: 12px; padding: 18px;
                 background: #fff; }
.w-legal-pie { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--gris-2);
               font-size: 13px; color: var(--gris-suave); }

@media (max-width: 900px) {
  .w-legal { grid-template-columns: 1fr; gap: 22px; }
  /* Apilado, un indice pegado taparia el texto al bajar. */
  .w-legal-lado { position: static; }
}

/* CTA final */
.w-cta { background: var(--noche); color: #fff; padding: 46px 0; }
.w-cta h2 { color: #fff; }
.w-cta p { color: rgba(255,255,255,.82); max-width: 58ch; margin-bottom: 20px; }
.w-cta .w-btn-2 { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.w-cta .w-btn-2:hover { border-color: #fff; color: #fff; }

/* Vacio */
.w-vacio { text-align: center; padding: 60px 20px; color: var(--gris-txt); }
.w-vacio .ico { color: var(--gris-suave); margin-bottom: 10px; }

/* ---------------- Responsive ---------------- */
/* Pantalla de escritorio BAJA (los 1366x768 de siempre). Aqui lo que manda es
   el ALTO de la captura, asi que se le pone tope: sigue siendo mucho mayor que
   antes, pero deja sitio a los pasos y al aviso. Por debajo de ~820px de alto
   la ficha ya no entra entera y la pagina se desplaza un poco; encogerlo mas
   dejaria la ficha apretada en las pantallas normales, que son la mayoria. */
@media (min-width: 1081px) and (max-height: 950px) {
  .w-miga { padding: 10px 0 8px; }
  .w-ficha h1 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 7px; }
  .w-ficha-desc { font-size: 14px; }
  .w-tit-sec { margin: 12px 0 9px; }
  .w-paso { padding-top: 13px; padding-bottom: 12px; }
  .w-nota { margin-top: 10px; padding: 10px 14px; }
}

/* Y un escalon mas para las pantallas de 768 de alto: la captura baja a 420px
   (sigue siendo el doble de la que habia antes) y se recorta el aire que queda.
   Por debajo de esto no se aprieta mas: la pagina se desplaza un poco y ya. */
@media (min-width: 1081px) and (max-height: 800px) {
  .w-ficha h1 { font-size: clamp(24px, 2.1vw, 30px); margin-bottom: 5px; }
  .w-ficha-desc { font-size: 13.5px; }
  .w-tit-sec { margin: 9px 0 7px; }
  .w-inc { padding-top: 8px; padding-bottom: 8px; }
  .w-paso { padding: 11px 14px 10px; }
  .w-nota { margin-top: 8px; padding: 9px 13px; font-size: 12.5px; }
  .w-miga { padding: 8px 0 6px; }
}

@media (max-width: 1080px) {
  .w-hero-in { grid-template-columns: 1fr; gap: 28px; }
  /* La rayita de puntos entre pasos no une nada cuando se apilan. Esto vale
     para los pasos de sistemas.php: los de la ficha los gobierna @container,
     y aquella regla lleva :not(:last-child), asi que gana a esta. */
  .w-paso::after { display: none; }
}
@media (max-width: 760px) {
  .w-sec { padding: 38px 0; }
  .w-hero { padding: 34px 0 30px; }
}

/* Navegadores sin consultas de contenedor: no leen ni una @container, asi que
   se quedarian con la columna unica del movil hasta en un monitor grande. Esto
   solo entra donde @container NO existe; en cualquier navegador actual la
   condicion es falsa y el bloque entero se ignora. */
@supports not (container-type: inline-size) {
  @media (min-width: 1081px) {
    .w-ficha { grid-template-columns: minmax(0, 1fr) minmax(288px, .44fr);
               column-gap: 36px; row-gap: 28px; }
    .w-ficha-cab, .w-bloque { order: 0; }
    .w-ficha-cab { grid-column: 1 / -1; }
    .w-bloque--pasos:last-child { grid-column: 1 / -1; }
    .w-ficha-cuerpo { grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
                      grid-template-rows: minmax(0, 1fr); gap: 20px; }
    .w-ficha-img { order: 0; align-self: stretch; padding: 14px; }
  }
}