/* ==========================================================================
   DTI PROS · Galería (galeria.php)
   Secuencia del master: hero, ventajas, galería con filtros y visor, sectores,
   tecnologías, asesoría (¿qué tecnología necesito?), pasos y servicios.
   Hero, aplicaciones, tarjetas, pasos y sellos son componentes de header.css
   ========================================================================== */

/* Hero: tres fotos en abanico */
.gstack { position: relative; aspect-ratio: 1 / 1; }
.gstack figure { position: absolute; width: 52%; aspect-ratio: 4 / 5; border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.gstack__a { left: 0; top: 10%; transform: rotate(-8deg); }
.gstack__b { left: 24%; top: 0; z-index: 2; transform: rotate(2deg); border-color: rgba(76, 132, 255, .6) !important; }
.gstack__c { right: 0; top: 14%; transform: rotate(9deg); border-color: rgba(217, 164, 74, .5) !important; }
.gstack:hover .gstack__a { transform: rotate(-12deg) translateX(-14px); }
.gstack:hover .gstack__c { transform: rotate(13deg) translateX(14px); }
.gstack:hover .gstack__b { transform: rotate(0) translateY(-10px); }

/* Ventajas rápidas */
.props { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(7, 13, 28, .8); }
.props__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prop { padding: 22px 18px; border-left: 1px solid var(--line-2); }
.prop:first-child { border-left: 0; padding-left: 0; }
.prop b { display: block; font-size: 32px; line-height: 1; color: var(--blue-3); }
.prop span { font-size: 14px; color: var(--muted); }

/* Filtros con indicador deslizante (galeria.js coloca .filters__glider) */
.filters { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 28px; padding: 5px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 7, 15, .6); }
.filters button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 700 15px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .25s; }
.filters button:hover { color: var(--white); }
.filters button[aria-pressed="true"] { color: #fff; }
.filters button span { padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 12px; letter-spacing: 0; }
.filters__glider { position: absolute; z-index: 0; top: 5px; left: 0; height: calc(100% - 10px); width: 0; border-radius: 10px; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 8px 24px -8px var(--glow); transition: transform .45s cubic-bezier(.2, .7, .2, 1), width .45s cubic-bezier(.2, .7, .2, 1); }

/* Rejilla de trabajos */
.masonry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 14px; }
.tile { position: relative; display: block; overflow: hidden; padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--bg-3); color: var(--white); text-align: left; cursor: zoom-in; transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; }
.tile[hidden] { display: none; }
.tile--t { grid-row: span 2; }
.tile--w { grid-column: span 2; }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.tile:hover { border-color: rgba(76, 132, 255, .7); box-shadow: 0 30px 60px -26px var(--glow); }
.tile--st:hover { border-color: rgba(217, 164, 74, .7); box-shadow: 0 30px 60px -26px rgba(217, 164, 74, .45); }
.tile:hover img { transform: scale(1.07); }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 46px 16px 14px; background: linear-gradient(0deg, rgba(4, 7, 15, .95), transparent); transform: translateY(14px); opacity: .9; transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.tile:hover .cap, .tile:focus-visible .cap { transform: none; opacity: 1; }
.tile .tag { justify-self: start; padding: 4px 9px; border-radius: 6px; background: rgba(31, 91, 255, .25); color: var(--blue-3); font: 700 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; }
.tile--st .tag { background: rgba(217, 164, 74, .22); color: var(--gold-2); }
.tile .cap b { font: 700 18px/1.15 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.tile .cap > span:last-child { font-size: 13px; color: var(--muted); }
.tile__zoom { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(4, 7, 15, .7); border: 1px solid var(--line); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.tile__zoom svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.tile:hover .tile__zoom { opacity: 1; transform: none; }
/* Filtrado animado (galeria.js añade .is-out y luego oculta) */
.tile.is-out { opacity: 0; transform: scale(.92); }
.tile.is-in-anim { animation: tileIn .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tileIn { from { opacity: 0; transform: scale(.94) translateY(12px); } }

/* Visor a pantalla completa */
dialog.lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--white); }
dialog.lb::backdrop { background: rgba(2, 4, 10, .92); backdrop-filter: blur(8px); }
dialog.lb[open] { display: grid; place-items: center; animation: lbIn .3s ease; }
@keyframes lbIn { from { opacity: 0; } }
.lb__fig { display: grid; gap: 14px; justify-items: center; max-width: min(1100px, 90vw); margin: 0; }
.lb__fig img { max-width: 100%; max-height: 74vh; border-radius: 14px; object-fit: contain; box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); animation: lbImg .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes lbImg { from { opacity: 0; transform: scale(.96); } }
.lb__fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center; }
.lb__tag { padding: 4px 10px; border-radius: 6px; background: rgba(31, 91, 255, .25); color: var(--blue-3); font: 700 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; }
.lb__fig b { font: 700 20px/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.lb__fig figcaption > span:not(.lb__tag) { color: var(--muted); }
.lb__fig small { color: var(--muted-2); }
.lb__btn { position: fixed; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; background: rgba(4, 7, 15, .7); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; }
.lb__btn:hover { background: var(--blue); transform: scale(1.06); }
.lb__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb__x { top: 20px; right: 20px; }
.lb__prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb__next { right: 20px; top: 50%; translate: 0 -50%; }

/* Tecnologías */
.techs__grid .feat { align-items: flex-start; }
.techs__grid .tmark--solo { font-size: 36px; }
.techs__grid a { margin-top: auto; font: 700 15px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-3); }

/* ¿Qué tecnología necesito? */
.finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(70% 100% at 100% 50%, rgba(31, 91, 255, .2), transparent 60%), var(--panel); }
.finder__q h3 { font-size: clamp(32px, 3.6vw, 50px); }
.finder__q p { margin: 10px 0 20px; color: var(--muted); }
.finder__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.finder__opts button { padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--white); font: 700 14px/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .25s, border-color .25s; }
.finder__opts button:hover { border-color: var(--blue-2); }
.finder__opts button[aria-checked="true"] { background: var(--blue); border-color: var(--blue); }
.finder__a { position: relative; min-height: 230px; padding: 28px; border-radius: 18px; border: 1px solid rgba(76, 132, 255, .5); background: rgba(4, 7, 15, .65); overflow: hidden; }
.finder__a.is-gold { border-color: rgba(217, 164, 74, .6); }
.finder__a small { display: block; font: 700 13px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.finder__a .finder__tech { display: block; margin: 8px 0 10px; font: 400 clamp(40px, 4vw, 60px)/1 var(--display); text-transform: uppercase; color: var(--blue-3); }
.finder__a.is-gold .finder__tech { color: var(--gold-2); }
.finder__a p { margin: 0 0 18px; color: var(--muted); }
.finder__a .finder__links { display: flex; flex-wrap: wrap; gap: 14px; }
.finder__a .finder__links a { font: 700 15px/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.finder__a > * { animation: finderIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.finder__a > *:nth-child(2) { animation-delay: .05s; }
.finder__a > *:nth-child(3) { animation-delay: .1s; }
.finder__a > *:nth-child(4) { animation-delay: .15s; }
@keyframes finderIn { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1100px) {
  .masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .props__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prop:nth-child(3) { border-left: 0; padding-left: 0; }
  .finder { grid-template-columns: 1fr; }
  .gstack { max-width: 460px; }
}
@media (max-width: 640px) {
  .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .tile--w { grid-column: span 2; }
  .filters { display: flex; }
  .filters button { padding: 9px 11px; font-size: 13px; }
  .lb__prev, .lb__next { top: auto; bottom: 20px; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.is-in-anim, .finder__a > * { animation: none; }
}