/* ============================================================
   SUPRA CASES — Hero, buscador de modelo, tira, secciones, tarjetas de categoria
   Extraido de supra-cases-v3.html lineas 188-308
   ============================================================ */

/* ============ HERO GRANDE ============ */
.hero{position:relative;background:var(--negro)}
.marco{position:relative;height:clamp(340px,52vw,560px);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.slide.act{opacity:1;pointer-events:auto}
.slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-es-img .velo{display:none}
.slide-link{position:absolute;inset:0;z-index:2}
.slide-fondo{position:absolute;inset:0;width:100%;height:100%}
.slide-sello{position:absolute;right:clamp(20px,5vw,64px);top:clamp(20px,6vw,58px);
  border:2.5px solid;border-radius:999px;padding:9px 20px;font-size:clamp(12px,1.4vw,15px);
  font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.02em;
  transform:rotate(-7deg);background:rgba(14,14,14,.55);backdrop-filter:blur(2px)}
.slide-cpo{position:relative;height:100%;max-width:var(--max);margin:0 auto;padding:0 20px;
  display:flex;flex-direction:column;justify-content:center;max-width:min(var(--max),100%)}
.slide-txt{max-width:min(560px,90%)}
/* Fotos de producto en la mitad derecha del panel, en abanico. La caja se
   alinea con el ancho del contenido (--max), no con el borde de la ventana, y
   las tres fotos quedan dentro de ella aun giradas: a 1200 px la de la derecha
   se salia de la pantalla. */
.slide-fotos{position:absolute;top:50%;right:max(20px,calc((100% - var(--max))/2 + 20px));
  width:min(42%,500px);aspect-ratio:1.25;transform:translateY(-46%);pointer-events:none}
.slide-foto{position:absolute;top:50%;left:50%;width:58%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-g);box-shadow:0 18px 40px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.08)}
.slide-foto.f1{z-index:3;transform:translate(-50%,-50%) rotate(-2deg)}
.slide-foto.f2{z-index:2;transform:translate(-82%,-44%) rotate(-11deg);opacity:.92}
.slide-foto.f3{z-index:1;transform:translate(-20%,-56%) rotate(9deg);opacity:.92}
.slide-fotos.n1 .slide-foto.f1{width:66%}
.slide .et{display:inline-block;background:var(--amarillo);color:var(--negro);font-size:12px;
  font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 10px;border-radius:3px;margin-bottom:14px}
.slide .slide-tit{color:#fff;font-size:clamp(29px,4.4vw,52px);margin-bottom:12px;max-width:15ch}
.slide .slide-tit em{color:var(--amarillo);font-style:italic}
.slide p{color:#D2D2D8;font-size:clamp(14.5px,1.4vw,17px);margin-bottom:22px;max-width:44ch}
.velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,14,.94) 0%,rgba(14,14,14,.72) 46%,rgba(14,14,14,.25) 100%)}
.velo-b{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,14,14,.7) 100%)}
.hero-nav{position:absolute;left:0;right:0;bottom:22px;z-index:5}
.hero-nav-in{max-width:var(--max);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:10px}
.punto{height:5px;width:34px;border-radius:3px;background:rgba(255,255,255,.32);transition:all var(--t)}
.punto.act{background:var(--amarillo);width:56px}
.flecha{margin-left:auto;display:flex;gap:8px}
.flecha button{width:40px;height:40px;border:1.5px solid rgba(255,255,255,.3);border-radius:var(--r);
  display:grid;place-items:center;color:#fff;transition:all var(--t)}
.flecha button:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--negro)}
.flecha svg{width:17px;height:17px}

/* Buscador de modelo montado sobre el hero */
.finder-zona{background:linear-gradient(180deg,var(--negro) 0 46px,var(--humo) 46px 100%);
  border-bottom:1px solid var(--linea)}
.finder{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-g);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.5);overflow:hidden}
.finder-top{padding:16px 18px 0}
.finder-lbl{font-size:15px;font-weight:800;font-style:italic;text-transform:uppercase;
  margin-bottom:10px;display:flex;align-items:center;gap:9px}
.finder-lbl i{width:7px;height:18px;background:var(--amarillo);border-radius:2px;display:block}
.finder-inp{display:flex;align-items:center;gap:11px;border:2px solid var(--linea);
  border-radius:var(--r);padding:0 13px;transition:border-color var(--t),box-shadow var(--t)}
.finder-inp:focus-within{border-color:var(--amarillo);box-shadow:0 0 0 4px var(--amarillo-sombra)}
.finder-inp svg{width:19px;height:19px;color:var(--texto-3);flex:none}
.finder-inp input{flex:1;height:52px;border:none;outline:none;font-size:16.5px;font-weight:500;background:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px 18px 15px}
.chip{font-size:13px;font-weight:600;padding:5px 12px;border:1px solid var(--linea);
  border-radius:20px;transition:all var(--t);color:var(--texto-2)}
.chip:hover{border-color:var(--negro);color:var(--negro);background:var(--humo)}
.finder-out{border-top:1px solid var(--linea);max-height:340px;overflow:auto;overscroll-behavior:contain}
.fila{display:flex;align-items:center;gap:13px;padding:12px 18px;border-bottom:1px solid var(--humo-2);
  width:100%;text-align:left;transition:background var(--t)}
.fila:last-child{border-bottom:none}
.fila:hover,.fila.sel{background:var(--humo)}
.fila-t{font-weight:700;font-size:15px;line-height:1.25}
.fila-s{font-size:12.5px;color:var(--texto-2)}
.fila-p{margin-left:auto;text-align:right;flex:none;display:flex;align-items:center;gap:10px}
.fila-p b{font-size:15px;font-weight:800}
.fila-p svg{width:16px;height:16px;color:var(--texto-3)}
.finder-msg{padding:26px 18px;text-align:center;color:var(--texto-2);font-size:14.5px}

/* ============ TIRA ============ */
.tira{background:var(--negro);color:#fff}
.tira-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.tira-i{background:var(--negro);padding:16px 18px;display:flex;gap:11px;align-items:flex-start}
.tira-i svg{width:19px;height:19px;color:var(--amarillo);flex:none;margin-top:2px}
.tira-i b{display:block;font-size:14px;font-weight:700;margin-bottom:1px}
.tira-i span{font-size:12.5px;color:#9A9AA3;line-height:1.4;display:block}

/* ============ SECCIONES ============ */
main{flex:1}
.sec{padding:58px 0}
.sec-alt{background:var(--humo);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.sec-oscura{background:var(--negro);color:#fff}
.sec-oscura h2{color:#fff}
.sec-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.sec-cab p{margin:8px 0 0;color:var(--texto-2);font-size:15px;max-width:60ch}
.sec-oscura .sec-cab p{color:#A9A9B2}

/* Componentes claros dentro de una banda oscura.
   .sec-oscura pone color:#fff en toda la seccion, y los componentes que traen
   su propio fondo claro (.bloque, .esc) se quedaban con texto blanco sobre
   gris claro: invisibles. Se invierten aqui, en un solo sitio, para que
   cualquier componente que se meta en una banda oscura se vea bien sin que la
   plantilla tenga que pasar modificadores. */
.sec-oscura .bloque{background:var(--negro-2);border-color:rgba(255,255,255,.12)}
.sec-oscura .bloque-cab{border-bottom-color:rgba(255,255,255,.12)}
.sec-oscura .esc{background:rgba(255,255,255,.055);color:#C9C9D0}
.sec-oscura .esc-p{color:#fff}
.sec-oscura .esc-promo{background:var(--amarillo)}
.sec-oscura .esc-promo,.sec-oscura .esc-promo .esc-p{color:var(--negro)}
.sec-oscura .nota-pago{color:#9A9AA3}

/* Dos columnas. En el prototipo la rejilla iba en un style inline y al CSS
   solo viajaba la clase, porque alli solo servia de gancho para el @media de
   07-responsive.css. Al portar las plantillas la clase se quedo sin rejilla y
   las dos columnas se apilaban a lo ancho de la pagina: las tablas de mayoreo
   de la portada salian una debajo de otra, a 1.200 px de ancho cada una. */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
/* El cierre lleva texto a la izquierda y tarjeta a la derecha, con el reparto
   y el centrado vertical del prototipo. */
.dos-col-cierre{grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
/* Las dos tablas de mayoreo lado a lado. TPU tiene ocho escalones y Acrigel
   cinco: alineadas arriba, bajo Acrigel quedaba un hueco de tres filas. Se
   igualan de alto y los escalones reparten el espacio; la nota queda al pie. */
:is(.dos-col,.layout).tarifas-par{align-items:stretch}
.tarifas-par>.bloque{display:flex;flex-direction:column}
.tarifas-par .bloque-cpo{flex:1;display:flex;flex-direction:column}
.tarifas-par .escalones{flex:1;grid-auto-rows:1fr}
.link-mas{font-size:14px;font-weight:700;flex:none;text-transform:uppercase;letter-spacing:.02em;
  border-bottom:2px solid var(--amarillo);padding-bottom:3px;transition:color var(--t)}
.link-mas:hover{color:var(--amarillo-osc)}

/* ============ TARJETAS DE CATEGORÍA ============ */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{border:1px solid var(--linea);border-radius:var(--r-g);padding:20px;background:var(--blanco);
  transition:border-color var(--t),transform var(--t);display:flex;flex-direction:column;
  min-height:150px;position:relative;overflow:hidden}
.cat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,var(--amarillo))}
.cat:hover{border-color:var(--negro)}
.cat h3{font-size:19px;margin-bottom:6px;font-style:italic;text-transform:uppercase;letter-spacing:-.02em}
.cat p{font-size:14px;color:var(--texto-2);margin-bottom:14px}
.cat-pie{margin-top:auto;font-size:13px;font-weight:700;color:var(--texto-3)}
.cat-lista{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
/* En las tarjetas de "Que estas buscando" los chips siguen a la descripcion:
   empujados al fondo dejaban media tarjeta vacia en las que tienen pocos. */
.cats-raiz .cat-lista{margin-top:0}
.cats-4{grid-template-columns:repeat(4,1fr)}
.sec-intro{padding:40px 0 0}
.sec-intro .prosa{max-width:62ch;margin:0 auto;text-align:center;font-size:18px;line-height:1.55;color:var(--texto)}
.sec-intro .prosa p:last-child{margin-bottom:0}
.cat-lista span{font-size:12.5px;font-weight:600;color:var(--texto-2);
  border:1px solid var(--linea);border-radius:20px;padding:3px 10px}

/* ============ FOTO PROVISIONAL DE PRODUCTO ============ */
.ph{position:relative;width:100%;aspect-ratio:1;overflow:hidden;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent) 0 12px, transparent 12px 26px),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, #fff) 0%, var(--humo) 100%);
  display:grid;place-items:center;padding:16px;text-align:center}
.ph b{font-size:clamp(12px,1.9vw,16px);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.12;color:var(--negro);opacity:.8;margin-top:4px}
.ph-ico{display:block;width:clamp(26px,5vw,38px);height:clamp(26px,5vw,38px);margin:0 auto 6px;
  color:var(--negro);opacity:.3}
.ph-ico svg{width:100%;height:100%}
.ph i{position:absolute;bottom:8px;left:0;right:0;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--negro);opacity:.42}
.ph::after{content:'';position:absolute;inset:6px;border:1.5px dashed color-mix(in srgb,var(--c) 45%,transparent);
  border-radius:5px;pointer-events:none}
.fam .ph::after,.item .ph::after{inset:3px;border-width:1px}
.fam .ph-ico,.item .ph-ico{display:none}
.ph-g b{font-size:clamp(20px,3vw,32px)}
.ph-img{background:var(--humo);padding:0;display:block}
.ph-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.prod:hover .ph-img img{transform:scale(1.05)}
.mod-item .ph-img,.fam .ph-img,.item .ph-img{background:var(--humo)}

/* Banda de mayoreo de la portada: las dos listas oscuras del prototipo. */
.tarifa-oscura{background:var(--negro-2);border-radius:var(--r-g);padding:22px;display:flex;flex-direction:column}
.tarifa-oscura h3{font-style:italic;text-transform:uppercase;margin-bottom:14px}
.tarifa-oscura ul{list-style:none;margin:0;padding:0;color:#C9C9D0;flex:1;display:grid;grid-auto-rows:1fr}
.tarifa-oscura li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.tarifa-oscura li:last-child{border-bottom:0}
.tarifa-oscura li b{color:#fff}
.tarifa-oscura li em{color:var(--amarillo);font-size:12px;font-style:normal;font-weight:700;margin-left:6px}