/* =========================================================================
   mitologia.site — design system
   Tema oscuro "pergamino y bronce": indigo profundo + acento dorado.
   ========================================================================= */

:root{
  /* paleta */
  --ink:#0d0b1a;
  --ink-2:#151230;
  --surf:#1b1740;
  --surf-2:#221d4d;
  --line:#312a63;
  --txt:#ece9ff;
  --txt-2:#b3adda;
  --txt-3:#8b85b8;
  --gold:#e0b25c;
  --gold-2:#f2cd83;
  --red:#ff0033;

  /* escala de espaciado (grid 8px) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* tipografia */
  --fs-h1:clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem);
  --fs-h2:clamp(1.45rem, 1.2rem + 1.2vw, 2.05rem);
  --fs-h3:clamp(1.2rem, 1.08rem + .6vw, 1.5rem);
  --fs-b:1.0625rem;               /* 17px — nunca por debajo de 16px */

  --wrap:1140px;
  --r:12px; --r-lg:18px;
  --t:.22s ease;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font:var(--fs-b)/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--gold); text-decoration-color:rgba(224,178,92,.4); text-underline-offset:3px; }
a:hover{ color:var(--gold-2); }

:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

.sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#1a1400; padding:var(--s2) var(--s3);
  font-weight:700; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

/* ---- REGLA DE ORO: contenedor fluido, padding lateral FIJO en px ---- */
.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:16px;
}
@media (min-width:768px){ .container{ padding-inline:24px; } }

/* =============================== header =============================== */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(13,11,26,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; gap:var(--s2); min-height:64px; }

.brand{
  display:inline-flex; align-items:center; gap:var(--s1);
  color:var(--txt); text-decoration:none; font-weight:800; letter-spacing:-.01em;
  margin-right:auto;
}
.brand__ico{ color:var(--gold); flex:none; }
.brand__txt{ font-size:1.05rem; }
.brand__dot{ color:var(--gold); }

.burger{
  display:grid; place-content:center; gap:5px;
  width:44px; height:44px; flex:none;
  background:none; border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer;
}
.burger span{ display:block; width:20px; height:2px; background:var(--txt); transition:var(--t); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav{
  position:fixed; inset:64px 0 auto 0;
  background:var(--ink-2); border-bottom:1px solid var(--line);
  padding:var(--s3) 16px var(--s4);
  display:none;
  max-height:calc(100dvh - 64px); overflow-y:auto;
}
.nav.is-open{ display:block; }
.nav ul{ list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:2px; }
.nav a{
  display:block; padding:12px 8px; min-height:44px;
  color:var(--txt); text-decoration:none; border-radius:var(--r); font-weight:600;
}
.nav a:hover{ background:var(--surf); color:var(--gold); }

.search{ display:flex; gap:var(--s1); }
.search input{
  flex:1; min-width:0;
  background:var(--ink); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r);
  padding:11px 14px; font-size:16px;           /* 16px: evita el zoom de iOS */
}
.search input::placeholder{ color:var(--txt-3); }
.search button{
  display:grid; place-content:center; width:44px; height:44px; flex:none;
  background:var(--gold); color:#1a1400; border:0; border-radius:var(--r); cursor:pointer;
}
.search button:hover{ background:var(--gold-2); }

.search--big{ max-width:520px; margin-top:var(--s3); }
.search--big button{ width:auto; padding-inline:var(--s3); font-weight:700; }

.nav__yt{
  display:inline-flex; align-items:center; gap:var(--s1);
  margin-top:var(--s3); padding:10px 16px; min-height:44px;
  color:var(--txt); text-decoration:none; font-weight:600;
  border:1px solid var(--line); border-radius:var(--r);
}
.nav__yt svg{ color:var(--red); }
.nav__yt:hover{ border-color:var(--red); color:var(--txt); }

@media (min-width:1024px){
  .burger{ display:none; }
  .nav{
    position:static; display:flex; align-items:center; gap:var(--s2);
    background:none; border:0; padding:0; max-height:none; overflow:visible;
  }
  .nav ul{ display:flex; margin:0; gap:2px; }
  .nav a{ padding:8px 10px; font-size:.94rem; font-weight:600; }
  .search{ width:230px; }
  .nav__yt{ margin:0; padding:8px 12px; }
  .nav__yt span{ display:none; }
}

/* =============================== hero =============================== */
.hero{
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(224,178,92,.14), transparent 60%),
    radial-gradient(50% 80% at 90% 10%, rgba(90,70,220,.20), transparent 60%),
    var(--ink);
  border-bottom:1px solid var(--line);
  padding-block:var(--s5) var(--s6);
}
.hero__in{ display:grid; gap:var(--s5); }
.hero h1{ font-size:var(--fs-h1); line-height:1.12; margin:0 0 var(--s2); letter-spacing:-.02em; }
.hero__d{ color:var(--txt-2); margin:0 0 var(--s4); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); }

.hero__card{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; box-shadow:var(--shadow); border:1px solid var(--line);
}
.hero__card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.hero__card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,6,20,.94) 8%, rgba(8,6,20,.1) 60%);
}
.hero__badge{
  position:absolute; top:var(--s2); left:var(--s2); z-index:2;
  background:var(--gold); color:#1a1400; font-size:.75rem; font-weight:800;
  padding:5px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
}
.hero__ct{
  position:absolute; z-index:2; left:var(--s3); right:var(--s3); bottom:var(--s3);
  margin:0; color:#fff; font-size:var(--fs-h3); line-height:1.3;
}
.hero__card:hover .hero__ct{ color:var(--gold-2); }

@media (min-width:900px){
  .hero__in{ grid-template-columns:1fr 1fr; align-items:center; }
}

/* =============================== secciones =============================== */
.sec__h{
  font-size:var(--fs-h2); margin:var(--s6) 0 var(--s3); letter-spacing:-.01em;
  display:flex; align-items:center; gap:var(--s2);
}
.sec__h::after{ content:""; flex:1; height:1px; background:var(--line); }

.pagehead{ padding-block:var(--s5) var(--s2); }
.pagehead h1{ font-size:var(--fs-h1); line-height:1.15; margin:0 0 var(--s2); letter-spacing:-.02em; }
.pagehead p{ color:var(--txt-2); margin:0; max-width:70ch; }

/* culturas */
.culturas__l{ list-style:none; margin:0 0 var(--s5); padding:0; display:grid; gap:var(--s2); }
.culturas__l a{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
  min-height:56px; padding:var(--s2) var(--s3);
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  color:var(--txt); text-decoration:none; font-weight:700; transition:var(--t);
}
.culturas__l a:hover{ background:var(--surf-2); border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.culturas__l span{ color:var(--txt-3); font-weight:600; font-size:.9rem; }
@media (min-width:640px){ .culturas__l{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .culturas__l{ grid-template-columns:repeat(3,1fr); } }

/* intro de categoria (HTML heredado del WordPress: lleva enlaces internos) */
.catintro{ color:var(--txt-2); max-width:72ch; }
.catintro p{ margin:0 0 var(--s2); }
.catintro h2{ font-size:var(--fs-h3); color:var(--txt); margin:0 0 var(--s2); }
.catintro ul{ margin:0 0 var(--s2); padding-left:1.3em; }
.catintro strong{ color:var(--txt); }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s3) 0 var(--s4); }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:8px 14px;
  background:var(--surf); border:1px solid var(--line); border-radius:999px;
  color:var(--txt); text-decoration:none; font-size:.92rem; font-weight:600;
}
.chip span{ color:var(--txt-3); font-size:.8rem; }
.chip:hover{ border-color:var(--gold); color:var(--gold); }

/* =============================== tarjetas =============================== */
.grid{ display:grid; gap:var(--s3); }
@media (min-width:768px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:var(--t);
}
.card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow); }
.card__link{ color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }
.card__media{ position:relative; }
.card__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.card__vid{
  position:absolute; bottom:var(--s1); right:var(--s1);
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(8,6,20,.85); color:#fff; font-size:.72rem; font-weight:700;
  padding:5px 9px; border-radius:999px;
}
.card__vid svg{ color:var(--red); }
.card__body{ padding:var(--s3); display:flex; flex-direction:column; gap:var(--s1); flex:1; }
.card__cat{ color:var(--gold); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.card__t{ font-size:1.12rem; line-height:1.35; margin:0; }
.card:hover .card__t{ color:var(--gold-2); }
.card__d{ color:var(--txt-2); font-size:.94rem; margin:0; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card__meta{ color:var(--txt-3); font-size:.82rem; }

/* =============================== migas =============================== */
.crumbs{ padding-block:var(--s3) 0; font-size:.86rem; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.crumbs li+li::before{ content:"/"; color:var(--txt-3); margin-right:6px; }
.crumbs a{ color:var(--txt-2); text-decoration:none; }
.crumbs a:hover{ color:var(--gold); }
.crumbs [aria-current]{ color:var(--txt-3); }

/* =============================== post =============================== */
.post__hd{ padding-block:var(--s3) var(--s3); }
.post__hd h1{ font-size:var(--fs-h1); line-height:1.14; margin:var(--s1) 0 var(--s2); letter-spacing:-.02em; }
.post__cat{
  color:var(--gold); font-size:.76rem; font-weight:800; text-decoration:none;
  text-transform:uppercase; letter-spacing:.06em;
}
.post__meta{ color:var(--txt-3); font-size:.88rem; margin:0; }

.post__hero{ margin:0 0 var(--s4); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.post__hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.post__wrap{ padding-bottom:var(--s5); }
.post__body{ max-width:72ch; margin-inline:auto; }
.post__body h2{ font-size:var(--fs-h2); line-height:1.25; margin:var(--s5) 0 var(--s2); letter-spacing:-.01em; scroll-margin-top:84px; }
.post__body h3{ font-size:var(--fs-h3); line-height:1.3; margin:var(--s4) 0 var(--s2); }
.post__body h4{ font-size:1.08rem; margin:var(--s3) 0 var(--s1); color:var(--txt-2); }
.post__body p{ margin:0 0 var(--s3); }
.post__body ul,.post__body ol{ margin:0 0 var(--s3); padding-left:1.3em; }
.post__body li{ margin-bottom:var(--s1); }
.post__body strong{ color:#fff; }
.post__body figure{ margin:var(--s4) 0; }
.post__body img{ border-radius:var(--r); width:100%; }
.post__body figcaption{ color:var(--txt-3); font-size:.85rem; margin-top:var(--s1); text-align:center; }
.post__body blockquote{
  margin:var(--s4) 0; padding:var(--s2) var(--s3);
  border-left:3px solid var(--gold); background:var(--ink-2); border-radius:0 var(--r) var(--r) 0;
  color:var(--txt-2); font-style:italic;
}
.post__body table{ width:100%; border-collapse:collapse; margin:var(--s3) 0; font-size:.94rem; }
.post__body th,.post__body td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.post__body th{ background:var(--surf); }
.post__body :where(table){ display:block; overflow-x:auto; }

/* indice */
.toc{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s3); margin:0 0 var(--s5);
}
.toc__h{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-3); margin:0 0 var(--s2); }
.toc ol{ margin:0; padding-left:1.2em; display:grid; gap:6px; }
.toc a{ color:var(--txt); text-decoration:none; font-size:.95rem; }
.toc a:hover{ color:var(--gold); text-decoration:underline; }

/* =============================== YouTube =============================== */
.yt{ position:relative; margin:var(--s4) 0; border-radius:var(--r); overflow:hidden; background:#000; }
.yt__btn{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  position:relative; line-height:0;
}
.yt__btn img{ width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.85; transition:var(--t); }
.yt__btn:hover img{ opacity:1; }
.yt__play{
  position:absolute; inset:0; display:grid; place-content:center;
}
.yt__play svg{ filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); opacity:.9; transition:var(--t); }
.yt__btn:hover .yt__play svg{ opacity:1; transform:scale(1.06); }
.yt iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

.cta-yt{
  display:grid; gap:var(--s2); align-items:center;
  margin:var(--s5) 0; padding:var(--s3);
  background:linear-gradient(140deg, var(--surf), var(--ink-2));
  border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--r-lg);
}
.cta-yt__ico{ color:var(--red); }
.cta-yt__t{ font-weight:800; margin:0 0 4px; font-size:1.1rem; }
.cta-yt__d{ color:var(--txt-2); margin:0; font-size:.94rem; }
@media (min-width:720px){
  .cta-yt{ grid-template-columns:auto 1fr auto; gap:var(--s3); }
}

/* =============================== formulario =============================== */
.form{ max-width:640px; }
.form__row{ display:grid; gap:var(--s2); }
@media (min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }
.field{ margin-bottom:var(--s3); }
.field label{ display:block; font-weight:600; margin-bottom:6px; font-size:.95rem; }
.field input,.field textarea{
  width:100%; background:var(--ink); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; font:inherit; font-size:16px;   /* 16px: evita el zoom de iOS */
}
.field input:focus,.field textarea:focus{ border-color:var(--gold); }
.field [aria-invalid="true"]{ border-color:#ff6b6b; }
.field textarea{ resize:vertical; min-height:140px; }
.field--check{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; }
.field--check input{ width:22px; height:22px; margin-top:2px; accent-color:var(--gold); }
.field--check label{ margin:0; font-weight:400; color:var(--txt-2); }
.field--check .err{ grid-column:1/-1; }
.err{ color:#ff8a8a; font-size:.87rem; margin:6px 0 0; }
.form__note{ color:var(--txt-3); font-size:.85rem; margin-top:var(--s2); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.aviso{ padding:var(--s3); border-radius:var(--r-lg); border:1px solid var(--line); }
.aviso--ok{ background:var(--surf); border-left:3px solid var(--gold); }
.aviso--ok h2{ margin:0 0 var(--s1); font-size:var(--fs-h3); }
.aviso--err{ background:rgba(255,60,60,.08); border-left:3px solid #ff6b6b; color:#ffbdbd; }

/* =============================== botones =============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
  min-height:48px; padding:12px 22px;
  border-radius:var(--r); border:1px solid transparent;
  font-weight:700; text-decoration:none; cursor:pointer; transition:var(--t);
  font-size:1rem;
}
.btn--primary{ background:var(--gold); color:#1a1400; }
.btn--primary:hover{ background:var(--gold-2); color:#1a1400; transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--txt); background:transparent; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--yt{ background:var(--red); color:#fff; white-space:nowrap; }
.btn--yt:hover{ background:#e6002e; color:#fff; transform:translateY(-2px); }

/* =============================== paginacion =============================== */
.pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s2); margin:var(--s5) 0; }
.pager__a{ color:var(--txt); text-decoration:none; font-weight:600; padding:10px 14px; min-height:44px;
  display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); }
.pager__a:hover{ border-color:var(--gold); color:var(--gold); }
.pager__n{ list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center; }
.pager__n a,.pager__n span{
  display:grid; place-content:center; min-width:44px; min-height:44px;
  border-radius:var(--r); text-decoration:none; color:var(--txt-2);
}
.pager__n a:hover{ background:var(--surf); color:var(--gold); }
.pager__n [aria-current]{ background:var(--gold); color:#1a1400; font-weight:800; }

.backlink{ color:var(--txt-2); }
.empty{ color:var(--txt-2); max-width:60ch; }

/* =============================== footer =============================== */
.ftr{ background:var(--ink-2); border-top:1px solid var(--line); margin-top:var(--s7); padding-block:var(--s5) var(--s3); }
.ftr__grid{ display:grid; gap:var(--s5); }
@media (min-width:768px){ .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--s4); } }
.ftr__brand{ font-weight:800; font-size:1.15rem; margin:0 0 4px; }
.ftr__tag{ color:var(--txt-2); margin:0 0 var(--s3); font-size:.95rem; }
.ftr__h{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-3); margin:0 0 var(--s2); }
.ftr nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ftr nav a{ color:var(--txt-2); text-decoration:none; font-size:.95rem; display:inline-block; padding:6px 0; }
.ftr nav a:hover{ color:var(--gold); }
.ftr__bar{ border-top:1px solid var(--line); margin-top:var(--s5); padding-top:var(--s3);
  color:var(--txt-3); font-size:.85rem; text-align:center; }

/* =============================== volver arriba =============================== */
.totop{
  position:fixed; right:16px; bottom:16px; z-index:40;
  width:48px; height:48px; display:grid; place-content:center;
  background:var(--gold); color:#1a1400; border:0; border-radius:50%;
  box-shadow:var(--shadow); cursor:pointer; transition:var(--t);
}
.totop[hidden]{ display:none; }
.totop:hover{ background:var(--gold-2); transform:translateY(-3px); }