/* ==========================================================================
   [ZSPORT-tienda-portada] La portada de la tienda (/e/, /en/, /pt/): las
   secciones que arma el servidor (backend/tienda_portada.py) segun la maqueta
   aprobada (vitrina-marcas/maqueta-final/index.html).
   --------------------------------------------------------------------------
   Va DESPUES de vitrina.css y tienda-v2.css y usa sus variables: la barra, la
   caja de busqueda, el desplegable de idioma, el catalogo, el cuadro de compra,
   el brillo de .btn-comprar y el WhatsApp metalizado (.wsp) son los de siempre,
   sin copiarlos. Todo lo propio lleva el prefijo tp- (no pisa ninguna clase de
   vitrina.css ni de tienda-v2.css).
   El codigo de toda la vitrina:
     herramienta         -> verde, marcador en rombo
     original de fabrica -> celeste, marcador cuadrado
     lectura completa    -> lila, marcador de pastilla con borde
     reprogramacion      -> naranja, marcador rayado
   Celular: corte a 760 px, toques de 44 px, nada plegado (los pliegues del
   telefono que siguen son los del catalogo: servicios y reprogramaciones).
   ========================================================================== */

:root{
  --tp-herr:#4ADE80;
  --tp-herr-borde:rgba(74,222,128,.34);
  --tp-herr-tinte:rgba(74,222,128,.07);
  --tp-orig-tinte:rgba(125,211,252,.07);
  --tp-repro-tinte:rgba(255,90,31,.08);
  --tp-lect:#C4B5FD;
  --tp-repro:#FF8A5C;
  --tp-raya:repeating-linear-gradient(135deg,var(--redline) 0 4px,transparent 4px 8px);
}
.tp-oculto{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; border:0 }
.tp-regla{ font-family:var(--mono); font-size:.85em; color:var(--ceniza); white-space:nowrap }

/* ---------------------------------------------------------------- sellos -- */
.tp-sello{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; white-space:nowrap; line-height:1;
  padding:5px 8px 5px 7px; border-radius:5px; border:1px solid var(--borde); color:var(--ceniza);
}
.tp-sello::before{ content:""; flex:none }
.tp-s-herr{ color:var(--tp-herr); border-color:var(--tp-herr-borde); background:var(--tp-herr-tinte) }
.tp-s-herr::before{ width:7px; height:7px; background:var(--tp-herr); transform:rotate(45deg) }
.tp-s-orig{ color:var(--dato); border-color:rgba(125,211,252,.42); background:rgba(125,211,252,.11) }
.tp-s-orig::before{ width:8px; height:8px; border-radius:1.5px; background:var(--dato) }
.tp-s-lect{ color:var(--tp-lect); border-color:rgba(196,181,253,.45); background:rgba(196,181,253,.10) }
.tp-s-lect::before{ width:12px; height:8px; border-radius:2px; border:1.5px solid var(--tp-lect) }
.tp-s-repro{ color:var(--tp-repro); border-color:rgba(255,90,31,.5); background:var(--redline-tenue) }
.tp-s-repro::before{ width:16px; height:8px; border-radius:4px; background:var(--tp-raya); box-shadow:inset 0 0 0 1px rgba(255,90,31,.6) }

/* ----------------------------------------------------------- botones -- */
.tp-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; text-decoration:none; text-align:center }
.tp-btn-sec{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px;
  padding:0 16px; border-radius:var(--radio-chico); border:1px solid var(--borde); background:transparent;
  color:var(--hueso); font:600 13.5px var(--texto); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:border-color .14s, color .14s;
}
.tp-btn-sec:hover{ border-color:var(--hueso) }
.tp-ver{
  color:var(--hueso); text-decoration:none; font-weight:600; font-size:14px;
  border-bottom:1px solid var(--redline); padding-bottom:2px; white-space:nowrap;
}
.tp-ver:hover{ color:var(--redline-h) }
.tp-etq{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza) }
.tp-dato{ white-space:nowrap }
.tp-dato b{ font-family:var(--mono); font-weight:600; color:var(--hueso) }

/* ----------------------------------------------------------------- hero -- */
.hero .tp-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px 40px; align-items:center }
.tp-hero-txt{ min-width:0 }
.hero .tp-hero-grid h1{ font-size:clamp(34px,5vw,56px); max-width:19ch }
.tp-bajada{ max-width:58ch; margin:0 0 20px; color:#A9B1BE; font-size:16px; line-height:1.6; text-shadow:0 2px 16px rgba(0,0,0,.6) }
.tp-consola{
  display:flex; align-items:center; max-width:720px; margin:0 0 16px;
  background:rgba(18,22,28,.94); border:1px solid #2E3644; border-radius:14px;
  padding:6px 6px 6px 18px; box-shadow:0 18px 44px -18px rgba(0,0,0,.85);
  transition:border-color .16s, box-shadow .16s;
}
.tp-consola:focus-within{ border-color:var(--redline); box-shadow:0 0 0 4px var(--redline-tenue), 0 18px 44px -18px rgba(0,0,0,.85) }
.tp-prompt{ font-family:var(--mono); color:var(--redline); font-size:22px; font-weight:600; margin-right:12px; line-height:1 }
.tp-consola input{
  flex:1; min-width:0; height:54px; background:none; border:0; outline:none;
  color:var(--hueso); font-family:var(--mono); font-size:18px; -webkit-appearance:none; appearance:none;
}
.tp-consola input::placeholder{ color:var(--ceniza) }
.tp-consola-btn{
  flex:none; height:54px; padding:0 28px; border:0; border-radius:10px; cursor:pointer;
  background:var(--redline); color:var(--carbon); font:700 15px var(--texto); transition:background .14s;
}
.tp-consola-btn:hover{ background:var(--redline-h) }
.tp-consola-btn:focus-visible{ outline:2px solid var(--hueso); outline-offset:2px }
.hero .arma-cta-hero{ margin-bottom:18px }

.tp-linea-herr{
  display:none; align-items:center; flex-wrap:wrap; gap:4px 10px; margin:0 0 16px;
  min-height:44px; padding:8px 14px 8px 12px; text-decoration:none;
  border:1px solid var(--tp-herr-borde); border-radius:10px; background:rgba(18,22,28,.9);
  font-size:14px; color:var(--ceniza); transition:border-color .14s;
}
.tp-linea-herr b{ color:var(--hueso); font-weight:600 }
.tp-linea-herr .tp-ir{ margin-left:auto; color:var(--tp-herr); font-weight:600; white-space:nowrap }
.tp-linea-herr:hover{ border-color:var(--tp-herr) }

.tp-marcas-hero{ display:none }
.tp-etq-orig{ display:flex; align-items:center; gap:8px }
.tp-etq-orig::before{ content:""; width:8px; height:8px; border-radius:1.5px; background:var(--dato); flex:none }
.tp-marcas-hero a{
  display:flex; flex-direction:column; align-items:stretch; gap:5px; min-width:0; min-height:44px;
  padding:5px 4px 4px; text-decoration:none; border:1px solid var(--borde); border-radius:9px;
  background:rgba(18,22,28,.88); transition:border-color .14s;
}
.tp-marcas-hero a:hover{ border-color:var(--dato) }
.tp-marcas-hero b{ font-family:var(--mono); font-size:12.5px; font-weight:600; line-height:1.2; text-align:center; color:var(--dato); white-space:nowrap }
.tp-marcas-hero .tp-placa{ width:100%; height:32px; --logo-w:48px; --logo-h:22px; border-radius:6px; padding:2px }
.tp-marcas-hero .tp-mas-marcas{ justify-content:center; align-items:center; text-align:center; font-size:12px; line-height:1.25; color:var(--ceniza) }
.tp-marcas-hero .tp-mas-marcas b{ display:block; font-size:15px; color:var(--hueso) }

.tp-ejemplos{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px }
.tp-ejemplos .tp-etq{ margin-right:4px }
.tp-chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; min-width:0 }
.tp-chips a{
  display:inline-flex; flex-direction:column; justify-content:center; line-height:1.25;
  min-height:44px; padding:5px 12px; text-decoration:none;
  border:1px solid var(--borde); border-radius:10px; background:rgba(18,22,28,.85); transition:border-color .14s;
}
.tp-chips a b{ font-family:var(--mono); font-weight:600; font-size:13.5px; color:var(--dato) }
.tp-chips a.tp-ej-veh b{ font-family:var(--texto); color:var(--hueso) }
.tp-chips a small{ font-size:11px; color:var(--ceniza) }
.tp-chips a:hover{ border-color:var(--redline) }

.tp-alcance{ display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.tp-alcance .tp-etq{ margin-right:4px }
.tp-alc{
  position:relative; overflow:hidden; display:inline-flex; align-items:baseline; gap:7px;
  min-height:44px; padding:10px 14px 10px 17px; text-decoration:none; white-space:nowrap;
  border:1px solid var(--borde); border-radius:10px; background:rgba(23,28,36,.9); transition:border-color .14s;
}
.tp-alc::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--borde) }
.tp-alc-herr::before{ background:var(--tp-herr) }
.tp-alc-orig::before{ background:var(--dato) }
.tp-alc-lect::before{ background:var(--tp-lect) }
.tp-alc-repro::before{ background:var(--tp-raya) }
.tp-alc b{ font-family:var(--mono); font-size:16px; font-weight:600; line-height:1.2; color:var(--hueso); font-variant-numeric:tabular-nums }
.tp-alc-herr b{ color:var(--tp-herr) }
.tp-alc-orig b{ color:var(--dato) }
.tp-alc-lect b{ color:var(--tp-lect) }
.tp-alc span{ font-size:13.5px; color:var(--ceniza); line-height:1.2 }
.tp-alc:hover{ border-color:var(--ceniza) }
.tp-alc:hover span{ color:var(--hueso) }

/* El indice del hero: lo que hay, en el primer pantallazo. */
.tp-indice{
  background:rgba(18,22,28,.86); border:1px solid #2A3240; border-radius:14px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:14px 14px 12px; box-shadow:0 24px 50px -24px rgba(0,0,0,.9); min-width:0;
}
.tp-indice-tit{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:2px 2px 8px; font-size:13px; color:var(--ceniza) }
.tp-indice-tit b{ font-family:var(--mono); font-weight:600; color:var(--hueso) }
.tp-it-orig, .tp-it-repro{ margin-top:8px; padding-top:12px; border-top:1px solid var(--borde) }
.tp-indice-herr{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center;
  padding:6px 6px 8px 4px; border-radius:8px; text-decoration:none; color:var(--hueso);
}
.tp-indice-herr:hover{ background:var(--panel-alto) }
.tp-indice-ico{ display:grid; place-items:center; width:64px; height:48px; border-radius:8px; background:var(--grafito) }
.tp-indice-ico img{ width:64px; height:48px; object-fit:contain }
.tp-indice-herr b{ display:block; font-weight:700; font-size:14.5px }
.tp-indice-herr small{ display:block; font-size:12.5px; color:var(--ceniza); line-height:1.4 }
.tp-indice-herr small em{ font-style:normal; color:var(--tp-herr); font-family:var(--mono) }
.tp-indice-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.tp-indice-lista a{
  display:grid; grid-template-columns:48px minmax(0,1fr) 46px auto; align-items:center; gap:10px;
  min-height:40px; padding:4px 6px 4px 4px; border-radius:8px; text-decoration:none; color:var(--hueso);
}
.tp-indice-lista a:hover{ background:var(--panel-alto) }
.tp-indice-lista .tp-nom{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:7px; white-space:nowrap; min-width:0 }
.tp-indice-lista b{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--dato); text-align:right; font-variant-numeric:tabular-nums; min-width:52px }
.tp-indice-mas, .tp-indice-repro{ display:block; padding:6px 6px 2px; font-size:12.5px; color:var(--ceniza); text-decoration:none; line-height:1.5 }
.tp-indice-mas:hover, .tp-indice-repro:hover{ color:var(--hueso) }
.tp-indice-mas::after{ content:" ›"; color:var(--dato) }
.tp-indice-repro::after{ content:" ›"; color:var(--tp-repro) }

/* ------------------------------------------------------- logos de marca -- */
/* El logo claro en reposo y el de color al pasar el mouse (la placa se
   enciende). La caja del logo por el factor optico de cada marca. */
.tp-placa{
  --logo-w:96px; --logo-h:40px; --escala:1;
  position:relative; display:grid; place-items:center; flex:none;
  background:var(--panel-alto); border-radius:8px; padding:4px; transition:background-color .24s ease;
}
.tp-placa img{
  grid-area:1 / 1; max-width:100%;
  width:calc(var(--logo-w) * var(--escala)); height:calc(var(--logo-h) * var(--escala));
  object-fit:contain; transition:opacity .24s ease;
}
.tp-placa .tp-color{ opacity:0 }
a:hover .tp-placa, a:focus-visible .tp-placa{ background:var(--hueso) }
a:hover .tp-placa .tp-claro, a:focus-visible .tp-placa .tp-claro{ opacity:0 }
a:hover .tp-placa .tp-color, a:focus-visible .tp-placa .tp-color{ opacity:1 }
.tp-placa img.tp-ancho{ width:calc(var(--logo-w) * var(--escala) * 1.1); height:calc(var(--logo-h) * var(--escala) * .8) }
.tp-letras{ font:700 12px/1.1 var(--display); color:var(--hueso); text-align:center; padding:4px 6px }
a:hover .tp-letras{ color:var(--carbon) }
.tp-e-volkswagen{ --escala:1.12 } .tp-e-audi{ --escala:.85 } .tp-e-skoda{ --escala:.9 } .tp-e-seat{ --escala:1 }
.tp-e-bentley{ --escala:.95 } .tp-e-lamborghini{ --escala:.9 } .tp-e-ford{ --escala:.9 } .tp-e-toyota{ --escala:.95 }
.tp-e-lexus{ --escala:1 } .tp-e-chevrolet{ --escala:.85 } .tp-e-fiat{ --escala:.88 } .tp-e-peugeot{ --escala:1.1 }
.tp-e-nissan{ --escala:1.05 } .tp-e-mercedes{ --escala:1.12 } .tp-e-bmw{ --escala:1.12 } .tp-e-mini{ --escala:.85 }
.tp-e-iveco{ --escala:.85 } .tp-e-ktm{ --escala:.8 }
.tp-placa-chica{ --logo-w:38px; --logo-h:20px; width:48px; height:30px; border-radius:6px; padding:2px }
.tp-placa-chica img.tp-ancho{ width:calc(var(--logo-w) * var(--escala) * 1.35); height:calc(var(--logo-h) * var(--escala) * .7) }
.tp-nuevo{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--carbon); background:var(--hueso); border-radius:4px; padding:2px 6px; line-height:1.3;
}
.tp-barrita{ height:6px; border-radius:3px; background:var(--borde-suave); overflow:hidden }
.tp-barrita i{ display:block; height:100%; border-radius:3px; background:var(--dato); opacity:.75; min-width:3px }
.tp-p1{ width:1% } .tp-p5{ width:5% } .tp-p10{ width:10% } .tp-p15{ width:15% } .tp-p20{ width:20% }
.tp-p25{ width:25% } .tp-p30{ width:30% } .tp-p35{ width:35% } .tp-p40{ width:40% } .tp-p45{ width:45% }
.tp-p50{ width:50% } .tp-p55{ width:55% } .tp-p60{ width:60% } .tp-p65{ width:65% } .tp-p70{ width:70% }
.tp-p75{ width:75% } .tp-p80{ width:80% } .tp-p85{ width:85% } .tp-p90{ width:90% } .tp-p95{ width:95% } .tp-p100{ width:100% }

/* -------------------------------------------- cabecera de cada "mundo" -- */
.tp-mundo{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:10px 24px; flex-wrap:wrap;
  margin-bottom:16px; padding:14px 18px 14px 22px; border:1px solid var(--borde); border-radius:var(--radio);
}
.tp-mundo::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px }
.tp-mundo h2{ font-family:var(--display); font-size:22px; font-weight:700; line-height:1.2; margin:0 }
.tp-mundo-izq{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.tp-mundo-herr{ background:linear-gradient(90deg,var(--tp-herr-tinte),transparent 75%); border-color:var(--tp-herr-borde) }
.tp-mundo-herr::before{ background:var(--tp-herr) }
.tp-mundo-orig{ background:linear-gradient(90deg,var(--tp-orig-tinte),transparent 75%); border-color:rgba(125,211,252,.22) }
.tp-mundo-orig::before{ background:var(--dato) }
.tp-mundo-repro{ background:linear-gradient(90deg,var(--tp-repro-tinte),transparent 75%); border-color:rgba(255,90,31,.25) }
.tp-mundo-repro::before{ background:var(--tp-raya) }
.tp-mundo-datos{ margin:0; color:var(--ceniza); font-size:13.5px; line-height:1.6; display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline }
.tp-mundo-datos > span:first-child{ flex:1 1 100% }
.tp-cobro{ display:inline-flex; align-items:flex-start; gap:9px; margin:0; font-size:13.5px; line-height:1.45; color:var(--hueso) }
.tp-cobro::before{
  content:""; flex:none; width:11px; height:6px; margin-top:5px;
  border-left:2px solid var(--tp-herr); border-bottom:2px solid var(--tp-herr); transform:rotate(-45deg);
}
.tp-cobro b{ font-weight:600 }

/* ---------------------------------------------------------- herramientas -- */
.tp-banda.tp-herr{
  padding:30px 0 36px; border-bottom:1px solid var(--borde-suave);
  background:radial-gradient(55% 70% at 0% 0%, rgba(74,222,128,.06), transparent 62%), transparent;
}
.tp-herr-top{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px; align-items:stretch }
.tp-herr-top.tp-solo{ grid-template-columns:1fr }
.tp-herr-ico{
  display:grid; place-items:center; border-radius:12px; aspect-ratio:4 / 3;
  background:radial-gradient(70% 70% at 50% 45%, rgba(255,255,255,.07), transparent 70%), var(--grafito);
  border:1px solid var(--borde-suave); overflow:hidden;
}
.tp-herr-ico img{ width:92%; height:auto; display:block }
.tp-sigla{ font:600 14px var(--mono); letter-spacing:.06em; color:var(--tp-herr) }

.tp-dest{
  position:relative; overflow:hidden; display:grid; grid-template-columns:168px minmax(0,1fr);
  grid-template-areas:"ico cab" "ico cubre" "pie pie"; gap:8px 22px; align-content:start;
  background:linear-gradient(135deg, rgba(74,222,128,.07), transparent 55%), var(--panel);
  border:1px solid var(--tp-herr-borde); border-radius:16px; padding:22px 22px 18px 18px; transition:border-color .16s;
}
.tp-dest::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--tp-herr) }
.tp-dest:hover{ border-color:var(--tp-herr) }
.tp-dest-ico{ grid-area:ico; align-self:center }
.tp-dest-cab{ grid-area:cab; display:flex; flex-direction:column; gap:6px; min-width:0 }
.tp-top-tag{
  align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--carbon); background:var(--tp-herr); border-radius:4px; padding:3px 7px; line-height:1.2; font-weight:600;
}
.tp-dest h3{ font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.05; margin:0 }
.tp-dest h3 a{ color:var(--hueso); text-decoration:none }
.tp-dest h3 a:hover{ color:var(--tp-herr) }
.tp-que-hace{ color:var(--ceniza); font-size:14px; line-height:1.5; margin:0 }
.tp-dest-cubre{ grid-area:cubre; min-width:0; font-size:13px; color:var(--ceniza); line-height:1.55 }
.tp-cifras{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 6px; font-family:var(--mono); font-size:12.5px }
.tp-cifras b{ color:var(--tp-herr); font-weight:600; font-size:15px }
.tp-fams{ margin:0; font-family:var(--mono); font-size:12px; color:var(--hueso) }
.tp-fams-etq{ font-family:var(--texto); color:var(--ceniza) }
.tp-dest-pie{
  grid-area:pie; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px;
  padding-top:14px; margin-top:6px; border-top:1px solid var(--borde-suave);
}
.tp-precio{ display:flex; flex-direction:column; gap:2px; font-family:var(--mono); font-variant-numeric:tabular-nums }
.tp-precio b{ font-size:20px; font-weight:600; color:var(--hueso); letter-spacing:-.01em }
.tp-precio span{ font-size:12px; color:var(--ceniza) }
.tp-dest-pie .tp-precio b{ font-size:22px }
.tp-acc{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.tp-acc .btn-comprar{ min-height:44px }

.tp-pedidas{ background:var(--panel); border:1px solid var(--borde); border-radius:16px; display:flex; flex-direction:column; min-width:0 }
.tp-pedidas-tit{
  margin:0; padding:12px 16px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ceniza); border-bottom:1px solid var(--borde-suave); background:var(--grafito);
  border-radius:16px 16px 0 0;
}
.tp-hp:last-child{ border-radius:0 0 16px 16px }
.tp-hp{
  flex:1; display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:4px 14px; align-items:center;
  padding:10px 16px 10px 12px; border-top:1px solid var(--borde-suave); text-decoration:none; color:inherit;
  min-height:64px; transition:background .14s;
}
.tp-pedidas-tit + .tp-hp{ border-top:0 }
.tp-hp:hover{ background:var(--panel-alto) }
.tp-hp-ico{ width:72px; border-radius:8px }
.tp-hp-txt{ min-width:0; display:flex; flex-direction:column; gap:2px }
.tp-hp-txt b{ font-family:var(--display); font-weight:700; font-size:15px; line-height:1.25; color:var(--hueso) }
.tp-hp-txt > span{ font-size:12.5px; color:var(--ceniza); line-height:1.4 }
.tp-hp:hover .tp-hp-txt b{ color:var(--tp-herr) }
.tp-hp-precio{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right }
.tp-hp-precio .tp-h-precio{ font-size:14px; font-weight:600; color:var(--hueso) }
.tp-hp-precio small{ font-family:var(--mono); font-size:11.5px; color:var(--ceniza); white-space:nowrap }

.tp-puertas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px }
.tp-puerta{
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:4px 16px; align-items:center;
  padding:14px 18px 14px 14px; border:1px dashed var(--tp-herr-borde); border-radius:14px;
  background:rgba(74,222,128,.035); transition:border-color .14s, background .14s;
}
.tp-puerta:hover{ border-style:solid; border-color:var(--tp-herr); background:var(--tp-herr-tinte) }
.tp-puerta-ico{ width:96px }
.tp-puerta-txt{ min-width:0; display:flex; flex-direction:column; gap:3px }
.tp-puerta-tit{ color:var(--hueso); text-decoration:none }
.tp-puerta-tit b{ font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.25 }
.tp-puerta-tit:hover b{ color:var(--tp-herr) }
.tp-puerta-txt > span{ font-size:13px; color:var(--ceniza); line-height:1.45 }
.tp-puerta-acc{ display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.tp-gratis-tag{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tp-herr); border:1px solid var(--tp-herr-borde); border-radius:100px; padding:5px 10px; white-space:nowrap;
}
.tp-hex{
  display:grid; place-items:center; aspect-ratio:4 / 3; width:96px; border-radius:12px;
  background:var(--grafito); border:1px solid var(--borde-suave);
  font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ceniza); text-align:center; letter-spacing:.04em;
}
.tp-hex b{ color:var(--redline); font-weight:600 }

.tp-grupos-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; margin:28px 0 12px }
.tp-grupos-cab h3{ font-family:var(--display); font-size:18px; margin:0 }
.tp-grupos-cab h3 b{ font-family:var(--mono); color:var(--tp-herr) }
.tp-grupos-cab p{ margin:0; font-size:13.5px; color:var(--ceniza) }
.tp-grupos{ columns:3 300px; column-gap:12px }
.tp-grupo{ background:var(--panel); border:1px solid var(--borde); border-radius:12px; overflow:hidden; break-inside:avoid; margin:0 0 12px }
.tp-grupo-cab{
  display:flex; align-items:center; gap:12px; margin:0; padding:11px 14px;
  background:var(--grafito); border-bottom:1px solid var(--borde-suave);
  font-family:var(--display); font-size:15px; font-weight:700; line-height:1.25;
}
.tp-grupo-cab small{ margin-left:auto; font-family:var(--mono); font-weight:500; font-size:12px; color:var(--ceniza) }
.tp-grupo-lista{ list-style:none; margin:0; padding:4px 0 }
.tp-h{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 10px; align-items:center;
  min-height:44px; padding:4px 10px 4px 14px;
}
.tp-h:hover{ background:var(--panel-alto) }
.tp-h-nom{ color:var(--hueso); text-decoration:none; font-size:13.5px; line-height:1.35; padding:6px 0 }
.tp-h-nom:hover{ color:var(--tp-herr) }
.tp-h-precio{ font-family:var(--mono); font-size:12px; color:var(--ceniza); white-space:nowrap; text-align:right }
.tp-h-precio.tp-gratis{ color:var(--tp-herr); font-weight:600 }
.tp-h-usar{
  display:inline-flex; align-items:center; min-height:32px; padding:0 10px; border-radius:6px;
  border:1px solid var(--borde); color:var(--hueso); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.tp-h-usar:hover{ border-color:var(--tp-herr); color:var(--tp-herr) }
.tp-herr-pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--borde-suave);
}
.tp-leyenda{ margin:0; font-size:12.5px; color:var(--ceniza); line-height:1.6 }
.tp-pedir{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; margin-top:18px;
  padding:14px 18px; border:1px solid var(--borde); border-radius:var(--radio); background:var(--panel);
}
.tp-pedir p{ margin:0; font-size:14px; color:var(--ceniza) }
.tp-pedir p b{ color:var(--hueso) }
.tp-pedir .btn-comprar{ padding:0 22px; white-space:nowrap }

/* El catalogo (catalogo-ecu.js, vitrina.css) con el mismo codigo de color que
   las secciones, la leyenda del pie y las paginas por marca (vitrina-marcas.css):
   un servicio del taller es trabajo sobre tu archivo (verde, como las
   herramientas; el celeste es solo el original de fabrica) y la reprogramacion
   lista es naranja, no ambar. Solo colores: la forma de las tarjetas, los
   pliegues del telefono y el brillo de los botones siguen como en vitrina.css. */
#catalogo .ficha-servicio{ border-left-color:var(--tp-herr) }
#catalogo .etiqueta-servicio{ color:var(--tp-herr); border-color:var(--tp-herr-borde); background:var(--tp-herr-tinte) }
#catalogo .pliegue-servicios{ border-left-color:var(--tp-herr) }
#catalogo .ficha-repro{ border-color:rgba(255,90,31,.34); background:linear-gradient(180deg,rgba(255,90,31,.06),rgba(255,90,31,.015)) }
#catalogo .ficha-repro:hover{ border-color:rgba(255,90,31,.6) }
#catalogo .ficha-repro .etiqueta-repro{ background:var(--redline-tenue); color:var(--tp-repro) }
#catalogo .ficha-repro .repro-op{ background:rgba(255,90,31,.09); border-color:rgba(255,90,31,.3); color:#FFC4AE }
#catalogo .ficha-repro .repro-op.repro-base{ background:rgba(255,90,31,.18); border-color:rgba(255,90,31,.5) }
#catalogo .ficha-repro .repro-combo-base{ color:var(--tp-repro) }
#catalogo .ficha-repro .btn-repro{ background:var(--redline); border-color:var(--redline); color:var(--carbon) }
#catalogo .ficha-repro .btn-repro-2{ background:transparent; color:var(--tp-repro); border-color:rgba(255,90,31,.42) }
#catalogo .ficha-repro .btn-repro-2:hover{ background:var(--redline-tenue) }
#catalogo .pliegue-repros{ border-left-color:var(--redline) }

/* -------------------------------------------- originales por marca -- */
.tp-marcas-grilla{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:24px 10px; align-items:start }
.tp-mg-grupo{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); grid-template-columns:subgrid; grid-column:span 1; row-gap:10px; align-content:start; min-width:0 }
.tp-mg-2{ grid-column:span 2 } .tp-mg-3{ grid-column:span 3 } .tp-mg-4{ grid-column:span 4 }
.tp-mg-5{ grid-column:span 5 } .tp-mg-6{ grid-column:1 / -1 }
.tp-mg-cab{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0;
  padding:0 2px 6px; border-bottom:1px solid var(--borde); font-family:var(--display);
}
.tp-mg-nom{ font-size:16px; font-weight:800; line-height:1.1; letter-spacing:-.01em; color:var(--hueso) }
.tp-mg-n{ font-family:var(--mono); font-weight:500; font-size:12px; color:var(--dato) }
.tp-mg-nota{ flex:1 1 100%; font-family:var(--texto); font-weight:400; font-size:12.5px; line-height:1.4; color:var(--ceniza) }
.tp-baldosa{
  position:relative; display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:10px 10px 12px; border-radius:12px; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--borde); transition:border-color .18s, transform .18s, box-shadow .18s;
}
.tp-baldosa::before{ content:""; position:absolute; left:12px; right:12px; top:0; height:2px; border-radius:0 0 2px 2px; background:var(--dato); opacity:.55; transition:opacity .18s }
.tp-baldosa:hover, .tp-baldosa:focus-visible{ border-color:var(--dato); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(125,211,252,.55) }
.tp-baldosa:hover::before{ opacity:1 }
.tp-baldosa .tp-placa{ height:64px; margin-bottom:4px }
.tp-baldosa .tp-nuevo{ position:absolute; top:8px; right:8px; z-index:1; transition:opacity .18s }
.tp-baldosa:hover .tp-nuevo, .tp-baldosa:focus-visible .tp-nuevo{ opacity:0 }
.tp-baldosa-nom{ padding:0 4px; font-weight:700; font-size:15px; line-height:1.25; color:var(--hueso) }
.tp-baldosa-n{ padding:0 4px; font-family:var(--mono); font-size:12px; color:var(--ceniza); line-height:1.3; font-variant-numeric:tabular-nums }
.tp-baldosa-n b{ display:block; font-size:20px; font-weight:600; color:var(--dato); letter-spacing:-.01em }
.tp-baldosa-lect{ padding:0 4px; font-family:var(--mono); font-size:11.5px; color:var(--ceniza); line-height:1.3; font-variant-numeric:tabular-nums }
.tp-baldosa-lect b{ font-weight:600; color:var(--tp-lect) }
.tp-baldosa .tp-barrita{ margin:auto 4px 0 }   /* abajo de todo: alineada aunque una baldosa lleve lecturas y la vecina no */
.tp-marcas-pie{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px; margin:16px 0 0; font-size:13px; color:var(--ceniza); line-height:1.5 }
.tp-marcas-pie > span:first-child{ flex:1 1 420px }

/* --------------------------------------------------- secciones sueltas -- */
.tp-sec .tp-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:18px }
.tp-sec .tp-cab h2{ font-family:var(--display); font-size:22px; font-weight:700; margin:0 }
.tp-sec .tp-cab p{ margin:6px 0 0; color:var(--ceniza); font-size:14px; max-width:70ch; line-height:1.55 }

/* Reprogramaciones: tejas por marca. */
.tp-tejas{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px }
.tp-teja{
  position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; padding:10px 10px 12px 14px;
  border-radius:12px; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--borde);
  transition:border-color .16s;
}
.tp-teja::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:0 2px 2px 0; background:var(--tp-raya) }
.tp-teja:hover{ border-color:rgba(255,90,31,.6) }
.tp-placa-teja{ --logo-w:84px; --logo-h:34px; width:100%; height:52px }
.tp-teja-txt{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.tp-teja-txt b{ font-size:14.5px; font-weight:700; color:var(--hueso); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tp-teja-txt > span{ font-family:var(--mono); font-size:12px; color:var(--ceniza) }
.tp-linea{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:14px;
  padding:14px 18px; border:1px solid var(--borde); border-radius:var(--radio); background:var(--panel);
}
.tp-linea p{ margin:0; font-size:14px; color:var(--ceniza) }
.tp-linea p b{ color:var(--hueso) }

/* De fabrica o reprogramado: el par real. */
.tp-bicolor .tp-c-orig{ color:var(--dato) }
.tp-bicolor .tp-c-repro{ color:var(--tp-repro) }
.tp-bicolor .tp-c-o{ color:var(--ceniza); font-weight:500 }
.tp-par{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:stretch }
.tp-par-o{ align-self:center; font-family:var(--display); font-size:15px; color:var(--ceniza) }
.tp-ficha{
  position:relative; display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:16px 18px 16px 22px; border-radius:14px; background:var(--panel); border:1px solid var(--borde);
}
.tp-ficha::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:14px 0 0 14px }
.tp-f-orig{ border-color:rgba(125,211,252,.28) }
.tp-f-orig::before{ background:var(--dato) }
.tp-f-repro{ border-color:rgba(255,90,31,.32) }
.tp-f-repro::before{ background:var(--tp-raya) }
.tp-ficha-cab{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px }
.tp-entrega{ font-family:var(--mono); font-size:11.5px; color:var(--ceniza) }
.tp-num-linea{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.tp-num{ font-family:var(--mono); font-size:24px; font-weight:600; color:var(--dato); text-decoration:none; letter-spacing:.01em; overflow-wrap:anywhere }
.tp-num:hover{ text-decoration:underline }
.tp-formato{ font-family:var(--mono); font-size:11px; color:var(--ceniza); border:1px solid var(--borde); border-radius:4px; padding:2px 6px }
.tp-veh{ margin:0; font-family:var(--display); font-size:20px; line-height:1.2 }
.tp-veh a{ color:var(--hueso); text-decoration:none }
.tp-veh a:hover{ color:var(--tp-repro) }
.tp-det{ margin:0; font-size:13.5px; color:var(--ceniza) }
.tp-det b{ color:var(--hueso); font-weight:600 }
.tp-det a{ color:var(--dato); font-family:var(--mono) }
.tp-que{ margin:0; font-size:13.5px; color:var(--ceniza); line-height:1.5 }
.tp-ops{ display:flex; flex-wrap:wrap; gap:6px }
.tp-op{ font-family:var(--mono); font-size:11.5px; padding:4px 8px; border-radius:5px; border:1px solid var(--borde); color:var(--hueso); background:var(--grafito) }
.tp-op-base{ border-color:rgba(255,90,31,.5); color:var(--tp-repro) }
.tp-cruce{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; min-height:32px; font-size:13px; color:var(--ceniza); text-decoration:none }
.tp-cruce::before{ content:""; flex:none; width:14px; height:7px; border-radius:3px }
.tp-a-repro::before{ background:var(--tp-raya) }
.tp-a-orig::before{ width:8px; height:8px; border-radius:1.5px; background:var(--dato) }
.tp-cruce:hover{ color:var(--hueso) }
.tp-ficha-pie{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  margin-top:auto; padding-top:12px; border-top:1px solid var(--borde-suave);
}

/* Soluciones por marca. */
.tp-sols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.tp-sol{
  position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 16px 14px 20px;
  border-radius:12px; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--borde);
  transition:border-color .16s;
}
.tp-sol::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 2px 2px 0; background:var(--borde) }
.tp-sol:hover{ border-color:var(--ceniza) }
.tp-sol b{ color:var(--hueso); font-size:14.5px; line-height:1.35 }
.tp-sol-marca{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza) }
.tp-sol-mod{ font-family:var(--mono); font-size:12px; color:var(--ceniza) }

/* Servicios del taller. */
.tp-servicios{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 28px; align-items:center;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); padding:20px 22px;
}
.tp-servicios h2{ font-family:var(--display); font-size:20px; margin:0 0 6px }
.tp-servicios p{ margin:0; color:var(--ceniza); font-size:14px; max-width:66ch; line-height:1.55 }
.tp-serv-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }

/* Arma tu archivo: una banda. */
.tp-arma-env{ margin-top:38px }
.tp-arma{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 28px; align-items:center;
  padding:20px 22px; border:1px solid var(--borde); border-radius:var(--radio);
  background:linear-gradient(90deg, rgba(255,90,31,.06), transparent 70%), var(--panel);
}
.tp-arma h2{ font-family:var(--display); font-size:20px; margin:0 0 6px }
.tp-arma p{ margin:0; color:var(--ceniza); font-size:14px; max-width:64ch; line-height:1.55 }
.tp-arma-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.tp-arma-acc .btn-arma{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none }

/* El buscador del catalogo, en su seccion. */
.tp-buscador-cat{ margin:6px 0 10px }
#catalogo .bajo-buscador{ margin:0 0 18px }

/* ------------------------------------------------------------------ pie -- */
.tp-pie{ margin-top:48px; border-top:1px solid var(--borde-suave); background:rgba(10,12,15,.92) }
.tp-pie-in{ display:grid; grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:24px; padding-top:30px; padding-bottom:30px }
.tp-pie-col h2{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ceniza); margin:0 0 10px; font-weight:600 }
.tp-pie-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px }
.tp-pie-col a{ display:inline-block; padding:3px 0; color:var(--hueso); text-decoration:none; font-size:13.5px }
.tp-pie-col a:hover{ color:var(--redline) }
.tp-pie-quien p{ color:var(--ceniza); font-size:13px; margin:10px 0 0; max-width:36ch; line-height:1.55 }
.tp-sellos{ display:flex; flex-wrap:wrap; gap:6px }

/* ------------------------------------------------------------ angosto -- */
@media (max-width:1060px){
  .hero .tp-hero-grid{ grid-template-columns:1fr }
  .tp-indice{ display:none }
  .tp-marcas-hero{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; max-width:560px; margin:0 0 18px }
  .tp-marcas-hero .tp-etq{ grid-column:1 / -1 }
  .tp-herr-top{ grid-template-columns:1fr }
  .tp-marcas-grilla{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .tp-mg-5, .tp-mg-6{ grid-column:1 / -1 }
  .tp-tejas{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .tp-par{ grid-template-columns:1fr }
  .tp-par-o{ justify-self:center }
  .tp-pie-in{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .tp-pie-quien{ grid-column:1 / -1 }
}

@media (max-width:760px){
  .tp-bajada{ font-size:15px; margin-bottom:14px }
  .hero .arma-cta-hero .btn-arma{ min-height:44px }
  /* En el telefono la caja de la barra esta justo arriba: la consola grande
     seria la misma busqueda dos veces en un pantallazo. */
  .tp-consola{ display:none }
  .tp-linea-herr{ display:flex; font-size:13.5px }
  .tp-ejemplos{ display:block; margin-bottom:16px }
  .tp-ejemplos .tp-etq{ display:block; margin:0 0 8px; font-size:12px }
  .tp-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-right:-16px; padding:0 16px 2px 0 }
  .tp-chips::-webkit-scrollbar{ display:none }
  .tp-chips a{ flex:none }
  .tp-chips a small{ font-size:12px }
  .tp-alcance{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .tp-alcance .tp-etq{ grid-column:1 / -1 }
  .tp-alc{ padding:10px 10px 10px 15px; gap:6px }
  .tp-alc span{ font-size:13px }

  .tp-mundo{ padding:12px 14px 12px 18px }
  .tp-mundo h2{ font-size:20px }
  .tp-mundo-datos, .tp-cobro{ font-size:13px }
  .tp-banda.tp-herr{ padding:22px 0 26px }
  .tp-dest{ grid-template-columns:96px minmax(0,1fr); grid-template-areas:"ico cab" "cubre cubre" "pie pie"; gap:10px 14px; padding:18px 14px 16px 12px }
  .tp-dest h3{ font-size:23px }
  .tp-que-hace{ font-size:13.5px }
  .tp-dest-pie .tp-acc, .tp-dest-pie .tp-acc a{ flex:1 1 100% }
  .tp-hp{ grid-template-columns:60px minmax(0,1fr); grid-template-areas:"ico txt" "ico precio"; gap:2px 12px; padding:10px 14px 10px 10px }
  .tp-hp-ico{ grid-area:ico; width:60px }
  .tp-hp-txt{ grid-area:txt }
  .tp-hp-precio{ grid-area:precio; flex-direction:row; flex-wrap:wrap; gap:2px 8px; align-items:baseline; justify-content:flex-start; text-align:left }
  .tp-puertas{ grid-template-columns:1fr; gap:10px }
  .tp-puerta{ grid-template-columns:72px minmax(0,1fr); grid-template-areas:"ico txt" "acc acc"; gap:8px 12px; padding:12px 14px 12px 10px }
  .tp-puerta-ico, .tp-puerta .tp-hex{ grid-area:ico; width:72px }
  .tp-puerta-txt{ grid-area:txt }
  .tp-puerta-acc{ grid-area:acc; flex-direction:row; justify-content:space-between; align-items:center }
  .tp-puerta-tit b{ font-size:15.5px }
  .tp-grupos{ columns:auto }
  .tp-h{ min-height:48px; padding-right:8px }
  .tp-h-nom{ font-size:14px }
  .tp-h-usar{ min-height:44px }
  .tp-herr-pie{ flex-direction:column; align-items:flex-start }

  .tp-marcas-grilla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 8px }
  .tp-mg-grupo{ grid-column:1 / -1 }
  .tp-baldosa .tp-placa{ --logo-w:84px; --logo-h:34px; height:54px }
  .tp-baldosa-n b{ font-size:18px }
  .tp-baldosa-nom{ font-size:14.5px }
  .tp-tejas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
  .tp-linea, .tp-pedir{ padding:14px }
  .tp-linea .tp-btn-sec, .tp-pedir .btn-comprar{ flex:1 1 100% }
  .tp-ficha{ padding:14px 14px 14px 18px }
  .tp-num{ font-size:21px }
  .tp-ficha-pie .tp-acc{ flex:1 1 100% }
  .tp-ficha-pie .tp-acc .btn-comprar, .tp-ficha-pie .tp-acc .tp-btn-sec{ flex:1 1 auto }
  .tp-ficha-pie > .btn-comprar{ min-height:44px }
  .tp-sols{ grid-template-columns:1fr }
  .tp-servicios, .tp-arma{ grid-template-columns:1fr; padding:18px 16px }
  .tp-serv-acc, .tp-arma-acc{ flex-direction:column; align-items:stretch }
  .tp-serv-acc .wsp{ justify-content:center }
  .tp-arma-acc .btn-arma{ justify-content:center }
  .tp-arma-env{ margin-top:28px }
  .tp-pie-in{ grid-template-columns:1fr 1fr; gap:20px }
  .tp-pie-col a{ padding:8px 0; min-height:44px }
  /* Toques de 44 px: los enlaces de texto sueltos crecen hacia arriba y abajo. */
  .tp-dest h3 a, .tp-h-nom, .tp-ver, .tp-num, .tp-cruce{ display:inline-flex; align-items:center; min-height:44px }
  .tp-det a{ display:inline-block; padding:13px 0; margin:-13px 0 }
}

/* [ZSPORT-tienda-portada-r2-movil] El telefono sin pliegues. La maqueta plegaba
   a <=760 px los grupos de herramientas y las columnas del pie; la regla del
   dueño es que las opciones se ven completas y que, si la pantalla esta cargada,
   se acomoda el diseño (espacios, ancho, densidad), nunca se esconde. Todo sigue
   a la vista; se gana lugar con filas de 44 px, cabeceras finas, el precio que
   puede partirse en dos renglones, las puertas con el texto a todo el ancho y
   el pie en renglones corridos. Los toques siguen siendo de 44 px. */
@media (max-width:760px){
  .tp-grupos-cab{ margin:20px 0 10px }
  .tp-grupo{ margin:0 0 8px; border-radius:10px }
  .tp-grupo-cab{ padding:8px 12px; font-size:14.5px }
  .tp-grupo-lista{ padding:2px 0 }
  .tp-h{ min-height:44px; padding:2px 6px 2px 12px; gap:0 8px }
  .tp-h-nom{ padding:3px 0; line-height:1.3 }
  .tp-h-precio{ white-space:normal; max-width:78px; font-size:11.5px; line-height:1.3 }

  .tp-puerta{
    grid-template-columns:56px minmax(0,1fr) auto; grid-template-areas:"ico tit acc" "txt txt txt";
    gap:6px 10px; padding:10px 12px 12px 10px; align-items:center;
  }
  .tp-puerta-ico, .tp-puerta .tp-hex{ width:56px }
  .tp-puerta-txt{ display:contents }
  .tp-puerta-tit{ grid-area:tit; min-width:0; line-height:1.25; display:flex; align-items:center; min-height:44px }
  .tp-puerta-tit b{ font-size:15px }
  .tp-puerta-txt > span{ grid-area:txt; font-size:12.5px; line-height:1.45 }
  .tp-puerta-acc{ grid-area:acc; flex-direction:column; align-items:flex-end; gap:4px }
  .tp-puerta-acc .tp-btn-sec{ padding:0 12px }

  .tp-pie{ margin-top:32px }
  .tp-pie-in{ grid-template-columns:1fr; gap:12px; padding-top:22px; padding-bottom:22px }
  .tp-pie-quien p{ max-width:none; margin-top:6px }
  .tp-pie-col h2{ margin:0 }
  .tp-pie-col ul{ display:flex; flex-wrap:wrap; gap:0 20px }
  .tp-pie-col a{ display:inline-flex; align-items:center; min-height:44px; padding:0 }
}

@media (prefers-reduced-motion:reduce){
  .tp-baldosa, .tp-baldosa:hover, .tp-baldosa:focus-visible{ transform:none; transition:none }
  .tp-placa, .tp-placa img{ transition:none }
}