/* El casco, en la portada.
 *
 * Nada de esto toca a NEO ni cambia un texto. Es la capa de comportamiento:
 * lo que hace la pagina cuando la miras y cuando te mueves por ella.
 *
 * Regla que se respeta en todo el archivo: ninguna imagen encerrada. Se funden
 * con el fondo por mascara, como el heroe. Cero marcos, cero bordes, cero
 * tarjetas con esquinas.
 */

/* ---------------------------------------------------------------- reticula */
/* Sigue al raton con un poco de retraso y se abre sobre lo que lleva a algun
   sitio. Es el enganche del casco, el mismo del panel. */
#reticula{position:fixed;left:0;top:0;width:128px;height:128px;pointer-events:none;
  z-index:90;opacity:0;transition:opacity .3s}
#reticula.viva{opacity:.30}
#reticula.enganchada{opacity:.95}
#reticula svg{width:128px;height:128px;overflow:visible;transform:scale(.55);
  transition:transform .26s cubic-bezier(.2,.9,.2,1)}
#reticula.enganchada svg{transform:scale(1);filter:drop-shadow(0 0 7px rgba(255,157,46,.9))}
#reticula circle,#reticula path{fill:none;stroke:#ff9d2e;stroke-width:1.2;vector-effect:non-scaling-stroke}
#reticula .punto{fill:#ff9d2e;stroke:none}
@media(prefers-reduced-motion:no-preference){
  #reticula .ra{transform-origin:64px 64px;animation:giroDer 6s linear infinite}
  #reticula .rb{transform-origin:64px 64px;animation:giroIzq 4s linear infinite}
  @keyframes giroDer{to{transform:rotate(360deg)}}
  @keyframes giroIzq{to{transform:rotate(-360deg)}}
}
@media(pointer:coarse){#reticula{display:none}}

/* ------------------------------------------------------------- el enganche */
/* Al posarte encima, cuatro esquinas se cierran sobre lo que sea. */
.enfocable{position:relative}
.enfocable::before{content:"";position:absolute;inset:2px;pointer-events:none;z-index:3;opacity:0;
  transition:opacity .16s;
  background:
    linear-gradient(#ffc27a,#ffc27a) 0 0/14px 2px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 0 0/2px 14px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 100% 0/14px 2px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 100% 0/2px 14px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 0 100%/14px 2px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 0 100%/2px 14px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 100% 100%/14px 2px no-repeat,
    linear-gradient(#ffc27a,#ffc27a) 100% 100%/2px 14px no-repeat;
  filter:drop-shadow(0 0 5px rgba(255,157,46,.85))}
.enfocable:hover::before{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .enfocable:hover::before{animation:cierre .26s cubic-bezier(.2,.9,.2,1)}
  @keyframes cierre{from{inset:-10px;opacity:0}to{inset:2px;opacity:1}}
}
.btn{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-color .18s}
.btn:hover{transform:translateY(-3px)}
.btn.p:hover{box-shadow:0 18px 44px rgba(255,140,20,.42)}
.btn.o:hover{border-color:rgba(255,157,46,.6)}

/* ------------------------------------------------- las cosas se van montando */
/* Cada bloque se monta al entrar en pantalla, en vez de estar ya ahi muerto.
 *
 * Va colgado de .js, que lo pone el propio guion al arrancar: si el JavaScript
 * no corre o falla, el contenido se ve entero desde el primer momento. Una
 * pagina que se esconde sola esperando un guion es una pagina en blanco. */
@media(prefers-reduced-motion:no-preference){
  .js .monta{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.2,.9,.2,1),transform .7s cubic-bezier(.2,.9,.2,1)}
  .js .monta.dentro{opacity:1;transform:none}
  .js .monta.d1{transition-delay:.08s}.js .monta.d2{transition-delay:.16s}
  .js .monta.d3{transition-delay:.24s}.js .monta.d4{transition-delay:.32s}
  .js .monta.d5{transition-delay:.40s}.js .monta.d6{transition-delay:.48s}
}

/* -------------------------------------------- capacidades sin un solo marco */
/* El recuadro no venia del CSS: venia de la propia foto. Sus esquinas son
   #000204 y la pagina es #05070d, asi que el rectangulo se ve porque la foto
   es mas oscura que el fondo. Ninguna mascara arregla eso.
   Fundiendola en modo "screen" el negro de la imagen desaparece del todo y
   solo queda NEO iluminado, flotando sobre la pagina. */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 30px;background:none}
.caso{position:relative;border-radius:0;overflow:visible;min-height:360px;background:none;
  padding-top:236px}
.caso img{position:absolute;inset:0 0 auto 0;height:276px;width:100%;object-fit:cover;
  border-radius:0;mix-blend-mode:screen;opacity:.92;
  /* Y encima se desvanece por los cuatro lados, para que no haya ni un borde
     recto en ninguna parte. */
  -webkit-mask-image:linear-gradient(180deg,#000 46%,transparent 97%),
    linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(180deg,#000 46%,transparent 97%),
    linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:opacity .45s,transform .45s cubic-bezier(.2,.9,.2,1)}
.caso:hover img{opacity:1;transform:scale(1.035)}
.caso .txt{position:static;padding:0;background:none}
.caso .txt b{display:block;font-size:20px;font-weight:700;margin-bottom:7px}
.caso .txt span{color:var(--suave);font-size:15px;line-height:1.6;display:block}
.caso .num{position:absolute;top:0;left:0;font-family:'Space Mono',monospace;font-size:11px;
  color:var(--ambar);letter-spacing:1.5px}
.caso .ev{position:absolute;top:0;right:0;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:1.2px;color:var(--verde);background:none;padding:0;border-radius:0}
.caso .ev::before{content:"● "}
@media(max-width:900px){.casos{grid-template-columns:1fr}}

/* --------------------------------------------------- las herramientas, sin caja */
.tool{border:0;border-radius:0;background:none;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.06)}
.tool:hover{background:none}

/* ------------------------------------------------------------- las cifras */
/* Numeros de verdad, que suben solos. Una cifra cierta convence mas que tres
   parrafos de adjetivos. */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:58px 0 0}
.cifra b{display:block;font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-1.5px;
  line-height:1;background:linear-gradient(180deg,#fff,#ff9d2e);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.cifra span{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--suave);margin-top:10px}
@media(max-width:800px){.cifras{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------- la boveda */
/* Es el mejor gancho de la pagina y hoy es texto plano. Que se sienta cerrada. */
.boveda .bovin{position:relative}
.sello{position:relative}
@media(prefers-reduced-motion:no-preference){
  .boveda .barra i{animation:respira 3.4s ease-in-out infinite}
  @keyframes respira{0%,100%{opacity:1}50%{opacity:.55}}
}
/* Una linea de escaner recorre la boveda de arriba abajo, como si algo de
   dentro estuviera comprobando que sigue cerrada. */
.boveda::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,157,46,.55),transparent);
  pointer-events:none;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .boveda::after{animation:escaneo 7s ease-in-out infinite}
  @keyframes escaneo{0%{top:0;opacity:0}8%{opacity:.9}92%{opacity:.9}100%{top:100%;opacity:0}}
}

/* ------------------------------------------------- la boveda, texto a la izquierda */
/* El bloque de texto llevaba max-width:520px pero heredaba el margin:0 auto de
   .wrap, asi que se quedaba centrado en la seccion: encima de NEO, y con todo
   el lado izquierdo vacio.
   Se le devuelve el ancho de cualquier .wrap de la pagina, para que su borde
   izquierdo caiga exactamente donde el de todas las demas secciones, y el
   texto se estrecha con relleno por la derecha en vez de con max-width.
   (Con 100vw no vale: cuenta la barra de desplazamiento y queda 8 px corrido.) */
.boveda .bovin{
  max-width:none;
  width:min(1180px,92vw);
  margin:0 auto;
  /* El calculo va contra el ancho propio del bloque, no con 100%: ese mide
     contra la seccion entera y dejaba el texto en 275 px. */
  padding-right:max(0px,calc(min(1180px,92vw) - 520px))}
@media(max-width:900px){.boveda .bovin{padding-right:0}}