/* ============================================================
   POUPETTE — Site CSS (todas las páginas excepto landing)
   Basado en poupette-theme base.css + components.css + poupette-child style.css
   ============================================================ */

/* ── TOKENS (valores exactos del poupette-theme/base.css) ── */
:root{
  --bg:      #f3f0ec;          /* crema cálido original */
  --surface: #ffffff;
  --text:    #121212;
  --muted:   rgba(18,18,18,.62);
  --hairline: rgba(18,18,18,.12);
  --accent:  #121212;
  --radius:  16px;
  --serif:   'Fraunces', ui-serif, Georgia, serif;
  --sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shell:   1180px;
  --gutter:  20px;
}
html[data-theme="dark"]{
  --bg:      #0c0d0f;
  --surface: #111216;
  --text:    rgba(255,255,255,.92);
  --muted:   rgba(255,255,255,.62);
  --hairline: rgba(255,255,255,.14);
  --accent:  rgba(255,255,255,.92);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.p-shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--gutter); }

/* ── HEADER ── */
.p-header{
  position: sticky;
  top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: none !important;   /* child theme override */
  box-shadow: none !important;
  height: 64px; min-height: 64px;
  display: flex; align-items: center;
}
.p-header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 64px; min-height: 64px;
  padding: 0 20px;
  width: 100%; max-width: var(--shell); margin: 0 auto;
}
.p-header__left{ display:flex; align-items:center; gap:16px; }
.p-header__right{ display:flex; align-items:center; gap:12px; }

/* ── LOGO ── */
.p-logo-light, .p-logo-dark{ display:none; align-items:center; }
html[data-theme="light"] .p-logo-light{ display:inline-flex; }
html[data-theme="dark"]  .p-logo-dark { display:inline-flex; }
.p-logo__link{ display:flex; align-items:center; }
.p-logo__img{ display:block; height:52px; width:auto; }   /* 52px = valor exacto del theme */

/* ── BURGER ── */
.p-burger{
  display: none;
  width:28px; height:28px;
  background:none; border:0; padding:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px;
}
.p-burger span{
  width:24px; height:2px;
  background:var(--text);
  transition: transform .22s ease, opacity .18s ease;
}
/* animación X (offsets del theme original) */
body.p-nav-open .p-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.p-nav-open .p-burger span:nth-child(2){ opacity:0; }
body.p-nav-open .p-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ── NAV DESKTOP ── */
.p-nav--desktop{ display:flex; align-items:center; height:64px; margin-left:15px; }
.p-nav__menu{ list-style:none; display:flex; align-items:center; gap:20px; height:64px; }
.p-nav__menu a{
  font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  opacity:.86; line-height:64px;
  transition: opacity .18s ease;
}
.p-nav__menu a:hover{ opacity:1; }
.p-nav__menu .current > a{ font-weight:600; opacity:1; }

/* ── THEME TOGGLE ── */
.p-theme-toggle{
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--hairline);
  background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.p-theme-toggle__dot{
  width:10px; height:10px; border-radius:999px;
  background:var(--text);
}

/* ── CART (child theme: 40px, border theme-aware) ── */
.p-cart{
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; text-decoration:none; color:inherit;
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);   /* dark default */
}
[data-theme="light"] .p-cart{ border:1px solid rgba(0,0,0,0.18); }
.p-cart svg{ width:18px; height:18px; display:block; opacity:.92; }

/* Badge: dark=claro, light=oscuro */
.p-cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; border-radius:999px;
  font-size:11px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  background:#f3f0ec; color:#111;
  border:1px solid rgba(255,255,255,0.25);
}
[data-theme="light"] .p-cart-badge{
  background:#111; color:#fff;
  border:1px solid rgba(0,0,0,0.25);
}
.p-cart-badge[data-count="0"]{ display:none; }

/* ── USER ICON ── */
.p-user-icon{
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--hairline);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); background:transparent;
  transition: background-color .2s ease;
}
.p-user-icon:hover{ background-color:rgba(0,0,0,.04); }
[data-theme="dark"] .p-user-icon:hover{ background-color:rgba(255,255,255,.08); }

/* ── NAV MOBILE (fullscreen Vogue-style) ── */
.p-nav--mobile{
  position:fixed; inset:0; z-index:50;
  background:var(--bg);
  transform:translateX(-100%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  padding:28px 24px;
  display:flex; flex-direction:column;
}
body.p-nav-open .p-nav--mobile{ transform:translateX(0); }

.p-nav--mobile .p-nav__menu{
  flex-direction:column; align-items:flex-start;
  gap:22px; height:auto; margin-top:72px;
}
.p-nav--mobile .p-nav__menu a{
  font-size:20px; letter-spacing:.14em; font-weight:500;
  line-height:1; opacity:.92;
}
.p-nav--mobile .p-nav__menu a:hover{ opacity:1; }

.p-nav__overlay{
  position:fixed; inset:0; z-index:49;
  background:transparent; display:none;
}
body.p-nav-open .p-nav__overlay{ display:block; }
body.p-nav-open .p-header{ background:transparent; border-bottom:none; backdrop-filter:none; }
body.p-nav-open .p-logo__link,
body.p-nav-open .p-header__right{ opacity:0; pointer-events:none; }
body.p-nav-open .p-burger{ position:fixed; top:18px; left:20px; z-index:60; }
body.p-lock-nav{ overflow:hidden; }

/* Breakpoints header */
@media(min-width:981px){
  .p-burger{ display:none !important; }
  .p-nav--mobile{ display:none !important; }
}
@media(max-width:980px){
  .p-burger{ display:flex; }
  .p-nav--desktop{ display:none !important; }
  .p-header__right{ justify-self:end; }
}
@media(max-width:560px){ .p-header__right{ gap:6px; } }

/* ── MAIN ── */
.p-main{ padding:28px 0 56px; }

/* ── FOOTER (child theme: sin border-top, 60px padding, 12px/2px) ── */
.p-footer{
  border-top: none !important;
  padding: 60px 0;
  font-family: var(--sans);
}
html[data-theme="light"] .p-footer{ background:#f3f0ec; color:#121212; }
html[data-theme="dark"]  .p-footer{ background:#0c0d0f; color:#fff; }

.p-footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  gap:40px;
}
.p-footer-links{ display:flex; gap:60px; }
.p-footer-links a,
.p-footer-brand,
.p-footer-credit a{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  color:inherit;
  opacity:.65;
  transition:opacity .18s;
}
.p-footer-links a:hover,
.p-footer-credit a:hover{ opacity:1; }
.p-footer-brand{ opacity:.65; }
.p-footer-credit{ justify-self:end; }

@media(max-width:1024px){
  .p-footer-grid{ grid-template-columns:repeat(2,1fr); row-gap:48px; }
  .p-footer-credit{ justify-self:start; }
}
@media(max-width:640px){
  .p-footer-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"brand credit" "primary social";
    row-gap:36px; align-items:start;
  }
  .p-footer-brand{ grid-area:brand; }
  .p-footer-credit{ grid-area:credit; justify-self:end; }
  .p-footer-links--primary{ grid-area:primary; flex-direction:column; gap:14px; }
  .p-footer-links--social{ grid-area:social; flex-direction:column; gap:14px; align-items:flex-end; }
}

/* ── UTILITIES ── */
.p-meta{ font-size:11px; color:var(--muted); letter-spacing:.04em; }
.p-label{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:inline-block; transition:color .15s;
}
.p-label:hover{ color:var(--text); }

/* ── HOME HERO ── */
.p-home-hero{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:28px; align-items:start;
  padding:24px 0 0;
}
@media(max-width:900px){ .p-home-hero{ grid-template-columns:1fr; } }

.p-home-hero__img{ aspect-ratio:16/9; overflow:hidden; display:block; }
.p-home-hero__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease;
}
.p-home-hero__img:hover img{ transform:scale(1.03); }

.p-home-hero__body{ display:flex; flex-direction:column; gap:12px; padding-top:4px; }
.p-home-hero__cat{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.p-home-hero__title{
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.1; letter-spacing:-.01em;
}
.p-home-hero__dek{ font-size:14px; line-height:1.75; color:var(--muted); }
.p-home-hero__meta{ display:flex; gap:10px; align-items:center; }

/* ── HOME SECTIONS (POPEYE style) ── */
.p-home-section{ padding:32px 0; border-top:1px solid var(--hairline); }
.p-home-section__head{ display:flex; align-items:baseline; gap:20px; margin-bottom:20px; }
.p-home-section__title{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:var(--text);
}
.p-home-section__rule{ flex:1; height:1px; background:var(--hairline); }

.p-home-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:768px){ .p-home-row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .p-home-row{ grid-template-columns:1fr; } }

/* ── ARTICLE CARD ── */
.p-article-card{ display:flex; flex-direction:column; gap:10px; color:inherit; }
.p-article-card__img{ aspect-ratio:3/2; overflow:hidden; background:var(--surface); }
.p-article-card__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.p-article-card:hover .p-article-card__img img{ transform:scale(1.04); }
.p-article-card__date{ font-size:10px; color:var(--muted); letter-spacing:.06em; }
.p-article-card__title{ font-family:var(--serif); font-size:16px; line-height:1.3; }

/* ── CATEGORY PAGE ── */
.p-cat-header{ padding:40px 0 28px; border-bottom:1px solid var(--hairline); margin-bottom:36px; }
.p-cat-title{
  font-family:var(--sans);
  font-size:clamp(36px,6vw,72px);
  font-weight:500; letter-spacing:-.02em; line-height:1; margin-bottom:10px;
}
.p-cat-desc{ font-size:14px; color:var(--muted); max-width:48ch; line-height:1.7; }

.p-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:768px){ .p-cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .p-cat-grid{ grid-template-columns:1fr; } }

/* ── ARTICLE SINGLE ── */
.p-progress{
  position:fixed; top:0; left:0;
  width:100%; height:2px; z-index:100;
  background:transparent; pointer-events:none;
}
.p-progress span{ display:block; height:100%; width:0; background:var(--text); transition:width .1s linear; }

.p-article{ padding:32px 0 48px; }
.p-article__head{ max-width:720px; margin:0 auto 20px; }
.p-article__meta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.p-article__title{
  font-family:var(--serif);
  font-size:clamp(28px,3.5vw,48px);
  line-height:1.05; margin-bottom:12px; letter-spacing:-.01em;
}
.p-article__dek{ font-size:16px; color:var(--muted); line-height:1.75; }

.p-article__hero{ max-width:960px; margin:28px auto 0; }
.p-article__hero img{ width:100%; border:1px solid var(--hairline); }

.p-article__body{ max-width:680px; margin:32px auto 0; font-size:17px; line-height:1.85; }
.p-article__body p{ margin-bottom:1.2em; }
.p-article__body h2{
  font-family:var(--serif); font-size:26px;
  margin:2.2em 0 .8em; line-height:1.2; letter-spacing:-.01em;
}
.p-article__body blockquote{
  border-left:2px solid var(--hairline);
  padding-left:22px; color:var(--muted);
  margin:2em 0; font-size:18px; line-height:1.7;
}

.p-article__tags{
  max-width:680px; margin:40px auto 0;
  padding-top:20px; border-top:1px solid var(--hairline);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* ── RELATED POSTS ── */
.p-related{ padding:0 0 56px; }
.p-related__head{ display:flex; align-items:baseline; gap:16px; margin-bottom:20px; }
.p-related__title{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:500; }
.p-related__rule{ flex:1; height:1px; background:var(--hairline); }
.p-related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:600px){ .p-related__grid{ grid-template-columns:1fr; } }

/* ── LIBROS / SHOP ── */
.p-libros-header{
  background:#1C3A2B;
  height:64px; display:flex; align-items:center;
  position:sticky; top:0; z-index:20;
}
.p-libros-header__inner{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; width:100%; padding:0 20px;
  max-width:var(--shell); margin:0 auto;
}
.p-libros-header__logo{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; font-weight:500; grid-column:2; justify-self:center;
}
.p-libros-header__actions{ display:flex; align-items:center; gap:12px; }
.p-libros-header__icon{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:.8; cursor:pointer; background:none; border:none; position:relative;
}

.p-libros-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--hairline); margin-top:1px;
}
.p-libros-card{
  display:flex; flex-direction:column;
  padding:32px 28px 28px; position:relative;
  min-height:440px; cursor:pointer; text-decoration:none;
  transition:filter .2s;
}
.p-libros-card:hover{ filter:brightness(.94); }
.p-libros-card__price{
  position:absolute; top:20px; right:20px;
  font-size:13px; font-weight:500; letter-spacing:.04em;
  color:rgba(255,255,255,.85);
}
.p-libros-card__img{
  flex:1; display:flex; align-items:center; justify-content:center; padding:20px 0;
}
.p-libros-card__img img{ max-height:200px; width:auto; box-shadow:0 8px 40px rgba(0,0,0,.30); }
.p-libros-card__meta{ margin-top:16px; }
.p-libros-card__author{
  font-size:11px; color:rgba(255,255,255,.6);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px;
}
.p-libros-card__title{ font-size:17px; font-weight:600; color:#fff; line-height:1.25; margin-bottom:8px; }
.p-libros-card__cat{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.p-libros-card__add{
  position:absolute; bottom:20px; right:20px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:18px; display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; line-height:1; transition:background .2s;
}
.p-libros-card__add:hover{ background:rgba(255,255,255,.32); }

@media(max-width:640px){ .p-libros-grid{ grid-template-columns:1fr; } }