/* ── KaizenPNI v3 · Design system inspired by Lovable prototype ── */

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { -webkit-font-smoothing:antialiased; }
ul { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font:inherit; }

/* ── Tokens ── */
:root {
  --bg:    #FBFAF8;
  --bg2:   #F2EEE9;
  --bg3:   #EDE8E1;
  --ink:   #352D27;
  --ink2:  #6B5E56;
  --ink3:  #9C8E88;
  --sage:  #4d7d61;
  --sagel: #DEF0E5;
  --saged: #3a5e49;
  --bdr:   #E1DCD6;
  --card:  #F5F3EF;
  --r:     .75rem;
  --head:  'Inter', system-ui, sans-serif;
  --body:  'Inter', system-ui, sans-serif;
}

/* ── Base ── */
html { scroll-behavior:smooth; }
body {
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:1rem;
}

/* ── Typography ── */
h1,h2,h3,h4 {
  font-family:var(--head);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}
h1 { font-size:clamp(2.25rem,5vw,3.75rem); font-weight:700; }
h2 { font-size:clamp(1.75rem,3.5vw,2.75rem); font-weight:700; }
h3 { font-size:1.25rem; font-weight:600; }
p  { color:var(--ink2); line-height:1.75; }

/* ── Layout ── */
.container {
  max-width:1100px;
  margin:0 auto;
  padding:0 1.5rem;
}
.section-pad { padding:6rem 0; }
.section-pad-sm { padding:4rem 0; }

/* ── Badges/labels ── */
.eyebrow {
  display:inline-block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:1.5rem;
}

/* ── Buttons ── */
.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--sage);
  color:#fff;
  font-weight:600;
  font-size:.9375rem;
  padding:.875rem 1.75rem;
  border-radius:var(--r);
  transition:background .2s, transform .15s;
}
.btn-primary:hover { background:var(--saged); transform:translateY(-1px); }

.btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  color:var(--ink2);
  font-size:.9375rem;
  font-weight:500;
  border-bottom:1px solid var(--bdr);
  padding-bottom:.125rem;
  transition:color .2s, border-color .2s;
}
.btn-ghost:hover { color:var(--sage); border-color:var(--sage); }

.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1.5px solid var(--sage);
  color:var(--sage);
  font-weight:600;
  font-size:.9375rem;
  padding:.875rem 1.75rem;
  border-radius:var(--r);
  transition:background .2s, color .2s;
}
.btn-outline:hover { background:var(--sage); color:#fff; }

/* ── Nav ── */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(251,250,248,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bdr);
}
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  max-width:1100px;
  margin:0 auto;
  padding:0 1.5rem;
}
.nav-brand {
  display:flex;
  align-items:center;
  gap:.625rem;
  font-family:var(--head);
  font-weight:700;
  font-size:1.125rem;
  letter-spacing:.01em;
  color:var(--ink);
}
.nav-brand img {
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}
.nav-brand span { color:var(--sage); }
.nav-links {
  display:flex;
  gap:2rem;
  align-items:center;
}
.nav-links a {
  font-size:.9rem;
  font-weight:500;
  color:var(--ink2);
  transition:color .2s;
}
.nav-links a:hover { color:var(--sage); }
.nav-cta {
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  background:var(--sage);
  color:#fff;
  font-weight:600;
  font-size:.875rem;
  padding:.5rem 1.125rem;
  border-radius:var(--r);
  transition:background .2s;
}
.nav-cta:hover { background:var(--saged); }

/* ── Hero ── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding-top:64px;
}
.hero-bg {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-bg svg {
  position:absolute;
  width:100%;
  height:100%;
}
.hero-content {
  position:relative;
  z-index:1;
  text-align:center;
  max-width:700px;
  padding:4rem 1.5rem;
}
.hero-content h1 {
  margin-bottom:1.5rem;
}
.hero-content h1 em {
  font-style:normal;
  color:var(--sage);
}
.hero-lead {
  font-size:1.0625rem;
  color:var(--ink2);
  max-width:520px;
  margin:0 auto 2.5rem;
  line-height:1.75;
}
.hero-actions {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.scroll-hint {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  color:var(--ink3);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.scroll-hint-arrow {
  width:1px;
  height:32px;
  background:linear-gradient(to bottom, var(--bdr), transparent);
}

/* ── Section labels ── */
.section-label {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:.875rem;
}
.section-title {
  color:var(--ink);
  margin-bottom:1rem;
}
.section-lead {
  color:var(--ink2);
  font-size:1.0625rem;
  max-width:600px;
  line-height:1.75;
}

/* ── What is section ── */
.philosophy-section { background:var(--bg2); }
.philosophy-intro {
  max-width:660px;
  margin:0 auto 3.5rem;
  text-align:center;
}
.philosophy-intro p {
  font-size:1.0625rem;
  line-height:1.8;
  margin-top:1rem;
}
.philosophy-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-bottom:3rem;
}
.phil-card {
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:2rem;
}
.phil-card-tag {
  display:inline-block;
  background:var(--sagel);
  color:var(--saged);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .75rem;
  border-radius:4px;
  margin-bottom:1rem;
}
.phil-card h3 { font-size:1.125rem; margin-bottom:.5rem; color:var(--ink); }
.phil-card p  { font-size:.9375rem; line-height:1.7; color:var(--ink2); }
.philosophy-quote {
  background:var(--sagel);
  border-left:3px solid var(--sage);
  border-radius:0 var(--r) var(--r) 0;
  padding:1.5rem 2rem;
  font-size:1.0625rem;
  font-style:italic;
  color:var(--saged);
  max-width:640px;
  margin:0 auto;
}

/* ── Para quién ── */
.for-whom-intro {
  max-width:620px;
  margin:0 auto 3.5rem;
  text-align:center;
}
.for-whom-intro p {
  font-size:1.0625rem;
  line-height:1.75;
  margin-top:1rem;
}
.symptoms-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  margin-bottom:3rem;
}
.symptom-card {
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:1.5rem;
}
.symptom-card h4 {
  font-size:.875rem;
  font-weight:700;
  color:var(--sage);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.875rem;
}
.symptom-card ul { display:flex; flex-direction:column; gap:.375rem; }
.symptom-card li {
  font-size:.875rem;
  color:var(--ink2);
  padding-left:1rem;
  position:relative;
}
.symptom-card li::before {
  content:'·';
  position:absolute;
  left:0;
  color:var(--sage);
  font-weight:700;
}
.for-whom-note {
  text-align:center;
  font-size:1.0625rem;
  color:var(--ink);
  font-weight:600;
  padding:2rem;
  background:var(--bg2);
  border-radius:var(--r);
  max-width:680px;
  margin:0 auto;
}

/* ── Proceso ── */
.process-section { background:var(--bg2); }
.process-intro {
  max-width:560px;
  margin:0 auto 3.5rem;
  text-align:center;
}
.process-intro p {
  font-size:1.0625rem;
  line-height:1.75;
  margin-top:1rem;
}
.steps-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.25rem;
}
.step-card {
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:1.75rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.step-num {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--sagel);
  color:var(--saged);
  font-size:.875rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.step-card h3 { font-size:.9375rem; font-weight:700; color:var(--ink); line-height:1.4; }
.step-card p  { font-size:.875rem; color:var(--ink2); line-height:1.65; }

/* ── Reserva ── */
.booking-card {
  max-width:580px;
  margin:0 auto;
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:calc(var(--r)*1.5);
  overflow:hidden;
  box-shadow:0 4px 32px rgba(53,45,39,.06);
}
.booking-header {
  background:var(--sage);
  padding:2.5rem 2.5rem 2rem;
  color:#fff;
  text-align:center;
}
.booking-header .eyebrow { color:rgba(255,255,255,.7); }
.booking-header h2 { color:#fff; margin-bottom:.5rem; font-size:1.75rem; }
.booking-price {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.25rem;
  margin-top:1rem;
}
.booking-price .amount {
  font-size:3.5rem;
  font-weight:700;
  color:#fff;
  line-height:1;
}
.booking-price .period { color:rgba(255,255,255,.65); font-size:1rem; }
.booking-body { padding:2.5rem; }
.booking-features {
  display:flex;
  flex-direction:column;
  gap:.875rem;
  margin-bottom:2rem;
}
.booking-feat {
  display:flex;
  align-items:flex-start;
  gap:.875rem;
  font-size:.9375rem;
  color:var(--ink2);
}
.booking-feat-icon {
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--sagel);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:.125rem;
}
.booking-feat-icon svg { width:11px; height:11px; stroke:var(--sage); }
.booking-footer { border-top:1px solid var(--bdr); padding:2rem 2.5rem; text-align:center; }
.booking-footer p { font-size:.875rem; color:var(--ink3); margin-top:1rem; font-style:italic; }

/* ── Sobre mí ── */
.about-section { background:var(--bg2); }
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
.about-img {
  position:relative;
}
.about-img-inner {
  width:100%;
  aspect-ratio:4/5;
  background:var(--bg3);
  border-radius:calc(var(--r)*2);
  overflow:hidden;
}
.about-img-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.about-badge {
  position:absolute;
  bottom:-1.5rem;
  right:-1.5rem;
  background:var(--sage);
  color:#fff;
  border-radius:calc(var(--r)*1.5);
  padding:1.25rem 1.5rem;
  font-size:.875rem;
  font-weight:600;
  max-width:200px;
  line-height:1.4;
  box-shadow:0 8px 24px rgba(77,125,97,.25);
}
.about-content { display:flex; flex-direction:column; gap:1.5rem; }
.about-content h2 { margin-bottom:.25rem; }
.about-content > p {
  font-size:1.0625rem;
  line-height:1.8;
}
.about-credentials {
  display:flex;
  flex-direction:column;
  gap:.625rem;
}
.about-cred {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.9375rem;
  color:var(--ink2);
}
.about-cred::before {
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--sage);
  flex-shrink:0;
}
.about-quote {
  font-size:1rem;
  font-style:italic;
  color:var(--sage);
  font-weight:500;
  border-left:2px solid var(--sage);
  padding-left:1.25rem;
}

/* ── CTA final ── */
.cta-section {
  position:relative;
  overflow:hidden;
  text-align:center;
}
.cta-bg {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.cta-content {
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto;
}
.cta-content h2 { margin-bottom:1.25rem; }
.cta-content p { font-size:1.0625rem; margin-bottom:2.5rem; }

/* ── Portal section ── */
.portal-section { background:var(--ink); }
.portal-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.portal-inner h2 { color:#fff; }
.portal-inner .section-label { color:rgba(255,255,255,.5); }
.portal-inner p { color:rgba(255,255,255,.55); margin-top:.75rem; }
.portal-feats { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.portal-feat-row {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.portal-feat-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sagel);
  flex-shrink:0;
  margin-top:.4rem;
}
.portal-feat-row p { font-size:.9375rem; color:rgba(255,255,255,.5); }
.portal-img {
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--r);
  overflow:hidden;
}
.portal-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.7;
}

/* ── Footer ── */
.footer {
  background:var(--ink);
  color:rgba(255,255,255,.55);
  padding:3rem 0 2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner {
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.footer-top {
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:start;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.75rem;
}
.footer-brand img {
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}
.footer-brand-name {
  font-family:var(--head);
  font-weight:700;
  font-size:1rem;
  color:#fff;
  letter-spacing:.01em;
}
.footer-brand-name span { color:var(--sagel); }
.footer-desc { font-size:.875rem; line-height:1.65; max-width:340px; }
.footer-links {
  display:flex;
  gap:1.5rem;
}
.footer-links a {
  font-size:.875rem;
  color:rgba(255,255,255,.45);
  transition:color .2s;
}
.footer-links a:hover { color:#fff; }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.8125rem;
}
.footer-legal { font-size:.8125rem; line-height:1.65; }

/* ── Divider ── */
.divider { border:none; border-top:1px solid var(--bdr); margin:0; }

/* ── Responsive ── */
@media (max-width:900px) {
  .philosophy-cards  { grid-template-columns:1fr; }
  .symptoms-grid     { grid-template-columns:1fr 1fr; }
  .steps-grid        { grid-template-columns:1fr 1fr; }
  .about-grid        { grid-template-columns:1fr; gap:3rem; }
  .about-badge       { display:none; }
  .portal-inner      { grid-template-columns:1fr; }
  .footer-top        { grid-template-columns:1fr; }
  .footer-links      { flex-wrap:wrap; }
}
@media (max-width:640px) {
  .symptoms-grid     { grid-template-columns:1fr; }
  .steps-grid        { grid-template-columns:1fr; }
  .nav-links         { display:none; }
  .hero-actions      { flex-direction:column; align-items:center; }
  .section-pad       { padding:4rem 0; }
  .footer-bottom     { flex-direction:column; text-align:center; }
}