/* ===========================================================
   PI Creative House — tres motivos del deck, en vivo.
   Todo queda en su estado completo sin JS. El negro de las piezas
   se compone con screen; los fondos de texto se resuelven por sección.
   =========================================================== */
.fx-superficie { position:relative; }
.fx-canvas { position:absolute;display:block;max-width:none;pointer-events:none;z-index:1;opacity:0; }
.fx-canvas.fx-listo { opacity:1; }
.hero-foto .pie-foto { position:relative;z-index:2; }
/* La cartela opaca mantiene el contraste sobre cualquier fotograma. */
.galeria figcaption { z-index:3;background:#101010;color:var(--papel);width:auto;right:0; }
.galeria figure::after {
  content:"";position:absolute;inset:clamp(.6rem, 1.2vw, 1.25rem);z-index:2;
  border:1px solid rgba(244,241,236,.75);pointer-events:none;
  opacity:0;transform:scale(1.045) rotate(-2deg);
  transition:transform 500ms var(--ease-expo),opacity 320ms;
}
.galeria figure:hover::after { opacity:1;transform:scale(1) rotate(0); }
/* El canvas y la foto escalan juntos: no se descuadran al entrar. */
.galeria figure:hover img { transform:none; }

/* ---------- Cómo conectamos todo ---------- */
.conectamos::before { opacity:0; }
/* Negro puro de punta a punta, como la lamina: con --noche + grano la
   banda del titulo se veia gris contra la escena (negro de las imagenes). */
.conectamos { background:#000;overflow:hidden;padding-block:clamp(4rem, 2rem + 5vw, 8rem); }
.conecta-cab { position:relative;z-index:2;text-align:center; }
.conecta-cab h2 { max-width:19ch;margin-inline:auto;color:var(--pich-naranja);font-size:clamp(2.1rem, 1rem + 4vw, 4.5rem);line-height:1;letter-spacing:-.04em; }
.conecta-cab p { color:var(--papel);margin:1.1rem 0 0;font-size:clamp(1rem, .9rem + .6vw, 1.35rem); }
/* A sangre de verdad: la escena ocupa el ancho de la VENTANA, no el de
   .wrap (max 1440). Asi los brazos salen de los bordes de la pantalla en
   cualquier monitor. Sin mascara lateral: el desvanecido los hacia ver
   cortados. La seccion tiene overflow:hidden (100vw incluye la barra). */
.conecta-escena { position:relative;isolation:isolate;aspect-ratio:2.4;width:100vw;margin:1.5rem 0 0 calc(50% - 50vw);overflow:hidden; }
/* Las tres capas comparten encuadre y overscan. Cada brazo se desplaza
   hacia su borde exterior: de -6/+6 % a 0 %, sin descubrir el lienzo. */
.conecta-escena img { position:absolute;top:0;left:-4%;width:108%;max-width:none;height:100%;object-fit:cover;mix-blend-mode:screen; }
.mano-izquierda,.mano-derecha { transform:translate3d(0,0,0); }
/* Hilo, halo y humo centrales continuos: solo opacidad, nunca traslación.
   El estado base queda completo sin JS y con ?sin-fx. */
.conecta-contacto { opacity:1;pointer-events:none; }
/* El aro es vectorial. Nada de desenfoques de 90px ni mapas grandes. */
/* Diametro maximo = 2 x 44,5 % del alto de la escena (centro en el
   contacto). Con 42 % del ancho el aro se salia por arriba y la escena
   (overflow:hidden) lo recortaba: se veia un hueco a las 12. */
.conecta-aro { position:absolute;width:36%;height:auto;aspect-ratio:1;left:32%;top:44.5%;transform:translateY(-50%);z-index:-1;overflow:visible; }
.conecta-aro circle { fill:none;stroke:var(--pich-naranja);stroke-width:1; }
.conecta-aro .aro-exterior { opacity:.25;stroke-width:.3; }
/* El aro se DIBUJA con el scroll (--trazo 0..1, lo pone conexiones.js con
   el mismo avance que acerca las manos) y se cierra en el contacto.
   pathLength=1: el trazo completo mide 1, sin calcular la circunferencia.
   Sin JS --trazo vale 1 y el aro se ve completo. */
.conecta-aro .aro-trazo { stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--trazo,1)); }
/* Punta de luz que encabeza el trazo mientras se dibuja. */
.conecta-aro .aro-punta { stroke:#FFE3C4;stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:.035 .965;stroke-dashoffset:calc(.035 - var(--trazo,1));opacity:var(--punta,0); }
/* Destello en vivo del contacto (destello.js). Canvas propio, a escala de la
   escena, sumado en screen: el negro no tapa nada. */
.conecta-destello { position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen; }
.cadena { list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;padding:0; }
.cadena li { position:relative;padding:1.25rem .6rem 0 0;font-size:clamp(.68rem, .5rem + .35vw, .85rem);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--papel); }
.cadena li::before { content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--pich-naranja); }
.cadena li::after { content:"";position:absolute;left:12px;top:-1px;width:calc(100% - 18px);height:2px;background:var(--pich-naranja);transform-origin:left;transform:scaleX(var(--enlace,1)); }
.cadena li:last-child::after { content:none; }
.cadena b { display:block;font-size:.65rem;color:var(--naranja-300);margin-bottom:.5rem;font-weight:500; }
.conecta-cierre { max-width:62ch;text-align:center;margin:3rem auto 0;color:#D9D4CD;font-weight:300; }
/* La mejora progresiva modifica solo posición/luz, nunca legibilidad. */
.conecta-viva .mano-izquierda { transform:translate3d(var(--mano-i,-6%),0,0); }
.conecta-viva .mano-derecha { transform:translate3d(var(--mano-d,6%),0,0); }
.conecta-viva .conecta-contacto { opacity:var(--contacto,0); }
/* El aro ya no aparece por opacidad: se dibuja (ver .aro-trazo). */
.conecta-viva .conecta-aro { opacity:1; }
.conecta-viva .cadena li { --enlace:0; }
.conecta-viva .cadena li::before { opacity:.25;transform:scale(.75); }
.conecta-viva .cadena li.encendido::before { opacity:1;transform:scale(1.25); }
.conecta-viva .cadena li::before { transition:opacity 300ms,transform 300ms; }
.conecta-viva .cadena li.encendido { color:var(--naranja-300); }

/* ---------- Nuestra filosofía ---------- */
.filosofia-grid { display:grid;gap:clamp(2rem, 1rem + 3vw, 4rem);align-items:center; }
.filosofia-texto { min-width:0; }
.filosofia-titulo { color:var(--naranja-texto);font-size:clamp(2.3rem, 1rem + 3vw, 4rem);line-height:1;letter-spacing:-.035em;max-width:13ch;margin-bottom:1.3rem; }
.filosofia-texto .manifiesto { margin-bottom:2rem;font-size:clamp(1.3rem, 1rem + .9vw, 1.85rem);font-weight:500;line-height:1.3;text-transform:none;letter-spacing:-.02em;max-width:30ch; }
.filosofia-texto .acerca-txt p { font-size:1rem; }
.filosofia-arte { margin:0;background:#000;position:relative;overflow:hidden;
  clip-path:polygon(var(--corte-l) 0,100% 0,100% calc(100% - var(--corte-l)),calc(100% - var(--corte-l)) 100%,0 100%,0 var(--corte-l)); }
.filosofia-arte img { width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.85) contrast(1.22); }
/* Respaldo quieto del motivo de la lámina, también sin WebGL/JS. */
.filosofia-arte::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,
  transparent 24%,rgba(254,60,15,.8) 24.5%,rgba(254,60,15,.8) 25.1%,transparent 25.5%,
  transparent 27%,rgba(0,0,0,.92) 27%,rgba(0,0,0,.92) 30%,transparent 30.3%,
  transparent 32%,rgba(254,60,15,.85) 32%,rgba(254,60,15,.85) 33.3%,transparent 33.6%,
  transparent 35%,rgba(0,0,0,.8) 35%,rgba(0,0,0,.8) 36.3%,transparent 36.6%); }
.filosofia-arte.fx-viva::after { opacity:0; }
@media(min-width:960px) { .filosofia-grid { grid-template-columns:1fr 1fr; } }

/* ---------- π insinuado por luz: fondo a sangre ---------- */
.porque { background:#080504;min-height:clamp(36rem, 55vw, 52rem);display:flex;align-items:center; }
.porque-grid { position:relative;z-index:2;width:100%;grid-template-columns:1fr; }
.pi-arte { position:absolute;inset:0;margin:0;overflow:hidden; }
.pi-arte img { width:100%;height:100%;object-fit:cover;object-position:65% center; }
/* Degradado continuo de toda la sección, por encima de foto y canvas.
   Hasta x=60% nunca baja de alfa .80: texto gris >= 4.5 sobre blanco. */
.pi-arte::after { content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.88) 42%,rgba(0,0,0,.8) 60%,transparent 86%); }
/* Escritorio: el arte arranca en x=20 % para que el pi caiga a la derecha
   del texto; con la sombra hasta 60 % la pata izquierda del pi quedaba
   tapada y el simbolo no se leia. El texto termina en ~52 %: alfa >= .7
   ahi da >= 5.9:1 aun sobre el blanco mas brillante de la llama. */
@media(min-width:900px){
  .pi-arte { left:20%; }
  /* Sin el tono #080504 ni el grano, el borde del arte en x=20 % no se ve. */
  .porque { background:#000; }
  .porque::before { opacity:0; }
  .pi-arte::after { background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.86) 30%,rgba(0,0,0,.7) 44%,transparent 64%); }
}
.porque-texto { position:relative;max-width:52%;background:none;padding:0; }
/* Luz visible. El token tenue local compensa el brillo y el grano. */
[data-luz] { --tenue-osc:#C9C2BC; }
.oscura[data-luz] .num,.oscura[data-luz] .meta { color:#FFB58F; }
[data-luz] { overflow:hidden; }
[data-luz]::after { content:"";position:absolute;left:0;top:0;width:440px;height:440px;z-index:-1;
  pointer-events:none;background:radial-gradient(circle,rgba(254,60,15,.12),transparent 68%);
  opacity:0;transform:translate3d(var(--luz-x,0px),var(--luz-y,0px),0); }
[data-luz].luz-activa::after { opacity:1; }
@keyframes titular-senal {
  0%,100% { transform:translateX(0) skewX(0); }
  25% { transform:translateX(2px) skewX(-1deg); }
  48% { transform:translateX(-1px) skewX(.5deg); }
}
.titular-senal { animation:titular-senal 340ms ease-out 1; }
@media(max-width:700px) {
  .conecta-escena { aspect-ratio:1.65; }
  .conecta-aro { width:52%;left:24%; }
  .cadena { grid-template-columns:1fr; }
  .cadena li { min-height:5.5rem;padding:0 0 1.4rem 2rem;font-size:.9rem; }
  .cadena li::before { top:4px; }
  .cadena li::after { left:3.5px;top:16px;width:calc(5.5rem - 18px);transform:rotate(90deg) scaleX(var(--enlace,1)); }
  .cadena li:last-child { min-height:0;padding-bottom:0; }
  .conecta-cierre { text-align:left;margin-top:2rem; }
}
/* Telefono: con el texto encima, la sombra (.85-.94) tapaba el pi entero
   y la seccion perdia su idea. El arte va arriba, completo y sin sombra;
   el texto debajo sobre negro. */
@media(max-width:899px) {
  .porque { display:block;min-height:0;padding-top:0;background:#000; }
  .porque::before { opacity:0; }
  .pi-arte { position:relative;inset:auto;aspect-ratio:16/9;margin-bottom:clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .pi-arte img { object-position:center; }
  .pi-arte::after { background:linear-gradient(180deg,transparent 70%,#000); }
  .porque-texto { max-width:100%; }
}
@media(hover:none) {
  .galeria figure::after { opacity:.35;transform:none;inset:.5rem; }
  [data-luz]::after { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .fx-canvas { display:none; }
  .conecta-viva .mano-izquierda,.conecta-viva .mano-derecha { transform:none; }
  .conecta-viva .conecta-aro { opacity:1;transform:translateY(-50%); }
  .conecta-aro .aro-trazo { stroke-dashoffset:0; }
  .conecta-aro .aro-punta,.conecta-destello { display:none; }
  .conecta-viva .conecta-contacto { opacity:1; }
  .conecta-viva .cadena li::after { --enlace:1 !important; }
  .filosofia-arte.fx-viva::after { opacity:1; }
  .conecta-viva .cadena li::before { opacity:1;transform:none; }
  .titular-senal { animation:none; }
  [data-luz]::after { display:none; }
  .galeria figure::after { transform:none; }
}