/* ============================================================
   Negocios con IA, Desarrollo de apps: vitrina con la interfaz real de nuestras apps.
   ============================================================ */
.etiqueta{font:500 12.5px/1.3 var(--mono);color:var(--tinta-3)}
.enlace{display:inline-block;margin-top:18px;color:var(--acento-txt);font-weight:600;font-size:15px;text-decoration:none}
/* marcos: navegador y celular */
.app-nav{border-radius:14px;overflow:hidden;background:#0d0f16;border:1px solid var(--linea-2);box-shadow:0 30px 60px -34px rgba(22,20,15,.5)}
.app-nav-barra{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1a1d27}
.app-nav-barra i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.app-nav-barra span{margin-left:12px;font:500 11px/1 var(--mono);color:rgba(255,255,255,.55)}
.app-nav img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.app-cel{width:min(250px,100%);border-radius:34px;padding:9px;background:#0d0f16;box-shadow:0 30px 60px -30px rgba(22,20,15,.55)}
.app-cel img{display:block;width:100%;aspect-ratio:9/17;object-fit:cover;object-position:top;border-radius:26px}
/* portada: computadora y celular encimados */
.app-portada{position:relative;padding:0 0 40px}
.app-portada .app-nav{width:88%}
.app-portada .app-cel{position:absolute;right:0;bottom:0;width:30%;min-width:120px}
/* el sistema del hotel con pestanas */
.app-vitrina{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:40px}
.app-tabs{display:flex;flex-wrap:wrap;gap:8px}
.app-tab{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--tinta-2);font:500 14px/1 var(--sans);cursor:pointer;transition:background-color 180ms var(--ease),color 180ms var(--ease)}
.app-tab[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.app-desc{margin-top:18px;color:var(--tinta-2);font-size:16px;min-height:4.8em}
.app-tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.app-tags li{font:500 12px/1 var(--mono);padding:7px 10px;border-radius:999px;background:var(--papel-2);color:var(--tinta-2)}
/* mas apps */
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px);margin-top:40px}
.app{display:flex;flex-direction:column;gap:20px}
.app .app-cel{margin:0 auto;width:min(230px,70%)}
.app h3{margin-top:6px;font-size:clamp(20px,2vw,24px);line-height:1.2}
.app-txt>p:not(.etiqueta){margin-top:8px;color:var(--tinta-2);font-size:16px}
@media (min-width:901px){.app:first-child{grid-row:span 2;justify-content:center}}
@media (max-width:900px){.app-vitrina,.apps{grid-template-columns:1fr}.app-portada{margin-top:12px}}