/* ============================================================
   Sonanta — Blog

   Hereda todos los tokens de ../styles.css. Aquí solo vive lo que
   la landing no necesita: el índice, la prosa del artículo y las
   figuras animadas.

   Reglas madre (las mismas de la landing):
   · Rejilla de 8 pt. Nada se coloca "a ojo".
   · Lienzo blanco. El único color saturado lo pone el producto.
   · El movimiento explica algo o no existe.
   · La onda de sonido es la firma de la marca.

   Las figuras animadas arrancan cuando entran en pantalla, no al
   cargar: una animación que terminó antes de que la vieras no
   explicó nada. Sin JavaScript corren desde el primer pintado, que
   es peor que verlas pero mucho mejor que no verlas.
   ============================================================ */

/* --- Índice --------------------------------------------------- */

.blog-hero {
  padding-block: clamp(56px, 8vw, 104px) clamp(32px, 4vw, 48px);
}
.blog-hero .wrap { max-width: 820px; }
.blog-hero h1 { font-size: clamp(38px, 6vw, 64px); }
.blog-hero .lead { max-width: 46ch; margin-top: var(--s3); }

.backhome {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: var(--t-small);
  font-weight: 500;
  margin-bottom: var(--s4);
  transition: color var(--fast) var(--ease);
}
.backhome:hover { color: var(--ink); }

.post-list {
  max-width: 820px;
  margin-inline: auto;
  padding-block: 0 var(--section-y);
  display: grid;
  gap: var(--s2);
}

.post-card {
  display: block;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--bg);
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform 0.4s var(--spring);
}
.post-card:hover {
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 14px 34px -18px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}
.post-card .eyebrow { margin-bottom: var(--s1); }
.post-card h2 {
  font-size: clamp(23px, 2.4vw, 29px);
  letter-spacing: -0.02em;
  line-height: 1.16;
}
.post-card p {
  color: var(--ink-2);
  margin-top: 10px;
  line-height: 1.55;
  max-width: 62ch;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--s3);
  color: var(--ink-2);
  font-size: var(--t-micro);
}
.post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.post-card .more { color: var(--coral-text); font-weight: 600; }

.blog-empty {
  padding: clamp(40px, 6vw, 64px);
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  text-align: center;
  color: var(--ink-2);
}

/* --- Artículo ------------------------------------------------- */

.post-hero { padding-block: clamp(48px, 7vw, 88px) 0; }
.post-hero .wrap { max-width: var(--maxw-text); }
.post-hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  letter-spacing: -0.028em;
  line-height: 1.05;
}
.post-hero .dek {
  font-size: var(--t-sub);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--ink-2);
  margin-top: var(--s3);
  max-width: 42ch;
  text-wrap: pretty;
}
.post-hero .post-meta { margin-top: var(--s4); }

/* El artículo cierra con su propio aire, no con el hueco de una sección:
   lo que sigue es la banda del anuncio, que ya trae el suyo. */
.post {
  padding-block: clamp(32px, 4vw, 48px) 0;
}
.post .wrap { max-width: var(--maxw-text); }

.post p,
.post li {
  color: var(--ink-2);
  line-height: 1.68;
  font-size: var(--t-body);
}
.post > .wrap > p { margin-bottom: var(--s3); }
.post .intro { font-size: var(--t-sub); line-height: 1.55; }

.post h2 {
  font-size: clamp(25px, 2.7vw, 33px);
  letter-spacing: -0.022em;
  margin: clamp(48px, 5vw, 68px) 0 var(--s2);
  color: var(--ink);
}
.post h3 {
  font-size: var(--t-sub);
  margin: var(--s5) 0 10px;
  color: var(--ink);
}
.post strong { color: var(--ink); font-weight: 600; }
/* Los enlaces de la prosa van subrayados; los controles —el botón del
   cierre, el «todas las entradas», las tarjetas de relacionados— no, o
   dejan de leerse como controles. */
.post a:not(.btn):not(.btn-text):not(.post-card):not(.related-item) {
  color: var(--coral-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(194, 66, 45, 0.35);
  transition: text-decoration-color var(--fast) var(--ease);
}
.post a:not(.btn):not(.btn-text):not(.post-card):not(.related-item):hover {
  text-decoration-color: currentColor;
}

.post ul, .post ol { padding-left: 22px; margin-bottom: var(--s3); }
.post ul { list-style: disc; }
.post ol { list-style: decimal; }
.post li { margin-bottom: 10px; }
.post li::marker { color: var(--ink-2); }

.post blockquote {
  margin: clamp(36px, 4vw, 52px) 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--coral);
  font-size: var(--t-head);
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}
.post blockquote cite {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  font-style: normal;
  font-weight: 400;
  color: var(--ink-2);
}

/* Lo que se le dice a Sonanta. Cursiva no: comillas y voz propia. */
.post .said {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--coral-wash);
  color: var(--coral-text);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.post p > .said { margin-block: 2px; }

.post .key {
  margin: clamp(36px, 4vw, 52px) 0;
  padding: var(--s3);
  background: var(--bg-2);
  border-radius: var(--r-md);
}
.post .key p { margin: 0; font-size: var(--t-small); }
.post .key p + p { margin-top: 10px; }

.post code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--ink);
}

.post hr {
  border: 0;
  height: 1px;
  background: var(--line-2);
  margin: clamp(48px, 6vw, 72px) 0;
}

/* --- Lo que va después del artículo --------------------------- */

/* El anuncio. Vive fuera de <article> y se ve fuera: banda de ancho
   completo, otro fondo y una etiqueta que lo dice. Quien viene leyendo
   tiene que notar en el primer vistazo que el texto ya terminó —si el
   anuncio se disfraza de artículo, el artículo pierde credibilidad. */
.post-promo {
  margin-top: clamp(64px, 8vw, 104px);
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
}
.post-cta { max-width: var(--maxw-text); margin-inline: auto; text-align: center; }
.post-cta .promo-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s2);
}
.post-cta h2 { margin: 0; font-size: var(--t-title); }
.post-cta .lead { margin-inline: auto; margin-top: var(--s2); }
.post-cta .cta-row { justify-content: center; margin-top: var(--s4); }
.post-cta .micro { margin-top: var(--s2); justify-content: center; }

.post-next {
  padding-block: clamp(40px, 5vw, 64px) var(--section-y);
}
.post-next .wrap { max-width: var(--maxw-text); display: grid; gap: var(--s2); }
.post-next .eyebrow { margin-bottom: 0; }
.post-next .related { display: grid; gap: 10px; }
.post-next .related a {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
  text-decoration: none;
}
.post-next .related b {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.014em;
  transition: color var(--fast) var(--ease);
}
.post-next .related a:hover b { color: var(--coral-text); }
.post-next .related span { font-size: var(--t-small); color: var(--ink-2); }

/* Preguntas al final del artículo. Existen porque hay gente —y máquinas—
   que llega buscando una respuesta suelta, no un ensayo. Cada respuesta
   se sostiene sin haber leído lo de arriba. */
.post-faq { margin-top: clamp(48px, 6vw, 72px); }
.post-faq h2 { margin-top: 0; }
.post-faq dl { display: grid; gap: var(--s3); margin-top: var(--s3); }
.post-faq dt {
  font-size: var(--t-head);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.24;
  margin-bottom: 8px;
}
.post-faq dd { margin: 0; color: var(--ink-2); line-height: 1.68; }

/* --- Figuras animadas ----------------------------------------- */

/* Las figuras pueden salirse del ancho de lectura: una animación
   apretada a 720 px no se lee. Nunca rebasan el contenedor. */
/* El ancho de lectura son 720 px, pero una animación apretada ahí no se
   lee. La figura crece hasta 920 px y se recentra con un margen negativo
   calculado contra el ancho real del contenedor, nunca contra el
   viewport: así nunca provoca scroll horizontal. */
.fig {
  --fig-w: min(920px, calc(100vw - 40px));
  margin: clamp(40px, 5vw, 64px) 0;
  width: max(100%, var(--fig-w));
  margin-inline: min(0px, calc((100% - var(--fig-w)) / 2));
}

.fig .stage {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
}
.fig .stage.plain { background: var(--bg); border: 1px solid var(--line-2); }
.fig .stage.warm { background: var(--coral-wash); }

/* Dos piezas lado a lado —un anillo y su desglose, un teléfono y su
   explicación— que se apilan en cuanto no caben. Escribir la rejilla a
   mano en cada artículo es la forma más rápida de desbordar el móvil. */
.fig .stage.split {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 700px) {
  .fig .stage.split { grid-template-columns: minmax(0, 1fr); }
}

.fig figcaption {
  margin-top: var(--s2);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}

/* El interruptor. Todo lo animado dentro de una figura espera a que
   la figura entre en pantalla; sin JavaScript corre desde el inicio. */
.js .fig .anim { animation-play-state: paused; }
.js .fig.in .anim { animation-play-state: running; }

/* Movimiento reducido: la figura sigue contando lo mismo, quieta.
   Se congela en el fotograma final, que es el que lleva el mensaje. */
@media (prefers-reduced-motion: reduce) {
  .fig .anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fig .a-bar i { transform: scaleX(1) !important; }
  .fig .a-type { width: 100% !important; border-right-color: transparent !important; }
  .fig .a-ring circle.val { stroke-dashoffset: var(--rest) !important; }
}

/* --- Primitivas ----------------------------------------------- */

/* 1. La onda de marca. El icono de Sonanta, vivo. */
.a-wave {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
}
.a-wave i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 999px;
  background: var(--coral);
  transform: scaleY(var(--h, 0.4));
  transform-origin: center;
  animation: a-pulse 1.05s var(--ease) infinite alternate;
}
@keyframes a-pulse {
  from { transform: scaleY(calc(var(--h, 0.4) * 0.32)); }
  to   { transform: scaleY(var(--h, 0.4)); }
}

/* 2. Barras que crecen. Para comparar cantidades o categorías. */
.a-bars { display: grid; gap: var(--s2); }
.a-bars .row { display: grid; gap: 7px; }
.a-bars .lb {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.a-bars .lb b { color: var(--ink); font-weight: 600; }
.a-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.a-bar i {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  border-radius: 999px;
  background: var(--c, var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  animation: a-grow 1s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.14s);
}
@keyframes a-grow { to { transform: scaleX(1); } }

/* 3. Aparición en cascada. Listas, fichas, pasos: entran en orden. */
.a-in {
  opacity: 0;
  transform: translateY(10px);
  animation: a-rise 0.62s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.18s);
}
@keyframes a-rise { to { opacity: 1; transform: none; } }

/* 4. Dictado. La frase se escribe sola, palabra a palabra. */
.a-said {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.32em;
  font-size: var(--t-head);
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.3;
}
.a-said span {
  opacity: 0.16;
  animation: a-word 0.4s var(--ease) forwards;
  animation-delay: calc(var(--n, 0) * 0.19s);
}
.a-said b { font-weight: 600; }
@keyframes a-word { to { opacity: 1; } }

/* 5. Máquina de escribir. Una sola línea, ancho animado. */
.a-type {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 2px solid var(--coral);
  animation: a-typing 2.4s steps(var(--chars, 30)) forwards,
             a-caret 0.75s step-end infinite;
}
@keyframes a-typing { to { width: 100%; } }
@keyframes a-caret { 50% { border-right-color: transparent; } }

/* 6. Anillo. Una proporción que se dibuja: "el 38% se te va en X". */
.a-ring { display: block; width: 168px; height: 168px; margin-inline: auto; }
.a-ring circle { fill: none; stroke-width: 12; }
.a-ring circle.track { stroke: rgba(0, 0, 0, 0.07); }
.a-ring circle.val {
  stroke: var(--c, var(--coral));
  stroke-linecap: round;
  stroke-dasharray: var(--len, 440);
  stroke-dashoffset: var(--len, 440);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: a-draw 1.15s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.16s);
}
@keyframes a-draw { to { stroke-dashoffset: var(--rest, 132); } }

/* 7. Carrera. Dos formas de hacer lo mismo, a escala de tiempo real.
   Es la figura que mejor cuenta la promesa del producto. */
.a-race { display: grid; gap: var(--s3); }
.a-race .lane { display: grid; gap: 8px; }
.a-race .who {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.a-race .who b { color: var(--ink); font-weight: 600; }
.a-race .track {
  position: relative;
  height: 34px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.a-race .fill {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: var(--r-sm);
  background: var(--c, var(--coral));
  transform: scaleX(0);
  transform-origin: left;
  animation: a-grow var(--t, 5s) linear infinite;
}
.a-race .fill.slow { background: var(--ink-2); opacity: 0.35; }
/* El sello va debajo de la pista, no encima: dentro lo tapaba el relleno
   justo cuando la barra terminaba —que es el momento que hay que leer—. */
.a-race .stamp {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-2);
}

/* 8. Pasos que se encienden. Un proceso, uno a la vez. */
.a-steps { display: grid; gap: 2px; }
.a-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s2);
  align-items: start;
  padding: 14px 0;
  margin: 0;
  opacity: 0.32;
  animation: a-light 0.5s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.5s);
}
.a-steps .k {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--coral-wash);
  color: var(--coral-text);
  font-size: var(--t-micro);
  font-weight: 600;
}
.a-steps b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.a-steps span { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
@keyframes a-light { to { opacity: 1; } }

/* 9. Teléfono de bolsillo. Para enseñar una pantalla dentro del texto. */
.a-device {
  width: min(232px, 62vw);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  border-radius: 34px;
  padding: 9px;
  background: #0f0f11;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 50px -22px rgba(0, 0, 0, 0.5);
}
.a-device .screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 14px 14px;
}
.a-device .screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 15px;
  border-radius: 999px;
  background: #0f0f11;
}

/* Fila de gasto: el ladrillo con el que se arma casi cualquier pantalla. */
.a-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: center;
}
.a-row .ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--bg-3);
}
.a-row .nm { display: grid; line-height: 1.25; min-width: 0; }
.a-row .nm b { font-size: 12px; font-weight: 600; color: var(--ink); }
.a-row .nm span { font-size: 10px; color: var(--ink-2); }
.a-row .va { font-size: 12px; font-weight: 600; color: var(--ink); }

/* 10. Marca de guardado. El punto final de casi toda historia. */
.a-ok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(52, 152, 92, 0.12);
  color: #2f7f52;
  font-size: var(--t-small);
  font-weight: 600;
}
.a-ok svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: a-check 0.5s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.18s);
}
@keyframes a-check { to { stroke-dashoffset: 0; } }

/* --- Suscripción al feed -------------------------------------- */

.feed-note {
  max-width: 820px;
  margin-inline: auto;
  padding-bottom: var(--section-y);
  color: var(--ink-2);
  font-size: var(--t-small);
  text-align: center;
}
.feed-note a { color: var(--coral-text); text-decoration: underline; text-underline-offset: 3px; }

/* --- Móvil ---------------------------------------------------- */

@media (max-width: 620px) {
  .fig .stage { padding: var(--s3); border-radius: var(--r-card); }
  .a-said { font-size: var(--t-sub); }
  .post blockquote { font-size: var(--t-sub); }
}