/* ==========================================================================
   RN.MATES — Sistema de diseño
   Tema WooCommerce a medida. CSS propio (sin build obligatorio en hosting).
   Secciones:
   1. Tokens (custom properties)        4. Layout & utilidades
   2. Reset / base                      5. Componentes
   3. Tipografía                        6. Header / footer base
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */
/* Tema LIGHT-ONLY por decisión de marca (tienda cálida/artesanal). El modo
   oscuro se puede sumar luego con tokens semánticos + prefers-color-scheme. */
:root {
  /* --- Marca: verde oliva (afinado al logo RN.MATES) --- */
  --c-verde-900: #222a10;
  --c-verde-800: #2f3a16;
  --c-verde-700: #3d4a1c;
  --c-verde-600: #4c5a26; /* primario */
  --c-verde-500: #5d6e34;
  --c-verde-300: #9caa78;
  --c-verde-100: #e6e9d7;
  --c-verde-50:  #f1f3e6;

  /* --- Neutros / fondos (paper neutro, no el "crema AI") --- */
  --c-crema:    #f4f3ec; /* fondo principal (paper neutro) */
  --c-crema-2:  #ece9dd; /* secciones alternas */
  --c-arena:    #e7dabf; /* superficie cálida de acento */
  --c-arena-2:  #d8c7a4;

  /* --- Cuero / madera (calidez de producto) --- */
  --c-cuero-700: #4a3019;
  --c-cuero-600: #6e4a28;
  --c-cuero-400: #9a6b3c;

  /* --- Acento cálido (CTA / ofertas) — tonos verificados AA --- */
  --c-acento:     #bd5e2e; /* fills con texto oscuro / badges */
  --c-acento-600: #a8491b; /* fondo de botón (texto blanco AA) */
  --c-acento-700: #9c4319; /* texto terracota sobre claro (AA) */
  --c-acento-50:  #f7e9df;

  /* --- Tinta / texto --- */
  --c-tinta:   #241f18;
  --c-tinta-2: #5a5043;
  --c-tinta-3: #69604f; /* muted AA (5.5:1 sobre paper) */
  --c-linea:   #ddd6c5; /* hairlines */

  /* --- Estados --- */
  --c-ok:     #4c5a26;
  --c-info:   #38596d;
  --c-alerta: #b07a16;
  --c-error:  #a33329;

  /* --- Tipografía (foundries argentinas: Huerta Tipográfica + Omnibus-Type) --- */
  --font-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 1.4rem + 4vw, 4rem);
  --fs-h1: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* --- Espaciado --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  /* --- Radios --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- Sombras (sutiles, estética flat-natural) --- */
  --sh-sm: 0 1px 2px rgba(36, 31, 24, 0.06);
  --sh-md: 0 6px 20px rgba(36, 31, 24, 0.08);
  --sh-lg: 0 18px 50px rgba(36, 31, 24, 0.12);

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --header-h: 76px;

  /* --- Movimiento (easing con masa, nunca linear/ease-in-out) --- */
  --tr: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --tr-slow: 420ms var(--ease-spring);

  /* --- Sombras difusas (look "hardware", no drop-shadow duro) --- */
  --sh-soft: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 1px rgba(36, 31, 24, 0.06), 0 24px 50px -30px rgba(36, 31, 24, 0.45);
  --sh-float: 0 2px 6px rgba(36, 31, 24, 0.05), 0 18px 45px -22px rgba(36, 31, 24, 0.4);

  /* --- Escala z-index semántica --- */
  --z-nav: 50; --z-overlay: 90; --z-modal: 100; --z-toast: 110;
}

/* ============================ 2. RESET / BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-tinta);
  background: var(--c-crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--c-verde-700); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--c-acento); }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--c-acento);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--c-verde-100); color: var(--c-verde-900); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--c-verde-700); color: var(--c-crema);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; color: var(--c-crema); }

/* ============================ 3. TIPOGRAFÍA ============================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--c-verde-900);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.125rem; font-weight: 500; }
p { max-width: 66ch; }
p + p { margin-top: var(--sp-4); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-acento-700);
}
/* Kicker sentence-case con regla: cadencia distinta al "eyebrow" genérico.
   Usar con criterio (no en cada sección). */
.rn-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  color: var(--c-acento-700);
}
.rn-kicker::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; border-radius: 2px; }
.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; color: var(--c-verde-900); }
.lead { font-size: 1.15rem; color: var(--c-tinta-2); line-height: var(--lh-body); }
.text-muted { color: var(--c-tinta-2); }

/* ============================ 4. LAYOUT / UTILIDADES ==================== */
.rn-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.rn-container--narrow { max-width: var(--container-narrow); }
.rn-section { padding-block: clamp(3.25rem, 7vw, 7rem); }
.rn-section--alt { background: var(--c-crema-2); }
.rn-section--green { background: var(--c-verde-700); color: var(--c-crema); }
.rn-section--green h1, .rn-section--green h2, .rn-section--green h3 { color: var(--c-crema); }

.rn-stack > * + * { margin-top: var(--sp-4); }
.rn-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.rn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rn-grid--3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rn-grid--4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.rn-section-head { max-width: 60ch; margin-bottom: clamp(1.5rem, 4vw, 2.75rem); }
.rn-section-head .eyebrow { display: block; margin-bottom: var(--sp-2); }
.text-center { text-align: center; }
.text-center .rn-section-head, .rn-section-head.text-center { margin-inline: auto; }

/* ============================ 5. COMPONENTES =========================== */

/* --- Botones --- */
.rn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  line-height: 1; letter-spacing: 0.01em;
  padding: 0.9rem 1.5rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--tr), background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.rn-btn:hover { transform: translateY(-1px); }
.rn-btn:active { transform: translateY(0); }
.rn-btn--primary { background: var(--c-verde-600); color: var(--c-crema); }
.rn-btn--primary:hover { background: var(--c-verde-700); color: var(--c-crema); box-shadow: var(--sh-md); }
.rn-btn--accent { background: var(--c-acento-600); color: #fff; }
.rn-btn--accent:hover { background: var(--c-acento-700); color: #fff; box-shadow: var(--sh-md); }
.rn-btn--ghost { background: transparent; color: var(--c-verde-700); border-color: var(--c-verde-600); }
.rn-btn--ghost:hover { background: var(--c-verde-600); color: var(--c-crema); }
.rn-btn--light { background: transparent; color: var(--c-crema); border-color: rgba(255, 255, 255, 0.55); }
.rn-btn--light:hover { background: var(--c-crema); color: var(--c-verde-900); border-color: var(--c-crema); }
.rn-btn--block { display: flex; width: 100%; }
.rn-btn--sm { padding: 0.6rem 1rem; font-size: var(--fs-xs); }
.rn-btn--lg { padding: 1.05rem 2rem; font-size: var(--fs-body); }

/* --- Badges / etiquetas --- */
.rn-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill); text-transform: uppercase;
}
.rn-badge--new { background: var(--c-verde-100); color: var(--c-verde-800); }
.rn-badge--sale { background: var(--c-acento-50); color: var(--c-acento-700); }
.rn-badge--soldout { background: var(--c-arena); color: var(--c-cuero-700); }

/* --- Chips de confianza --- */
.rn-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rn-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-sm); color: var(--c-cuero-700);
  background: var(--c-crema); border: 1px solid var(--c-linea);
  border-radius: var(--r-pill); padding: 0.5rem 0.95rem;
}
.rn-chip svg { width: 18px; height: 18px; color: var(--c-verde-600); flex: none; }

/* --- Tarjeta genérica --- */
.rn-card {
  background: var(--c-crema); border: 1px solid var(--c-linea);
  border-radius: var(--r-lg); padding: var(--sp-5);
}

/* --- Tile de categoría (imagen + label) --- */
.rn-cat { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-linea); background: radial-gradient(120% 80% at 50% 0%, var(--c-verde-700) 0%, var(--c-verde-900) 100%); }
.rn-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (hover: hover) and (pointer: fine) { .rn-cat:hover img { transform: scale(1.06); } }
.rn-cat__label { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.1rem 1rem; background: linear-gradient(to top, rgba(34, 42, 16, 0.88), rgba(34, 42, 16, 0.1) 70%, transparent); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.rn-cat__label span { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.rn-cat__label svg { width: 20px; height: 20px; opacity: 0.9; transition: transform var(--tr); }
.rn-cat:hover .rn-cat__label svg { transform: translateX(4px); }

/* --- Tarjeta de producto --- */
.rn-product { display: flex; flex-direction: column; }
.rn-product__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-xl); background: var(--c-crema-2);
  box-shadow: var(--sh-soft);
}
.rn-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (hover: hover) and (pointer: fine) { .rn-product:hover .rn-product__media img { transform: scale(1.05); } }
.rn-product__flags { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; display: flex; flex-direction: column; gap: 0.4rem; }
.rn-product__fav {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--c-crema); border-radius: var(--r-pill); box-shadow: var(--sh-sm);
  color: var(--c-cuero-600); border: 1px solid var(--c-linea);
}
.rn-product__fav:hover { color: var(--c-acento); }
.rn-product__fav.is-active { color: var(--c-acento); }
.rn-product__fav.is-active svg { fill: color-mix(in srgb, var(--c-acento) 16%, transparent); }
.rn-product__body { padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 0.25rem; }
.rn-product__cat { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-3); }
.rn-product__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; line-height: 1.2; color: var(--c-verde-900); }
.rn-product__title a { color: inherit; }
.rn-product__title a:hover { color: var(--c-acento); }
.rn-product__price { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.15rem; }
.rn-product__price .amount { font-size: 1.15rem; font-weight: 500; color: var(--c-tinta); }
.rn-product__price del { color: var(--c-tinta-3); font-size: var(--fs-sm); }
.rn-product__price ins { text-decoration: none; }
.rn-product__foot { margin-top: var(--sp-3); }

/* --- Rating estrellas --- */
.rn-stars { display: inline-flex; gap: 2px; color: var(--c-acento); }
.rn-stars svg { width: 15px; height: 15px; }
.rn-rating { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); color: var(--c-tinta-3); }

/* --- Inputs / formularios --- */
.rn-field { display: flex; flex-direction: column; gap: 0.35rem; }
.rn-label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-tinta-2); }
.rn-input, .rn-select, .rn-textarea {
  width: 100%; padding: 0.7rem 0.9rem;
  background: var(--c-crema); color: var(--c-tinta);
  border: 1px solid var(--c-arena-2); border-radius: var(--r-md);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.rn-input:focus, .rn-select:focus, .rn-textarea:focus {
  outline: none; border-color: var(--c-verde-600);
  box-shadow: 0 0 0 3px var(--c-verde-100);
}
.rn-input::placeholder { color: var(--c-tinta-3); }

/* --- Selector de cantidad --- */
.rn-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-arena-2); border-radius: var(--r-pill); overflow: hidden; background: var(--c-crema); }
.rn-qty button { width: 42px; height: 44px; font-size: 1.1rem; color: var(--c-cuero-700); display: grid; place-items: center; }
.rn-qty button:hover { background: var(--c-crema-2); color: var(--c-acento); }
.rn-qty input { width: 46px; height: 44px; text-align: center; border: none; background: transparent; -moz-appearance: textfield; }
.rn-qty input::-webkit-outer-spin-button, .rn-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- Divisores / swatches de marca (uso editorial) --- */
.rn-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
.rn-swatch { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-linea); }
.rn-swatch__color { height: 76px; }
.rn-swatch__meta { padding: 0.5rem 0.7rem; background: var(--c-crema); font-size: var(--fs-xs); }
.rn-swatch__meta b { display: block; font-weight: 500; color: var(--c-tinta); }
.rn-swatch__meta span { color: var(--c-tinta-3); font-family: var(--font-sans); }

/* ============================ 6. HEADER / FOOTER BASE ================== */
/* Nav: barra al ras arriba de todo; se despega en píldora flotante al scrollear.
   El morph lo dispara main.js agregando .is-stuck cuando la barra superior sale.
   IMPORTANTE: la altura del header es CONSTANTE (padding-top fijo) y solo se
   animan propiedades de pintura (opacity/fondo/sombra), nunca layout → sin
   saltos ni glitches al scrollear arriba/abajo. */
.rn-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding-top: clamp(0.4rem, 1vw, 0.7rem);
  pointer-events: none;
}
/* Fondo full-width al ras cuando está arriba (cubre todo el header, incl. el
   padding superior, así no se ve la píldora redondeada en reposo). */
.rn-header::before {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-crema) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--c-linea);
  opacity: 1;
  transition: opacity 260ms var(--ease-spring);
  pointer-events: none;
}
.rn-header__bar {
  position: relative;
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 62px; padding: 0.5rem 0.6rem 0.5rem 1.4rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  box-shadow: none;
  transition: background 260ms var(--ease-spring), box-shadow 260ms var(--ease-spring), border-color 260ms var(--ease-spring);
}
/* Estado al scrollear: se apaga el fondo al ras y aparece la píldora flotante
   (la separación de arriba es el padding constante, ahora visible). */
.rn-header.is-stuck::before { opacity: 0; }
.rn-header.is-stuck .rn-header__bar {
  background: color-mix(in srgb, var(--c-crema) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: color-mix(in srgb, var(--c-tinta) 8%, transparent);
  box-shadow: var(--sh-float);
}
@media (prefers-reduced-motion: reduce) {
  .rn-header::before, .rn-header__bar { transition: none; }
}
.rn-header__brand { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.rn-header__brand svg { height: 44px; width: auto; }
/* Logo raster que suba el cliente (the_custom_logo): mismo alto que el SVG de
   fallback, así un logo ancho no empuja los íconos ni desborda en mobile. */
/* Emblema (logo subido) al lado del wordmark: tamaño de ícono de marca, un
   toque mayor que el monograma SVG para darle presencia sin tapar el texto. */
.rn-header__brand img { height: 48px; width: auto; max-width: 40vw; }
.rn-nav-wrap { margin-inline: auto; }
.rn-nav { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); }
.rn-nav li { margin: 0; }
.rn-nav a { font-size: var(--fs-sm); font-weight: 500; color: var(--c-tinta); }
.rn-nav a:hover, .rn-nav .current-menu-item > a, .rn-nav .current-menu-ancestor > a { color: var(--c-acento); }
/* Desktop: ítems con hijos (ej. Tienda) se vuelven menú desplegable. En mobile
   el nav está oculto (entra el menú ☰), así que esto no afecta al celular. */
.rn-nav .menu-item-has-children { position: relative; }
.rn-nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.32rem; }
.rn-nav .menu-item-has-children > a::after {
  content: ""; width: 0.4em; height: 0.4em; margin-top: -0.18em;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tr);
}
.rn-nav .sub-menu {
  position: absolute; top: calc(100% + 0.5rem); left: -0.4rem; z-index: 20;
  min-width: 12rem; margin: 0; padding: 0.4rem; list-style: none;
  background: var(--c-crema); border: 1px solid var(--c-linea);
  border-radius: var(--r-md); box-shadow: var(--sh-float);
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
}
/* Puente invisible: evita que el hover se corte en el hueco ítem -> panel. */
.rn-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
.rn-nav .menu-item-has-children:hover > .sub-menu,
.rn-nav .menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rn-nav .menu-item-has-children:hover > a::after,
.rn-nav .menu-item-has-children.is-open > a::after { transform: rotate(225deg); margin-top: 0; }
.rn-nav .sub-menu li { margin: 0; }
.rn-nav .sub-menu a { display: block; padding: 0.55rem 0.7rem; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-tinta); white-space: nowrap; }
.rn-nav .sub-menu a:hover, .rn-nav .sub-menu a:focus-visible { background: var(--c-verde-50); color: var(--c-verde-700); }
@media (prefers-reduced-motion: reduce) {
  .rn-nav .sub-menu { transition: none; }
  .rn-nav .menu-item-has-children > a::after { transition: none; }
}
.rn-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.rn-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-tinta); border-radius: var(--r-pill); position: relative; }
.rn-icon-btn:hover { background: var(--c-crema-2); color: var(--c-acento); }
.rn-icon-btn svg { width: 22px; height: 22px; }
.rn-cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--c-acento); color: #fff; font-size: 11px; font-weight: 500; border-radius: var(--r-pill); display: grid; place-items: center; }
[data-rn-wishlist-link] .rn-wishlist-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--c-acento); color: #fff; font-size: 11px; font-weight: 500; border-radius: var(--r-pill); display: grid; place-items: center; }
.rn-mobile-nav__account .rn-wishlist-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; background: var(--c-verde-100); color: var(--c-verde-800); font-size: 11px; border-radius: var(--r-pill); }

.rn-topbar { background: var(--c-verde-800); color: var(--c-crema); font-size: var(--fs-xs); letter-spacing: 0.03em; }
.rn-topbar__inner { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 36px; text-align: center; }

.rn-footer { background: var(--c-verde-900); color: var(--c-crema); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.rn-footer a { color: var(--c-verde-100); }
.rn-footer a:hover { color: #fff; }
.rn-footer__cols { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rn-footer__cols h4 { color: var(--c-crema); margin-bottom: var(--sp-3); font-size: 1rem; }
.rn-footer__cols ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--fs-sm); }
.rn-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid rgba(251, 247, 236, 0.15); font-size: var(--fs-xs); color: var(--c-verde-300); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; }

/* ============================ HERO (base) ============================== */
.rn-hero { position: relative; background: var(--c-crema-2); overflow: hidden; }
.rn-hero__inner { display: grid; gap: var(--sp-6); align-items: center; padding-block: clamp(2.5rem, 7vw, 5.5rem); }
@media (min-width: 860px) { .rn-hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.rn-hero__content { max-width: 34rem; }
.rn-hero__content .display { margin-block: var(--sp-3); }
.rn-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.rn-hero__media { aspect-ratio: 5 / 4; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--c-linea); background: var(--c-arena); }
.rn-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Double-bezel (Doppelrand): placa dentro de bandeja, radios concéntricos. */
.rn-bezel { padding: 0.5rem; border-radius: var(--r-xl); background: color-mix(in srgb, var(--c-tinta) 5%, transparent); border: 1px solid color-mix(in srgb, var(--c-tinta) 8%, transparent); box-shadow: var(--sh-float); }
.rn-bezel__core { border-radius: calc(var(--r-xl) - 0.5rem); overflow: hidden; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15); }
.rn-bezel__core img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rn-hero--green .rn-bezel { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }

/* Hero bañado en verde: la marca toma protagonismo en el primer fold. */
.rn-hero--green { background: var(--c-verde-900); color: var(--c-crema); }
.rn-hero--green .display, .rn-hero--green h1 { color: #fff; }
.rn-hero--green .lead { color: var(--c-verde-100); }
.rn-hero--green .rn-kicker { color: var(--c-arena); }
.rn-hero--green .rn-hero__media { border-color: rgba(255,255,255,0.12); background: var(--c-verde-800); }
.rn-hero--green .rn-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--c-crema); }
.rn-hero--green .rn-chip svg { color: var(--c-verde-300); }

/* ============================ RESPONSIVE NAV =========================== */
.rn-burger { display: none; }
@media (max-width: 860px) {
  .rn-nav-wrap { display: none; }
  .rn-burger { display: grid; }
  /* Con el nav central oculto, empujamos los íconos al borde derecho para que
     el header ocupe todo el ancho (logo a la izquierda, acciones a la derecha)
     en vez de quedar todo amontonado a la izquierda con vacío a la derecha. */
  .rn-header__actions { margin-left: auto; }
  /* Donde aparece la hamburguesa, "Mi cuenta" pasa adentro del menú; sacamos
     el ícono del header y dejamos: búsqueda + carrito + menú. */
  .rn-header__actions [data-rn-account],
  .rn-header__actions [data-rn-wishlist-link] { display: none; }
}

/* Header compacto en mobile: achicamos tamaños/gaps para que la marca (logo en
   DOS líneas, con tagline) + los 3 íconos (búsqueda + carrito + menú) entren
   sin desbordar. La cuenta se movió al menú en ≤860px. */
@media (max-width: 480px) {
  .rn-header__bar { gap: 0.4rem; padding-left: 0.85rem; padding-right: 0.35rem; }
  .rn-header__actions { gap: 0.1rem; }
  .rn-icon-btn { width: 38px; height: 38px; }
  .rn-icon-btn svg { width: 20px; height: 20px; }
  .rn-logo svg { width: 38px; height: 38px; }
  .rn-logo img { height: 40px; width: auto; }
  /* Especificidad .rn-logo X para ganarle a las reglas base de layout.css
     (que carga después). El tagline se muestra (logo en dos líneas) pero algo
     más chico para que marca + 3 íconos entren sin desbordar. */
  .rn-logo .rn-logo__name { font-size: 1.1rem; }
  .rn-logo .rn-logo__tag { display: block; font-size: 0.56rem; letter-spacing: 0.1em; }
}

/* Teléfonos muy angostos (≤360px, ej. Galaxy Fold cerrado): un toque más
   chico para dejar margen holgado entre marca y los 3 íconos. */
@media (max-width: 360px) {
  .rn-icon-btn { width: 36px; height: 36px; }
  .rn-logo .rn-logo__name { font-size: 1rem; }
  .rn-logo .rn-logo__tag { font-size: 0.5rem; letter-spacing: 0.06em; }
}

/* ============================ 7. CRAFT PREMIUM ========================= */

/* Botón con ícono anidado (button-in-button) + física magnética */
.rn-btn:active { transform: scale(0.98); }
.rn-btn__ico {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
  margin: -0.45rem -0.65rem -0.45rem 0.15rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  transition: transform 180ms var(--ease-out-expo), background var(--tr);
}
.rn-btn--ghost .rn-btn__ico, .rn-btn--light .rn-btn__ico { background: color-mix(in srgb, currentColor 16%, transparent); }
.rn-btn:hover .rn-btn__ico { transform: translate(3px, -1px) scale(1.06); }
.rn-btn__ico svg { width: 15px; height: 15px; }

/* Iconografía más fina en nav y chips */
.rn-header__actions svg, .rn-chip svg { stroke-width: 1.55; }

/* Scroll-reveal de entrada (fade-up). Solo transform/opacity (GPU), sin blur
   (caro de animar en cada sección) ni will-change permanente. */
.reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity 560ms var(--ease-out-expo), transform 560ms var(--ease-out-expo);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 70ms; }
.reveal-d2 { transition-delay: 140ms; }
.reveal-d3 { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-d1, .reveal-d2, .reveal-d3 { opacity: 1; transform: none; transition: none; }
  .rn-product:hover .rn-product__media img,
  .rn-cat:hover img { transform: none; }
}

/* Grano fílmico: overlay fijo, no interactivo, muy sutil */
.rn-grain {
  position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply; background-size: 130px 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .rn-grain { display: none; } }

/* --- Botón flotante de WhatsApp (canal de venta real) --- */
.rn-whatsapp-fab {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-toast);
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: #1faf54; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(15, 92, 44, 0.7), 0 2px 6px rgba(36, 31, 24, 0.18);
  transition: transform var(--tr), box-shadow var(--tr);
}
.rn-whatsapp-fab svg { width: 28px; height: 28px; }
.rn-whatsapp-fab:hover { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .rn-whatsapp-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(15, 92, 44, 0.75); }
}
.rn-whatsapp-fab:focus-visible { outline-offset: 3px; }
/* No tapar overlays: se esconde con un panel abierto (carrito / menú / búsqueda). */
body.rn-minicart-open .rn-whatsapp-fab,
body.rn-nav-open .rn-whatsapp-fab,
body.rn-search-open .rn-whatsapp-fab { opacity: 0; pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .rn-whatsapp-fab { transition: none; } }