/* ======================================================================
   LA CAPA DE CRISTAL DE C.8.L.  —  03/08/2026

   Leo mando seis maquetas en video y dijo: «es lo que quiero que arreglemos
   de toda la web». De sus siete decisiones, las tres que gobiernan este
   fichero:

     1. CRISTAL PLANO + APERTURA ANIMADA. Toda la estetica del video, pero
        PLANA mientras se usa. La inclinacion 3D y el vuelo se quedan para la
        ENTRADA: la pantalla se abre girando y se asienta recta. En 375 px el
        texto inclinado deja de leerse y un objetivo de 44 px deja de medir
        44 px al proyectarse en perspectiva.
     2. CAPA COMUN PRIMERO. Este fichero es esa capa.
     3. LA LLUVIA NO SE APAGA EN NINGUN SITIO; se refuerza solo en la portada
        y en las cinco grandes (TV, Estudio, Design, Consola y Games).

   POR QUE VIVE EN /public Y NO EN globals.css
   -------------------------------------------
   Hay DOS tecnologias sirviendo esta web y tienen que verse igual:
     · Next (51 rutas)          -> contenedor c8l-agency-web, se compila
     · los HTML de la colmena   -> contenedor c8l-api, NO se compilan
   Traefik enruta `Host(c8lagency.com) && PathPrefix(/colmena)` a la API y
   TODO lo demas a Next. Asi que un fichero en /public sale en
   https://c8lagency.com/c8l-cristal.css y lo pueden enlazar los dos:

     Next:     <link rel="stylesheet" href="/c8l-cristal.css" />
     colmena:  <link rel="stylesheet" href="/c8l-cristal.css" />

   Y de paso esquiva dos trampas medidas del 03/08:
     · En este proyecto TAILWIND NO COMPILA NI UNA UTILIDAD. Aqui todo va a
       mano, que es lo unico que funciona.
     · El empaquetador AGRUPA LAS @media AL FINAL del CSS emitido, asi que
       una regla escrita abajo no tapa a una de arriba. Este fichero NO pasa
       por el empaquetador: el orden que lees es el orden que manda.

   REGLA DE CONVIVENCIA: todo va con prefijo `c8l-`. Ni un selector de
   elemento suelto, o se pisa con globals.css, que tiene reglas con
   !important sobre `header`, `body` y `.c8l-ia`.
   ====================================================================== */

:root{
  /* EL ACENTO. El cian de las maquetas NO es el azul corporativo: es mas
     claro y mas electrico. Conviven — `--azul` sigue siendo la marca,
     `--acento` es el neon del cristal, y SE PUEDE CAMBIAR (ver los tonos
     al final del fichero). */
  --acento:        #5fd8ff;
  --acento-tenue:  rgba(95,216,255,.28);
  --acento-borde:  rgba(95,216,255,.42);
  --acento-brillo: rgba(95,216,255,.16);

  /* El cristal. Medido de los seis videos: el panel deja ver la lluvia
     detras, pero difuminada, y nunca baja del 55 % de opacidad o el texto
     deja de leerse sobre las gotas. */
  /* 🔴 04/08: ESTABAN A .62 Y .78, Y POR ESO NO PARECIA CRISTAL.
     Leo: «el de las celdas no hace el efecto de cristal que deseamos, ese
     efecto de cristal azul transparente».
     El diagnostico: a esa opacidad el relleno TAPA la lluvia que hay detras,
     asi que el `backdrop-filter` estaba difuminando algo que nadie llegaba a
     ver, y el panel se leia como pintura oscura. Bajado a la mitad, la
     lluvia se ve a traves difuminada — que es literalmente lo que hace el
     vidrio. Y con tinte azul, no gris: es cristal AZUL. */
  --cristal-fondo:  rgba(14,34,62,.34);
  --cristal-fondo2: rgba(6,16,32,.52);
  --cristal-radio:  18px;
  --cristal-blur:   14px;

  /* EL BISEL. 14 px es lo medido en los videos a 1280: se lee como HUD y no
     llega a comerse una letra de la esquina. Debajo de 10 px parece un
     descuido; por encima de 20 px, un adorno. */
  --bisel: 14px;
}

/* ----------------------------------------------------------------------
   🔴 LA LUZ DE DETRAS. Sin esto, el cristal no parece cristal (04/08).

   Leo, mirando el Cine: «ahi si te quedo como si tuviera la superposicion en
   un cristal, solo que tienes una foto puesta de portada… pero es lo mismo
   poner una foto que poner otra superposicion».

   Tiene razon y esta es la explicacion: en el Cine el efecto NO lo hace el
   velo, lo hace LA FOTO QUE HAY DEBAJO. Un cristal solo se lee como cristal
   cuando tiene algo con detalle y con brillo detras que difuminar. En el
   resto de la casa, detras de los paneles solo hay lluvia —fina, oscura y
   separada—, asi que el `backdrop-filter` no tenia nada que hacer y el panel
   salia plano por muy transparente que fuese.

   Esto pone esa sustancia sin necesidad de una foto por pantalla: tres focos
   de luz muy suaves, fijos, detras de todo. Da al difuminado algo que doblar
   y al cristal algo que reflejar.
   ---------------------------------------------------------------------- */
body::before{
  content:'';
  position:fixed; inset:0;
  /* 🔴 -1 Y NO 0. Con z-index:0 esta capa se pone POR ENCIMA de cualquier
     pantalla cuyo contenido no declare un z-index propio, y se las lleva por
     delante. Paso exactamente eso el 04/08 con QUANTUM y con el Estudio, y
     Leo lo vio en cuanto se desplego. Una capa decorativa NUNCA va en 0:
     va en -1, donde no puede tapar a nadie pase lo que pase. */
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 18% 14%, rgba(47,157,255,.16), transparent 68%),
    radial-gradient(52% 40% at 84% 34%, rgba(95,216,255,.11), transparent 66%),
    radial-gradient(64% 50% at 46% 96%, rgba(26,92,158,.16), transparent 70%);
}
/* En la portada NO: ahi el heroe es un video a pantalla completa y la luz se
   le pondria por delante del plano. */
body.home-estatica::before{ display:none; }

/* ----------------------------------------------------------------------
   EL PANEL HUD. La pieza de la que salen todas las demas.

   🔴 04/08/2026: ESTO ERA UN RECTANGULO DE ESQUINAS REDONDEADAS Y ESTABA MAL.

   Lo canto el video del Manga Memorandum. Los siete videos de Leo NO usan
   esquina blanda: usan un HUD con las esquinas CORTADAS EN BISEL, con
   muescas, y con la cartela del titulo montada sobre el borde de arriba.
   Preguntado si el bisel iba en toda la casa o solo en las pantallas de
   maquina, Leo: «todas».

   Se hace con `clip-path`, no con `border-radius`. Consecuencia que hay que
   tener presente al escribir cualquier panel: **el `border` desaparece** —
   `clip-path` recorta tambien el borde, asi que el filo de neon se pinta
   aparte, en ::before, con el mismo poligono.
   ---------------------------------------------------------------------- */

/* El poligono del bisel, escrito una vez. Ocho vertices: las cuatro esquinas
   cortadas a `--bisel`. */
.c8l-cristal,
.c8l-cristal::before{
  clip-path:polygon(
    var(--bisel) 0,
    calc(100% - var(--bisel)) 0,
    100% var(--bisel),
    100% calc(100% - var(--bisel)),
    calc(100% - var(--bisel)) 100%,
    var(--bisel) 100%,
    0 calc(100% - var(--bisel)),
    0 var(--bisel));
}

.c8l-cristal{
  position:relative;
  box-sizing:border-box;
  /* 🔴 TRES CAPAS, Y CADA UNA HACE UNA COSA (04/08).
     Leo: «a lo mejor necesitamos hacer doble rendija, en una superposicion
     lateral, diagonal, como si fuera un sombreado… con eso si podemos
     conseguir el efecto de cristal».
     Tiene razon, y es lo que le faltaba. De arriba abajo:

     1. EL BRILLO DIAGONAL. Una banda clara cruzando a 115 grados. Es lo que
        hace que una superficie parezca vidrio y no pintura: el ojo lee «hay
        una luz reflejandose ahi». Sin esto, por transparente que sea, sigue
        pareciendo un cristal sucio.
     2. EL TINTE AZUL. Muy flojo, pero es lo que lo hace cristal AZUL y no
        cristal gris.
     3. EL RELLENO, ya rebajado, que deja pasar la lluvia. */
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.11) 30%,
      rgba(255,255,255,.03) 44%,
      transparent 58%),
    linear-gradient(160deg, rgba(95,216,255,.07), rgba(95,216,255,.02)),
    linear-gradient(160deg, var(--cristal-fondo) 0%, var(--cristal-fondo2) 100%);
  /* Sin `border` y sin `border-radius`: los recorta el clip-path.
     La sombra baja a .42: con el panel ya translucido, una sombra fuerte lo
     despegaba del fondo y volvia a parecer una tarjeta pegada encima. */
  /* 🔴 LA DOBLE RENDIJA (04/08). Leo: «a lo mejor necesitamos hacer doble
     rendija, en una superposicion lateral, diagonal, como si fuera un
     sombreado».
     Es una SEGUNDA lamina del mismo octogono, desplazada en diagonal. Eso es
     lo que hace leer grosor: un cristal de verdad tiene dos caras y la de
     atras se ve corrida.
     Va con `drop-shadow` y NO con `box-shadow` por una razon tecnica: el
     `clip-path` recorta el box-shadow —se lo come entero— mientras que
     `drop-shadow` sigue la silueta recortada. Con box-shadow no se veria
     nada, y es el tipo de cosa que uno da por hecha y luego no aparece. */
  filter:
    drop-shadow(7px 7px 0 rgba(95,216,255,.085))
    drop-shadow(0 14px 30px rgba(1,3,10,.5));
  /* `backdrop-filter` es lo que hace que sea cristal y no plastico. Si el
     navegador no lo soporta, el color de fondo ya es opaco de sobra: se ve
     bien igual, solo que sin el difuminado. */
  -webkit-backdrop-filter:blur(var(--cristal-blur)) saturate(1.15);
          backdrop-filter:blur(var(--cristal-blur)) saturate(1.15);
}

/* EL FILO DE NEON. Es una capa del color del acento recortada con el mismo
   octogono, y a la que se le quita el centro con una mascara: queda solo la
   linea de 1 px siguiendo el bisel. Un `outline` no serviria — dibujaria el
   rectangulo completo por fuera del recorte. */
.c8l-cristal::before{
  content:'';
  position:absolute; inset:0;
  background:var(--acento);
  /* 🔴 .34 y no .5 (04/08). Medido a ojo en Community con ocho filas
     seguidas: a .5 el filo de arriba y el de abajo de cada fila pesaban mas
     que el nombre del bando, y la lista se leia como un pentagrama. El filo
     esta para separar del fondo, no para competir con el contenido. */
  opacity:.34;
  pointer-events:none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  padding:1px;
  box-sizing:border-box;
}

/* LAS MUESCAS. Dos rayitas cortas arriba-izquierda y abajo-derecha. Son lo
   que convierte un octogono en un instrumento: sin ellas parece un recorte
   y no un HUD. */
.c8l-cristal::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(var(--acento),var(--acento)) 20px 0 / 34px 2px no-repeat,
    linear-gradient(var(--acento),var(--acento)) calc(100% - 20px) 100% / 34px 2px no-repeat;
  opacity:.8;
}

/* LA CARTELA DEL TITULO, montada SOBRE el borde de arriba, en hexagono.
   Se pone como hijo del panel:
       <article class="c8l-cristal"><span class="c8l-cartela">Lo que hay</span>…
   El panel necesita sitio arriba (padding-top ~26px) o la cartela tapa la
   primera linea. */
.c8l-cartela{
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-50%);
  padding:6px 26px;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(11,22,40,.98), rgba(7,13,26,.98));
  clip-path:polygon(16px 0, calc(100% - 16px) 0, 100% 50%,
                    calc(100% - 16px) 100%, 16px 100%, 0 50%);
  color:var(--acento);
  font-size:10.5px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
}

/* Variante suave, para paneles que llevan mucho texto o que van dentro de
   otro: mismo cristal, menos grito, y SIN muescas — las muescas dentro de un
   panel que ya las tiene se convierten en ruido.

   🔴 04/08/2026: esta variante NO se sostenia sola. Estaba escrita como
   modificador —solo cambiaba `border-color` y la sombra— y en el perfil se
   uso sin `.c8l-cristal` al lado, asi que las cuatro cifras salian sin
   cristal ninguno: un color de borde sobre nada. Ahora se basta a si misma. */
.c8l-cristal-suave{
  position:relative;
  box-sizing:border-box;
  background:linear-gradient(160deg, rgba(11,22,40,.5), rgba(7,13,26,.66));
  box-shadow:0 8px 22px rgba(1,3,10,.4);
  -webkit-backdrop-filter:blur(calc(var(--cristal-blur) * .6));
          backdrop-filter:blur(calc(var(--cristal-blur) * .6));
  clip-path:polygon(
    var(--bisel) 0, calc(100% - var(--bisel)) 0, 100% var(--bisel),
    100% calc(100% - var(--bisel)), calc(100% - var(--bisel)) 100%,
    var(--bisel) 100%, 0 calc(100% - var(--bisel)), 0 var(--bisel));
}
.c8l-cristal-suave::before{
  content:'';
  position:absolute; inset:0;
  background:var(--acento);
  opacity:.26;
  pointer-events:none;
  padding:1px; box-sizing:border-box;
  clip-path:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

/* ----------------------------------------------------------------------
   EL SUELO REFLEJADO. Solo en la portada y las cinco grandes — decision 3.
   Es un degradado, NO una copia del panel: reflejar de verdad obligaria a
   duplicar el DOM y a pintarlo dos veces, y en un movil eso se nota.
   ---------------------------------------------------------------------- */
.c8l-suelo{ position:relative; }
.c8l-suelo::after{
  content:'';
  position:absolute; left:0; right:0; top:100%;
  height:38%;
  border-radius:0 0 var(--cristal-radio) var(--cristal-radio);
  background:linear-gradient(180deg, var(--acento-brillo) 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 82%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 82%);
  transform:scaleY(-1);
  pointer-events:none;
  opacity:.55;
}

/* ----------------------------------------------------------------------
   LAS DOS APERTURAS — decision 6. Cada una en su sitio:
     · `.c8l-abre`          el panel que se despliega  -> Consola, Estudio, Design
     · `.c8l-abre-pasillo`  el pasillo de tarjetas     -> Games y TV, que tienen catalogo

   Las dos parten de una inclinacion y ACABAN PLANAS. La inclinacion existe
   solo mientras dura la animacion: cuando termina, el elemento esta recto y
   se lee y se pulsa como cualquier otro.
   ---------------------------------------------------------------------- */
@keyframes c8l-desplegar{
  from{ opacity:0; transform:perspective(1200px) rotateX(11deg) translateY(26px) scale(.975); }
  to  { opacity:1; transform:perspective(1200px) rotateX(0deg)  translateY(0)    scale(1); }
}
.c8l-abre{
  animation:c8l-desplegar .62s cubic-bezier(.16,.84,.32,1) both;
  transform-origin:50% 0%;
}

@keyframes c8l-volar{
  from{ opacity:0; transform:perspective(900px) translateZ(-260px) translateY(14px); }
  to  { opacity:1; transform:perspective(900px) translateZ(0)      translateY(0); }
}
.c8l-abre-pasillo{
  animation:c8l-volar .55s cubic-bezier(.2,.7,.3,1) both;
  /* Cada tarjeta entra un poco despues que la anterior: es lo que da la
     sensacion de pasillo. La pagina pone --i en cada tarjeta.
     Se corta a los 12 para que la tarjeta 40 no tarde tres segundos. */
  animation-delay:calc(min(var(--i, 0), 12) * 45ms);
}

/* ----------------------------------------------------------------------
   EL DEDO. Ley 2 de la casa: 44 px, y la condicion es `pointer: coarse`,
   NO el ancho — una tablet girada mide 1024 y sigue siendo un dedo.
   ---------------------------------------------------------------------- */
.c8l-cristal-toca{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--acento-borde);
  background:rgba(95,216,255,.08);
  color:var(--texto, #dde7f3);
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.c8l-cristal-toca:hover{ background:rgba(95,216,255,.16); border-color:var(--acento); }
.c8l-cristal-toca:active{ transform:scale(.96); }
.c8l-cristal-toca:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }

@media (pointer:coarse){
  .c8l-cristal-toca{ min-height:44px; min-width:44px; }
}

/* ----------------------------------------------------------------------
   EL SELLO «PROXIMAMENTE». Decision 5: nada de contadores ni de chats
   inventados, y nada de fechas. Leo, textual: «poner proximamente
   lanzamientos, SIN PONER UN TIEMPO ESTIMADO».
   ---------------------------------------------------------------------- */
.c8l-pronto{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.42);
  background:rgba(212,175,55,.10);
  color:#d4af37;
  font-size:10.5px; font-weight:700;
  letter-spacing:.9px; text-transform:uppercase;
  white-space:nowrap;
}

/* El marco vacio que ocupa el sitio de una portada que aun no existe. Se ve
   que es un hueco a proposito, no una imagen rota. */
.c8l-marco-vacio{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  background:
    linear-gradient(160deg, rgba(9,19,36,.7), rgba(7,13,26,.85)),
    repeating-linear-gradient(135deg,
      rgba(95,216,255,.05) 0 10px, transparent 10px 20px);
  border:1px dashed rgba(95,216,255,.3);
  border-radius:var(--cristal-radio);
  color:var(--tenue, #7d93ad);
  text-align:center;
  padding:14px;
}

/* ----------------------------------------------------------------------
   RESPETO AL QUE NO QUIERE MOVIMIENTO. No es un detalle: en iOS y en
   Android hay un interruptor del sistema para esto, y las animaciones de
   entrada con inclinacion son justo lo que marea a quien lo activa.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .c8l-abre,
  .c8l-abre-pasillo{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .c8l-cristal-toca{ transition:none; }
}

/* En moviles pequenos el difuminado del cristal es lo mas caro de pintar de
   todo el fichero. Se baja a la mitad: se sigue viendo cristal y cuesta la
   mitad de bateria. */
@media (max-width:520px){
  /* El bisel tambien encoge: 14 px en una tarjeta de 166 px de ancho se come
     una esquina entera. Medido en Games a 375: las tarjetas miden 166x309. */
  :root{ --cristal-blur:8px; --cristal-radio:15px; --bisel:10px; }
  .c8l-suelo::after{ opacity:.4; height:30%; }
  .c8l-cartela{ padding:5px 18px; font-size:9.5px; letter-spacing:1.5px; }
  /* Las muescas se acortan o cruzan la tarjeta de lado a lado. */
  .c8l-cristal::after{
    background:
      linear-gradient(var(--acento),var(--acento)) 14px 0 / 22px 2px no-repeat,
      linear-gradient(var(--acento),var(--acento)) calc(100% - 14px) 100% / 22px 2px no-repeat;
  }
}

/* ======================================================================
   LOS TONOS  —  03/08/2026

   Leo eligio «mismo cristal, un acento por departamento»: la estructura, el
   difuminado y las esquinas son IDENTICOS en toda la web —para que se vea
   una sola casa— y lo unico que cambia es el color del neon. Es un cambio
   de variable, no de diseno.

   Se pone con un atributo en cualquier antecesor, normalmente el <body> o
   el contenedor de la pantalla:

       <div data-c8l-tono="oro"> … </div>

   REPARTO:
     azul (por defecto)  TV, Estudio, Design, Consola, Games — las cinco grandes
     oro                 Community: los bandos, el ranking y las coronas
     verde · rosa · morado · negro   SOLO en el perfil del usuario

   🔴 POR QUE EL PERFIL Y NADIE MAS
   Leo, textual: «le pones un cristal azul, otro verde, otro rosa, otro
   morado, otro negro. Asi, SOLAMENTE EN EL PERFIL DEL USUARIO, donde si
   puede tocar un poco los parametros, para que tenga un estilo un poquito
   mas del usuario propio». Si se pudiera cambiar en toda la web, cada
   pantalla seria de un color y la marca se deshace.

   Los cuatro valores de cada tono van escritos a mano y no calculados con
   `color-mix()`: se lee de un vistazo cual es cada color, y funciona en
   navegadores viejos sin depender de una funcion moderna.
   ====================================================================== */

[data-c8l-tono="azul"]{
  --acento:        #5fd8ff;
  --acento-tenue:  rgba(95,216,255,.28);
  --acento-borde:  rgba(95,216,255,.42);
  --acento-brillo: rgba(95,216,255,.16);
}
[data-c8l-tono="oro"]{
  --acento:        #d4af37;
  --acento-tenue:  rgba(212,175,55,.28);
  --acento-borde:  rgba(212,175,55,.44);
  --acento-brillo: rgba(212,175,55,.16);
}
[data-c8l-tono="verde"]{
  --acento:        #4fe3a5;
  --acento-tenue:  rgba(79,227,165,.28);
  --acento-borde:  rgba(79,227,165,.42);
  --acento-brillo: rgba(79,227,165,.16);
}
[data-c8l-tono="rosa"]{
  --acento:        #ff6fb5;
  --acento-tenue:  rgba(255,111,181,.28);
  --acento-borde:  rgba(255,111,181,.44);
  --acento-brillo: rgba(255,111,181,.16);
}
[data-c8l-tono="morado"]{
  --acento:        #b478ff;
  --acento-tenue:  rgba(180,120,255,.30);
  --acento-borde:  rgba(180,120,255,.46);
  --acento-brillo: rgba(180,120,255,.18);
}

/* 🔴 EL NEGRO NO PUEDE SER NEGRO, Y ESTO ES POR QUE.
   El fondo de la casa ya es #01030a. Un borde negro sobre fondo negro no se
   ve: el panel desaparece y no se distingue donde acaba una tarjeta y
   empieza otra. Asi que «negro» se interpreta como el tono SOBRIO — el
   cristal se oscurece de verdad y el filo pasa a plata. Sigue siendo el mas
   oscuro de los cinco, que es lo que se pide al elegirlo, pero se ve. */
[data-c8l-tono="negro"]{
  --acento:        #c2cfdd;
  --acento-tenue:  rgba(194,207,221,.20);
  --acento-borde:  rgba(194,207,221,.30);
  --acento-brillo: rgba(194,207,221,.10);
  --cristal-fondo:  rgba(4,8,15,.78);
  --cristal-fondo2: rgba(2,5,10,.88);
}