/* =========================================================
   Deskodetu / News — el diario.

   Papel hueso de punta a punta, tinta cálida casi negra.

   Dos reglas que mandan sobre el resto:
     1. Ninguna línea. Lo que separa es el aire y el tamaño,
        nunca un borde. Un diario bien armado no tiene rejas.
     2. Ninguna caja. Las notas no son tarjetas: son notas.
        Sin fondo, sin borde, sin sombra — se apoyan en el papel.

   Las tipografías del cuerpo llegan desde PHP (news_letra_head):
   --serif, --sans y --cuerpo se definen ahí para poder probarlas.
   La marca (Unbounded) no cambia nunca: es la identidad.
   ========================================================= */

/* La marca viene de casa, no de Google: es la misma Unbounded que usa el
   resto del sitio y ya esta guardada en el navegador desde la portada.
   La DM Sans -la sans de base del diario- tambien. Ver assets/estilo.css. */
/* `block` y no `swap`: con `swap` la página se dibuja con la letra
   del sistema y la cambia cuando llega la buena, y ese cambio a mitad
   de lectura es justamente lo que molesta. Con `block` el texto espera
   un instante y aparece una sola vez, ya bien. Las dos están alojadas
   acá y van precargadas desde el <head>, así que esa espera no se ve. */
@font-face{
  font-family:"Unbounded";
  src:url(../assets/letra/unbounded-latin.woff2) format("woff2");
  font-weight:200 900; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Newsreader";
  src:url(../assets/letra/newsreader-latin.woff2) format("woff2");
  font-weight:300 700; font-style:normal; font-display:block;
}
@font-face{
  font-family:"DM Sans";
  src:url(../assets/letra/dmsans-latin.woff2) format("woff2");
  font-weight:100 1000; font-style:normal; font-display:block;
}

:root{
  --papel:      #efe7d3;
  --papel-alto: #f7f2e4;
  --papel-hondo:#e2d9c2;
  --tinta:      #1a1712;
  --tinta-2:    #443e35;
  --tinta-3:    #7a7264;
  --acento:     #5b3fa8;

  --marca: "Unbounded", system-ui, sans-serif;

  /* Respaldos: si PHP no los pisa, el diario igual se ve. */
  --serif:  Georgia, "Times New Roman", serif;
  --sans:   system-ui, -apple-system, sans-serif;
  --cuerpo: 18px;

  --margen-diario: clamp(1.25rem, 4vw, 4.5rem);

  /* Los mismos tres numeros que assets/estilo.css: el logo esta en el
     mismo punto en todas las pantallas del sitio, y este es. */
  --marca-x:clamp(1.25rem, 5vw, 5.5rem);
  --marca-y:clamp(.7rem, 2.4vw, 1.9rem);
  --marca-ancho:7.02rem;
}

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

html{
  background:var(--papel);
  color-scheme:light;   /* el lienzo del navegador, tambien de papel */
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  /* El celeste que pinta el celular al tocar un enlace no es de acá. */
  -webkit-tap-highlight-color:transparent;
}

body{
  margin:0;
  min-height:100dvh;
  overscroll-behavior:none;
  overflow-x:hidden;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:var(--cuerpo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; }
a{ color:var(--acento); }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; -webkit-tap-highlight-color:transparent; }
a{ -webkit-tap-highlight-color:transparent; }
a:focus, button:focus{ outline:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

*{ scrollbar-width:thin; scrollbar-color:rgba(26,23,18,.24) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(26,23,18,.22);
  border:3px solid transparent;
  border-radius:99px;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(26,23,18,.42); background-clip:content-box; }
::selection{ background:var(--acento); color:#f4f0ff; }

.papel{
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--margen-diario) clamp(3rem,8vh,6rem);
}

/* =========================================================
   Cabezal
   ========================================================= */
/* El mismo viaje, del lado del diario. Los tres pasos son los mismos y
   los colores van al reves: se sale fundiendose con el hueso y el fondo
   se tine del negro de alla; se llega desde ese negro. */
.niebla{
  position:fixed; inset:0; z-index:90;
  pointer-events:none;
  background:transparent;
}

/* 1 y 2, volviendo a Deskodetu. Los mismos tiempos que del otro lado. */
html.aCasa .papel{
  animation:fundirseConElFondo .26s cubic-bezier(.3,0,.35,1) forwards;
}
html.aCasa .niebla{
  animation:tenirseDeNegro .26s cubic-bezier(.4,0,.5,1) .26s forwards;
}

/* Y el logo se da vuelta con la misma regla que del otro lado: no se
   degrada -si lo hiciera, en algun punto estaria del mismo gris que el
   fondo y desapareceria-, se da vuelta de una en el instante en que el
   fondo pasa por la mitad. Contra ese gris medio se leen igual de bien la
   tinta y el hueso. */
html.aCasa .barra .deVuelta b{
  animation:marcaSeHaceHueso .26s linear .26s forwards;
}
@keyframes marcaSeHaceHueso{
  0%,   45.9%{ color:var(--tinta); }
  46%,  100% { color:#efe7d3; }   /* el hueso de Deskodetu */
}

/* ---------- 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(--marca); color:#efe7d3; }
html.aCasa .cargando{
  animation:asomaCursor .16s ease .54s both;
}
html.aCasa .cargando i{
  animation:titilar .9s step-end .54s infinite;
}


/* 3, llegando desde Deskodetu. */
html.desdeElFondo .papel{
  animation:salirDelFondo .3s cubic-bezier(.2,.7,.3,1) .04s both;
}

/* Aca el contenido se funde y vuelve sin escala, solo con el encendido.

   La escala parecia lo mismo que en la portada y no lo es: alla el lienzo
   mide exactamente una pantalla, asi que su centro es el centro de lo que
   se ve y encoger da profundidad. El diario, en cambio, es un documento
   largo -varias pantallas-, y su centro esta muy por debajo del borde de
   abajo: al encogerlo, lo que se ve arriba baja unas decenas de pixeles y
   despues vuelve, o sea que el contenido parecia salir desde abajo en vez
   de desde el fondo. Sin escala, sale del color y nada mas. */
@keyframes fundirseConElFondo{
  from{ opacity:1; }
  to  { opacity:0; }
}
@keyframes salirDelFondo{
  from{ opacity:0; }
  to  { opacity:1; }
}

@keyframes tenirseDeNegro{
  from{ background-color:rgba(0,0,0,0); }
  to  { background-color:rgba(0,0,0,1); }
}

/* El logo ya no esta adentro, pero el titulo tiene que seguir donde
   estaba: el hueco que ocupaba se pide como padding. */
.cabezal{ padding:calc(var(--marca-y) + 1.05rem) 0 0; }

/* El logo de la casa, arriba del titulo y contra el margen derecho. */
.barra .deVuelta{
  position:fixed; top:var(--marca-y); left:var(--marca-x);
  z-index:95;
  line-height:1;
  text-decoration:none;
  color:var(--tinta);
  -webkit-tap-highlight-color:transparent;
}
.barra .deVuelta b{
  display:block; line-height:1;
  font-family:var(--marca);
  font-weight:900;
  font-size:1.02rem;
  letter-spacing:-.02em;
}
.barra .deVuelta:hover b{ color:var(--acento); }

.cabezal .fila{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(1rem,4vw,3rem);
}

.cabezal h1{
  font-family:var(--marca);
  font-weight:900;
  font-size:clamp(2.4rem, min(10vw, 14vh), 5.4rem);
  line-height:.9;
  letter-spacing:-.045em;
  margin:0;
  color:var(--tinta);
}
.cabezal h1 a{ color:inherit; text-decoration:none; }

/* "News" va justo debajo de "Deskodetu", en el mismo punto horizontal.

   Deskodetu esta clavado contra la ventana (--marca-x) y el papel esta
   centrado: en una pantalla ancha los dos margenes no coinciden y News
   quedaba varios centimetros corrido a la derecha. Se lo saca del flujo
   y se lo ubica contra la ventana con las mismas variables que usa
   Deskodetu, asi coinciden a cualquier ancho.

   A diferencia de Deskodetu, News no queda clavado: se va con el scroll,
   porque es el titulo del diario y no la marca de la casa.

   El hueco que deja en la grilla lo ocupa .marca con el mismo alto que
   tenia el titulo, asi lo de abajo no se sube. */
@media (min-width:1040px){
  .cabezal .marca{
    min-height:calc(clamp(2.4rem, min(10vw, 14vh), 5.4rem) * .9 + .35rem);
  }
  .cabezal h1{
    position:absolute;
    top:calc(var(--marca-y) + 1.02rem + .35rem);
    left:var(--marca-x);
    margin:0;
  }
}

.cabezal .dia{
  display:grid; gap:.4rem; justify-items:end; text-align:right;
  padding-bottom:.5rem; max-width:36ch;
}
.cabezal .fecha{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-3); margin:0;
}
.cabezal .clima{
  display:inline-block;
  margin-left:.7rem;
  padding-left:.7rem;
  border-left:1px solid rgba(26,23,18,.22);
  color:var(--tinta-2);
}

/* El boton de avisos vive en la esquina, no perdido en el pie. */
.cabezal .avisarme{
  justify-self:end;
  display:inline-flex; align-items:center;
  height:2.3rem; padding:0 1rem;
  margin-top:.35rem;
  font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--papel); background:var(--tinta);
  border-radius:9px; text-decoration:none;
  transition:opacity .16s ease;
}
.cabezal .avisarme:hover{ opacity:.85; }

.cabezal .sumario{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
  font-style:italic;
  color:var(--tinta-2);
}

.imprenta{
  display:flex; flex-wrap:wrap; gap:.3rem 1.5rem;
  padding:.9rem 0 0;
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-3);
  margin-bottom:clamp(1.8rem,5vh,3rem);
}
.imprenta .sep{ flex:1 1 auto; }
.imprenta a{ color:var(--tinta-3); text-decoration:none; }
.imprenta a:hover{ color:var(--acento); }

/* =========================================================
   Cuerpo: indice a la izquierda, columnas a la derecha
   ========================================================= */
.cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.8rem,4vh,2.8rem);
  align-items:start;
}
/* Dos columnas: el indice a la izquierda y el diario al medio. */
@media (min-width:1040px){
  .cuerpo{
    grid-template-columns:160px minmax(0,1fr);
    gap:0 clamp(2rem,3vw,2.8rem);
  }
}
/* Tres: entra la columna de titulares a la derecha. */
@media (min-width:1320px){
  .cuerpo{ grid-template-columns:160px minmax(0,1fr) 240px; }
}

.cabezal .marca{ min-width:0; }


/* El boton de las tres lineas y el cajon son cosa del celular:
   en escritorio el menu ya esta a la vista, a la izquierda. */
.hamburguesa,
.cerrarMenu,
.suscribirMovil,
.velo{ display:none; }

/* ---------- indice ---------- */
.indice{ display:block; min-width:0; }
@media (min-width:1040px){
  .indice{
    position:sticky; top:1.6rem;
    max-height:calc(100dvh - 3.2rem);
    overflow-y:auto;
    padding-bottom:1rem;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .indice::-webkit-scrollbar{ width:0; height:0; }
}

.indice h2{
  font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-3);
  margin:0 0 .7rem;
}
.indice .bloque + .bloque{ margin-top:2rem; }

.indice .lista-secciones{ display:flex; flex-direction:column; gap:.1rem; }

/* Cada seccion es una fila: el enlace y, si estas suscrito, el «+»
   que la suma a tus temas. El boton solo aparece al pasar el mouse
   o cuando ya esta marcada, para que el menu no se llene de signos. */
.indice .fila-seccion{ display:flex; align-items:center; gap:.45rem; }
.indice .fila-seccion form{ margin:0; display:flex; }
.indice .fila-seccion a{ flex:1 1 auto; min-width:0; }
/* El hueco de la fila «Todo», que no tiene boton: mantiene los
   numeros de todas las filas en la misma columna. */
.indice .hueco{ width:1.5rem; flex:0 0 auto; }
.indice .fila-seccion > .cuantas{ flex:0 0 auto; min-width:1.4rem; text-align:right; }

/* Un boton que hay que descubrir pasando el mouse no existe: se ve
   siempre, con su recuadro, para que se entienda que se toca. */
.indice .mas{
  display:grid; place-items:center;
  width:1.5rem; height:1.5rem;
  flex:0 0 auto;
  border-radius:6px;
  font-family:var(--sans); font-size:1.05rem; font-weight:600; line-height:1;
  color:var(--tinta-2);
  background:var(--papel-hondo);
  transition:color .15s ease, background .15s ease;
}
.indice .mas:hover{ background:var(--tinta); color:var(--papel); }
.indice .mas.puesta{ background:var(--acento); color:#f4f0ff; }
.indice .mas.puesta:hover{ background:var(--tinta); color:var(--papel); }
.indice .fila-seccion.mia > a{ font-weight:600; color:var(--tinta); }

.indice .lista-secciones a{
  display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:.3rem 0;
  font-family:var(--sans); font-size:.92rem; font-weight:500;
  color:var(--tinta-2); text-decoration:none;
  transition:color .18s ease;
}
.indice .lista-secciones a:hover{ color:var(--acento); }
.indice .lista-secciones a.activa{ color:var(--tinta); font-weight:700; }
.indice .cuantas{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums; font-size:.78rem;
  color:var(--tinta-3); font-weight:400;
}

.indice .misTemas{
  display:inline-block; margin-top:.7rem;
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); text-decoration:none;
}
.indice .misTemas:hover{ color:var(--acento); }

.indice .ediciones{ list-style:none; margin:0; padding:0; }
.indice .ediciones a{
  display:block; padding:.24rem 0;
  font-family:var(--sans); font-size:.84rem;
  color:var(--tinta-2); text-decoration:none;
}
.indice .ediciones a:hover{ color:var(--acento); }
.indice .ediciones a.activa{ color:var(--tinta); font-weight:700; }
.indice .ediciones .turno{
  font-family:var(--sans);
  font-size:.72rem;
  color:var(--tinta-3);
  margin-left:.15rem;
}
.indice .ediciones .hoy{
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-3); margin-left:.4rem;
}

/* La suscripcion no es una caja: es un bloque mas del indice. */
.indice .avisos p{
  margin:0 0 .7rem;
  font-family:var(--sans); font-size:.82rem; line-height:1.5;
  color:var(--tinta-2);
}
.indice .avisos .boton{
  width:100%; height:2.5rem; padding:0 .9rem;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  background:var(--tinta); color:var(--papel);
  border-radius:9px;
}

/* =========================================================
   Columnas de noticias
   ========================================================= */
.columnas{ min-width:0; display:grid; gap:clamp(2.6rem,6vh,4.2rem); }

/* ---------- apertura ---------- */
.apertura{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.2rem,2.5vw,2rem);
}
.apertura .figura{ margin:0; }
.apertura .figura img{
  display:block; width:100%; height:auto;
  aspect-ratio:21/9; object-fit:cover;
  border-radius:12px;
}
.apertura .rotulillo{
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--acento); margin:0 0 .6rem;
}
.apertura h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.2rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 .7rem;
  max-width:22ch;
}
.apertura h2 a{ color:var(--tinta); text-decoration:none; }
.apertura h2 a:hover{ color:var(--acento); }
.apertura .entrada{
  margin:0;
  font-size:1.12rem;
  line-height:1.55;
  color:var(--tinta-2);
  max-width:56ch;
}

/* ---------- secciones ---------- */
.tituloSeccion{
  display:flex; align-items:baseline; gap:.9rem;
  margin:0 0 clamp(1.2rem,3vh,1.8rem);
}
.tituloSeccion h3{
  font-family:var(--sans);
  font-size:.78rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta); margin:0;
}
.tituloSeccion .cuantas{
  font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3);
}

/* Una sola columna. Dos columnas de notas obligan al ojo a saltar de
   un lado al otro y ninguna se termina de leer; en fila, el diario se
   recorre de arriba abajo como un diario. La foto va al costado, que
   es como listan sus notas los diarios grandes. */
.notas{ display:grid; gap:clamp(2.6rem,6vh,4rem); }

.nota{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:clamp(1rem,1.8vw,1.4rem);
  align-items:start;
  min-width:0;
}
.nota.sinFoto{ grid-template-columns:minmax(0,1fr); }
.nota .figura{ margin:0; }
.nota .figura img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:12px;
}
.nota .texto{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.nota h4{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.28rem;
  line-height:1.14;
  letter-spacing:-.008em;
  margin:0;
  max-width:34ch;
}
.nota h4 a{ color:var(--tinta); text-decoration:none; }
.nota h4 a:hover{ color:var(--acento); }
.nota p{
  margin:0;
  font-size:.96rem;
  line-height:1.45;
  color:var(--tinta-2);
  max-width:62ch;   /* mas ancho que esto y el ojo pierde el renglon */
}

/* ---------- pie de cada nota ---------- */
.pieNota{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:.3rem;
}
.credito{
  font-family:var(--sans); font-size:.64rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3);
}
.credito .cuando{ font-weight:400; letter-spacing:.1em; }
.credito .seccionilla{ color:var(--acento); }

.votos{ display:flex; gap:.15rem; flex:0 0 auto; }
.voto{
  display:grid; place-items:center;
  width:1.9rem; height:1.9rem;
  border-radius:7px;
  color:var(--tinta-3);
  opacity:.55;
  transition:opacity .16s ease, color .16s ease, background .16s ease;
}
.voto svg{ width:.95rem; height:.95rem; }
.voto:hover{ opacity:1; background:rgba(26,23,18,.06); }
.voto[data-valor="1"].puesto{ opacity:1; color:var(--acento); }
.voto[data-valor="-1"].puesto{ opacity:1; color:#9c3a29; }
.voto[disabled]{ opacity:.3; cursor:default; }

/* =========================================================
   Titulares: la edicion entera de un vistazo

   Es el sumario del diario, no otra lista de notas: solo el titulo,
   apretado, para barrer los 40 de arriba abajo y saltar al que
   interese. Los diarios grandes ponen esta columna de titulos sin
   foto justamente porque se lee mucho mas rapido que las tarjetas.
   ========================================================= */
.titulares{ min-width:0; }

/* Se queda en pantalla como el menú de secciones, y si la edición no
   entra, scrollea por dentro. La barra va escondida: al lado de una
   columna de titulares sin líneas, una barra gris es la única cosa
   que ensucia. Se sigue moviendo con la rueda y con el teclado. */
@media (min-width:1320px){
  .titulares{
    position:sticky; top:1.6rem;
    max-height:calc(100dvh - 3.2rem);
    overflow-y:auto;
    padding-bottom:.5rem;
    scrollbar-width:none;         /* Firefox */
    -ms-overflow-style:none;      /* Edge viejo */
  }
  .titulares::-webkit-scrollbar{ width:0; height:0; }
}

.titulares h2{
  font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-3);
  margin:0 0 .8rem;
}

.titulares ul{ list-style:none; margin:0; padding:0; }
.titulares li{ margin:0; }

.titulares a{
  display:block;
  padding:.42rem 0;
  font-family:var(--serif);
  font-size:.94rem;
  line-height:1.3;
  color:var(--tinta-2); text-decoration:none;
  transition:color .16s ease;
}
.titulares a:hover{ color:var(--acento); }

/* La nota a la que se acaba de saltar se enciende un segundo, si no
   uno aterriza en el medio del diario sin saber donde cayo. */
.nota:target .texto h4 a,
.apertura:target h2 a{ color:var(--acento); }
:target{ scroll-margin-top:1.5rem; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
/* =========================================================
   La ventana de suscripcion
   ========================================================= */
.ventana{
  width:min(430px, calc(100vw - 2.5rem));
  padding:clamp(1.6rem,4vw,2.2rem);
  border:0; border-radius:14px;
  background:var(--papel-alto);
  color:var(--tinta);
  box-shadow:0 24px 70px -20px rgba(26,23,18,.45);
}
.ventana::backdrop{ background:rgba(26,23,18,.55); }

/* La ventana no es el diario: es el sistema hablandole a la persona.
   La serif es para leer noticias; un aviso escrito en serif se lee
   como una nota vieja. Aca manda la misma letra que los botones. */
.ventana h2{
  font-family:var(--sans); font-weight:700;
  font-size:1.32rem; line-height:1.2; letter-spacing:-.015em;
  margin:0 0 .6rem;
}
.ventana p{
  margin:0 0 1.2rem;
  font-family:var(--sans);
  font-size:.9rem; line-height:1.55;
  color:var(--tinta-2);
}
/* La segunda linea, para quien ya estaba: mas chica, no compite. */
.ventana p.chiquito{
  font-family:var(--sans); font-size:.82rem; line-height:1.5;
  color:var(--tinta-3);
  margin:-.6rem 0 1.2rem;
}

.ventana .formVentana{ display:grid; gap:.6rem; }
.ventana .formVentana .boton{ width:100%; height:2.8rem; }
.ventana input[type="email"]{ background:var(--papel-hondo); }

.ventana .cerrar{ float:right; margin:-.4rem -.4rem 0 0; }
.ventana .cerrar button{
  width:2rem; height:2rem;
  font-size:1.3rem; line-height:1;
  color:var(--tinta-3);
  border-radius:8px;
}
.ventana .cerrar button:hover{ color:var(--tinta); background:rgba(26,23,18,.07); }

/* =========================================================
   Carteles, vacios y pie
   ========================================================= */
.cartel{
  margin:0 0 1.6rem;
  font-family:var(--sans); font-size:.9rem;
  color:var(--tinta-2);
}
.cartel.mal{ color:#9c3a29; }
.cartel.bien{ color:var(--acento); }

.vacio{
  margin:0;
  font-size:1.05rem; font-style:italic;
  color:var(--tinta-3);
}

.piePagina{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.5rem;
  margin-top:clamp(3rem,8vh,5rem);
  font-family:var(--sans); font-size:.64rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-3);
}
.piePagina .sep{ flex:1 1 auto; }
.piePagina a{ color:var(--tinta-3); text-decoration:none; }
.piePagina a:hover{ color:var(--acento); }

/* =========================================================
   Formularios
   ========================================================= */
input[type="email"]{
  width:100%; height:2.6rem; padding:0 .85rem;
  font-family:var(--sans); font-size:.9rem;
  color:var(--tinta);
  background:var(--papel-hondo);
  border:0; border-radius:9px;
  outline:0;
}
input[type="email"]:focus{ box-shadow:0 0 0 2px var(--acento); }
input::placeholder{ color:var(--tinta-3); }

.boton{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.7rem; padding:0 1.2rem;
  font-family:var(--sans); font-size:.88rem; font-weight:600;
  color:var(--papel); background:var(--tinta);
  border-radius:9px;
  text-decoration:none;
  transition:opacity .16s ease;
}
.boton:hover{ opacity:.88; }

/* =========================================================
   cuenta.php
   ========================================================= */
/* Acá la marca no tiene que gritar: la pantalla es un formulario.
   Y el pie va pegado abajo: en una pantalla que entra entera, dejarlo
   flotando en el medio hace parecer que falta contenido. */
body:has(.centro) .papel{
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding-bottom:1.4rem;
}
body:has(.centro) .centro{ flex:1 1 auto; width:100%; }
body:has(.centro) .piePagina{ margin-top:auto; }
body:has(.centro) .cabezal{ padding-top:clamp(1.2rem,3vh,2rem); }
body:has(.centro) .cabezal h1{ font-size:clamp(2rem,6vw,3.4rem); }

.centro{
  display:grid; justify-items:center;
  padding:clamp(1.2rem,4vh,2.4rem) 0 0;
}
.cuadro{
  width:100%; max-width:520px;
  display:grid; gap:.9rem;
}

/* La pantalla de avisos entra entera sin scrollear: lo que sos a la
   izquierda, lo que elegís a la derecha. En una sola columna quedaban
   dos pantallas de alto para tres decisiones. */
.cuadro.ancho{
  max-width:1000px;
  grid-template-columns:minmax(0,1fr);
  gap:1.6rem;
  align-items:start;
}
@media (min-width:860px){
  .cuadro.ancho{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(2.5rem,5vw,4.5rem);
  }
}
.cuadro.ancho .quienSos{ display:grid; gap:.7rem; align-content:start; }
.cuadro.ancho .quienSos h2{ font-size:1.9rem; }

.cuadro.ancho .ajustes{ display:grid; gap:.5rem; align-content:start; }
.cuadro.ancho .ajustes .rotulillo:first-child{ margin-top:0; }
.cuadro.ancho .ajustes .boton{ margin-top:.9rem; }

/* Los enlaces chicos van al pie de la columna izquierda, no debajo
   de todo: ahí abajo empujaban la página fuera de la pantalla. */
@media (min-width:860px){
  .cuadro.ancho .chicos{
    grid-column:1;
    grid-row:2;
    margin-top:0;
  }
  .cuadro.ancho .ajustes{ grid-column:2; grid-row:1 / span 2; }
}
.cuadro h2{
  font-family:var(--serif); font-weight:700;
  font-size:1.7rem; line-height:1.15; margin:0;
}
.cuadro p{ margin:0; color:var(--tinta-2); font-size:1rem; line-height:1.55; }
.cuadro .mail{ font-family:var(--sans); font-weight:600; color:var(--tinta); }

.rotulillo{
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-3); margin:.6rem 0 0;
}

/* Los interruptores de sección son los mismos botones que el resto del
   diario: apagado es el hueso hundido, prendido es la tinta. La casilla
   del navegador se esconde — el estado lo cuenta el botón entero, no un
   cuadradito de tres píxeles al costado. */
.opciones{ display:flex; flex-wrap:wrap; gap:.5rem; }

.opcion{
  display:inline-flex; align-items:center; gap:.5rem;
  height:2.5rem; padding:0 1rem;
  font-family:var(--sans); font-size:.9rem; font-weight:600;
  color:var(--tinta-2);
  background:var(--papel-hondo);
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  transition:background .16s ease, color .16s ease;
}
.opcion input{
  position:absolute;
  width:1px; height:1px;
  opacity:0; pointer-events:none;
}

/* El de una sola opción se marca con un punto redondo; el de varias,
   con el mismo círculo relleno. La forma no cambia: lo que cambia es
   cuántos pueden estar prendidos, y eso ya lo dice el propio grupo. */
.opciones + .rotulillo{ margin-top:1.1rem; }

/* La marca: un círculo vacío que se llena al prender. */
.opcion::before{
  content:"";
  width:.85rem; height:.85rem;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow:inset 0 0 0 2px currentColor;
  opacity:.45;
  transition:box-shadow .16s ease, opacity .16s ease;
}

.opcion:hover{ color:var(--tinta); }

.opcion:has(input:checked){
  background:var(--tinta);
  color:var(--papel);
}
.opcion:has(input:checked)::before{
  box-shadow:inset 0 0 0 .45rem currentColor;
  opacity:1;
}
.opcion:has(input:focus-visible){ outline:2px solid var(--acento); outline-offset:2px; }

/* Sin :has (navegadores viejos) queda la casilla, que igual funciona. */
@supports not selector(:has(*)){
  .opcion::before{ display:none; }
  .opcion input{ position:static; width:auto; height:auto; opacity:1; accent-color:var(--acento); }
}

.chicos{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  margin-top:1.4rem;
}
.chicos button{
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3);
  padding:0;
}
.chicos button:hover{ color:var(--tinta); }
.chicos button.riesgo:hover{ color:#9c3a29; }

/* =========================================================
   letras.php — probar tipografias
   ========================================================= */
.probador{ display:grid; gap:clamp(2.4rem,6vh,4rem); }
.muestra{ display:grid; gap:.7rem; max-width:62ch; }
.muestra .quien{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
}
.muestra .quien b{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-3);
}
.muestra .quien .puesta{
  font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--acento);
}
.muestra .quien form{ margin-left:auto; }
.muestra .quien button{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta);
  padding:0;
}
.muestra .quien button:hover{ color:var(--acento); }
.muestra .tit{
  font-weight:700; font-size:2.1rem; line-height:1.08;
  letter-spacing:-.015em; margin:0;
}
.muestra .baj{ margin:0; font-size:1.05rem; line-height:1.6; color:var(--tinta-2); }
.muestra .cor{ margin:0; font-size:.95rem; line-height:1.65; color:var(--tinta-2); }

/* =========================================================
   Pantallas chicas
   ========================================================= */
/* Sin lugar para la tercera columna, el sumario se va abajo de todo. */
@media (max-width:1319.98px){
  .titulares{ order:5; grid-column:1 / -1; margin-top:1rem; }
  .titulares ul{
    columns:2; column-gap:clamp(1.5rem,4vw,3rem);
  }
  .titulares li{ break-inside:avoid; }
}
/* =========================================================
   Celular: el diario se lee, el menu se guarda

   Arriba queda el titulo y las tres lineas. Todo lo demas —
   secciones, ediciones, suscribirse — vive en un cajon que se
   despliega sobre la pagina y se cierra al elegir algo.
   ========================================================= */
@media (max-width:1039.98px){

  /* Aca "News" vive en una barra clavada de 2.4rem, y el logo -que va
     aparte- tiene que quedar en su mismo eje: .7rem de tope mas medio
     renglon cae justo en el medio de la barra. El mismo numero esta en
     assets/estilo.css, para que el logo no se mueva ni un pixel al pasar
     de una pantalla a la otra. */
  :root{ --marca-y:.7rem; }

  /* En una pantalla de cinco pulgadas cada renglon que no es noticia
     es un renglon perdido: la cabecera se aprieta al minimo. */
  /* El titulo y las tres lineas quedan clavados arriba: el menu tiene
     que estar a mano en cualquier punto del diario, no solo al principio.
     El resto de la cabecera (fecha, clima, conteo) scrollea normal. */
  body{ padding-top:2.4rem; }

  .cabezal{ padding-top:0; }
  .cabezal .fila{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:.35rem .8rem;
  }

  /* Aca arriba "News" vive en una barra clavada al tope, asi que el logo
     entra en esa misma barra. Arranca en el mismo punto exacto que en la
     portada -mismo margen, misma altura, mismo cuerpo- y News queda a su
     derecha, en la misma linea. */
  .cabezal .marca{
    position:fixed; top:0; left:0; right:0; z-index:70;
    /* Los dos por su eje del medio, sobre la misma horizontal, y esa
       horizontal es el centro de la barra. La barra no mide mas que lo
       que ocupan. */
    display:flex; align-items:center; gap:.55rem;
    /* Alto declarado, y el mismo numero que el padding-top del body: si la
       barra mide mas de lo que se corre la pagina, la fecha queda debajo. */
    height:2.4rem;
    /* El logo esta clavado aparte, por encima de esta barra: se le deja
       su lugar libre a la izquierda para que News arranque a su derecha,
       en la misma linea, igual que antes. */
    padding:0 var(--margen-diario) 0
            calc(var(--marca-x) + var(--marca-ancho) + .55rem);
    background:var(--papel);
    box-shadow:0 0 0 0 rgba(26,23,18,0);
    transition:box-shadow .22s ease;
  }
  /* Arriba de todo la cabecera es parte del papel y no se nota. La
     sombra aparece recien cuando hay algo pasando por debajo. */
  body.scrolleado .cabezal .marca{ box-shadow:0 6px 18px -12px rgba(26,23,18,.55); }
  /* Con el cajon abierto tampoco: cabecera y cajon son una sola pieza. */
  body.menuAbierto .cabezal .marca{ box-shadow:none; }
  .cabezal h1{ font-size:1.75rem; line-height:1; }
  .cabezal .marca .hamburguesa{ margin-left:auto; align-self:center; }

  /* El cajon arranca debajo de la cabecera, y la cruz sobra: las tres
     lineas ya se convirtieron en una equis y siguen a la vista. */
  .cerrarMenu{ display:none; }

  .cabezal .dia{
    flex:1 1 100%;
    justify-items:start; text-align:left;
    padding-bottom:0; max-width:none;
    gap:0;
  }
  .cabezal .fecha{ font-size:.6rem; letter-spacing:.13em; }
  .cabezal .clima{ margin-left:.5rem; padding-left:.5rem; }
  .cabezal .avisarme{ display:none; }   /* el boton vive en el cajon */

  .imprenta{
    padding-top:.25rem;
    font-size:.6rem; letter-spacing:.13em;
    gap:.15rem 1rem;
    margin-bottom:1.4rem;
  }

  /* ---- las tres lineas ---- */
  .hamburguesa{
    display:grid; align-content:center; gap:5px;
    flex:0 0 auto;
    width:1.6rem; height:2.4rem;
  }
  .hamburguesa span{
    display:block; height:2px; width:100%;
    background:var(--tinta);
    border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
  }
  body.menuAbierto .hamburguesa span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menuAbierto .hamburguesa span:nth-child(2){ opacity:0; }
  body.menuAbierto .hamburguesa span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---- el cajon ----
     Entra deslizando desde la derecha y deja ver el diario atras: un
     panel que tapa toda la pantalla hace perder de vista donde estabas. */
  .velo{
    display:block;
    position:fixed; top:2.4rem; right:0; bottom:0; left:0; z-index:55;
    background:rgba(26,23,18,.42);
    opacity:0;
    transition:opacity .24s ease;
  }
  .velo[hidden]{ display:block; pointer-events:none; }
  body.menuAbierto .velo{ opacity:1; pointer-events:auto; }

  /* Arranca justo debajo de la cabecera y comparte su fondo: se lee
     como si la cabecera se hubiera estirado hacia abajo, no como un
     panel ajeno que se le monta encima. */
  .indice{
    display:block;
    position:fixed; top:2.4rem; right:0; bottom:0; left:auto;
    z-index:60;
    width:min(310px, 80vw);
    padding:1.4rem;
    background:var(--papel);
    box-shadow:-16px 10px 44px -22px rgba(26,23,18,.5);
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.22,.7,.28,1);
  }
  body.menuAbierto{ overflow:hidden; }
  body.menuAbierto .indice{ transform:translateX(0); }

  /* Dentro del cajon hay sitio de sobra: todo mas grande y tocable. */
  .indice .bloque + .bloque{ margin-top:1.9rem; }
  .indice h2{ font-size:.62rem; margin-bottom:.8rem; }

  .indice .lista-secciones{ gap:.1rem; }
  .indice .fila-seccion{ gap:.6rem; }
  .indice .lista-secciones a{
    padding:.55rem 0;
    font-size:1.05rem; font-weight:600;
  }
  .indice .mas{ width:1.9rem; height:1.9rem; font-size:1.2rem; }
  .indice .fila-seccion > .cuantas{ font-size:.85rem; min-width:1.7rem; }

  .indice .ediciones{ display:flex; flex-wrap:wrap; gap:.3rem 1.4rem; }
  .indice .ediciones a{ padding:.4rem 0; font-size:.95rem; }

  .suscribirMovil{ display:block; }
  .suscribirMovil .boton{ width:100%; height:3rem; font-size:.92rem; }

  /* ---- el resto de la pagina ---- */
  .cuerpo{ display:block; }
  .titulares{ display:none; }

  .apertura{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .nota{ grid-template-columns:minmax(0,1fr); gap:.8rem; }
  .nota .figura{ order:-1; }
  .nota .figura img{ aspect-ratio:16/9; }
  .titulares ul{ columns:1; }
  .apertura .figura img{ aspect-ratio:16/9; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* 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; }