/* =============================================================================
   ARTÍCULO — Plantilla de los artículos de El Archivo
   Códigos Solares
   =============================================================================

   Prefijo "ar-" (articulo) en todas las clases.

   Secciones:
     #ar-hero      → Hero de artículo: categoría, título, meta
     #ar-cuerpo    → Cuerpo del artículo — prosa editorial
     #ar-cta       → CTA hacia la Formación al pie del artículo
     #ar-nav       → Link "← Volver al Archivo"
   ============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════════
   #ar-hero
   ═══════════════════════════════════════════════════════════════════════════════ */

#ar-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-feature);
  padding: var(--space-xl) var(--space-md) calc(var(--space-xl) * 0.9);
  display: flex;
  align-items: flex-end;       /* texto pegado a la parte inferior */
  min-height: 56vh;            /* más compacto que páginas de producto */
}

/* Watermark: estrella-circulo-punteado — nunca usada antes */
#ar-hero::after {
  content: '';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 50vw);
  aspect-ratio: 1;
  background-image: none; /* la marca de agua PNG cedió su lugar a los fondos de js/adornos.js */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.055;
  pointer-events: none;
}

.ar-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Categoría — eyebrow */
.ar-categoria {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent-text);
  text-transform: uppercase;
}

.ar-titulo {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--on-feature);
  line-height: 1.1;
  margin: 0;
}

/* Línea de meta: fecha + tiempo de lectura */
.ar-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(var(--gold-leaf-rgb), 0.20);
}

.ar-autor,
.ar-fecha,
.ar-lectura {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(var(--on-feature-rgb), 0.72);
  letter-spacing: 0.05em;
}

.ar-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: rgba(var(--gold-leaf-rgb), 0.4);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   #ar-cuerpo — Prosa del artículo
   ═══════════════════════════════════════════════════════════════════════════════ */

#ar-cuerpo {
  background-color: var(--surface);
  padding: var(--space-xl) var(--space-md);
}

.ar-prosa {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Lead — primer párrafo más destacado */
.ar-prosa-lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.9;
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(var(--gold-leaf-rgb), 0.20);
}

/* Párrafos del cuerpo */
.ar-prosa p {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.9;
  margin: 0 0 1.5rem;
}

.ar-prosa p:last-child {
  margin-bottom: 0;
}

/* Subtítulos internos (h2 dentro del artículo) */
.ar-prosa h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}

/* Separador interno sutil */
.ar-prosa-divider {
  width: 2.5rem;
  height: 1px;
  background-color: var(--gold-leaf);
  opacity: 0.4;
  border: none;
  margin: 2rem 0;
}

/* Cita destacada */
.ar-prosa blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 2px solid rgba(var(--gold-leaf-rgb), 0.45);
  background-color: var(--surface-alt);
}

.ar-prosa blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-style: italic;
  font-weight: 300;
  color: var(--text);
  margin: 0;
  line-height: 1.6;
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   #ar-cta — CTA hacia la Formación
   ═══════════════════════════════════════════════════════════════════════════════ */

#ar-cta {
  background-color: var(--surface-alt);
  border-top:    1px solid rgba(var(--gold-leaf-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--gold-leaf-rgb), 0.22);
  padding: var(--space-lg) var(--space-md);
  position: relative;
  overflow: hidden;
}

/* Watermark sutil — estrella-4-puntas-suave */
#ar-cta::after {
  content: '';
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(220px, 35vw);
  aspect-ratio: 1;
  background-image: none; /* la marca de agua PNG cedió su lugar a los fondos de js/adornos.js */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
}

.ar-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ar-cta-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.ar-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}

.ar-cta-body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.75;
  max-width: 520px;
  margin: 0;
  opacity: 0.8;
}

/* Botón: base en .c-btn-primary (components.css) */
.ar-cta-btn {
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   #ar-nav — Navegación: volver al archivo
   ═══════════════════════════════════════════════════════════════════════════════ */

#ar-nav {
  background-color: var(--surface);
  padding: 2.5rem var(--space-md);
  border-top: 1px solid rgba(var(--gold-leaf-rgb), 0.15);
}

.ar-nav-inner {
  max-width: 680px;
  margin: 0 auto;
}

.ar-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beige);
  text-decoration: none;
  transition: color var(--ease-default), gap var(--ease-default);
}

.ar-nav-back:hover {
  color: var(--gold-shadow);
  gap: 0.7em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  #ar-hero {
    min-height: 50vh;
    padding: var(--space-lg) var(--space-sm) var(--space-md);
  }
  #ar-hero::after { display: none; }

  .ar-titulo {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  #ar-cuerpo {
    padding: var(--space-lg) var(--space-sm);
  }

  #ar-cta {
    padding: var(--space-md) var(--space-sm);
  }
  #ar-cta::after { display: none; }

  #ar-nav {
    padding: 2rem var(--space-sm);
  }
}

/* ─── Enlaces dentro del texto ───────────────────────────────────────────────── */
.ar-prosa a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-leaf-rgb), 0.55);
  transition: border-color var(--ease-default);
}

.ar-prosa a:hover { border-bottom-color: var(--accent-text); }

.ar-prosa a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}