/* Componentes nuevos del sitio Alphaprint (post kickoff 28-09-2026).
   Se carga después del CSS inline de cada página y usa sus mismas variables. */

/* ---------- Header con menú ---------- */
.top .wrap{gap:1.5rem}
.top .logo{flex:0 0 auto}
.menu{display:flex;align-items:center;gap:1.4rem;font-family:var(--display);font-weight:600;font-size:.9rem;margin-right:auto}
.menu>a,.menu .dd-btn{color:var(--tinta);text-decoration:none;padding:.4rem 0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;position:relative}
.menu>a::after,.menu .dd-btn::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--marca);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.menu>a:hover::after,.menu .dd.abierto .dd-btn::after,.menu>a[aria-current]::after{transform:scaleX(1)}
.dd{position:relative}
.dd-btn svg{width:.8em;height:.8em;fill:currentColor;transition:transform .25s} .dd.abierto .dd-btn svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 14px);left:-1rem;width:min(1040px,calc(100vw - 40px));background:#fff;border:1px solid var(--linea);border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);padding:1.4rem 1.6rem 1.1rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .25s var(--ease),visibility 0s .25s;z-index:70;font-family:var(--cuerpo);font-weight:400}
.dd.abierto .dd-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem 1.6rem}
.dd-col b{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--marca);margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--linea)}
.dd-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.dd-col a{display:block;text-decoration:none;color:#333;font-size:.88rem;padding:.25rem .4rem;margin-left:-.4rem;border-radius:6px;transition:background .15s,color .15s}
.dd-col a:hover{background:#fff3f5;color:var(--marca)}
.dd-pie{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--linea);font-size:.85rem;color:var(--gris)}
.dd-pie a{color:var(--marca);font-weight:600}
.ham{display:none;width:44px;height:44px;border:1px solid var(--linea);border-radius:10px;background:#fff;cursor:pointer;place-items:center}
.ham span{display:block;width:20px;height:2px;background:var(--tinta);position:relative;transition:background .2s}
.ham span::before,.ham span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--tinta);transition:transform .25s}
.ham span::before{top:-6px} .ham span::after{top:6px}
.menu-on .ham span{background:transparent} .menu-on .ham span::before{transform:translateY(6px) rotate(45deg)} .menu-on .ham span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1100px){.dd-cols{grid-template-columns:repeat(3,1fr)}.top .lnk{display:none}}
@media (max-width:960px){
  .ham{display:grid}
  /* backdrop-filter en .top lo vuelve bloque contenedor de los hijos fixed:
     el menú quedaba con alto 0 (bottom:0 del header). Sin filtro en móvil. */
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .menu{position:fixed;top:68px;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:1rem 20px 6rem;overflow:auto;transform:translateX(100%);transition:transform .3s var(--ease);margin:0;z-index:65;font-size:1.05rem}
  .menu-on .menu{transform:none}
  .menu>a,.menu .dd-btn{padding:.9rem 0;border-bottom:1px solid var(--linea);width:100%;justify-content:space-between}
  .menu>a::after,.menu .dd-btn::after{display:none}
  .dd-panel{position:static;width:auto;box-shadow:none;border:0;padding:.4rem 0 .6rem;opacity:1;visibility:visible;transform:none;display:none}
  .dd.abierto .dd-panel{display:block}
  .dd-cols{grid-template-columns:1fr 1fr;gap:1rem}
  .top .der .btn{display:none}
}
@media (max-width:560px){.dd-cols{grid-template-columns:1fr}}

/* ---------- Letreros (carrusel de productos) ---------- */
.letreros{padding:2.2rem 0 2.6rem;border-bottom:1px solid var(--linea)}
.letreros .k{display:block;text-align:center;margin-bottom:1rem}
.letreros .fila{animation-duration:70s}
.letreros .fila.rev{animation-duration:82s}
.let{text-decoration:none;transition:transform .2s var(--ease),filter .2s}
.let:hover{transform:translateY(-3px) rotate(-1deg);filter:brightness(1.08)}
.letreros .fila:empty{min-height:3.6rem}

/* ---------- Sección productos ---------- */
.productos .cab{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end;margin-bottom:2rem}
.productos .cab>*{min-width:0}
.busca{position:relative;min-width:min(360px,100%)}
.busca input{width:100%;padding:.85rem 1rem .85rem 2.7rem;border:1px solid var(--linea);border-radius:12px;background:#fff;font-size:.95rem}
.busca input:focus{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(208,16,58,.12)}
.busca svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:1.05rem;height:1.05rem;fill:none;stroke:var(--gris);stroke-width:2;pointer-events:none}
.lista-prod{border-top:1px solid var(--linea)}
.cat{border-bottom:1px solid var(--linea)}
.cat summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em}
.cat summary::-webkit-details-marker{display:none}
.cat summary small{font-family:var(--cuerpo);font-weight:400;font-size:.82rem;color:var(--gris);display:inline-flex;align-items:center;gap:.8rem;white-space:nowrap}
.cat summary small::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--marca);line-height:1;transition:transform .3s}
.cat[open] summary small::after{transform:rotate(45deg)}
.prods{list-style:none;padding:0 0 1.2rem;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.prods li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border:1px solid var(--linea);border-radius:10px;background:#fff;transition:border-color .2s,transform .2s var(--ease)}
.prods li:hover{border-color:var(--tinta);transform:translateY(-2px)}
.prods b{font-family:var(--display);font-size:.98rem} .prods p{color:#555;font-size:.85rem;margin-top:.15rem}
.prods .btn{padding:.55rem .9rem;font-size:.82rem;flex:0 0 auto}
.sin-prod{padding:2rem 0;color:var(--gris)}
@media (max-width:860px){.productos .cab{grid-template-columns:1fr}.prods{grid-template-columns:1fr}}

/* ---------- Ubicación e instalaciones ---------- */
.ubic .placa{aspect-ratio:16/10}
.ubic .datos{display:grid;gap:1rem;margin-top:1.6rem}
.ubic .dato{display:flex;gap:.9rem;align-items:flex-start}
.ubic .dato svg{width:22px;height:22px;flex:0 0 auto;fill:var(--marca);margin-top:.15rem}
.ubic .dato b{display:block;font-family:var(--display)} .ubic .dato span{color:#555;font-size:.93rem}
.ubic .mapa{margin-top:1.6rem;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);aspect-ratio:16/8;background:var(--hueso)}
.ubic .mapa iframe{width:100%;height:100%;border:0;display:block}
.instal{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2.2rem}
.instal>*{min-width:0}
.instal .placa{aspect-ratio:4/3}
@media (max-width:860px){.instal{grid-template-columns:1fr 1fr}.ubic .mapa{aspect-ratio:16/10}}
@media (max-width:560px){.instal{grid-template-columns:1fr}}

/* ---------- Landings por segmento ---------- */
.segs{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.2rem}
.segs>*{min-width:0}
.tarj{position:relative;display:block;text-decoration:none;color:#fff;border-radius:var(--radio);overflow:hidden;aspect-ratio:16/9;background:var(--tinta);isolation:isolate}
.tarj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);z-index:-1}
.tarj:hover img{transform:scale(1.05)}
.tarj::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.75));z-index:0}
.tarj .txt{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:1}
.tarj .k{color:#ffd0da;margin-bottom:.4rem}
.tarj h3{font-size:clamp(1.3rem,2.4vw,1.9rem);color:#fff}
.tarj p{color:#e8e8e8;font-size:.92rem;margin-top:.4rem;max-width:44ch}
.tarj .btn{margin-top:.9rem;padding:.7rem 1.1rem;font-size:.85rem}
@media (max-width:860px){.segs{grid-template-columns:1fr}}

/* ---------- Para quién ---------- */
.para{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.para span{font-size:.85rem;padding:.4rem .8rem;border:1px solid var(--linea);border-radius:99px;color:#444;background:#fff}

/* ---------- Marquesina de contacto sobre el header ---------- */
.marq{background:var(--tinta);color:#eee;font-size:.8rem;overflow:hidden;border-bottom:1px solid #000;position:relative;z-index:51}
.marq-fila{display:flex;gap:2.4rem;width:max-content;padding:.45rem 0;animation:marq 42s linear infinite;white-space:nowrap}
.marq:hover .marq-fila{animation-play-state:paused}
.marq-fila span{display:inline-flex;align-items:center;gap:.45rem}
.marq-fila svg{width:.95em;height:.95em;fill:var(--marca);flex:0 0 auto}
.marq-fila a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)} .marq-fila a:hover{border-color:#fff}
.marq-fila b{color:#fff;font-weight:600}
.marq-fila .sep{color:var(--marca);font-weight:700}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-fila{animation:none;width:auto;flex-wrap:wrap;gap:.6rem 1.4rem;padding:.5rem 20px}.marq-fila .sep{display:none}}

/* ---------- Hero cinematográfico en la portada (mismo patrón de las landings) ---------- */
.hero--film{position:relative;overflow:hidden;background:#100E0C;color:#fff;padding-top:clamp(2.6rem,6vw,5.2rem);padding-bottom:clamp(2.6rem,6vw,4.4rem)}
.hero--film .hero__bg{position:absolute;inset:0;z-index:0}
.hero--film .hero__bg img,.hero--film .hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--film .hero__bg video{opacity:0;transition:opacity 1.2s ease;pointer-events:none} .hero--film .hero__bg video.ok{opacity:1}
.hero--film .hero__bg::after{content:"";position:absolute;inset:0;
 /* Velo liviano: oscurece solo detrás de la columna de texto (izquierda) y
    deja ver la tienda en el resto. La legibilidad la termina el text-shadow. */
 background:linear-gradient(96deg,rgba(14,12,11,.72) 0%,rgba(14,12,11,.55) 38%,rgba(14,12,11,.18) 62%,rgba(14,12,11,.08) 100%),linear-gradient(180deg,rgba(14,12,11,.22) 0%,rgba(14,12,11,0) 30%,rgba(14,12,11,.35) 100%)}
.hero--film h1,.hero--film .k,.hero--film .lead,.hero--film .ticks li,.hero--film .vivo{text-shadow:0 1px 2px rgba(0,0,0,.55),0 6px 24px rgba(0,0,0,.45)}
.hero--film .ticks li::before{box-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero--film .para span{background:rgba(14,12,11,.45);border-color:rgba(255,255,255,.3);backdrop-filter:blur(4px)}
.hero--film .wrap{position:relative;z-index:2}
.hero--film h1{color:#fff} .hero--film h1 em{color:#FF6A52}
.hero--film .lead{color:rgba(255,255,255,.9)}
.hero--film .ticks li{color:rgba(255,255,255,.86)}
.hero--film .vivo{color:rgba(255,255,255,.82)} .hero--film .vivo b,.hero--film .estado-txt,.hero--film .estado-corto{color:#fff}
.hero--film .wiz{color:var(--tinta)}
.hero--film .para span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.hero__et{position:absolute;z-index:2;right:24px;bottom:18px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);background:rgba(14,12,11,.55);border-radius:99px;padding:5px 10px}
@media (max-width:860px){.hero--film .hero__bg::after{background:linear-gradient(180deg,rgba(14,12,11,.55) 0%,rgba(14,12,11,.45) 40%,rgba(14,12,11,.7) 100%)}.hero__et{right:12px;bottom:12px}}

/* ---------- Cotizador: la fila Cantidad/Tamaño NO es un letrero ----------
   El CSS inline de la propuesta define `.fila` como la cinta animada de letreros
   (width:max-content + animation corre) y `.wiz .fila` solo cambia el display a
   grid: la animación se heredaba y los campos del paso 2 se deslizaban. */
.wiz .fila{animation:none!important;width:auto;padding:0;transform:none}