/* ============================================================
   NAWAL — Blog
   Se carga DESPUES de nawal.css, que ya trae la paleta, las
   fuentes, la cabecera, el pie, los botones y la tarjeta de
   articulo (.post-card, compartida con las landings). Aqui solo
   va lo propio del blog: el listado por categorias y la lectura.
   ============================================================ */

/* ---- Cabecera del listado y del articulo ---- */
.blog-head{max-width:var(--maxw);margin:0 auto;padding:72px var(--pad) 0}
.blog-head .h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(38px,6vw,64px);line-height:1.05;letter-spacing:-.6px;color:var(--text);text-wrap:balance;margin-top:14px}
.blog-head .lede{margin-top:20px}

/* ---- Listado agrupado por terapia ----
   Cada articulo pertenece a una de las seis terapias y se lista bajo ella:
   asi quien llega buscando "reiki" encuentra junto todo lo de reiki, y cada
   grupo enlaza a su landing. Las secciones las pinta herramientas/blog.py a
   partir del "mentions" del JSON-LD de cada articulo. */
.posts{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad) 110px;display:flex;flex-direction:column;gap:72px}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.cat-head h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(26px,3.2vw,34px);line-height:1.1;color:var(--text);letter-spacing:-.3px}
.cat-link{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-size:14px;color:var(--primary);text-decoration:none;transition:gap .25s var(--ease)}
.cat-link:hover{gap:11px;color:var(--primary-strong)}
.cat-link svg{flex-shrink:0}

/* ---- Articulo ---- */
.article{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 40px}
/* Sin barra lateral (/privacidad) la pagina es una sola columna de
   lectura: se estrecha el contenedor para que quede centrada en pantalla
   en vez de pegada a la izquierda con un tercio vacio a la derecha. */
.article:not(:has(.article-aside)){max-width:880px}
.article-head{max-width:760px}
.article-head h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.5px;color:var(--text);text-wrap:balance;margin-top:16px}
.article-sub{font-size:18.5px;line-height:1.7;color:var(--text-muted);font-weight:300;margin-top:22px;max-width:62ch}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-faint)}
.article-meta b{font-weight:500;color:var(--text-muted)}
.article-meta span[aria-hidden]{opacity:.5}

/* ---- Imagen destacada ----
   A todo el ancho del contenedor del articulo, no de la columna de
   texto: es lo primero que rompe la sensacion de "puro texto". De aqui
   sale tambien la portada de la tarjeta en el listado, asi que ningun
   articulo puede publicarse sin ella. */
.article-hero{margin-top:36px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--surface)}
.article-hero img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.article-hero figcaption{margin-top:12px;font-size:13px;color:var(--text-faint)}

/* ---- Cuerpo en dos columnas ----
   Sin esto el texto queda pegado a la izquierda y en pantallas anchas
   sobra medio monitor de espacio en blanco. La columna lateral no es
   relleno: trae el indice siempre a la vista y un cierre hacia la
   pagina del servicio, asi el ancho extra tambien convierte. */
.article-body{margin-top:8px}
.article-aside{display:none}

@media(min-width:1080px){
  /* Solo cuando hay barra lateral. /privacidad usa .article-body sin
     .article-aside, y la rejilla le reservaba 300px+64px para una columna
     que no existe: el texto quedaba estrujado a la izquierda con un
     tercio de la pagina vacio a la derecha. */
  .article-body:has(.article-aside){display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:64px;align-items:start}
  .article-aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:104px}
  /* El indice plegable de mas abajo ya tiene equivalente fijo aqui al
     lado: mostrar los dos duplicaria la navegacion en pantalla. */
  .toc-mobile{display:none}
}

.aside-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 24px 22px}
.aside-toc p{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--primary);font-weight:600}
.aside-toc ol{margin-top:16px;padding-left:20px;font-size:14px;line-height:1.5}
.aside-toc li{margin-top:9px}
.aside-toc li::marker{color:var(--text-faint);font-variant-numeric:tabular-nums}
.aside-toc a{color:var(--text-muted);text-decoration:none}
.aside-toc a:hover{color:var(--primary)}

.aside-card{padding:26px 24px;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-lg)}
.aside-card p{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.4;color:var(--text);font-style:italic;margin:0 0 18px}
.aside-card .btn{width:100%;font-size:14.5px;padding:12px 16px}

/* ---- Cuerpo del articulo ----
   Medida de ~68ch: pasado eso el ojo pierde el renglon al volver.

   Aqui dentro solo hay parrafos, subtitulos y listas simples. Los
   componentes decorativos que hubo antes -tarjetas de beneficio con
   icono, riel numerado de pasos, cita enmarcada, caja de aviso- se
   quitaron: fragmentaban la lectura y el riel ademas nunca tuvo estilos
   propios, asi que la numeracion salia rota. Ver seccion 5 del CLAUDE.md. */
.prose{max-width:68ch;margin-top:52px;font-size:17px;line-height:1.78;color:var(--text-muted);font-weight:300}
.prose>*+*{margin-top:24px}
.prose h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(27px,3.4vw,36px);line-height:1.15;color:var(--text);letter-spacing:-.3px;margin-top:52px;text-wrap:balance}
.prose h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:23px;line-height:1.2;color:var(--text);margin-top:36px}
.prose strong{font-weight:500;color:var(--text)}
/* :not(.btn) es imprescindible: sin el, este color pisa el del boton
   -gana por especificidad a .btn-primary- y el texto queda morado
   sobre fondo morado, o sea invisible. */
.prose a:not(.btn){color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--primary) 40%,transparent);transition:text-decoration-color .25s var(--ease)}
.prose a:not(.btn):hover{text-decoration-color:var(--primary)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-top:10px}
.prose li::marker{color:var(--primary)}
.prose blockquote{border-left:2px solid var(--primary);padding:4px 0 4px 22px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;line-height:1.5;color:var(--text)}

/* ---- Indice de contenidos ----
   <details> nativo: en movil arranca plegado y no empuja el texto. */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 26px}
.toc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--primary);font-weight:600}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary svg{flex-shrink:0;transition:transform .3s var(--ease)}
.toc[open]>summary svg{transform:rotate(180deg)}
.toc ol{margin-top:18px;padding-left:20px;font-size:15px;line-height:1.5}
.toc li{margin-top:9px}
.toc li::marker{color:var(--text-faint);font-variant-numeric:tabular-nums}
.toc a{color:var(--text-muted);text-decoration:none}
.toc a:hover{color:var(--primary)}

/* Compensa la cabecera flotante al saltar desde el indice: sin esto
   el titulo de destino queda debajo de la barra. */
.prose h2[id],.prose h3[id]{scroll-margin-top:104px}

/* ---- Llamada a la accion dentro del texto ----
   A media lectura, cuando el interes esta alto y falta mucho para
   el final de la pagina. Es el unico bloque destacado que se permite
   dentro del texto, porque no fragmenta la lectura: la cierra. */
.inline-cta{margin:44px 0;padding:30px 30px 28px;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-lg)}
.inline-cta p{font-family:'Cormorant Garamond',serif;font-size:23px;line-height:1.35;color:var(--text);font-style:italic;margin:0 0 20px}
.inline-cta .btn{font-size:15.5px}

/* ---- Firma de la autora ---- */
.autora{display:flex;align-items:center;gap:16px;max-width:68ch;margin-top:56px;padding-top:30px;border-top:1px solid var(--border)}
.autora .avatar{width:52px;height:52px;font-size:21px}
.autora div{font-size:14.5px;line-height:1.6;color:var(--text-muted);font-weight:300}
.autora b{display:block;font-weight:500;font-size:15.5px;color:var(--text)}

/* ---- Responsive ----
   La grilla de tarjetas responde desde nawal.css, que es donde vive. */
@media(max-width:980px){
  .blog-head{padding-top:56px}
  .posts{padding-bottom:92px;gap:60px}
  .prose{margin-top:42px}
  /* Hueco para la barra fija de reservar */
  body{padding-bottom:81px}
}

@media(max-width:560px){
  .prose{font-size:16.5px}
  .posts{gap:52px}
  .cat-head{flex-direction:column;align-items:flex-start;gap:10px}
  .inline-cta{padding:26px 22px 24px}
  .inline-cta .btn{width:100%}
  .autora{gap:14px}
  .article-hero{aspect-ratio:4/3}
}

@media(prefers-reduced-motion:reduce){
  .toc>summary svg,.cat-link{transition:none}
}