/* ============================================
   ByoZenix — Design System
   ============================================ */

:root {
  /* Colors */
  --forest-900: #0f2a1d;
  --forest-800: #173a27;
  --forest-700: #1f4a33;
  --forest-600: #2d6040;
  --forest-500: #3d7a52;
  --forest-400: #6fa37e;
  --moss-300: #a8c9a9;
  --cream: #faf7f0;
  --cream-warm: #f3ecdc;
  --paper: #fffdf7;
  --amber-600: #b8651a;
  --amber-500: #d68238;
  --amber-400: #e8a15c;
  --ink: #1a1f1a;
  --ink-soft: #3a453a;
  --ink-mute: #6c7a6c;
  --line: #e4ddc8;
  --line-soft: #efe9d8;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter Tight", system-ui, sans-serif;

  /* Spacing */
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Radii */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;
}

/* ============================================
   Reset + Base
   ============================================ */
*,
*::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: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--forest-900);
}

h1 {
  font-size: clamp(2.5rem, 6.5vw, 5.25rem);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-variation-settings: "opsz" 100, "SOFT" 20;
}

h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}

h4 {
  font-size: 1.15rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.container-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ============================================
   Eyebrow label
   ============================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin-bottom: 1.25rem;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--forest-600);
}

.eyebrow.center {
  display: flex;
  justify-content: center;
  width: 100%;
}

.eyebrow.light {
  color: var(--moss-300);
}

.eyebrow.light::before {
  background: var(--moss-300);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--forest-900);
  color: var(--cream);
}

.btn-primary:hover {
  background: var(--forest-700);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(15, 42, 29, 0.5);
}

.btn-secondary {
  background: transparent;
  color: var(--forest-900);
  box-shadow: inset 0 0 0 1.5px var(--forest-900);
}

.btn-secondary:hover {
  background: var(--forest-900);
  color: var(--cream);
}

.btn-accent {
  background: var(--amber-600);
  color: var(--cream);
}

.btn-accent:hover {
  background: var(--amber-500);
  transform: translateY(-1px);
}

.btn-arrow::after {
  content: "→";
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow::after,
.btn-arrow:hover::after {
  transform: translateX(3px);
}

/* ============================================
   Navigation
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 247, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.nav-logo img {
  height: 96px;
  width: auto;
  object-fit: contain;
}

.nav-wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  gap: 3px;
}

.nav-logo .wm-byo { color: var(--amber-600); }
.nav-logo .wm-zenix { color: var(--forest-600); }

@media (max-width: 860px) {
  .nav-logo img { height: 72px; }
  .nav-wordmark { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  .nav-logo img { height: 58px; }
  .nav-wordmark { font-size: 0.72rem; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--forest-900);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--amber-600);
}

.nav-cta {
  padding: 0.65rem 1.4rem !important;
  font-size: 0.88rem;
  background: var(--forest-900) !important;
  color: var(--cream) !important;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover {
  background: var(--amber-600) !important;
  color: var(--cream) !important;
  transform: translateY(-1px);
}

.nav-cta.active::after { display: none; }

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0.25rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lang-switch a {
  color: var(--ink-mute);
  padding: 0.15rem 0.35rem;
  border-radius: var(--r-sm);
  transition: color 0.2s ease, background 0.2s ease;
  text-transform: uppercase;
}

.lang-switch a.active {
  color: var(--forest-900);
  background: var(--cream-warm);
}

.lang-switch a:not(.active):hover {
  color: var(--forest-700);
}

.lang-switch .divider {
  color: var(--line);
  font-weight: 400;
  user-select: none;
}

@media (max-width: 860px) {
  .lang-switch {
    margin: 0.5rem 0 0;
    align-self: flex-start;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--forest-900);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--pad-x);
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--line-soft);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    display: block;
    padding: 0.95rem 0;
    font-size: 1rem;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-cta {
    display: none;
  }
}

/* ============================================
   Hero — Home
   ============================================ */
.hero {
  position: relative;
  padding: clamp(2.5rem, 3.5vw, 3rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--forest-900);
  color: var(--cream);
  overflow: hidden;
}

/* Dark solid fallback — shown briefly while the video loads, if it fails, or
   if the user prefers reduced motion (the video element is hidden then).
   Once the video is playing, we hide this fallback via .video-playing. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--forest-900);
  z-index: 0;
  transition: opacity 0.4s ease;
}
.hero.video-playing::before { opacity: 0; }

/* Background video — covers the hero, sits above the fallback image but
   below the gradient (::after) and content. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.7;
  filter: saturate(1.15);
  z-index: 0;
  pointer-events: none;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 29, 0.45) 0%, rgba(15, 42, 29, 0.25) 50%, rgba(15, 42, 29, 0.625) 100%);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 4rem;
  align-items: end;
}

.hero h1 {
  color: var(--cream);
  margin-bottom: 1.75rem;
}

.hero h1 em {
  font-style: italic;
  color: var(--amber-400);
  font-weight: 300;
}

.hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--moss-300);
  max-width: 42ch;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

.hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-end;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.75rem;
  background: rgba(250, 247, 240, 0.08);
  border: 1px solid rgba(168, 201, 169, 0.2);
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cream);
  backdrop-filter: blur(8px);
}

.hero-badge strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--amber-400);
  letter-spacing: -0.02em;
}

.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-500);
  box-shadow: 0 0 0 4px rgba(214, 130, 56, 0.2);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(214, 130, 56, 0.2); }
  50% { box-shadow: 0 0 0 9px rgba(214, 130, 56, 0.05); }
}

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-aside { align-items: flex-start; }
}

/* ============================================
   Stats strip
   ============================================ */
.stats-strip {
  background: var(--cream-warm);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.stat {
  text-align: center;
  padding: 0 0.5rem;
  border-left: 1px solid rgba(15, 42, 29, 0.12);
}

.stat:first-child {
  border-left: none;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--forest-900);
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.stat-number .unit {
  font-size: 0.55em;
  color: var(--amber-600);
  font-style: italic;
  font-weight: 400;
}

.stat-label {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.4;
  font-weight: 500;
  max-width: 24ch;
  margin: 0 auto;
}

@media (max-width: 740px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  .stat { border-left: none; }
  .stat:nth-child(odd) { border-right: 1px solid rgba(15, 42, 29, 0.12); }
  h2[style*="nowrap"] { white-space: normal !important; }
}

/* ============================================
   Section base
   ============================================ */
.section {
  padding: var(--section-y) 0;
}

.section-header {
  max-width: 720px;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}

.section-header.left {
  margin-left: 0;
  text-align: left;
}

.section-lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 1.25rem;
}

/* ============================================
   About block (home)
   ============================================ */
.about {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.about-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 42, 29, 0.15), transparent 40%);
}

.about-tag {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.3;
  z-index: 2;
}

.about-body p {
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.about-body strong {
  color: var(--forest-900);
  font-weight: 600;
}

.about-body em {
  color: var(--amber-600);
  font-style: italic;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Pillars — 3 core benefits
   ============================================ */
.pillars {
  background: var(--paper);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.pillar {
  position: relative;
  padding: 2rem 1.75rem 2rem;
  background: var(--cream);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(15, 42, 29, 0.25);
}

.pillar-image {
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.pillar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pillar:hover .pillar-image img {
  transform: scale(1.05);
}

.pillar-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--amber-600);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.pillar h3 {
  margin-bottom: 0.75rem;
  color: var(--forest-900);
}

.pillar p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Benefits (10) — full page
   ============================================ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.benefit-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.benefit-card:hover {
  border-color: var(--forest-400);
  transform: translateY(-2px);
}

.benefit-img {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-warm);
  min-height: 170px;
}

.benefit-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefit-content {
  display: flex;
  flex-direction: column;
}

.benefit-num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--amber-600);
  font-style: italic;
  margin-bottom: 0.35rem;
}

.benefit-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.benefit-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 740px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card { grid-template-columns: 90px 1fr; gap: 1rem; padding: 1.15rem; }
  .benefit-img { min-height: 110px; }
}

/* ============================================
   Trials — Ensayos
   ============================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 3.5rem;
  padding: 0 var(--pad-x);
}

.filter-btn {
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--forest-500);
  color: var(--forest-800);
}

.filter-btn.active {
  background: var(--forest-900);
  color: var(--cream);
  border-color: var(--forest-900);
}

.trials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.trial {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.trial:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -20px rgba(15, 42, 29, 0.22);
}

.trial-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  aspect-ratio: 2 / 1;
  /* Multiple redundant constraints to GUARANTEE uniform height across all
     cards (both two-image cards AND single-image "span 2" cards):
     1. aspect-ratio locks the overall container at 2:1
     2. grid-auto-rows: 1fr makes the grid row fill the container height
     3. overflow: hidden prevents any inner content from pushing outside */
  grid-auto-rows: 1fr;
  overflow: hidden;
}

.trial-img-wrap {
  position: relative;
  overflow: hidden;
  /* Fill the full grid cell — works for both 1-column and span-2 children */
  width: 100%;
  height: 100%;
  min-height: 0;
}

.trial-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Force the image to fill and crop rather than stretch the container */
  min-height: 0;
  max-height: 100%;
}

.trial-img-label {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.25rem 0.55rem;
  background: var(--amber-600);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}

.trial-img-label.treated {
  background: var(--forest-700);
}

.trial-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.trial-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  font-size: 0.82rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.trial-meta dt {
  color: var(--ink-mute);
  font-weight: 500;
}

.trial-meta dd {
  margin: 0;
  color: var(--forest-800);
  font-weight: 600;
}

.trial-text {
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}

.trial-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--amber-600);
  letter-spacing: 0.02em;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.trial-link:hover { color: var(--amber-500); }

/* ============================================
   Testimonials
   ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.tm {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  padding-bottom: 3.2rem;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.tm > div:last-child {
  display: flex;
  flex-direction: column;
}

.tm:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -20px rgba(15, 42, 29, 0.22);
}

.tm-photo {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-warm);
}

.tm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-quote-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.5;
  color: var(--amber-500);
  margin-bottom: 0.5rem;
  display: block;
}

.tm-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

.tm-author {
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  padding-top: 0.9rem;
}

.tm-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--forest-900);
}

.tm-farm {
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-top: 2px;
}

.tm-video {
  position: absolute;
  left: calc(2rem + 140px + 1.5rem);
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--amber-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tm-video::before {
  content: "▶";
  font-size: 0.65rem;
}

@media (max-width: 860px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .tm { grid-template-columns: 90px 1fr; gap: 1.25rem; padding: 1.5rem; padding-bottom: 2.75rem; }
  .tm-video { left: calc(1.5rem + 90px + 1.25rem); bottom: 1rem; }
}

/* ============================================
   Product page
   ============================================ */
.product-hero {
  background: var(--forest-900);
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  position: relative;
  overflow: hidden;
}

.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--forest-900);
  z-index: 0;
  transition: opacity 0.4s ease;
}
.product-hero.video-playing::before { opacity: 0; }

/* Background video for product hero */
.product-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.75;
  filter: saturate(1.2) contrast(1.05);
  z-index: 0;
  pointer-events: none;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .product-hero-video { display: none; }
}

.product-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15, 42, 29, 0.8) 10%, rgba(15, 42, 29, 0.35) 50%, rgba(15, 42, 29, 0.125) 100%);
}

.product-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.product-hero h1 { color: var(--cream); margin-bottom: 1.25rem; }
.product-hero p { color: var(--moss-300); font-size: 1.1rem; line-height: 1.6; max-width: 50ch; }

.product-bottle {
  display: flex;
  justify-content: center;
}

.product-bottle img {
  max-width: 380px;
  width: 100%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.4));
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-grid.pricing-grid-two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

.price-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: all 0.25s ease;
}

.price-card.featured {
  border-color: var(--amber-600);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}

.price-card.featured::before {
  content: "Más popular";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.9rem;
  background: var(--amber-600);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.price-card:hover { transform: translateY(-4px); }

.price-size {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--forest-800);
  margin-bottom: 0.25rem;
}

.price-volume {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-bottom: 1.25rem;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--forest-900);
  margin-bottom: 0.25rem;
}

.price-amount .currency {
  font-size: 1.2rem;
  vertical-align: top;
  color: var(--amber-600);
}

.price-unit {
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin-bottom: 1.5rem;
}

@media (max-width: 740px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .product-hero-inner { grid-template-columns: 1fr; }
}

/* Protocol */
.protocol {
  background: var(--cream-warm);
}

.protocol-table {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

.protocol-row {
  display: grid;
  grid-template-columns: 100px 1.3fr 1fr 1fr;
  align-items: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
  gap: 1rem;
}

.protocol-row:last-child { border-bottom: none; }

.protocol-row.header {
  background: var(--forest-900);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.protocol-week {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--amber-600);
  font-style: italic;
}

.protocol-app {
  font-weight: 600;
  color: var(--forest-800);
}

.protocol-method {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.protocol-dose {
  font-weight: 600;
  color: var(--forest-900);
  font-size: 0.95rem;
}

/* Notes block below protocol table */
.protocol-notes {
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 1.35rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--r-md);
}

.protocol-notes-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 0.75rem;
}

.protocol-notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.protocol-notes li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 1.25rem;
  position: relative;
}

.protocol-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber-500);
}

/* Group rows that belong to the same week */
.protocol-row.same-week {
  border-top: none;
  padding-top: 0.6rem;
  padding-bottom: 1.1rem;
  position: relative;
  background: rgba(214, 130, 56, 0.04);
}

.protocol-row.same-week::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 3px;
  background: var(--amber-500);
}

/* The row just before .same-week shouldn't have its separator line */
.protocol-row:has(+ .same-week) {
  border-bottom: 1px dashed rgba(214, 130, 56, 0.35);
  padding-bottom: 0.6rem;
  background: rgba(214, 130, 56, 0.04);
}

.protocol-row:has(+ .same-week)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber-500);
}

.protocol-row:has(+ .same-week) {
  position: relative;
}

/* The "+" mark replacing the week number on the grouped row */
.plus-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber-500);
  color: var(--cream);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 740px) {
  .protocol-row {
    grid-template-columns: 60px 1fr 1fr;
    font-size: 0.85rem;
  }
  .protocol-method { display: none; }
  .protocol-row.header .protocol-method { display: none; }
}

/* ============================================
   Contact
   ============================================ */
.contact-hero {
  padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  background: var(--cream);
}

/* Wrapper that stretches hero + cards to fill the viewport, so the dark
   footer only appears below the fold when the user scrolls. */
.contact-page-wrap {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Subtract nav height (~105px) so hero+cards fill the remaining viewport */
  min-height: calc(100vh - 105px);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(1.5rem, 2.5vw, 2.5rem);
}

.contact-card {
  padding: 1.75rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--forest-500);
}

.contact-card.whatsapp {
  background: linear-gradient(180deg, #20593c 0%, #17432c 100%);
  color: var(--cream);
  border: none;
}

.contact-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--forest-900);
  color: var(--cream);
}

.contact-card.whatsapp .contact-icon {
  background: rgba(250, 247, 240, 0.15);
}

.contact-card h3 {
  color: inherit;
  margin-bottom: 0.5rem;
}

.contact-card p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  color: inherit;
  opacity: 0.85;
}

.contact-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: inherit;
  margin-bottom: 1.5rem;
  word-break: break-word;
}

.office-block {
  background: var(--cream-warm);
  padding: clamp(3rem, 5vw, 4rem) 0;
  text-align: center;
}

.office-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.office-label {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber-600);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.office-address {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--forest-900);
  line-height: 1.4;
}

@media (max-width: 740px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CTA band
   ============================================ */
.cta-band {
  background: var(--forest-900);
  color: var(--cream);
  padding: clamp(4rem, 7vw, 6rem) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,fit=crop/mk3zy0Zg31u8y554/istock-1516672241-A854olXN2Vuw10gb.jpg") center/cover;
  opacity: 0.18;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(15, 42, 29, 0.6) 70%);
}

.cta-band-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.cta-band h2 {
  color: var(--cream);
  margin-bottom: 1rem;
}

.cta-band h2 em {
  font-style: italic;
  color: var(--amber-400);
}

.cta-band p {
  font-size: 1.1rem;
  color: var(--moss-300);
  margin-bottom: 2rem;
  max-width: 82ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band-ctas {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--forest-900);
  color: var(--moss-300);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(168, 201, 169, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 1.25rem;
}

.footer-brand img { height: 84px; width: auto; object-fit: contain; }

.footer-wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  gap: 3px;
}

.footer-brand .wm-byo { color: var(--amber-400); }
.footer-brand .wm-zenix { color: var(--moss-300); }

.footer-about {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 32ch;
  color: var(--moss-300);
}

.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 1rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--moss-300);
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--cream); }

.footer-address-link:hover { color: var(--cream) !important; }
.footer-address-link:hover svg { color: var(--amber-400); }

.footer-bottom {
  max-width: 1280px;
  margin: 3rem auto 0;
  padding: 1.5rem var(--pad-x) 0;
  border-top: 1px solid rgba(168, 201, 169, 0.12);
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--moss-300);
  opacity: 0.75;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Floating WhatsApp
   ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: wafloat 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 38px -8px rgba(37, 211, 102, 0.65), 0 4px 10px rgba(0,0,0,0.15);
}

@keyframes wafloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.whatsapp-float svg { width: 28px; height: 28px; }

/* ============================================
   Reveal on scroll
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Utils
   ============================================ */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }

/* ============================================
   POLISH ANIMATIONS (full experience)
   ============================================ */

/* ——— 1. Hero staggered entrance ——— */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .eyebrow,
.hero h1,
.hero-lead,
.hero-ctas,
.hero-aside {
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero .eyebrow  { animation-delay: 0.05s; }
.hero h1        { animation-delay: 0.15s; }
.hero-lead      { animation-delay: 0.30s; }
.hero-ctas      { animation-delay: 0.45s; }
.hero-aside     { animation-delay: 0.55s; }

/* ——— 3. Refined hover lift on cards ——— */
.pillar,
.benefit-card,
.tm,
.trial,
.price-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease;
}

.pillar:hover,
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 48px -28px rgba(15, 42, 29, 0.3), 0 8px 16px -12px rgba(15, 42, 29, 0.15);
}

/* Trials only lift when they contain a clickable video/audio link */
.trial:has(.trial-link):hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 48px -28px rgba(15, 42, 29, 0.3), 0 8px 16px -12px rgba(15, 42, 29, 0.15);
  cursor: pointer;
}

/* Testimonials only lift when they have a video/audio link */
.tm:has(.tm-video):hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 48px -28px rgba(15, 42, 29, 0.3), 0 8px 16px -12px rgba(15, 42, 29, 0.15);
  cursor: pointer;
}

/* Subtle image zoom on hover — only where the card itself lifts */
.pillar-image img,
.trial:has(.trial-link) .trial-img-wrap img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pillar:hover .pillar-image img,
.trial:has(.trial-link):hover .trial-img-wrap img {
  transform: scale(1.04);
}

/* ——— 4. Parallax on hero image ——— */
.hero::before {
  will-change: transform;
  transform: translateY(var(--parallax-y, 0));
}

/* ——— 5. Nav link underline animation ——— */
.nav-links a:not(.nav-cta) {
  position: relative;
}

.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--amber-600);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

/* The active link keeps its underline always visible (overrides earlier rule) */
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero h1,
  .hero-lead,
  .hero-ctas,
  .hero-aside {
    animation: none;
    opacity: 1;
  }
  .hero::before { transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================================
   Dosage Calculator — Compact single-view layout
   ============================================ */

/* Page fits in viewport below sticky nav, no scroll on desktop. */
.dosage-page { background: var(--cream-warm); }

.calc-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(0.9rem, 2vw, 1.5rem) var(--pad-x) clamp(0.9rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  /* Nav sticky ~132px; leave a hair of room */
  min-height: calc(100dvh - 140px);
}

.calc-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.calc-page-header .eyebrow {
  margin: 0;
}

.calc-page-header h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.05;
  margin: 0;
  color: var(--forest-900);
  font-weight: 400;
}

.calc-page-header h1 em {
  color: var(--amber-600);
  font-style: italic;
}

/* Layout */
.calc-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.calc-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Wrapper holds the step label + the white input card, stretching to match
   the results column so input-card bottom aligns with returns-grid bottom. */
.calc-col-inputs-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.calc-col-inputs {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(15, 42, 29, 0.04), 0 8px 24px rgba(15, 42, 29, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;  /* stretch to fill remaining vertical space */
}

/* Push the note + CTA to the bottom of the card when it stretches */
.calc-cta { margin-top: auto; }

/* Crop dropdown: sits inside the primary input wrap, right of the number */
.calc-input-wrap-crop {
  padding-right: 0;
}

.calc-crop-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-right: 1px solid var(--moss-300);
  background: transparent;
  padding: 0.55rem 2rem 0.55rem 0.85rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--forest-900);
  cursor: pointer;
  outline: none;
  letter-spacing: 0;
  /* Custom chevron — forest green */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232d6040' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  border-radius: var(--r-md) 0 0 var(--r-md);
  align-self: stretch;
  transition: background-color 0.2s ease;
}

.calc-crop-select:hover {
  background-color: rgba(168, 201, 169, 0.22);
}

.calc-crop-select:focus-visible {
  background-color: rgba(168, 201, 169, 0.22);
  color: var(--forest-900);
}

.calc-col-results {
  gap: 0.85rem;
}

/* Make the returns grid stretch vertically to match the input card height */
.calc-col-results .calc-returns {
  flex: 1 1 auto;
  align-content: stretch;
}

/* And let each card row share the stretched height equally */
.calc-col-results .calc-returns > .cr-card {
  height: 100%;
}

/* Step label */
.calc-step-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-800);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--amber-600);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.calc-step-sub {
  color: var(--ink-mute);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  margin-left: auto;
}

/* Inputs */
.calc-field label,
.calc-tank label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.calc-field-primary label {
  color: var(--forest-700);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.calc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc-input-wrap:focus-within {
  border-color: var(--forest-500);
  box-shadow: 0 0 0 3px rgba(61, 122, 82, 0.12);
}

.calc-input-wrap input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--forest-900);
  -moz-appearance: textfield;
}

.calc-field-primary .calc-input-wrap input {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  padding: 0.65rem 0.5rem;
  min-width: 0;
  text-align: right;
}

.calc-input-wrap input::-webkit-outer-spin-button,
.calc-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-suffix {
  padding: 0 0.8rem 0 0.25rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-mute);
  white-space: nowrap;
}

.calc-prefix {
  padding: 0 0.25rem 0 0.8rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--amber-600);
  white-space: nowrap;
}

.calc-tanks-title {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.1rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line-soft);
}

.calc-tanks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.calc-tank .calc-input-wrap input {
  font-size: 1.2rem;
  padding: 0.55rem 0.6rem;
  text-align: center;
}

.calc-tank .calc-input-wrap {
  padding-right: 0;
}

.calc-cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
}

/* Important notes list (two items in the input card) */
.calc-notes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.calc-notes li {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-soft);
  padding-left: 0.9rem;
  position: relative;
}

.calc-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber-500);
}

/* Compact protocol table */
.calc-protocol {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.calc-protocol-row {
  display: grid;
  grid-template-columns: 60px 1.1fr 1fr 1fr;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  gap: 0.5rem;
  font-size: 0.88rem;
}

.calc-protocol-row:last-child { border-bottom: none; }

.calc-protocol-row.header {
  background: var(--forest-900);
  color: var(--cream);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.cp-week {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--amber-600);
  font-style: italic;
  line-height: 1;
}

.cp-app {
  font-weight: 600;
  color: var(--forest-800);
  font-size: 0.82rem;
}

.cp-method {
  color: var(--ink-mute);
  font-size: 0.78rem;
}

.cp-dose {
  font-weight: 700;
  color: var(--forest-900);
  font-size: 0.92rem;
  text-align: right;
}

/* "Same week" indicator for Week 1 + foliar row */
.calc-protocol-row.same-week .cp-week {
  color: var(--amber-600);
  font-size: 1.15rem;
  font-weight: 600;
  font-style: normal;
}

.calc-protocol-row.same-week .plus-mark {
  opacity: 0.8;
}

/* Compact returns grid */
.calc-returns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.cr-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 120px;
}

/* Value sits at the bottom of the card; labels can wrap without pushing values down */
.cr-card .cr-value { margin-top: auto; }

.cr-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.25;
}

.cr-micro {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-mute);
  font-size: 0.78rem;
}

.cr-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--forest-900);
  font-weight: 400;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.cr-cur {
  font-size: 0.7rem;
  color: var(--amber-600);
  font-weight: 600;
  font-family: var(--font-body);
  align-self: flex-start;
  padding-top: 0.15rem;
}

.cr-u {
  font-size: 0.6rem;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 0.15rem;
}

/* Highlighted (savings, sales) */
.cr-card.cr-hl {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  border-color: var(--amber-500);
}

.cr-card.cr-hl .cr-label {
  color: var(--amber-600);
}

/* Negative (cost) */
.cr-card.cr-neg .cr-value {
  color: var(--ink-soft);
}

/* Total — dark strip spanning full width or its own card */
.cr-card.cr-total {
  background: var(--forest-900);
  color: var(--cream);
  border-color: var(--forest-900);
  position: relative;
  overflow: hidden;
}

.cr-card.cr-total::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 100%, rgba(232, 161, 92, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

.cr-card.cr-total .cr-label {
  color: var(--amber-400);
  position: relative;
}

.cr-card.cr-total .cr-value {
  color: var(--cream);
  font-size: 1.7rem;
  position: relative;
}

.cr-card.cr-total .cr-cur {
  color: var(--amber-400);
}

.cr-card.cr-total .cr-u {
  color: var(--moss-300);
}

/* Hide WhatsApp float on dosage page — CTA is inline */
.dosage-page .whatsapp-float { display: none; }

/* ========== Responsive ========== */

/* Tablet: shrink input column slightly */
@media (max-width: 1080px) {
  .calc-layout { grid-template-columns: 300px 1fr; }
  /* Slimmer dropdown so the number has room */
  .calc-crop-select {
    padding: 0.55rem 1.6rem 0.55rem 0.7rem;
    font-size: 0.78rem;
    background-position: right 0.5rem center;
  }
}

/* Stack on smaller screens */
@media (max-width: 820px) {
  .calc-page { min-height: auto; }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-col-inputs { order: 1; }
  .calc-col-results { order: 2; }
  .calc-returns { grid-template-columns: repeat(2, 1fr); }
  .cr-card.cr-total { grid-column: span 2; }
}

@media (max-width: 480px) {
  .calc-page-header h1 { font-size: 1.4rem; }
  .calc-tanks { gap: 0.4rem; }
  .cr-value { font-size: 1.25rem; }
  .cr-card.cr-total .cr-value { font-size: 1.5rem; }
}

/* Short viewports: shrink more aggressively */
@media (min-width: 821px) and (max-height: 820px) {
  .calc-page-header h1 { font-size: 1.5rem; }
  .cr-card { min-height: 90px; padding: 0.65rem 0.8rem; }
  .cr-value { font-size: 1.3rem; }
  .calc-protocol-row { padding: 0.4rem 0.8rem; }
  .calc-field-primary .calc-input-wrap input { font-size: 1.2rem; padding: 0.45rem 0.5rem; }
  /* Tighten input card vertical rhythm */
  .calc-col-inputs { padding: 0.9rem 1rem; gap: 0.55rem; }
  .calc-input-wrap input { padding: 0.4rem 0.6rem; font-size: 1.1rem; }
  .calc-tank .calc-input-wrap input { padding: 0.35rem 0.4rem; font-size: 1rem; }
  .calc-soil-select { padding: 0.5rem 2.2rem 0.5rem 0.85rem; font-size: 1.05rem; }
  .calc-tanks-title { padding-top: 0.45rem; }
  .calc-notes li { font-size: 0.7rem; }
  .calc-cta { padding: 0.6rem 0.9rem; font-size: 0.8rem; }
  .calc-otros-message { padding: 0.5rem 0.7rem; font-size: 0.72rem; }
}

/* ============================================
   Editable field styling — make inputs obviously editable
   ============================================ */

/* Stronger green border on all input wraps to signal "editable" */
.calc-input-wrap {
  border-color: var(--forest-400);
  border-width: 2px;
  background: linear-gradient(0deg, rgba(111, 163, 126, 0.14), rgba(111, 163, 126, 0.14)), var(--cream);
  position: relative;
}

.calc-input-wrap:hover {
  border-color: var(--forest-500);
  background: linear-gradient(0deg, rgba(111, 163, 126, 0.2), rgba(111, 163, 126, 0.2)), var(--cream);
}

.calc-input-wrap:focus-within {
  border-color: var(--forest-600);
  box-shadow: 0 0 0 3px rgba(61, 122, 82, 0.22);
}

/* Pencil icon badge on every editable input wrap */
.calc-input-wrap::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M11.5 1.5L14.5 4.5L5 14H2V11L11.5 1.5Z' stroke='%231f4a33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='%23faf7f0'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
}

/* Primary input: position pencil after the m² suffix instead of overlapping it */
.calc-input-wrap-crop::after {
  top: 0.4rem;
  right: 0.45rem;
  width: 13px;
  height: 13px;
}

/* Price field: no pencil — $ prefix and /unit suffix already signal interactivity */
.calc-field-price .calc-input-wrap::after { display: none; }

/* Tank input wraps: center the pencil better for smaller fields */
.calc-tank .calc-input-wrap::after {
  top: 0.25rem;
  right: 0.3rem;
  width: 10px;
  height: 10px;
}

/* ============================================
   Week 1 highlight band — groups Suelo + Foliar as one week
   ============================================ */
.calc-protocol-row:nth-child(2), /* W1 soil */
.calc-protocol-row.same-week {    /* W1 foliar (same week) */
  background: linear-gradient(90deg, rgba(232, 161, 92, 0.12) 0%, rgba(232, 161, 92, 0.04) 100%);
  position: relative;
}

/* Left accent bracket spanning the first two content rows */
.calc-protocol-row:nth-child(2)::before,
.calc-protocol-row.same-week::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--amber-500);
}

/* Seamless joining: remove inner border between W1 soil and W1 foliar */
.calc-protocol-row:nth-child(2) {
  border-bottom-color: rgba(232, 161, 92, 0.25);
}

/* Hide the "01" on the foliar row — it's still Week 1, shown by the + mark already */
/* but make the + mark more clearly amber and tight */
.calc-protocol-row.same-week .cp-week {
  color: var(--amber-600);
  font-weight: 700;
  font-size: 1.1rem;
}

/* "01 +" indicator on the second row of Week 1 — makes it unmistakable
   that both rows belong to the same week. The "01" is muted/italic so the
   primary anchor remains the soil row's "01". */
.cp-week .week-num-muted,
.protocol-week .week-num-muted {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--amber-400);
  opacity: 0.7;
  margin-right: 0.3rem;
  font-size: 0.85em;
}

/* Plus mark: tighten spacing when paired with "01" */
.cp-week .plus-mark,
.protocol-week .plus-mark {
  font-weight: 600;
}

/* ============================================
   Soil type field — standalone dropdown below primary
   ============================================ */
.calc-field-soil label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.calc-input-wrap-soil {
  padding: 0;
}

.calc-input-wrap-soil::after { display: none; } /* no pencil on pure-select field */

.calc-soil-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  padding: 0.65rem 2.2rem 0.65rem 0.85rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--forest-900);
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232d6040' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  border-radius: var(--r-md);
}

/* ============================================
   Protocol matrix — Week × {Soil, Foliar} checkmark grid
   ============================================ */
.calc-protocol-matrix .calc-protocol-row {
  grid-template-columns: 60px 80px 80px 1fr 1fr;
  gap: 0.75rem;
}

.calc-protocol-matrix .calc-protocol-row.header {
  font-size: 0.62rem;
}

.cp-check-col {
  text-align: center;
}

.cp-check {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Check mark: empty circle when inactive, green filled circle with ✓ when active */
.cp-check-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--line);
  position: relative;
  display: inline-block;
  transition: all 0.2s ease;
}

.cp-check-mark.active {
  background: var(--forest-500);
  border-color: var(--forest-500);
}

.cp-check-mark.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Dose cells: center-align so header and values stack visually */
.calc-protocol-matrix .cp-dose {
  text-align: center;
  font-size: 0.9rem;
}

/* Dose wrapper: total dose on top, small cc/L concentration below */
.calc-protocol-matrix .cp-dose-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.cp-dose-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Dose column headers: center too, matching the values */
.calc-protocol-matrix .calc-protocol-row.header > div:nth-child(4),
.calc-protocol-matrix .calc-protocol-row.header > div:nth-child(5) {
  text-align: center;
}

.cp-dose-empty {
  color: var(--ink-mute) !important;
  font-weight: 400 !important;
  font-family: var(--font-body);
  opacity: 0.5;
}

/* Disable the legacy Week 1 amber highlight — every row is now a single week */
.calc-protocol-matrix .calc-protocol-row:nth-child(2),
.calc-protocol-matrix .calc-protocol-row.same-week {
  background: transparent;
}

.calc-protocol-matrix .calc-protocol-row:nth-child(2)::before,
.calc-protocol-matrix .calc-protocol-row.same-week::before {
  display: none;
}

/* Narrow viewport: condense a bit */
@media (max-width: 1080px) {
  .calc-protocol-matrix .calc-protocol-row {
    grid-template-columns: 48px 55px 55px 1fr 1fr;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
  }
  .cp-check-mark { width: 18px; height: 18px; }
  .cp-check-mark.active::after { width: 4px; height: 7px; }
  .calc-protocol-matrix .cp-dose { font-size: 0.82rem; }
}

/* "Otros" custom protocol message — shown when user selects "Otros" crop */
.calc-otros-message {
  background: linear-gradient(0deg, rgba(232, 161, 92, 0.2), rgba(232, 161, 92, 0.2)), var(--cream);
  border: 2px solid var(--amber-600);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem 0.85rem 2.4rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--forest-900);
  font-weight: 600;
  position: relative;
  box-shadow: 0 2px 8px rgba(184, 101, 26, 0.15);
}

/* Info-bubble icon on the left */
.calc-otros-message::before {
  content: "!";
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--amber-600);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* WhatsApp icon on the Cotizar CTA */
.cta-wa-icon {
  margin-right: 0.55rem;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Subtitle under the dosis page hero */
.calc-page-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--amber-600);
  margin: 0.5rem 0 0 0;
  line-height: 1.4;
}

/* ============================================
   Media Lightbox (Google Drive embeds)
   ============================================ */

.mlb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 22, 18, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mlb-backdrop.mlb-open {
  display: flex;
  opacity: 1;
}

.mlb-frame-wrap {
  position: relative;
  max-width: min(90vw, 1400px);
  max-height: 88vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.mlb-backdrop.mlb-open .mlb-frame-wrap { transform: scale(1); }

.mlb-frame-wrap iframe,
.mlb-frame-wrap .mlb-audio-shell {
  width: 100%;
  max-height: 88vh;
  border: none;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: block;
}

/* Default 16:9 for videos */
.mlb-frame-wrap.mlb-ratio-video iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-height: 88vh;
}

/* Portrait (vertical phone) videos */
.mlb-frame-wrap.mlb-ratio-portrait {
  max-width: min(50vh, 420px);
}
.mlb-frame-wrap.mlb-ratio-portrait iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  max-height: 88vh;
}

/* Square videos */
.mlb-frame-wrap.mlb-ratio-square {
  max-width: min(80vh, 800px);
}
.mlb-frame-wrap.mlb-ratio-square iframe {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  max-height: 88vh;
}

/* Audio: a centered card — sized tall enough to show Drive's cover image in full */
.mlb-frame-wrap.mlb-ratio-audio {
  max-width: min(90vw, 640px);
}
.mlb-frame-wrap.mlb-ratio-audio iframe {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 88vh;
  background: var(--cream, #faf7f0);
  border-radius: 10px;
}

.mlb-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream, #faf7f0);
  color: var(--forest-900, #1a3020);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.mlb-close:hover {
  transform: scale(1.08);
  background: #fff;
}
.mlb-close:focus-visible {
  outline: 3px solid var(--amber-400, #d4a847);
  outline-offset: 3px;
}

.mlb-caption {
  position: absolute;
  bottom: -2.2rem;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--cream, #faf7f0);
  font-size: 0.85rem;
  opacity: 0.75;
  font-family: var(--font-body, sans-serif);
}

.mlb-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cream, #faf7f0);
  font-size: 0.9rem;
  opacity: 0.7;
  pointer-events: none;
}

/* Prevent body scroll when lightbox open */
body.mlb-locked {
  overflow: hidden;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .mlb-close {
    top: -10px;
    right: -10px;
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
  .mlb-caption {
    font-size: 0.75rem;
    bottom: -1.8rem;
  }
}