/* ---------- Guías: superficie oscura ----------
   Cada sección de una guía declara su propio tono ('claro' u 'oscuro') en
   app.js; aquí solo se traduce ese tono a estilo. 'claro' es .prod-q tal
   cual, sin cambios. 'oscuro' agrega esta clase encima, en el MISMO
   elemento (class="prod-q prod-q-oscuro") — mismo radio, mismo padding,
   mismo margen que .prod-q, solo cambia superficie y color de texto.

   Contraste medido (fórmula WCAG, luminancia relativa) sobre el fondo
   --deep-2 (#0E4543): var(--stone) da 8.86:1, var(--glow) da 6.71:1.
   Ambos superan el mínimo de 4.5:1 con margen — no se usa --ink-mid
   sobre oscuro porque está diseñado para fondo claro, no se midió aquí
   y no hace falta: --stone ya cubre el texto secundario. */
.prod-q-oscuro{background:var(--deep-2);color:var(--stone)}
.prod-q-oscuro h2{color:var(--stone)}
.prod-q-oscuro p,.prod-q-oscuro li{color:var(--stone)}
.prod-q-oscuro p b,.prod-q-oscuro li b{color:var(--glow)}
/* Selector con combinador directo (> a), no "a" a secas: un paso de
   .guia-pasos puede traer, además de su propio texto, una rejilla de
   tarjetas de producto (.guia-tarjetas) anidada en el mismo <li> — sus
   enlaces .pcard deben conservar su estilo propio, no el de un enlace de
   texto. > a solo alcanza el enlace que está directamente en el texto
   del párrafo o del <li>, nunca el que vive un nivel más adentro. */
.prod-q-oscuro p>a,.prod-q-oscuro li>a{color:var(--glow);text-decoration:underline}
.prod-q-oscuro .guia-pasos li::marker{color:var(--glow)}

/* Tarjeta de producto sobre una sección OSCURA de guía (.prod-q-oscuro: el
   carrusel "Lo que se gasta cada mes", y cualquier otro bloque de guía en
   oscuro). El bloque de identidad (.pcard-id, css/08) comparte el verde
   oscuro de la sección y su mitad superior se funde con el fondo. Aquí —y
   solo aquí— se le da un filo claro y se aclara su fondo un paso (de --ink/
   --deep-2 a --deep-3, el verde más claro de la paleta) para que la tarjeta
   se lea como un objeto separado. No se toca .pcard-id en css/08 (categoría
   va sobre fondo claro y no lo necesita) ni la ficha; es un override acotado
   al contexto oscuro. --line-lt es la línea pensada para superficies oscuras;
   --glow sobre --deep-3 da 4.92:1 y --stone 6.5:1, ambos sobre 4.5:1. */
.prod-q-oscuro .pcard{border-color:var(--line-lt)}
.prod-q-oscuro .pcard-id{background:var(--deep-3)}

/* Bloque 'dos-columnas': texto a la izquierda, video o tarjetas a la
   derecha — declarado por el contenido (izquierda/derecha son listas de
   bloques normales, ver renderDosColumnas en app.js), no por el código.
   Une columna en móvil (texto primero, siempre en orden de documento) y
   dos en escritorio a partir de 900px, quiebre nuevo: ni 520 ni 880 le
   quedan cerca (a 880 el texto todavía se ve angosto para dos columnas).
   Reparto 58/42: el texto pesa más que el video o la rejilla de
   tarjetas. min-width:0 evita que un elemento ancho de la columna (la
   rejilla de tarjetas, sobre todo) empuje el grid a desbordar. */
.guia-2col{display:grid;grid-template-columns:1fr;gap:24px;margin:14px 0}
.guia-2col-izq,.guia-2col-der{min-width:0}
@media(min-width:900px){
  /* align-items:center (antes start): cuando el texto de una columna es más
     corto que la foto o las tarjetas de la otra —la entrada de una sola frase
     de compra-mensual, olor-cloro y agua-turbia— se centra en vertical junto a
     ella en vez de quedar pegado arriba dejando un hueco blanco debajo, al lado
     de la foto. En agua-verde las dos columnas ya son casi del mismo alto, así
     que el cambio es imperceptible ahí (se movió ~3px). */
  .guia-2col{grid-template-columns:58fr 42fr;align-items:center}
  /* Dentro de la columna derecha, las tarjetas van en una sola fila por
     renglón — "una debajo de otra" — no en la rejilla de 2/4 columnas
     que usa .guia-tarjetas en cualquier otro lugar de una guía. */
  .guia-2col-der .guia-tarjetas{grid-template-columns:1fr}
}

/* Hueco de video: temporal, sin <video> ni controles — para cuando el
   clip todavía no existe (ver renderVideo en app.js, rama sin `src`).
   Mismo radio de esquina que una tarjeta (.pcard/.card usan 5px) para
   que se sienta del mismo lenguaje visual, no una caja aparte. */
.guia-video-hueco{aspect-ratio:16/9;width:100%;background:var(--deep-2);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 20px}
.guia-video-hueco span{font-family:'IBM Plex Mono',monospace;font-size:13px;
  letter-spacing:.04em;color:var(--stone)}

/* Video real de una guía (renderVideo con `src`). Mismo 16:9 y mismo
   radio que el hueco de arriba — el reparto 58/42 de .guia-2col no
   cambia, el video sigue siendo "lo de la derecha". object-fit:cover
   porque el clip no viene exportado exactamente en 16:9 de origen. Sin
   controles nativos: más simple no declarar `controls` y dar el botón
   propio de abajo que intentar esconder controles nativos por navegador.
   La reproducción la maneja initVideos en app.js: arranca sola solo con
   >=50% visible, nunca con prefers-reduced-motion ni con
   navigator.connection.saveData. */
.guia-video{position:relative;aspect-ratio:16/9;width:100%;border-radius:5px;
  overflow:hidden;background:var(--deep-2)}
.guia-video-el{width:100%;height:100%;object-fit:cover;display:block}
/* Botón de pausa/reproducir: fondo rgba(10,36,34,.85) — mismo tono que
   --ink, con opacidad porque CSS no puede mezclar un var() con alfa sin
   color-mix(); .85 en vez del .75 que ya usa .pcard-tag porque aquí el
   video de fondo puede ser mucho más claro que una foto de producto
   (agua, luz) y con .75 el contraste bajaba justo al límite. Medido en
   el peor caso (fondo del botón sobre blanco puro, el video más claro
   posible): var(--glow) da 6.38:1 contra ese fondo — supera 4.5:1 con
   margen real, no al filo. */
.guia-video-btn{position:absolute;right:12px;bottom:12px;width:44px;height:44px;
  border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(10,36,34,.85);color:var(--glow)}
.guia-video-btn:hover{background:rgba(10,36,34,.95)}

/* Foto suelta de una guía (renderImagen en app.js) — mismo 16:9, mismo
   radio y mismo object-fit que .guia-video, para que las dos se sientan
   una pareja visual cuando quedan apiladas en la misma columna derecha
   de un 'dos-columnas' (ver GUIAS, tema agua-verde). */
.guia-imagen{aspect-ratio:16/9;width:100%;border-radius:5px;
  object-fit:cover;display:block;background:var(--deep-2)}
.guia-video+.guia-imagen{margin-top:16px}

/* Rejilla de tarjetas (producto o categoría) dentro de una guía: mismas
   tarjetas que categoria.html/el riel de home, con foto de categoría en
   vez del placeholder de agua (ver opciones.fotoCategoria en
   crearTarjetaProducto). 2 columnas siempre que no quepan 4 — hasta 4 en
   escritorio, nunca desborda porque .pcard/.card no llevan ancho fijo
   aquí, lo da la columna del grid. */
.guia-tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
/* A 2 columnas, un paso de .guia-pasos (con su padding-left de lista) le da
   a cada tarjeta ~11px menos que una rejilla suelta — con eso, "Kit de
   mantenimiento" partía la palabra "mantenimiento" por debajo de ~456px de
   ancho de pantalla (medido en navegador real, no en el DOM simulado).
   Bajar a 1 columna aquí, en vez de encoger la tarjeta o partir la palabra,
   reusa el quiebre de 520px que ya usan .guia-rangos y .prod-confirma. */
@media(max-width:520px){.guia-tarjetas{grid-template-columns:1fr}}
@media(min-width:880px){.guia-tarjetas{grid-template-columns:repeat(4,1fr)}}

/* .guia-tarjetas-fila: variante para renderFilaTarjetas — junta bloques
   'categorias'/'productos' que de otro modo dibujarían cada uno su
   propia rejilla, en una sola fila de columnas iguales. Sin uso hoy en
   agua-verde (esa fila pasó a fila-mixta, ver abajo, porque necesitaba
   una tarjeta 'faltante' mezclada) pero se queda: sigue siendo el
   camino correcto para una guía futura que junte solo categorias y
   productos, sin nada 'faltante' de por medio. */
.guia-tarjetas.guia-tarjetas-fila{grid-template-columns:repeat(3,1fr)}
@media(max-width:639px){.guia-tarjetas.guia-tarjetas-fila{grid-template-columns:1fr}}

/* .guia-tarjetas-mixta: variante para renderFilaMixta — misma idea que
   -fila de arriba pero para CUALQUIER combinación de tarjeta (incluida
   'faltante'), por eso es una clase aparte en vez de reusar -fila con
   otro número de columnas: si un día -fila se usa en otro lado con otro
   número de tarjetas, cambiarle las columnas aquí no la rompe. Mismo
   quiebre de 639px que ya usan -fila y .guia-cols-texto, 3 columnas
   ("Cuando el problema no es químico": filtros, motobombas, desnatador). */
.guia-tarjetas.guia-tarjetas-mixta{grid-template-columns:repeat(3,1fr)}
@media(max-width:639px){.guia-tarjetas.guia-tarjetas-mixta{grid-template-columns:1fr}}
/* La tarjeta 'faltante' no es una .pcard/.card: sin este ajuste se queda
   con su alto natural (mucho menor) mientras el grid estira su CAJA a
   la altura de la fila — el contenido se quedaba pegado arriba con un
   hueco vacío abajo. flex + justify-content:center lo centra dentro de
   esa altura ya estirada; el ancho ya es igual al de las demás porque
   todas comparten las mismas columnas de 1fr. Acotado a .guia-tarjetas-mixta:
   un 'faltante' fuera de una fila mixta (suelto en columnas-texto, por
   ejemplo) sigue con su alto natural, sin este centrado. */
.guia-tarjetas-mixta .guia-faltante{height:100%;display:flex;flex-direction:column;justify-content:center}

/* Bloque 'rangos': tarjetitas en vez de tabla — el rango como cifra
   grande es el dato que decide, el resto es contexto. Con `producto`
   (ver renderRangos en app.js) se agrega una 5ª celda con la tarjeta de
   producto real; repeat(5,minmax(0,1fr)) más el minmax(0,...) evita que
   esa tarjeta, más ancha por naturaleza, empuje al grid a desbordar.
   Los grid items se estiran a la altura de la fila por defecto (el
   producto, más alto, manda) — .guia-rango centra su contenido en vez
   de quedar pegado arriba, por eso el flex de abajo.

   Puntos de quiebre a mano, medidos en navegador real (no en el DOM
   simulado): <640px una columna; 640–1179px las 4 tarjetitas en 2×2 y
   el producto abajo, de ancho completo; >=1180px las 5 en una fila. */
.guia-rangos{display:grid;grid-template-columns:1fr;gap:16px;margin:16px 0}
@media(min-width:640px){
  .guia-rangos.guia-rangos-5{grid-template-columns:repeat(2,1fr)}
  .guia-rangos.guia-rangos-5 .guia-rango-producto{grid-column:1/-1}
}
@media(min-width:1180px){
  .guia-rangos.guia-rangos-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .guia-rangos.guia-rangos-5 .guia-rango-producto{grid-column:auto}
}
.guia-rango{border-radius:8px;padding:16px 18px;border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center}
.guia-rango-dato{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:4px}
/* valor: mono 500, 22px fijo (no clamp — a 5 columnas la celda ya achica
   sola, un tamaño fluido de más se sentía inconsistente entre celdas de
   distinto ancho). var(--glow) es el color en la superficie oscura de
   esta sección (.prod-q-oscuro más abajo); en una superficie clara
   hipotética quedaría --ink, igual que antes — no se midió ese caso
   porque hoy no existe (la única guía con `rangos` vive en oscuro). */
.guia-rango-n{display:block;font-family:'IBM Plex Mono',monospace;font-size:22px;
  font-weight:500;color:var(--ink);margin-bottom:4px}
.guia-rango-nota{display:block;font-size:13px;color:var(--ink-mid)}
/* border-color rgba(235,233,226,.18) explícito en el pedido — es
   exactamente var(--line-lt), no un color nuevo. Contraste ya medido en
   este mismo archivo (arriba): var(--glow) da 6.71:1 contra --deep-2,
   var(--stone) da 8.86:1 — ambos con margen sobre el mínimo de 4.5:1. */
.prod-q-oscuro .guia-rango{border-color:var(--line-lt)}
.prod-q-oscuro .guia-rango-dato,.prod-q-oscuro .guia-rango-nota{color:var(--stone)}
.prod-q-oscuro .guia-rango-n{color:var(--glow)}
/* Foto de la tarjeta del analizador, más baja que la de una tarjeta
   suelta (130px) para no desbalancear la fila de 5 — .pcard-img de
   categoria.html no se toca, esto es un override acotado a este lugar. */
.guia-rango-producto .pcard-img{height:90px}

/* Flujo de texto en dos columnas tipo periódico (bloque
   'columnas-texto' — Ruta A, Ruta B y "Cuando el problema no es
   químico"). break-inside:avoid en cada paso/párrafo/tarjeta 'faltante'
   para que una columna no corte a la mitad un bloque completo. */
.guia-cols-texto{column-count:2;column-gap:48px;margin:14px 0}
.guia-cols-texto .guia-pasos{margin:0}
.guia-cols-texto .guia-pasos li{break-inside:avoid;margin-bottom:14px}
.guia-cols-texto>p{break-inside:avoid}
.guia-cols-texto .guia-faltante{break-inside:avoid}
@media(max-width:639px){.guia-cols-texto{column-count:1}}

/* Texto justificado en toda guía: acotado con #guiaContent como
   ancestro, no con .prod-q a secas — .prod-q también arma las "tres
   preguntas" de producto.html, y esa página no lleva nada de esto
   (#guiaContent no existe ahí). p/li alcanza todo el texto de contenido
   de cualquier sección (son las etiquetas que usan parrafo/lista/pasos/
   faltante en app.js) sin tocar títulos (h1/h2), rótulos en mono (son
   <span>: PASO N, dato/valor/nota de rangos, contador del carrusel) ni
   nombre/precio de una tarjeta (h3/div) — ninguno de esos es <p> ni
   <li>, así que quedan fuera solos, sin necesidad de excepciones.
   text-align-last:left para que la ÚLTIMA línea de cada párrafo no se
   estire (así no lee raro un párrafo de una sola línea). hyphens:auto
   (con los prefijos -webkit-/-ms- por compatibilidad) corta palabras
   largas en vez de dejar un río de espacio — sobre todo se nota en las
   columnas angostas de Ruta A/B. Depende de que <html> declare idioma;
   ya lo hacía (lang="es-MX" en las 8 páginas), no hizo falta agregarlo. */
#guiaContent p,#guiaContent li{
  text-align:justify;text-align-last:left;
  -webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;
}
/* El justificado se ve mal en ventanas angostas, no solo en columnas de
   texto: con tres guías nuevas apareció en pasos y párrafos a ancho
   completo (no .guia-cols-texto) a 390px — "Clorant Shock, para la" en
   compra-mensual, con ríos de espacio igual de feos que los que ya se
   habían visto en columnas de Ruta A/B. 900px es el mismo quiebre de
   .guia-2col (dos-columnas se apila ahí): por debajo, todo el contenido
   de una guía es de una sola columna, angosta o a ancho completo, y el
   justificado deja de verse bien en cualquiera de las dos. Por eso ya no
   se acota a .guia-cols-texto como antes (esa regla angosta, calibrada
   solo entre 640 y 799px, se queda corta): esto cubre TODO #guiaContent.
   text-align-last y hyphens se quedan arriba, siguen evitando palabras
   largas sueltas aunque ya no esté justificado. */
@media(max-width:899px){
  #guiaContent p,#guiaContent li{text-align:left}
}

/* Carrusel de productos (bloque 'carrusel' — Ruta A). La pista se mueve
   con scrollBy (mismo mecanismo que el scroll a mano/dedo/rueda, no se
   pelean, igual criterio que la marquesina de marcas del bloque 2), los
   botones y el contador los calcula initCarrusel en app.js del ancho
   real de la tarjeta ya en pantalla. */
.guia-carrusel{margin-top:24px}
.guia-carrusel-cab{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:14px}
.guia-carrusel-rotulo{font-family:'IBM Plex Mono',monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mid)}
/* --ink-mid es para fondo claro (da 1.68:1 sobre --deep-2, no pasa). Dentro
   de .prod-q-oscuro (guías, carrusel oscuro) pasa a --stone: 8.86:1 sobre
   --deep-2, de sobra arriba de 4.5:1 — no hace falta bajarle opacidad.
   .guia-carrusel-contador no tiene regla propia (hereda el color de este
   rótulo como <span> hijo); se declara aparte para que quede explícito y
   no dependa de la herencia si algún día .guia-carrusel-contador gana su
   propia regla de color. */
.prod-q-oscuro .guia-carrusel-rotulo,.prod-q-oscuro .guia-carrusel-contador{color:var(--stone)}
.guia-carrusel-nav{display:flex;gap:8px;flex:0 0 auto}
.guia-carrusel-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color var(--t-fast) var(--ease)}
.guia-carrusel-btn:hover:not(:disabled){border-color:var(--glow-dk)}
.guia-carrusel-btn:disabled{opacity:.4;cursor:default}
/* El botón habilitado ya pasa sobre fondo oscuro sin tocarlo: fondo
   blanco opaco da 10.76:1 contra --deep-2 y el borde (var(--line) sobre
   ese blanco) da 8.29:1 — el círculo se distingue de sobra de la sección
   oscura, es la razón por la que esta regla no toca background ni
   border-color del estado habilitado. El roto es el deshabilitado:
   opacity:.4 difumina TODO el grupo (fondo+borde+ícono) hacia --deep-2 y
   deja el borde en 2.64:1 y el ícono casi invisible contra la página
   (1.20:1) — falla el ≥3:1 de componente. Dentro de .prod-q-oscuro se
   deshabilita sin opacity: el fondo blanco y el borde se quedan
   opacos (mismos 10.76:1 / 8.29:1 de arriba) y solo el ícono baja a
   --ink-mid (6.41:1 contra su propio fondo blanco) para leerse "apagado"
   sin perder el círculo de vista. */
.prod-q-oscuro .guia-carrusel-btn:disabled{opacity:1;color:var(--ink-mid)}
@media(max-width:639px){
  .guia-carrusel-cab{flex-direction:column;align-items:flex-start}
  .guia-carrusel-nav{align-self:flex-end}
}
.guia-carrusel-pista{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:2px}
.guia-carrusel-pista::-webkit-scrollbar{display:none}
.guia-carrusel-item{flex:0 0 250px;scroll-snap-align:start}
@media(max-width:639px){.guia-carrusel-item{flex:0 0 240px}}
.guia-carrusel-item .pcard-img{height:120px}
/* "PASO N": mono 600, en --glow-aa — el mismo verde de un precio
   confirmado (.pcard-price), sobre el blanco de .prod-q. Medido:
   6.18:1, supera 4.5:1 con margen. */
.guia-carrusel-paso{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.08em;color:var(--glow-aa);margin-bottom:6px}
/* --glow-aa es para fondo claro (da 1.74:1 sobre --deep-2, no pasa).
   Dentro de .prod-q-oscuro (carrusel sobre sección oscura) pasa a
   --glow, pensado para texto/acento sobre fondo oscuro: 6.71:1 contra
   --deep-2. */
.prod-q-oscuro .guia-carrusel-paso{color:var(--glow)}

/* Bloque 'faltante': producto que todavía no está en el catálogo. Borde
   punteado a propósito — se lee distinto a una tarjeta de compra real,
   nunca un botón muerto si no hay WhatsApp (whatsappUrl() en app.js). */
/* border-color var(--ink-mid): 6.41:1 contra blanco (fórmula WCAG,
   luminancia relativa) — supera el mínimo de 3:1 con margen. var(--line),
   pensado para separar superficies del mismo tono, casi no se veía sobre
   el blanco de .prod-q; --ink-mid ya es el texto secundario del sitio, no
   es un color nuevo. background:var(--stone) es lo que la hace leerse
   como tarjeta y no como una nota al pie. */
.guia-faltante{border-radius:6px;padding:16px 18px;margin-top:14px;
  background:var(--stone);border:1px dashed var(--ink-mid);color:var(--ink-mid)}
.guia-faltante b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;
  font-weight:700;color:var(--ink);margin-bottom:4px}
.guia-faltante p{font-size:13px;margin-bottom:0}
.guia-faltante a{display:inline-block;margin-top:6px;font-weight:600;color:var(--glow-aa);
  text-decoration:underline}
/* background:none explícito: sin esto, heredaría el var(--stone) que
   acabamos de agregar arriba para la superficie clara — aquí ya se veía
   bien tal como estaba (borde + texto sobre el --deep-2 de la sección,
   sin relleno propio) y no se toca. */
.prod-q-oscuro .guia-faltante{background:none;border-color:var(--line-lt);color:var(--stone)}
.prod-q-oscuro .guia-faltante b{color:var(--stone)}
.prod-q-oscuro .guia-faltante a{color:var(--glow)}

/* .prod-cta: el margen del botón de un bloque de guía (renderBloque, bloque de
   guías de app.js). Las demás clases de la ficha vieja que vivían aquí
   (.prod-quote, .prod-garantia, .prod-banda, .prod-hueco) se borraron con la
   maqueta nueva de producto.html (2026-10-14): su estilo vive ahora en
   09-producto.css con otros nombres (.prod-cita, .prod-war, .prod-note,
   .prod-aparte). .prod-cta se queda porque solo las guías la usan. */
.prod-cta{margin:18px 0}