/* ==========================================================================
   ILRITORNO — layout.css
   Header, footer, navegacion, secciones globales
   ========================================================================== */

/* Header */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(240, 234, 219, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ir-line);
  transition: padding var(--t), background var(--t);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--header-h);
}
.site-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-brand img {
  height: 100px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  transition: height var(--t), transform var(--t-slow);
  display: block;
}
.site-brand:hover img {
  transform: rotate(-3deg) scale(1.03);
}
@media (max-width: 1023px) {
  .site-brand img { height: 80px; max-width: 200px; }
}
@media (max-width: 767px) {
  .site-brand img { height: 64px; max-width: 160px; }
}
.site-header.is-scrolled .site-brand img { height: 75px; }
@media (max-width: 1023px) {
  .site-header.is-scrolled .site-brand img { height: 64px; }
}
@media (max-width: 767px) {
  .site-header.is-scrolled .site-brand img { height: 52px; }
}

/* Header siempre con padding correcto para no cortar logo */
.site-header__inner {
  padding-block: 0.75rem !important;
  align-items: center;
}

.site-nav { display: none; }
.site-nav__list { display: flex; gap: var(--sp-6); align-items: center; }
.site-nav__list a {
  font-family: var(--ir-font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ir-dark);
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--t);
}
.site-nav__list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--ir-sage);
  transition: width var(--t), background var(--t);
}
.site-nav__list a:hover {
  color: var(--ir-earth);
}
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after {
  width: 100%;
  background: var(--ir-earth);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.site-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background var(--t);
  position: relative;
}
.site-actions a:hover { background: rgba(46,47,36,0.06); }
.site-actions svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ir-earth);
  color: var(--ir-cream);
  font-family: var(--ir-font-ui);
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu toggle */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.menu-toggle__bars {
  position: relative;
  width: 22px;
  height: 16px;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after,
.menu-toggle__bars span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ir-dark);
  transition: all var(--t);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars span { top: 50%; transform: translateY(-50%); }
.menu-toggle__bars::after { bottom: 0; }
.menu-toggle.is-active .menu-toggle__bars::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__bars::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
.menu-toggle.is-active .menu-toggle__bars span { opacity: 0; }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 90vw);
  height: 100vh;
  background: var(--ir-cream);
  z-index: 200;
  padding: var(--sp-8) var(--sp-6);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  overflow-y: auto;
  box-shadow: -10px 0 40px rgba(46,47,36,0.12);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-drawer ul { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); }
.mobile-drawer ul a {
  display: block;
  padding: var(--sp-3) 0;
  font-family: var(--ir-font-display);
  font-size: var(--fs-xl);
  border-bottom: 1px solid var(--ir-line);
}
.mobile-drawer__footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ir-line);
  font-family: var(--ir-font-ui);
  font-size: var(--fs-sm);
  color: var(--ir-olive);
}
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(46,47,36,0.4);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* Hero */
.hero {
  position: relative;
  padding-block: var(--sp-12);
  overflow: hidden;
  background: var(--ir-cream);
}
.hero__decor {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  opacity: 0.18;
}
.hero__decor svg { position: absolute; }
.hero__decor .leaf-tl { top: 5%; left: -2%; width: 220px; transform: rotate(-15deg); }
.hero__decor .leaf-br { bottom: 5%; right: -2%; width: 240px; transform: rotate(160deg); }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
  position: relative;
}
.hero__content { text-align: center; }
.hero__title {
  font-size: var(--fs-4xl);
  line-height: 1.05;
  margin-bottom: var(--sp-5);
}
.hero__title em { color: var(--ir-earth); font-style: italic; }
.hero__lead {
  font-size: var(--fs-lg);
  color: var(--ir-olive);
  max-width: 560px;
  margin: 0 auto var(--sp-6);
}
.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ir-beige);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Secciones */
.section { padding-block: var(--sp-12); }
.section--alt { background: rgba(195,198,169,0.18); }
.section--dark { background: var(--ir-dark); color: var(--ir-cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ir-cream); }
.section--dark .eyebrow { color: var(--ir-sage); }

.section__head { text-align: center; margin-bottom: var(--sp-10); }
.section__head h2 { margin-bottom: var(--sp-3); }
.section__head p { color: var(--ir-olive); max-width: 640px; margin: 0 auto; }

/* Grids */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }

/* Categoria card */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ir-beige);
  transition: transform var(--t-slow);
}
.cat-card:hover { transform: translateY(-4px); }
.cat-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--t-slow);
}
.cat-card:hover .cat-card__media { transform: scale(1.05); }
.cat-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(46,47,36,0.7) 100%);
}
.cat-card__body {
  position: relative;
  margin-top: auto;
  padding: var(--sp-6);
  color: var(--ir-cream);
  z-index: 2;
}
.cat-card__title {
  font-family: var(--ir-font-display);
  font-size: var(--fs-2xl);
  color: var(--ir-cream);
  margin-bottom: var(--sp-2);
}
.cat-card__cta {
  font-family: var(--ir-font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Producto card */
.product-card {
  background: transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  transition: transform var(--t);
}
.product-card:hover { transform: translateY(-4px); }
.product-card__media {
  aspect-ratio: 1;
  background: var(--ir-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  position: relative;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__cat {
  font-family: var(--ir-font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ir-olive);
  margin-bottom: var(--sp-1);
}
.product-card__title {
  font-family: var(--ir-font-display);
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}
.product-card__price {
  font-family: var(--ir-font-body);
  font-size: var(--fs-base);
  color: var(--ir-earth);
}

/* Historia */
.historia { padding-block: var(--sp-12); }
.historia__inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; }
.historia__media {
  aspect-ratio: 4/5;
  background: var(--ir-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.historia__media img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.site-footer {
  background: var(--ir-dark);
  color: var(--ir-cream);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-6);
}
.site-footer h4 {
  color: var(--ir-cream);
  font-family: var(--ir-font-ui);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: var(--ir-cream); opacity: 0.8; }
.site-footer a:hover { opacity: 1; color: var(--ir-sage); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.footer-brand { max-width: 320px; }
.footer-brand img { height: 80px; width: auto; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); opacity: 0.9; }
.footer-brand p { font-size: var(--fs-sm); opacity: 0.75; }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col ul a { font-size: var(--fs-sm); }
.footer-bank {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-family: var(--ir-font-ui);
  font-size: var(--fs-sm);
  opacity: 0.85;
}
.footer-bank__item strong { display: block; color: var(--ir-sage); margin-bottom: 2px; }
.footer-bottom {
  border-top: 1px solid rgba(240,234,219,0.15);
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  text-align: center;
  font-family: var(--ir-font-ui);
  font-size: var(--fs-xs);
  opacity: 0.75;
}
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(240,234,219,0.2);
  border-radius: 50%;
  transition: all var(--t);
}
.footer-social a:hover { border-color: var(--ir-sage); background: var(--ir-sage); color: var(--ir-dark); opacity: 1; }
.footer-social svg { width: 16px; height: 16px; }

/* Page header (default page) */
.page-header {
  padding-block: var(--sp-10);
  text-align: center;
  background: rgba(195,198,169,0.18);
}
.page-header h1 { margin-bottom: var(--sp-2); }
.page-header p { color: var(--ir-olive); }
.breadcrumbs {
  font-family: var(--ir-font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ir-olive);
  margin-bottom: var(--sp-3);
}
.breadcrumbs a:hover { color: var(--ir-earth); }
.breadcrumbs .sep { margin-inline: var(--sp-2); opacity: 0.5; }

/* Page content */
.page-content { padding-block: var(--sp-10); }
.page-content .prose { max-width: 720px; margin-inline: auto; }
.prose p, .prose ul, .prose ol { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul li, .prose ol li { margin-bottom: var(--sp-2); list-style: disc; }
.prose ol li { list-style: decimal; }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); }
.prose a { color: var(--ir-earth); border-bottom: 1px solid currentColor; }

/* 404 */
.error-404 {
  padding-block: var(--sp-16);
  text-align: center;
}
.error-404__code {
  font-family: var(--ir-font-display);
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: 1;
  color: var(--ir-sage);
}
.error-404__title { margin-block: var(--sp-4); }
.error-404__lead { color: var(--ir-olive); margin-bottom: var(--sp-6); }

/* Blog list */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.post-card {
  display: flex;
  flex-direction: column;
}
.post-card__media {
  aspect-ratio: 16/10;
  background: var(--ir-beige);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__date {
  font-family: var(--ir-font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ir-olive);
  margin-bottom: var(--sp-2);
}
.post-card__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.post-card__excerpt { color: var(--ir-olive); margin-bottom: var(--sp-3); }

/* Single post */
.single-post { padding-block: var(--sp-10); }
.single-post__hero { max-width: 880px; margin: 0 auto var(--sp-8); text-align: center; }
.single-post__media {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-8);
  background: var(--ir-beige);
}
.single-post__body { max-width: 720px; margin: 0 auto; }