/* ===========================================================
   PI Creative House — ajustes SOLO para telefono.
   Este archivo se enlaza con media="(max-width: 760px)": en una
   computadora el navegador no lo aplica. Todo cambio de telefono va
   aqui, y antes de publicar se corre _candado/candado.py (comparacion
   pixel a pixel del escritorio) para probar que nada se filtro.
   =========================================================== */

/* ---------- Galeria de PasarelArt: carrusel deslizable ----------
   En la reticula de 2 columnas las fotos verticales dejaban huecos al
   lado de las horizontales (pedido de Diego, 2026-10-15). Aqui: una foto
   por vista, todas 4:5, asoma la siguiente, se detiene en cada foto con
   el desplazamiento nativo. Sin avance automatico: el visitante manda. */
.galeria{
  display:flex;gap:.75rem;margin-top:clamp(1.5rem, 1rem + 3vw, 2.5rem);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.galeria::-webkit-scrollbar{display:none;}
.galeria figure{
  flex:0 0 84%;aspect-ratio:4/5 !important;
  grid-column:auto !important;grid-row:auto !important;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.galeria img{height:100%;}
/* Las fotos fuera de la vista horizontal no deben esperar al revelado:
   el observador solo ve la primera y las demas quedarian en blanco. */
.con-reveal .galeria [data-rev]{opacity:1 !important;transform:none !important;transition:none !important;}

/* Indicador: contador + barra de avance (lo inserta galeria-movil.js). */
.galeria-indicador{display:flex;align-items:center;gap:1rem;margin-top:1rem;
  font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#D9D4CD;}
.galeria-contador{font-variant-numeric:tabular-nums;white-space:nowrap;}
.galeria-contador b{color:var(--pich-naranja);font-weight:700;}
.galeria-barra{flex:1;height:2px;background:#3A3A3A;position:relative;overflow:hidden;}
.galeria-barra i{position:absolute;inset:0;background:var(--pich-naranja);
  transform-origin:0 50%;transform:scaleX(var(--avance, .111));
  transition:transform var(--t-corta) var(--ease-expo);}
.galeria-pista{white-space:nowrap;color:var(--tenue-osc);}
.galeria-pista::after{content:" →";color:var(--pich-naranja);}
.galeria-indicador.recorrida .galeria-pista{visibility:hidden;}
/* Foco visible cuando se recorre con teclado (el carrusel es enfocable). */
.galeria:focus-visible{outline:2px solid var(--pich-naranja);outline-offset:4px;}

@media(prefers-reduced-motion:reduce){
  .galeria{scroll-behavior:auto;}
  .galeria-barra i{transition:none;}
}

/* ---------- Servicios: la foto de cada fila como fondo ----------
   En escritorio la foto vive en una columna aparte que en telefono no
   cabe. Aqui la fila activa (la que cruza el centro de la pantalla; la
   marca servicios-movil.js) muestra SU foto de fondo bajo una pelicula
   negra al 90 %: la foto se ve al ~10 %, como el video de la portada.
   El bloque naranja de :hover se quita: en tactil quedaba pegado. */
.serv .fila::before{display:none;}
.serv .fila:hover > *,.serv .fila:focus-visible > *{transform:none;}
.serv .fila::after{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);
  background:linear-gradient(rgba(13,13,13,.9),rgba(13,13,13,.9)),var(--foto, none) center/cover no-repeat #0D0D0D;
  opacity:0;transition:opacity .6s var(--ease-expo);pointer-events:none;
}
.serv .fila h3,.serv .fila .que,.serv .fila .incluye,.serv .fila .num{transition:color .4s var(--ease-expo);}
/* Peor caso: foto blanca al 10 % -> fondo #252525. Papel ~13:1, #D9D4CD
   ~10:1. Los numeros (14 px, no cuentan como texto grande) van en
   --naranja-300: el naranja de marca ahi daba 4.3:1 y no pasa. */
.serv .fila.activa::after{opacity:1;}
.serv .fila.activa h3,.serv .fila.activa .que{color:var(--papel);}
.serv .fila.activa .incluye{color:#D9D4CD;}
.serv .fila.activa .num{color:var(--naranja-300);}
.serv .lista > li:has(.fila.activa){border-bottom-color:transparent;}
@media(prefers-reduced-motion:reduce){
  .serv .fila::after,.serv .fila h3,.serv .fila .que,.serv .fila .incluye,.serv .fila .num{transition:none;}
}

/* ---------- Como conectamos todo: escena a pantalla completa ----------
   Pedido de Diego: que las manos y el aro llenen la pantalla aunque solo
   se vean dedos y manos. La escena se hace ALTA (no 1.65:1): la imagen
   (2.4:1, object-fit cover) escala por el alto y queda ampliada sobre el
   punto de contacto, que sigue al 44.5 % del alto. destello.js calcula la
   yema sobre la imagen real, asi el destello cae en los dedos igual. */
.conectamos{padding-block:clamp(2.5rem, 2rem + 3vw, 3.5rem);}
.conecta-cab h2{font-size:clamp(2.2rem, 1.4rem + 5vw, 3rem);}
.conectamos .conecta-escena{aspect-ratio:auto;height:min(64svh, 560px);margin-top:.5rem;}
/* Diametro tope = 2 x 44.5 % del alto: con 64svh (~540 px) cabe 92 %. */
.conectamos .conecta-aro{width:92%;left:4%;}

/* ---------- La cadena: carrusel estatico ----------
   Un paso a la vez en grande, cambia solo (conectamos-movil.js) y vuelve
   a empezar. Sin deslizar ni tocar. Los 6 siguen en el DOM como lista
   para lectores de pantalla; solo se apilan en la misma celda. */
.conectamos .cadena{display:grid;grid-template-columns:1fr;grid-template-areas:"paso";
  border-top:0;margin-top:1.5rem;min-height:6.5rem;text-align:center;}
.conectamos .cadena li{grid-area:paso;min-height:0;padding:0;
  font-size:clamp(1.6rem, 1.2rem + 3vw, 2.1rem);font-weight:800;letter-spacing:-.01em;
  color:var(--papel) !important;opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .5s var(--ease-expo),transform .7s var(--ease-expo);}
.conectamos .cadena li::before,.conectamos .cadena li::after{display:none !important;}
.conectamos .cadena b{font-size:.8rem;letter-spacing:.2em;color:var(--naranja-300);margin-bottom:.4rem;font-weight:700;}
.conectamos .cadena li.actual{opacity:1;transform:none;}
/* Sin JS: el primer paso queda visible. */
.conectamos .cadena:not(.rotando) li:first-child{opacity:1;transform:none;}
.cadena-progreso{display:flex;gap:6px;justify-content:center;margin-top:1rem;}
.cadena-progreso i{width:28px;height:2px;background:#3A3A3A;position:relative;overflow:hidden;}
.cadena-progreso i::after{content:"";position:absolute;inset:0;background:var(--pich-naranja);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-expo);}
.cadena-progreso i.hecho::after{transform:scaleX(1);}
.conectamos .conecta-cierre{text-align:center;margin-top:1.75rem;}

/* Menos movimiento: los 6 a la vista, quietos, en grilla de 2. */
@media(prefers-reduced-motion:reduce){
  .conectamos .cadena{grid-template-columns:1fr 1fr;grid-template-areas:none;gap:1rem;min-height:0;}
  .conectamos .cadena li{grid-area:auto;opacity:1;transform:none;font-size:1.1rem;transition:none;}
  .cadena-progreso{display:none;}
}

/* ---------- ¿Por que PI?: el pi grande a la derecha ----------
   Zona marcada por Diego: el pi ocupa desde ~1/3 del ancho hasta mas
   alla del borde derecho y baja hasta el titulo. En la imagen (1672x941)
   el simbolo va de x 38 % a 98 %: con 154vw de ancho y -26vw a la
   izquierda, el pi arranca en ~32vw y sale por la derecha. El texto
   queda encima; una pelicula vertical oscurece solo donde hay texto. */
.porque{position:relative;overflow:hidden;padding-top:66vw;}
/* 170vw: el pi mide ~300 px de alto y sus patas bajan hasta el titulo. */
.pi-arte{position:absolute;inset:auto;top:8vw;left:-33vw;width:170vw;aspect-ratio:1672/941;margin:0;}
/* El borde superior de la imagen es llama viva: se funde para que no
   quede una linea recta (afecta tambien al canvas, que vive dentro). */
.pi-arte{-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%);}
.pi-arte img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;}
/* Pelicula suave: deja leer las patas del pi bajo el titulo y oscurece
   lo justo para el parrafo (contraste medido con el texto oculto). */
.pi-arte::after{background:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.8) 90%,#000 100%);}
.porque-texto{position:relative;z-index:2;}
.porque-texto h2,.porque-texto .fuerte{text-shadow:0 1px 12px rgba(0,0,0,.6);}

/* ---------- Barra: menu a la izquierda, imagotipo fijo al centro ----------
   Solo cuando menu-movil.js monto el boton (.con-menu). Sin JS queda el
   nav desplazable de siempre. */
.bar.con-menu .wrap{grid-template-columns:44px 1fr 44px;padding-block:.6rem;}
.bar.con-menu .nav{display:none;}
.bar.con-menu .bar-logo{grid-column:2;justify-self:center;}
.bar.con-menu .bar-logo-full{display:block;height:32px;}
.bar.con-menu .bar-logo-mark{display:none;}
/* Imagotipo permanente: aqui no se oculta mientras el de la portada esta a la vista. */
.bar.con-menu .bar-logo,.bar.con-menu.sin-logo .bar-logo{opacity:1;visibility:visible;transform:none;transition:none;}

.menu-btn{grid-column:1;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 10px;margin-left:-10px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.menu-btn span{display:block;height:2px;background:var(--papel);transform-origin:50% 50%;
  transition:transform .35s var(--ease-expo),opacity .2s linear,width .35s var(--ease-expo);}
.menu-btn span:nth-child(2){width:70%;background:var(--pich-naranja);}
.menu-btn:focus-visible{outline:2px solid var(--pich-naranja);outline-offset:2px;}

/* Panel lateral */
.menu-fondo{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease-expo),visibility 0s .35s;}
.menu-panel{position:fixed;top:0;bottom:0;left:0;z-index:100;width:min(84vw,340px);
  display:flex;flex-direction:column;padding:1rem 1.5rem 2rem;
  background:#0D0D0D;color:var(--papel);border-right:2px solid var(--pich-naranja);
  transform:translate3d(-102%,0,0);transition:transform .45s var(--ease-expo);overflow-y:auto;}
.menu-abierto .menu-panel{transform:none;}
.menu-abierto .menu-fondo{opacity:1;visibility:visible;transition:opacity .35s var(--ease-expo);}
/* Con el menu abierto la pagina de atras no se desplaza. */
html.menu-abierto,html.menu-abierto body{overflow:hidden;}

.menu-cab{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-bottom:2.5rem;}
.menu-cab img{height:30px;width:auto;}
.menu-cerrar{position:relative;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;}
.menu-cerrar span{position:absolute;left:11px;right:11px;top:21px;height:2px;background:var(--papel);}
.menu-cerrar span:first-child{transform:rotate(45deg);}
.menu-cerrar span:last-child{transform:rotate(-45deg);}
.menu-cerrar:focus-visible{outline:2px solid var(--pich-naranja);outline-offset:2px;}

.menu-lista{list-style:none;margin:0;padding:0;border-top:1px solid #2B2B2B;}
.menu-lista li{border-bottom:1px solid #2B2B2B;}
.menu-lista a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0;text-decoration:none;
  font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.65rem;letter-spacing:-.02em;color:var(--papel);
  opacity:0;transform:translate3d(-14px,0,0);transition:opacity .35s var(--ease-expo),transform .45s var(--ease-expo),color .15s linear;}
.menu-lista b{font-size:.75rem;letter-spacing:.12em;color:var(--naranja-300);font-weight:700;}
.menu-lista a[aria-current="true"],.menu-lista a:active{color:var(--pich-naranja);}
.menu-lista a:focus-visible{outline:2px solid var(--pich-naranja);outline-offset:2px;}
/* Entrada escalonada de los enlaces al abrir. */
.menu-abierto .menu-lista a{opacity:1;transform:none;}
.menu-abierto .menu-lista li:nth-child(2) a{transition-delay:.04s;}
.menu-abierto .menu-lista li:nth-child(3) a{transition-delay:.08s;}
.menu-abierto .menu-lista li:nth-child(4) a{transition-delay:.12s;}
.menu-abierto .menu-lista li:nth-child(5) a{transition-delay:.16s;}

.menu-pie{margin-top:auto;padding-top:2rem;display:grid;gap:.75rem;font-size:.875rem;}
.menu-pie a{color:#D9D4CD;text-decoration:none;border-bottom:1px solid #3A3A3A;padding-block:.35rem;justify-self:start;}

@media(prefers-reduced-motion:reduce){
  .menu-panel,.menu-fondo,.menu-lista a,.menu-btn span{transition:none !important;}
}