/* Moneo · landing */
:root {
  --ink: #043235; --body: #4f5f62; --muted: #7d8b8e;
  --white: #ffffff; --mist: #f5f6f6; --line: #e5e9e9;
  --deep: #032b30; --go: #12b07f; --go-mid: #2ed184; --go-light: #8af0a6; --hl: #0b9c6d; --fold: #0a6e5c;
  --warn: #c77700; --neg: #d64545; --pos: #0b8a5f;
  --font: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --shadow: 0 1px 2px rgba(4,50,53,.06), 0 18px 50px rgba(4,50,53,.12);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--go); outline-offset: 3px; border-radius: 8px; }
.ic { width: 14px; height: 14px; fill: currentColor; }
.ic-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
svg use { pointer-events: none; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: translate .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-go { color: var(--deep); background: linear-gradient(135deg, var(--go-light), var(--go-mid) 55%, var(--go)); box-shadow: 0 10px 24px rgba(18,176,127,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-go:hover { translate: 0 -2px; box-shadow: 0 16px 34px rgba(18,176,127,.38), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-ghost { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 2px 6px rgba(4,50,53,.05); }
.btn-ghost:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px #cfd6d6, 0 10px 24px rgba(4,50,53,.08); }
.btn-ghost .ic { width: 15px; height: 15px; transition: transform .2s; } .btn-ghost:hover .ic { transform: translateX(3px); }

/* Navegación */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 12px var(--gutter);
  background: rgba(255,255,255,.85); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px rgba(4,50,53,.05); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.brand img { width: 32px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 9px 14px; border-radius: 999px; border: 0; background: none; cursor: pointer; font: 600 15px var(--font); color: var(--ink); transition: background .2s; }
.nav-link:hover, .menu-btn[aria-expanded="true"] { background: var(--mist); }
.chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.has-menu { position: relative; }
.mega { position: absolute; top: calc(100% + 12px); left: 50%; width: 720px; margin-left: -300px; display: grid; grid-template-columns: 1fr 220px; gap: 14px; padding: 14px;
  background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(4,50,53,.18), 0 0 0 1px rgba(4,50,53,.06);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transition: opacity .2s, transform .25s, visibility .25s; }
.has-menu.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-list { list-style: none; display: grid; gap: 2px; }
.mega-list a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; transition: background .15s; }
.mega-list a:hover, .mega-list a:focus-visible, .mega-list a.on { background: var(--mist); }
.mega-list b { display: block; font-size: 15px; } .mega-list small { color: var(--body); font-size: 13px; font-weight: 500; }
.mi, .fic, .bic, .callout-ic { flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--deep); color: var(--go-light); }
.mi { width: 38px; height: 38px; }
.mi svg, .fic svg, .bic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mega-preview { border-radius: 16px; background: var(--mist); overflow: hidden; padding: 14px 14px 0; }
.mega-preview img { width: 100%; border-radius: 18px 18px 0 0; box-shadow: 0 10px 30px rgba(4,50,53,.18); transition: opacity .2s; }
.burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--mist); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform .3s; }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 24px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 25; background: #fff; padding: 100px var(--gutter) 40px; display: flex; flex-direction: column; gap: 6px; }
.drawer[hidden] { display: none; }
.drawer a:not(.btn) { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; padding: 10px 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 24px; padding: 16px; font-size: 17px; }

/* Tipografía de sección */
.eyebrow { color: var(--fold); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.h2 { margin-top: 14px; text-align: center; font-weight: 800; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.04em; }
.h2.left, .eyebrow.left { text-align: left; }
.sub { margin: 18px auto 0; max-width: 620px; text-align: center; color: var(--body); font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; }
.sub.left { margin-left: 0; text-align: left; }
.hl { color: var(--hl); }
.block { max-width: 1200px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter); }

/* 1. Hero (oculto hasta que arranca su animación de entrada; ver index.html y app.js) */
.intro-wait .hero { visibility: hidden; }
.hero { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) 40px; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 700; color: var(--fold); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 0 rgba(18,176,127,.5); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(18,176,127,0); } }
.hero-title { margin-top: 22px; font-weight: 800; font-size: clamp(42px, 6.6vw, 92px); line-height: 1; letter-spacing: -0.05em; }
.hero-title span { display: block; }
.hero-sub { margin: 24px auto 0; max-width: 600px; color: var(--body); font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-micro { margin-top: 16px; color: var(--muted); font-size: 13px; font-weight: 500; }

.collage { position: relative; height: clamp(420px, 46vw, 600px); margin: clamp(40px, 6vw, 72px) auto 0; max-width: 1060px; }
.phone-hero { position: absolute; left: 50%; top: 0; width: clamp(220px, 23vw, 290px); aspect-ratio: 9 / 19.3; margin-left: calc(clamp(220px, 23vw, 290px) / -2);
  border-radius: 46px; padding: 10px; background: #16201f; box-shadow: 0 40px 90px rgba(4,50,53,.28), inset 0 0 0 2px #3a4644; z-index: 3; }
.island { position: absolute; top: 20px; left: 50%; width: 82px; height: 24px; margin-left: -41px; border-radius: 20px; background: #000; z-index: 2; }
.screen { height: 100%; border-radius: 37px; overflow: hidden; background: #f7fcf9; padding-top: 38px; }
.win { position: absolute; background: #fff; border-radius: 16px; box-shadow: var(--shadow), 0 0 0 1px rgba(4,50,53,.06); overflow: hidden; text-align: left; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fbfbfb; }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dfe3e3; }
.win-bar span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.win-left { left: 0; top: 14%; width: clamp(240px, 30%, 330px); z-index: 2; }
.crop { height: clamp(220px, 24vw, 300px); overflow: hidden; }
.crop img { width: 100%; margin-top: -4%; }
.win-right { right: 0; top: 30%; width: clamp(220px, 27%, 290px); z-index: 4; }
.mini { padding: 18px; }
.mini-k, .w-k { font-size: 12px; font-weight: 700; color: var(--muted); }
.mini-big { margin-top: 4px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.mini-s, .w-s { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--body); display: flex; justify-content: space-between; gap: 8px; }
.bar { margin-top: 10px; height: 8px; border-radius: 8px; background: #e7eded; overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, var(--go-light), var(--go)); }
.bar.warm span { background: linear-gradient(90deg, #ffd38a, var(--warn)); }

.paper { position: absolute; z-index: 5; cursor: grab; touch-action: none; user-select: none; text-align: left; }
.paper.dragging { cursor: grabbing; }
.nt { width: 150px; min-height: 130px; padding: 16px 14px; font: 600 25px/1.05 "Caveat", cursive; color: #2d2a24; box-shadow: 0 16px 34px rgba(4,50,53,.16), 0 1px 2px rgba(4,50,53,.1); }
.nt.y { background: #ffe98a; } .nt.b { background: #c8e3ff; }
.rc { width: 170px; padding: 14px 14px 22px; background: #f7f5ef; color: #2b2b2b; font: 400 12px/1.5 "Courier Prime", monospace; box-shadow: 0 16px 34px rgba(4,50,53,.16);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),92% 100%,84% calc(100% - 8px),76% 100%,68% calc(100% - 8px),60% 100%,52% calc(100% - 8px),44% 100%,36% calc(100% - 8px),28% 100%,20% calc(100% - 8px),12% 100%,4% calc(100% - 8px),0 100%); }
.rc b { display: block; text-align: center; letter-spacing: .08em; } .rc i { display: block; border-top: 1.5px dashed #9a978c; margin: 6px 0; }
.rc p { display: flex; justify-content: space-between; } .rc .tot { font-weight: 700; }
.p1 { left: 22%; bottom: -2%; transform: rotate(-7deg); }
.p2 { right: 24%; bottom: 2%; transform: rotate(6deg); }
.p3 { right: 3%; top: -2%; transform: rotate(5deg); }
.drag-hint { margin-top: 18px; font-size: 13px; color: var(--muted); font-weight: 500; }

.for { margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.for p { color: var(--muted); font-size: 14px; font-weight: 600; }
.for ul { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.for li { padding: 7px 14px; border-radius: 999px; background: var(--mist); font-size: 13px; font-weight: 700; }

/* 2. Video */
.film { padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(40px, 6vw, 80px); }
.player { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: clamp(18px, 2.2vw, 28px); overflow: hidden; background: #050807; box-shadow: 0 50px 100px rgba(4,50,53,.22); }
.player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play { position: absolute; inset: 0; border: 0; cursor: pointer; font-family: inherit; display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(3,43,48,.25), rgba(3,43,48,.6)); transition: opacity .35s ease; }
.play-icon { position: relative; width: clamp(76px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--go-light); }
.play-icon::before, .play-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--go-light); animation: ring 2.4s ease-out infinite; }
.play-icon::after { animation-delay: 1.2s; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.play-icon svg { width: 40%; fill: var(--deep); margin-left: 6%; }
.play-label { color: #fff; font-weight: 700; font-size: clamp(15px, 1.5vw, 20px); }
.play-label small { display: block; font-weight: 500; font-size: .78em; opacity: .85; margin-top: 2px; }
.player[data-state="playing"] .play { opacity: 0; pointer-events: none; }

/* 3. Cada cosa, en su lugar */
.cards3 { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* El hover usa `translate` (propiedad aparte): `transform` lo anima GSAP y una transición CSS sobre él lo retrasa */
.fcard { background: #fff; border-radius: 22px; padding: 26px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; transition: translate .3s ease, box-shadow .3s ease; }
.fcard:hover { translate: 0 -6px; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px rgba(4,50,53,.1); }
.fic { width: 44px; height: 44px; }
.tags { margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fcard h3 { margin-top: 10px; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.fcard > p:not(.tags) { margin-top: 10px; color: var(--body); font-size: 15px; font-weight: 500; }
.widget { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--mist); transform: translateY(0); }
.fcard > p + .widget, .fcard .widget { margin-top: 22px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; font-weight: 600; border-bottom: 1px dashed #dfe4e4; }
.row b { font-weight: 800; } .row .pos { color: var(--pos); }
.row.total { border-bottom: 0; padding-top: 10px; font-size: 15px; } .row.sm { font-size: 13px; color: var(--body); }
.w-k.mt { margin-top: 16px; }
.ring-row { margin-top: 12px; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.ring-row b { display: block; } .warn { color: var(--warn); font-weight: 600; font-size: 12px; }
.ring { flex: none; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--warn) calc(var(--p) * 1%), #e7eded 0); position: relative; }
.ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--mist); }
.note { margin: 32px auto 0; max-width: 720px; text-align: center; color: var(--body); font-size: 15px; font-weight: 500; }
.note b { color: var(--ink); }

/* 4. Tú anotas */
.split { background: var(--mist); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(80px, 10vw, 140px) max(var(--gutter), calc((100vw - 1200px) / 2)); }
.bullets { list-style: none; margin-top: 32px; display: grid; gap: 18px; }
.bullets li { display: flex; gap: 14px; align-items: flex-start; }
.bic { width: 40px; height: 40px; }
.bullets b { display: block; font-size: 16px; } .bullets li > span:last-child { color: var(--body); font-size: 15px; font-weight: 500; }
.split-visual { display: flex; justify-content: center; }
.win-app { position: relative; width: min(420px, 100%); }
.typer { height: clamp(420px, 42vw, 560px); overflow: hidden; background: #f7fcf9; }
.typer img { width: 100%; }

/* 5. Pasos */
.steps3 { list-style: none; margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps3 li { position: relative; padding: 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sn { position: absolute; top: 22px; right: 26px; font-size: 34px; font-weight: 800; color: #dfe4e4; letter-spacing: -0.04em; }
.steps3 .fic { width: 44px; height: 44px; }
.steps3 h3 { margin-top: 22px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.steps3 p { margin-top: 8px; color: var(--body); font-size: 15px; font-weight: 500; }
.callout { margin-top: 28px; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s; }
.callout:hover { box-shadow: inset 0 0 0 1px #cfd6d6, 0 20px 40px rgba(4,50,53,.08); }
.callout-ic { width: 44px; height: 44px; } .callout-ic svg { width: 18px; height: 18px; fill: var(--go-light); margin-left: 3px; }
.callout > span:nth-child(2) { flex: 1; color: var(--body); font-size: 14px; font-weight: 500; }
.callout b { display: block; color: var(--ink); font-size: 16px; }

/* 6. Preguntas */
.faq .faq-list { max-width: 760px; margin: clamp(32px, 5vw, 56px) auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.pl { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--hl); stroke-width: 2.4; stroke-linecap: round; transition: transform .25s; }
.faq details[open] .pl { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--body); font-size: 16px; font-weight: 500; max-width: 64ch; }

/* 7. Franja final */
.band { margin: 0 var(--gutter); border-radius: 32px; background: var(--deep); color: #fff; text-align: center; padding: clamp(64px, 9vw, 120px) var(--gutter); }
.band-logo { width: 64px; margin: 0 auto 20px; border-radius: 18px; box-shadow: 0 20px 50px rgba(18,176,127,.35); }
.band .eyebrow { color: var(--go-light); } .band .sub { color: #cfe9de; }
.band .btn { margin-top: 30px; }

/* Pie */
.foot { max-width: 1200px; margin: 0 auto; padding: 72px var(--gutter) 28px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 12px; color: var(--body); font-size: 15px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--body); }
.foot-col h4 { color: var(--ink); font-size: 14px; } .foot-col a:hover { color: var(--ink); }
.wordmark { margin-top: 56px; display: flex; align-items: center; justify-content: center; gap: 2vw; }
.wordmark img { width: 9vw; max-width: 130px; border-radius: 26%; }
.wordmark span { font-weight: 800; font-size: clamp(80px, 17vw, 260px); line-height: 1.1; padding-bottom: .05em; letter-spacing: -0.06em; color: #e6eaea; }
.foot-copy { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Responsive */
@media (max-width: 1020px) {
  .nav, .nav-cta { display: none; }
  .burger { display: block; }
  .cards3, .steps3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* Móvil: teléfono centrado y despejado; la tarjeta de ahorro debajo; las notas asoman por los lados */
  .collage { height: auto; padding-bottom: 150px; }
  .phone-hero { position: relative; left: auto; margin: 0 auto; width: 220px; }
  .win-left, .p2 { display: none; }
  .win-right { top: auto; bottom: 0; left: calc(50% - 130px); right: auto; width: 260px; }
  .nt { width: 86px; min-height: 80px; padding: 10px 8px; font-size: 16px; }
  .p1 { left: 0; right: auto; top: 50%; bottom: auto; }
  .p3 { right: 0; top: 14%; }
  .for { justify-content: center; text-align: center; }
  .callout { flex-wrap: wrap; } .callout .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill-dot, .play-icon::before, .play-icon::after { animation: none; }
}