/* =============================================================
   Kali Yoga — Reflexiones
   El espacio donde Luciana no vende: escribe.

   Paleta muestreada de la referencia que eligió:
     noche #1B1B23 · dorado #D09E3D · crema #F0EBE2

   Los dos temas se definen como valores del mismo juego de
   variables. Nada de acá pregunta "¿estamos en oscuro?": los
   componentes usan --texto, --fondo, --acento y no saben más.
   ============================================================= */

:root{
  --serif:"Newsreader",Georgia,serif;
  --sans:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* marca — fijos en los dos temas */
  --noche:#1B1B23;
  --dorado:#D09E3D;
  --crema:#F0EBE2;

  /* medidas */
  --medida:min(100% - 48px, 880px);
  /* UNA sola columna para todo el texto de la página: listado y
     entrada, título, bajada, foto y cuerpo. Todos terminan en el mismo
     borde derecho.

     Va en px y no en ch/em a propósito. Cada pieza tiene su propio
     cuerpo tipográfico —el título 32, la bajada 17.5, el cuerpo 20—
     así que una medida relativa daba un ancho distinto para cada una:
     eso era lo que se veía desprolijo. 640px son 58 caracteres del
     cuerpo de lectura, dentro de la medida cómoda.

     Lo único que cruza todo el ancho son las reglas horizontales. */
  --columna:640px;

  --rapido:140ms;
  --calmo:640ms;
  --curva:cubic-bezier(.22,.61,.36,1);

}

/* ---------- tema oscuro (el de partida) ---------- */
:root,
[data-tema="oscuro"]{
  --fondo:#1B1B23;
  --fondo-2:#22222B;
  --texto:#F0EBE2;
  --tenue:rgba(240,235,226,.64);
  --apenas:rgba(240,235,226,.42);
  --linea:rgba(240,235,226,.14);
  --linea-fuerte:rgba(240,235,226,.28);
  --acento:#D09E3D;          /* 7.0:1 sobre el fondo */
  --acento-hover:#E0B45C;
  color-scheme:dark;
}

/* ---------- tema claro ---------- */
[data-tema="claro"]{
  --fondo:#F8F5EF;
  --fondo-2:#F1ECE3;
  --texto:#1B1B23;
  --tenue:rgba(27,27,35,.66);
  --apenas:rgba(27,27,35,.58);
  --linea:rgba(27,27,35,.13);
  --linea-fuerte:rgba(27,27,35,.26);
  /* el dorado vivo da 2.2:1 sobre crema y no se lee.
     Mismo tono, bajado a L32%: 5.2:1. */
  --acento:#836220;
  --acento-hover:#5F470F;
  color-scheme:light;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--serif);font-weight:300;
  font-size:19px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
  transition:background var(--rapido) linear, color var(--rapido) linear;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}
::selection{background:var(--acento);color:var(--fondo)}

.envoltorio{width:var(--medida);margin-inline:auto}

/* ---------- etiquetas ---------- */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--acento);
}
.meta{
  font-family:var(--sans);font-size:12px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tenue);
}
.meta i{font-style:normal;color:var(--apenas);margin:0 .6em}

/* =============================================================
   ENCABEZADO — sin navegación: la marca y el interruptor
   ============================================================= */
.tope{padding:26px 0 0}
.tope__in{display:flex;align-items:center;justify-content:space-between;gap:24px}

.marca{display:flex;align-items:center;gap:15px}
/* Relación isotipo : caja de texto = 1.6 : 1 de alto.

   Medida sobre el logo original de referencia, la marca era 2.23:1 de
   alto pero 17.8:1 de MASA, porque es una mancha llena contra texto que
   es trama. Por eso puede bajar de 2.23 sin perder el mando; el empate
   de masas recién llega en 0.53:1.

   Con el nombre nuevo el bloque de texto perdió más de la mitad del
   ancho —"kali/yoga" contra "casa kali/estudio de yoga"— así que el
   conjunto se percibía más chico aunque el cuerpo no hubiera cambiado.
   La compensación es subir el cuerpo, que ahora se puede porque el
   nombre corto no ensancha el bloque.

   El texto va a 19px, el mismo cuerpo que el texto de lectura del
   sitio: le da al nombre el peso de algo que se lee, no de una etiqueta. */
.marca__iso{
  width:46px;height:73px;flex:none;
  color:var(--acento);
  transition:color var(--rapido) linear;
}
.marca__txt{font-family:var(--sans);font-size:19px;line-height:1.2;letter-spacing:-.01em}
.marca__txt b{display:block;font-weight:700;color:var(--texto)}
.marca__txt span{display:block;font-weight:300;color:var(--acento)}

/* Interruptor de tema.

   Empezó en 38x38, que pasaba sólo el piso de la WCAG 2.2 (24x24,
   criterio 2.5.8) y fallaba Apple HIG (44), WCAG AAA (44, 2.5.5) y
   Material (48).

   Ahora el círculo que se ve mide 44 y el área que responde al dedo
   mide 48: cumple los tres. El ::before con 2px de inset es lo que
   separa una cosa de la otra, y le da al dedo 2px de margen de error
   por lado sobre el borde visible. */
.tema{
  width:48px;height:48px;flex:none;
  display:grid;place-items:center;position:relative;
  background:none;border:0;
  color:var(--tenue);cursor:pointer;
  transition:color var(--rapido) linear;
  -webkit-tap-highlight-color:transparent;
}
.tema::before{
  content:"";position:absolute;inset:2px;
  border:1px solid var(--linea);border-radius:50%;
  transition:border-color var(--rapido) linear;
}
.tema:hover{color:var(--texto)}
.tema:hover::before{border-color:var(--linea-fuerte)}
.tema svg{width:19px;height:19px;display:block}
.tema .luna{display:none}
[data-tema="claro"] .tema .sol{display:none}
[data-tema="claro"] .tema .luna{display:block}

/* =============================================================
   PORTADA DE LA SECCIÓN
   ============================================================= */
/* El aire de arriba se achica en pantalla angosta: 84px fijos empujaban
   el titular demasiado abajo en un teléfono. */
.intro{padding:clamp(52px,9vw,84px) 0 0}
/* El titular y la bajada llevan medidas distintas: antes la caja de la
   intro estaba capada a 36ch y el párrafo heredaba el ancho del
   titular, así que se partía en tres renglones cortos. */
.intro h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,8vw,82px);line-height:1;letter-spacing:-.03em;
  margin:0 0 24px;max-width:12ch;
}
.intro p{color:var(--tenue);font-size:20px;line-height:1.6;max-width:var(--columna)}

/* =============================================================
   LISTADO

   Algunas entradas van a tener imagen y otras no. La solución no es
   una miniatura al costado: dejaría un hueco vacío en las filas sin
   foto y rompería la columna. Acá la imagen entra DENTRO de la
   columna de texto, debajo de la bajada, con el mismo ancho. Las
   filas sin foto simplemente son más cortas. La columna de fechas y
   las reglas no se mueven nunca, así que el ritmo se sostiene con
   cualquier mezcla.
   ============================================================= */
/* 48px separan la intro del listado. Antes eran 72, pero no estaban
   elegidos: salían de sumar el padding de abajo de .intro (20) con el
   de arriba de .listado (52). Contra los 24px que separan el titular de
   la bajada, ese hueco triplicaba y cortaba la lectura. */
.listado{padding:48px 0 0}
.nota{
  display:block;padding:34px 0;
  border-top:1px solid var(--linea);
  transition:border-color var(--rapido) linear;
}
.nota:last-child{border-bottom:1px solid var(--linea)}
/* Una sola columna en todos los anchos: la fecha va arriba del
   título, no en una columna aparte. La regla horizontal sí cruza todo
   el ancho — es lo único que marca el compás. */
.nota__in{max-width:var(--columna)}
.nota__col > .meta{display:block;margin-bottom:10px}

.nota h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.4vw,32px);line-height:1.2;letter-spacing:-.018em;
  transition:color var(--rapido) linear;
}
.nota p{
  color:var(--tenue);font-size:17.5px;line-height:1.6;
  margin-top:9px;max-width:var(--columna);
}
.nota:hover h2{color:var(--acento)}

.nota__foto{
  margin-top:22px;max-width:var(--columna);
  aspect-ratio:3/2;overflow:hidden;background:var(--fondo-2);
}
.nota__foto img{
  width:100%;height:100%;object-fit:cover;
  opacity:.92;transition:opacity var(--rapido) linear;
}
.nota:hover .nota__foto img{opacity:1}

/* =============================================================
   ENTRADA
   ============================================================= */
.entrada{padding:58px 0 0;display:none}
.volver{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:52px;
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tenue);
  transition:color var(--rapido) linear;
}
.volver:hover{color:var(--acento)}
.volver svg{width:15px;height:15px}

.entrada__cabeza{max-width:var(--columna);margin-bottom:44px}
.entrada__cabeza h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,6vw,58px);line-height:1.08;letter-spacing:-.028em;
  margin:16px 0 18px;
}
.bajada{
  font-size:22px;line-height:1.55;color:var(--tenue);
  font-style:italic;
}
.portada{
  max-width:var(--columna);aspect-ratio:16/9;overflow:hidden;
  background:var(--fondo-2);margin-bottom:52px;
}
.portada img{width:100%;height:100%;object-fit:cover}

.cuerpo{max-width:var(--columna);font-size:20px;line-height:1.75}
.cuerpo p{margin-bottom:1.35em}
.cuerpo h2{
  font-family:var(--serif);font-weight:400;font-size:29px;
  line-height:1.25;letter-spacing:-.016em;margin:2.2em 0 .7em;
}
.cuerpo h3{
  font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;
  margin:2.4em 0 .9em;color:var(--acento);
}
.cuerpo ul,.cuerpo ol{margin:0 0 1.35em;padding-left:1.2em}
.cuerpo li{margin-bottom:.5em;padding-left:.25em}
.cuerpo li::marker{color:var(--acento)}
.cuerpo blockquote{
  border-left:2px solid var(--acento);padding-left:26px;margin:2em 0;
  font-style:italic;font-size:23px;line-height:1.5;color:var(--texto);
}
.cuerpo figure{margin:2.4em 0}
.cuerpo figcaption{
  font-family:var(--sans);font-size:12.5px;color:var(--tenue);
  margin-top:10px;letter-spacing:.02em;
}
.cuerpo hr{border:0;border-top:1px solid var(--linea);margin:2.8em 0}

/* ---------- la firma ----------
   La regla cruza TODO el ancho, no la medida de lectura: cortada a
   los 64ch quedaba a mitad de camino y parecía un error. Es el mismo
   gesto que separa las entradas del listado. */
.firma{
  margin:72px 0 0;padding-top:30px;
  border-top:1px solid var(--linea);
}
.firma__txt{font-family:var(--sans);line-height:1.5}
.firma__txt b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:21px;letter-spacing:-.01em;
}
.firma__txt span{
  display:block;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);margin-top:5px;
}
.firma__txt span + span{color:var(--apenas);margin-top:2px}

/* =============================================================
   PIE
   ============================================================= */
.pie{
  margin-top:auto;padding:70px 0 46px;
}
/* Sin regla propia: el listado ya cierra con una, y en la entrada
   cierra la de la firma. Dos líneas a 70px de distancia se repetían. */
.pie__in{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-family:var(--sans);font-size:12px;color:var(--tenue);
}

/* =============================================================
   ESTADOS
   ============================================================= */
.cargando{padding:64px 0}
.cargando p{
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);
}
.cargando .barra{height:1px;background:var(--linea);position:relative;overflow:hidden;margin-top:22px}
.cargando .barra::after{
  content:"";position:absolute;inset:0;width:28%;background:var(--acento);
  animation:corre 1.4s var(--curva) infinite;
}
@keyframes corre{0%{transform:translateX(-100%)}100%{transform:translateX(420%)}}
.vacio{padding:72px 0;max-width:44ch}
.vacio h2{font-family:var(--serif);font-weight:300;font-size:32px;letter-spacing:-.02em;margin-bottom:12px}
.vacio p{color:var(--tenue);font-size:18px}

.entra{opacity:0;transform:translateY(10px);animation:sube var(--calmo) var(--curva) forwards}
@keyframes sube{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .entra{opacity:1;transform:none}
}