﻿/* Mamitahaya — Design system v2 */

:root {
  /* Colors */
  --color-brand: #b8326a;
  --color-brand-dark: #8f2554;
  --color-brand-soft: #f9eef3;
  --color-secondary: #4a5c3f;
  --color-secondary-light: #e8ede3;
  --color-stone: #d4ccc0;
  --color-sand: #f3ede4;
  --color-background: #f7f3ec;
  --color-surface: #fffcf8;
  --color-text: #1a1816;
  --color-text-muted: #5c5650;
  --color-border: #ddd5c8;
  --color-success: #3d6b4f;
  --color-warning: #9a6b2e;
  --color-error: #b33a3a;

  /* Typography */
  --font-accent: 'Italiana', Georgia, serif;
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --text-display-xl: clamp(2.75rem, 6.5vw, 5.25rem);
  --text-h1: clamp(2.25rem, 4.5vw, 3.75rem);
  --text-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h3: clamp(1.25rem, 2vw, 1.625rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.6875rem;
  --text-price: clamp(1.375rem, 2.5vw, 1.75rem);
  --leading-tight: 1.08;
  --leading-body: 1.7;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-section: clamp(4rem, 10vw, 7rem);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-btn: 999px;
  --shadow-hover: 0 20px 48px rgba(26, 24, 22, 0.09);
  --container: min(1180px, calc(100% - 2.5rem));
  --container-wide: min(1320px, calc(100% - 2.5rem));
  --header-height: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-background);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(184, 50, 106, 0.05), transparent),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(74, 92, 63, 0.04), transparent);
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.2s ease;
}

a:hover { color: var(--color-brand); }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; top: -100%; left: var(--space-md); z-index: 9999;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-brand); color: #fff; text-decoration: none;
}
.skip-link:focus { top: var(--space-md); }

.container { width: var(--container); margin-inline: auto; }
.container--wide { width: var(--container-wide); }

/* Typography */
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: var(--text-eyebrow); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-secondary); margin: 0 0 var(--space-md);
}
.eyebrow::before {
  content: ''; width: 2rem; height: 1px; background: var(--color-brand); flex-shrink: 0;
}
.eyebrow--light { color: rgba(255,252,248,0.75); }
.eyebrow--light::before { background: rgba(255,252,248,0.5); }
.eyebrow--center { justify-content: center; }

.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-lg);
}
.display-xl em {
  font-family: var(--font-accent);
  font-style: normal;
  font-weight: 400;
  color: var(--color-brand);
  letter-spacing: 0;
}

h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
h1, .h1 { font-size: var(--text-h1); margin: 0 0 var(--space-md); }
h2, .h2 { font-size: var(--text-h2); margin: 0 0 var(--space-md); }
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}

.text-accent {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.02em;
}

p { margin: 0 0 var(--space-md); }
.text-muted { color: var(--color-text-muted); }
.text-lead {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 44ch;
}

.voice-quote {
  margin: var(--space-xl) 0 var(--space-2xl);
  padding: 0;
  max-width: 34rem;
}
.voice-quote blockquote {
  margin: 0;
  padding: 0;
  border: none;
}
.voice-quote blockquote p {
  position: relative;
  margin: 0;
  padding-top: var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.1vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.voice-quote blockquote p::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 2px;
  background: var(--color-brand);
  margin-bottom: var(--space-md);
}
.voice-quote figcaption {
  margin-top: var(--space-md);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body); font-size: var(--text-small); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  white-space: nowrap; cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
}
.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184,50,106,0.25); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--secondary:hover { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.btn--on-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.btn--on-dark:hover {
  background: #fff;
  color: var(--color-text);
  border-color: #fff;
}
.btn--ghost {
  background: none; color: var(--color-brand); padding-inline: 0;
  text-transform: none; letter-spacing: 0; font-size: var(--text-body); font-weight: 500;
}
.btn--ghost::after { content: ' →'; transition: transform 0.2s; display: inline-block; }
.btn--ghost:hover::after { transform: translateX(4px); }
.btn--full { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.btn-group--inline { flex-wrap: nowrap; }

/* Header/footer layout moved to assets/css/chrome.css (full-bleed + mobile). */

/* Origin strip */
.origin-strip {
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}
.origin-strip__track {
  display: flex; gap: 3rem; padding: 0.875rem 0;
  animation: marquee 32s linear infinite;
  white-space: nowrap;
  font-size: var(--text-eyebrow); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted);
}
.origin-strip__track span { display: inline-flex; align-items: center; gap: 3rem; }
.origin-strip__track span::after { content: '·'; color: var(--color-brand); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Hero — editorial asimétrico (foto protagonista, texto mínimo) */
.hero { padding: var(--space-lg) 0 var(--space-2xl); }
.hero--editorial {
  border-bottom: 1px solid var(--color-border);
}
.hero__layout {
  display: grid;
  gap: var(--space-lg);
  min-height: clamp(28rem, 72vh, 40rem);
  align-items: stretch;
}
.hero__copy {
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
  background: transparent;
}
.hero__copy-inner {
  width: 100%;
  max-width: 26rem;
  margin-inline: 0;
}
.hero__accent {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  color: var(--color-brand);
  margin: 0 0 var(--space-md);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}
.hero__line {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}
.hero--editorial .btn-group {
  margin-top: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-sm);
  align-items: center;
}
.hero--editorial .btn-group .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: 1.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

@media (min-width: 400px) {
  .hero--editorial .btn-group .btn {
    padding-inline: 1.5rem;
    font-size: var(--text-small);
  }
}
.hero__gallery {
  position: relative;
  min-height: clamp(18rem, 52vw, 100%);
  background: var(--color-secondary-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  order: 1;
}
.hero__copy { order: 2; }
.hero__photo { margin: 0; height: 100%; }
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__photo--main {
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-2xl);
  }
  .hero__layout {
    grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
  }
  .hero__copy { order: 0; padding: var(--space-lg) 0; }
  .hero__gallery { order: 0; min-height: clamp(28rem, 72vh, 40rem); }
  .hero__copy-inner { max-width: 24rem; }
  .hero--editorial .btn-group .btn { padding-inline: 1.75rem; }
}

@media (min-width: 1100px) {
  .hero__layout { grid-template-columns: 2fr 3fr; }
}

/* Legacy media frame (inner pages) */
.media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-sand);
  border-radius: var(--radius-lg);
}
.media-frame img {
  width: 100%; height: 100%; object-fit: cover;
}
.media-frame__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-lg);
  background: linear-gradient(transparent, rgba(26,24,22,0.65));
  color: #fff; font-size: var(--text-small);
}

/* Sections */
.section { padding-block: var(--space-section); }
.section--surface { background: var(--color-surface); }
.section--warm { background: var(--color-sand); }
.section--olive {
  background: var(--color-secondary);
  color: var(--color-surface);
}
.section--olive .text-muted, .section--olive .text-lead { color: rgba(255,252,248,0.78); }
.section--olive .eyebrow { color: rgba(255,252,248,0.65); }
.section--olive .eyebrow::before { background: rgba(255,252,248,0.4); }
.section--olive .bento-item {
  color: var(--color-text);
  border-color: rgba(255,252,248,0.12);
}
.section--olive .bento-item h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.section--olive .bento-item .text-muted { color: var(--color-text-muted); }
.section--olive .bento-item__num { color: var(--color-brand); }
.section__header { margin-bottom: var(--space-3xl); max-width: 36rem; }
.section__header--center { margin-inline: auto; text-align: center; }
.section__header--center .text-lead { margin-inline: auto; }
.section__header--row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-lg); max-width: none;
}
.section__header--row .text-lead { margin-bottom: 0; }

/* Product grid */
.product-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.product-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-sand);
  position: relative;
  display: block;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__tag {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 1;
  margin: 0;
  padding: 0.35rem 0.75rem;
  background: var(--color-surface);
  color: var(--color-brand);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
}
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
  padding: var(--space-lg);
}
.product-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.product-card__title a {
  text-decoration: none;
  color: inherit;
}
.product-card__title a:hover { color: var(--color-brand); }
.product-card__format {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.product-card__price {
  font-family: var(--font-display);
  font-size: var(--text-price);
  font-weight: 700;
  margin: 0;
}
.product-card__footer { margin-top: auto; padding-top: var(--space-lg); }

.stock-badge {
  display: inline-block;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-btn);
}
.stock-badge--available { color: var(--color-success); background: #edf5ef; }
.stock-badge--low { color: var(--color-warning); background: #f8f2e8; }
.stock-badge--out, .stock-badge--soon { color: var(--color-text-muted); background: var(--color-background); }

/* Empty shop / no products */
.shop-empty {
  max-width: 40rem;
  padding: var(--space-2xl);
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.shop-empty .stock-badge { margin-bottom: var(--space-md); }
.shop-empty .h2 { margin-top: var(--space-sm); }
.shop-empty .btn-group { margin-top: var(--space-xl); }

/* Reasons — editorial, sin cards */
.reasons {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 900px) {
  .reasons {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 6vw, 5rem);
  }
}
.reasons__intro .text-lead {
  margin-top: var(--space-md);
  max-width: 28rem;
}
.reasons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.reasons__item {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.reasons__num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--color-brand);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.reasons__copy h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}
.reasons__copy p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
  max-width: 36rem;
}

/* Legacy value props (otras páginas si quedan) */
.value-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }
.value-item {
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.value-item::before {
  content: ''; position: absolute; top: 0; left: var(--space-lg); right: var(--space-lg);
  height: 2px; background: var(--color-brand);
}
.value-item h3 { font-size: var(--text-h3); margin-top: var(--space-sm); }

/* Editorial split */
.split { display: grid; gap: var(--space-2xl); align-items: center; }
.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg);
}
.split__media--stacked { position: relative; padding-bottom: 0; display: grid; gap: var(--space-md); }
.split__media--stacked img:first-child { aspect-ratio: 3 / 4; width: 100%; border-radius: var(--radius-lg); }
.split__media--stacked img:last-child {
  position: static;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
  .split--reverse .split__content { order: 2; }
  .split--reverse .split__media { order: 1; }
  .split__media--stacked { padding-bottom: 2rem; display: block; }
  .split__media--stacked img:first-child { width: 85%; }
  .split__media--stacked img:last-child {
    position: absolute;
    bottom: -2rem;
    right: -1.5rem;
    width: 55%;
    aspect-ratio: 1;
    border: 6px solid var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
  }
}

/* Cultivo section — proceso editorial */
.section--cultivo {
  background: var(--color-sand);
}
.cultivo-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}
.cultivo-layout__media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-secondary-light);
}
.cultivo-layout__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.cultivo-layout__media figcaption {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  padding: 0.5rem 0.875rem;
  background: rgba(26, 24, 22, 0.72);
  color: #fff;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-btn);
}

.cultivo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.cultivo-step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}
.cultivo-step:first-child { padding-top: 0; }
.cultivo-step:last-child { border-bottom: none; }
.cultivo-step__num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--color-brand);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.cultivo-step h3 {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
}
.cultivo-step p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.cultivo-layout__aside {
  display: flex;
  margin-top: var(--space-xl);
}
.cultivo-layout__aside .btn {
  justify-self: start;
}

@media (min-width: 900px) {
  .cultivo-layout {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-3xl);
    align-items: stretch;
  }
  .cultivo-layout__media,
  .cultivo-layout__media img {
    height: 100%;
    min-height: 32rem;
  }
  .cultivo-layout__steps {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block: var(--space-sm);
  }
  .cultivo-layout__aside {
    margin-top: var(--space-lg);
  }
}

/* Feature / bento grid (legacy, páginas internas) */
.bento-grid {
  display: grid; gap: var(--space-md);
  grid-template-columns: 1fr;
}
.bento-item {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bento-item--wide { grid-column: span 1; }
.bento-item--photo {
  padding: 0; overflow: hidden; min-height: 12rem;
  justify-content: stretch;
  border-radius: var(--radius-md);
}
.bento-item--photo img { width: 100%; height: 100%; object-fit: cover; min-height: 12rem; }
.bento-item__num {
  font-family: var(--font-accent);
  font-size: 2.25rem; font-weight: 400; line-height: 1;
  color: var(--color-brand); opacity: 0.9;
  margin-bottom: var(--space-sm);
}
.bento-item h3 { margin-bottom: 0.35rem; }
.bento-item p { margin: 0; font-size: var(--text-small); line-height: 1.6; }
@media (min-width: 600px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-item--wide { grid-column: span 2; }
}
@media (min-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(9rem, auto));
  }
  .bento-item--wide { grid-column: span 2; }
  .bento-item--tall { grid-row: span 2; min-height: 100%; }
  .bento-item--photo.bento-item--tall img { min-height: 100%; }
}

.feature-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-item {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.feature-item__num {
  font-family: var(--font-display);
  font-size: var(--text-h2); color: var(--color-brand);
  line-height: 1; margin-bottom: var(--space-sm);
}

/* Season */
.season-banner {
  display: grid; gap: var(--space-xl); align-items: center;
  padding: var(--space-3xl);
  background: var(--color-brand-soft);
  border: 1px solid rgba(184, 50, 106, 0.15);
  border-radius: var(--radius-lg);
  text-align: center;
}
@media (min-width: 768px) {
  .season-banner { grid-template-columns: 1fr auto; text-align: left; }
}

/* Harvest form */
/* Harvest / aviso cosecha */
.harvest-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.harvest-block__inner {
  display: grid;
  gap: 0;
}
.harvest-block__visual {
  position: relative;
  min-height: 16rem;
  background: var(--color-secondary);
}
.harvest-block__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 16rem;
  opacity: 0.92;
}
.harvest-block__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(74,92,63,0.15), rgba(184,50,106,0.08));
}
.harvest-block__content {
  padding: var(--space-2xl) var(--space-xl);
}
.harvest-block__content .text-lead { max-width: none; }
@media (min-width: 768px) {
  .harvest-block__inner { grid-template-columns: 0.9fr 1.1fr; }
  .harvest-block__visual { min-height: auto; }
  .harvest-block__content { padding: var(--space-3xl) var(--space-2xl); display: flex; flex-direction: column; justify-content: center; }
}
.harvest-form {
  display: grid; gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.harvest-form input[type="email"] {
  width: 100%; padding: 1rem 1.125rem;
  font: inherit; border: 1px solid var(--color-border);
  background: var(--color-background);
  border-radius: var(--radius-btn);
}
.harvest-form input:focus {
  outline: none; border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(184,50,106,0.12);
}
@media (min-width: 520px) {
  .harvest-form--inline {
    grid-template-columns: 1fr auto;
    align-items: stretch;
  }
  .harvest-form--inline .btn { white-space: nowrap; padding-inline: 1.5rem; }
}

body.nav-open { overflow: hidden; }

/* Footer */
.site-footer {
  background: var(--color-text);
  color: rgba(255,252,248,0.85);
  padding: var(--space-3xl) 0 var(--space-xl);
  margin-top: 0;
}
.site-footer a { color: rgba(255,252,248,0.65); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .h3 { color: #fff; font-size: 1.125rem; }
.site-footer__grid { display: grid; gap: var(--space-2xl); }
.site-footer__brand .site-footer__wordmark {
  display: inline-block;
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e45a8c;
  line-height: 1.1;
}
.site-footer__brand .site-footer__wordmark:hover {
  color: #f078a5;
}
.site-footer__brand img {
  display: block;
  height: auto;
  width: auto;
  max-height: 1.875rem;
  max-width: 240px;
  margin-bottom: var(--space-lg);
  filter: none;
  object-fit: contain;
}
.site-footer__brand p {
  color: rgba(255,252,248,0.55);
  margin: 0 0 var(--space-sm);
}
.site-footer__brand a {
  color: rgba(255,252,248,0.85);
  text-decoration: none;
}
.site-footer__brand a:hover { color: #fff; }
.site-footer__nav { display: grid; gap: var(--space-xl); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer__nav li { margin-bottom: 0.5rem; }
.site-footer__nav a { font-size: var(--text-small); }
.site-footer__bottom {
  margin-top: var(--space-2xl); padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,252,248,0.12);
  font-size: var(--text-small); color: rgba(255,252,248,0.4);
  display: grid;
  gap: var(--space-lg);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: var(--space-sm);
}
.site-footer__legal a {
  font-size: var(--text-small);
  color: rgba(255,252,248,0.55);
  text-decoration: none;
}
.site-footer__legal a:hover { color: #fff; }
.site-footer__funding {
  margin: 0;
}
.site-footer__funding img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.1fr 2fr; }
  .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
  .site-footer__bottom {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .site-footer__funding { justify-self: end; }
  .site-footer__funding img { max-width: 520px; }
}

/* Inner pages — mismo ancho de contenido que el menú */
.page-hero {
  max-width: none;
  padding-block: var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-sand);
}
.page-hero .text-lead {
  max-width: 42rem;
}
.page-hero--wide,
.page-hero--with-bg {
  /* aliases legacy: el hero ya usa el ancho del .container */
}

.breadcrumb { font-size: var(--text-small); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: var(--space-xs); color: var(--color-border); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }

/* Product page */
.product-layout { display: grid; gap: var(--space-2xl); }
.product-gallery { aspect-ratio: 1; overflow: hidden; background: var(--color-sand); border-radius: var(--radius-lg); }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }
.product-summary__price {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700;
  margin: var(--space-md) 0;
}
.product-meta {
  padding: var(--space-lg);
  background: var(--color-sand);
  border-left: 2px solid var(--color-brand);
  border-radius: var(--radius-md);
  font-size: var(--text-small); margin: var(--space-lg) 0;
}
.product-meta dt { font-weight: 600; display: inline; }
.product-meta dt::after { content: ': '; }
.product-meta dd { display: inline; margin: 0; color: var(--color-text-muted); }
.product-meta dd::after { content: ''; display: block; margin-bottom: var(--space-xs); }
.quantity-row { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-lg) 0; }
.quantity-row label { font-size: var(--text-small); font-weight: 500; }
.quantity-row input {
  width: 4rem; padding: 0.625rem; font: inherit; text-align: center;
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.product-tabs { margin-top: var(--space-3xl); }
.product-tabs section { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); }
@media (min-width: 900px) {
  .product-layout { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

/* Cart & checkout */
.shop-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.shop-table th, .shop-table td {
  padding: var(--space-md); text-align: left;
  border-bottom: 1px solid var(--color-border); vertical-align: middle;
}
.shop-table th {
  font-weight: 600; font-size: var(--text-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
}
.shop-table__product { display: flex; align-items: center; gap: var(--space-md); }
.shop-table__thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); }
.cart-totals {
  max-width: 400px; margin-left: auto; margin-top: var(--space-xl);
  padding: var(--space-xl); background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.cart-totals__row { display: flex; justify-content: space-between; padding: var(--space-sm) 0; font-size: var(--text-small); }
.cart-totals__row--total {
  font-weight: 600; font-size: var(--text-body);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-sm); padding-top: var(--space-md);
}
.checkout-layout { display: grid; gap: var(--space-2xl); }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1.2fr 0.8fr; } }
.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; font-size: var(--text-small); font-weight: 500; margin-bottom: var(--space-xs); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.875rem 1rem; font: inherit;
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.form-group textarea { min-height: 120px; resize: vertical; border-radius: var(--radius-md); }
.form-row { display: grid; gap: var(--space-md); }
@media (min-width: 600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: var(--text-small); color: var(--color-text-muted); }
.checkout-summary {
  padding: var(--space-xl); background: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: sticky; top: calc(var(--header-height) + var(--space-md));
}

/* FAQ */
.faq-list { max-width: 44rem; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  padding: var(--space-lg) 0;
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-body); font-size: 1.25rem; color: var(--color-brand); }
.faq-item[open] summary::after { content: '−'; }
.faq-item__answer { padding-bottom: var(--space-lg); color: var(--color-text-muted); }

.contact-grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.photo-grid { display: grid; gap: var(--space-md); }
.photo-grid--2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .origin-strip__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .product-card:hover { transform: none; }
  .product-card:hover .product-card__media img { transform: none; }
}

/* ── Responsive global ── */
@media (max-width: 767px) {
  :root {
    --space-section: clamp(2.5rem, 8vw, 3.5rem);
    --container: min(1180px, 100% - 1.25rem);
  }

  .section__header--row {
    flex-direction: column;
    align-items: flex-start;
  }
  .section__header--row .text-lead { margin-bottom: 0; }

  .season-banner {
    padding: var(--space-2xl) var(--space-lg);
    text-align: left;
  }
  .season-banner .btn { width: 100%; }

  .site-footer__nav { grid-template-columns: 1fr 1fr; }

  .photo-grid--2 { grid-template-columns: 1fr; }

  .cart-totals {
    max-width: none;
    margin-left: 0;
  }

  .checkout-summary { position: static; }

  .shop-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -0.25rem; }
  .shop-table { min-width: 32rem; }

  .page-hero--with-bg { padding-block: var(--space-2xl); }
}

@media (max-width: 479px) {
  .hero__title { font-size: clamp(1.875rem, 9vw, 2.25rem); }

  .harvest-form--inline {
    grid-template-columns: 1fr;
  }
  .harvest-form--inline .btn { width: 100%; }

  .site-footer__nav { grid-template-columns: 1fr; }
}

/* ── WooCommerce bridge (Mamitahaya) ── */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-button,
.woocommerce-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.alt {
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #fff;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-text);
  color: #fff;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0 0 var(--space-lg);
  text-align: left;
}

.woocommerce ul.products li.product a img {
  margin: 0 0 var(--space-md);
  border-radius: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  padding: 0 var(--space-lg);
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-md);
  border-top-color: var(--color-brand);
}

.woocommerce-cart table.cart,
.woocommerce-checkout #order_review,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border-radius: var(--radius-md);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0.75rem 1rem;
}

.woocommerce-checkout #payment {
  background: var(--color-sand);
  border-radius: var(--radius-lg);
}

.mamitahaya-theme .elementor-button {
  border-radius: var(--radius-btn) !important;
}

.mamitahaya-theme h1,
.mamitahaya-theme h2,
.mamitahaya-theme .elementor-heading-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
