/* ═══════════════════════════════════════════════════════════════
   OTAFUKU — páginas interiores (blog y 404)
   ---------------------------------------------------------------
   El HTML del blog lo arma seratta-admin, igual para todas las marcas
   (src/lib/sitios/plantilla.ts), y cada sitio lo viste con su propio
   paginas.css. Las clases (.pg-*, .bl-*, .ar-*) son las mismas.

   Paleta de la home de Otafuku: hueso, tinta y un bronce para los acentos.
   El logo y el sello son DORADOS: sobre hueso casi no se leen, así que la
   cabecera y el pie son oscuros. Bodoni Moda en los títulos (como la home),
   Archivo para leer. Contraste: tinta #12100E sobre hueso ≈ 16:1; tinta-2
   #5E574D sobre hueso ≈ 6:1; bronce #7C5E2E sobre hueso ≈ 5,3:1.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --sand:#F3EFE8; --sand-2:#E9E3D8; --sand-3:#FAF7F2;
  --ink:#12100E; --ink-2:#5E574D; --ink-3:#8B8478;
  --red:#7C5E2E; --red-dark:#5A431F;   /* bronce (el nombre «red» se conserva: lo usan todas las reglas heredadas) */
  --night:#12100E; --cream:#F3EFE8; --cream-2:#C9C1B3; --oro:#D4B88A;
  --linea:rgba(18,16,14,.16);
  --pad:clamp(1.1rem,4vw,3.4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ff:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --m:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --s:"Bodoni Moda",Didot,Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--ff); font-weight:400; line-height:1.7;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem); overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-color:var(--sand);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--red); color:var(--cream)}

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:999; transform:translateY(-160%);
  background:var(--ink); color:var(--cream); padding:.7rem 1.1rem; font-weight:600; text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
main:focus{outline:none}

/* ── cabecera ─────────────────────────────────────────────────── */
.pg-hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1.5rem;
  padding:.7rem var(--pad); background:rgba(18,16,14,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(243,239,232,.12);
}
.pg-brand{display:flex; align-items:center; min-height:44px}
.pg-brand img{height:26px; width:auto}
.pg-nav{display:flex; align-items:center; flex-wrap:wrap; gap:.2rem clamp(1rem,2.4vw,2rem)}
.pg-nav a:not(.pg-btn){
  font-size:.78rem; font-weight:500; letter-spacing:.02em; text-decoration:none;
  color:var(--cream-2); padding:.75rem 0; transition:color .3s var(--ease);
}
.pg-nav a:not(.pg-btn):hover,.pg-nav a[aria-current="page"]{color:var(--cream)}
.pg-nav a[aria-current="page"]{box-shadow:inset 0 -2px var(--oro)}

/* ── botones ──────────────────────────────────────────────────── */
.pg-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:.8rem 1.7rem;
  border-radius:999px; background:var(--red); color:var(--cream); border:1px solid var(--red);
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-decoration:none; cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.pg-btn:hover{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.pg-btn--ghost{background:transparent; border-color:var(--ink); color:var(--ink)}
.pg-btn--ghost:hover{background:var(--ink); color:var(--cream)}
.pg-hdr .pg-btn{background:var(--oro); color:var(--ink); border-color:var(--oro)}
.pg-hdr .pg-btn:hover{background:var(--cream); border-color:var(--cream); color:var(--ink)}
.pg-btn--sm{min-height:40px; padding:.55rem 1.2rem; font-size:.72rem}
.pg-acciones{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem}

/* ── tipografía de página ─────────────────────────────────────── */
.pg-main{padding:clamp(3rem,9vh,6rem) var(--pad) 0; max-width:1360px; margin:0 auto}
.pg-eyebrow{
  font-family:var(--m); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0 0 1.1rem;
}
.pg-h1{
  font-family:var(--s); color:var(--ink); font-weight:400; text-transform:none; margin:0 0 1.3rem; max-width:16ch;
  font-size:clamp(2.2rem,1.1rem + 4.6vw,5rem); line-height:.95; letter-spacing:-.005em;
}
.pg-h1 em{font-family:var(--s); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--red)}
.pg-h1--ar{max-width:none; font-size:clamp(1.9rem,1.3rem + 2.6vw,3.3rem); line-height:1.05}
.pg-lead{max-width:60ch; font-size:1.08em; margin:0; color:var(--ink-2)}
.hint{font-size:.86rem; color:var(--ink-2); line-height:1.55; margin:0}

/* ── blog: listado ────────────────────────────────────────────── */
.bl-grid{
  list-style:none; margin:clamp(2.8rem,7vh,4.5rem) 0 0; padding:0;
  display:grid; gap:clamp(1.6rem,3vw,2.4rem) clamp(1.1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
}
.bl-card a{
  display:block; height:100%; text-decoration:none; color:inherit; padding:.7rem;
  border:1px solid var(--linea); border-radius:18px; background:var(--sand-3);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.bl-card a:hover,.bl-card a:focus-visible{border-color:var(--red); transform:translateY(-4px); box-shadow:0 18px 40px -26px rgba(18,16,14,.55)}
.bl-card figure{margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:12px; background:var(--sand-2)}
.bl-card img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.bl-card a:hover img{transform:scale(1.05)}
.bl-sin{background:radial-gradient(circle at 50% 40%,rgba(212,184,138,.4),transparent 62%),var(--sand-2)!important}
.bl-card h2{font-family:var(--s); font-size:1.3rem; font-weight:500; line-height:1.2; color:var(--ink); margin:1rem .4rem .5rem}
.bl-card p{font-size:.93rem; color:var(--ink-2); margin:0 .4rem .3rem; line-height:1.6}
.bl-meta{font-family:var(--m); font-size:.66rem!important; letter-spacing:.1em; text-transform:uppercase; color:var(--red)!important; font-weight:500; margin:.9rem .4rem .3rem!important}

/* ── blog: artículo ───────────────────────────────────────────── */
.ar{max-width:46rem; margin:0 auto}
.ar-back{
  display:inline-block; margin-bottom:2rem; padding:.5rem 0; font-family:var(--m); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); transition:color .3s;
}
.ar-back:hover{color:var(--red)}
.ar-cover{margin:clamp(2.2rem,5vh,3rem) 0; overflow:hidden; border-radius:18px; border:1px solid var(--linea)}
.ar-cover img{width:100%; max-height:34rem; object-fit:cover}
.ar-body{margin-top:2rem}
.ar-body h2{font-family:var(--s); color:var(--ink); font-weight:500; text-transform:none; letter-spacing:0; font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem); line-height:1.1; margin:2.6rem 0 1rem}
.ar-body h3{font-family:var(--s); color:var(--ink); font-weight:500; font-size:1.2rem; line-height:1.3; margin:2.1rem 0 .8rem}
.ar-body p{margin:0 0 1.25rem}
.ar-body strong{color:var(--ink); font-weight:700}
.ar-body a{color:var(--red); text-underline-offset:3px}
.ar-body a:hover{color:var(--red-dark)}
.ar-body ul{margin:0 0 1.5rem; padding-left:1.2rem}
.ar-body li{margin-bottom:.5rem; padding-left:.3rem}
.ar-body li::marker{color:var(--red)}
.ar-body figure{margin:2.4rem 0; overflow:hidden; border-radius:14px; border:1px solid var(--linea)}
.ar-body blockquote{margin:2.4rem 0; padding:1.1rem 1.4rem; border-left:3px solid var(--red); background:rgba(124,94,46,.08)}
.ar-body blockquote p{font-family:var(--s); font-style:italic; color:var(--ink); font-size:1.3rem; line-height:1.5; margin:0}
.ar-faq{margin:3rem 0 0; border-top:1px solid var(--linea)}
.ar-faq h2{font-family:var(--m); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:2rem 0 .6rem}
.ar-faq details{border-bottom:1px solid var(--linea)}
.ar-faq summary{cursor:pointer; color:var(--ink); font-weight:600; padding:1.1rem 2rem 1.1rem 0; list-style:none; position:relative}
.ar-faq summary::-webkit-details-marker{display:none}
.ar-faq summary::after{content:"+"; position:absolute; right:0; top:1rem; color:var(--red); font-size:1.2rem}
.ar-faq details[open] summary::after{content:"−"}
.ar-faq details p{margin:0 0 1.2rem}
.ar-cta{
  max-width:46rem; margin:clamp(3.5rem,9vh,5rem) auto 0; padding:clamp(1.8rem,4vw,2.6rem); text-align:center;
  border-radius:22px; background:var(--night); color:var(--cream);
}
.ar-cta h2{font-family:var(--s); color:var(--cream); font-weight:400; text-transform:none; letter-spacing:0; font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem); line-height:1; margin:0 0 .7rem}
.ar-cta p{margin:0 auto 1.7rem; max-width:42ch; color:rgba(243,239,232,.9)}
.ar-cta .pg-btn{background:var(--oro); color:var(--ink); border-color:var(--oro)}
.ar-cta .pg-btn:hover{background:var(--cream); border-color:var(--cream); color:var(--ink)}
.ar-ciudades{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem}
.ar-rel{max-width:1360px; margin:clamp(4rem,10vh,6rem) auto 0}
.ar-rel .bl-grid{margin-top:1.2rem}

/* ── pie ──────────────────────────────────────────────────────── */
.pg-ft{
  margin-top:clamp(4.5rem,12vh,7rem); padding:clamp(2.4rem,6vh,3.4rem) var(--pad) 1.6rem;
  background:var(--night); color:rgba(243,239,232,.85);
  display:grid; gap:2.2rem 3rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
/* el logo es dorado sobre transparente: se lee tal cual sobre el pie oscuro */
.pg-ft img{height:30px; width:auto; margin-bottom:.9rem}
.pg-ft p{max-width:34ch; font-size:.84rem; color:rgba(243,239,232,.7); margin:0; line-height:1.6}
.pg-ft .pg-legal{margin-top:1rem; font-size:.72rem; letter-spacing:.04em}
.pg-ft h2{font-family:var(--m); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--oro); margin:0 0 .9rem}
.pg-ft ul{list-style:none; margin:0; padding:0}
.pg-ft li a{display:inline-block; padding:.4rem 0; font-size:.88rem; color:rgba(243,239,232,.9); text-decoration:none; transition:color .35s var(--ease),transform .35s var(--ease)}
.pg-ft li a:hover{color:#fff; transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important}
}