/* ============================================================
   v4 — Tema verde (referencia: ideas/idea verde 1.jpg)
   Se carga DESPUÉS de styles.css solo en el build --v4.
   Reasigna los tokens --violet-* a una escala verde bosque y
   corrige los colores que styles.css tiene escritos a mano.
   ============================================================ */

:root {
  /* Marca: verde bosque → salvia (los nombres se mantienen para no tocar styles.css) */
  --violet-900: #03261E;
  --violet-700: #0E3F31;
  --violet-600: #17513F;
  --violet-500: #2A6650;
  --violet-400: #7F9F86;
  --violet-200: #CFDACB;
  --violet-100: #E5ECDF;
  --violet-050: #F3F5EE;

  /* Acentos de la referencia */
  --sage: #D9E2C4;
  --sage-deep: #9FB29C;
  --cream: #EAE4D6;
  --cream-2: #F2ECE0;
  --coral: #F08A74;
  --pastel-blue: #E1EFF8;
  --pastel-pink: #FBE4DF;
  --pastel-sand: #F2E6D6;
  --forest: #01241D;

  /* Neutros cálidos */
  --ink: #13211B;
  --ink-soft: #435049;
  --ink-mute: #6D7872;
  --line: #E7E3DA;

  /* Fondos */
  --bg-page: #FAF9F6;
  --bg-lavender: linear-gradient(180deg, #F4F1EA 0%, #F7F5EF 60%, #FAF9F6 100%);
  --bg-deep: linear-gradient(135deg, #01241D 0%, #06301F 55%, #0E3F31 100%);

  /* Formas: menos redondeadas que la v1 */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-sm: 0 2px 10px rgba(3, 38, 30, .05);
  --shadow-md: 0 14px 36px rgba(3, 38, 30, .08);
  --shadow-lg: 0 26px 60px rgba(3, 38, 30, .14);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---------- Tipografía: títulos con serifa ---------- */
h1, h2, h3,
.h-xl, .h-lg, .h-md,
.cta-band h2, .prose h2, .prose h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
.text-grad {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--violet-600);
  font-style: italic;
}
.eyebrow { background: var(--sage); border-color: transparent; color: var(--violet-700); }
.eyebrow::before { background: var(--violet-600); }
.section-label { color: var(--violet-500); }

/* ---------- Botones: sólidos, esquinas suaves ---------- */
.btn { border-radius: 10px; }
.btn-primary,
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover {
  background: var(--violet-700);
  box-shadow: 0 10px 22px rgba(3, 38, 30, .20);
}
.btn-primary:hover { background: var(--forest); box-shadow: 0 16px 30px rgba(3, 38, 30, .26); }
.btn-ghost { border-color: var(--line); }
.btn-light { background: var(--sage); color: var(--forest); }
.btn-light:hover { background: #E6ECD5; }
.btn-outline-light { border-color: rgba(217, 226, 196, .45); }

/* ---------- Barra superior y cabecera ---------- */
.notice-bar { background: var(--forest); }
.notice-bar a { color: var(--sage); }
.notice-dot { background: var(--sage-deep); box-shadow: 0 0 0 4px rgba(159, 178, 156, .28); }

.site-header { background: rgba(250, 249, 246, .88); }
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(3, 38, 30, .06); }
.brand-mark {
  background: var(--violet-700);
  border-radius: 10px;
  box-shadow: none;
  font-family: var(--font-serif);
}
.nav-links a:hover, .nav-links a.active { background: transparent; color: var(--violet-700); box-shadow: inset 0 -2px 0 var(--violet-700); border-radius: 0; }
.nav-links a.btn-primary { border-radius: 10px; box-shadow: none; }
.lang-switch { border-color: var(--line); }
.lang-switch button.is-active,
.lang-switch a.is-active { background: var(--violet-700); }

/* ---------- Hero: tarjeta crema como en la referencia ---------- */
.hero { background: var(--bg-page); }
.hero-deco { display: none; }
.hero-grid {
  margin-top: clamp(14px, 2.4vw, 26px);
  background: linear-gradient(120deg, var(--cream-2) 0%, var(--cream) 60%, #E1D9C8 100%);
  border-radius: var(--r-xl);
  padding: clamp(34px, 5.4vw, 64px) clamp(22px, 4.6vw, 58px);
}
.hero-blob { background: radial-gradient(circle at 40% 40%, #DCE3CB, #C7D2B8 70%); }
.hero-photo { border-radius: 170px 170px var(--r-lg) var(--r-lg); }
.float-card { border-color: transparent; }
.float-card .ico { background: var(--sage); color: var(--violet-700); }
.trustbar { margin-top: 22px; margin-bottom: 0; box-shadow: var(--shadow-sm); }
.trust-logos span:hover { color: var(--violet-600); }

/* ---------- Secciones ---------- */
.section-alt { background: var(--bg-page); }
.section-alt + .section-alt { padding-top: clamp(20px, 4vw, 48px); }
.section-alt[style*="padding-top"] { padding-top: clamp(56px, 7vw, 84px) !important; }

.service-media::after { background: linear-gradient(180deg, rgba(3,38,30,0), rgba(3,38,30,.38)); }
.service-num { color: var(--violet-700); }
.service-ico { background: var(--violet-700); box-shadow: 0 10px 22px rgba(3, 38, 30, .28); }
.service-list li::before { background: var(--sage-deep); }
.service-card:hover, .guide-card:hover, .why-item:hover { border-color: var(--sage-deep); }

/* Tarjetas con los tonos pastel de las categorías de la referencia */
.profile-card { border-color: transparent; }
.profile-card:nth-child(4n+1) { background: var(--pastel-blue); }
.profile-card:nth-child(4n+2) { background: var(--pastel-sand); }
.profile-card:nth-child(4n+3) { background: #E6ECD8; }
.profile-card:nth-child(4n+4) { background: var(--pastel-pink); }
.profile-card .ico { background: rgba(255, 255, 255, .8); color: var(--violet-700); border-radius: 50%; }
.profile-card li a { text-decoration-color: rgba(14, 63, 49, .3); }

.data-card strong, .metric strong, .about-meta div strong,
.price-note strong, .tool-total {
  font-family: var(--font-serif); font-weight: 600; color: var(--violet-700);
}

.step-num { font-family: var(--font-serif); color: var(--violet-200); }
.feature .ico, .tl-dot { background: var(--violet-700); box-shadow: 0 8px 18px rgba(3, 38, 30, .22); }
.tl-dot { font-family: var(--font-serif); }
.guide-kind { color: var(--coral); }
.quote .stars, .hero-proof .stars { color: #E9A23B; }

/* ---------- CTA oscuro estilo "Stay in the Loop" ---------- */
.cta-band { background: var(--forest); }
.cta-band::before { background: radial-gradient(circle, rgba(159, 178, 156, .18), transparent 65%); }
.cta-points li svg { color: var(--sage); }
.aside-cta { background: var(--forest); }
.aside-cta .btn-primary, .cta-band .btn-primary { background: var(--sage); color: var(--forest); }

/* ---------- Formularios ---------- */
.field input, .field select, .field textarea,
.tool-field input, .tool-field select { background: var(--violet-050); }
.field input:focus, .field select:focus, .field textarea:focus,
.tool-field input:focus, .tool-field select:focus,
.chat-field input:focus { box-shadow: 0 0 0 4px rgba(127, 159, 134, .22); }

/* ---------- Artículos ---------- */
.article-hero, .page-hero { background: linear-gradient(180deg, var(--cream-2) 0%, #F6F2E9 100%); }
.page-hero::after { background: radial-gradient(circle, rgba(159, 178, 156, .35), transparent 65%); }
.answer-box { border-color: var(--line); border-left-color: var(--violet-600); }
.toc-title, .answer-box .answer-label { color: var(--violet-500); }
.table-wrap thead th { background: var(--cream-2); color: var(--violet-900); }

/* ---------- Footer verde bosque ---------- */
.site-footer { background: var(--forest); }
.site-footer .brand-mark { background: rgba(217, 226, 196, .14); color: var(--sage); }
.socials a:hover { background: var(--violet-500); }

/* ---------- Chat ---------- */
.chat-launch { background: var(--violet-700); box-shadow: 0 14px 30px rgba(3, 38, 30, .30); }
.chat-launch:hover { box-shadow: 0 18px 38px rgba(3, 38, 30, .38); }
.chat-panel { box-shadow: 0 30px 80px rgba(3, 38, 30, .24); }
.chat-head { background: var(--forest); }
.chat-user, .chat-send { background: var(--violet-700); }

@media (max-width: 680px) {
  .hero-grid { border-radius: var(--r-lg); }
}

/* ---------- Logo (logo/muestra para pagina.png) ---------- */
.brand { gap: 14px; }
.brand-logo { width: 48px; height: 48px; flex: none; }
.brand-sep { width: 1px; align-self: stretch; margin-block: 4px; background: #B9C2BC; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-family: var(--font); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .06em; color: #004532;
}
.brand-text small {
  margin-top: 3px; font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: #5E6B64; line-height: 1.2;
}
.site-footer .brand-sep { background: rgba(255, 255, 255, .25); }
.site-footer .brand-text strong { color: #fff; }
.site-footer .brand-text small { color: rgba(255, 255, 255, .6); }
@media (max-width: 420px) {
  .brand { gap: 10px; }
  .brand-logo { width: 42px; height: 42px; }
  .brand-text small { font-size: 10.5px; letter-spacing: .08em; }
}