@import url("https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap");
/* Quaxel Digifab · capa de efectos del sitio (opción B en desarrollo).
   Se carga DESPUÉS de base.css y solo desde el sitio; las maquetas A y C
   archivadas no la piden, así que ampliar esto no las toca.
   Referencias estudiadas: davidecattaneo.it (cargador, grano, halo tras
   rejilla) y cipharvin.ro (texto que cambia a trazo). Se extrajo el
   principio de cada una, no su código ni sus recursos. */

/* ── Marca horizontal: isotipo + palabra, con los rombos del logotipo ─────────
   El rombo es parte del logotipo, no un adorno: en la versión vertical flanquea
   «DIGIFAB». Es un paralelogramo partido en dos triángulos por una junta fina. */
/* El bloque de texto medía dos líneas y el isotipo la suya, y cada uno se
   centraba por su cuenta: el conjunto quedaba descolgado respecto del menú.
   Ahora los dos comparten la misma línea de centro. */
.marca{display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;min-width:44px;padding-block:4px;line-height:0}
.marca__iso{height:36px;width:auto;flex:none;display:block}
/* `align-items:center` para que «QUAXEL» y la linea de «DIGIFAB» con sus
   rombos queden centradas una respecto de la otra: sin esto las dos se
   alineaban a la izquierda y la de arriba, mas ancha, se veia corrida. */
.marca__texto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;line-height:1}
/* La interletra añade su espacio TAMBIEN despues de la ultima letra, asi que
   el texto se ve corrido a la izquierda dentro de su caja. Se compensa con
   `text-indent`, que empuja el texto sin encoger la caja: con un margen
   negativo la caja se achica y su centro se desplaza 2,4 px, que era justo el
   descuadre que se veia. */
.marca__nombre{font-size:16px;font-weight:700;letter-spacing:.3em;padding-left:.3em;line-height:1;text-transform:uppercase}
.marca__linea{display:flex;align-items:center;gap:11px}
.marca__sub{font-size:8.5px;font-weight:500;letter-spacing:.42em;padding-left:.42em;line-height:1;text-transform:uppercase;color:var(--tinta-2)}
.marca__rombo{width:8px;height:auto;flex:none}
.marca__rombo--d{transform:scaleX(-1)}
@media (max-width:479px){.marca__texto{display:none}}

/* ── Grano ───────────────────────────────────────────────────────────────────
   Capa fija sobre todo, y otra más marcada dentro del hero: sobre una imagen
   comprimida, un poco de grano tapa el bandeado y la hace leer como nítida.
   Color literal a propósito: flota sobre cualquier fondo. */
/* Grano: mecanismo de davidecattaneo.it, medido en su página el 06-09 —una
   capa fija a pantalla completa, ruido repetido, opacidad 0,05 y SIN modo de
   mezcla— reimplementado aquí, no copiado: allá la animación la lleva un GIF,
   y este sitio la hace con pasos de CSS, que pesa menos, no fuerza descarga y
   se puede apagar con «reducir movimiento».

   El cambio que hacía falta era quitar `mix-blend-mode:overlay`. Sobre un
   fondo casi negro, overlay al 5 % no añade grano: lo borra. Medido en el hero
   como diferencia media entre píxeles vecinos, que es donde vive el grano —la
   desviación global no sirve, la domina el degradado—:

       normal 4,77 · screen 3,81 · soft-light 1,96 · overlay 1,14 · sin capa 1,30

   Con overlay la capa quedaba POR DEBAJO de no tener capa: estaba alisando la
   imagen. Con la mezcla normal el grano rinde 3,7 veces lo que hay sin él. El
   PNG ya trae canal alfa, igual que el GIF de la referencia, así que se compone
   encima sin necesidad de ningún modo de mezcla. */
.grano{position:fixed;inset:0;z-index:40;pointer-events:none;background-image:url(img/ruido.png);background-repeat:repeat;opacity:.0333}
.grano--medio{position:absolute;z-index:2;opacity:.06}
/* El grano hierve: se sacude a saltos, como el grano de película. Dos cosas
   que conviene no deshacer:

   · Se mueve con `transform`, no con `background-position`. Animar la posición
     del fondo obliga al navegador a REPINTAR la capa entera —y esta ocupa toda
     la pantalla— en cada salto. Con `transform` solo la recompone, que es casi
     gratis. Por eso la capa se extiende 80 px fuera de la pantalla: al
     desplazarse no puede asomar ningún borde.

   · `steps()` y no una interpolación suave. El grano de película no se desliza,
     salta de un patrón a otro; interpolado se ve como una textura arrastrándose
     y delata que es una imagen repetida.

     `steps(N)` reparte N subpasos DENTRO DE CADA TRAMO entre fotogramas
     clave, no N saltos en todo el ciclo. Con 8 fotogramas (7 tramos) y
     `steps(7)` salían 7×7=49 saltos microscópicos en 2,1 s: a esa
     velocidad se ven como deslizamiento continuo, justo lo que esta regla
     dice evitar. `steps(1)` es lo que da un salto duro por tramo —7 saltos
     en total—, que es un fotograma de película, no una textura corriendo.
     Detectado 2026-09-22: el usuario reportó "se ve como una textura que
     se está moviendo encima", y medirlo confirmó el conteo de saltos.

   Con «reducir movimiento» sigue hirviendo, pero a menos de la mitad de ritmo.
   Es un movimiento autónomo y parpadeante —de los que sí justifican esa
   preferencia—, así que aquí se atenúa de verdad; lo que no se hace es
   apagarlo, porque un grano quieto se lee como suciedad en la pantalla en vez
   de como textura. */
.grano{inset:-80px;will-change:transform;animation:granear 1.05s steps(1) infinite}
@media (prefers-reduced-motion:reduce){
  .grano{animation-duration:2.8s}
}
@keyframes granear{
  0%{transform:translate3d(0,0,0)}        14%{transform:translate3d(-26px,14px,0)}
  28%{transform:translate3d(20px,-22px,0)} 42%{transform:translate3d(-16px,-14px,0)}
  56%{transform:translate3d(24px,18px,0)}  70%{transform:translate3d(-22px,22px,0)}
  84%{transform:translate3d(14px,-18px,0)} 100%{transform:translate3d(0,0,0)}
}

/* ── Cargador de entrada ─────────────────────────────────────────────────────
   Solo existe con JavaScript: si no carga, la página se ve entera en vez de
   quedar detrás de una pantalla que nadie va a poder abrir. */
.cargador{display:none}
.js .cargador{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#0C0C0F}
.cargador__rotulo{position:absolute;margin:0;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;text-align:center;width:100%;padding:0 60px}
.cargador__rotulo--arriba{top:clamp(20px,4vw,48px)}
.cargador__rotulo--abajo{bottom:clamp(20px,4vw,48px)}
.cargador__centro{display:grid;justify-items:center;gap:30px;position:relative;z-index:2}
/* Marco: cuatro angulos finos en blanco tenue. Antes eran magenta con puntos
   que rebotaban, un punto cian que recorria el borde y chispas: cinco colores
   y cinco gestos compitiendo con el logotipo. Ahora el unico protagonista es
   el logotipo, y el color vive solo en la linea del laser (2026-09-23). */
.cargador__marco{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,86vw);height:auto;z-index:1}
.cargador__angulo{stroke:rgba(255,255,255,.28);stroke-width:1;fill:none;stroke-linecap:square;vector-effect:non-scaling-stroke}
.cargador__logo{position:relative;width:clamp(150px,18vw,220px)}
.cargador__logo img{width:100%;height:auto;clip-path:inset(0 0 100% 0);display:block}
/* El laser: nucleo blanco con halo magenta, como el haz sobre el material. */
.cargador__laser{position:absolute;left:-14%;width:128%;height:1px;top:0;opacity:0;
  background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.9),0 0 22px 4px rgba(255,0,255,.55)}
.cargador__pie{display:flex;align-items:center;gap:16px}
.cargador__barra{position:relative;width:clamp(130px,16vw,200px);height:1px;background:rgba(255,255,255,.14);overflow:hidden}
.cargador__barra i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.cargador__pct{margin:0;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;min-width:4ch}

/* Antes de que la línea de tiempo los coloque, los títulos partidos no asoman.
   Sin JavaScript nunca se aplica `.js`, así que el texto se ve normal. */
.js [data-letras]{visibility:hidden}
.js [data-letras].listo{visibility:visible}

/* ── Borde que se dibuja al pasar el puntero ─────────────────────────────────
   Con un trazo SVG y no con `border`: un borde se enciende de golpe, un trazo
   se dibuja. `non-scaling-stroke` evita que el rectángulo deforme la línea. */
.borde-vivo{position:relative}
.borde-vivo__trazo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.borde-vivo__trazo rect{fill:none;stroke:var(--magenta);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .62s var(--curva),opacity .3s var(--curva)}
.borde-vivo:hover .borde-vivo__trazo rect,.borde-vivo:focus-within .borde-vivo__trazo rect{stroke-dashoffset:0;opacity:1}
@media (prefers-reduced-motion:reduce){.borde-vivo__trazo rect{transition:opacity .2s}}

/* ── Trazo exterior de la fuente al pasar el puntero ─────────────────────────
   Dos capas cruzadas en vez de animar `-webkit-text-stroke`, que salta de 0 a
   su valor sin pasos intermedios. La copia va en ::after, así que no se lee
   dos veces. Si el navegador no conoce la propiedad, no pasa nada. */
.trazo{position:relative}
/* `inset:0` y centrado en vez de `left:0;top:0`: el enlace tiene relleno propio
   y con las coordenadas crudas la copia salía corrida respecto del original.
   El trazo va en `currentColor` y no en magenta: sobre el hero, un texto de
   15 px contorneado en magenta da 4,39:1 y deja de leerse justo mientras el
   puntero está encima (contraste-en-temas-claro-oscuro.md). */
.trazo::after{content:attr(data-texto);position:absolute;inset:0;display:grid;place-items:center;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px currentColor;opacity:0;transition:opacity .34s var(--curva);pointer-events:none;white-space:nowrap}
.trazo>span{display:inline-block;transition:opacity .34s var(--curva)}
.trazo:hover::after,.trazo:focus-visible::after{opacity:1}
.trazo:hover>span,.trazo:focus-visible>span{opacity:0}
@supports not (-webkit-text-stroke:1px currentColor){.trazo::after{display:none}.trazo:hover>span{opacity:1}}

/* ── Halo tras la malla triangular ───────────────────────────────────────────
   La malla es la MÁSCARA, no un relleno del color de la sección: así el patrón
   no necesita saber sobre qué fondo vive, y el color se sigue decidiendo en un
   solo sitio. */
.halo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:url(img/malla-triangulos.svg);mask-image:url(img/malla-triangulos.svg);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:120px 103.9px;mask-size:120px 103.9px}
.halo__luz{position:absolute;left:-15%;top:-10%;width:130%;height:130%;
  background:radial-gradient(36% 40% at 30% 38%,rgba(255,0,255,1),rgba(160,0,190,.75) 42%,transparent 74%),
             radial-gradient(30% 34% at 72% 66%,rgba(0,120,215,1),transparent 72%);
  will-change:transform}

/* ── Fondo animado del contacto ──────────────────────────────────────────────*/
.contacto{position:relative;overflow:hidden;isolation:isolate;text-align:center}
.contacto__lienzo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block}
.contacto h2{max-width:18ch;margin:0 auto}
.contacto .bajada{margin:20px auto 0;text-align:center}
.contacto__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.contacto__datos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 40px;margin-top:96px;font-size:16px;color:var(--tinta-2)}
.contacto__datos a,.contacto__datos span{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.contacto__datos .ico{color:var(--magenta);font-size:20px}
.contacto__datos a:hover{color:var(--tinta)}

/* ── Casos de estudio ────────────────────────────────────────────────────────*/
.casos__cab{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:52px}
.casos__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1279px){.casos__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.caso{display:flex;flex-direction:column;background:var(--fondo-2);border:1px solid var(--linea);overflow:hidden;border-radius:var(--radio)}
.caso__foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#101013}
/* Anclada arriba: cortada por el centro se pierde la figura del galvano, que
   es lo unico que hay que ver en la tarjeta. */
.caso__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .7s var(--curva)}
.caso:hover .caso__foto img{transform:scale(1.05)}
.caso__cuerpo{padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.caso__meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.caso h3{font-size:21px}
.caso p{color:var(--tinta-2);font-size:16px;margin:0}
.caso__mas{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--tinta);font-weight:600;font-size:15px}
.caso__mas .ico{color:var(--magenta);transition:transform .3s var(--curva)}
.caso:hover .caso__mas .ico{transform:translateX(4px)}
@media (max-width:1023px){.casos__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:679px){.casos__grid{grid-template-columns:1fr}}

/* ── Páginas interiores: índice de casos y ficha de un caso ──────────────────*/
.interior{padding-top:calc(var(--alto-cab) + clamp(48px,8vw,96px))}
/* `flex-wrap` y `min-width:0`: la ruta lleva el título del caso, que en un
   teléfono no cabe en una línea. Sin esto, un hijo flex no se encoge por
   debajo de su contenido y empuja la página hacia los lados. */
.miga{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:24px}
.miga>*{min-width:0}
.miga span{overflow-wrap:anywhere}
.miga a{min-height:44px;display:inline-flex;align-items:center}
.miga a:hover{color:var(--tinta)}
.ficha__portada{margin:44px 0;border-radius:var(--radio-g);overflow:hidden;border:1px solid var(--linea);position:relative}
.ficha__portada img{width:100%;height:auto}
.ficha__datos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin-bottom:52px}
.ficha__dato dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.ficha__dato dd{margin:0;font-size:17px;font-weight:600}
.ficha__cuerpo{max-width:68ch}
.ficha__cuerpo h2{font-size:clamp(24px,3vw,34px);margin:48px 0 18px}
.ficha__cuerpo p{color:var(--tinta-2);font-size:17px;line-height:1.7;margin-bottom:18px}
.ficha__cuerpo ul{color:var(--tinta-2);font-size:17px;line-height:1.7;padding-left:22px;margin:0 0 18px}
.ficha__cuerpo li{margin-bottom:8px}
.ficha__galeria{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:52px 0}
.ficha__galeria figure{margin:0;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea)}
.ficha__galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.nota{border-left:2px solid var(--magenta);padding:14px 0 14px 20px;color:var(--tinta-3);font-size:16px;max-width:62ch;margin:40px 0}
@media (max-width:899px){.ficha__datos{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.ficha__datos{grid-template-columns:1fr;gap:20px}.ficha__galeria{grid-template-columns:1fr}}


/* ── Franja Popupsty ────────────────────────────────────────────────────────
   Copia vendorizada de `06 - MODULOS/04-franja-popupsty/`, traducida a las
   fichas de Quaxel. NO se importa el arena y oro del paquete original: metería
   una segunda identidad justo en la última pantalla (invariante 1 del
   contrato del módulo).
   Ajuste pedido el 2026-09-06: letra más pequeña, logotipo más grande y el
   texto en magenta. Medido sobre el fondo #050506 de la banda: el magenta da
   6,5:1, por encima del mínimo aunque el cuerpo sea pequeño. */
.popupsty{background:#050506;border-top:1px solid var(--linea);padding:26px var(--lado)}
.popupsty__in{width:min(100%,var(--ancho));margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.popupsty__logo{display:block;width:190px;flex:none;color:var(--magenta)}
.popupsty__logo svg{width:100%;height:auto;display:block}
/* El texto corrido en blanco (19,4:1) y solo los enlaces en magenta (6,5:1).
   La interlinea es 1,7 para que las dos lineas midan lo mismo de alto que el
   logotipo: 190 px de ancho por su proporcion dan 39 px, y 2 x 11,5 x 1,7 = 39.
   Si cambia el ancho del logotipo, este numero se recalcula, no se estima. */
.popupsty__txt{margin:0;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11.5px;line-height:1.7;color:var(--tinta);text-align:center;letter-spacing:.02em}
/* El enlace vuelve a ser de linea: con `min-height:44px` cada renglon medía
   44 px y las dos lineas sumaban 88, el doble que el logotipo. El blanco de
   toque se consigue igual, con una capa invisible que amplia la zona
   sensible sin tocar el flujo del texto. */
.popupsty__txt a{position:relative;color:var(--magenta);text-decoration:underline;text-underline-offset:3px}
.popupsty__txt a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.popupsty__txt a:hover{color:#FF66FF}
@media (max-width:599px){.popupsty__in{flex-direction:column;gap:16px}.popupsty__logo{width:160px}}

/* ── Máquina de escribir ─────────────────────────────────────────────────────
   El cursor es un elemento propio, absoluto, que salta a la caja de la letra
   recién escrita. Un ::after fijo al final del título parpadearía donde el
   texto ya está escrito, que es justo lo contrario de teclear. */
.tecla{position:relative}
.tecla__cursor{position:absolute;left:0;top:0;width:.085em;background:var(--magenta);
  box-shadow:0 0 10px 1px rgba(255,0,255,.75);opacity:0;pointer-events:none;will-change:transform}
.tecla--escribiendo .tecla__cursor{animation:parpadeo .62s steps(2,end) infinite}
@keyframes parpadeo{0%,49%{opacity:1}50%,100%{opacity:.14}}
/* Con movimiento reducido el cursor sigue estando —marca donde va la
   escritura— pero deja de parpadear, que es lo unico molesto de el. */
@media (prefers-reduced-motion:reduce){.tecla--escribiendo .tecla__cursor{animation:none;opacity:1}}

/* ── Botones: neón que titila ────────────────────────────────────────────────
   El resplandor vive en una capa propia y lo que titila es su OPACIDAD, no la
   sombra: animar `box-shadow` repinta el botón en cada cuadro, animar la
   opacidad de una capa la compone la tarjeta gráfica.
   El titileo es de baja amplitud (0,55 a 1) y lento: un neón de verdad no
   parpadea a discoteca, respira. Al pasar el puntero sube a tope y se suma el
   barrido metálico. */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .26s var(--curva),background-color .26s var(--curva),border-color .26s var(--curva),color .26s var(--curva)}
.btn__luz{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0}
.btn--magenta .btn__luz{box-shadow:0 0 20px 2px rgba(255,0,255,.9),0 0 52px 8px rgba(255,0,255,.5),inset 0 0 0 1px rgba(255,255,255,.4)}
.btn--borde .btn__luz{box-shadow:0 0 18px 2px rgba(63,217,255,.7),0 0 44px 6px rgba(63,217,255,.28),inset 0 0 0 1px rgba(63,217,255,.4)}
.btn--blanco .btn__luz{box-shadow:0 0 20px 2px rgba(255,255,255,.6),0 0 48px 6px rgba(255,255,255,.25)}
/* El flash metalico: tres bandas de brillo en vez de una, con la del centro
   casi opaca. Una sola banda translucida se lee como un reflejo suave; tres,
   con un nucleo fuerte, se leen como una chapa que devuelve la luz. */
.btn__brillo{position:absolute;top:-14%;bottom:-14%;left:-70%;width:56%;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,
    transparent 0%,rgba(255,255,255,.28) 26%,
    rgba(255,255,255,.95) 47%,rgba(255,255,255,.95) 53%,
    rgba(255,255,255,.28) 74%,transparent 100%);
  transform:skewX(-20deg);mix-blend-mode:screen;filter:blur(.4px)}
/* Escala de crecimiento al pasar el puntero: subida de 1,035 a 1,1 por
   pedido explicito 06-09 ("un brillo tintineante fuerte con una escala de
   1 a 1,1 que haga crecer el boton"). */
.btn:hover,.btn:focus-visible{scale:1.033 !important}
.btn:active{transform:scale(1.06)}
/* Con «reducir movimiento» el crecimiento se ATENUA, no se apaga: mismo
   patron que ya costo cuatro correcciones en este sitio (tecleo, anillo,
   grano, carretera) y que aqui habia vuelto a colarse en dos sitios a la vez
   —este y el titileo del boton en base.js—. El botón sigue creciendo al
   pasar el puntero, solo que menos y sin transición animada (instantáneo). */
@media (prefers-reduced-motion:reduce){
  .btn{transition:background-color .18s linear,border-color .18s linear,color .18s linear}
  .btn:hover,.btn:focus-visible{transform:scale(1.04)}
  .btn__luz{opacity:.5}
}

/* ── Foco del puntero sobre la malla ─────────────────────────────────────────
   La máscara de `.halo` deja ver solo las líneas: un foco pequeño pegado al
   cursor enciende los triángulos que tiene alrededor y deja el resto apagado. */
.halo__foco{position:absolute;left:0;top:0;width:clamp(260px,26vw,420px);aspect-ratio:1;
  margin-left:calc(clamp(260px,26vw,420px) / -2);margin-top:calc(clamp(260px,26vw,420px) / -2);
  background:radial-gradient(circle,rgba(255,0,255,1) 0%,rgba(255,0,255,.55) 34%,transparent 70%);
  opacity:0;will-change:transform;mix-blend-mode:screen}
@media (pointer:coarse){.halo__foco{display:none}}

/* ── Borde que además sigue al puntero ───────────────────────────────────────
   Dos capas con oficios distintos: el trazo SVG dibuja el contorno entero al
   entrar, y esta segunda enciende un tramo brillante alrededor de donde está
   el cursor. La máscara es un círculo centrado en el puntero, así que el
   resplandor recorre el borde con la mano en vez de quedarse fijo.
   Se anima la POSICIÓN de la máscara con variables, no el `box-shadow`: lo
   segundo repintaría la tarjeta entera en cada movimiento. */
.borde-vivo{--mx:50%;--my:50%}
.borde-vivo__luz{position:absolute;inset:-1px;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;
  border:1.5px solid var(--magenta);
  box-shadow:0 0 12px rgba(255,0,255,.85),inset 0 0 12px rgba(255,0,255,.35);
  -webkit-mask-image:radial-gradient(circle 150px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.45) 45%,transparent 72%);
  mask-image:radial-gradient(circle 150px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.45) 45%,transparent 72%);
  transition:opacity .3s var(--curva)}
.borde-vivo:hover .borde-vivo__luz,.borde-vivo:focus-within .borde-vivo__luz{opacity:1}
@media (pointer:coarse){.borde-vivo__luz{display:none}}

/* ── Malla de fondo para las secciones que no tenian patron ─────────────────
   Ningun patron se queda quieto: es la firma del sistema, y uno inmovil se lee
   como textura de relleno. `overflow:hidden` en la seccion es obligatorio: la
   malla se extiende un 14 % fuera de su caja para que la deriva no descubra un
   borde, y sin recorte eso empujaba la pagina 179 px hacia los lados. */
.malla{position:absolute;inset:-14%;z-index:0;pointer-events:none;opacity:.4;
  background-image:url(img/malla-triangulos.svg);background-repeat:repeat;background-size:120px 103.9px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 45%,#000,transparent 80%);
  mask-image:radial-gradient(72% 62% at 50% 45%,#000,transparent 80%);
  will-change:background-position}
.malla--tenue{opacity:.2}
.con-malla{position:relative;isolation:isolate;overflow:hidden}
.con-malla>.cont{position:relative;z-index:2}

/* ── Puntero propio y texto no seleccionable ───────────────────────────────
   Traído del pitch de Ariuke (`07 - PLAN DE MEDIOS/72 - Ariuke/…/pitch-web/`),
   que a su vez reconstruyó el principio del puntero de cieffemilano.it: un
   punto sólido dibujado por la propiedad `cursor` —que nunca se retrasa, así
   que la puntería no sufre— y por detrás un anillo que lo persigue con
   inercia y se estira en la dirección del viaje.

   Dos cambios respecto del original, ambos deliberados:

   · El anillo es MAGENTA literal, no blanco con `mix-blend-mode:difference`.
     Allá el blend dejaba el anillo invisible sobre el crema del tema claro y
     hubo que resolverlo con color literal por tema; aquí el sitio tiene un
     solo fondo, así que se va directo al literal. Es lo que pide
     `contraste-en-temas-claro-oscuro.md` para lo que flota sobre la interfaz.
     Magenta sobre #111114 da 6,01:1, muy por encima del 3:1 exigido a un
     elemento no textual.

   · El tamaño del anillo NO se anima con `width`/`height`, sino con la escala
     dentro del mismo `transform` que ya escribe el guion cuadro a cuadro.
     Animar la caja dispararía maquetación en cada fotograma del hover, que es
     justo lo contrario de los 60 fps que este sitio debe sostener. */
:root{
  /* Punto central: rombo de puntas redondeadas (un cuadrado girado 45 grados),
     en el gris de las ventanas Windows 95 (2026-09-24). */
  --punto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='14px' viewBox='0 0 14 14'%3E%3Crect fill='%23C0C0C0' x='3' y='3' width='8' height='8' rx='1.6' transform='rotate(45 7 7)' /%3E%3C/svg%3E") 7 7, auto;
}
/* Selección apagada en TODO el documento, no solo en los controles: titulares,
   párrafos y citas también. `user-select:none` no cambia el puntero por sí
   solo, así que no hace falta ningún `cursor:not-allowed`. El único campo del
   sitio es un deslizador de rango, que se arrastra igual con esto puesto. */
*{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
img, svg{ -webkit-user-drag:none; user-drag:none }

/* El punto también sobre lo pulsable: si se dejara el `cursor:pointer`, la
   manito del sistema reaparecería sobre enlaces y botones y el puntero propio
   duraría lo que tarda uno en acercarse a algo. La señal de «esto se pulsa» no
   se pierde: la da el anillo, que crece. */
html{ cursor:var(--punto) }
a, button, summary, label, [role="button"], input, .visor__barra,
.trab__nav, .cab__menu a, .btn{ cursor:var(--punto) }

.punteroAnillo{
  position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; border:1.5px solid var(--magenta); pointer-events:none;
  z-index:998; opacity:0; will-change:transform;
  /* Mismo resplandor que las barras laterales del hero: 18 px de difuminado,
     2 px de expansión, al 60 % del color. Se toma de ellas literalmente para
     que el aro pertenezca al mismo sistema de luz y no parezca otro elemento.
     El interior es propio del aro: sin él, un anillo de 1,5 px con halo fuera
     se lee como un borde con sombra, no como algo encendido. */
  box-shadow:0 0 18px 2px rgba(255,0,255,.6), inset 0 0 10px rgba(255,0,255,.35);
  transition:opacity .2s var(--curva), background-color .25s var(--curva);
}
.punteroAnillo.activo{ opacity:1 }
.punteroAnillo.sobre{ background-color:color-mix(in srgb, var(--magenta) 14%, transparent) }
/* En pantalla táctil no hay puntero al que seguir. */
@media (hover:none) and (pointer:coarse){ .punteroAnillo{ display:none } html{ cursor:auto } }

/* ── Vídeos de Instagram ────────────────────────────────────────────────────
   La tarjeta previa es de Quaxel; el reproductor de Instagram solo aparece
   cuando alguien pulsa. La proporción 9:16 se declara en el marco para que la
   rejilla no dé un salto al sustituir la tarjeta por el iframe: los dos ocupan
   exactamente lo mismo. */
.reels{padding-block:clamp(64px,8vw,110px);position:relative}
.reels__grid{display:grid;gap:clamp(18px,2.4vw,30px);margin:clamp(26px,3.5vw,44px) 0 clamp(28px,3.5vw,42px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.reel{display:flex;flex-direction:column;gap:10px;min-width:0}
.reel__marco{position:relative;aspect-ratio:9/16;border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--linea);background:var(--fondo-2)}
.reel__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Sin miniatura propia, el hueco lo llena el patrón de marca: un recuadro
   vacío se leería como imagen que no cargó. */
.reel__patron{position:absolute;inset:0;opacity:.5;
  background:url(img/malla-triangulos.svg) repeat 50% 50%/104px 90px,
             radial-gradient(70% 60% at 50% 42%,rgba(255,0,255,.22),transparent 72%)}
.reel__play{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;
  border-radius:50%;border:1.5px solid var(--magenta);background:rgba(17,17,20,.72);
  color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}
.reel__play .ico{width:24px;height:24px;transform:rotate(-45deg)}
.reel__tit{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em}
.reel__pie{margin:0;color:var(--tinta-2);font-size:14.5px;line-height:1.5}
.reel__ver{display:inline-flex;align-items:center;gap:7px;color:var(--tinta-2);font-size:14px;
  min-height:44px}
.reel__ver:hover{color:var(--magenta)}
.reel__ver .ico--sale{width:.82em;height:.82em}
/* El aro y el patrón responden al puntero; con movimiento reducido, no. */
@media (prefers-reduced-motion:no-preference){
  .reel__play{transition:transform .35s var(--curva),background-color .35s var(--curva)}
  .reel:hover .reel__play{transform:scale(1.1);background:rgba(255,0,255,.28)}
}

/* ── Marquesina ─────────────────────────────────────────────────────────────
   El separador es el rombo de la marca, no un punto: un punto sería el
   separador de cualquiera. La cinta se clona por guion hasta cubrir dos veces
   la pantalla; las copias van con `aria-hidden`, así que el lector de pantalla
   lee la lista una sola vez. */
.marq{position:relative;overflow:hidden;white-space:nowrap;padding-block:clamp(26px,4vw,52px);
  border-block:1px solid var(--linea)}
.marq__cinta{display:flex;align-items:center;will-change:transform}
.marq__pieza{display:flex;align-items:center;column-gap:64px;padding-right:64px;flex:0 0 auto}
.marq__txt{font-size:clamp(26px,4.4vw,58px);font-weight:800;letter-spacing:-.025em;line-height:1;
  color:var(--tinta-2)}
.marq__sep{width:.34em;height:.54em;flex:none;background:var(--magenta);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);font-size:clamp(26px,4.4vw,58px)}

/* ── Contacto inmediato (FAB) ───────────────────────────────────────────────
   Reemplaza al indice lateral. Colores literales: flota sobre cualquier fondo.
   Aparece/desaparece con transicion CSS (interrumpible) de transform+opacity,
   anclada a su boton (transform-origin abajo a la derecha), 200 ms. */
.fab{position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:45;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab__boton{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:#FF00FF;color:#0A0A0B;box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .2s cubic-bezier(.22,1,.36,1)}
.fab__boton:hover{background:#FF4DFF}
.fab__boton:active{transform:scale(.96)}
.fab__boton .ico{width:24px;height:24px;grid-area:1/1;transition:transform .2s cubic-bezier(.22,1,.36,1),opacity .2s cubic-bezier(.22,1,.36,1)}
.fab__ico-cerrar{opacity:0;transform:rotate(-45deg) scale(.9)}
.fab.abierto .fab__ico-abrir{opacity:0;transform:rotate(45deg) scale(.9)}
.fab.abierto .fab__ico-cerrar{opacity:1;transform:none}
.fab__panel{width:236px;padding:14px;border-radius:14px;background:#141417F2;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:2px;transform-origin:100% 100%;
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);pointer-events:none;
  transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),visibility 0s linear .2s}
.fab.abierto .fab__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
.fab__titulo{margin:0 0 6px;padding:0 8px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.fab__op{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:9px;border:0;
  background:none;color:#F4F4F6;font:500 15px/1.2 Montserrat,system-ui,sans-serif;text-decoration:none;cursor:pointer;text-align:left;
  transition:background-color .15s ease-out}
.fab__op:hover,.fab__op:focus-visible{background:rgba(255,255,255,.08)}
.fab__op .ico{width:20px;height:20px;color:#FF00FF;flex:none}
.fab__redes{display:flex;gap:6px;margin-top:6px;padding:8px 4px 0;border-top:1px solid rgba(255,255,255,.1)}
.fab__redes a{width:44px;height:44px;display:grid;place-items:center;border-radius:9px;color:#F4F4F6}
.fab__redes a:hover{background:rgba(255,255,255,.08)}
.fab__redes .ico{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){
  .fab__panel,.fab.abierto .fab__panel{transform:none}
}

/* ── Barra de barrido de las filas de servicio ──────────────────────────────
   Entra por la izquierda y sale por la derecha. Va detrás del contenido de la
   fila (`z-index:0` con el summary por encima), así que no tapa el texto ni
   intercepta pulsaciones. */
.serv__fila{position:relative}
.serv__barra{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,0,255,.16),rgba(0,86,156,.10));
  transform:scaleX(0);transform-origin:0 50%}
.serv__fila>summary,.serv__fila>.serv__cuerpo{position:relative;z-index:1}

/* ── Grano dentro del cargador ──────────────────────────────────────────────
   El cargador se dibuja en la capa 90 y el grano general en la 40, así que le
   quedaba por debajo: la primera pantalla del sitio era la única sin textura.
   Esta capa hereda `.grano` entera —misma imagen, misma animación, misma
   opacidad— y solo cambia dónde se sitúa. Va por encima del marco y de los
   puntos (capa 2) para que el grano cubra también el logotipo, como cubre todo
   lo demás en el resto de la página. */
.grano--cargador{position:absolute;z-index:3}

/* ── Pie ─────────────────────────────────────────────────────────────────────
   La rejilla de rombos magenta se retiró el 2026-09-23: se leía ajena al
   estilo del sitio. Queda archivada en _archivado/2026-09-23/antes-del-rediseno. */
.pie{position:relative;overflow:hidden}
.pie>.cont{position:relative;z-index:1}

/* Velo del hero: con JavaScript, el hero y la cabecera quedan ocultos hasta que
   su entrada fija el estado inicial (clase `hero-listo` en <html>). Evita el
   destello de verlos completos, desaparecer y volver a entrar. */
.js:not(.hero-listo) [data-hero],
.js:not(.hero-listo) .hero__barra,
.js:not(.hero-listo) .cab{visibility:hidden}

/* ── Llamada del botón de contacto ─────────────────────────────────────────
   Pedido 2026-09-23: que el FAB llame la atención. Dos capas:
     · Brillo que late: un halo magenta que crece y se apaga cada 2,4 s.
     · El icono vibra una vez cada 5 s (0,6 s de vibración, el resto quieto),
       como un aviso, no un zumbido constante.
   Bucles autónomos: aquí sí van @keyframes (nadie los dispara con la mano).
   Se detienen con el panel abierto. Con «reducir movimiento» queda solo un
   brillo suave, sin escala ni vibración. */
.fab__boton{position:relative}
.fab__boton::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,0,255,.6),0 0 18px 4px rgba(255,0,255,.45);
  animation:fab-late 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes fab-late{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}}
.fab__ico-abrir{animation:fab-vibra 5s ease-in-out infinite;transform-origin:50% 60%}
@keyframes fab-vibra{
  0%,12%,100%{transform:rotate(0)}
  2%{transform:rotate(-14deg) scale(1.08)} 4%{transform:rotate(12deg) scale(1.08)}
  6%{transform:rotate(-9deg)} 8%{transform:rotate(6deg)} 10%{transform:rotate(-3deg)}}
.fab.abierto .fab__boton::before,.fab.abierto .fab__ico-abrir{animation:none}
@media (prefers-reduced-motion:reduce){
  .fab__boton::before{animation:fab-suave 3s ease-in-out infinite}
  .fab__ico-abrir{animation:none}
}
@keyframes fab-suave{0%,100%{opacity:.35;transform:none}50%{opacity:.8;transform:none}}

/* ══ Estetica de maquina ochentera (bloque 1 · 2026-09-24) ══════════════════
   Referencia de tono: el monitor CRT y el HUD de los juegos de los 80 (pedido
   del usuario: «el vibe de Far Cry Blood Dragon»), llevados al oficio de un
   taller de fabricacion digital. Colores literales: flotan sobre todo. */

/* 1 · Monitor: lineas de barrido finas + viñeta. Por debajo de la cabecera
   (50) y por encima del grano (40). Opacidad baja a proposito: no puede bajar
   el contraste del texto (se mide con auditar-contraste). */
.crt{position:fixed;inset:0;z-index:41;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%,transparent 62%,rgba(0,0,0,.42) 100%)}
.crt::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.035);opacity:0}

/* 3 · Encendido de pantalla: una linea blanca que se abre como un televisor. */
.cargador__encendido{position:absolute;left:0;top:50%;width:100%;height:100vh;margin-top:-50vh;z-index:4;
  background:#fff;transform:scale(0,.003);pointer-events:none;
  box-shadow:0 0 40px 10px rgba(255,255,255,.6)}

/* 4 · Lecturas de maquina en el hero. Monoespaciada, en una fila al pie del
   hero, dentro del ancho del contenido: no se monta sobre el titular. */
.hud{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;justify-content:space-between;gap:18px;
  /* A la derecha deja libre el hueco del boton de contacto (56 px + margen). */
  padding:0 calc(var(--lado) + 84px) 0 var(--lado);font:400 12px/1.2 "Share Tech Mono",ui-monospace,Consolas,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);pointer-events:none}
.hud__dato b{font-weight:400;color:#FF00FF;margin-right:.4em}
.hud__dato i{font-style:normal;color:#F4F4F6;font-variant-numeric:tabular-nums}
.hud__led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3FD9FF;
  box-shadow:0 0 8px 2px rgba(63,217,255,.8);margin:0 .3em 1px 0;vertical-align:middle}
@media (max-width:1023px){.hud__dato--ext{display:none}}
@media (max-width:599px){.hud{display:none}}

/* 9 · Cinta de codigo de maquina entre secciones. */
.gcode{position:relative;overflow:hidden;white-space:nowrap;padding:12px 0;
  border-block:1px solid rgba(255,0,255,.22);background:#0C0C0F}
.gcode__cinta{display:flex;will-change:transform}
.gcode__pieza{flex:0 0 auto;padding-right:48px;font:400 13px/1 "Share Tech Mono",ui-monospace,Consolas,monospace;
  letter-spacing:.16em;color:rgba(63,217,255,.7)}

/* 5 · Horizonte synthwave del hero: ocupa la mitad baja, sobre la imagen de
   fondo y bajo el texto. Degradado superior para fundirse con la imagen. */
/* Escena de Arica (2026-09-24, referencia RetroSynth Radio): el lienzo cubre
   todo el hero y dibuja cielo estrellado, sol, Payachatas en malla y suelo. */
.hero__horizonte-caja{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Velo a la izquierda, donde vive el texto: la escena sigue ahi, atenuada. */
.hero__horizonte-caja::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,4,16,.82) 0%,rgba(8,4,16,.5) 42%,rgba(8,4,16,0) 66%)}
.hero__horizonte{display:block;width:100%;height:100%}
@media (max-width:599px){.hero__horizonte-caja{height:42%;opacity:.7}}

/* ══ Bloque 3 de la estetica de maquina (2026-09-24) ════════════════════════ */

/* 6 · Reticula de maquina sobre la foto de cada servicio, al pasar el puntero. */
.ret{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%;height:100%;overflow:visible}
.ret__esq{fill:none;stroke:#3FD9FF;stroke-width:2;stroke-linecap:square;vector-effect:non-scaling-stroke}
.ret__ruta{fill:none;stroke:#FF00FF;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.9}
.ret__haz{fill:#fff;filter:drop-shadow(0 0 5px #FF00FF) drop-shadow(0 0 10px #FF00FF)}
.ret__rotulo{position:absolute;left:12px;top:12px;z-index:5;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  font:400 11px/1 "Share Tech Mono",ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;
  color:#F4F4F6;background:rgba(10,10,11,.78);padding:6px 8px;border-left:2px solid #FF00FF;opacity:0}

/* 8 · Corte de señal del visor: bandas desplazadas y separacion de color,
   150 ms, solo al cambiar de pieza. */
.visor__ruido{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,rgba(255,0,255,.18) 0 3px,transparent 3px 9px),
    repeating-linear-gradient(0deg,rgba(63,217,255,.16) 0 2px,transparent 2px 13px)}

/* 12 · Rotulo de sistema al cierre. */
.pie__sistema{margin:18px 0 0;font:400 12px/1 "Share Tech Mono",ui-monospace,Consolas,monospace;
  letter-spacing:.2em;color:rgba(63,217,255,.7)}
.pie__cursor{display:inline-block;width:.6em;height:1em;margin-left:.3em;vertical-align:-2px;background:#3FD9FF;
  animation:pie-cursor 1.1s steps(1) infinite}
@keyframes pie-cursor{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pie__cursor{animation:none}}

/* ══ Ronda 2 de la estetica ochentera (2026-09-24) ════════════════════════ */

/* Cargador · el logotipo se SINTONIZA como un televisor: estatica, rodillo
   vertical, fantasmas de color y un ultimo parpadeo antes de fijarse. */
.cargador__logo img{clip-path:none;opacity:0}
.cargador__estatica{position:absolute;left:-18%;top:-18%;width:136%;height:136%;opacity:0;
  image-rendering:pixelated;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}

/* Foto antigua · una sola clase para todas las fotos. Baja la saturacion,
   calienta y levanta los negros como una copia de revista o un video de los
   80; los colores dejan de «decir» que son fotos de hoy. Solo `filter`: no
   cambia el tamaño ni la posicion de nada. */
.retro{filter:sepia(.28) saturate(.72) contrast(1.12) brightness(.94) hue-rotate(-10deg)}

/* ── Escena del hero ─────────────────────────────────────────────────────── */
.js .hero__medio img{opacity:.14}
/* Con el contenedor delante: la regla base del hero (mismo peso, mas abajo en la pagina) ganaba. */
.hero .cont h1{max-width:min(26ch,58vw)}
.hero .cont .bajada{max-width:min(56ch,54vw)}
.hero__capa--ciudad .ciudad{position:absolute;right:0;bottom:0;width:100%;height:100%;fill:#0B0612;
  filter:drop-shadow(0 -1px 0 rgba(255,0,255,.85)) drop-shadow(0 0 14px rgba(255,0,255,.45))}
.hero__capa--ciudad{position:absolute;left:38%;right:0;bottom:28%;height:17%;z-index:-1;pointer-events:none}
.hero__ciudad{position:absolute;right:0;bottom:0;width:100%;height:100%;fill:#0B0612;
  filter:drop-shadow(0 -1px 0 rgba(255,0,255,.85)) drop-shadow(0 0 14px rgba(255,0,255,.45))}
.hero__curva{position:absolute;left:0;right:0;bottom:0;height:28%;width:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.hero__curva path{fill:none;stroke:#FF2BD6;stroke-width:3;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px #FF00FF) drop-shadow(0 0 16px rgba(255,0,255,.7))}
.hero__emblema{position:absolute;z-index:1;pointer-events:none;
  --t:min(32vw,50vh);width:var(--t);height:var(--t);left:calc(80% - var(--t)/2);top:calc(72% - var(--t)*.92)}
.hero__emblema svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.emb__borde{fill:none;stroke:#FF2BD6;stroke-width:2.4;filter:drop-shadow(0 0 6px #FF00FF) drop-shadow(0 0 14px rgba(255,0,255,.6))}
.emb__borde2{fill:none;stroke:rgba(63,217,255,.55);stroke-width:1}
.hero__emblema img{position:absolute;left:19%;top:22%;width:62%;height:auto;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35)) drop-shadow(0 0 22px rgba(255,0,255,.55))}
.hero__lema{position:absolute;right:calc(var(--lado) + 84px);bottom:48px;margin:0;z-index:3;
  font:800 13px/1 Montserrat,system-ui,sans-serif;letter-spacing:.34em;text-transform:uppercase;
  background:linear-gradient(90deg,#FF2BD6,#3FD9FF);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Velo de carga: la escena tambien espera a su entrada, sin destello. */
.js:not(.hero-listo) .hero__emblema,.js:not(.hero-listo) .hero__capa--ciudad,.js:not(.hero-listo) .hero__lema,.js:not(.hero-listo) .hero__curva{visibility:hidden}
@media (max-width:899px){.hero__emblema,.hero__capa--ciudad,.hero__lema{display:none}.hero .cont h1{max-width:26ch}.hero .cont .bajada{max-width:56ch}}
/* Con la escena dibujada, el velo oscuro que el hero traia para la foto
   (35 % a 96 %) apagaba el cielo entero. Ahora solo funde el pie hacia la
   seccion siguiente; la lectura del texto la asegura el velo de la izquierda. */
.js .hero::after{background:linear-gradient(180deg,rgba(17,17,20,0) 0%,rgba(17,17,20,0) 72%,rgba(17,17,20,.9) 100%)}
/* La bajada cruza la rejilla del suelo: donde pasa una linea cian el contraste
   bajaba a 3,9:1 (medido). Una sombra oscura difusa la separa de la escena. */
.hero .cont .bajada{text-shadow:0 1px 2px rgba(8,4,16,.9),0 0 14px rgba(8,4,16,.95)}

/* ── Silueta de Arica tambien en el contacto (misma que el hero) ─────────── */
/* A la izquierda, donde ocupaba el Morro del lienzo: asi no pasa por detras de los botones. */
.contacto__ciudad{position:absolute;left:0;width:30%;bottom:30%;height:14%;z-index:-1;pointer-events:none}
@media (max-width:899px){.contacto__ciudad{display:none}}
.contacto__ciudad .ciudad{position:absolute;left:0;bottom:0;width:100%;height:100%;fill:#0B0612;
  filter:drop-shadow(0 -1px 0 rgba(255,0,255,.85)) drop-shadow(0 0 14px rgba(255,0,255,.45))}

/* ── Ventanas estilo Windows 95 (referencia plaza.one, 2026-09-24) ─────────
   Construccion propia, no 98.css: aquella hoja reestila TODOS los botones y
   campos del documento y chocaria con los del sitio. Se toma el principio —el
   bisel con sombras interiores claras arriba e izquierda y oscuras abajo y
   derecha— y se viste con la marca: barra de titulo morado a magenta. */
.w95{--luz:#DFDFDF;--cara:#C0C0C0;--sombra:#808080;--negro:#0A0A0B;
  background:var(--cara);padding:3px;
  box-shadow:inset -1px -1px var(--negro),inset 1px 1px var(--luz),inset -2px -2px var(--sombra),inset 2px 2px #fff,
    0 14px 30px rgba(0,0,0,.45)}
.w95__barra{display:flex;align-items:center;justify-content:space-between;gap:8px;height:24px;padding:0 3px 0 6px;
  background:linear-gradient(90deg,#3A0068,#7A009C 45%,#FF00FF)}
.w95__titulo{font:700 12px/1 Tahoma,"Segoe UI",Verdana,sans-serif;color:#fff;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w95__botones{display:flex;gap:2px;flex:none}
.w95__b{width:18px;height:16px;display:grid;place-items:center;background:var(--cara);
  box-shadow:inset -1px -1px var(--negro),inset 1px 1px #fff,inset -2px -2px var(--sombra),inset 2px 2px var(--luz)}
.w95__b svg{width:9px;height:9px;fill:var(--negro)}
.w95__b--x{margin-left:2px}
.w95__marco{margin-top:3px;padding:2px;background:var(--cara);
  box-shadow:inset 1px 1px var(--sombra),inset -1px -1px #fff,inset 2px 2px var(--negro),inset -2px -2px var(--luz)}
.w95__marco .serv__medio{border-radius:0}
.w95__estado{display:flex;gap:3px;margin-top:3px;font:400 12px/1 Tahoma,"Segoe UI",Verdana,sans-serif;color:#1A1A1A}
.w95__estado span{flex:1;padding:4px 6px;box-shadow:inset 1px 1px var(--sombra),inset -1px -1px #fff}
.w95__estado span:last-child{flex:0 0 auto}

/* ══ Ventanas de casos (2026-09-24) ════════════════════════════════════════
   Misma familia que las de Servicios, otro programa: barra azul a cian (5),
   como la ventana «inactiva» de Windows frente a la activa magenta. */
.w95--caso .w95__barra{background:linear-gradient(90deg,#000080,#1084D0 55%,#3FD9FF)}
button.w95__b{border:0;padding:0;cursor:pointer}
button.w95__b:active{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
button.w95__b:focus-visible{outline:1px dotted #0A0A0B;outline-offset:-4px}
/* Minimizado: queda solo la barra de titulo. */
.w95.plegada>:not(.w95__barra){display:none}

/* 1 · Cuadro de Propiedades */
.caso95__cuerpo{padding:10px 8px 8px;font:400 13px/1.45 Tahoma,"Segoe UI",Verdana,sans-serif;color:#0A0A0B}
.caso95__pestanas{display:flex;gap:0;position:relative;z-index:1;margin-bottom:-2px}
.caso95__pestanas button{font:inherit;color:#0A0A0B;background:#C0C0C0;border:0;padding:4px 12px;cursor:pointer;
  box-shadow:inset 1px 1px #fff,inset -1px 0 #0A0A0B,inset -2px 0 #808080;margin-top:3px}
.caso95__pestanas button[aria-selected="true"]{margin-top:0;padding-bottom:7px;position:relative}
.caso95__pestanas button:focus-visible{outline:1px dotted #0A0A0B;outline-offset:-4px}
.caso95__hoja{padding:12px;min-height:300px;box-shadow:inset 1px 1px #fff,inset -1px -1px #0A0A0B,inset -2px -2px #808080}
.caso95__panel p{margin:0}
.caso95__foto{display:block;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;padding:2px;margin-bottom:10px}
.caso95__foto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.caso95__titulo{font:700 14px/1.3 Tahoma,"Segoe UI",Verdana,sans-serif;margin:0 0 8px;color:#0A0A0B;text-transform:none;letter-spacing:0}
.caso95__campos{margin:0;display:grid;gap:4px}
.caso95__campos div{display:grid;grid-template-columns:78px 1fr;gap:8px}
.caso95__campos dt{color:#404040}.caso95__campos dd{margin:0}
.caso95__acciones{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.caso95__btn{min-width:88px;min-height:30px;padding:0 12px;display:inline-grid;place-items:center;background:#C0C0C0;border:0;
  font:inherit;color:#0A0A0B;text-decoration:none;cursor:pointer;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.caso95__btn--def{outline:1px solid #0A0A0B;outline-offset:0}
.caso95__btn:active{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
.caso95__btn:focus-visible{outline:1px dotted #0A0A0B;outline-offset:-5px}

/* 2 · Explorador de carpetas (casos.html) */
.expl{margin-top:48px}
.expl__menu{display:flex;gap:14px;padding:4px 8px;font:400 12px/1 Tahoma,"Segoe UI",Verdana,sans-serif;color:#0A0A0B}
.expl__dir{display:flex;align-items:center;gap:8px;padding:0 6px 6px;font:400 12px/1 Tahoma,"Segoe UI",Verdana,sans-serif;color:#0A0A0B}
.expl__campo{flex:1;background:#fff;padding:5px 6px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0A0A0B}
.expl__marco{background:#fff}
.expl__lista{list-style:none;margin:0;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 12px;background:#fff}
.expl__item{display:grid;justify-items:center;gap:6px;text-align:center;text-decoration:none;color:#0A0A0B;padding:6px;
  font:400 12px/1.25 Tahoma,"Segoe UI",Verdana,sans-serif}
.expl__icono{position:relative;width:96px;height:78px}
.expl__icono img{position:absolute;left:16px;top:34px;width:64px !important;height:34px !important;max-width:none;object-fit:cover;box-shadow:0 0 0 1px #808080}
/* La foto va DENTRO del frente de la carpeta (y 27-75 de la caja de 78), no
   asomando por arriba: asi no se ve mas grande que el icono (2026-09-24). */
.expl__carpeta{position:absolute;inset:0;width:100%;height:100%}
.expl__nombre{font-weight:700;word-break:break-all}
.expl__titulo{color:#404040}
.expl__item:hover .expl__nombre,.expl__item:focus-visible .expl__nombre{background:#000080;color:#fff}
.expl__item:focus-visible{outline:1px dotted #0A0A0B}

/* 3 · Bloc de notas en la ficha */
.nota95{margin-top:40px}
.nota95__hoja{background:#fff;color:#0A0A0B;padding:18px 22px;max-height:none;
  font:400 15px/1.6 "Share Tech Mono",ui-monospace,Consolas,monospace}
.nota95__hoja h2{font:400 15px/1.6 "Share Tech Mono",ui-monospace,Consolas,monospace;text-transform:uppercase;
  letter-spacing:.06em;margin:18px 0 4px;color:#000080}
.nota95__hoja h2:first-child{margin-top:0}
.nota95__hoja h2::before{content:"== "}.nota95__hoja h2::after{content:" =="}
.nota95__hoja p{margin:0 0 10px;max-width:78ch;color:#0A0A0B}

/* ── Botones al modo Windows 95 (2026-09-24) ─────────────────────────────────
   Mismo bisel que las ventanas: luz arriba e izquierda, sombra abajo y
   derecha; al pulsar se invierte (el boton se hunde). Esquinas rectas. Se
   conservan los colores de marca de cada variante. */
.btn{border-radius:0;border:0}
.btn--magenta{box-shadow:inset -2px -2px #5a005a,inset 2px 2px #ffb3ff,inset -4px -4px #b000b0,inset 4px 4px #ff66ff}
.btn--borde{background:#C0C0C0;color:#0A0A0B;box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.btn--borde:hover{background:#D4D4D4;border-color:transparent}
.btn--blanco{box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.btn--magenta:active{box-shadow:inset 2px 2px #5a005a,inset -2px -2px #ffb3ff}
.btn--borde:active,.btn--blanco:active{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
.btn:hover,.btn:focus-visible{scale:1.033 !important}
.btn:active{scale:1.02 !important}
.btn:focus-visible{outline:1px dotted #0A0A0B;outline-offset:-6px}

/* ══ Cargador estilo «Overtake» (2026-09-24) ═════════════════════════════ */
.cargador__estatica{display:none}
.cargador__neblina{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 45% at 50% 58%,rgba(255,0,255,.28),transparent 70%),
    radial-gradient(90% 60% at 50% 100%,rgba(90,0,160,.55),transparent 75%),
    linear-gradient(180deg,#07030d 0%,#1a0630 60%,#2a0845 100%)}
.cargador__logo{position:relative}
.cargador__halo{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 6%,rgba(255,150,255,.75) 14%,rgba(255,0,255,.35) 32%,rgba(120,0,200,.15) 50%,transparent 68%);
  mix-blend-mode:screen}
.cargador__destello{position:absolute;left:-60%;right:-60%;top:50%;height:2px;margin-top:-1px;transform-origin:50% 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(63,217,255,.9) 30%,#fff 50%,rgba(63,217,255,.9) 70%,transparent);
  box-shadow:0 0 12px 2px rgba(63,217,255,.8)}
.cargador__logo img{position:relative}
.cargador__neon{position:absolute;left:50%;top:-50%;translate:-50% 0;z-index:2;margin:0;opacity:0;white-space:nowrap;pointer-events:none;
  font-family:"Mr Dafoe","Brush Script MT",cursive;font-size:clamp(46px,7vw,92px);line-height:1;color:#FF00FF;rotate:-6deg;
  text-shadow:none}

/* ══ Titulos en Unscii 16 (Viznut, dominio publico — la de Nightride FM) ══ */
@font-face{font-family:"Unscii";src:url("fonts/unscii-16.woff") format("woff");font-display:swap}
h1,h2{font-family:"Unscii","Cascadia Mono",Consolas,monospace;font-weight:400;letter-spacing:0;-webkit-font-smoothing:none}
.pil__c h3{font-family:"Unscii","Cascadia Mono",Consolas,monospace;font-weight:400;letter-spacing:0;text-transform:uppercase;-webkit-font-smoothing:none}
/* Hover visible en los botones Windows 95 (2026-09-24): al quitar el escalado
   los botones blanco y de borde quedaron sin respuesta al pasar el puntero. */
.btn--blanco:hover,.btn--borde:hover{background:#E8E8E8;color:#7A009C;box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 0 0 2px #FF00FF,0 0 22px rgba(255,0,255,.6)}
.btn--magenta:hover{box-shadow:inset -2px -2px #5a005a,inset 2px 2px #ffb3ff,inset -4px -4px #b000b0,inset 4px 4px #ff66ff,0 0 22px rgba(255,0,255,.75)}
/* La escala del hover va en la propiedad `scale` con !important: GSAP deja un
   `transform` y un `scale:none` en linea tras la entrada del boton, y eso le
   ganaba a `.btn:hover{transform:scale(1.1)}` (el hover no crecia). */
.btn{transition:scale .2s cubic-bezier(.23,1,.32,1),background-color .18s,color .18s,box-shadow .18s}
@media (prefers-reduced-motion:reduce){.btn{transition:scale .12s ease-out,background-color .18s,color .18s}}

/* ══ Pie al modo Windows 95 (2026-09-24) ═════════════════════════════════ */
.pie95{padding-bottom:0;overflow:visible}
.pie95 .cont{display:grid;gap:40px;padding-bottom:48px}
.acerca{max-width:640px;margin:0 auto;width:100%;color:#0A0A0B}
.acerca__cuerpo{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 20px 8px;font:400 15px/1.55 "Montserrat",system-ui,sans-serif}
.acerca__logo{width:120px;height:auto;filter:invert(1);align-self:start}
.acerca__nombre{font-weight:700;font-size:17px;margin:0 0 6px}.acerca__nombre span{font-weight:400;color:#555}
.acerca__cuerpo p{margin:0 0 8px}
.acerca hr{border:0;border-top:1px solid #808080;border-bottom:1px solid #fff;margin:12px 0}
.acerca__datos{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.acerca__datos li{display:flex;align-items:center;gap:10px;min-height:32px}
.acerca__datos .ico{color:#7A009C;width:18px;height:18px;flex:none}
.acerca__datos a{color:#00569C;text-decoration:underline}
.acerca__creditos{font-size:13px;color:#333}
.acerca__botones{display:flex;justify-content:flex-end;padding:6px 20px 16px}
.apagar{background:#000;border:2px solid #333;padding:48px 20px;text-align:center;display:grid;gap:22px;justify-items:center}
.apagar__txt{margin:0;font-family:"Unscii","Cascadia Mono",Consolas,monospace;font-size:clamp(20px,3vw,34px);color:#3FD9FF;text-shadow:0 0 12px rgba(63,217,255,.5)}
.tareas{position:relative;z-index:5;display:flex;align-items:center;gap:6px;height:44px;padding:0 4px;background:#C0C0C0;
  box-shadow:inset 0 1px #DFDFDF,inset 0 2px #fff;font:400 14px/1 "Montserrat",system-ui,sans-serif;color:#0A0A0B}
.tareas__btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#C0C0C0;color:#0A0A0B;border:0;cursor:pointer;font:inherit;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.tareas__btn:hover{background:#D4D4D4}
.tareas__btn:active,.tareas__btn.pulsado{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080;background:#D4D4D4}
.tareas__btn .ico{width:18px;height:18px;color:#7A009C}
.tareas__boton-inicio{font-weight:700}
.tareas__boton-inicio img{width:22px;height:auto;filter:invert(1)}
.tareas__inicio{position:relative}
.tareas__progs{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.tareas__bandeja{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;font-variant-numeric:tabular-nums}
.tareas__bandeja a{display:grid;place-items:center;color:#7A009C}.tareas__bandeja .ico{width:18px;height:18px}
.menu95{position:absolute;left:0;bottom:calc(100% + 4px);z-index:30;display:flex;min-width:240px;background:#C0C0C0;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.menu95[hidden]{display:none}
.menu95__franja{writing-mode:vertical-rl;rotate:180deg;background:linear-gradient(0deg,#3A0068,#FF00FF);color:#C0C0C0;font-weight:800;font-size:20px;padding:10px 6px;margin:3px 0 3px 3px}
.menu95__franja b{color:#fff}
.menu95 ul{list-style:none;margin:0;padding:4px;flex:1}
.menu95 a{display:flex;align-items:center;min-height:40px;padding:0 14px;color:#0A0A0B}
.menu95 a:hover,.menu95 a:focus-visible{background:#000080;color:#fff;outline:none}
.menu95__sep{height:0;margin:4px 2px;border-top:1px solid #808080;border-bottom:1px solid #fff}
@media (max-width:599px){.acerca__cuerpo{grid-template-columns:1fr}.tareas__progs span{display:none}}

/* ══ Ronda 8 (2026-09-24) ════════════════════════════════════════════════ */
/* Textos del pie en negro: las reglas generales de .pie pintaban en claro */
.pie95 .acerca,.pie95 .acerca p,.pie95 .acerca li,.pie95 .acerca span{color:#0A0A0B}
.pie95 .acerca .acerca__nombre span{color:#444}
.pie95 .acerca__datos a{color:#00569C}
.pie95 .menu95 a{color:#0A0A0B}
.pie95 .menu95 a:hover,.pie95 .menu95 a:focus-visible{color:#fff}
.pie95 .tareas__btn,.pie95 .tareas__bandeja{color:#0A0A0B}
/* Modal de carga con barra de bloques azules */
.cargando95{padding:3px;border:0;width:min(360px,90vw);color:#0A0A0B}
.cargando95::backdrop{background:rgba(0,0,0,.35)}
.cargando95__cuerpo{padding:18px 16px 20px;font:400 14px/1.4 "Montserrat",system-ui,sans-serif}
.cargando95__cuerpo p{margin:0 0 12px}
.cargando95__barra{height:22px;padding:2px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;background:#fff}
.cargando95__barra i{display:block;height:100%;width:100%;transform-origin:0 50%;
  background:repeating-linear-gradient(90deg,#000080 0 10px,transparent 10px 12px);
  clip-path:inset(0 100% 0 0);animation:carga95 2.93s steps(22,end) forwards}
@keyframes carga95{to{clip-path:inset(0 0 0 0)}}
/* Bandera del Morro: flamea muy poco */
.ciudad .bandera{transform-box:fill-box;transform-origin:0 50%;animation:flamea 2.6s ease-in-out infinite}
@keyframes flamea{0%,100%{transform:skewY(0) scaleX(1)}35%{transform:skewY(-5deg) scaleX(.96)}70%{transform:skewY(3deg) scaleX(.98)}}
@media (prefers-reduced-motion:reduce){.ciudad .bandera{animation-duration:6s}}
/* Flechas del visor siempre al frente */
.visor__ventana{position:relative;z-index:6}
.vflecha{z-index:9990 !important}
/* FAB al modo Windows 95 */
.fab__boton{border-radius:0;background:#C0C0C0;color:#7A009C;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 0 18px rgba(255,0,255,.55)}
.fab__boton:hover{background:#D4D4D4}
.fab__boton:active,.fab.abierto .fab__boton{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
.fab__boton::before{border-radius:0}
.fab__panel{border-radius:0;padding:3px;background:#C0C0C0;border:0;color:#0A0A0B;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 14px 30px rgba(0,0,0,.45)}
.fab__barra{margin-bottom:6px}
.fab__op{border-radius:0;color:#0A0A0B;background:transparent}
.fab__op:hover,.fab__op:focus-visible{background:#000080;color:#fff}
.fab__op:hover .ico,.fab__op:focus-visible .ico{color:#fff}
.fab__op .ico{color:#7A009C}
.fab__redes{border-top:1px solid #808080}
.fab__redes a{border-radius:0;color:#0A0A0B}
.fab__redes a:hover{background:#000080;color:#fff}
/* Banner con horizonte synthwave */
.banner{background:#07030F}
.banner__horizonte-caja{position:absolute;inset:0;z-index:0;pointer-events:none}
.banner__horizonte{display:block;width:100%;height:100%}
.banner__rayos,.banner__pulso{display:none}

/* ══ Ronda 9 (2026-09-24) ════════════════════════════════════════════════ */
.pie95 .acerca .w95__titulo{color:#fff}
/* El correo en mayusculas: en minuscula la q y la g se confunden */
.pie95 .acerca__datos a[href^="mailto:"],.contacto__datos a[href^="mailto:"]{text-transform:uppercase;letter-spacing:.03em}
.banner__espacio{display:block;width:100%;height:100%}

/* ══ Ronda 10 (2026-09-24) ═══════════════════════════════════════════════ */
/* Cargador: la barra pasa a una ventana «Iniciando Quaxel OS…» con los bloques
   azules de las cargas de Windows 95; los rotulos, en la letra de pixeles. */
.cargador__pie.w95{display:block;width:clamp(240px,26vw,320px);padding:3px;gap:0}
.cargador__cuerpo{display:flex;align-items:center;gap:10px;padding:12px 10px 10px}
.cargador__pie .cargador__barra{flex:1;height:18px;padding:2px;background:#fff;overflow:hidden;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.cargador__pie .cargador__barra i{position:static;display:block;height:100%;transform:none;
  background:repeating-linear-gradient(90deg,#000080 0 9px,transparent 9px 11px);clip-path:inset(0 100% 0 0)}
.cargador__pie .cargador__pct{color:#0A0A0B;font:400 12px/1 "Unscii",Consolas,monospace;letter-spacing:0}
.cargador__rotulo{font-family:"Unscii",Consolas,monospace;letter-spacing:.2em;color:rgba(63,217,255,.75)}
.cargador__angulo{stroke:rgba(63,217,255,.45)}

/* Menu principal al modo Windows 95: barra de menu con bisel abajo; cada
   enlace, al pasar, se hunde como un boton; el activo queda hundido. */
.cab--fija{border-bottom:0;box-shadow:0 1px #FF00FF,0 2px rgba(63,217,255,.6)}
.cab__nav-barra{display:none}
@media (min-width:1024px){
  .cab__nav{gap:2px}
  .cab__nav a{border-radius:0;font-family:"Unscii",Consolas,monospace;font-size:15px;letter-spacing:.04em;color:#F4F4F6}
  .cab__nav a:hover,.cab__nav a[aria-current="page"]{background:rgba(192,192,192,.12);color:#fff;
    box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px rgba(255,255,255,.55)}
}
/* Menu de hamburguesa: una ventana gris con su barra de titulo */
@media (max-width:1023px){
  .cab__hamb{border:0;border-radius:0;background:#C0C0C0;color:#0A0A0B;
    box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
  .cab--abierta .cab__hamb{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
  .cab__nav{background:#C0C0C0;padding:3px;border:0;left:var(--lado);right:var(--lado);top:calc(var(--alto-cab) + 6px);
    box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 14px 30px rgba(0,0,0,.5)}
  .cab__nav-barra{display:flex;margin-bottom:4px}
  .cab__nav a{border-radius:0;color:#0A0A0B;padding:0 14px}
  .cab__nav a:hover,.cab__nav a:focus-visible,.cab__nav a[aria-current="page"]{background:#000080;color:#fff}
  .cab--abierta{background:rgba(28,28,30,.95)}
}
/* FAB: magenta con el icono en gris claro */
.fab__boton{background:#FF00FF;color:#F4F4F6;
  box-shadow:inset -2px -2px #5a005a,inset 2px 2px #ffb3ff,inset -4px -4px #b000b0,inset 4px 4px #ff66ff,0 0 18px rgba(255,0,255,.55)}
.fab__boton:hover{background:#FF4DFF}
.fab__boton:active,.fab.abierto .fab__boton{box-shadow:inset 2px 2px #5a005a,inset -2px -2px #ffb3ff}

/* Banner dentro de una ventana Windows 95; el cuerpo deja ver el espacio. */
.banner__ventana{padding:3px}
.banner__cuerpo{margin-top:3px;padding:clamp(28px,4vw,56px) clamp(20px,3.5vw,48px);background:rgba(3,4,12,.55);
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0A0A0B,inset -2px -2px #DFDFDF}
/* El cargador va por encima de la capa .crt del sitio (z 90 frente a 41), asi
   que no tenia el filtro de monitor: lineas de barrido, vineta y un leve
   parpadeo, iguales a los del resto de la pagina (2026-09-24). */
.js .cargador::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%,transparent 58%,rgba(0,0,0,.5) 100%);
  animation:crt-cargador .12s steps(2) infinite}
@keyframes crt-cargador{50%{opacity:.88}}
@media (prefers-reduced-motion:reduce){.js .cargador::after{animation:none}}
/* El contenedor del FAB mide lo que el panel abierto (236 x 349 px) y, cerrado,
   seguia recibiendo clics: en ventanas de cierto tamaño tapaba la flecha
   derecha del visor. Solo reciben el puntero el boton y el panel abierto. */
.fab{pointer-events:none}
.fab__boton,.fab.abierto .fab__panel{pointer-events:auto}

/* ══ Ronda 11 (2026-09-24) · menu movil mas chico, sin el efecto de trazo ══ */
@media (max-width:1023px){
  .cab__nav{left:auto;right:var(--lado);width:min(260px,calc(100vw - 2 * var(--lado)))}
  .cab__nav a{min-height:40px;font-size:15px;justify-content:flex-start;text-align:left}
  /* En el menu el hover rellena la fila y el texto queda donde estaba, lleno;
     el efecto de trazo (texto hueco centrado) no corresponde aqui. */
  .cab__nav a.trazo::after{display:none}
  .cab__nav a.trazo>span{opacity:1 !important}
}

/* Visitas siguientes de la sesion: sin cargador */
.ya-cargado .cargador{display:none !important}

/* ══ Menu de hamburguesa en TODAS las pantallas (2026-09-24, pedido del
   usuario): en escritorio tambien se ocultan los enlaces de la cabecera y se
   abre la ventana gris «Menú» desde el boton. El CTA «Cotizar Proyecto»
   sigue visible en escritorio. */
.cab__hamb{display:inline-flex;border:0;border-radius:0;background:#C0C0C0;color:#0A0A0B;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.cab--abierta .cab__hamb{box-shadow:inset 1px 1px #0A0A0B,inset -1px -1px #fff,inset 2px 2px #808080}
.cab--abierta .cab__hamb .ico--menu{display:none}.cab--abierta .cab__hamb .ico--x{display:block}
.cab__nav{position:fixed;left:auto;right:var(--lado);top:calc(var(--alto-cab) + 6px);bottom:auto;
  width:min(260px,calc(100vw - 2 * var(--lado)));flex-direction:column;gap:0;padding:3px;border:0;background:#C0C0C0;
  box-shadow:inset -1px -1px #0A0A0B,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #DFDFDF,0 14px 30px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--curva),transform .2s var(--curva),visibility 0s .2s}
.cab--abierta .cab__nav{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--curva),transform .2s var(--curva),visibility 0s}
.cab__nav-barra{display:flex;margin-bottom:4px}
.cab .cab__nav a{min-height:40px;font:400 15px/1 "Montserrat",system-ui,sans-serif;letter-spacing:0;padding:0 14px;border-radius:0;
  color:#0A0A0B;background:transparent;box-shadow:none;justify-content:flex-start;text-align:left}
.cab .cab__nav a:hover,.cab .cab__nav a:focus-visible,.cab .cab__nav a[aria-current="page"]{background:#000080;color:#fff;box-shadow:none}
.cab__nav a.trazo::after{display:none}
.cab__nav a.trazo>span{opacity:1 !important}
@media (prefers-reduced-motion:reduce){.cab__nav{transition:none;transform:none}}

/* Las ventanas modales (<dialog> con showModal) se pintan en la capa superior
   del navegador, por encima de .crt y .grano: se quedaban sin lineas de barrido
   ni ruido, igual que le pasaba al cargador. Llevan su propia textura, y el
   fondo que oscurecen tambien (2026-09-24). */
.cargando95::before,.lupa::before{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;
  background-image:url(img/ruido.png);background-repeat:repeat;opacity:.06;animation:granear 1.05s steps(1) infinite}
.cargando95::after,.lupa::after{content:"";position:absolute;inset:0;z-index:21;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%,transparent 62%,rgba(0,0,0,.42) 100%)}
.cargando95::backdrop{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
  radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,.25) 62%,rgba(0,0,0,.6) 100%)}
.lupa::backdrop{background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),rgba(6,6,8,.9)}
@media (prefers-reduced-motion:reduce){.cargando95::before,.lupa::before{animation-duration:2.8s}}
.cargando95,.lupa{overflow:hidden}
.fab__panel{box-sizing:border-box;max-width:calc(100vw - 28px)}.fab__barra{min-width:0}

/* ══ Ronda 12 (2026-09-24) ══════════════════════════════════════════════
   Scroll horizontal en movil: la luz del halo se salia 59 px por lado y el
   documento medía 440 px en una pantalla de 393. Se recorta en la raiz;
   clip (no hidden) para no crear un contenedor de desplazamiento que rompa
   position:sticky ni el ScrollSmoother. */
/* (retirado en ronda 15: overflow-x:clip en html rompia la recarga y el alto del desplazamiento suave) */
.w95{max-width:100%;min-width:0}
.w95__barra>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Hero movil: vuelven el rombo y la ciudad delante de las piramides; el logo
   del rombo sigue oculto (se evaluara despues). */
@media (max-width:899px){
  .hero__emblema,.hero__capa--ciudad{display:block}
  .hero__emblema img{display:none}
  .hero__emblema{--t:min(46vw,30vh);left:calc(74% - var(--t)/2);top:calc(72% - var(--t)*.92)}
  .hero__capa--ciudad{left:0;right:0;bottom:28%;height:11%}
}
/* Telefono: el texto ocupa la mitad baja; la escena (rombo delante de las
   piramides y ciudad sobre el horizonte) sube a la mitad alta. */
@media (max-width:599px){
  .hero__emblema{--t:min(44vw,24vh);left:calc(72% - var(--t)/2);top:9%}
  .hero__capa--ciudad{bottom:auto;top:24%;height:9%}
}

/* ══ Ronda 14 (2026-09-24) ══════════════════════════════════════════════ */
/* Ventana «Datos copiados»: la barra se vacia en 3 s, lo que dura abierta. */
.copiado95{width:min(420px,92vw)}
.copiado95__datos{margin:0 0 14px;padding:10px 12px;background:#fff;color:#0A0A0B;white-space:pre-wrap;word-break:break-word;
  font:400 13px/1.55 "Share Tech Mono",Consolas,monospace;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0A0A0B}
.copiado95__barra i{animation:none;clip-path:inset(0 0 0 0)}
.copiado95.corriendo .copiado95__barra i{animation:vacia95 3s steps(22,end) forwards}
@keyframes vacia95{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
.copiado95__cuenta{margin:10px 0 0 !important;font-size:12px;color:#404040}
/* Rombo del hero: el mismo resplandor magenta que late en el boton flotante. */
.emb__borde{animation:rombo-brillo 2.6s ease-in-out infinite}
@keyframes rombo-brillo{
  0%,100%{filter:drop-shadow(0 0 6px #FF00FF) drop-shadow(0 0 14px rgba(255,0,255,.6))}
  50%{filter:drop-shadow(0 0 10px #FF00FF) drop-shadow(0 0 28px rgba(255,0,255,.95))}}
@media (prefers-reduced-motion:reduce){.emb__borde{animation-duration:5s}.copiado95.corriendo .copiado95__barra i{animation-timing-function:linear}}

/* ══ Ronda 15 (2026-09-24) ══════════════════════════════════════════════
   El grano era una capa fija 80 px mas grande que la pantalla por cada lado
   (para moverla sin que asomaran bordes). En moviles una capa fija que se sale
   ensancha la pagina: ese era el scroll horizontal. Ahora mide lo mismo que la
   pantalla y lo que se mueve es la textura, no la capa. */
.grano{inset:0;animation:granear2 1.05s steps(1) infinite;will-change:auto}
@keyframes granear2{
  0%{background-position:0 0} 14%{background-position:-26px 14px} 28%{background-position:20px -22px}
  42%{background-position:-16px -14px} 56%{background-position:24px 18px} 70%{background-position:-22px 22px}
  84%{background-position:14px -8px} 100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.grano{animation-duration:2.8s}}
.fab{transition:none}
/* Ronda 16: la ventana «Acerca de» termina sobre el boton flotante detenido
   (alto del boton + 12 px de margen + aire), abierta o minimizada. */
.pie .acerca{margin-bottom:calc(var(--fab-lado,56px) + 44px)}
/* Ronda 16: si el horario ocupa dos lineas, el reloj se queda junto a la
   primera, no centrado entre ambas. */
.contacto__datos span:has(>.contacto__txt){align-items:flex-start;text-align:left}
.contacto__datos span:has(>.contacto__txt) .ico{margin-top:.2em;flex:none}
.contacto__datos .contacto__txt{display:block;min-height:0}
/* Solo el horario (puede ocupar dos lineas) alinea el reloj arriba; el resto, centrado. */
.acerca__datos li:last-child{align-items:flex-start}.acerca__datos li:last-child .ico{margin-top:.2em;flex:none}
/* ══ Ronda 17 · auditoría de publicación ═══════════════════════════════
   Credito de Popupsty: 11,5 px no se lee en telefono. */
.popupsty__txt{font-size:14px}
/* Botones de ventana (18×16, el tamaño de Windows 95): el dibujo no cambia,
   la zona que responde al dedo sí — 26×44, sin pisar al vecino. */
.w95__b{position:relative}
.w95__b::after{content:"";position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px}
/* Barra de tareas: en pantallas táctiles, 44 px de alto. */
@media (pointer:coarse){.tareas__btn{height:44px}}
/* ══ Ronda 21 (2026-09-24) ══════════════════════════════════════════════
   Detalle de caso: la foto a la mitad del ancho (un cuarto de superficie) y la
   galeria en cuatro columnas; en telefono, a lo ancho. */
.ficha__portada{max-width:min(50%,520px);margin-inline:auto}
.ficha__galeria{grid-template-columns:repeat(4,1fr)}
@media (max-width:899px){.ficha__galeria{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.ficha__portada{max-width:100%}}
.ficha__volver{display:flex;justify-content:center;margin:40px 0 72px}
/* Explorador de casos: aire antes de «Hablemos de tu proyecto». */
.interior .expl{margin-bottom:140px}
.expl__lista{padding-bottom:36px}

/* ronda 24 · lo que entra nace oculto desde el primer pintado; si el motor no carga, se muestra */
html.js:not(.sin-motor) [data-rev]:not([data-rev-hijos]),html.js:not(.sin-motor) [data-rev][data-rev-hijos]>*{opacity:0}
/* ronda 25 · el aviso de datos copiados se va desvaneciendo en 1,7 s */
.copiado95{transition:opacity 1.7s ease-out}
.copiado95::backdrop{transition:opacity 1.7s ease-out}
.copiado95.saliendo,.copiado95.saliendo::backdrop{opacity:0}
/* ronda 26 · el rombo del hero lleva el logotipo COMPLETO (isotipo + QUAXEL + DIGIFAB), en todos los
   tamanos. Medida para que quepa entero en el rombo: a 46% de ancho el borde inferior del logo cae donde el
   rombo aun mide 58%, asi que ni la palabra ni los rombos de DIGIFAB tocan el borde. */
.hero__emblema img{left:27%;top:29%;width:46%}
@media (max-width:899px){.hero__emblema img{display:block}}

/* ronda 27 · boton de sonido del FAB, solo icono (2026-09-25) */
.fab__sonido{width:44px;height:44px;display:grid;place-items:center;padding:0;background:transparent;border:0;border-radius:9px;color:#F4F4F6;cursor:pointer}
.fab__sonido:hover{background:rgba(255,255,255,.08)}
.fab__sonido svg{width:22px;height:22px}
.fab__sonido[aria-pressed="false"] .son-ondas,.fab__sonido[aria-pressed="true"] .son-tachado{display:none}
.fab__sonido:focus-visible{outline:2px solid currentColor;outline-offset:2px}