/*
 * Nurceramik — Custom CSS
 * Design-system tokens + styles not expressible via theme.json.
 * Source: Nurceramik Design System (nurceramik-design-system-0db4ac79)
 * ----------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKEN BRIDGE
   Maps DS custom properties onto the WP preset variable space.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Clay neutrals */
  --clay-50:  #FAF6EF;
  --clay-100: #F4EDE2;
  --clay-200: #E9DDCC;
  --clay-300: #D9C8B0;
  --clay-400: #C2AB8C;
  --clay-500: #A88E6C;
  --clay-600: #897150;
  --clay-700: #6A5439;
  --clay-800: #4A3A27;
  --clay-900: #2B2118;

  /* Terracotta */
  --terracotta-50:  #FBEDE5;
  --terracotta-100: #F4D5C4;
  --terracotta-200: #E7AE92;
  --terracotta-300: #DD9573;
  --terracotta-500: #C16A43;
  --terracotta-600: #A8542F;
  --terracotta-700: #8A4226;

  /* Sage */
  --sage-100: #E4E6D8;
  --sage-300: #B7BB99;
  --sage-500: #8B8F69;
  --sage-700: #62663F;

  /* Accents */
  --glaze-blue: #3E6B8C;
  --success:    #5E7B4E;
  --error:      #A8412F;

  /* Semantic aliases */
  --color-bg:            var(--clay-50);
  --color-bg-alt:        var(--clay-100);
  --color-bg-deep:       var(--clay-900);
  --color-surface:       #FFFFFF;
  --color-surface-raised:#FFFDF9;
  --color-surface-sunken:var(--clay-100);

  --color-ink:           var(--clay-900);
  --color-ink-soft:      var(--clay-700);
  --color-muted:         var(--clay-600);
  --color-faint:         var(--clay-500);

  --color-line:          var(--clay-200);
  --color-line-strong:   var(--clay-300);
  --line-on-dark:        rgba(250, 246, 239, 0.16);

  --color-primary:       var(--terracotta-500);
  --color-primary-hover: var(--terracotta-600);
  --color-primary-press: var(--terracotta-700);
  --color-on-primary:    var(--clay-50);
  --color-primary-soft:  var(--terracotta-50);

  --color-accent:        var(--sage-500);
  --color-accent-soft:   var(--sage-100);

  --text-on-dark:        var(--clay-50);
  --text-on-dark-soft:   var(--clay-300);

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(3.5rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --container: 1200px;
  --container-wide: 1440px;
  --container-narrow: 760px;

  /* Radius */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(43, 33, 24, 0.05);
  --shadow-sm: 0 2px 8px rgba(43, 33, 24, 0.06);
  --shadow-md: 0 6px 20px rgba(43, 33, 24, 0.08);
  --shadow-lg: 0 18px 48px rgba(43, 33, 24, 0.12);
  --shadow-focus: 0 0 0 3px var(--terracotta-100);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ═══════════════════════════════════════════════════════════════
   2. GLOBAL BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

/* ═══════════════════════════════════════════════════════════════
   3. SITE HEADER
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 239, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  height: 76px;
  display: flex;
  align-items: center;
}

.site-header .wp-block-group.header-inner {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.site-brand-wrap {
  text-decoration: none;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wp-block-site-title a,
.site-brand-wrap .wp-block-site-title a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--color-ink) !important;
  letter-spacing: 0.01em;
}

.site-brand-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 !important;
  line-height: 1;
}

/* Nav */
.site-nav.wp-block-navigation .wp-block-navigation__container {
  gap: 30px;
}

.site-nav.wp-block-navigation a {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.site-nav.wp-block-navigation a:hover,
.site-nav.wp-block-navigation .current-menu-item > a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Header search button */
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-search-btn,
.site-cart-btn {
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.site-search-btn:hover,
.site-cart-btn:hover {
  background: var(--clay-100);
}

/* ═══════════════════════════════════════════════════════════════
   4. SITE FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-bg-deep);
  color: var(--text-on-dark);
  font-family: var(--font-body);
}

.site-footer a {
  color: var(--text-on-dark);
  text-decoration: none;
  opacity: 0.92;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.site-footer a:hover {
  opacity: 1;
  color: var(--text-on-dark);
}

.footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  transition: background var(--dur-fast) var(--ease-out);
  text-decoration: none !important;
  opacity: 1 !important;
}

.footer-social-link:hover {
  background: var(--line-on-dark);
}

.footer-section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  margin-bottom: 6px !important;
}

.footer-bottom {
  border-top: 1px solid var(--line-on-dark);
  font-size: 12.5px;
  color: var(--text-on-dark-soft);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer-legal-links a {
  font-size: 12.5px;
  color: var(--text-on-dark-soft);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   5. SECTION UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.nurc-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.nurc-section-sm {
  padding-top: calc(var(--section-y) * 0.6);
  padding-bottom: calc(var(--section-y) * 0.6);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.nurc-container {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.nurc-container-narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.nurc-container-wide {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   6. EYEBROW OVERLINE
   ═══════════════════════════════════════════════════════════════ */
.nurc-eyebrow {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin: 0 0 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.nurc-hero {
  background: var(--color-bg-alt);
  padding: var(--section-y) var(--gutter);
}

.nurc-hero .wp-block-columns {
  align-items: center;
  gap: 56px !important;
}

.nurc-hero-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
}

.nurc-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
}

/* ═══════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.wp-block-button__link {
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
}

.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.nurc-btn-secondary .wp-block-button__link {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-line-strong);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.nurc-btn-secondary .wp-block-button__link:hover {
  background: var(--clay-100);
  border-color: var(--clay-300);
}

.wp-block-button.nurc-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.wp-block-button.nurc-btn-ghost .wp-block-button__link:hover {
  background: var(--color-primary-soft);
}

/* ═══════════════════════════════════════════════════════════════
   9. PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════ */
.nurc-product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.nurc-product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.nurc-product-card-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    var(--clay-100),
    var(--clay-100) 8px,
    var(--clay-200) 8px,
    var(--clay-200) 16px
  );
}

.nurc-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.nurc-product-card:hover .nurc-product-card-image img {
  transform: scale(1.05);
}

.nurc-product-card-body {
  padding: 1rem 1.125rem 1.25rem;
}

.nurc-product-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg, 1.375rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 0.375rem;
}

.nurc-product-card-price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary);
}

.nurc-product-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  background: var(--terracotta-50);
  color: var(--terracotta-700);
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   10. QUOTE / PULLQUOTE SECTION
   ═══════════════════════════════════════════════════════════════ */
.nurc-quote blockquote,
.nurc-quote .wp-block-quote {
  border: none;
  padding: 0;
  margin: 0;
}

.nurc-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.3;
  color: var(--color-ink);
  text-wrap: balance;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   11. CTA BANNER (dark background strip)
   ═══════════════════════════════════════════════════════════════ */
.nurc-cta-banner {
  background: var(--color-bg-deep) !important;
  color: var(--text-on-dark) !important;
}

.nurc-cta-banner h2,
.nurc-cta-banner .wp-block-heading {
  color: var(--text-on-dark) !important;
}

.nurc-cta-banner p,
.nurc-cta-banner .wp-block-paragraph {
  color: var(--text-on-dark-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════
   12. ABOUT SECTION
   ═══════════════════════════════════════════════════════════════ */
.nurc-about .wp-block-columns {
  align-items: center;
  gap: 56px !important;
}

.nurc-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
}

/* ═══════════════════════════════════════════════════════════════
   13. CONTACT SECTION
   ═══════════════════════════════════════════════════════════════ */
.nurc-contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.nurc-contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.nurc-contact-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.nurc-contact-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.nurc-contact-value {
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin-top: 4px;
}

.nurc-contact-form input,
.nurc-contact-form textarea,
.nurc-contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base, 0.9375rem);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.nurc-contact-form input:focus,
.nurc-contact-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.nurc-contact-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   14. BLOG
   ═══════════════════════════════════════════════════════════════ */
.nurc-post-card {
  display: flex;
  flex-direction: column;
}

.nurc-post-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}

.nurc-post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.nurc-post-card:hover .nurc-post-card-image img {
  transform: scale(1.05);
}

.wp-block-post-title a {
  text-decoration: none;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.wp-block-post-title a:hover {
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   15. LEGAL PAGES
   ═══════════════════════════════════════════════════════════════ */
.nurc-legal-content {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

.nurc-legal-content h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.nurc-legal-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-ink);
}

.nurc-legal-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-body);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.nurc-legal-content p,
.nurc-legal-content li {
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--color-ink-soft);
}

.nurc-legal-content ul {
  padding-left: 1.5rem;
}

.nurc-legal-date {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   16. TIMELINE (About page)
   ═══════════════════════════════════════════════════════════════ */
.nurc-timeline-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--color-line);
}

.nurc-timeline-year {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-top: 4px;
}

.nurc-timeline-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-ink);
}

.nurc-timeline-desc {
  color: var(--color-muted);
  font-size: 14.5px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   17. PHOTO PLACEHOLDER (diagonal clay pattern)
   ═══════════════════════════════════════════════════════════════ */
.nurc-photo-placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--clay-100),
    var(--clay-100) 8px,
    var(--clay-200) 8px,
    var(--clay-200) 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay-400);
}

/* ═══════════════════════════════════════════════════════════════
   18. 404 / SEARCH / EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.nurc-404-wrap {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--section-y) var(--gutter);
}

.nurc-404-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 500;
  line-height: 1;
  color: var(--clay-200);
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   19. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  .nurc-hero .wp-block-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .nurc-about .wp-block-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .nurc-timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .nurc-product-card-image {
    aspect-ratio: 3 / 2;
  }
}

/* ═══════════════════════════════════════════════════════════════
   20. WORDPRESS OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.wp-block-separator {
  border-color: var(--color-line);
  border-top-width: 1px;
  margin: 0;
  opacity: 1;
}

.wp-block-quote {
  border-left: none;
  padding-left: 0;
}

.wp-block-group.alignfull {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Ensure constrained layout inner blocks respect the gutter */
.wp-block-group.is-layout-constrained > * {
  padding-left: 0;
  padding-right: 0;
}

.entry-content > * {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .alignwide {
  max-width: var(--container);
}

.entry-content > .alignfull {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER ACTIONS · cuenta + carrito (WooCommerce) a juego con búsqueda
   ═══════════════════════════════════════════════════════════════ */
.site-header-actions {
  gap: 2px;
}
.site-header-actions > * {
  margin: 0 !important;
}

/* Cuenta (woocommerce/customer-account) */
.site-header .wp-block-woocommerce-customer-account {
  display: flex;
  align-items: center;
}
.site-header .wc-block-customer-account__link {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.site-header .wc-block-customer-account__link:hover {
  background: var(--clay-100);
  text-decoration: none;
}
.site-header .wc-block-customer-account__account-icon {
  width: 20px;
  height: 20px;
}

/* Mini-cart (woocommerce/mini-cart) */
.site-header .wc-block-mini-cart {
  display: flex;
  align-items: center;
  margin: 0;
}
.site-header .wc-block-mini-cart__button {
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.site-header .wc-block-mini-cart__button:hover {
  background: var(--clay-100);
}
.site-header .wc-block-mini-cart__icon {
  width: 20px;
  height: 20px;
}
.site-header .wc-block-mini-cart__badge {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Header en móvil: una sola fila (marca + cuenta/carrito/lupa).
   La tagline decorativa se oculta en pantallas pequeñas para que quepa. */
@media (max-width: 600px) {
  .site-header .site-brand-tagline { display: none; }
  .site-header .header-inner { gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   MENU MOVIL · hamburguesa nativa de WP hasta 900px + overlay tematico
   (usa view.js de WP: accesible, focus-trap, ESC). Antes .wp-block-navigation
   se ocultaba entero a <=900px y no quedaba forma de abrir el menu.
   ═══════════════════════════════════════════════════════════════ */
/* Colapsar a hamburguesa en el rango 600-900px (WP solo lo hace <600) */
@media (min-width: 600px) and (max-width: 900px) {
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Boton hamburguesa a juego con los iconos del header (<=900px) */
@media (max-width: 900px) {
  .site-header .wp-block-navigation__responsive-container-open {
    width: 42px; height: 42px; padding: 0;
    border-radius: var(--radius-pill);
    align-items: center; justify-content: center;
    color: var(--color-ink);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .site-header .wp-block-navigation__responsive-container-open:hover { background: var(--clay-100); }
  .site-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
}
/* Overlay del menu abierto: colores + tipografia del theme */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--color-bg) !important;
  color: var(--color-ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--color-ink) !important;
  font-family: var(--font-display);
  font-size: 1.5rem;
  border-bottom: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--color-primary) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--color-ink); }

/* Cabecera movil (<=900px): marca a la izquierda; hamburguesa + iconos
   agrupados a la derecha (especificidad .wp-block-group para ganar al gap:24 del theme). */
@media (max-width: 900px) {
  .site-header .wp-block-group.header-inner {
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .site-header .site-nav { margin-left: auto; }
}