/* ==========================================================================
   Páginas «Applications» del sitio: el índice (/applications) y una página por
   aplicación (/applications/<slug>). Markup: scripts/lib/web-applications.mjs;
   el visor de fotos: js/applications.js.

   Mismo lenguaje que la sección Aplicaciones de la presentación (css/deck.css,
   .apps-*), adaptado a una página que scrollea en vez de una slide fija:
   - fotos y tarjetas 4:3 horizontal; toda foto mide lo mismo (grilla fija de
     3 columnas: una aplicación con menos fotos deja huecos, no las agranda);
   - el nombre de cada aplicación y de cada producto con UNA tipografía:
     MAYÚSCULAS, semi-negrita, espaciado .08em;
   - los renders sobre su propio fondo negro, a la derecha del título;
   - lo que se toca toma el BORDE ÁMBAR al pasar el cursor y sube 2 px: las
     tarjetas del índice (como en el deck), los productos, que enlazan a su
     ficha (Martín, 07-oct-2026: «que al hacer hover sobre el producto se
     muestre un recuadro amarillo, de la misma forma que en el índice»), y las
     fotos, que se abren más grandes.

   TAMAÑOS DE TEXTO (Martín, 07-oct-2026: «que los tamaños de los textos tengan
   relación con los demás, que no sean más grandes»; los nombres de producto se
   veían grandes). En la presentación los nombres van a escala de slide (14,7 px
   en 1440, negrita, mayúsculas): en el sitio quedaban más grandes que el nombre
   de las tarjetas de producto de Soluciones (14 px, sin mayúsculas) y que el
   menú (14 px). Ahora van a la escala de las etiquetas del sitio: el tamaño y
   el peso del eyebrow (12,5 px, 600), con menos espaciado porque son más
   largos; el título, al tamaño del de la ficha de producto (28-42 px).
   ========================================================================== */
:root{--app-r:10px;--app-name-fs:12.5px}

.app-tile-label,.app-product-name,.app-pager-txt strong{
  font-size:var(--app-name-fs);font-weight:600;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:#F4F2F7;
}

/* ---- Índice ---- */
.app-hero{padding-bottom:clamp(28px,3vw,40px)}
.app-hero h1{max-width:none}
.app-index{padding-top:0}
.app-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.app-tile{display:block;min-width:0;color:inherit;border-radius:var(--app-r)}
.app-tile-media{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--app-r);border:1px solid var(--line);background:var(--surface);
  transition:border-color .2s,transform .2s var(--ease);
}
.app-tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.app-tile-label{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(24px,2.6vw,40px) clamp(12px,1.2vw,16px) clamp(10px,1vw,14px);
  background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.62) 40%,rgba(8,8,10,.93) 100%);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.app-tile:hover .app-tile-media,.app-tile:focus-visible .app-tile-media{border-color:var(--amber);transform:translateY(-2px)}
.app-tile:focus-visible{outline:2px solid var(--amber);outline-offset:5px}
@media(max-width:1024px){.app-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.app-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---- Página de una aplicación ---- */
/* overflow:clip y no hidden: hidden convierte a la sección en el contenedor de scroll de la barra de anterior /
   siguiente (position:sticky) y la barra dejaría de quedarse abajo de la pantalla. Navegadores sin clip (Safari < 16)
   se quedan con hidden: la barra aparece al final, como antes. */
.app-top{overflow:hidden;overflow:clip;padding:calc(var(--nav-h) + 18px) 0 clamp(40px,5vw,64px)}
.app-top>.wrap{position:relative;z-index:2}
.app-top .hero-mesh{opacity:.7}
.app-slide{margin-top:clamp(14px,1.6vw,22px);scroll-margin-top:calc(var(--nav-h) + 16px)}
.app-slide + .app-slide{margin-top:clamp(48px,6vw,84px)}

/* Encabezado: título a la izquierda y los productos ARRIBA A LA DERECHA (como en la slide). */
.app-head{
  --chip:clamp(84px,8.6vw,124px);--pgap:clamp(14px,1.4vw,24px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(18px,2.4vw,40px);
  margin-bottom:clamp(14px,1.6vw,22px);
}
.app-titles{flex:1 1 0;min-width:0}
.app-titles h1,.app-titles h2{font-size:clamp(28px,3vw,42px);margin:12px 0 0;line-height:1.08;text-wrap:balance}
.app-products{display:flex;flex:none;align-items:flex-start;gap:var(--pgap)}
.app-product{
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(6px,.6vw,9px);
  min-width:var(--chip);width:min-content;color:inherit;border-radius:var(--app-r);
}
.app-product-img{
  position:relative;display:block;box-sizing:border-box;flex:none;width:var(--chip);height:var(--chip);overflow:hidden;
  border-radius:var(--app-r);border:1px solid var(--line-strong);background:#000;
  transition:border-color .2s,transform .2s var(--ease);
}
.app-product-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.app-product-name{text-align:left;overflow-wrap:normal;text-wrap:balance}
/* El producto enlaza a su ficha: al pasar el cursor, el MISMO recuadro ámbar que las tarjetas del índice. */
a.app-product:hover .app-product-img,a.app-product:focus-visible .app-product-img{border-color:var(--amber);transform:translateY(-2px)}
a.app-product:focus-visible{outline:2px solid var(--amber);outline-offset:5px}

/* Fotos: 4:3, todas del mismo tamaño. Cada una se abre más grande (js/applications.js; sin JS, el enlace abre la foto
   sola): mismo recuadro ámbar al pasar el cursor que lo demás que se toca, y el cursor de lupa. */
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,18px)}
.app-photo{
  margin:0;min-width:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--app-r);border:1px solid var(--line);background:var(--surface);
  transition:border-color .2s,transform .2s var(--ease);
}
.app-photo-link{display:block;width:100%;height:100%;cursor:zoom-in}
.app-photo img{width:100%;height:100%;object-fit:cover;display:block}
.app-photo:hover{border-color:var(--amber);transform:translateY(-2px)}
/* Con el teclado, el mismo recuadro. Va en una regla aparte: un navegador sin :has() descartaría la regla entera. */
.app-photo:has(.app-photo-link:focus-visible){border-color:var(--amber);transform:translateY(-2px)}
.app-photo-link:focus-visible{outline:none}

/* Anterior / todas / siguiente: las flechas amarillas de la presentación, en una barra que queda pegada ABAJO de la
   pantalla mientras se recorre la página (Martín, 07-oct-2026: «que aparezcan sin necesidad de scroll down») y se
   asienta en su lugar al llegar al final. Fondo translúcido, como la barra del sitio con scroll. */
.app-pager{
  position:sticky;bottom:12px;z-index:20;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
  margin-top:clamp(24px,3vw,40px);padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(14,13,17,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
}
.app-pager-link{display:flex;align-items:center;gap:12px;min-width:0;color:var(--text)}
.app-pager-link.next{justify-content:flex-end;text-align:right}
.app-pager-arrow{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber);color:#14110A;transition:transform .2s var(--ease);
}
.app-pager-link.prev:hover .app-pager-arrow{transform:translateX(-3px)}
.app-pager-link.next:hover .app-pager-arrow{transform:translateX(3px)}
.app-pager-txt{min-width:0}
.app-pager-txt small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.app-pager-txt strong{display:block}
.app-pager-link:hover .app-pager-txt strong{color:var(--amber-2)}
.app-pager-all{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--amber);color:var(--text);font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:background .2s,color .2s;
}
.app-pager-all svg{width:16px;height:16px}
.app-pager-all:hover{background:var(--amber);color:#14110A}
.app-pager a:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:var(--r-sm)}

/* ---- Visor de fotos (js/applications.js) ---- */
html.app-lb-open{overflow:hidden}
.app-lb{
  position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(8px,2vw,28px);padding:clamp(56px,6vh,72px) clamp(12px,3vw,40px) clamp(20px,4vh,40px);
  background:rgba(8,8,10,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.app-lb[hidden]{display:none}
.app-lb-fig{margin:0;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;max-width:100%}
.app-lb-fig img{
  display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);
  border-radius:var(--app-r);border:1px solid var(--line-strong);background:var(--surface);
}
.app-lb-fig figcaption{display:flex;justify-content:space-between;gap:16px;width:100%;font-size:13.5px;line-height:1.4;color:var(--text-2)}
.app-lb-count{flex:none;color:var(--text-3);font-variant-numeric:tabular-nums}
.app-lb-nav{
  width:48px;height:48px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--amber);color:#14110A;transition:transform .2s var(--ease);
}
.app-lb-nav.prev:hover{transform:translateX(-3px)}
.app-lb-nav.next:hover{transform:translateX(3px)}
.app-lb-close{
  position:absolute;top:14px;right:14px;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;border:1px solid var(--line-strong);background:rgba(20,19,25,.85);color:var(--text);
}
.app-lb-close:hover{border-color:var(--amber)}
.app-lb button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* Sin cursor (pantallas táctiles) no hay «hover»: una flecha junto al nombre avisa que se toca, como en el deck. */
@media(hover:none){
  .app-tile-label::after,a.app-product .app-product-name::after{content:"\2192";margin-left:.4em;color:var(--amber)}
}

/* Ventana angosta / tablet: los productos pasan DEBAJO del título, en una fila (render a la izquierda, nombre al
   lado), como en el deck cuando no hay lugar al lado del título. */
@media(max-width:900px){
  .app-head{--chip:56px;flex-direction:column;align-items:stretch;gap:14px}
  .app-products{display:grid;grid-template-columns:repeat(4,minmax(min-content,1fr));column-gap:16px;row-gap:12px}
  .app-product{flex-direction:row;align-items:center;gap:10px;width:auto}
}
@media(max-width:820px){
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .app-head{--chip:48px}
  .app-titles h1,.app-titles h2{font-size:clamp(26px,7vw,32px)}
  .app-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* La barra queda en una sola fila: flechas a los lados y «Todas las aplicaciones» al centro. Los nombres siguen
     ahí para el lector de pantalla (el enlace no se queda sin nombre), sólo que no se ven. */
  .app-pager{grid-template-columns:auto 1fr auto;gap:10px;padding:8px;bottom:10px}
  .app-pager-all{justify-self:center}
  .app-pager-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .app-pager-arrow{width:40px;height:40px}
  /* Visor: la foto a todo el ancho y las flechas abajo, a los lados. */
  .app-lb{grid-template-columns:minmax(0,1fr);padding:60px 12px 84px}
  .app-lb-nav{position:absolute;bottom:20px}
  .app-lb-nav.prev{left:20px}
  .app-lb-nav.next{right:20px}
}
@media(max-width:520px){
  .app-grid{gap:8px}
  :root{--app-name-fs:12px}
}
@media(prefers-reduced-motion:reduce){
  .app-tile-media,.app-product-img,.app-photo,.app-pager-arrow,.app-lb-nav{transition:none}
  .app-tile:hover .app-tile-media,a.app-product:hover .app-product-img,.app-photo:hover{transform:none}
}