/* Aplicaciones: un rubro por franja, con la barra de rubros pegada.

   El hero reusa las clases de Como comprar (cbhero): mismo negro, misma trama
   y mismo resplandor, para que las paginas del sitio se lean como hermanas.
   Por eso este archivo va DESPUES de comprar.css en el index.

   Las franjas copian la receta de las bandas de la home (bandagrid/bandaimg):
   foto con marco y sombra de un lado, texto del otro, alternando. La foto va
   apaisada y recortada (object-fit:cover) porque las imagenes las elige Ariel
   desde Supabase y pueden venir en cualquier proporcion: sin recorte, cada
   franja tendria un alto distinto y la pagina quedaria dentada. */

/* ---- la marca del fondo ----
   LASER76 entero y no solo el "76": el numero suelto se lee como un numero
   cualquiera, con LASER adelante es la marca. Va con degrade de izquierda a
   derecha (blanco tenue -> transparente) hecho con background-clip:text, asi
   la trama del fondo se sigue viendo a traves de las letras. El 76 lleva su
   propio degrade rojo, como en el logo.

   El hero de Aplicaciones no usa .cbmarca: aquella es un caracter suelto
   centrado a la derecha, esta es una palabra larga que apoya contra el borde. */
.aplihero{position:relative;overflow:hidden}
.aplimarca{position:absolute;right:-2%;top:50%;transform:translateY(-50%);
font-family:"Days One",sans-serif;font-size:clamp(90px,13vw,180px);line-height:1;
letter-spacing:-.02em;white-space:nowrap;user-select:none;pointer-events:none;z-index:0;
background:linear-gradient(100deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.055) 45%,rgba(255,255,255,.012) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.aplimarca b{font-weight:400;
background:linear-gradient(100deg,rgba(217,28,38,.55) 0%,rgba(217,28,38,.22) 60%,rgba(217,28,38,.06) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* El hero sin los chips adentro respira menos abajo: la barra de rubros que
   viene despues ya le da el cierre. */
.aplihero .wrap{padding-bottom:34px}

/* ---- la barra de rubros, pegada abajo de la barra negra ----
   Es el indice de la pagina y la pagina es larga: tiene que estar siempre a
   mano. Va fuera del hero (adentro se iria con el scroll) y se pega al alto
   REAL de la cabecera, que mide aplicaciones.js y deja en --aplitop. Con el
   valor fijo de --hdr (60px) alcanzaba solo en el caso normal: con zoom o con
   el menu en dos renglones la cabecera crece y los rubros quedaban tapados.
   El z-index queda debajo del header (60) y encima de todo lo demas. */
.aplibarra{position:sticky;top:var(--aplitop,var(--hdr));z-index:50;background:var(--ink);
border-bottom:1px solid #26262B;
box-shadow:0 10px 24px rgba(0,0,0,.28)}
.aplibarra .wrap{padding-top:0;padding-bottom:0}

/* Los rubros. En una sola fila; si no entran, la fila se desliza en vez de
   cortarse o apilarse (que romperia el alto de la barra pegada). */
.aplichips{display:flex;gap:8px;align-items:center;
padding:9px 0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.aplichips::-webkit-scrollbar{display:none}
.aplichips a{flex:none;font-family:"IBM Plex Mono",monospace;font-size:11px;
letter-spacing:.05em;border:1px solid #3A3A42;border-radius:999px;
padding:6px 13px;color:#C8C8CE;background:rgba(255,255,255,.03);cursor:pointer;
white-space:nowrap;transition:border-color .16s,color .16s,background .16s}
.aplichips a:hover{border-color:#D8D8DE;color:#fff}
/* El rubro donde esta parado el que lee. */
.aplichips a.on{background:var(--red);border-color:var(--red);color:#fff}

/* ---- las franjas ----
   El scroll-margin descuenta lo que de verdad tapa: la cabecera (--aplitop),
   la barra de rubros (--aplibar) y un respiro de 24px para que el titulo no
   quede rozando el borde. Las dos medidas las calcula aplicaciones.js al
   dibujar y cada vez que cambia el tamano de la ventana; los valores de
   reserva son los del caso normal, por si el JS no llegara a correr. */
.apli{display:grid;grid-template-columns:.92fr 1.08fr;gap:38px;align-items:center;
padding:30px 0;border-bottom:1px solid var(--line);
scroll-margin-top:calc(var(--aplitop,60px) + var(--aplibar,46px) + 24px)}
.apli:first-child{padding-top:8px}
.apli:last-child{border-bottom:0;padding-bottom:8px}
/* La alternancia: en las impares la foto pasa a la derecha. */
.apli.inv .aplifoto{order:2}
.apli.inv .aplitx{order:1}

/* La foto es apaisada y no cuadrada: cinco rubros en 4/5 hacian una pagina
   larguisima donde cada franja ocupaba casi una pantalla entera. Apaisada
   entra completa junto con su texto y se puede comparar de un vistazo. */
.aplifoto{border:1px solid var(--line);border-radius:16px;overflow:hidden;
aspect-ratio:16/10;background:var(--surf2);box-shadow:0 14px 32px rgba(17,17,19,.10)}
.aplifoto img{width:100%;height:100%;object-fit:cover;display:block}
.aplifoto.sin{display:flex;align-items:center;justify-content:center;
color:var(--mut2);font-family:"IBM Plex Mono",monospace;font-size:11px;
letter-spacing:.12em;text-transform:uppercase}

.aplitx .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--red);
letter-spacing:.16em}
.aplitx h2{font-size:24px;margin:7px 0 10px;line-height:1.16}
.aplitx p{font-size:15px;line-height:1.6;color:var(--mut);max-width:56ch}

/* ---- las maquinas recomendadas, como chips hacia la vidriera ---- */
.aplimaq{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.aplimaq .k{flex-basis:100%;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
letter-spacing:.15em;text-transform:uppercase;color:var(--mut2);margin-bottom:2px}
.aplimaq a{font-size:13px;color:var(--ink);background:var(--surf);
border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.aplimaq a:hover{border-color:var(--ink)}

/* ---- los botones del remate ----
   El recuadro negro es el cbcta de Como comprar; ahi el boton rojo (fondo
   tinta) se pierde contra el fondo, asi que aca van blancos. */
.aplibtn{background:#fff;border-color:#fff;color:var(--ink);position:relative;z-index:1}
.aplibtn:hover{border-color:#fff;background:var(--surf2)}
.cbcta .aplibtn+.aplibtn{background:transparent;color:#fff;border-color:#3A3A42}
.cbcta .aplibtn+.aplibtn:hover{border-color:#fff;background:transparent}

/* La misma entrada escalonada del resto del sitio (cbsube vive en comprar.css).
   La barra de rubros NO entra en la animacion: un elemento pegado que ademas
   se desliza al aparecer queda mal. */
.apli{animation:cbsube .42s cubic-bezier(.22,.7,.3,1) both}
.apli:nth-child(2){animation-delay:.06s}
.apli:nth-child(n+3){animation-delay:.1s}

@media(max-width:900px){
.apli{grid-template-columns:1fr;gap:20px;padding:26px 0}
/* Apiladas, la foto va siempre arriba: el orden alternado era horizontal. */
.apli.inv .aplifoto{order:0}
.apli.inv .aplitx{order:0}
.aplitx h2{font-size:22px}
.aplimarca{font-size:clamp(70px,15vw,120px)}
}
@media(max-width:640px){
.aplifoto{border-radius:12px;aspect-ratio:3/2}
.aplitx h2{font-size:20px}
.cbcta .aplibtn{width:100%;text-align:center}
/* En celular los rubros se deslizan con el dedo; el recorte de los bordes
   avisa que hay mas a los costados. */
.aplichips{padding:8px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.aplichips a{font-size:10.5px;padding:6px 11px}
}