/* =========================================================
   Deskodetu — sistema visual unico
   Fondo violeta medio oscuro. Luz declarada: arriba-izquierda.
   Las sombras caen abajo-derecha y toman su color del fondo.
   El boton es plano: sin sombra, sin relieve, sin reaccion.
   ========================================================= */

/* =========================================================
   La letra, servida desde casa.

   Antes las dos venian de Google, y eso costaba dos servidores nuevos
   -uno para la hoja de estilo, otro para los archivos-, cada uno con su
   DNS, su handshake y su ida y vuelta, todo antes de que la pagina
   pudiera pintar una sola letra. Ahora los .woff2 estan en assets/letra:
   mismo servidor, misma conexion ya abierta, y guardados un ano.

   Son las dos variables completas, en el subconjunto latino -que es el
   que tiene todo el castellano, acentos y enes incluidas-. Ambas son
   SIL Open Font License 1.1, asi que alojarlas es parte de la licencia.
   ========================================================= */
@font-face{
  font-family:"Unbounded";
  src:url(letra/unbounded-latin.woff2) format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"DM Sans";
  src:url(letra/dmsans-latin.woff2) format("woff2");
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* escala del violeta, del mas hundido al mas iluminado */
  --neg-0:#000000;
  --neg-1:#251e3b;
  --neg-2:#342b50;
  --gris-3:#3d3360;
  --gris-4:#4f456e;
  --gris-5:#857daa;
  --gris-6:#aaa3c6;
  --gris-7:#dcd8ea;
  --claro:#f4f2f9;

  --hueso:#efe7d3;          /* el blanco hueso de todo el sitio */
  --acento:#ffb020;
  --acento-hondo:#c9781a;

  /* posicion y color de la unica luz */
  --luz-x:16%;
  --luz-y:4%;
  --luz-calida:rgba(179,152,255,.16);
  --luz-filo:rgba(214,200,255,.07);
  --luz-filo-fuerte:rgba(220,208,255,.13);

  /* sombras: nacen del fondo, no del negro puro */
  --sombra-cerca:8px 10px 22px -12px rgba(16,10,32,.9);
  --sombra-media:14px 20px 44px -20px rgba(16,10,32,.9);
  --sombra-lejos:22px 34px 76px -28px rgba(13,8,26,.95);
  --filo-oscuro:rgba(12,7,24,.5);

  /* grilla unica de punta a punta */
  --margen:clamp(1.25rem, 5vw, 5.5rem);

  /* Donde vive el logo, en cualquier pantalla del sitio. Esta clavado ahi
     y no se mueve nunca: ni al scrollear, ni al cambiar de pagina. News
     usa estos dos mismos numeros, copiados en su hoja. El ancho es el que
     mide "Deskodetu" a su cuerpo -6.88em medidos-, y sirve para dejarle
     el lugar libre a lo que venga al lado. */
  --marca-x:clamp(1.25rem, 5vw, 5.5rem);
  --marca-y:clamp(.7rem, 2.4vw, 1.9rem);
  --marca-ancho:7.02rem;
  --paso:clamp(.75rem, 1.6vw, 1.5rem);
  --radio-chico:10px;
  --radio-grande:18px;

  /* ---- GUARDADA: Fraunces (la que gusto). Para volver, usar esto ----
     link:      family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1
     display:   --tipo-display:"Fraunces","Georgia",serif;
     .marca b:  font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 1;  letter-spacing:-.01em;
     .display:  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1; line-height:.88; letter-spacing:-.022em;
     .boton:    font-variation-settings:"opsz" 20,"SOFT" 100,"WONK" 1;  font-size:.94rem; letter-spacing:.005em;
     index.php: font-size:clamp(2.6rem, min(14.4vw, 26vh), 12rem);
     ------------------------------------------------------------------ */
  --tipo-display:"Unbounded","DM Sans",system-ui,sans-serif;
  --tipo-texto:"DM Sans",system-ui,-apple-system,sans-serif;
}

/* Las pantallas no tienen, por ahora, ningun movimiento de entrada ni de
   salida: se cambia de una a la otra y listo. Los gestos se van a armar de
   nuevo desde cero, uno por uno, y valen para todo el sitio por igual.
   Lo que quede escrito aca abajo es el unico lugar donde viven. */

*,*::before,*::after{box-sizing:border-box;}

html{
  /* El fondo va aca y no solo en el body: el lienzo del navegador -lo que
     se ve antes de que la pagina pinte, y en el hueco entre una pagina y
     la siguiente- toma el color de la raiz. Sin esto ese hueco es blanco,
     y entre dos pantallas negras se ve como un parpadeo. color-scheme le
     avisa ademas que el default de esta pagina es oscuro, asi el blanco no
     aparece ni siquiera antes de que llegue esta hoja. */
  background-color:var(--neg-0);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;   /* sin rebote al llegar al tope */
  -webkit-tap-highlight-color:transparent;   /* sin el flash azul al tocar */
}

/* Nada se pinta de azul al apretarlo, y mantener el dedo sobre un boton
   o un link del menu tampoco selecciona su texto. El texto de las
   pantallas se sigue pudiendo seleccionar. */
a, button, summary, [role="option"], .lista-boton, .taco, .papel .chincheta,
.papel .tirar, .papel .agarradera{
  -webkit-tap-highlight-color:transparent;
}
button, .boton, .menu a, .marca, [role="option"], .copiar, .hamburguesa{
  -webkit-user-select:none;
  user-select:none;
}

body{
  margin:0;
  min-height:100dvh;
  overscroll-behavior:none;
  font-family:var(--tipo-texto);
  color:var(--gris-7);
  background-color:var(--neg-0);
  background-image:none;
  overflow-x:hidden;
}

/* grano: ninguna superficie queda perfectamente plana */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:60;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* fondo negro pleno: sin foco de ambiente */

/* ---------- barras de desplazamiento vestidas ---------- */
*{ scrollbar-width:thin; scrollbar-color:var(--gris-4) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:rgba(0,0,0,.14); }
::-webkit-scrollbar-thumb{
  background:var(--gris-4);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--acento-hondo); background-clip:content-box; }
::selection{ background:#8b5cf6; color:#f7f4ff; }

/* =========================================================
   Chasis: barra y pie son la misma pieza que la pagina
   ========================================================= */
.lienzo{
  position:relative; z-index:1;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(1rem,2.4vw,1.9rem) var(--margen) clamp(1.1rem,2.4vw,1.9rem);
  gap:var(--paso);
}

.barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--paso);
  /* El logo salio del flujo, pero la fila sigue ocupando su alto para que
     lo de abajo no se corra hacia arriba. */
  min-height:1.05rem;
}

/* Clavado arriba a la izquierda, por encima del pano de la transicion:
   cuando el fondo cambia de color, el logo se queda. */
.barra .marca{
  position:fixed; top:var(--marca-y); left:var(--marca-x);
  z-index:95;
  line-height:1;
}

/* En el diario, de este ancho para abajo, "News" vive en una barra clavada
   de 2.4rem y el logo tiene que caer en su eje. Se copia el numero aca
   tambien: asi al cambiar de pantalla el logo no se mueve ni un pixel. */
@media (max-width:1039.98px){
  :root{ --marca-y:.7rem; }
}

.marca{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:inherit;
}
.marca b{
  /* Caja igual al cuerpo de la letra: asi el logo cae en el mismo pixel
     que el del diario, que se declara igual. */
  display:block; line-height:1;
  font-family:var(--tipo-display);
  font-weight:900;
  letter-spacing:-.02em;
  font-size:1.02rem;
  color:var(--hueso);
}

.micro{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris-5);
  font-weight:500;
}

.pie{
  display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem);
  flex-wrap:wrap;
  border-top:1px solid rgba(220,208,255,.09);
  padding-top:clamp(.7rem,1.4vw,1.05rem);
}
.pie .sep{ flex:1 1 auto; }

/* =========================================================
   Tipografia
   ========================================================= */
.display{
  font-family:var(--tipo-display);
  font-weight:900;
  line-height:1;
  letter-spacing:-.035em;
  margin:0;
  color:var(--hueso);
}

.rotulo{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gris-5); font-weight:600; margin:0;
}

.bajada{
  color:var(--gris-6);
  font-size:clamp(.9rem,1.05vw,1rem);
  line-height:1.6;
  margin:0;
}

a{ color:var(--gris-7); }

/* =========================================================
   Boton: negro plano, letras blancas.
   Sin sombra, sin filo, sin relieve, sin reaccion.
   ========================================================= */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--tipo-texto);
  font-size:.92rem; font-weight:700; letter-spacing:0;
  padding:.92rem 2.1rem;
  border:0; border-radius:var(--radio-chico);
  cursor:pointer;
  text-decoration:none;
  background:var(--hueso);
  color:#000000;
  box-shadow:none;
  transform:none;
  transition:none;
}
.boton:hover,
.boton:active{
  background:var(--hueso);
  color:#000000;
  box-shadow:none;
  transform:none;
}
/* se mantiene solo el contorno de foco por teclado (accesibilidad) */
.boton:focus-visible{ outline:2px solid var(--claro); outline-offset:3px; }

.boton.tenue{
  background:rgba(220,208,255,.09);
  color:var(--gris-7);
}
.boton.tenue:hover,
.boton.tenue:active{ background:rgba(220,208,255,.09); color:var(--gris-7); }

/* enlaces de indice, con linea de pelo de acento */
.indice{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--gris-6);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.35rem 0;
  transition:color .25s ease;
}
.indice::before{
  content:""; width:20px; height:1px; background:var(--gris-4);
  transition:width .3s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.indice:hover{ color:var(--claro); }
.indice:hover::before{ width:34px; background:var(--acento); }

/* =========================================================
   Un unico material de superficie
   ========================================================= */
.panel{
  position:relative;
  border-radius:var(--radio-grande);
  padding:clamp(1.5rem,2.7vw,2.4rem);
  background:rgba(30,24,50,.6);
  -webkit-backdrop-filter:blur(20px) saturate(115%);
  backdrop-filter:blur(20px) saturate(115%);
  box-shadow:
    inset 0 1px 0 var(--luz-filo-fuerte),
    inset 1px 0 0 var(--luz-filo),
    inset -1px 0 0 rgba(12,7,24,.45),
    inset 0 -1px 0 var(--filo-oscuro),
    var(--sombra-lejos);
  overflow:hidden;
}
/* el puntero es una luz suave sobre la superficie */
.panel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(190,168,255,.10), transparent 70%);
  transition:opacity .4s ease;
}
.panel:hover::before{ opacity:1; }

/* =========================================================
   Formularios: campos hundidos
   ========================================================= */
.form{ display:grid; gap:clamp(.8rem,1.4vw,1.05rem); }

.campo{ display:grid; gap:.4rem; }
.campo label{
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-5); font-weight:600;
}
.campo input{
  width:100%;
  font-family:var(--tipo-texto);
  font-size:.95rem;
  color:var(--claro);
  padding:.82rem 1rem;
  border:0; border-radius:var(--radio-chico);
  background:rgba(12,7,24,.3);
  box-shadow:
    inset 0 2px 7px rgba(10,5,22,.5),
    inset 0 1px 0 rgba(10,5,22,.6),
    inset 0 -1px 0 rgba(220,208,255,.05);
  transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.campo input::placeholder{ color:var(--gris-5); }
.campo input:focus{
  outline:0;
  background:rgba(12,7,24,.2);
  box-shadow:
    inset 0 2px 7px rgba(10,5,22,.4),
    inset 0 0 0 1px rgba(255,176,32,.4),
    0 0 26px -8px rgba(255,176,32,.4);
}
.campo input:-webkit-autofill{
  -webkit-text-fill-color:var(--claro);
  -webkit-box-shadow:0 0 0 40px #2a2242 inset;
}

.pareja{ display:grid; gap:inherit; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .pareja{ grid-template-columns:1fr; } }

.pista{ font-size:.72rem; color:var(--gris-5); }

/* aviso: linea de acento, sin cubito de color */
.aviso{
  display:grid; gap:.25rem;
  padding:.7rem 0 .7rem 1rem;
  border-left:2px solid var(--acento);
  font-size:.84rem; line-height:1.5;
  color:var(--gris-7);
}
.aviso.mal{ border-left-color:#ef6b5e; }
.aviso ul{ margin:0; padding-left:1.1rem; }

/* =========================================================
   Movimiento de pantalla

   Por ahora hay uno solo, y es el viaje al diario. Son tres tiempos, en
   este orden y sin superponerse casi nada:

     1. lo que hay en pantalla se va para atras y se apaga -se mete en el
        fondo, que aca es negro-;
     2. ya sin nada encima, el fondo se aclara: el negro se vuelve el
        hueso del diario;
     3. del otro lado, el contenido de News vuelve desde ese mismo fondo.

   El tercer tiempo esta en news/estilo.css, que es donde ocurre.
   ========================================================= */

/* El viaje entre Deskodetu y el diario. Tres pasos, uno atras del otro y
   sin pisarse:

     1. el contenido se va: se funde con el fondo, que aca es el negro;
     2. recien ahi el fondo cambia de color, hasta el hueso del diario;
     3. del otro lado -que ya nace de ese color- aparece el contenido.

   El paso 2 lo hace este pano. No se le anima la opacidad sino el alfa de
   su color: asi lo de atras se pierde de a poco en vez de apagarse el
   pano entero. Al llegar no hace falta ningun pano: el color ya cambio de
   este lado, y la pantalla que abre ya es de ese color. */
.niebla{
  position:fixed; inset:0; z-index:90;
  pointer-events:none;
  background:transparent;
}

/* 1 y 2, yendo al diario. */
/* El logo no entra en el viaje: se anima lo que hay debajo de la barra,
   no el lienzo entero. */
html.alDiario .lienzo > main,
html.alDiario .lienzo > .pie{
  animation:fundirseConElFondo .26s cubic-bezier(.3,0,.35,1) forwards;
}
html.alDiario .niebla{
  animation:tenirseDeHueso .26s cubic-bezier(.4,0,.5,1) .26s forwards;
}
/* El logo no viaja, pero tampoco se queda del color de la pantalla que ya
   no esta: se da vuelta dentro de la misma ventana que el fondo.

   Lo que no puede hacer es degradarse. El fondo va del negro al hueso, o
   sea que pasa por todos los grises del camino; si el logo hace el mismo
   recorrido, en algun momento los dos estan en el mismo gris y el logo
   desaparece -medido: a los 390ms el logo daba (121,115,104) y el fondo
   (136,132,120)-.

   Por eso no se degrada: se da vuelta de una, en el instante en que el
   fondo pasa por la mitad. Ahi el fondo es un gris medio, y contra ese
   gris se leen igual de bien el hueso y la tinta: antes del corte se ve
   claro sobre gris, despues oscuro sobre gris. Cero cuadros invisibles, y
   el cambio se nota, que es de lo que se trata. */
html.alDiario .barra .marca b{
  animation:marcaSeHaceTinta .26s linear .26s forwards;
}
@keyframes marcaSeHaceTinta{
  0%,   45.9%{ color:var(--hueso); }
  46%,  100% { color:#1a1712; }   /* la tinta del diario */
}

/* ---------- de una pantalla negra a otra ----------
   Entre la portada, admin y el panel no hay cambio de color: las dos
   puntas son negras, asi que el pano no se tine de nada. Queda el gesto
   pelado, que es el que pidieron: el contenido se va y llega el nuevo.
   El logo, como siempre, se queda. */
html.saliendo .lienzo > main,
html.saliendo .lienzo > .pie{
  animation:fundirseConElFondo .26s cubic-bezier(.3,0,.35,1) forwards;
}
html.llegando .lienzo > main,
html.llegando .lienzo > .pie{
  animation:salirDelFondo .3s cubic-bezier(.2,.7,.3,1) .04s both;
}

/* ---------- la pantalla de carga ----------
   Mientras la pantalla que viene todavia no llego, lo unico que hay es el
   color liso de la niebla. Ahi aparece la marca escribiendose: una D y un
   guion bajo que titila, como un cursor esperando. Se enciende recien
   cuando la niebla termino de llenarse -antes taparia el fundido- y sigue
   titilando todo lo que dure la espera, sea corta o larga. */
.niebla{ display:grid; place-items:center; }
.cargando{
  display:inline-flex;
  font-weight:900;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  line-height:1;
  letter-spacing:-.03em;
  opacity:0;
}
.cargando i{ font-style:normal; }

@keyframes asomaCursor{
  from{ opacity:0; }
  to  { opacity:1; }
}
/* Sin degradado: un cursor no se desvanece, se apaga y se prende. */
@keyframes titilar{
  50%{ opacity:0; }
}

.cargando{ font-family:var(--tipo-display); color:#1a1712; }
html.alDiario .cargando{
  animation:asomaCursor .16s ease .54s both;
}
html.alDiario .cargando i{
  animation:titilar .9s step-end .54s infinite;
}

/* En el viaje sin cambio de color no hay pano que llenar, asi que el
   cursor asoma apenas se termino de ir el contenido. Y va del hueso,
   porque el fondo de estas pantallas es el negro. */
html.saliendo .cargando{
  color:var(--hueso);
  animation:asomaCursor .16s ease .26s both;
}
html.saliendo .cargando i{
  animation:titilar .9s step-end .26s infinite;
}


/* 3, volviendo del diario: alla el fondo ya se tino de negro, asi que
   aca solo queda que el contenido salga de ese fondo. */
html.desdeElFondo .lienzo > main,
html.desdeElFondo .lienzo > .pie{
  animation:salirDelFondo .3s cubic-bezier(.2,.7,.3,1) .04s both;
}

/* Fundirse no es caer ni cortarse: el contenido se apaga sobre el color
   del fondo -que es el que va a quedar- y se va apenas para atras, lo
   justo para que se lea como profundidad y no como que encoge. */
@keyframes fundirseConElFondo{
  from{ opacity:1; transform:none; }
  to  { opacity:0; transform:scale(.985); }
}
@keyframes salirDelFondo{
  from{ opacity:0; transform:scale(.985); }
  to  { opacity:1; transform:none; }
}

@keyframes tenirseDeHueso{
  from{ background-color:rgba(239,231,211,0); }
  to  { background-color:rgba(239,231,211,1); }
}

/* el titulo se arma desde adentro de su propia linea */
.mascara{ display:block; overflow:hidden; padding-bottom:.09em; }
.mascara.abierto{ overflow:visible; }
.mascara > *{ display:block; }
.display.mascara > *{ color:var(--hueso); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .entra{opacity:1;transform:none;}
  .mascara > *{transform:none;}
}

/* Mientras la pantalla espera a su letra, todas las animaciones quedan
   quietas en su primer cuadro. Lo pone y lo saca el script del <head>. */
html.esperando *,
html.esperando *::before,
html.esperando *::after{ animation-play-state:paused !important; }