/* Textil Rosario · insumos para sublimar (demo Falince)
   Los colores del logo y nada más: negro y blanco. Letra fina, mucho aire,
   y los productos blancos brillando sobre negro. */
:root {
  --negro: #0A0A0A; --negro-2: #141414; --gris: #8A8A8A; --gris-claro: #BDBDBD;
  --blanco: #FFFFFF; --hueso: #F4F4F2; --tinta: #0A0A0A; --tinta-suave: #6B6B6B;
  --linea: rgba(10, 10, 10, .12); --linea-clara: rgba(255, 255, 255, .14);
  --sans: 'Inter Tight', system-ui, sans-serif;
  --margen: clamp(20px, 6vw, 96px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--negro); color: var(--blanco); font: 300 17px/1.55 var(--sans); letter-spacing: -.005em; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; font-weight: 200; }
.eti { margin: 0 0 18px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); font-weight: 400; }
.tit { margin: 0 0 20px; font-weight: 300; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -.03em; }
.baja { margin: 0; max-width: 44ch; color: var(--gris); font-size: clamp(15px, 1.1vw, 17px); }
.pildora { display: inline-block; font: 400 13px/1 var(--sans); letter-spacing: .06em; padding: 15px 26px; border-radius: 999px; border: 1px solid currentColor; transition: background .3s, color .3s, transform .3s; }
.pildora:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); transform: translateY(-1px); }
.pildora--llena { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.pildora--llena:hover { background: transparent; color: var(--blanco); }
/* secciones claras */
.claro { background: var(--blanco); color: var(--tinta); }
.claro .eti, .claro .baja { color: var(--tinta-suave); }
.claro .pildora:hover { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.claro .pildora--llena { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.claro .pildora--llena:hover { background: transparent; color: var(--tinta); }
.cifras { display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 3vw, 48px); margin: 30px 0 34px; padding: 0; }
.cifras div { margin: 0; }
.cifras dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; font-weight: 400; }
.cifras dd { margin: 0; font-size: 17px; font-weight: 400; }

/* aviso de carga: una gota que cae */
.carga { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--negro); transition: opacity .7s ease, visibility 0s .7s; }
.carga.fuera { opacity: 0; visibility: hidden; }
.carga__gota { width: 10px; height: 10px; border-radius: 50%; background: var(--blanco); animation: gota 1.1s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
@keyframes gota { from { transform: translateY(-18px); } to { transform: translateY(18px) scaleX(1.3) scaleY(.8); } }
.carga__marca { position: absolute; bottom: 42px; margin: 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gris); }
.sin-js .carga { display: none; }

/* cabecera: en diferencia, se lee sobre negro y sobre blanco */
.tope { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--margen); color: #fff; mix-blend-mode: difference; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tope.oculto { transform: translateY(-110%); }
.tope__nav { display: flex; gap: 30px; font-size: 13px; letter-spacing: .06em; opacity: .8; }
.tope__nav a { position: relative; padding: 4px 0; }
.tope__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .4s cubic-bezier(.2, .7, .2, 1); }
.tope__nav a:hover::after { right: 0; }
.tope__cta { font-size: 13px; letter-spacing: .06em; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; transition: background .3s, color .3s; }
.tope__cta:hover { background: #fff; color: #000; }

.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* el logo del encabezado arranca grande en el centro del banner y viaja a su lugar (app.js) */
.tope__marca { position: relative; flex: none; width: 98px; height: 46px; }
/* la imagen se dibuja grande y se achica con scale: así no se pixela cuando está en el centro */
.tope__logo { position: absolute; left: 0; top: 0; height: var(--logo-grande, 46px); width: auto; max-width: none; transform-origin: 0 0; }
.banner__disco { position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--disco, 60vmin); aspect-ratio: 1; border-radius: 50%; background: #000; transform: translate(-50%, -50%); box-shadow: 0 0 0 calc(var(--disco, 60vmin) * .012) #fff, 0 30px 120px rgba(0, 0, 0, .6); will-change: transform, opacity; }
.banner__disco::after { content: ''; position: absolute; inset: 4.2%; border-radius: 50%; border: calc(var(--disco, 60vmin) * .012) solid #fff; }

/* ---------- 0 · banner: el logo sobre la tela ---------- */
.banner { position: relative; height: 100svh; overflow: hidden; background: var(--negro); }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 45%; will-change: transform, opacity; }
.banner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
.banner__eti { position: absolute; z-index: 2; left: var(--margen); bottom: 34px; margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.banner__baja { position: absolute; z-index: 2; right: var(--margen); bottom: 30px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.banner__baja span { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.banner__baja span::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: baja 1.8s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes baja { to { top: 100%; } }

/* ---------- 1 · despiece ---------- */
.portada { position: relative; }
.portada__pista { height: 700svh; }
.portada__escena { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #1F1F1F 0%, #101010 45%, var(--negro) 100%); }
.gigante { position: absolute; z-index: 1; left: 0; top: 50%; margin: 0; white-space: nowrap; font-weight: 200; font-size: 30vw; line-height: 1; letter-spacing: -.06em; color: rgba(255, 255, 255, .05); transform: translate3d(0, -50%, 0); will-change: transform, opacity; pointer-events: none; }
.despiece { position: absolute; z-index: 3; left: 50%; top: 50%; height: 92svh; aspect-ratio: 2 / 3; transform: translate3d(-50%, -50%, 0); transform-origin: 50% 50%; will-change: transform; }
.despiece__pila { position: absolute; inset: 0; }
.pieza { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; will-change: transform; }
.portada__texto { position: absolute; z-index: 6; left: var(--margen); top: 50%; translate: 0 -50%; max-width: 470px; will-change: transform, opacity; }
.portada__tit { margin: 0 0 18px; font-weight: 200; font-size: clamp(48px, 6.4vw, 104px); line-height: .98; letter-spacing: -.05em; }
.portada__tit em { font-weight: 400; }
.portada__baja { margin: 0; color: var(--gris); max-width: 34ch; font-size: 16px; }

/* notas: una línea sale hacia la pieza y el texto queda a su altura */
.notas { position: absolute; inset: 0; z-index: 7; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.notas li { position: absolute; top: 50%; width: min(300px, 24vw); opacity: 0; transform: translateY(calc(-50% + 12px)); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.notas li.on { opacity: 1; transform: translateY(-50%); }
.nota--izq { left: var(--margen); }
.nota--der { right: var(--margen); text-align: right; }
.notas li::before { content: ''; position: absolute; top: 14px; width: var(--largo, 120px); height: 1px; background: rgba(255, 255, 255, .45); transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .7, .2, 1) .1s; }
.nota--izq::before { left: calc(100% + 18px); transform-origin: left; }
.nota--der::before { right: calc(100% + 18px); transform-origin: right; }
.notas li.on::before { transform: scaleX(1); }
.notas b { display: block; font-weight: 400; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -.02em; }
.notas span { display: block; color: var(--gris); font-size: 15px; line-height: 1.45; margin-top: 6px; }

.final { position: absolute; z-index: 7; left: var(--margen); top: 50%; translate: 0 -50%; max-width: 520px; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .8s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.final.on { opacity: 1; transform: none; pointer-events: auto; }
.final__tit { margin: 0 0 30px; font-weight: 200; font-size: clamp(40px, 4.8vw, 78px); line-height: 1; letter-spacing: -.045em; }
.final__tit em { font-weight: 400; }

.barra { position: absolute; z-index: 8; left: var(--margen); right: var(--margen); bottom: 26px; height: 1px; background: var(--linea-clara); }
.barra i { position: absolute; inset: 0; background: var(--blanco); transform-origin: left; transform: scaleX(0); }

/* ---------- 2 · productos: pantallas que se apilan, negro y blanco alternados ---------- */
.productos { position: relative; background: var(--blanco); color: var(--tinta); }
.productos__cab { padding: clamp(110px, 18svh, 200px) var(--margen) clamp(60px, 10svh, 120px); }
.productos__cab .eti { color: var(--tinta-suave); }
.productos__cab .tit { font-size: clamp(40px, 5.4vw, 88px); font-weight: 200; letter-spacing: -.045em; line-height: 1; }
.productos__cab .tit em { font-weight: 400; }
.pantalla { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 4vw; padding: 0 var(--margen); background: var(--negro); color: var(--blanco); }
.pantalla--alt { background: var(--hueso); color: var(--tinta); }
.pantalla--alt .eti, .pantalla--alt .baja, .pantalla--alt .cifras dt { color: var(--tinta-suave); }
.pantalla--alt .pildora:hover { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.pantalla__gigante { position: absolute; left: 0; top: 50%; margin: 0; transform: translateY(-50%); white-space: nowrap; font-weight: 200; font-size: 24vw; line-height: 1; letter-spacing: -.06em; color: rgba(255, 255, 255, .05); pointer-events: none; }
.pantalla--alt .pantalla__gigante { color: rgba(10, 10, 10, .05); }
.pantalla__fig { position: relative; z-index: 1; margin: 0; justify-self: center; width: min(46vw, 76svh); aspect-ratio: 1; }
.pantalla__fig img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .35)); }
.pantalla--alt .pantalla__fig img { filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .16)); }
.pantalla__texto { position: relative; z-index: 1; max-width: 460px; }
.pantalla__tit { margin: 0 0 18px; font-weight: 300; font-size: clamp(34px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -.04em; }

/* ---------- 3 · catálogo ---------- */
.catalogo { padding: clamp(100px, 16svh, 180px) var(--margen); background: var(--blanco); color: var(--tinta); position: relative; z-index: 1; }
.catalogo .eti, .catalogo .baja { color: var(--tinta-suave); }
.catalogo__cab { margin-bottom: 56px; }
.catalogo__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.catalogo__lista li { background: var(--blanco); }
.catalogo__lista a { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 28px; height: 100%; transition: background .3s; }
.catalogo__lista a:hover { background: var(--hueso); }
.catalogo__foto { display: block; aspect-ratio: 1; margin-bottom: 14px; }
.catalogo__foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.catalogo__lista a:hover img { transform: scale(1.06) rotate(-3deg); }
.catalogo__lista b { font-weight: 400; font-size: 17px; letter-spacing: -.01em; }
.catalogo__pedir { font-size: 13px; color: var(--tinta-suave); }

/* ---------- 4 · cómo pedir ---------- */
.pedir { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6vw; padding: clamp(90px, 14svh, 160px) var(--margen); background: var(--negro); position: relative; z-index: 1; }
.pedir__lista { list-style: none; margin: 0; padding: 0; }
.pedir__lista li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--linea-clara); }
.pedir__lista li:last-child { border-bottom: 1px solid var(--linea-clara); }
.pedir__lista span { font-size: 12px; letter-spacing: .2em; color: var(--gris); padding-top: 6px; }
.pedir__lista h3 { margin: 0 0 6px; font-weight: 400; font-size: 22px; letter-spacing: -.02em; }
.pedir__lista p { margin: 0; color: var(--gris); }

/* ---------- 5 · contacto ---------- */
.contacto { padding: clamp(110px, 18svh, 220px) var(--margen); background: var(--blanco); color: var(--tinta); text-align: center; position: relative; z-index: 1; }
.contacto .eti { color: var(--tinta-suave); }
.contacto__tit { margin: 0 auto 40px; font-weight: 200; font-size: clamp(44px, 6.4vw, 110px); line-height: .98; letter-spacing: -.055em; }
.contacto__tit em { font-weight: 400; }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contacto .pildora:hover { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.contacto .pildora--llena { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.contacto .pildora--llena:hover { background: transparent; color: var(--tinta); }

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding: 34px var(--margen) 44px; background: var(--negro); color: rgba(255, 255, 255, .55); font-size: 13px; position: relative; z-index: 1; }
.pie__marca { margin: 0; color: var(--blanco); letter-spacing: .26em; text-transform: uppercase; font-size: 12px; font-weight: 500; }
.pie__marca em { font-weight: 300; }
.pie__demo { margin: 0; max-width: 64ch; }
.pie a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .tope__nav { display: none; }
  .despiece { height: 74svh; }
  .portada__texto, .final { top: auto; bottom: 60px; translate: none; left: 20px; right: 20px; max-width: none; }
  .portada__escena::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; z-index: 4; background: linear-gradient(transparent, rgba(10, 10, 10, .9) 60%); pointer-events: none; }
  .portada__tit { font-size: 52px; }
  .notas li { width: 40vw; }
  .notas li::before { display: none; }
  .nota--izq { left: 16px; }
  .nota--der { right: 16px; }
  .notas b { font-size: 16px; }
  .notas span { font-size: 12.5px; }
  .gigante { font-size: 44vw; top: 38%; }
  .pantalla { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: end; padding: 80px 20px 40px; gap: 10px; }
  .pantalla__fig { width: min(78vw, 46svh); align-self: center; }
  .pantalla__gigante { font-size: 40vw; top: 34%; }
  .cifras { margin: 20px 0 24px; }
  .pedir { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .notas li, .final { transition: none; }
}