/* ============================================================
   VISOR FLOTANTE — Brand System 01/2026
   Cristal sobre Deep Ink. Radio de tarjeta 6 px (lo manda el manual:
   nada de pildoras). Lima solo como senal, iris para la estructura.
   Mejora progresiva: sin JS este archivo no pinta nada.
   ============================================================ */

.visor{
  border:0; padding:0; background:transparent; color:var(--paper, #F5F6F2);
  width:min(1120px, 94vw); max-width:none;
  max-height:min(88vh, 900px); overflow:visible;
}
.visor::backdrop{
  background:rgba(8,9,13,.62);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
}

/* el cristal: translucido, con filo de luz arriba y sombra que lo separa del fondo */
.visor-panel{
  display:flex; flex-direction:column; max-height:min(88vh, 900px);
  border-radius:var(--lw-radius-card, 6px); overflow:hidden;
  background:linear-gradient(180deg, rgba(38,41,54,.80), rgba(17,19,25,.86));
  -webkit-backdrop-filter:blur(30px) saturate(160%);
  backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(245,246,242,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 44px 90px -34px rgba(0,0,0,.85),
    0 6px 18px -8px rgba(0,0,0,.6);
}

.visor-cab{
  display:flex; align-items:flex-start; gap:20px;
  padding:22px 24px 18px;
  border-bottom:1px solid rgba(245,246,242,.12);
  background:linear-gradient(180deg, rgba(245,246,242,.07), transparent);
}
.visor-id{min-width:0}
.visor-tipo{
  margin:0 0 6px; font-family:var(--lw-font-mono, "DM Mono", monospace);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lw-iris-claro, #A79BFF);
}
.visor-cab h2{
  margin:0; font-size:1.42rem; font-weight:700; letter-spacing:-.03em; line-height:1.1;
}

.visor-x{
  margin-left:auto; flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--lw-radius-control, 4px); cursor:pointer;
  background:rgba(245,246,242,.08); border:1px solid rgba(245,246,242,.16);
  color:var(--paper, #F5F6F2); transition:background .14s, border-color .14s;
}
.visor-x svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.visor-x:hover{background:rgba(245,246,242,.16); border-color:rgba(245,246,242,.3)}
.visor-x:focus-visible{outline:2px solid var(--lw-lime, #C8FF3D); outline-offset:2px}

.visor-cuerpo{overflow-y:auto; overscroll-behavior:contain; padding:22px 24px 26px}
.visor-cuerpo:focus{outline:none}

.visor-galeria{display:grid; gap:20px}
.visor-galeria figure{margin:0}
.visor-galeria img{
  display:block; width:100%; height:auto; border-radius:var(--lw-radius-card, 6px);
  border:1px solid rgba(245,246,242,.12);
  box-shadow:0 18px 34px -22px rgba(0,0,0,.85);
  background:var(--paper, #F5F6F2);
}
.visor-galeria figcaption{
  margin-top:9px; font-size:.84rem; line-height:1.45;
  color:rgba(245,246,242,.62);
}

.visor-ir{
  display:inline-flex; align-items:center; min-height:44px; margin-top:16px;
  font-family:var(--lw-font-mono, "DM Mono", monospace);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lw-lime, #C8FF3D); text-decoration:none;
  border-bottom:1px solid rgba(200,255,61,.45); padding-bottom:3px;
}
.visor-ir:hover{border-bottom-color:var(--lw-lime, #C8FF3D)}
.visor-ir:focus-visible{outline:2px solid var(--lw-lime, #C8FF3D); outline-offset:3px}

/* la tarjeta avisa que se puede abrir */
.trabajo.con-ficha .pieza{cursor:zoom-in}
.trabajo.con-ficha .pieza img{transition:transform .22s ease}
.trabajo.con-ficha:hover .pieza img{transform:scale(1.03)}

/* entrada: el cristal sube y se asienta */
@media (prefers-reduced-motion: no-preference){
  .visor[open]{animation:visor-entra .26s cubic-bezier(.2,.7,.3,1) both}
  .visor[open]::backdrop{animation:visor-fondo .26s ease both}
}
@keyframes visor-entra{from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none}}
@keyframes visor-fondo{from{opacity:0} to{opacity:1}}

@media (max-width:720px){
  .visor{width:100vw; max-height:100dvh}
  .visor-panel{max-height:100dvh; border-radius:0; border-left:0; border-right:0}
  .visor-cab{padding:16px 16px 14px}
  .visor-cab h2{font-size:1.18rem}
  .visor-cuerpo{padding:16px 16px 22px}
  .visor-galeria{gap:16px}
}

/* si el navegador no hace backdrop-filter, el panel se vuelve solido para no perder contraste */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .visor-panel{background:#14161d}
  .visor::backdrop{background:rgba(8,9,13,.88)}
}

/* --- correcciones de la revision independiente (30-sep-2026) --- */

/* el enlace de cada tarjeta era de 18 px de alto: por debajo del objetivo tactil */
.trabajo .go{display:inline-flex; align-items:center; min-height:44px}

/* el foco usaba el anillo naranja del navegador, fuera de marca */
.trabajo .go:focus-visible{
  outline:2px solid var(--lw-lime, #C8FF3D); outline-offset:3px;
  border-radius:var(--lw-radius-control, 4px);
}

/* el iris aclarado no estaba definido como token; aqui queda, para no depender del fallback */
:root{--lw-iris-claro:#A79BFF}

/* la cabecera aclaraba el cristal y dejaba la etiqueta iris al filo de 4.5:1 */
.visor-cab{background:linear-gradient(180deg, rgba(245,246,242,.04), transparent)}

/* ============================================================
   CIERRE — la llamada a la acción del portafolio
   Va aquí y no en marca.css porque el CDN cachea las hojas 7 días
   y este archivo es nuevo (ver la nota del ?v= en plantilla.html).
   ============================================================ */

/* una sola columna: en dos, los botones se encajonaban en la columna estrecha
   y el segundo caia debajo del primero, roto */
.cierre{grid-template-columns:1fr; gap:26px}
.cierre-acc{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.cierre-acc .btn{min-height:48px}            /* el pulgar manda */
.cierre-mail{margin:16px 0 0}
.cierre-mail a{
  color:var(--text-soft, rgba(245,246,242,.72)); text-decoration:none;
  font-family:var(--lw-font-mono, "DM Mono", monospace); font-size:.86rem;
  border-bottom:1px solid rgba(245,246,242,.22); padding-bottom:2px;
}
.cierre-mail a:hover{color:var(--lw-lime, #C8FF3D); border-bottom-color:var(--lw-lime, #C8FF3D)}
.cierre-mail a:focus-visible{outline:2px solid var(--lw-lime, #C8FF3D); outline-offset:3px}

/* el botón flotante no debe taparse con el cierre en pantallas cortas */
@media (max-width:640px){ .cierre{margin-bottom:76px} }

/* la nota que sustituye a las cifras: se quitaron porque 4 y 4 no dicen nada bueno */
.nota-muestra{
  margin:30px 0 0; max-width:56ch;
  padding-top:22px; border-top:1px solid var(--line, rgba(245,246,242,.14));
  font-family:var(--lw-font-mono, "DM Mono", monospace);
  font-size:.86rem; line-height:1.65; color:var(--text-soft, rgba(245,246,242,.64));
}
@media (max-width:640px){ .nota-muestra{font-size:.8rem; margin-top:24px} }

/* ============================================================
   EL LOGO MANDA en la sección de diseño
   Bug: en marca.css hay DOS reglas .pieza. La primera (la del kit de marca)
   trae `margin-left:auto`, que en un contenedor flex anula el estirado y
   encoge la caja; y `.trabajo.principal .pieza` lleva `height:100%`, que con
   `aspect-ratio` se colapsa. Resultado medido en el teléfono: 72×45 px.
   Aquí se fija el tamaño con más especificidad y se agranda el logotipo.
   ============================================================ */

.trabajo .pieza{
  margin:0; width:100%; height:auto;
  aspect-ratio:4/3;                 /* más alto que 16:10: el logo respira y se lee */
  padding:30px;
}
.trabajo .pieza img{max-width:86%; max-height:86%}

/* en escritorio la pieza principal sí ocupa toda la altura de su columna */
@media (min-width:821px){
  .trabajo.principal .pieza{height:100%; aspect-ratio:auto}
}
@media (max-width:820px){
  .trabajo .pieza{padding:26px}
}

/* la pieza principal en el teléfono usaba 16:10 por una regla de marca.css con más
   peso; aquí se iguala al resto para que el logotipo se vea igual de grande */
@media (max-width:820px){ .trabajo.principal .pieza{aspect-ratio:4/3} }

/* las tarjetas de sitio con ficha también se abren tocando la captura */
.trabajo.con-ficha .shot{cursor:zoom-in}

/* ============================================================
   ARREGLOS DE LA AUDITORÍA MÓVIL (2-oct-2026)
   ============================================================ */

/* el botón flotante tapaba el «© Lightwell Works LLC» del pie */
@media (max-width:640px){ footer{padding-bottom:88px} }

/* objetivos táctiles: estaban en 28, 29, 21 y 18 px de alto */
.nav .brand{min-width:44px; min-height:44px; display:grid; place-items:center}
.langs a, .langs .on{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 10px}
.cierre-mail a, footer a{display:inline-flex; align-items:center; min-height:44px}

/* el anillo de foco del navegador (naranja) se salía de la marca */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--lw-lime, #C8FF3D); outline-offset:3px;
  border-radius:var(--lw-radius-control, 4px);
}
/* sobre un botón lima, el anillo lima desaparece */
.btn-lime:focus-visible, .wa-flota:focus-visible{outline-color:var(--paper, #F5F6F2)}

/* al abrir el visor el foco entraba sin dejar rastro visible */
.visor-cuerpo:focus-visible{outline:2px solid var(--lw-lime, #C8FF3D); outline-offset:-4px}

/* en el teléfono el único cierre quedaba arriba, lejos del pulgar */
.visor-cerrar-abajo{display:none}
@media (max-width:720px){
  .visor-cerrar-abajo{
    display:block; position:sticky; bottom:0; z-index:2;
    margin:18px -16px -22px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(17,19,25,0), rgba(17,19,25,.92) 42%);
  }
  .visor-cerrar-abajo button{
    width:100%; min-height:48px; cursor:pointer;
    border-radius:var(--lw-radius-control, 4px);
    border:1px solid rgba(245,246,242,.22); background:rgba(245,246,242,.10);
    color:var(--paper, #F5F6F2); font-weight:600; font-size:.92rem;
  }
}

/* texto diminuto en pantallas chicas: 11.5 px no se lee bien */
@media (max-width:640px){
  .trabajo .go, .trabajo .meta, footer{font-size:.75rem}
}