/* ==========================================================================
   Anny Gómez — Blog · screen.css
   Fase 1 (cimientos): reset, variables, header/nav/menú móvil, footer,
   modal, formulario de suscripción, tarjeta de artículo, utilidades de
   accesibilidad. Fase 2/3 construyen home/post/tag/page sobre esta base —
   ver CONVENCIONES.md antes de agregar variables o clases nuevas.

   Decisión de arquitectura CSS (reemplaza container queries del diseño
   original): el diseño usa clamp(min, N cqi, max) sobre un contenedor con
   container-type:inline-size. Acá se usa clamp(min, N vw, max) — incluso
   coeficiente, cambiando cqi por vw. Como el contenedor del diseño era el
   frame completo (ancho = viewport en los mockups de 390/1280px), N vw
   reproduce el mismo valor exacto en esos dos anchos verificados, sin
   necesitar container queries. Dos breakpoints reales: mobile-first (sin
   media query) para ≤767px, y un único quiebre estructural en 1280px para
   escritorio (nav completa, ítems que solo existen en escritorio). La zona
   intermedia (768–1279px) hereda el tratamiento móvil a propósito — no fue
   diseñada ni verificada visualmente, y el patrón móvil es seguro/funcional
   ahí. Ver CONVENCIONES.md, sección "Breakpoints", para más detalle.
   ========================================================================== */

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root {
  /* -- Color: base / texto / fondo --------------------------------------- */
  --color-fondo: #F5F1EA;
  --color-texto-principal: #2F2A26;
  --color-texto-cuerpo: #4A423B;
  --color-texto-secundario: #5C544C;
  --color-acento: #905839;
  --color-acento-hover: #6E4128;
  --color-borde: #E2D8CC;
  --color-borde-chip: #D9CEC3;
  --color-linea-firma: #C9B9A8;
  --color-blanco: #FFFFFF;

  /* -- Color: marca / superficies ----------------------------------------- */
  --color-salvia: #9DAA95;
  --color-beige: #EFE1D6;
  --color-beige-foto: #E3CDBA;
  --color-beige-oscuro: #E9E1D5;
  --color-verde-palido: #DCE2D6;
  --color-oscuro: #2F2A26;

  /* -- Color: validación de formulario ------------------------------------- */
  --color-error: #9E3A26;
  --color-borde-input: #8A7F73;

  /* -- Color: los 4 pilares con color propio del diseño original ---------- */
  --color-pilar-crecimiento: #EFE1D6;
  --color-pilar-habitos: #DCE2D6;
  --color-pilar-ingresos-online: #FFFFFF;
  --color-pilar-fe: #E9E1D5;

  /*
   * Color: las 4 etiquetas que el diseño NUNCA colorea (solo existían como
   * chips neutros — ver design-spec.md, "Colores por pilar / etiqueta").
   * Elegidos en Fase 1 por encargo explícito, reutilizando tonos que YA
   * existen en el archivo de diseño como paradas de los gradientes
   * decorativos de miniaturas (no son colores inventados de cero, son
   * hex literales que ya estaban en la paleta, solo sin uso asignado):
   *   --color-pilar-proposito:      #EBDCC9  (crema cálido, hermano más
   *                                  dorado de "Crecimiento" — transmite
   *                                  claridad/dirección)
   *   --color-pilar-familia:        #D6C7C0  (taupe rosado suave — calidez
   *                                  hogareña, distinto de los 4 tonos ya
   *                                  asignados)
   *   --color-pilar-organizacion:   #DCD3C2  (arena/caqui neutro — orden y
   *                                  sistemas, sin competir con los otros)
   *   --color-pilar-redes-sociales: #C3CDBB  (salvia claro — familia verde
   *                                  distinta de "Hábitos" #DCE2D6, con
   *                                  energía más "social/activa")
   * Los 4 pasan holgadamente AA para texto #2F2A26 encima (luminancia
   * similar o mayor a los 4 tonos de pilar ya aprobados en el diseño).
   * Hoy en Fase 1 NINGÚN partial los usa todavía (menu-movil.hbs mantiene
   * las "Más temas" con el chip neutro del diseño, fiel al mockup) — están
   * acá listos para que Fase 2/3 los use donde haga falta (p. ej. si algún
   * día se colorea un badge por categoría). No agregar variables de color
   * nuevas para estas 4 etiquetas: ya existen estas.
   */
  --color-pilar-proposito: #EBDCC9;
  --color-pilar-familia: #D6C7C0;
  --color-pilar-organizacion: #DCD3C2;
  --color-pilar-redes-sociales: #C3CDBB;

  /* -- Tipografía: familias ------------------------------------------------ */
  --fuente-titulos: 'Playfair Display', Georgia, serif;
  --fuente-ui: 'Jost', Arial, sans-serif;
  --fuente-firma: 'Alex Brush', 'Segoe Script', cursive;

  /* -- Tipografía: tamaños fluidos (clamp con vw, ver nota de arriba) ------ */
  --fs-h1-hero: clamp(40px, 6vw, 76px);
  --fs-h1-articulo: clamp(34px, 4.8vw, 58px);
  --fs-h1-categoria: clamp(40px, 5.6vw, 68px);
  --fs-h1-sobre-mi: clamp(40px, 5.6vw, 68px);
  --fs-h1-lista: clamp(38px, 5vw, 62px);
  --fs-h1-404: clamp(32px, 4.4vw, 52px);
  --fs-h2-seccion: clamp(26px, 3vw, 36px);
  --fs-h2-articulo: clamp(26px, 2.6vw, 32px);
  --fs-h3-feature: clamp(28px, 3.4vw, 44px);
  --fs-h3-grid: clamp(21px, 1.9vw, 24px);
  --fs-h3-fila: clamp(18px, 2vw, 24px);
  --fs-h3-pilar: clamp(24px, 2.4vw, 28px);
  --fs-body-articulo: clamp(18px, 1.6vw, 19.5px);
  --fs-excerpt-hero: clamp(17px, 1.65vw, 20px);
  --fs-excerpt-grid: 15.5px;
  --fs-nav: 15px;
  --fs-boton: 13px;
  --fs-kicker: 12px;
  --fs-meta: 13.5px;
  --fs-logo-escritorio: 36px;
  --fs-logo-movil: 29px;
  --fs-blog-tag-escritorio: 9.5px;
  --fs-blog-tag-movil: 8.5px;
  --fs-firma-pie: clamp(44px, 4.4vw, 54px);
  --fs-firma-sobre-mi: clamp(48px, 5vw, 60px);
  --fs-marcador-feature: clamp(44px, 7vw, 84px);
  --fs-marcador-grid: clamp(36px, 4vw, 48px);
  --fs-marcador-fila: clamp(19px, 2vw, 26px);
  --fs-ups-404: clamp(70px, 9vw, 110px);
  --fs-dropcap: 4.1em;
  --fs-blockquote: clamp(23px, 2.4vw, 28px);
  /* Fase 3: no está en la tabla del design-spec (que solo documenta "H2
     dentro del artículo") — elegido por consistencia con la escala ya
     existente (entre --fs-body-articulo 19.5px y --fs-h2-articulo 32px). */
  --fs-h3-articulo: clamp(20px, 1.9vw, 23px);

  /* -- Espaciado / anchos --------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 56px);
  --max-ancho: 1200px;
  --max-ancho-header-articulo: 820px;
  --max-ancho-img-articulo: 1180px;
  --max-ancho-cuerpo-articulo: 760px;
  --max-ancho-excerpt-hero: 520px;
  --max-ancho-excerpt-articulo: 640px;
  --max-ancho-modal: min(520px, calc(100% - 28px));
  --max-ancho-404: 760px;

  --alto-header-movil: 64px;
  --alto-header-escritorio: 86px;

  --espacio-seccion-grande: clamp(56px, 7vw, 96px);
  --espacio-seccion-mediano: clamp(56px, 7vw, 88px);

  /* -- Radios --------------------------------------------------------------- */
  --radio-boton: 13px;
  --radio-fila: 14px;
  --radio-grid-img: 18px;
  --radio-pilar: 20px;
  --radio-chip: 22px;
  --radio-grande: 24px;
  --radio-img-articulo: clamp(16px, 2vw, 26px);
  --radio-img-hero: clamp(22px, 2.4vw, 32px);

  /* -- Sombras --------------------------------------------------------------- */
  --sombra-tarjeta: 0 2px 10px rgba(47, 42, 38, .06);
  --sombra-menu: 0 20px 40px rgba(47, 42, 38, .15);
  --sombra-modal: 0 30px 70px rgba(47, 42, 38, .35);

  /* -- Tamaños táctiles (WCAG 2.5.5 / Apple HIG) ------------------------------ */
  --toque-min: 44px;
  --toque-movil: 48px;
  --toque-cta: 52px;

  /* -- Transiciones (respetan prefers-reduced-motion más abajo) --------------- */
  --duracion-panel: .22s;
  --curva-panel: ease;
}

/* ==========================================================================
   2. Reset básico
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* BUG CRÍTICO corregido (hallado por Raymond en la revisión visual): reglas
   como .formulario-suscripcion__exito { display:flex } tienen la MISMA
   especificidad que la hoja de estilos del navegador para [hidden] (que es
   "display:none"), y las reglas de autor siempre ganan sobre las del user
   agent aunque empaten en especificidad — así que el bloque de "éxito" (y
   cualquier otro elemento oculto con el atributo hidden en vez de una
   clase) se mostraba SIEMPRE, sin haber enviado nada. Esta regla global
   restaura la garantía de que [hidden] oculta de verdad, sin importar qué
   display declare después cualquier componente. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto-principal);
  font: 400 16px/1.6 var(--fuente-ui);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 400; color: var(--color-texto-principal); }

body.bloquear-scroll { overflow: hidden; }

/* ==========================================================================
   3. Utilidades de accesibilidad
   ========================================================================== */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.salto-de-enlace {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--color-oscuro);
  color: var(--color-blanco);
  padding: 12px 16px;
  border-radius: 10px;
  font: 500 14px var(--fuente-ui);
}
.salto-de-enlace:focus { left: 12px; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-oscuro);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--color-fondo);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. Layout / contenedor
   ========================================================================== */
.contenedor {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   5. Botones / chips / pilares reutilizables
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--toque-cta);
  padding: 0 24px;
  border: none;
  border-radius: var(--radio-boton);
  font: 500 var(--fs-boton) var(--fuente-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.boton--oscuro { background: var(--color-oscuro); color: var(--color-blanco); }
.boton--oscuro:hover { background: var(--color-texto-cuerpo); }
.boton--outline {
  background: transparent;
  border: 1.5px solid var(--color-oscuro);
  color: var(--color-oscuro);
}
.boton--outline:hover { background: var(--color-beige); }
.boton--compacto { min-height: var(--toque-movil); padding: 0 18px; font-size: 12px; }

.boton-icono {
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-texto-principal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-icono:hover { background: var(--color-beige); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 17px;
  border-radius: var(--radio-chip);
  border: 1px solid var(--color-borde-chip);
  background: var(--color-blanco);
  color: var(--color-texto-principal);
  font: 400 14.5px var(--fuente-ui);
  white-space: nowrap;
}
.chip[aria-current="page"] {
  background: var(--color-oscuro);
  border-color: var(--color-oscuro);
  color: var(--color-blanco);
}

.pilar-boton {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  border-radius: var(--radio-fila);
  color: var(--color-texto-principal);
  font: 500 15px var(--fuente-ui);
}
.pilar-boton--crecimiento { background: var(--color-pilar-crecimiento); }
.pilar-boton--habitos { background: var(--color-pilar-habitos); }
.pilar-boton--ingresos-online { background: var(--color-pilar-ingresos-online); }
.pilar-boton--fe { background: var(--color-pilar-fe); }

.icono-social {
  width: var(--toque-movil);
  height: var(--toque-movil);
  border-radius: 50%;
  border: 1.5px solid var(--color-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-oscuro);
}
.icono-social:hover { background: var(--color-oscuro); color: var(--color-fondo); }

/* ==========================================================================
   6. Header / nav / menú móvil
   ========================================================================== */
/* Barra de anuncio "Recursos gratis": SOLO escritorio (ver header.hbs) */
.barra-anuncio { display: none; }

.encabezado {
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
}
.encabezado__interior {
  height: var(--alto-header-movil);
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.logo__firma {
  font: 400 var(--fs-logo-movil)/1 var(--fuente-firma);
  color: var(--color-texto-principal);
  white-space: nowrap;
}
.logo__etiqueta {
  font: 500 var(--fs-blog-tag-movil)/1 var(--fuente-ui);
  letter-spacing: .34em;
  padding-left: 30px;
  text-transform: uppercase;
  color: var(--color-acento);
}

.nav-principal { display: none; }

.encabezado__acciones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-principal__enlace--tienda,
.nav-principal__suscribir { display: none; }

.boton-hamburguesa {
  width: var(--toque-movil);
  height: var(--toque-movil);
  border-radius: var(--radio-fila);
  border: none;
  background: transparent;
  color: var(--color-texto-principal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-hamburguesa[aria-expanded="true"] { background: var(--color-beige); }
.boton-hamburguesa__icono--cerrar { display: none; }
.boton-hamburguesa[aria-expanded="true"] .boton-hamburguesa__icono--abrir { display: none; }
.boton-hamburguesa[aria-expanded="true"] .boton-hamburguesa__icono--cerrar { display: block; }

/* Menú móvil: oculto por defecto vía opacity/visibility (no "display" ni
   "hidden") para poder animar la apertura; JS agrega/quita el modificador. */
.menu-movil {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--alto-header-movil);
  z-index: 20;
  min-height: calc(100vh - var(--alto-header-movil));
  /* Si el contenido no cabe, el menú se desplaza por dentro (antes lo de abajo quedaba fuera de la pantalla). */
  max-height: calc(100dvh - var(--alto-header-movil));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-fondo);
  padding: 8px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-menu);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--duracion-panel) var(--curva-panel), transform var(--duracion-panel) var(--curva-panel), visibility var(--duracion-panel);
}
.menu-movil--abierto {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu-movil__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--color-borde);
  font: 400 25px var(--fuente-titulos);
  color: var(--color-texto-principal);
}
.menu-movil__enlace[aria-current="page"] { color: var(--color-acento); }
.menu-movil__chevron { font: 300 20px var(--fuente-ui); color: var(--color-texto-secundario); }

.menu-movil__etiqueta {
  font: 500 var(--fs-kicker) var(--fuente-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
  margin: 24px 0 10px;
}

.menu-movil__pilares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.menu-movil__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-movil__gratis {
  background: var(--color-salvia);
  border-radius: var(--radio-grid-img);
  padding: 18px;
  margin-top: 24px;
}
.menu-movil__gratis-titulo {
  font: 400 20px/1.25 var(--fuente-titulos);
  color: var(--color-texto-principal);
}
.menu-movil__gratis-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.menu-movil__gratis-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-movil);
  padding: 0 10px;
  font: 500 14px var(--fuente-ui);
  color: var(--color-texto-principal);
}

.menu-movil__suscribir { margin-top: 14px; width: 100%; min-height: 54px; }

.menu-movil__redes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  font: 400 14px var(--fuente-ui);
  color: var(--color-texto-principal);
}
.menu-movil__redes-iconos { display: flex; gap: 10px; }

/* -- Escritorio: único breakpoint estructural, ver nota de arriba --------- */
@media (min-width: 1280px) {
  .barra-anuncio {
    display: block;
    background: var(--color-salvia);
    min-height: 42px;
  }
  .barra-anuncio__interior {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .barra-anuncio__enlace {
    font: 500 13px var(--fuente-ui);
    letter-spacing: .01em;
    color: var(--color-oscuro);
    text-align: center;
  }
  .barra-anuncio__enlace:hover { text-decoration: underline; }

  .encabezado__interior { height: var(--alto-header-escritorio); gap: 18px; }

  .logo { flex: none; align-items: center; gap: 3px; }
  .logo__firma { font-size: var(--fs-logo-escritorio); }
  .logo__etiqueta { font-size: var(--fs-blog-tag-escritorio); margin-right: -.34em; padding-left: 0; }

  .nav-principal {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: 0;
  }
  .nav-principal__enlace {
    display: flex;
    align-items: center;
    min-height: var(--toque-min);
    padding: 0 8px;
    font: 400 var(--fs-nav) var(--fuente-ui);
    color: var(--color-texto-principal);
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
  }
  .nav-principal__enlace:hover { color: var(--color-acento); }
  .nav-principal__enlace[aria-current="page"] {
    color: var(--color-acento);
    box-shadow: inset 0 -2px 0 var(--color-acento);
  }
  .nav-principal__enlace--tienda { display: flex; }
  .nav-principal__suscribir { display: inline-flex; flex: none; }

  .boton-hamburguesa, #menu-movil { display: none; }
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.pie-de-pagina {
  background: var(--color-salvia);
  margin-top: var(--espacio-seccion-grande);
}
.pie-de-pagina__superior {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(32px, 5vw, 72px);
  padding: clamp(40px, 5vw, 60px) 0 clamp(32px, 4vw, 44px);
  border-bottom: 1px solid rgba(47, 42, 38, .28);
}
.pie-de-pagina__marca { flex: 1 1 300px; min-width: 0; }
.pie-de-pagina__firma {
  font: 400 var(--fs-firma-pie)/1 var(--fuente-firma);
  color: var(--color-texto-principal);
}
.pie-de-pagina__tagline {
  margin: 12px 0 18px;
  max-width: 360px;
  font: 400 15.5px/1.6 var(--fuente-ui);
  color: var(--color-texto-principal);
}
.pie-de-pagina__redes { display: flex; gap: 10px; }

.pie-de-pagina__suscripcion { flex: 1 1 380px; min-width: 0; }
.pie-de-pagina__suscripcion-titulo {
  margin: 0 0 14px;
  font: 400 var(--fs-h2-articulo) var(--fuente-titulos);
  color: var(--color-texto-principal);
}

.pie-de-pagina__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 24px;
  padding: 32px 0;
}
.pie-de-pagina__columnas a {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
  font: 400 15px var(--fuente-ui);
  color: var(--color-texto-principal);
}
.pie-de-pagina__columnas a:hover { text-decoration: underline; }
.pie-de-pagina__col-titulo {
  margin: 0 0 6px;
  font: 500 var(--fs-kicker) var(--fuente-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-texto-principal);
}

.pie-de-pagina__inferior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(47, 42, 38, .28);
  font: 400 var(--fs-meta) var(--fuente-ui);
  color: var(--color-texto-principal);
}
.pie-de-pagina__inferior a { display: inline-flex; align-items: center; min-height: var(--toque-min); }

/* ==========================================================================
   8. Modal de suscripción
   ========================================================================== */
.modal-suscripcion {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duracion-panel) var(--curva-panel), visibility var(--duracion-panel);
}
.modal-suscripcion--abierto { visibility: visible; opacity: 1; pointer-events: auto; }

.modal-suscripcion__fondo {
  position: absolute;
  inset: 0;
  background: rgba(47, 42, 38, .5);
}

.modal-suscripcion__ventana {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: var(--max-ancho-modal);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-fondo);
  border-radius: var(--radio-grande);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--sombra-modal);
}
.modal-suscripcion--abierto .modal-suscripcion__ventana {
  transition: transform var(--duracion-panel) var(--curva-panel);
}

.modal-suscripcion__cerrar { position: absolute; top: 10px; right: 10px; }
.modal-suscripcion__saludo {
  font: 400 40px/1 var(--fuente-firma);
  color: var(--color-acento);
}
.modal-suscripcion__titulo {
  margin: 8px 0 6px;
  font: 400 clamp(24px, 3vw, 30px)/1.25 var(--fuente-titulos);
  color: var(--color-texto-principal);
}
.modal-suscripcion__texto {
  margin: 0 0 18px;
  font: 400 15.5px/1.55 var(--fuente-ui);
  color: var(--color-texto-cuerpo);
}

/* ==========================================================================
   9. Formulario de suscripción
   ========================================================================== */
.formulario-suscripcion__form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.formulario-suscripcion__campo {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.formulario-suscripcion__input {
  width: 100%;
  height: var(--toque-cta);
  border: 1.5px solid var(--color-borde-input);
  border-radius: var(--radio-boton);
  padding: 0 16px;
  font: 400 16px var(--fuente-ui);
  color: var(--color-texto-principal);
  background: var(--color-blanco);
  outline: none;
}
.formulario-suscripcion__input--error,
.formulario-suscripcion__input[aria-invalid="true"] { border-color: var(--color-error); }

.formulario-suscripcion__boton { flex: 0 0 auto; min-width: 150px; }

.formulario-suscripcion__aviso {
  margin-top: 10px;
  font: 400 14px/1.45 var(--fuente-ui);
  color: var(--color-texto-principal);
}
.formulario-suscripcion__aviso--error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--color-blanco);
  border-radius: 11px;
  padding: 10px 13px;
  color: var(--color-error);
}
.formulario-suscripcion__aviso--error::before {
  content: "!";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--color-blanco);
  font: 600 12px/18px var(--fuente-ui);
  text-align: center;
}

.formulario-suscripcion__nota {
  margin-top: 10px;
  font: 400 var(--fs-meta)/1.5 var(--fuente-ui);
  color: var(--color-texto-principal);
}

.formulario-suscripcion__exito {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 18px 18px 16px;
}
.formulario-suscripcion__exito-check {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-salvia);
  color: var(--color-texto-principal);
  font: 500 17px/36px var(--fuente-ui);
  text-align: center;
}
.formulario-suscripcion__exito-texto { min-width: 0; }
.formulario-suscripcion__exito-titulo {
  font: 400 19px/1.35 var(--fuente-titulos);
  color: var(--color-texto-principal);
}
.formulario-suscripcion__exito-sub {
  margin-top: 6px;
  font: 400 var(--fs-meta)/1.5 var(--fuente-ui);
  color: var(--color-texto-secundario);
}
.formulario-suscripcion__exito-reset {
  margin-top: 8px;
  min-height: var(--toque-min);
  padding: 0;
  border: none;
  background: none;
  font: 500 13.5px var(--fuente-ui);
  color: var(--color-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   10. Tarjeta de artículo + marcador sin foto
   ========================================================================== */
.tarjeta-articulo { display: flex; flex-direction: column; min-width: 0; }

.tarjeta-articulo__imagen-enlace { display: block; margin-bottom: 10px; }
.tarjeta-articulo__imagen { width: 100%; height: 100%; object-fit: cover; }

.marcador-sin-foto {
  width: 100%;
  height: 100%;
  background: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  overflow: hidden;
}
.marcador-sin-foto__texto {
  font: 400 1em/1.05 var(--fuente-firma);
  color: var(--color-acento);
}

.tarjeta-articulo__etiqueta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  font: 500 var(--fs-kicker) var(--fuente-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-acento);
}
.tarjeta-articulo__etiqueta:hover { text-decoration: underline; }

.tarjeta-articulo__titulo { margin-top: 2px; }
.tarjeta-articulo__titulo a:hover { color: var(--color-acento); }

.tarjeta-articulo__excerpt {
  margin-top: 10px;
  color: var(--color-texto-secundario);
  font: 400 var(--fs-excerpt-grid)/1.6 var(--fuente-ui);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta-articulo__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font: 400 var(--fs-meta) var(--fuente-ui);
  color: var(--color-texto-secundario);
}

/* Variante "feature": imagen grande 4:3 */
.tarjeta-articulo--feature { flex-direction: row; flex-wrap: wrap; gap: clamp(18px, 4vw, 52px); }
.tarjeta-articulo--feature .tarjeta-articulo__imagen-enlace { flex: 1 1 440px; min-width: 0; margin-bottom: 0; }
.tarjeta-articulo--feature .tarjeta-articulo__imagen,
.tarjeta-articulo--feature .marcador-sin-foto { aspect-ratio: 4 / 3; border-radius: var(--radio-img-articulo); }
.tarjeta-articulo--feature .marcador-sin-foto__texto { font-size: var(--fs-marcador-feature); }
.tarjeta-articulo--feature .tarjeta-articulo__cuerpo { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; }
.tarjeta-articulo--feature .tarjeta-articulo__titulo { font-size: var(--fs-h3-feature); line-height: 1.15; }

/* Variante "grid": imagen 3:2, grid de 3 columnas */
.tarjeta-articulo--grid .tarjeta-articulo__imagen,
.tarjeta-articulo--grid .marcador-sin-foto { aspect-ratio: 3 / 2; border-radius: var(--radio-grid-img); }
.tarjeta-articulo--grid .marcador-sin-foto__texto { font-size: var(--fs-marcador-grid); }
.tarjeta-articulo--grid .tarjeta-articulo__titulo { font-size: var(--fs-h3-grid); line-height: 1.28; }

/* Variante "fila": imagen 1:1 pequeña, lista horizontal compacta */
.tarjeta-articulo--fila { flex-direction: row; align-items: center; gap: clamp(14px, 2.4vw, 26px); padding: 18px 0; border-top: 1px solid var(--color-borde); }
.tarjeta-articulo--fila .tarjeta-articulo__imagen-enlace { flex: none; width: clamp(92px, 13vw, 156px); margin-bottom: 0; }
.tarjeta-articulo--fila .tarjeta-articulo__imagen,
.tarjeta-articulo--fila .marcador-sin-foto { aspect-ratio: 1 / 1; border-radius: var(--radio-fila); }
.tarjeta-articulo--fila .marcador-sin-foto__texto { font-size: var(--fs-marcador-fila); }
.tarjeta-articulo--fila .tarjeta-articulo__cuerpo { flex: 1; min-width: 0; }
.tarjeta-articulo--fila .tarjeta-articulo__titulo {
  font-size: var(--fs-h3-fila);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-articulo--fila .tarjeta-articulo__excerpt { display: none; }

/* ==========================================================================
   11. Home / Lista / Categoría (Fase 2)
   ========================================================================== */

/* -- Utilidades compartidas (nuevas en Fase 2, disponibles para Fase 3) --- */
.kicker {
  font: 500 var(--fs-kicker) var(--fuente-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-acento);
}

.seccion-grande { margin-top: var(--espacio-seccion-grande); }
.seccion-mediana { margin-top: var(--espacio-seccion-mediano); }

/* H2 de sección (Empieza por un pilar, Más artículos recientes, Más
   artículos, etc.) — el reset global (secc. 2) ya pone Playfair/400/color
   en h1-h3, esto solo agrega el tamaño fluido que falta. */
.h2-seccion { font-size: var(--fs-h2-seccion); }

/* Grid de artículos de 3 columnas (design-spec.md, sección 3, "Gaps") —
   auto-fit + minmax colapsa las columnas vacías solas, así que sirve igual
   para 2 ítems que para muchos (Inicio "Más recientes", Categoría "resto",
   y Fase 3 podrá reusarlo para "Sigue leyendo"). */
.grid-articulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(30px, 3vw, 40px);
}

/* -- Hero (Inicio) -------------------------------------------------------- */
.hero { padding-top: clamp(32px, 5vw, 56px); }
.hero__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__foto {
  position: relative;
  background: var(--color-beige-foto);
  border-radius: var(--radio-img-hero);
  overflow: hidden;
}
.hero__foto-imagen { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__firma {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: calc(100% - 40px);
  background: var(--color-blanco);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--sombra-tarjeta);
}
.hero__firma-nombre { display: block; font: 400 32px/1 var(--fuente-firma); color: var(--color-acento); }
.hero__firma-texto { display: block; margin-top: 4px; font: 400 13.5px/1.4 var(--fuente-ui); color: var(--color-texto-principal); }

.hero__contenido { min-width: 0; }
.hero__titulo { margin-top: 10px; font-size: var(--fs-h1-hero); line-height: 1.06; }
.hero__titulo em { font-style: italic; color: var(--color-acento); }
.hero__excerpt {
  margin-top: 16px;
  max-width: var(--max-ancho-excerpt-hero);
  font-size: var(--fs-excerpt-hero);
  line-height: 1.6;
  color: var(--color-texto-cuerpo);
}
.hero__label { margin-top: clamp(24px, 3vw, 32px); font: 400 14px var(--fuente-ui); color: var(--color-texto-secundario); }
.hero__form { margin-top: 10px; max-width: 460px; }
.hero__link-gratis {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  margin-top: 14px;
  font: 400 14.5px var(--fuente-ui);
  color: var(--color-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1280px) {
  /* Columna ancha (1fr) = .hero__contenido (texto, va primero en el HTML),
     columna angosta (360-480px) = .hero__foto — sin "order" en ninguno de
     los dos: el auto-placement de grid ya respeta el orden real del DOM
     (texto izquierda, foto derecha, como el diseño). Ver comentario en
     home.hbs. */
  .hero__interior { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); }
}

/* -- Pilares (Inicio) ------------------------------------------------------ */
.pilares__subtitulo { margin-top: 10px; font: 400 15px var(--fuente-ui); color: var(--color-texto-secundario); }
.pilares__grid {
  margin-top: clamp(24px, 3vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
/* Tarjeta grande de pilar: reutiliza SOLO los modificadores de color
   .pilar-boton--{slug} (secc. 5 de screen.css, son reglas de background
   puro) — no la clase base .pilar-boton, que es el ítem chico del menú
   móvil (54px). Ver CONVENCIONES.md. */
.pilar-tarjeta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 200px;
  padding: clamp(24px, 3vw, 30px);
  border-radius: var(--radio-pilar);
  color: var(--color-texto-principal);
}
.pilar-tarjeta__titulo { font-size: var(--fs-h3-pilar); line-height: 1.15; }
.pilar-tarjeta__descripcion { margin-top: 6px; font: 400 15px/1.55 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.pilar-tarjeta__contador { font: 500 12px var(--fuente-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--color-texto-secundario); }

/* -- "Lo último" (Inicio) --------------------------------------------------- */
.lo-ultimo .kicker { margin-bottom: 16px; }

/* -- "Más artículos recientes" (Inicio) ------------------------------------- */
.mas-recientes__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.mas-recientes__ver-todos { font: 500 13px var(--fuente-ui); letter-spacing: .04em; color: var(--color-acento); }
.mas-recientes__ver-todos:hover { text-decoration: underline; }
.mas-recientes__grid { margin-top: clamp(24px, 3vw, 32px); }

/* -- CTA dúo Gratis/Tienda (Inicio, y reusable en Sobre mí de Fase 3) ------- */
.cta-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 18px;
}
.cta-caja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--radio-grande);
}
.cta-caja--gratis { background: var(--color-salvia); color: var(--color-texto-principal); }
.cta-caja--tienda { background: var(--color-oscuro); color: var(--color-blanco); }
.cta-caja__titulo { font: 400 20px/1.3 var(--fuente-titulos); }
.cta-caja__texto { font: 400 15px/1.6 var(--fuente-ui); }
/* El título en blanco: la regla global de h1-h3 lo pintaba oscuro sobre
   esta tarjeta oscura y quedaba invisible (26-09-2026). */
.cta-caja--tienda .cta-caja__titulo { color: var(--color-blanco); }
.cta-caja--tienda .cta-caja__texto { color: var(--color-beige-oscuro); }
.cta-caja--tienda .boton--outline { border-color: var(--color-blanco); color: var(--color-blanco); }
.cta-caja--tienda .boton--outline:hover { background: rgba(255, 255, 255, .08); }

/* -- Cabecera de lista (index.hbs "Todos los artículos") -------------------- */
.lista-cabecera__titulo { margin-top: 10px; font-size: var(--fs-h1-lista); }
.lista-cabecera__subtitulo { margin-top: 10px; font: 400 15px var(--fuente-ui); color: var(--color-texto-secundario); }

/* -- Chips de filtro por categoría (index.hbs, tag.hbs) --------------------- */
.chips-filtro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* -- Banner "Gratis" in-feed compacto (index.hbs) --------------------------- */
.banner-gratis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  background: var(--color-salvia);
  border-radius: var(--radio-grande);
  padding: clamp(20px, 3vw, 28px) clamp(24px, 3vw, 32px);
}
.banner-gratis__titulo { flex: none; font: 400 34px/1 var(--fuente-firma); color: var(--color-texto-principal); }
.banner-gratis__texto { flex: 1 1 260px; min-width: 0; font: 400 15.5px/1.55 var(--fuente-ui); color: var(--color-texto-principal); }
.banner-gratis__boton { flex: none; }

/* -- Lista en filas + paginación (index.hbs, tag.hbs) ----------------------- */
.lista-filas__titulo { margin-bottom: 8px; }

.paginacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding-top: clamp(32px, 4vw, 40px);
  border-top: 1px solid var(--color-borde);
}
.paginacion__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.paginacion__texto { font: 400 14px/1.6 var(--fuente-ui); color: var(--color-texto-secundario); }

.paginacion-fin { margin-top: 12px; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.paginacion-fin__titulo { font: 400 clamp(40px, 5vw, 54px)/1 var(--fuente-firma); color: var(--color-acento); }
.paginacion-fin__texto { font: 400 15px/1.6 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.paginacion-fin__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* -- Encabezado de categoría (tag.hbs) --------------------------------------
   Fondo SIEMPRE --color-beige, fijo para las 8 categorías por igual —
   design-spec.md confirma un único hex #EFE1D6 para esta franja sin variar
   por color de pilar (ver comentario en tag.hbs y CONVENCIONES.md). */
.categoria-header { background: var(--color-beige); }
.categoria-header__interior { padding-top: clamp(40px, 6vw, 64px); padding-bottom: clamp(32px, 4vw, 44px); }
.categoria-header__breadcrumb { display: inline-flex; align-items: center; min-height: var(--toque-min); font: 400 14px var(--fuente-ui); color: var(--color-texto-secundario); }
.categoria-header__breadcrumb:hover { color: var(--color-acento); }
.categoria-header__titulo { margin-top: 10px; font-size: var(--fs-h1-categoria); }
.categoria-header__descripcion { margin-top: 12px; max-width: 640px; font: 400 16px/1.6 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.categoria-header__contador { margin-top: 14px; font: 500 13.5px var(--fuente-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-secundario); }

/* -- Estados "Uno solo" / "Vacío" de categoría (tag.hbs) --------------------- */
.categoria-estado {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 44px);
  border-radius: var(--radio-grande);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.categoria-estado--uno { border: 1px solid var(--color-borde); }
.categoria-estado--vacio { background: var(--color-beige); }
.categoria-estado__cursiva { font: 400 clamp(40px, 5vw, 54px)/1 var(--fuente-firma); color: var(--color-acento); }
.categoria-estado__titulo { font: 400 20px/1.4 var(--fuente-titulos); color: var(--color-texto-principal); }
.categoria-estado__texto { max-width: 480px; font: 400 15px/1.6 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.categoria-estado__mientras { margin-top: 10px; font: 500 var(--fs-kicker) var(--fuente-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--color-texto-secundario); }
.categoria-estado__link { font: 400 14.5px var(--fuente-ui); color: var(--color-acento); text-decoration: underline; text-underline-offset: 3px; }
.categoria-estado .formulario-suscripcion,
.categoria-estado .chips-filtro { width: 100%; justify-content: center; }

/* ==========================================================================
   12. Artículo (post.hbs) — Fase 3
   ========================================================================== */
/* BUG corregido (Raymond, revisión visual): esta regla no tenía padding
   horizontal, así que en móvil el texto tocaba el borde de la pantalla
   (.post-cuerpo sí tenía "padding:0 var(--gutter)", esta no). El max-width
   crece en 2*gutter y el padding se resta gracias al box-sizing:border-box
   global (ver Reset, sección 2) — así en escritorio el texto sigue
   ocupando exactamente los 820px originales del diseño, y en móvil queda
   centrado con el mismo margen lateral que el resto del artículo. */
.post-cabecera {
  padding: clamp(32px, 5vw, 48px) var(--gutter) 0;
  max-width: calc(var(--max-ancho-header-articulo) + 2 * var(--gutter));
  margin: 0 auto;
  text-align: center;
}
.post-cabecera__categoria {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radio-chip);
  background: var(--color-beige);
  color: var(--color-acento);
  font: 500 var(--fs-kicker) var(--fuente-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.post-cabecera__categoria:hover { text-decoration: underline; }
.post-cabecera__titulo { margin-top: 18px; font-size: var(--fs-h1-articulo); line-height: 1.12; }
.post-cabecera__excerpt {
  margin: 16px auto 0;
  max-width: var(--max-ancho-excerpt-articulo);
  font: 400 var(--fs-excerpt-hero)/1.6 var(--fuente-ui);
  color: var(--color-texto-cuerpo);
}

.post-autora { margin: 24px auto 0; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.post-autora__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--color-beige-foto); }
.post-autora__nombre { display: block; font: 500 15px var(--fuente-ui); color: var(--color-texto-principal); }
.post-autora__meta { display: block; margin-top: 2px; font: 400 var(--fs-meta) var(--fuente-ui); color: var(--color-texto-secundario); }

/* -- Imagen destacada 16:9, o divisor "línea–Anny–línea" si no hay foto --- */
.post-imagen { margin: clamp(28px, 4vw, 44px) auto 0; max-width: var(--max-ancho-img-articulo); padding: 0 var(--gutter); }
.post-imagen__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-img-articulo); }
.post-imagen__caption { margin-top: 10px; text-align: center; font: 400 13.5px var(--fuente-ui); color: var(--color-texto-secundario); }

.post-divisor-firma { margin-top: clamp(28px, 4vw, 44px); display: flex; align-items: center; justify-content: center; gap: 16px; }
.post-divisor-firma__linea { width: 60px; height: 1px; background: var(--color-linea-firma); }
.post-divisor-firma__nombre { font: 400 30px/1 var(--fuente-firma); color: var(--color-acento); }

.post-cuerpo { margin-top: clamp(40px, 5vw, 56px); padding: 0 var(--gutter); }

/* -- Contenido del post (HTML de Ghost) --------------------------------------
   Los artículos reales de Anny traen cajas ya armadas con estilos EN LÍNEA
   ("¿Este artículo te ayudó?" — ver posts.json). Por diseño, acá NO se
   fuerza display en los div hijos de .post-content: cualquier caja con
   estilos inline resuelve su propio layout y esos estilos ganan sobre
   cualquier regla de clase de todos modos. El margin-top de ">* + *" solo
   empuja el div como bloque hermano (espaciado vertical), nunca toca sus
   hijos. Ver CONVENCIONES.md, sección "Fase 3", para el detalle completo. */
.post-content {
  max-width: var(--max-ancho-cuerpo-articulo);
  margin: 0 auto;
  font: 400 var(--fs-body-articulo) var(--fuente-ui);
  color: var(--color-texto-principal);
}
.post-content > * + * { margin-top: 26px; }
.post-content h2 { font-size: var(--fs-h2-articulo); line-height: 1.25; margin-top: 48px; }
.post-content h3 { font-size: var(--fs-h3-articulo); line-height: 1.3; margin-top: 36px; }
.post-content p { line-height: 1.8; }
.post-content ul, .post-content ol { padding-left: 1.25em; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li + li { margin-top: 8px; }
.post-content blockquote {
  max-width: 560px;
  margin: 44px auto;
  padding: 26px 0;
  border-top: 1px solid var(--color-borde-chip);
  border-bottom: 1px solid var(--color-borde-chip);
  text-align: center;
  font: italic 400 var(--fs-blockquote)/1.45 var(--fuente-titulos);
  color: var(--color-texto-principal);
}
.post-content figure { text-align: center; }
.post-content figcaption { margin-top: 10px; font: 400 13.5px var(--fuente-ui); color: var(--color-texto-secundario); }
/* height:auto: Ghost pone width/height reales en la etiqueta; sin esto, al encoger
   el ancho la altura se quedaba fija y la foto salía estirada (27-09-2026). */
.post-content img { border-radius: 8px; height: auto; }
.post-content a { color: var(--color-acento); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--color-acento-hover); }
/* Link que envuelve una imagen (p. ej. dentro de una caja de recurso): sin
   subrayado — ver CONVENCIONES.md, Fase 3. No hay ningún caso real de esto
   en posts.json hoy, pero se resuelve igual por si Anny lo agrega. */
.post-content a:has(img) { text-decoration: none; }
.post-content > p:first-of-type::first-letter {
  float: left;
  padding: 4px 8px 0 0;
  font: 400 var(--fs-dropcap)/.82 var(--fuente-titulos);
  color: var(--color-acento);
}
/* Callout nativo del editor de Ghost (kg-callout-card) — el "aside con fondo
   beige" que menciona design-spec.md, sección "Artículo". */
.post-content .kg-callout-card { background: var(--color-beige); border-radius: var(--radio-grande); padding: 20px 24px; }

/* Tarjetas del editor Koenig con ancho "wide"/"full" (imagen, galería,
   bookmark, etc. con esa opción activada en Ghost Admin) — exigido por
   gscan ("required to appear styled"). .post-content tiene max-width fijo
   (760px), así que estas dos rompen ese ancho con el truco clásico
   margin-left:50% + translateX(-50%), que centra el elemento respecto a
   su padre sin importar qué tan ancho sea. "wide" crece hasta el ancho de
   la imagen destacada del artículo; "full" sangra hasta el borde del
   viewport (ignora el padding de .post-cuerpo). */
.post-content .kg-width-wide {
  width: 100%;
  max-width: var(--max-ancho-img-articulo);
  margin-left: 50%;
  transform: translateX(-50%);
}
.post-content .kg-width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.post-content .kg-width-wide img,
.post-content .kg-width-full img { border-radius: 0; width: 100%; }

.post-guardado-en {
  margin: clamp(40px, 5vw, 56px) auto 0;
  max-width: var(--max-ancho-cuerpo-articulo);
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.post-guardado-en__label { font: 500 13.5px var(--fuente-ui); color: var(--color-texto-secundario); }

.sobre-autora {
  margin: clamp(40px, 5vw, 56px) auto 0;
  max-width: var(--max-ancho-cuerpo-articulo);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--color-beige);
  border-radius: var(--radio-grande);
  padding: clamp(24px, 3vw, 32px);
}
.sobre-autora__avatar { flex: none; width: 92px; height: 92px; border-radius: 50%; object-fit: cover; background: var(--color-beige-foto); }
.sobre-autora__cuerpo { flex: 1 1 260px; min-width: 0; }
.sobre-autora__nombre { font: 400 42px/1 var(--fuente-firma); color: var(--color-texto-principal); }
.sobre-autora__bio { margin-top: 8px; max-width: 480px; font: 400 15px/1.6 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.sobre-autora__redes { margin-top: 14px; display: flex; gap: 10px; }
.sobre-autora__link { display: inline-flex; align-items: center; min-height: var(--toque-min); margin-top: 6px; font: 500 14px var(--fuente-ui); color: var(--color-acento); }
.sobre-autora__link:hover { text-decoration: underline; }

.post-suscripcion {
  margin: clamp(40px, 5vw, 56px) auto 0;
  max-width: var(--max-ancho-cuerpo-articulo);
  background: var(--color-salvia);
  border-radius: var(--radio-grande);
  padding: clamp(28px, 4vw, 36px);
  color: var(--color-texto-principal);
}
.post-suscripcion__titulo { font: 400 22px/1.3 var(--fuente-titulos); }
.post-suscripcion__texto { margin-top: 8px; font: 400 15px/1.6 var(--fuente-ui); }
.post-suscripcion .formulario-suscripcion { margin-top: 18px; }

.sigue-leyendo__grid { margin-top: clamp(24px, 3vw, 32px); }

/* ==========================================================================
   13. Página genérica (page.hbs) + Sobre mí (page-about.hbs) — Fase 3
   ========================================================================== */
.pagina-generica { padding-top: clamp(40px, 6vw, 64px); }
.pagina-generica__titulo { font-size: var(--fs-h1-lista); }
.pagina-generica__imagen { margin-top: clamp(24px, 3vw, 32px); max-width: var(--max-ancho-img-articulo); margin-left: auto; margin-right: auto; }
.pagina-generica__imagen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-img-articulo); }
.pagina-generica .post-content { margin-top: clamp(32px, 4vw, 44px); }

.sobre-mi-header { max-width: var(--max-ancho-header-articulo); margin: 0 auto; padding-top: clamp(32px, 5vw, 48px); }
.sobre-mi-header__titulo { margin-top: 14px; font-size: var(--fs-h1-sobre-mi); }
.sobre-mi-header__titulo em { font-style: normal; color: var(--color-acento); }

.sobre-mi-foto { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 420px; }
.sobre-mi-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio-img-hero); background: var(--color-beige-foto); }

.sobre-mi-bio { margin: clamp(28px, 4vw, 40px) auto 0; }
.sobre-mi-firma { margin-top: clamp(32px, 4vw, 44px); text-align: center; font: 400 var(--fs-firma-sobre-mi)/1 var(--fuente-firma); color: var(--color-texto-principal); }

.redes-seguir {
  margin-top: clamp(24px, 3vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.redes-tarjeta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-blanco);
  border-radius: var(--radio-fila);
  padding: 16px 18px;
  box-shadow: var(--sombra-tarjeta);
}
.redes-tarjeta__icono {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-principal);
}
.redes-tarjeta__cuerpo { min-width: 0; }
.redes-tarjeta__red { display: block; font: 400 20px var(--fuente-titulos); color: var(--color-texto-principal); }
.redes-tarjeta__handle { display: block; margin-top: 2px; font: 400 14.5px var(--fuente-ui); color: var(--color-texto-secundario); }
.redes-tarjeta__flecha { margin-left: auto; flex: none; font: 400 18px var(--fuente-ui); color: var(--color-texto-secundario); }

/* ==========================================================================
   14. Error 404 (error-404.hbs) — Fase 3
   ========================================================================== */
/* Padding vertical reducido respecto al clamp(56,9vw,120) del spec: el
   video ya aporta su propio aire arriba (ver design-spec.md, sección
   "Error 404" + CONVENCIONES.md, Fase 3). */
.error-404 { padding: clamp(20px, 4vw, 40px) 0 20px; }
.error-404__contenedor {
  max-width: var(--max-ancho-404);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Fondo de TODA la sección ya es --color-fondo (heredado de body) — no se
   le agrega ningún otro color acá ni al contenedor del video: el video
   viene compuesto por chroma sobre ese mismo #F5F1EA exacto. */
.anny-anim { width: clamp(160px, 42vw, 200px); aspect-ratio: 1; position: relative; }
.anny-anim video, .anny-anim img { width: 100%; height: 100%; object-fit: cover; }
.anny-anim video { display: block; }
.anny-anim img { display: none; }
@media (prefers-reduced-motion: reduce) {
  .anny-anim video { display: none; }
  .anny-anim img { display: block; }
}

.error-404__ups { margin-top: 4px; font: 400 var(--fs-ups-404)/1 var(--fuente-firma); color: var(--color-acento); }
.error-404__kicker { margin-top: 18px; }
.error-404__titulo { margin-top: 10px; font-size: var(--fs-h1-404); line-height: 1.15; }
.error-404__texto { margin-top: 14px; max-width: 520px; font: 400 17px/1.6 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.error-404__acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.error-404__pilares-kicker { margin-top: 48px; }
.error-404__chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ==========================================================================
   15. error.hbs — plantilla standalone (NO extiende default.hbs)
   ========================================================================== */
/* Ghost Theme API: error.hbs solo puede usar el helper {{asset}} y no debe
   extender el layout (docs.ghost.org/themes/contexts/error) — por eso esta
   plantilla trae su propio <html> y no usa header.hbs/pie.hbs. Reutiliza
   este mismo screen.css (cargado vía {{asset}}, permitido) para no
   duplicar la paleta/tipografía. */
.pagina-error {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px var(--gutter);
  background: var(--color-fondo);
}
.pagina-error__codigo { font: 400 clamp(56px, 10vw, 96px)/1 var(--fuente-titulos); color: var(--color-acento); }
.pagina-error__titulo { margin-top: 12px; font-size: clamp(26px, 3.4vw, 36px); }
.pagina-error__texto { margin-top: 12px; max-width: 460px; font: 400 16px/1.6 var(--fuente-ui); color: var(--color-texto-cuerpo); }
.pagina-error__accion { margin-top: 28px; }

/* Notas para Anny (27-09-2026). El flujo de n8n deja en cada borrador bloques
   <div class="nota-anny"> con ideas para su toque personal. Ella los ve en el
   editor y los sustituye por su texto; si alguno se olvida al publicar, la
   lectora no lo ve nunca. */
.nota-anny { display: none !important; }