/* =========================================================
   PUN CORE — main.css
   Arquitectura: reset > tokens > layout > componentes > utilidades
   Minimalismo técnico. Mobile-first. WCAG AA.
   ========================================================= */

/* ---------- RESET LIGERO ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; height: auto; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- ACCESIBILIDAD ---------- */
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.pun-skip-link{
  position:absolute;
  top:-999px;
  left:0;
  background:var(--pun-lime);
  color:var(--pun-black);
  padding:var(--pun-space-2) var(--pun-space-3);
  z-index:10000;
  font-weight:600;
}
.pun-skip-link:focus{
  top:0;
  position:fixed;
}
:focus-visible{
  outline:2px solid var(--pun-lime);
  outline-offset:2px;
}

/* ---------- LAYOUT BASE ---------- */
.pun-container{
  max-width:var(--pun-max-width);
  margin-inline:auto;
  padding-inline:var(--pun-space-4);
}
.pun-main{ padding-block:var(--pun-space-6); }
.pun-section-title{
  font-size:clamp(1.5rem,2.5vw,2.25rem);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:var(--pun-space-5);
}
.pun-page-title{
  font-size:clamp(1.75rem,3vw,3rem);
  font-weight:800;
  letter-spacing:-0.03em;
  margin:0 0 var(--pun-space-4);
}

/* ---------- BOTONES ---------- */
.pun-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--pun-space-2);
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid transparent;
  background:var(--pun-black);
  color:var(--pun-white);
  transition:transform var(--pun-transition), background var(--pun-transition);
}
.pun-btn:hover{ transform:translateY(-2px); }
.pun-btn--cta{
  background:var(--pun-lime);
  color:var(--pun-black);
}
.pun-btn--cta:hover{ background:var(--pun-lime-dark); }
.pun-btn--lg{ padding:18px 36px; font-size:1.05rem; }
.pun-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--pun-gray-300);
  position:relative;
}
.pun-btn-icon:hover{ background:var(--pun-gray-100); }
.pun-btn-icon svg{ width:20px;height:20px; }

/* ---------- HEADER ---------- */
.pun-header{
  position:relative;
  background:var(--pun-white);
  border-bottom:1px solid var(--pun-gray-100);
  z-index:1000;
}
body.has-sticky-header .pun-header{
  position:sticky;
  top:0;
}
.pun-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--pun-space-4);
  padding-block:var(--pun-space-3);
}
.pun-header__logo-text{
  font-weight:800;
  font-size:1.4rem;
  letter-spacing:-0.03em;
}
.pun-header__menu{
  display:flex;
  gap:var(--pun-space-4);
}
.pun-header__menu a{
  font-weight:600;
  font-size:0.95rem;
  position:relative;
}
.pun-header__menu a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:2px;
  background:var(--pun-lime);
}
.pun-header__actions{
  display:flex;
  align-items:center;
  gap:var(--pun-space-2);
}
.pun-cart-icon{ position:relative; }
.pun-cart-count{
  position:absolute;
  top:-4px;right:-4px;
  background:var(--pun-lime);
  color:var(--pun-black);
  font-size:0.65rem;
  font-weight:800;
  border-radius:50%;
  min-width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
}
.pun-menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
}
.pun-menu-toggle span{
  width:22px;height:2px;
  background:var(--pun-black);
  display:block;
}

@media (max-width: 880px){
  .pun-header__nav{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--pun-white);
    border-bottom:1px solid var(--pun-gray-100);
    display:none;
  }
  .pun-header__nav.is-open{ display:block; }
  .pun-header__menu{
    flex-direction:column;
    padding:var(--pun-space-4);
    gap:var(--pun-space-3);
  }
  .pun-menu-toggle{ display:flex; }
}

/* ---------- BREADCRUMB ---------- */
.pun-breadcrumb{
  padding-block:var(--pun-space-2);
}
.pun-breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:var(--pun-max-width);
  margin-inline:auto;
  padding-inline:var(--pun-space-4);
  font-size:0.8rem;
  color:var(--pun-gray-500);
}
.pun-breadcrumb__item:not(:last-child)::after{
  content:"/";
  margin-left:6px;
  color:var(--pun-gray-300);
}

/* ---------- HERO / FRONT PAGE ---------- */
.pun-hero{
  padding-block:var(--pun-space-7);
  text-align:center;
  background:linear-gradient(180deg,var(--pun-white) 0%,var(--pun-gray-100) 100%);
}
.pun-hero__title{
  font-size:clamp(2.5rem,6vw,5rem);
  font-weight:800;
  letter-spacing:-0.04em;
  margin:0 0 var(--pun-space-3);
}
.pun-hero__subtitle{
  font-size:1.15rem;
  color:var(--pun-gray-700);
  max-width:640px;
  margin:0 auto var(--pun-space-5);
}
.pun-featured-products{ padding-block:var(--pun-space-6); }
.pun-brand-values{ padding-block:var(--pun-space-6); }
.pun-brand-values__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--pun-space-5);
}
.pun-brand-values__item h3{
  font-size:1.1rem;
  margin-bottom:var(--pun-space-2);
}
.pun-brand-values__item p{
  color:var(--pun-gray-700);
  font-size:0.95rem;
}
@media (max-width:880px){
  .pun-brand-values__grid{ grid-template-columns:1fr; }
}

/* ---------- BLOG / POST GRID ---------- */
.pun-post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--pun-space-4);
}
@media (max-width:1024px){ .pun-post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pun-post-grid{ grid-template-columns:1fr; } }

.pun-card{
  border-radius:var(--pun-radius-md);
  overflow:hidden;
  background:var(--pun-white);
  border:1px solid var(--pun-gray-100);
  transition:box-shadow var(--pun-transition);
}
.pun-card:hover{ box-shadow:0 12px 32px rgba(0,0,0,.08); }
.pun-card__thumb img{ aspect-ratio:1/1; object-fit:cover; width:100%; }
.pun-card__body{ padding:var(--pun-space-3); }
.pun-card__title{ font-size:1.05rem; margin:0 0 var(--pun-space-2); }
.pun-card__excerpt{ font-size:0.9rem; color:var(--pun-gray-700); }
.pun-entry-meta{
  display:flex;
  gap:var(--pun-space-2);
  font-size:0.8rem;
  color:var(--pun-gray-500);
  margin-top:var(--pun-space-2);
}

/* ---------- SINGLE / PAGE ---------- */
.pun-single, .pun-page{ max-width:820px; margin-inline:auto; }
.pun-single__thumbnail img,
.pun-page__thumbnail img{
  border-radius:var(--pun-radius-lg);
  margin-bottom:var(--pun-space-5);
}
.pun-single__category{
  display:inline-block;
  background:var(--pun-lime);
  color:var(--pun-black);
  font-size:0.75rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:var(--pun-space-2);
}
.pun-single__content, .pun-page__content{
  font-size:1.05rem;
  line-height:1.7;
}
.pun-single__content > * + *,
.pun-page__content > * + *{ margin-top:var(--pun-space-3); }

/* ---------- 404 ---------- */
.pun-404{ text-align:center; padding-block:var(--pun-space-7); }
.pun-404__code{
  font-size:6rem;
  font-weight:800;
  color:var(--pun-gray-300);
  display:block;
  line-height:1;
}
.pun-404__search{ margin-top:var(--pun-space-5); }

/* ---------- COMENTARIOS ---------- */
.pun-comments{ margin-top:var(--pun-space-6); max-width:820px; margin-inline:auto; }
.pun-comment-form input,
.pun-comment-form textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--pun-gray-300);
  border-radius:var(--pun-radius-sm);
  margin-bottom:var(--pun-space-2);
}

/* ---------- SIDEBAR / WIDGETS ---------- */
.pun-sidebar{ margin-top:var(--pun-space-5); }
.pun-widget{ margin-bottom:var(--pun-space-4); }
.pun-widget__title{ font-size:1rem; font-weight:700; margin-bottom:var(--pun-space-2); }

/* ---------- FOOTER ---------- */
.pun-footer{
  background:var(--pun-black);
  color:var(--pun-gray-300);
  margin-top:var(--pun-space-7);
  padding-block:var(--pun-space-6) var(--pun-space-4);
}
.pun-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--pun-space-5);
}
.pun-footer__brand-text{ font-weight:800; font-size:1.3rem; color:var(--pun-white); }
.pun-footer-widget__title{ color:var(--pun-white); font-size:0.9rem; margin-bottom:var(--pun-space-2); }
.pun-footer__menu li, .pun-footer__legal-menu li{ margin-bottom:var(--pun-space-2); }
.pun-footer__menu a:hover{ color:var(--pun-white); }
.pun-footer__bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--pun-space-3);
  margin-top:var(--pun-space-6);
  padding-top:var(--pun-space-4);
  border-top:1px solid var(--pun-gray-900);
  font-size:0.8rem;
}
@media (max-width:880px){
  .pun-footer__grid{ grid-template-columns:1fr 1fr; }
}