/* ---------- Ficha de producto (producto.html) ---------- Maqueta nueva (2026-10-14): sin cajas, una sola columna de texto con líneas finas entre secciones; la imagen a la izquierda, fija al bajar y SIEMPRE completa (nunca más alta que la pantalla ni que el primer bloque de texto, nunca tapada por la cabecera). Reemplaza el acomodo viejo de tres tamaños (.prod-layout/.prod-side/.prod-volt/.prod-keyfact/.prod-confirma). OJO: las reglas .prod-q / .guia-pasos del final de este archivo son de las GUÍAS (guia.html), que reusan .prod-q como tarjeta/sección — no se tocan. */ /* El .wrap de la ficha pierde el tope de 1200px (igual que .mast/.foot), para que la imagen tenga aire a la izquierda y el texto se acote solo (.prod-col, 640px). Acotado a body.pg-prod .sec.sec-top .wrap para no tocar cabecera/pie ni las demás páginas que comparten .sec.sec-top. El padding-top de 24px lo pone 03-home.css (body.pg-prod .sec.sec-top). */ body.pg-prod .sec.sec-top .wrap{max-width:none} body.pg-prod .sec.sec-top{padding-bottom:72px} /* Tres filas en la columna de texto: ruta de regreso, primer bloque y resto; la imagen ocupa las tres a la izquierda. El crumb es su propia fila (fuera de col-top) para poder saltar arriba de la imagen en celular. */ .prod-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:56px;align-items:stretch} .prod-crumb{grid-column:2;grid-row:1} .prod-vcol{grid-column:1;grid-row:1 / span 3} .prod-col-top{grid-column:2;grid-row:2;padding-top:0} .prod-col-rest{grid-column:2;grid-row:3;margin-top:40px} .prod-col{max-width:640px} /* Imagen: fija al bajar. top = alto real del header (--top-h, lo publica el bloque 8 de app.js) + 20px, para que nunca quede debajo de la cabecera pegajosa. El alto es el MENOR entre lo que cabe en pantalla (100vh menos el header) y el alto del primer bloque de texto (--prod-top-h, lo publica el bloque 6): así la foto nunca se corta ni rebasa la ventana, y cuando el texto es corto, no crece de más (piso de 420px). Si el producto trae foto real (producto.foto), va en .prod-vis-foto con object-fit:contain (entera, sin recortar); hoy ningún producto la trae, así que se ve el degradado. */ /* El número grande (o el nombre de la categoría) va SIEMPRE centrado en vertical: es el único hijo en flujo, con justify-content:center. La marca (arriba) y el pie van en posición absoluta a las esquinas, así no empujan el centro ni lo mueven según cuántos existan. Piso de 340px. */ .prod-vis{position:sticky;top:calc(var(--top-h,70px) + 20px); height:min(calc(100vh - var(--top-h,70px) - 40px),var(--prod-top-h,9999px));min-height:340px; border-radius:6px;overflow:hidden;color:var(--stone);display:flex;flex-direction:column; justify-content:center;padding:32px; background:linear-gradient(160deg,var(--ink) 0%,var(--deep-2) 55%,var(--deep-3) 100%)} .prod-vis-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--deep)} .prod-vis-top{position:absolute;top:32px;left:32px;right:32px; font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:rgba(235,233,226,.7)} /* Número grande (HP, pulgadas, BTU o la medida de la presentación elegida): Bricolage enorme, en --glow. El es la unidad, más chica. */ .prod-vis-big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800; font-size:clamp(96px,11vw,176px);line-height:.9;color:var(--glow);letter-spacing:-.03em} .prod-vis-big small{font-size:.32em;font-weight:700;margin-left:.15em;color:var(--stone)} /* Categorías sin dato numérico (químicos de presentación única, cloradores, chicas): el nombre corto de la categoría, en Bricolage pero más chico que un número, para que no se lea como un dato. */ .prod-vis-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800; font-size:clamp(34px,5vw,60px);line-height:1;color:var(--glow);letter-spacing:-.02em} .prod-vis-foot{position:absolute;bottom:32px;left:32px;right:32px; display:flex;justify-content:space-between;align-items:flex-end;gap:12px; font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(235,233,226,.7)} /* Degradado de 56px al pie de la columna de texto; se va al bajar. Fijo; app.js le fija left/width al ancho real de la columna de texto. */ .prod-fade{position:fixed;bottom:0;height:56px;pointer-events:none;z-index:40; background:linear-gradient(to bottom,rgba(235,233,226,0),var(--stone) 92%);transition:opacity var(--t-slow) var(--ease)} .prod-fade.off{opacity:0} @media(prefers-reduced-motion:reduce){.prod-fade,.prod-barra{transition:none}} .prod-crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-mid);margin-bottom:22px} /* Enlaces en --glow-aa (5.08:1 sobre --stone), el actual (texto suelto, sin ) se queda en el --ink-mid de .prod-crumb. El separador › es el único hijo sin color propio aparte de la opacidad: más tenue que ambos. */ .prod-crumb a{color:var(--glow-aa);text-decoration:none;transition:color var(--t-fast) var(--ease)} .prod-crumb a:hover{text-decoration:underline;color:var(--glow-aa-2)} .prod-crumb-sep{opacity:.55} /* Marca destacada en --glow-aa semibold (mismo acento que los enlaces de la miga); serie y código quedan en --ink-mid, en segundo plano. Sin fondo ni caja: la maqueta de esta ficha ya evita cajas (ver cabecera del archivo). */ .prod-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-mid);margin-bottom:10px} .prod-eyebrow-marca{color:var(--glow-aa);font-weight:600} .prod-h1{font-size:clamp(34px,3.2vw,46px);font-weight:800;line-height:1.02;color:var(--ink);margin:0 0 18px} /* ---------- selector de cantidad: componente compartido ---------- El MISMO .qty en la ficha, en la barra de celular y en cada renglón del carrito (css/11 lo reusa). Botones casi cuadrados con área táctil mínima de 40px; número en IBM Plex Mono. Misma familia visual que los chips: radio 4px, borde --line, fondo #fff. Hover, foco y deshabilitado (el − a 1) con tokens de transición; el acento es --glow-dk, nunca coral. */ /* Mide siempre su contenido: ningún contenedor lo estira. flex:none evita que un padre flex lo haga crecer; justify-self/align-self:start evitan el stretch por defecto de un hijo de grid (era el renglón del carrito en celular, donde el .qty caía en la columna 1fr). */ .qty{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:4px; overflow:hidden;background:#fff;flex:none;width:max-content;justify-self:start;align-self:center} .qty-b{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center; font-size:18px;line-height:1;color:var(--ink);background:#fff;border:none;cursor:pointer; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .qty-b:hover:not(:disabled){background:var(--stone-2)} .qty-b:disabled{color:var(--line);cursor:default} .qty-n{width:44px;padding:0;text-align:center;border:none;border-left:1px solid var(--line); border-right:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500; color:var(--ink);background:#fff} .qty-n:focus{outline:none} .qty:focus-within{border-color:var(--glow-dk);box-shadow:inset 0 0 0 1px var(--glow-dk)} /* ---------- precio + cantidad + "Agregar al carrito" ---------- Un contenedor flex; el orden lo deciden `order`. Escritorio: precio, el selector y el botón en un renglón (el botón y su aviso viven juntos en .prod-add-wrap, el aviso justo debajo del botón). Chips (químicos) y el aviso provisional caen a su propio renglón. Sin número de WhatsApp queda el texto .prod-btn-off; nunca un botón muerto. */ /* Los `order` se acotan a HIJOS DIRECTOS (>): el botón vive dentro de .prod-add-wrap, y sin el > la regla de order del botón también lo alcanzaría ahí y empujaría el aviso por encima de él. */ .prod-buy{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:24px} .prod-buy > .prod-price,.prod-buy > .prod-price-pend{order:1} .prod-buy > .qty{order:2;min-height:54px} .prod-buy > .prod-add-wrap{order:3;flex:1 1 220px;min-width:180px} .prod-buy > .prod-btn,.prod-buy > .prod-btn-off{order:3} .prod-buy > .prod-chips{order:4;flex-basis:100%} .prod-buy > .prod-prov-nota{order:5;flex-basis:100%} .prod-price{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:34px;color:var(--ink);letter-spacing:-.02em} .prod-price-pend{font-size:16px;color:var(--ink-mid)} .prod-add-wrap{display:flex;flex-direction:column;gap:7px} .prod-add-wrap .prod-btn{flex:0 0 auto;width:100%} .prod-btn{flex:1 1 220px;display:flex;justify-content:center;align-items:center;min-height:54px; background:var(--glow-dk);color:var(--ink);font-weight:600;font-size:16px;border-radius:4px; border:none;cursor:pointer;text-decoration:none} .prod-btn:hover{opacity:.9} .prod-btn-off{flex:1 1 220px;text-align:center;font-size:14px;color:var(--ink-mid)} .prod-add-ok{margin:0;font-size:13.5px;color:var(--glow-aa)} .prod-add-ok a{color:var(--glow-aa);font-weight:600} /* Precio provisional: solo el color cambia a rojo (no hay token rojo en :root, el coral está reservado a instalador). .prod-prov-nota es el aviso chico. */ .precio-provisional{color:#C0392B} .prod-prov-nota{margin:0} /* Selector de presentaciones: chips como grupo de opción (role=radiogroup). Teclado con flechas lo maneja app.js; el foco visible lo da :focus-visible global. El chip elegido lleva .on. */ .prod-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0} .prod-chip{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:500; padding:8px 16px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink-mid)} .prod-chip.on{border-color:var(--glow-dk);color:var(--ink);box-shadow:inset 0 0 0 1px var(--glow-dk)} /* Línea de confianza: envío siempre, garantía solo si existe. Cada dato lleva su propio ícono (camión / escudo, ver bloque 6 de app.js) en vez del puntito genérico de antes; --glow-dk es el mismo acento que ya usaba el punto, decorativo (aria-hidden, no es el texto que da el contraste). */ .prod-trust{font-size:13px;color:var(--ink-mid);display:flex;gap:6px 18px;flex-wrap:wrap;margin-bottom:34px} .prod-trust span{display:inline-flex;align-items:center;gap:8px} .prod-trust svg{flex:0 0 auto;color:var(--glow-dk)} /* Datos clave: de 0 a 4, la rejilla se adapta (4→2×2, 3→fila de 3, 2→fila de 2, 1→uno). Con 0 el bloque no se dibuja (lo decide app.js, no hay clase). */ .prod-keys{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)} .prod-keys-3{grid-template-columns:1fr 1fr 1fr} .prod-keys-1{grid-template-columns:1fr} .prod-key{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .prod-key b{display:block;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-.01em;line-height:1.15} .prod-key span{display:block;font-size:13px;color:var(--ink-mid);margin-top:4px} /* Nota que decide (Venus: "no autocebante") cuando no hay sección de banda donde alojarla. */ .prod-nota-suelta{margin:22px 0 0;font-size:13.5px;color:var(--ink-mid);line-height:1.5; padding-left:14px;border-left:2px solid var(--glow-dk)} /* Secciones: una línea fina arriba, sin caja. */ .prod-sec{border-top:1px solid var(--line);padding:30px 0 0;margin-top:32px} .prod-sec h2{font-size:24px;font-weight:700;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em} /* La sección de banda vive en la primera pantalla (bajo los datos clave), sin línea propia: la separación la da el borde inferior de la rejilla de datos. */ .prod-sec-banda{border-top:none;padding-top:34px;margin-top:0} .prod-sub{font-size:14.5px;color:var(--ink-mid);margin:0 0 20px;line-height:1.55} /* ¿Le queda a tu alberca?: el modelo en verde, los hermanos en gris, sobre un eje común de volumen. */ /* La columna de nombres mide lo que el nombre más largo (max-content), sin ancho fijo; todos a la izquierda, con un hueco constante (gap) hasta la barra, así ningún nombre toca su barra. */ .prod-scale{display:grid;grid-template-columns:max-content 1fr;gap:9px 14px;align-items:center} .prod-sc-lb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-mid);text-align:left;white-space:nowrap} .prod-sc-lb.on{color:var(--ink);font-weight:600} .prod-sc-track{position:relative;height:10px;background:rgba(10,36,34,.07);border-radius:5px} .prod-sc-bar{position:absolute;top:0;bottom:0;border-radius:5px;background:rgba(10,36,34,.22)} .prod-sc-bar.on{background:var(--glow-dk);top:-3px;bottom:-3px;box-shadow:0 0 0 3px rgba(15,169,140,.18)} .prod-sc-bar.on em{position:absolute;left:100%;top:50%;transform:translate(10px,-50%);font-style:normal; font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12.5px;color:var(--glow-aa);white-space:nowrap} /* Cuando la barra del modelo llega cerca del extremo derecho, su etiqueta se saldría: .eml la pone al lado izquierdo de la barra, nunca cortada. */ .prod-sc-bar.on.eml em{left:auto;right:100%;transform:translate(-10px,-50%)} /* El eje de números va en la columna de las barras (grid-column:2), así "0" arranca donde arrancan las barras, no bajo los nombres. */ .prod-sc-axis{grid-column:2;display:flex;justify-content:space-between;margin-top:6px; font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-mid)} .prod-notes{margin-top:18px;display:grid;gap:8px} .prod-note{font-size:13.5px;color:var(--ink-mid);line-height:1.5;padding-left:14px;border-left:2px solid var(--glow-dk)} .prod-link{display:inline-block;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:13px; font-weight:600;color:var(--glow-aa);text-decoration:none} .prod-link:hover{text-decoration:underline} /* ¿Qué llega en la caja?: dos columnas con ✓/✕. Si solo hay un lado, .prod-box-1 lo deja a una columna (lo decide app.js). */ .prod-box{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px} .prod-box-1{grid-template-columns:1fr} .prod-lbl{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-mid);margin:0 0 10px} .prod-box ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} .prod-box li{font-size:14.5px;color:var(--ink);line-height:1.45;padding-left:24px;position:relative} .prod-box li::before{position:absolute;left:0;top:0;font-family:'IBM Plex Mono',monospace;font-weight:600} .prod-box-in li::before{content:"✓";color:var(--glow-aa)} .prod-box-out li{color:var(--ink-mid)} .prod-box-out li::before{content:"✕";color:var(--ink-mid)} /* Sin blanco puro ni caja: mismo trato que .prod-note/.prod-nota-suelta (filo izquierdo --glow-dk, sin fondo) en vez de abrir un segundo tipo de caja en una ficha que ya evita cajas. Rótulo en Plex Mono, --glow-aa (5.08:1). */ .prod-aparte{margin-top:20px;font-size:14px;color:var(--ink);line-height:1.5; padding-left:14px;border-left:2px solid var(--glow-dk)} .prod-aparte b{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--glow-aa);margin-bottom:4px} /* Especificaciones en tabla; rótulo en mono, valor en mono (todo dato). */ .prod-spec{width:100%;border-collapse:collapse;margin-top:12px} .prod-spec th,.prod-spec td{text-align:left;vertical-align:top;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px} .prod-spec th{width:42%;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;color:var(--ink-mid);padding-right:16px} .prod-spec td{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13.5px} /* ¿Si me equivoco?: garantía (si existe) y devolución (siempre, provisional). */ .prod-war{display:grid;gap:16px;margin-top:14px} .prod-war p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.5} .prod-war p.dim{color:var(--ink-mid)} .prod-war .cat-note{margin:4px 0 0;font-size:12px;color:var(--ink-mid)} /* Cita del fabricante, al final, solo si existe. */ .prod-cita{font-size:13.5px;line-height:1.55;color:var(--ink-mid);font-style:italic;margin:12px 0 0} .prod-cita cite{display:block;margin-top:8px;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11.5px} /* Barra fija de celular (precio + Comprar): oculta en escritorio. */ .prod-barra{display:none} /* ---------- celular: una columna, imagen 4:3 arriba, barra fija abajo ---------- */ @media(max-width:880px){ .prod-grid{grid-template-columns:1fr;column-gap:0} /* El crumb es el primer hijo de la rejilla: en una columna queda ARRIBA de la imagen (su margin-bottom le da aire). */ .prod-crumb,.prod-vcol,.prod-col-top,.prod-col-rest{grid-column:1;grid-row:auto} .prod-col-top{margin-top:16px} .prod-col-rest{margin-top:24px} .prod-col{max-width:none} .prod-vis{position:relative;top:0;height:auto;min-height:0;aspect-ratio:4/3;padding:22px} .prod-vis-top{top:22px;left:22px;right:22px} .prod-vis-foot{bottom:22px;left:22px;right:22px} .prod-vis-big{font-size:clamp(72px,20vw,110px)} .prod-fade{display:none} .prod-box{grid-template-columns:1fr} .prod-keys-3,.prod-keys-4{grid-template-columns:1fr 1fr} .prod-key{padding:14px} .prod-key b{font-size:18px} /* Celular: precio en su renglón, luego chips (elegir), y en un renglón el selector a la izquierda con "Agregar" llenando el resto. */ .prod-buy > .prod-price,.prod-buy > .prod-price-pend{flex-basis:100%} .prod-buy > .prod-chips{order:2} .prod-buy > .qty{order:3} .prod-buy > .prod-add-wrap{order:4;flex:1 1 auto} .prod-buy > .prod-btn,.prod-buy > .prod-btn-off{order:4;flex-basis:100%} .prod-buy > .prod-prov-nota{order:5} /* Nombres de la escala un punto más chicos para dar aire a las barras; no se parten (white-space:nowrap) ni se cortan (columna max-content). */ .prod-sc-lb{font-size:11px} /* Barra fija: precio + selector + Agregar. Se desliza desde abajo y aparece solo cuando el botón principal salió de pantalla (is-visible la pone app.js con un IntersectionObserver). El aviso .prod-barra-ok es un globo ENCIMA de la barra (position:absolute, bottom:100%): no la empuja ni la parte. */ .prod-barra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--deep); padding:9px 14px;gap:10px;align-items:center;box-shadow:0 -6px 20px rgba(0,0,0,.18); transform:translateY(100%);transition:transform var(--t-slow) var(--ease)} .prod-barra.is-visible{transform:translateY(0)} .prod-barra b{font-family:'IBM Plex Mono',monospace;color:var(--stone);font-size:16px;flex:0 0 auto} /* Provisional en la barra oscura: un rojo aclarado del #C0392B de arriba para que lea sobre --deep (4.6:1), NO el coral (reservado a instalador). */ .prod-barra b.precio-provisional{color:#E57373} /* El selector en la barra oscura: misma forma, paleta oscura. */ .prod-barra .qty{flex:0 0 auto;background:var(--deep-2);border-color:var(--line-lt)} .prod-barra .qty-b{background:var(--deep-2);color:var(--stone)} .prod-barra .qty-b:hover:not(:disabled){background:var(--deep-3)} .prod-barra .qty-b:disabled{color:rgba(235,233,226,.32)} .prod-barra .qty-n{width:36px;background:var(--deep-2);color:var(--stone);border-color:var(--line-lt)} .prod-barra .qty:focus-within{border-color:var(--glow);box-shadow:inset 0 0 0 1px var(--glow)} .prod-barra-add,.prod-barra a{margin-left:auto;background:var(--glow-dk);color:var(--ink);font-weight:600; font-size:15px;min-height:44px;padding:0 18px;display:inline-flex;align-items:center;border-radius:4px; border:none;text-decoration:none;cursor:pointer;flex:0 0 auto;white-space:nowrap} .prod-barra-ok{position:absolute;left:0;right:0;bottom:100%;margin:0;padding:8px 14px; background:var(--deep-2);color:var(--glow);font-size:13px;text-align:center;border-top:1px solid var(--line-lt)} body.pg-prod .foot{padding-bottom:84px} } /* ============================================================ Guías (guia.html): reusan .prod-q como tarjeta/sección. NO es la ficha de producto — esta página ya no usa .prod-q. Se conservan intactas. ============================================================ */ .prod-q{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 26px;margin-bottom:24px} .prod-q h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;margin-bottom:16px} .prod-q p{color:var(--ink-mid);font-size:15.5px;margin-bottom:10px;line-height:1.6} .prod-q p b{color:var(--ink)} .prod-q .cat-note{margin-bottom:0} /* El reset global (*{margin:0;padding:0}) le quita a