:root {
  --selva: #1F3A2B;
  --hoja: #5B7D2C;
  --musgo: #A7B57A;
  --cacao: #4A3426;
  --pelaje: #9C7A58;
  --arena: #D9C3A0;
  --hueso: #F5EFE3;
  --crema: #FBF8F1;
  --atardecer: #D9893B;
  --texto: #2B3A2E;
  --texto-suave: #556251;
  --radius: 24px;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sin scroll-behavior: smooth: rompe las mediciones de ScrollTrigger. El scroll suave de anclas va en main.js */
html { scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--texto);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--selva);
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--selva); outline-offset: 3px; border-radius: 6px; }
.auto :focus-visible, .footer :focus-visible { outline-color: var(--crema); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: var(--selva);
  color: var(--crema);
  font-weight: 800;
  text-decoration: none;
  translate: 0 -200%;
}
.skip-link:focus-visible { translate: 0 0; outline-color: var(--atardecer); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-bottom: 1rem;
  color: var(--hoja);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  border-radius: 0 100% 0 100%;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .9em 1.45em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  background: var(--hoja);
  color: var(--crema);
  box-shadow: 0 12px 26px -14px rgb(31 58 43 / .7);
}
.btn-primary:hover { background: var(--selva); }
.btn-ghost {
  color: var(--selva);
  border-color: rgb(31 58 43 / .22);
  background: rgb(251 248 241 / .65);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--selva); }
.btn-sm { padding: .6em 1.1em; font-size: .92rem; }
.btn-lg { padding: 1.05em 1.7em; font-size: 1.08rem; }

/* Nav */
.nav {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 50;
  width: min(1180px, 100% - 24px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgb(251 248 241 / .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 30px -18px rgb(31 58 43 / .45);
}
.nav-logo { transition: opacity .3s ease, visibility .3s; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { font-weight: 700; font-size: .95rem; color: var(--selva); text-decoration: none; }
.nav-links a:hover { color: var(--hoja); }
.hero-logo-visible .nav-logo { opacity: 0; visibility: hidden; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav { transition: background-color .3s, box-shadow .3s; }
  .hero-logo-visible .nav { background: transparent; box-shadow: none; backdrop-filter: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: max(100svh, 680px);
  overflow: hidden;
  isolation: isolate;
  background: #EDEBDD;
}
.hero-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform-origin: 50% 60%;
}
.hero-copy {
  position: relative;
  z-index: 5;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 20px);
  padding: 100px 20px 12vh;
  text-align: center;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 12% 8% 18%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(246 241 228 / .9), rgb(246 241 228 / .55) 60%, rgb(246 241 228 / 0));
}
.hero-logo { width: clamp(120px, 14vw, 200px); height: auto; }
.hero-eyebrow { color: #3F5F1E; font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-title { max-width: 30ch; font-size: clamp(2.3rem, 4.8vw, 4.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.hero-title .accent { color: var(--hoja); }
.hero-note { padding: .35em .9em; border-radius: 999px; background: rgb(251 248 241 / .8); font-size: .9rem; font-weight: 700; color: #4A5A45; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.word > span { display: inline-block; }
.hero-sub { max-width: 36ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; color: #34443A; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

.leaf-corner {
  position: absolute;
  z-index: 4;
  width: clamp(150px, 25vw, 440px);
  aspect-ratio: 1;
  pointer-events: none;
}
.leaf-corner > svg { width: 100%; height: 100%; overflow: visible; }
.leaf-tl { top: 0; left: 0; }
.leaf-tr { top: 0; right: 0; }
.leaf-bl { bottom: 0; left: 0; }
.leaf-br { bottom: 0; right: 0; }
.leaf-tl > svg { transform-origin: 0 0; }
.leaf-tr > svg { transform-origin: 100% 0; }
.leaf-bl > svg { transform-origin: 0 100%; }
.leaf-br > svg { transform-origin: 100% 100%; }

.hero-kai {
  position: absolute;
  z-index: 5;
  top: 74px;
  right: clamp(24px, 13vw, 240px);
  width: clamp(96px, 13vw, 200px);
}
.hero-kai > svg { width: 100%; height: auto; overflow: visible; }
.kai-bubble {
  position: absolute;
  top: 62%;
  right: 92%;
  width: max-content;
  max-width: 210px;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--crema);
  color: var(--texto);
  font-size: .92rem;
  line-height: 1.35;
  box-shadow: 0 14px 30px -16px rgb(31 58 43 / .5);
  transform-origin: 100% 100%;
}
.kai-bubble strong { color: var(--hoja); }
@media (max-width: 760px) {
  .kai-bubble { display: none; }
  .hero-kai { right: 18px; top: 70px; }
  .hero-copy { padding-top: 150px; }
}

/* Estado inicial de la intro (solo con motion; main.js lo anima) */
.motion .hero-scene { transform: scale(1.18); }
.motion .leaf-tl > svg { transform: scale(2.6) rotate(-6deg); }
.motion .leaf-tr > svg { transform: scale(2.6) rotate(6deg); }
.motion .leaf-bl > svg { transform: scale(2.6) rotate(6deg); }
.motion .leaf-br > svg { transform: scale(2.6) rotate(-6deg); }
.motion .hero-copy [data-intro] { opacity: 0; transform: translateY(24px); }
.motion .hero-title .word > span { transform: translateY(110%); }
.motion .hero-kai { transform: translateY(-130%); }
.motion .kai-bubble { opacity: 0; transform: scale(.6); }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(88px, 12vw, 160px); }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head p:not(.eyebrow) { margin-top: 1.1rem; font-size: 1.15rem; color: var(--texto-suave); }

.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.copy > p:not(.eyebrow) { margin-top: 1.2rem; font-size: 1.12rem; color: var(--texto-suave); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Problema */
.chaos { background: var(--crema); }
.chaos .copy .punch {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hoja);
}
.chaos-art { width: 100%; height: auto; overflow: visible; }

/* Cómo funciona */
.journey-map { width: 100%; height: auto; margin-bottom: 8px; overflow: visible; }
.journey-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.journey-steps h3 { margin-bottom: .35rem; }
.journey-steps p { font-size: .92rem; line-height: 1.45; color: var(--texto-suave); }
.step-icon { display: none; }
@media (max-width: 760px) {
  .journey-map { display: none; }
  .journey-steps { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .journey-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 16px;
    padding-bottom: 28px;
  }
  .journey-steps li::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 52px;
    bottom: 0;
    border-left: 3px dotted var(--musgo);
  }
  .journey-steps li:last-child::before { display: none; }
  .step-icon {
    display: block;
    grid-row: span 2;
    width: 52px;
    height: 52px;
    padding: 12px;
    border: 3px solid var(--hoja);
    border-radius: 50%;
    background: var(--crema);
    color: var(--selva);
  }
  .journey-steps h3 { align-self: end; padding-top: 4px; }
}

/* Automatización */
.auto { background: var(--selva); color: #DCE3D3; }
.auto h2 { color: var(--crema); }
.auto .eyebrow { color: var(--musgo); }
.auto .copy > p:not(.eyebrow) { color: #C9D2C0; }
.auto-art { position: relative; }
.auto-kai { width: 100%; height: auto; }
.checks { display: grid; gap: 14px; margin: 2rem 0 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--crema); }
.checks .icon {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--hoja);
  color: var(--crema);
}

.notifs {
  position: absolute;
  top: 0;
  right: -2%;
  width: min(290px, 54%);
  height: 210px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notif {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--crema);
  color: var(--texto);
  font-size: .86rem;
  line-height: 1.3;
  box-shadow: 0 18px 32px -18px rgb(0 0 0 / .6);
}
.notif strong { display: block; color: var(--selva); }
.notif small { color: var(--texto-suave); font-size: .78rem; }
.notif-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: #E9EFDC;
  color: var(--hoja);
}
.notif-ic .icon { width: 18px; height: 18px; }
.notif:nth-child(1) { transform: translateY(-148px) scale(.94); opacity: .55; }
.notif:nth-child(2) { transform: translateY(-74px) scale(.97); opacity: .85; }
.notif:nth-child(4) { opacity: 0; }
@media (max-width: 900px) { .notifs { right: 0; width: min(290px, 60%); } }
@media (max-width: 520px) { .notif { font-size: .76rem; padding: 9px 10px; gap: 8px; } .notif small { font-size: .7rem; } .notif-ic { width: 28px; height: 28px; } }

/* Roadmap */
.roadmap { background: var(--hueso); }
.vine { width: 100%; height: auto; margin-bottom: 10px; overflow: visible; }
.milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.milestones li {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--crema);
  box-shadow: 0 1px 0 rgb(31 58 43 / .06), 0 20px 40px -32px rgb(31 58 43 / .5);
}
.milestones h3 { font-size: 1.6rem; margin: .7rem 0 .5rem; }
.milestones p { color: var(--texto-suave); }
.tag {
  display: inline-block;
  padding: .3em .8em;
  border-radius: 999px;
  background: #E9EFDC;
  color: #3F5F1E;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.tag-now { background: var(--hoja); color: var(--crema); }
.milestones h3 { font-size: 1.35rem; }
.roadmap-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 24px 28px;
  border: 2px dashed #D8CDB6;
  border-radius: var(--radius);
}
.roadmap-foot p { max-width: 52ch; font-weight: 700; color: var(--texto-suave); }
@media (max-width: 760px) {
  .vine { display: none; }
  .milestones { grid-template-columns: 1fr; }
}

/* El nombre */
.name { background: var(--crema); }
.syllables {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(56px, 8vw, 96px);
}
.syl-big {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 9rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--hoja);
}
.syl p { margin-top: .4rem; font-weight: 700; color: #7A5A3F; }
.syl-op { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--arena); font-weight: 700; }
.syl-result {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--selva);
}
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.values li { padding-top: 22px; border-top: 2px solid #E6DDCB; }
.values .icon { width: 30px; height: 30px; color: var(--hoja); margin-bottom: 14px; }
.values h3 { margin-bottom: .4rem; }
.values p { color: var(--texto-suave); font-size: .98rem; }
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }

/* Listas con check (fondo claro) */
.situations, .ticks { display: grid; gap: 10px; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.situations li, .ticks li { position: relative; padding-left: 30px; color: var(--texto); font-weight: 600; }
.situations li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 12px;
  height: 12px;
  border: 2px solid var(--atardecer);
  border-radius: 50%;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E3EBD3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5F1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.copy > p.fine-print { margin-top: 1.4rem; font-size: .92rem; font-weight: 700; color: #6B5A45; }

/* Funcionalidades */
.features { background: var(--hueso); }
.tab-list { display: none; }
.tabs-ready .tab-list {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: 6px;
  border-radius: 999px;
  background: #ECE4D3;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  flex: none;
  padding: .7em 1.15em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  font: 800 .95rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.tab:hover { color: var(--selva); }
.tab[aria-selected="true"] { background: var(--crema); color: var(--selva); box-shadow: 0 6px 16px -10px rgb(31 58 43 / .5); }
.tab .icon { width: 18px; height: 18px; }
.tab-panel {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.tab-panel + .tab-panel { margin-top: 72px; }
.tabs-ready .tab-panel + .tab-panel { margin-top: 0; }
.tab-panel[hidden] { display: none; }
.tab-panel > *, .split > * { min-width: 0; }
.tab-panel h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.panel-copy .tag { margin-bottom: .8rem; }
.panel-copy > p { margin-top: .9rem; font-size: 1.12rem; color: var(--texto-suave); }
@media (max-width: 900px) { .tab-panel { grid-template-columns: 1fr; } }

/* Móvil: los paneles pasan a ser tarjetas deslizables */
.tab-panels { position: relative; }
.carousel-nav { display: none; }
.car-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 2px solid rgb(31 58 43 / .2);
  border-radius: 50%;
  background: var(--crema);
  color: var(--selva);
  cursor: pointer;
}
.car-btn:active { scale: .94; }
.car-prev .icon { rotate: 180deg; }
.car-info { display: grid; justify-items: center; gap: 8px; text-align: center; }
.car-status { font-size: .92rem; font-weight: 700; color: var(--texto-suave); }
.car-status b { color: var(--selva); }
.car-dots { display: flex; gap: 6px; }
.car-dots i { width: 7px; height: 7px; border-radius: 999px; background: #D8CDB6; transition: width .25s ease, background-color .25s ease; }
.car-dots .is-on { width: 20px; background: var(--hoja); }
@media (max-width: 760px) {
  .tabs-ready .tab-list { display: none; }
  .tabs-ready .tab-panels {
    display: flex;
    gap: 12px;
    margin-inline: -20px;
    padding: 4px 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tabs-ready .tab-panels::-webkit-scrollbar { display: none; }
  .tabs-ready .tab-panel {
    flex: 0 0 88%;
    align-content: start;
    gap: 20px;
    padding: 22px 18px;
    border-radius: var(--radius);
    background: var(--crema);
    scroll-snap-align: start;
  }
  .tabs-ready .tab-panel h3 { font-size: 1.4rem; }
  .tabs-ready .panel-copy > p { font-size: 1rem; }
  .tabs-ready .ticks li { font-size: .95rem; }
  .tabs-ready .mock { background: #F5EEE0; box-shadow: none; }
  .tabs-ready .carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .tabs .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs .pipe-col:nth-child(3) { display: none; }
}
@media (max-width: 520px) {
  .tabs .mock { padding: 12px; font-size: .8rem; }
  .tabs .pipe { gap: 6px; }
  .tabs .pipe-col { padding: 6px; }
  .tabs .pipe-card { padding: 7px; }
  .tabs .pipe-h { font-size: .66rem; letter-spacing: .03em; }
  .tabs .kpis b { font-size: 1.3rem; }
}

/* Vistas ilustrativas */
.mock {
  margin: 0;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--crema);
  box-shadow: 0 1px 0 rgb(31 58 43 / .06), 0 30px 60px -36px rgb(31 58 43 / .55);
  font-size: .88rem;
  line-height: 1.35;
}
.mock-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E3D7BF; }
.mock-bar b { margin-left: 8px; font-family: var(--font-display); font-size: 1rem; color: var(--selva); }
.mock-caption { margin-top: 14px; font-size: .78rem; font-weight: 700; color: #6B5A45; text-align: right; }
.mock small { display: block; color: var(--texto-suave); font-size: .8rem; }
.mock b { color: var(--selva); }
.pill { display: inline-block; max-width: 100%; margin-top: 6px; padding: .2em .65em; border-radius: 999px; background: #EFE8DA; color: #5E4A33; font-size: .74rem; font-weight: 800; }
.pill-ok { background: #E3EBD3; color: #3F5F1E; }
.pill-warn { background: #F7E2CC; color: #8A4B14; }
.pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pipe-col { padding: 10px; border-radius: 14px; background: #F2ECDF; }
.pipe-h { margin-bottom: 8px; font-size: .78rem; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.pipe-h em { font-style: normal; color: var(--hoja); }
.pipe-card { margin-top: 8px; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 4px 10px -8px rgb(31 58 43 / .5); }
.pipe-card b { display: block; }
.quote-options { display: flex; gap: 6px; margin-bottom: 10px; }
.quote-options span { padding: .35em .8em; border-radius: 999px; background: #F2ECDF; font-weight: 800; font-size: .78rem; color: var(--texto-suave); }
.quote-options .is-on { background: var(--selva); color: var(--crema); }
.lines { margin: 0; padding: 0; list-style: none; }
.lines li, .total, .finance-rows div, .collect p, .suppliers li { display: flex; justify-content: space-between; gap: 12px; }
.lines li { padding: 9px 2px; border-bottom: 1px dashed #E3D7BF; }
.total { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #F2ECDF; font-weight: 800; }
.total b { font-family: var(--font-display); font-size: 1.15rem; }
.mock-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.mock-foot .pill { margin: 0; }
.mock-btn { padding: .5em 1em; border-radius: 999px; background: var(--hoja); color: var(--crema); font-weight: 800; font-size: .8rem; }
.trip-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.trip-head span { padding: .3em .75em; border-radius: 999px; background: #F2ECDF; font-weight: 800; font-size: .78rem; color: var(--texto-suave); }
.status-list, .tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.status-list li { position: relative; padding: 10px 12px 10px 40px; border-radius: 12px; background: #fff; }
.status-list li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--hoja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.status-list .is-warn::before { background: var(--atardecer); }
.status-list .is-todo::before { background: #fff; border: 2px dashed #B9A88A; }
.tasks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.tasks li > span:nth-child(2) { flex: 1; }
.tasks .pill { margin: 0; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #E3EBD3; color: #3F5F1E; font-weight: 800; font-size: .75rem; }
.avatar.a2 { background: #F7E2CC; color: #8A4B14; }
.avatar.a3 { background: #EADFCF; color: #5E4A33; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpis div { padding: 12px; border-radius: 12px; background: #fff; }
.kpis b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff; }
.bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--hoja), var(--musgo)); }

/* Finanzas */
.finance { background: var(--crema); }
.finance-card {
  margin: 0;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(31 58 43 / .06), 0 30px 60px -36px rgb(31 58 43 / .55);
}
.finance-tag { display: inline-block; padding: .3em .8em; border-radius: 999px; background: #F2ECDF; color: #5E4A33; font-size: .76rem; font-weight: 800; }
.finance-trip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 14px 0 18px; }
.finance-trip b { font-family: var(--font-display); font-size: 1.3rem; color: var(--selva); }
.finance-trip span { color: var(--texto-suave); font-weight: 700; }
.finance-rows { margin: 0; display: grid; gap: 8px; }
.finance-rows dt { color: var(--texto-suave); font-weight: 700; }
.finance-rows dd { margin: 0; font-weight: 800; color: var(--selva); }
.finance-rows .is-margin { padding-top: 8px; border-top: 1px dashed #E3D7BF; }
.finance-rows .is-margin dt, .finance-rows .is-margin dd { color: #3F5F1E; }
.finance-rows small { margin-left: 6px; padding: .15em .5em; border-radius: 999px; background: #E3EBD3; font-size: .78rem; }
.split-bar, .progress { display: flex; height: 12px; margin-top: 14px; border-radius: 999px; background: #F2ECDF; overflow: hidden; }
.split-bar i, .progress i { width: var(--w); transform-origin: left; }
.bar-cost { background: #CDBE9E; }
.bar-margin { background: var(--hoja); }
.split-legend { display: flex; gap: 16px; margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.split-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.lg-cost::before { background: #CDBE9E; }
.lg-margin::before { background: var(--hoja); }
.collect { margin-top: 20px; padding: 16px; border-radius: 16px; background: #F7F2E8; }
.collect p { font-weight: 700; color: var(--texto-suave); }
.collect b { color: var(--selva); }
.collect small { color: var(--texto-suave); font-weight: 700; }
.progress { background: #E6DCC8; }
.progress i { background: var(--hoja); }
.due { margin-top: 12px; }
.due b { color: #8A4B14; }
.suppliers { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .92rem; }
.suppliers li { padding: 8px 2px; border-bottom: 1px dashed #E3D7BF; color: var(--texto-suave); font-weight: 700; }
.suppliers .is-ok b { color: #3F5F1E; }
.suppliers .is-warn b { color: #8A4B14; }

/* Para quién + beneficios */
.audience { background: var(--hueso); }
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); margin: 0; padding: 0; list-style: none; }
.profiles li { padding: 28px; border-radius: var(--radius); background: var(--crema); }
.profiles .icon { width: 44px; height: 44px; padding: 10px; margin-bottom: 18px; border-radius: 14px; background: #E3EBD3; color: #3F5F1E; }
.profiles h3 { margin-bottom: .5rem; font-size: 1.35rem; }
.profiles p { color: var(--texto-suave); }
.benefits {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 2fr;
  gap: 24px 48px;
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 2px solid #E6DDCB;
}
.benefits h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.benefits .checks { grid-template-columns: repeat(2, 1fr); margin: 0; }
.benefits .checks li { color: var(--texto); }
@media (max-width: 900px) {
  .profiles, .benefits { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .benefits .checks { grid-template-columns: 1fr; } }

/* Preguntas frecuentes */
.faq { background: var(--hueso); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--crema); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--selva);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E3EBD3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F5F1E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: rotate .25s ease;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 22px 20px; color: var(--texto-suave); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* Formulario lista de espera */
.waitlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-top: 1.6rem; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 800; color: var(--selva); font-size: .95rem; }
.field label span { font-weight: 600; color: var(--texto-suave); }
.field input {
  width: 100%;
  min-height: 48px;
  padding: .7em 1em;
  border: 2px solid #8D9A82;
  border-radius: 14px;
  background: var(--crema);
  color: var(--texto);
  font: 600 1rem var(--font-body);
}
.field input:focus-visible { outline: 3px solid var(--selva); outline-offset: 1px; border-color: var(--selva); }
.field input[aria-invalid="true"] { border-color: #A3361C; }
.field-error { color: #A3361C; font-size: .88rem; font-weight: 700; }
.waitlist .btn { grid-column: 1 / -1; justify-self: start; }
.waitlist .btn:disabled { opacity: .7; cursor: progress; transform: none; }
.form-note, .form-status { grid-column: 1 / -1; font-size: .9rem; color: var(--texto-suave); }
.form-status:empty { display: none; }
.form-status { padding: 12px 16px; border-radius: 14px; background: var(--crema); color: var(--selva); font-weight: 700; }
.form-status a { color: #3F5F1E; }
@media (max-width: 520px) { .waitlist { grid-template-columns: 1fr; } .waitlist .btn { justify-self: stretch; } }

/* CTA */
.cta { padding-block: 0 clamp(88px, 12vw, 160px); background: var(--hueso); }
.cta-card {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 72px) 0;
  border-radius: 36px;
  background: #E3E8D2;
  overflow: hidden;
}
.cta-kai { width: 100%; height: auto; }
.cta-copy { padding-bottom: clamp(36px, 5vw, 64px); }
.cta-copy > p { margin-top: 1rem; font-size: 1.15rem; color: var(--texto-suave); max-width: 48ch; }
.cta-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
@media (max-width: 760px) {
  .cta-card { grid-template-columns: 1fr; }
  .cta-kai { order: 2; max-width: 200px; margin-inline: auto; }
  .cta-copy { padding-bottom: 0; }
}

/* Footer */
.footer { padding-block: 64px 48px; background: var(--selva); color: #C9D2C0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.footer-brand { display: flex; align-items: center; gap: 20px; }
.footer-brand p { font-weight: 700; }
.footer-logo { height: 44px; width: auto; filter: brightness(0) invert(.94) sepia(.2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--crema); font-weight: 700; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-small { flex-basis: 100%; padding-top: 24px; border-top: 1px solid rgb(201 210 192 / .2); font-size: .92rem; }
.footer strong { color: var(--crema); }

/* ---------- Animaciones idle (CSS) ---------- */
.sun-glow, .puff, .bob, .kai-eyes, .steam { transform-box: fill-box; transform-origin: center; }
.bob { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .sway { animation: sway 6s ease-in-out infinite alternate; }
  .sw2 { animation-duration: 7.5s; animation-delay: -3s; }
  .sw3 { animation-duration: 5s; animation-delay: -1.5s; }

  .drift { animation: drift 38s ease-in-out infinite alternate; }
  .drift-b { animation-duration: 52s; animation-delay: -12s; }
  .drift-c { animation-duration: 30s; animation-delay: -6s; }

  .sun-glow { animation: glow 6s ease-in-out infinite alternate; }
  .puff { animation: puff 6s ease-out infinite; opacity: 0; }
  .p2 { animation-delay: -2s; }
  .p3 { animation-delay: -4s; }
  .wave { animation: wave 4s ease-in-out infinite alternate; }
  .w2 { animation-delay: -1.3s; }
  .w3 { animation-delay: -2.6s; }
  .ship { animation: ship 22s ease-in-out infinite alternate; }
  .bob { animation: bob 3.2s ease-in-out infinite alternate; }
  .palm { animation: sway 4.5s ease-in-out infinite alternate; }
  .palm-b { animation-delay: -2s; }
  .float { animation: float 5s ease-in-out infinite alternate; }
  .bird { animation: flap .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  .bird-b { animation-duration: .62s; }
  .globe-spin { animation: spin-globe 26s linear infinite; }

  .kai-swing { animation: swing 4.4s ease-in-out infinite alternate; }
  .kai-eyes { animation: blink 5s ease-in-out infinite; }
  .kai-wave { animation: wave-arm .7s ease-in-out infinite alternate; }
  .steam { animation: steam 2.6s ease-in-out infinite; }
  .steam-b { animation-delay: -1.3s; }

  .notif { opacity: 0; animation: notif 10s cubic-bezier(.2, .8, .2, 1) infinite; }
  .notif:nth-child(n) { transform: none; }
  .notif:nth-child(2) { animation-delay: -2.5s; }
  .notif:nth-child(3) { animation-delay: -5s; }
  .notif:nth-child(4) { animation-delay: -7.5s; }

  @media (min-width: 761px) {
    .tabs-ready .tab-panel:not([hidden]) { animation: panel-in .45s cubic-bezier(.2, .8, .2, 1); }
  }
  .tab-panels.nudge .tab-panel { animation: nudge 1.2s cubic-bezier(.4, 0, .2, 1) .4s; }
}
@keyframes nudge { 0%, 100% { translate: 0 0; } 45% { translate: -56px 0; } }
@keyframes panel-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

@keyframes sway { from { rotate: -2.2deg; } to { rotate: 2.6deg; } }
@keyframes drift { from { translate: -30px 0; } to { translate: 40px 0; } }
@keyframes glow { from { scale: .92; opacity: .75; } to { scale: 1.08; opacity: 1; } }
@keyframes puff {
  0% { opacity: 0; translate: 0 0; scale: .6; }
  20% { opacity: .85; }
  100% { opacity: 0; translate: 6px -70px; scale: 2; }
}
@keyframes wave { from { translate: -8px 0; opacity: .5; } to { translate: 8px 0; opacity: 1; } }
@keyframes ship { from { translate: -20px 0; } to { translate: 70px 0; } }
@keyframes bob { from { rotate: -3deg; translate: 0 0; } to { rotate: 3deg; translate: 0 3px; } }
@keyframes float { from { translate: 0 -10px; } to { translate: 0 12px; } }
@keyframes flap { from { scale: 1 1; } to { scale: 1 .45; } }
@keyframes spin-globe { to { translate: -280px 0; } }
@keyframes swing { from { rotate: -5deg; } to { rotate: 5deg; } }
@keyframes blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes wave-arm { from { rotate: -12deg; } to { rotate: 14deg; } }
@keyframes steam {
  0% { opacity: 0; translate: 0 6px; }
  40% { opacity: 1; }
  100% { opacity: 0; translate: 0 -16px; }
}
@keyframes notif {
  0% { opacity: 0; transform: translateY(30px) scale(.96); }
  5%, 25% { opacity: 1; transform: translateY(0) scale(1); }
  30%, 50% { opacity: .85; transform: translateY(-74px) scale(.97); }
  55%, 75% { opacity: .55; transform: translateY(-148px) scale(.94); }
  80%, 100% { opacity: 0; transform: translateY(-186px) scale(.9); }
}