/* lc-catalogo.css — catálogo de 4 presentaciones (2026-10-05): 1 L, galón, 10 L y cubeta 19 L.
   Las rejillas de «¿Cuánto necesitas?» venían armadas para 3 tarjetas. */
.c-tam__g.c-tam__g--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fx-tam.fx-tam--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){
  .c-tam__g.c-tam__g--4,.fx-tam.fx-tam--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .c-tam__g.c-tam__g--4{grid-template-columns:1fr}
}
@media(max-width:760px){
  .fx-tam.fx-tam--4{grid-template-columns:1fr}
}
.fx-tam__precio .fx-tam__otro{display:block;color:var(--tinta2,#4a5568);font-weight:600;font-size:.82rem;margin-top:2px}
/* «Completa tu pedido»: la columna del formulario no debe ensanchar la página en el teléfono */
#pedir .pedido-lado,#pedir .form,#pedir .gt-elige,#pedir .gt-elige__tabs,#pedir .gt-elige__tabs label{min-width:0}
/* parte del nombre que solo lee el carrito (lc-carro.js toma el texto de .nombre) */
.lc-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* retoques 05-10 */
.gt-pie-legal{margin-top:10px;opacity:.85;font-size:.86em}
#color .lc-mas{margin-top:14px}#color .lc-mas a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.catpage-filters{padding-right:84px}}
/* tarjetas de producto en el inicio (copiadas de lc-fichas.css, que el inicio no carga) */
#mas{--fx-linea:rgba(5,106,220,.16)}
/* «Completa tu pedido» con 3 pestañas: foto arriba, texto abajo (en 3 columnas no cabe de lado) */
#pedir .gt-elige__tabs.lc-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#pedir .form .gt-elige__tabs.lc-3 label{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;text-align:center;row-gap:3px;padding:8px 6px}
#pedir .form .gt-elige__tabs.lc-3 label img{grid-row:auto;width:48px;height:48px}
#pedir .form .gt-elige__tabs.lc-3 label b{font-size:clamp(11.5px,3.3vw,14px);hyphens:manual;line-height:1.15}
#pedir .form .gt-elige__tabs.lc-3 label span{font-size:11px;line-height:1.25}
#pedir #gt-elige-color:checked~.gt-elige__tabs label[for=gt-elige-color]{background:#fff;color:var(--tinta);border-color:var(--azul);box-shadow:0 0 0 3px #056adc22}
#gt-elige-color:checked~.gt-elige__panel[data-panel=color]{display:block}
#gt-elige-color:focus-visible~.gt-elige__tabs label[for=gt-elige-color]{outline:2px solid var(--azul);outline-offset:2px}
.pedido .gt-elige>input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
/* opciones dentro de la sección roja del color: mismas reglas que tenía #cinta (gt-0907.css) */
#color .compra-form .gt-pill span{background:transparent;border-color:#ffffff6b;color:#fff}
#color .compra-form .gt-pill:hover span{border-color:#fff;background:#ffffff1f}
#color .compra-form .gt-pill.sel span{background:#fff;border-color:#fff;color:var(--tinta,#0E1B42)}
#color .compra-form .gt-pill__p{color:#ffffffb8;border-left-color:#ffffff47}
#color .compra-form .gt-pill.sel .gt-pill__p{color:var(--rojo,#F00001);border-left-color:#f0000147}
#mas .fx-rel--2{max-width:640px;margin:22px auto 0;grid-template-columns:repeat(2,minmax(0,1fr))}
/* ── Relacionados (tarjeta propia: no depende de gt-0907.css) ──────── */
.fx-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.fx-rc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--fx-linea);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--tinta);box-shadow:0 10px 26px rgba(0,45,162,.07);transition:transform .2s,box-shadow .2s}
.fx-rc:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,45,162,.14)}
.fx-rc__foto{position:relative;aspect-ratio:1.15;background:linear-gradient(180deg,#f7f9fc,#eef3f9);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fx-rc__foto img{width:100%;height:100%;object-fit:contain;padding:10px}
.fx-rc__foto.fx-cubre img{object-fit:cover;padding:0}
.fx-rc__foto:not(.fx-cubre) img,.fx-tam__foto img,.fx-mini__pista>span:not(.fx-cubre) img{mix-blend-mode:multiply}
.fx-rc__sello{position:absolute;left:10px;top:10px;background:#fff;color:var(--rojo);font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 9px;box-shadow:0 4px 12px rgba(14,27,66,.1)}
.fx-rc__sello--pronto{background:var(--marino);color:#fff}
.fx-rc__txt{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.fx-rc__txt b{font-size:16px;font-weight:800;line-height:1.25}
.fx-rc__txt span{font-size:13px;color:var(--tinta2);line-height:1.4}
.fx-rc__precio{margin-top:auto;padding-top:6px;display:flex;align-items:baseline;gap:6px;font-weight:800}
.fx-rc__precio small{font-size:11px;font-weight:700;color:var(--tinta2)}
.fx-rc__precio strong{font-size:20px;letter-spacing:-.02em}
.fx-rc__precio s{font-size:12px;color:#8b93a7;font-weight:700}
.fx-rc__precio em{font-style:normal;font-size:14px;color:var(--marino)}
@media (max-width:1024px){.fx-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fx-rel{grid-template-columns:1fr 1fr;gap:10px}.fx-rc__txt{padding:10px 11px 12px}.fx-rc__txt b{font-size:14px}.fx-rc__txt span{font-size:12px}.fx-rc__precio strong{font-size:17px}}