/* AstroCronos – Articles Grid (Divi) • styles.css  */
:root{
  --yellow:#FFD300;
  --deep:#0a0a0a;
  --line: rgba(255,211,0,.35);
  --fade: rgba(255,211,0,.10);
}

/* Reset contextual */
.ac-wrap, .ac-hero{ color: var(--yellow); font-family:"Crimson Text", Georgia, "Times New Roman", serif; line-height:1.78 }
.ac-wrap a{ color: var(--yellow); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px }
.ac-wrap a:hover{ text-decoration:none; filter: drop-shadow(0 0 8px rgba(255,211,0,.6)) }

/* Héroe */
.ac-hero{ position:relative; min-height:42vh; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--line) }
.ac-hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(1200px 600px at 50% -20%, rgba(255,211,0,.08), transparent 60%),
  linear-gradient(180deg,#0a0a0a,#0e0e0e) }
.ac-hero-inner{ max-width:1180px; margin:auto; padding:9vh 22px; text-align:center }
.ac-sigil{ margin:0 auto 18px; width:86px; height:86px; border:1px solid var(--line); border-radius:999px; display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(255,211,0,.12); background: radial-gradient(120px 120px at 50% 50%, rgba(255,211,0,.05), transparent 60%);
  font-size:38px; animation:ac-float 6s ease-in-out infinite }
@keyframes ac-float{50%{transform:translateY(-6px)}}
.ac-eyebrow{ font-variant: small-caps; letter-spacing:.22em; opacity:.95 }
.ac-headline{ font-size: clamp(1.9rem, 4.2vw + 1rem, 3.2rem); line-height:1.12; margin:.4rem 0 0; font-weight:800; color:var(--yellow)!important }
.ac-subhead{ max-width:860px; margin:12px auto 22px; opacity:.97; font-size: clamp(1rem, 1.2vw + .4rem, 1.15rem) }
.ac-ornament{ --g:repeating-linear-gradient(90deg,transparent 0 18px,var(--line) 18px 19px); height:10px; background:var(--g); mask:linear-gradient(180deg,transparent,#000 40%); margin:24px auto 0; max-width:1000px }

/* Wrap */
.ac-wrap{ max-width:1200px; margin:auto; padding:32px 20px }

/* Toolbar */
.ac-toolbar{ position:sticky; top:0; z-index:2; background:rgba(10,10,10,.92); backdrop-filter: blur(3px);
  border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:16px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between }
.ac-tools{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.ac-toolbar input, .ac-toolbar select{ background:#0f0f0f; color:var(--yellow); border:1px solid var(--line); border-radius:10px; padding:8px 10px }
.ac-chips{ display:flex; gap:8px; flex-wrap:wrap }
.ac-chip{ border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer;
  background:radial-gradient(150px 40px at 50% 0%, var(--fade), transparent 70%) }
.ac-chip.on{ background:rgba(255,211,0,.12); box-shadow:0 0 0 1px var(--line) }

/* Grid */
.ac-grid{ display:grid; gap:18px; grid-template-columns:1fr }
@media(min-width:700px){ .ac-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1100px){ .ac-grid{ grid-template-columns:1fr 1fr 1fr } }

.ac-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0e0e0e,#0c0c0c); box-shadow:0 18px 60px rgba(0,0,0,.45);
  opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease }
.ac-visible{ opacity:1 !important; transform:none !important }

.ac-thumb{ display:block; aspect-ratio:16/9; position:relative; background:#0a0a0a }
.ac-thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.02) saturate(.96) }

.ac-content{ padding:14px }
.ac-meta{ display:flex; gap:10px; align-items:center; font-size:.9rem; opacity:.9; margin:6px 0 }
.ac-title{ font-size:1.2rem; margin:.2rem 0 .4rem 0; color:var(--yellow) }
.ac-excerpt{ opacity:.95 }
.ac-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px }
.ac-cat{ border:1px dashed var(--line); border-radius:999px; padding:.15rem .5rem; font-size:.85rem }

/* Skeleton */
.ac-skeleton{ animation:ac-pulse 1.3s ease-in-out infinite;
  background:linear-gradient(90deg,#0f0f0f 25%, #141414 37%, #0f0f0f 63%); background-size:400% 100% }
@keyframes ac-pulse{ 0%{ background-position:100% 50% } 100%{ background-position:0 50% } }

/* Más / vacío / toast */
.ac-more{ display:block; margin:18px auto 8px; padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg,#1a1a1a,#0f0f0f); color:var(--yellow); text-decoration:none; font-weight:700; cursor:pointer }
.ac-empty{ text-align:center; opacity:.85; margin:30px 0 }
.ac-toast{ position:fixed; bottom:18px; right:18px; background:rgba(0,0,0,.82); border:1px solid var(--line); color:var(--yellow);
  padding:10px 14px; border-radius:10px; opacity:0; transform:translateY(10px); transition:.35s ease; z-index:5 }
.ac-toast.on{ opacity:1; transform:none }

/* Forzar legibilidad de headings en temas claros/Divi */
.ac-headline, .ac-hero h1, .ac-hero h2, .ac-hero h3,
.ac-wrap h1, .ac-wrap h2, .ac-wrap h3, .ac-wrap h4 { color:var(--yellow)!important; -webkit-text-fill-color:var(--yellow)!important; text-shadow:none; mix-blend-mode:normal }

