/* Dietaneo — marketing site. Paleta y tipografía tomadas del sitio real
   dietaneo.com (getComputedStyle sobre el WordPress en producción), no
   inventadas. Ver docs/superpowers/specs/2026-08-24-dietaneo-rebrand-design.md */

:root{
  --color-sky: #91B8ED;
  --color-navy: #03052D;
  --color-indigo: #29336B;
  --color-coral: #D79A89;
  --color-mint: #B9FBEE;
  --color-linkedin: #0D66C2;
  --color-instagram: #F00075;
  --color-bg: #91B8ED;
  --color-bg-card: #FFFFFF;
  --color-text: #1A1F2E;
  --color-text-soft: #3D4566;
  --color-border: rgba(3,5,45,0.12);

  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius: 12px;
  --radius-pill: 999px;
  --max-width: 1080px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3{
  font-family: var(--font-heading);
  color: var(--color-indigo);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
h1{ font-size: 34px; }
h2{ font-size: 26px; }
h3{ font-size: 19px; }
p{ margin: 0 0 var(--space-4); color: var(--color-text-soft); }
a{ color: var(--color-indigo); }
img{ max-width: 100%; display: block; }
.lead{ font-size: 19px; }

.wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---------- header ---------- */
header.site{
  position: sticky;
  top: 0;
  background: var(--color-navy);
  z-index: 10;
}
header.site .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  flex-wrap: wrap;
}
.logo{ display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img{ height: 68px; width: auto; }
.logo span{ font-family: var(--font-body); font-weight: 700; font-style: italic; font-size: 22px; color: #fff; }
nav.main-nav{ display: flex; gap: var(--space-4); flex-wrap: wrap; }
nav.main-nav a{
  color: var(--color-navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: var(--space-2) 0;
}
nav.main-nav a[aria-current="page"]{ border-bottom: 2px solid var(--color-navy); }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary{ background: var(--color-navy); color: #fff; }
.btn-primary:hover{ background: var(--color-indigo); }
.btn-ghost{ background: transparent; color: var(--color-navy); border: 1px solid var(--color-navy); }

/* ---------- hero ---------- */
.hero{ padding: var(--space-16) 0 var(--space-6); }
.hero.hero-tight{ padding-top: var(--space-8); padding-bottom: var(--space-3); }
.hero .eyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-indigo);
  margin-bottom: var(--space-2);
}
.hero-cta{ display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* ---------- sections ---------- */
section.block{ padding: var(--space-12) 0; border-top: 1px solid var(--color-border); }
section.block.no-top-border{ border-top: none; padding-top: 0; padding-bottom: 0; }
.block .eyebrow{
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-text-soft); margin-bottom: var(--space-2);
}

.grid-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.card{
  background: var(--color-bg-card);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.card h3{ margin-bottom: var(--space-2); }
.card p{ margin-bottom: 0; }

/* ---------- coach IA callout (coral) ---------- */
.coach-box{
  background: var(--color-coral);
  border-radius: 20px;
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-6);
}
.coach-box h3{ color: var(--color-navy); }
.coach-box p{ color: var(--color-navy); }
@media (min-width: 640px){
  .coach-box{ grid-template-columns: 1.2fr 1fr; align-items: center; }
}

/* ---------- Dietaneo Pro band (mint) ---------- */
.pro-band{
  background: var(--color-mint);
  border-radius: 20px;
  padding: var(--space-6);
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-6);
}
.pro-band .pro-band-media{ display: flex; justify-content: center; }
.pro-band .pro-band-media img{ width: 100%; max-width: 220px; height: auto; }
.pro-band h3{ color: var(--color-indigo); margin-bottom: var(--space-2); }
.pro-band p{ color: var(--color-navy); margin-bottom: var(--space-4); }
@media (min-width: 640px){
  .pro-band{ grid-template-columns: auto 1fr; padding: var(--space-8); gap: var(--space-12); }
  .pro-band .pro-band-media img{ max-width: 240px; }
}

/* ---------- blog ---------- */
.blog-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-3);
}
.blog-card{ text-decoration: none; }
.blog-card img{ border-radius: var(--radius); margin-bottom: var(--space-3); aspect-ratio: 16/10; object-fit: cover; }
.blog-card time{ font-size: 12px; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.4px; }
.blog-card h3{ margin: var(--space-2) 0; }
.blog-card p strong{ text-decoration: none; }
.blog-card:hover p strong{ text-decoration: underline; }
.blog-post{ max-width: 720px; }
.blog-post .lead{ color: var(--color-text); }
@media (min-width: 640px){
  .blog-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- pricing ---------- */
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.pricing-card{
  background: var(--color-bg-card);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.pricing-card .price{ font-size: 22px; font-weight: 700; color: var(--color-navy); margin: var(--space-4) 0; }
.pricing-card ul{ padding-left: 18px; margin: 0 0 var(--space-4); }
.pricing-card.featured{ border: 2px solid var(--color-navy); }
@media (min-width: 640px){
  .pricing-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- comparison table ---------- */
.comparison-table{ overflow-x: auto; margin-top: var(--space-6); }
.comparison-table table{ width: 100%; border-collapse: collapse; background: var(--color-bg-card); border-radius: var(--radius); overflow: hidden; }
.comparison-table th, .comparison-table td{ padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.comparison-table th{ background: var(--color-indigo); color: #fff; }

/* ---------- founder note ---------- */
.founder-note{
  background: var(--color-bg-card);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-top: var(--space-6);
}
.founder-note .signature{ font-family: var(--font-heading); font-size: 19px; color: var(--color-indigo); margin-top: var(--space-4); }

/* ---------- legal pages ---------- */
.legal-content h3{ margin-top: var(--space-8); }
.legal-content{ max-width: 720px; }

/* ---------- newsletter form (shared: footer + pro.html waitlist) ---------- */
.signup .field{
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.signup input[type=email]{
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-family: var(--font-body);
  background: #fff;
}
.signup input[type=email]:focus{ outline: 2px solid var(--color-navy); outline-offset: 2px; }
.btn-cta{
  min-height: 44px;
  padding: 0 var(--space-6);
  cursor: pointer;
  white-space: nowrap;
  background: var(--color-navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
}
.btn-cta:disabled{ opacity: 0.6; cursor: default; }
.microcopy{ font-size: 12px; color: var(--color-text-soft); margin-top: var(--space-2); }
.form-msg{ font-size: 13px; margin-top: var(--space-2); min-height: 18px; }
.form-msg.ok{ color: var(--color-navy); font-weight: 600; }
.form-msg.err{ color: #B3261E; }
.hp{ position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- footer ---------- */
footer.site{
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-8) 0;
  margin-top: var(--space-4);
}
.footer-newsletter{
  background: var(--color-mint);
  border-radius: var(--radius);
  padding: var(--space-6);
  color: var(--color-navy);
  margin-bottom: var(--space-8);
}
.footer-newsletter p{ color: var(--color-navy); }
.footer-newsletter h3{ color: var(--color-navy); margin-bottom: var(--space-2); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom .links{ display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-bottom a{ color: var(--color-mint); text-decoration: none; font-size: 14px; }
.footer-bottom .links.social a:first-child{ color: var(--color-linkedin); }
.footer-bottom .links.social a:last-child{ color: var(--color-instagram); }

@media (min-width: 640px){
  h1{ font-size: 44px; }
  h2{ font-size: 30px; }
  .grid-cards{ grid-template-columns: repeat(3, 1fr); }
}