/* Androlaris - Salud Verde Natural Wellness */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  --sv-bg: #f7f4ef;
  --sv-bg-alt: #edf4ee;
  --sv-bg-dark: #1b5e3b;
  --sv-panel: #ffffff;
  --sv-green: #1b5e3b;
  --sv-green-mid: #2e7d52;
  --sv-green-light: #3a8c5c;
  --sv-gold: #c8963e;
  --sv-gold-light: #ddb060;
  --sv-gold-pale: #f5e9d3;
  --sv-text: #1f2d1e;
  --sv-text-mid: #4a5c49;
  --sv-text-light: #6b7c6a;
  --sv-border: #d6e8d8;
  --sv-shadow: rgba(27, 94, 59, 0.10);
  --sv-shadow-gold: rgba(200, 150, 62, 0.18);
}

/* ── Body & base ── */
.u-body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  color: var(--sv-text) !important;
  background-color: var(--sv-bg) !important;
  -webkit-font-smoothing: antialiased;
}

.u-body h1, .u-body h2, .u-body h3,
.u-body h4, .u-body h5, .u-body h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--sv-green) !important;
  text-transform: none !important;
  letter-spacing: 0.01em;
  font-weight: 700;
  text-shadow: none !important;
}

.u-body h1 {
  color: var(--sv-green) !important;
  font-size: 2.8rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.u-body h2 {
  font-size: 2rem !important;
  font-weight: 600 !important;
}

.u-body h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

.u-body p {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  color: var(--sv-text) !important;
  text-shadow: none !important;
}

.u-body a:not(.u-btn):not(.u-button-style) {
  color: var(--sv-gold) !important;
  text-decoration: underline;
  text-shadow: none !important;
}

/* ── Logo ── */
.u-logo.u-logo-text {
  display: inline-block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  font-style: italic;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: var(--sv-green) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: color 0.2s;
  padding: 0.4em 0 !important;
  min-height: auto !important;
  width: auto !important;
}
.u-logo.u-logo-text:hover {
  color: var(--sv-gold) !important;
}

/* ── Header ── */
.u-header.u-palette-4-light-3,
.u-palette-4-light-3,
section.u-palette-4-light-3 {
  background-color: var(--sv-panel) !important;
  color: var(--sv-text) !important;
  border-bottom: 2px solid var(--sv-gold) !important;
  box-shadow: 0 2px 16px var(--sv-shadow) !important;
}

.u-palette-4-light-3 .u-nav-link,
.u-palette-4-light-3 .u-text-grey-90,
.u-palette-4-light-3 .u-text-palette-1-base {
  color: var(--sv-text) !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.u-palette-4-light-3 .u-nav-link:hover,
.u-palette-4-light-3 .u-text-hover-grey-90:hover,
.u-palette-4-light-3 .u-text-hover-palette-2-base:hover {
  color: var(--sv-green) !important;
  text-shadow: none !important;
}

/* ── White sections → light panels ── */
.u-white,
section.u-white {
  background-color: var(--sv-panel) !important;
  color: var(--sv-text) !important;
  border: none !important;
}

.u-layout-cell.u-white {
  background-color: var(--sv-panel) !important;
  border: none !important;
  box-shadow: 0 4px 20px var(--sv-shadow);
  border-radius: 8px;
}

.u-white .u-text-1, .u-white .u-text-2, .u-white .u-text-3,
.u-white .u-text-4, .u-white .u-text-5, .u-white .u-text-6,
.u-white .u-text-7, .u-white .u-text-8, .u-white p {
  color: var(--sv-text) !important;
}

.u-white h3 {
  color: var(--sv-green) !important;
  text-shadow: none !important;
}

/* ── Palette-4-light-3 sections (alternating) ── */
.u-palette-4-light-3:not(.u-header),
section.u-palette-4-light-3 {
  background-color: var(--sv-bg-alt) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.u-palette-4-light-3 .u-container-layout,
.u-palette-4-light-3 .u-inner-container-layout {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Section backgrounds ── */
.u-section-1 {
  background-color: var(--sv-bg) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.u-section-2, .u-section-4, .u-section-6, .u-section-8 {
  background-color: var(--sv-bg-alt) !important;
}

.u-section-3, .u-section-5, .u-section-7 {
  background-color: var(--sv-panel) !important;
}

/* Section headings */
.u-section-2 h3, .u-section-4 h3, .u-section-6 h3,
.u-section-2 .u-text-1, .u-section-4 .u-text-1, .u-section-6 .u-text-1 {
  color: var(--sv-green) !important;
  text-shadow: none !important;
}

.u-section-1 .u-text-1, .u-section-1 p,
.u-section-2 .u-text-2, .u-section-2 .u-text-4,
.u-section-2 .u-text-6, .u-section-2 .u-text-8,
.u-section-2 .u-text-default, .u-section-2 .u-custom-font,
.u-section-3 .u-text-1, .u-section-3 .u-text-2,
.u-section-4 .u-text-2, .u-section-5 .u-text-2,
.u-section-6 .u-text-2, .u-section-7 .u-text-2,
.u-section-8 .u-text-1, .u-section-8 .u-text-2 {
  color: var(--sv-text) !important;
}

/* ── Hero section ── */
.u-section-1 h1 {
  color: var(--sv-green) !important;
  font-size: 3rem !important;
  line-height: 1.15 !important;
}

/* ── Ingredient card cells ── */
.u-layout-cell {
  transition: box-shadow 0.2s;
}

/* ── Dividers ── */
.u-line-horizontal,
.u-border-grey-dark-1 {
  border-color: var(--sv-gold) !important;
  box-shadow: none !important;
  opacity: 0.7;
}

/* ── Images ── */
.u-image img {
  filter: saturate(0.92) contrast(1.03) brightness(1.01);
  border-radius: 6px;
}

/* ── Buttons ── */
.u-btn-submit,
.u-button-style.u-palette-1-dark-3,
.u-active-palette-1-dark-3,
.u-hover-palette-1-dark-1 {
  background: var(--sv-green) !important;
  color: #fff !important;
  border: 2px solid var(--sv-green) !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 12px 36px !important;
  box-shadow: 0 4px 16px var(--sv-shadow) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  text-shadow: none !important;
}

.u-btn-submit:hover,
.u-button-style.u-palette-1-dark-3:hover {
  background: var(--sv-gold) !important;
  border-color: var(--sv-gold) !important;
  box-shadow: 0 6px 24px var(--sv-shadow-gold) !important;
  color: #fff !important;
}

/* ── Form inputs ── */
.u-input, .u-input-rectangle,
.u-form-group input, .u-form-group textarea {
  background-color: var(--sv-panel) !important;
  color: var(--sv-text) !important;
  border: 1.5px solid var(--sv-border) !important;
  border-radius: 8px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
}

.u-input:focus,
.u-form-group input:focus,
.u-form-group textarea:focus {
  border-color: var(--sv-green) !important;
  box-shadow: 0 0 0 3px rgba(27, 94, 59, 0.12) !important;
  outline: none;
}

.u-input::placeholder,
.u-input-rectangle::placeholder {
  color: var(--sv-text-light) !important;
}

/* ── Footer ── */
.u-footer.u-grey-90,
.u-grey-90,
footer.u-footer {
  background-color: var(--sv-green) !important;
  color: #e8f5ec !important;
  border-top: 3px solid var(--sv-gold) !important;
  box-shadow: none !important;
}

.u-footer .u-text-1,
.u-footer .u-text-2,
.u-footer .u-text-legal,
.u-footer p,
.u-grey-90 .u-text-variant,
.u-grey-90 p {
  color: #e8f5ec !important;
}

.u-footer a,
.u-grey-90 a,
.u-text-palette-1-light-3 {
  color: var(--sv-gold-light) !important;
  text-shadow: none !important;
  text-decoration: none;
}

.u-footer a:hover,
.u-grey-90 a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ── Mobile sidenav ── */
.u-sidenav,
.u-menu-overlay {
  background-color: var(--sv-panel) !important;
  border-left: 3px solid var(--sv-gold) !important;
}

.u-sidenav .u-nav-link {
  color: var(--sv-text) !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ── Overlap header ── */
.u-overlap:not(.u-sticky-scroll) .u-header {
  background-color: var(--sv-panel) !important;
}

/* ── Accent decorative rule ── */
.u-body .u-text-palette-1-light-3 {
  color: var(--sv-gold-light) !important;
}

/* ── Rich text / fr-view ── */
.fr-view h1, .fr-view h2, .fr-view h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--sv-green) !important;
}

/* ── Extra section utility (new blocks added in HTML) ── */
.sv-benefits {
  background: var(--sv-bg-alt);
  padding: 60px 0;
}

.sv-why {
  background: var(--sv-panel);
  padding: 60px 0;
}

.sv-card {
  background: var(--sv-panel);
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 4px 20px var(--sv-shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}

.sv-card:hover {
  box-shadow: 0 8px 32px rgba(27, 94, 59, 0.15);
  transform: translateY(-3px);
}

.sv-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--sv-gold-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-card-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--sv-green);
}

.sv-card h3 {
  font-size: 1.15rem !important;
  margin-bottom: 10px;
  color: var(--sv-green) !important;
}

.sv-card p {
  font-size: 0.95rem !important;
  color: var(--sv-text-mid) !important;
  line-height: 1.6 !important;
  margin: 0;
}

.sv-stat {
  text-align: center;
  padding: 24px 16px;
}

.sv-stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--sv-green);
  display: block;
  line-height: 1;
}

.sv-stat-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9rem;
  color: var(--sv-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
  display: block;
}

.sv-section-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-gold);
  display: block;
  margin-bottom: 10px;
}

.sv-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.sv-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.sv-section-heading {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 20px;
}

.sv-section-heading h2 {
  font-family: 'Playfair Display', serif;
  color: var(--sv-green);
  font-size: 2rem;
  margin-bottom: 14px;
}

.sv-section-heading p {
  color: var(--sv-text-mid);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .sv-grid-3, .sv-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .sv-grid-3, .sv-grid-4 {
    grid-template-columns: 1fr;
  }
  .u-body h1 {
    font-size: 2rem !important;
  }
  .sv-stat-number {
    font-size: 2rem;
  }
}