/* ==== Base ==== */
:root {
  --texto-principal: #1f2119;
  --texto-secundario: #6e6e73;
  --texto-enlace: #4f7a30;
  --fondo-pantalla: #fafafa;
  --fondo-tarjeta: #ffffff;
  --fondo-tinte: #f4f7ee;
  --fondo-suave: #f1f1ee;
  --borde-base: #eaeae7;
  --seleccionado-fondo: #edf6fa;
  --seleccionado-borde: #7fb0c8;
  --acento-estrella: #e6ca41;
  --pastel-pasto: #eaf2da;   --tinta-pasto: #3e5a1e;   --chip-pasto: #eaf2da;
  --pastel-girasol: #f9f0c8; --tinta-girasol: #6b5a10; --chip-girasol: #fbf1c4;
  --pastel-cielo: #cfe5f0;   --tinta-cielo: #24475a;   --chip-cielo: #e3f0f6;
  --pastel-rosa: #f2c9c0;    --tinta-rosa: #6b2e24;    --chip-rosa: #fbe3dd;
  --pastel-lila: #d9cce8;    --tinta-lila: #43305e;    --chip-lila: #e9e1f2;
  --pastel-durazno: #fcd9bc; --tinta-durazno: #7a4419;
  --pastel-coral: #f9b5a8;   --tinta-coral: #802920;
  --pastel-menta: #c9e9d9;   --tinta-menta: #1c5741;
  --pastel-arena: #e8decc;   --tinta-arena: #5c4e36;
  --pastel-ciruela: #e7c6d9; --tinta-ciruela: #64294d;
  --pastel-niebla: #ced5df;  --tinta-niebla: #343f51;
  --sombra-flotante: 0 12px 36px rgb(31 33 26 / 0.18);
  --sombra-hoja: 0 -4px 24px rgb(0 0 0 / 0.12);
  --sombra-boton: 0 6px 16px rgb(31 33 26 / 0.12);
  --sombra-fila: 0 6px 18px rgb(31 33 26 / 0.06);
  --sombra-elevada: 0 16px 40px rgb(31 33 26 / 0.09);
  --sombra-elevada-fuerte: 0 22px 52px rgb(31 33 26 / 0.2);
  --cielo-hover: #c2dcea;
  --r-chip: 8px;
  --r-card: 20px;
  --r-panel: 32px;
  --r-panel-l: 40px;
  --gutter: 20px;
  --section-y: 72px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (min-width: 1024px) {
  :root { --gutter: 24px; --section-y: 128px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font: 400 1rem/1.5 var(--font);
  color: var(--texto-principal);
  background: var(--fondo-pantalla);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
a { color: var(--texto-enlace); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--tinta-cielo); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--texto-principal); color: var(--fondo-tarjeta); text-decoration: none;
}
.skip-link:focus { top: 16px; }
.container { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); overflow: clip; }
.bg-pantalla { background: var(--fondo-pantalla); }
.bg-tinte { background: var(--fondo-tinte); }
/* #6e6e73 sobre --fondo-suave da 4.48:1; este gris apenas más oscuro llega a AA. */
.bg-suave { background: var(--fondo-suave); --texto-secundario: #6b6b70; }
.section-head { max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: 16px; margin-bottom: 48px; }
@media (min-width: 1024px) { .section-head { margin-bottom: 64px; } }
.eyebrow { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-pasto); }
.display { font-size: clamp(44px, 3.2vw + 30px, 72px); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.h1 { font-size: clamp(36px, 2.4vw + 24px, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.h2 { font-size: clamp(32px, 1.3vw + 26px, 44px); line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-size: clamp(20px, 0.4vw + 18px, 24px); line-height: 1.33; font-weight: 600; text-wrap: balance; }
.lead { font-size: clamp(18px, 0.2vw + 17px, 20px); line-height: 1.5; color: var(--texto-secundario); text-wrap: pretty; }
.body { font-size: clamp(16px, 0.1vw + 15.6px, 17px); line-height: 1.53; color: var(--texto-secundario); text-wrap: pretty; }
.small { font-size: 14px; line-height: 20px; color: var(--texto-secundario); }
.price { font-size: clamp(40px, 0.8vw + 36px, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 17px; line-height: 20px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--pastel-cielo); color: var(--tinta-cielo); }
.btn--primary:hover { background: var(--cielo-hover); }
.btn--secondary { background: var(--fondo-tarjeta); color: var(--texto-principal); border-color: var(--borde-base); }
.btn--secondary:hover { border-color: var(--texto-secundario); }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--texto-enlace); }
.link-arrow:hover { text-decoration: underline; }
.appstore { display: inline-block; line-height: 0; border-radius: 11px; }
.appstore img { height: 56px; width: auto; }
.appstore--sm img { height: 44px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-chip);
  font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap;
}
.chip--pasto { background: var(--chip-pasto); color: var(--tinta-pasto); }
.chip--girasol { background: var(--chip-girasol); color: var(--tinta-girasol); }
.chip--cielo { background: var(--chip-cielo); color: var(--tinta-cielo); }
.chip--rosa { background: var(--chip-rosa); color: var(--tinta-rosa); }
.chip--lila { background: var(--chip-lila); color: var(--tinta-lila); }
.chip--blanco { background: var(--fondo-tarjeta); color: inherit; }
.chip--flotante { box-shadow: var(--sombra-flotante); }
.place-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-base);
  font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.card { background: var(--fondo-tarjeta); border: 1px solid var(--borde-base); border-radius: var(--r-card); }
.panel { position: relative; border-radius: var(--r-panel); overflow: clip; }
.panel--pasto { background: var(--pastel-pasto); color: var(--tinta-pasto); }
.panel--girasol { background: var(--pastel-girasol); color: var(--tinta-girasol); }
.panel--cielo { background: var(--pastel-cielo); color: var(--tinta-cielo); }
.panel--rosa { background: var(--pastel-rosa); color: var(--tinta-rosa); }
.panel--lila { background: var(--pastel-lila); color: var(--tinta-lila); }
.panel--menta { background: var(--pastel-menta); color: var(--tinta-menta); }
.panel--durazno { background: var(--pastel-durazno); color: var(--tinta-durazno); }
.panel--coral { background: var(--pastel-coral); color: var(--tinta-coral); }
.panel--arena { background: var(--pastel-arena); color: var(--tinta-arena); }
.panel--ciruela { background: var(--pastel-ciruela); color: var(--tinta-ciruela); }
.panel--niebla { background: var(--pastel-niebla); color: var(--tinta-niebla); }
.meadow { position: relative; background: var(--pastel-cielo); border-radius: var(--r-panel-l); overflow: clip; isolation: isolate; }
.meadow::before {
  content: ""; position: absolute; z-index: -1;
  width: var(--sun-size, 200px); aspect-ratio: 1; border-radius: 50%;
  top: var(--sun-top, -48px); left: var(--sun-left, auto); right: var(--sun-right, 48px);
  background: var(--pastel-girasol);
}
.meadow::after {
  content: ""; position: absolute; z-index: -1;
  left: -25%; right: -25%; bottom: var(--hill-bottom, -55%); height: var(--hill-height, 90%);
  border-radius: 50%; background: var(--pastel-pasto);
}
.icon { width: 24px; height: 24px; flex: none; fill: currentColor; }
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; background: var(--fondo-tarjeta);
}
.star { width: 24px; height: 24px; color: var(--acento-estrella); fill: currentColor; }
.deco { position: absolute; pointer-events: none; }
.phone {
  --s: 1;
  position: relative; flex: none;
  width: calc(426px * var(--s)); aspect-ratio: 426 / 898;
  padding: calc(12px * var(--s)); border-radius: calc(52px * var(--s));
  background: var(--texto-principal); box-shadow: var(--sombra-flotante);
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(40px * var(--s)); }
.check-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 24px; }
.check-list li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--fondo-tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%233e5a1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* ==== Nav, hero, problema y cómo funciona ==== */
/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(250 250 250 / 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgb(234 234 231 / 0.7);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.nav-logo img { width: 150px; height: auto; }
.nav-menu, .nav-badge { display: none; }
.nav-cta { min-height: 44px; padding-inline: 18px; font-size: 16px; }
.nav-links { display: flex; gap: 8px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px;
  font-size: 16px; color: var(--texto-principal); text-decoration: none; border-radius: 999px;
}
.nav-links a:hover { background: var(--fondo-suave); }
@media (min-width: 1024px) {
  .nav-inner { min-height: 80px; }
  .nav-logo img { width: 181px; }
  .nav-menu { display: block; }
  .nav-badge { display: inline-block; }
  .nav-cta { display: none; }
}
/* ---------- Hero ---------- */
.hero { padding-block: 24px 64px; }
.hero-grid { display: grid; gap: 40px; }
.hero-copy { display: grid; justify-items: start; }
.hero-title { margin-top: 16px; }
.hero-lead { margin-top: 20px; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.hero-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 17px; }
.hero-trust { margin-top: 16px; }
.hero-actions .appstore img { height: 48px; }
.hero-stage { --hs: 0.72; position: relative; width: fit-content; margin-inline: auto; padding-block: 76px 22px; }
.hero-phone { --s: var(--hs); z-index: 1; }
.hero-meadow {
  position: absolute; inset: 0 -21px auto; height: 72%;
  --sun-size: 84px; --sun-top: 14px; --sun-right: 22px;
  --hill-height: 70%; --hill-bottom: -22%;
}
.hero-cloud, .hero-cloud::after {
  position: absolute; height: 22px; border-radius: 999px; background: var(--fondo-tarjeta);
}
.hero-cloud { top: 32px; left: 22px; width: 76px; }
.hero-cloud::after { content: ""; top: -12px; left: 130px; width: 52px; height: 18px; }
.hero-chip { position: absolute; z-index: 2; box-shadow: var(--sombra-flotante); }
.hero-chip--temp { top: 34px; left: -14px; rotate: -4deg; }
.hero-chip--rapidez { top: 60px; right: -12px; rotate: 3deg; }
.hero-chip--hoja { bottom: 6px; right: -10px; rotate: -4deg; }
.hero-chip--boda { bottom: 0; left: -14px; rotate: 3deg; }
.hero-chip-icon { width: 20px; height: 20px; color: var(--tinta-lila); }
.hero-star { z-index: 2; width: 22px; height: 22px; }
.hero-star--1 { top: 104px; left: -18px; }
.hero-star--2 { top: 8px; right: 112px; }
@media (min-width: 640px) {
  .hero-stage { --hs: 0.8; }
  .hero-chip--temp { left: auto; right: calc(100% - 12px); top: 150px; }
  .hero-chip--rapidez { right: auto; left: calc(100% - 12px); top: 300px; }
  .hero-chip--hoja { right: auto; left: calc(100% - 12px); bottom: 210px; }
  .hero-chip--boda { left: auto; right: calc(100% - 12px); bottom: 120px; }
  .hero-meadow { inset: 0 -60px auto; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 64px 128px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 72px; }
  .hero-title { margin-top: 24px; text-wrap: wrap; }
  .hero-lead { margin-top: 32px; }
  .hero-actions { margin-top: 44px; gap: 16px 28px; }
  .hero-trust { margin-top: 18px; }
  .hero-actions .appstore img { height: 56px; }
  .hero-more { font-size: 18px; }
  .hero-stage { --hs: 0.85; padding: 0; margin-inline: calc(80px * var(--hs)) calc(82px * var(--hs)); }
  .hero-meadow {
    inset: calc(110px * var(--hs)) calc(-82px * var(--hs)) calc(88px * var(--hs)) calc(-80px * var(--hs));
    height: auto;
    --sun-size: 130px; --sun-top: 22px; --sun-right: 28px;
    --hill-height: 100%; --hill-bottom: -48%;
  }
  .hero-cloud { top: calc(121px * var(--hs)); left: calc(28px * var(--hs)); width: 80px; height: 26px; }
  .hero-cloud::after { display: none; }
  .hero-chip { font-size: 17px; line-height: 22px; padding: 6px 12px; }
  .hero-chip--temp { top: calc(254px * var(--hs)); left: calc(-152px * var(--hs)); right: auto; bottom: auto; }
  .hero-chip--rapidez { top: calc(302px * var(--hs)); left: calc(401px * var(--hs)); right: auto; bottom: auto; }
  .hero-chip--hoja { top: calc(606px * var(--hs)); left: calc(403px * var(--hs)); right: auto; bottom: auto; }
  .hero-chip--boda { top: calc(692px * var(--hs)); left: calc(-180px * var(--hs)); right: auto; bottom: auto; padding: 7px 16px 7px 12px; }
  .hero-star { width: 24px; height: 24px; }
  .hero-star--1 { top: calc(64px * var(--hs)); left: calc(459px * var(--hs)); right: auto; }
  .hero-star--2 { top: calc(320px * var(--hs)); left: calc(-65px * var(--hs)); right: auto; }
}
@media (min-width: 1280px) {
  .hero-stage { --hs: 1; }
}
/* ---------- Problema ---------- */
.problema-inner, .como-inner { position: relative; }
.problema-star { top: -12px; right: 40px; width: 20px; height: 20px; }
.problema-cards { display: grid; gap: 16px; }
.problema-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 20px; font-size: 17px; line-height: 1.53;
}
.problema-tile {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  color: var(--tinta-pasto);
}
.problema-tile .icon { width: 28px; height: 28px; }
.problema-tile--girasol { background: var(--pastel-girasol); }
.problema-tile--rosa { background: var(--pastel-rosa); }
.problema-tile--cielo { background: var(--pastel-cielo); }
.problema-swap { display: grid; justify-items: center; gap: 20px; margin-top: 48px; }
.problema-swap .problema-note {
  display: grid; gap: 4px; padding: 18px 22px;
  background: var(--pastel-girasol); color: var(--tinta-girasol);
  border-radius: 6px; box-shadow: 0 6px 18px rgb(31 33 26 / 0.08);
  rotate: -2deg; font-size: 15px; line-height: 22px;
}
.problema-note s { text-decoration-thickness: 1.5px; }
.problema-arrow { width: 28px; height: 28px; color: var(--texto-secundario); rotate: 90deg; }
.problema-preset {
  position: relative; width: 100%; max-width: 360px;
  padding: 16px 20px 16px 22px; border-radius: 16px;
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-base);
  box-shadow: 0 8px 24px rgb(31 33 26 / 0.06);
}
.problema-preset::before {
  content: ""; position: absolute; left: -1px; top: 18px; width: 4px; height: 26px;
  border-radius: 0 3px 3px 0; background: var(--texto-enlace);
}
.problema-preset-title { padding-right: 24px; font-size: 17px; line-height: 22px; font-weight: 600; }
.problema-preset-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--texto-secundario); }
.problema-preset-meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pastel-pasto); }
.problema-preset-star { position: absolute; top: 16px; right: 18px; width: 16px; height: 16px; }
.problema-preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.problema-preset-chips .chip { font-size: 13px; line-height: 18px; padding: 4px 10px; }
.problema-chip-more { background: var(--fondo-suave); color: var(--texto-principal); }
.problema-close {
  margin: 48px auto 0; max-width: 640px; text-align: center; text-wrap: balance;
  font-size: clamp(20px, 0.4vw + 18.4px, 22px); line-height: 1.4; font-weight: 600;
}
@media (min-width: 640px) {
  .problema-swap { grid-template-columns: auto auto minmax(0, 360px); justify-content: center; align-items: center; gap: 36px; }
  .problema-arrow { rotate: none; }
}
@media (min-width: 1024px) {
  .problema-star { top: -8px; right: 58px; width: 24px; height: 24px; }
  .problema-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .problema-card { grid-template-columns: none; align-items: start; align-content: start; gap: 32px; padding: 24px; font-size: 19px; }
  .problema-swap { margin-top: 64px; }
  .problema-close { margin-top: 64px; }
}
/* ---------- Cómo funciona ---------- */
.como-star { width: 20px; height: 20px; }
.como-star--1 { top: -14px; right: 36px; }
.como-star--2 { display: none; }
.como-steps { display: grid; gap: 16px; padding: 0; list-style: none; }
.como-step { display: flex; flex-direction: column; height: 400px; padding: 24px 24px 0; }
.como-num { font-size: 44px; line-height: 1; font-weight: 700; }
.como-title { margin-top: 14px; }
.como-text { margin-top: 8px; font-size: 17px; line-height: 1.53; text-wrap: pretty; }
.como-phone { --s: 0.62; margin: 28px auto 0; }
@media (min-width: 640px) {
  .como-steps { max-width: 560px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .como-star { width: 24px; height: 24px; }
  .como-star--1 { top: -30px; right: 116px; }
  .como-star--2 { display: block; top: 12px; right: 84px; width: 16px; height: 16px; }
  .como-steps { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .como-step { height: 520px; padding: 32px 32px 0; }
  .como-num { font-size: 48px; }
  .como-title { margin-top: 18px; }
  .como-text { margin-top: 10px; font-size: 18px; line-height: 1.45; }
  .como-phone { position: absolute; top: 248px; left: 50%; translate: -50% 0; margin: 0; }
}
/* ==== Funciones, máquinas, ocasiones y privacidad ==== */
/* ---------- Funciones ---------- */
.funciones-rows { display: grid; gap: 64px; }
.funciones-row { display: grid; gap: 32px; align-items: center; }
.funciones-visual { order: -1; }
.funciones-text { display: grid; gap: 16px; justify-items: start; }
.funciones-tag { font-size: 11px; line-height: 14px; padding: 4px 8px; border-radius: 6px; }
.funciones-h3 { font-weight: 700; font-size: clamp(24px, 0.6vw + 22px, 30px); line-height: 1.25; }
.funciones-checks { margin-top: 4px; }
.funciones-checks li { font-weight: 500; }
.funciones-checks--lila li { color: var(--tinta-lila); }
.funciones-checks--rosa li { color: var(--tinta-rosa); }
.funciones-checks--girasol li { color: var(--tinta-girasol); }
.funciones-checks--lila li::before {
  background: var(--pastel-lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10.5l2.5 2.5 4.5-5.5' fill='none' stroke='%2343305e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.funciones-checks--rosa li::before {
  background: var(--pastel-rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10.5l2.5 2.5 4.5-5.5' fill='none' stroke='%236b2e24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.funciones-checks--girasol li::before {
  background: var(--pastel-girasol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 10.5l2.5 2.5 4.5-5.5' fill='none' stroke='%236b5a10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.funciones-visual { display: grid; place-items: center; padding: 28px 20px; min-height: 360px; }
.funciones-visual--phone { align-items: start; padding-bottom: 0; height: 380px; }
.funciones-phone { --s: 0.72; }
.funciones-illus { width: min(100%, 310px); border-radius: 26px; }
.funciones-float { position: absolute; z-index: 1; }
.funciones-float--a { top: 18px; right: 8%; transform: rotate(4deg); }
.funciones-float--b { bottom: 24px; left: 4%; transform: rotate(-4deg); }
.funciones-star { position: absolute; width: 20px; height: 20px; }
.funciones-star--a { display: none; }
.funciones-star--b { top: 28px; left: 28px; }
.funciones-cards { display: grid; gap: 16px; margin-top: 64px; padding: 0; list-style: none; }
.funciones-card { display: grid; gap: 12px; align-content: start; padding: 24px; }
.funciones-tile { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 8px; }
.funciones-tile--cielo { background: var(--pastel-cielo); color: var(--tinta-cielo); }
.funciones-tile--pasto { background: var(--pastel-pasto); color: var(--tinta-pasto); }
.funciones-tile--girasol { background: var(--pastel-girasol); color: var(--tinta-girasol); }
.funciones-card-title { font-size: 18px; line-height: 24px; font-weight: 600; }
@media (min-width: 640px) {
  .funciones-cards { grid-template-columns: repeat(3, 1fr); }
  .funciones-visual--phone { height: 440px; }
  .funciones-phone { --s: 0.8; }
}
@media (min-width: 1024px) {
  .funciones-rows { gap: 72px; }
  .funciones-row { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .funciones-text { grid-column: 1 / span 5; grid-row: 1; }
  .funciones-visual { grid-column: 7 / span 6; grid-row: 1; order: 0; min-height: 560px; padding: 40px; }
  .funciones-row--flip .funciones-text { grid-column: 8 / span 5; }
  .funciones-row--flip .funciones-visual { grid-column: 1 / span 6; }
  .funciones-visual--phone { height: 560px; padding: 64px 0 0; }
  .funciones-phone { --s: 0.85; }
  .funciones-illus { width: 430px; border-radius: 36px; }
  .funciones-float--a { top: 100px; right: 6%; }
  .funciones-float--b { bottom: 52px; left: 4%; }
  .funciones-star--a { display: block; top: 72px; right: 10%; }
  .funciones-star--b { top: 32px; left: 32px; }
  .funciones-cards { gap: 24px; margin-top: 56px; }
  .funciones-card { padding: 28px; }
}
/* ---------- Máquinas ---------- */
.maquinas-star { position: absolute; }
.maquinas-star--a { top: 56px; right: 32px; width: 20px; height: 20px; }
.maquinas-star--b { display: none; }
.maquinas-track {
  display: flex; gap: 12px; padding: 4px var(--gutter) 12px; margin: 0 calc(-1 * var(--gutter));
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.maquinas-track::-webkit-scrollbar { display: none; }
.maquinas-tile {
  position: relative; flex: 0 0 calc((100vw - var(--gutter) - 24px) / 2.3);
  display: grid; align-content: start; padding: 16px; border-radius: var(--r-card);
  scroll-snap-align: start;
}
.maquinas-tile--pasto { background: var(--pastel-pasto); color: var(--tinta-pasto); }
.maquinas-tile--rosa { background: var(--pastel-rosa); color: var(--tinta-rosa); }
.maquinas-tile--cielo { background: var(--pastel-cielo); color: var(--tinta-cielo); }
.maquinas-tile--lila { background: var(--pastel-lila); color: var(--tinta-lila); }
.maquinas-tile--arena { background: var(--pastel-arena); color: var(--tinta-arena); }
.maquinas-icon { width: 36px; height: 36px; border-radius: 8px; margin-bottom: 18px; }
.maquinas-icon .icon { width: 22px; height: 22px; }
.maquinas-fav { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; }
.maquinas-type { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.maquinas-name { font-size: 18px; line-height: 24px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.maquinas-count { font-size: 14px; line-height: 20px; margin-top: 2px; }
.maquinas-notes { display: grid; gap: 6px; margin-top: 28px; text-align: center; }
.maquinas-brands { font-weight: 500; }
@media (min-width: 640px) {
  .maquinas-tile { flex-basis: 196px; }
}
@media (min-width: 1024px) {
  .maquinas-star--a { top: 150px; right: calc(50% - 488px); width: 24px; height: 24px; }
  .maquinas-star--b { display: block; top: 248px; left: calc(50% - 485px); width: 16px; height: 16px; }
  .maquinas-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin: 0; padding: 0; overflow: visible; }
  .maquinas-tile { padding: 20px; min-height: 168px; }
  .maquinas-icon { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 22px; }
  .maquinas-icon .icon { width: 24px; height: 24px; }
  .maquinas-type { font-size: 13px; }
  .maquinas-name { font-size: 20px; line-height: 26px; }
  .maquinas-count { font-size: 15px; }
  .maquinas-notes { margin-top: 32px; }
}
/* ---------- Ocasiones ---------- */
.ocasiones-star { position: absolute; display: none; }
.ocasiones-head { max-width: 900px; }
.ocasiones-head .lead { max-width: 720px; margin-inline: auto; }
.ocasiones-bento { display: grid; gap: 16px; padding: 0; list-style: none; }
.ocasiones-card { display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.ocasiones-icon { width: 52px; height: 52px; }
.ocasiones-body { display: grid; gap: 8px; margin-top: auto; }
.ocasiones-title { font-size: 22px; line-height: 28px; font-weight: 600; }
.ocasiones-text { font-size: 16px; line-height: 24px; text-wrap: pretty; }
.ocasiones-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ocasiones-chips .chip { padding: 3px 10px; white-space: normal; }
@media (min-width: 640px) {
  .ocasiones-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ocasiones-star { display: block; }
  .ocasiones-star--a { top: 160px; left: calc(50% - 570px); }
  .ocasiones-star--b { top: 120px; right: calc(50% - 548px); width: 18px; height: 18px; }
  .ocasiones-star--c { top: 300px; right: calc(50% - 594px); width: 14px; height: 14px; }
  .ocasiones-bento {
    grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(264px, auto) 36px minmax(264px, auto);
    grid-auto-flow: column; gap: 24px;
  }
  .ocasiones-card { padding: 32px; }
  .ocasiones-card--tall-top { grid-row: 1 / 3; }
  .ocasiones-card--short-bottom { grid-row: 3; }
  .ocasiones-card--short-top { grid-row: 1; }
  .ocasiones-card--tall-bottom { grid-row: 2 / 4; }
  .ocasiones-icon { width: 56px; height: 56px; }
  .ocasiones-title { font-size: 24px; line-height: 30px; }
  .ocasiones-text { font-size: 17px; line-height: 26px; }
}
/* ---------- Privacidad ---------- */
.privacidad-wrap { position: relative; isolation: isolate; padding-top: 48px; }
.privacidad-sun {
  z-index: -1; top: 0; right: 30px; width: 140px; aspect-ratio: 1; border-radius: 50%;
  background: var(--pastel-girasol);
}
.privacidad-star { display: none; }
.privacidad-panel { border-radius: var(--r-panel-l); padding: 32px 28px; display: grid; gap: 16px; justify-items: start; }
.privacidad-eyebrow { color: var(--tinta-menta); }
.privacidad-list { display: grid; gap: 16px; padding: 0; list-style: none; font-size: 17px; line-height: 26px; }
.privacidad-list strong { font-weight: 700; }
.privacidad-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  color: var(--tinta-menta); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
@media (min-width: 1024px) {
  .privacidad-wrap { padding-top: 110px; }
  .privacidad-sun { right: 80px; width: 220px; }
  .privacidad-star { display: block; position: absolute; top: 50px; left: 40px; }
  .privacidad-panel { padding: 64px; gap: 24px; }
  .privacidad-list { grid-template-columns: 1fr 1fr; column-gap: 96px; row-gap: 24px; margin-top: 16px; }
}
/* ==== Precios, preguntas, CTA y footer ==== */
/* ---------- Precios ---------- */
.precios-star { position: absolute; }
.precios-star--1 { top: 32px; left: 24px; width: 14px; height: 14px; }
.precios-star--2 { top: 36px; right: 28px; width: 20px; height: 20px; }
.precios-star--3 { display: none; }
.precios-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.precios-card { display: flex; flex-direction: column; padding: 20px; }
.precios-chip { align-self: flex-start; margin-bottom: 16px; font-size: 13px; line-height: 18px; padding: 3px 9px; }
.precios-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; }
.precios-price .price { color: var(--texto-principal); }
.precios-period { font-size: 17px; line-height: 22px; color: var(--texto-secundario); }
.precios-period abbr { text-decoration: none; }
.precios-card .small { margin-top: 8px; }
.precios-includes {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--borde-base);
  font-size: 14px; line-height: 20px; font-weight: 600;
}
.precios-list { margin-top: 12px; }
.precios-list li::before { background-color: var(--chip-pasto); }
.precios-btn { margin-top: 24px; width: 100%; padding: 12px; text-align: center; }
.precios-card--anual {
  background: var(--seleccionado-fondo);
  border: 2px solid var(--seleccionado-borde);
  box-shadow: var(--sombra-flotante);
}
.precios-card--anual .precios-includes { border-top-color: rgb(127 176 200 / 0.35); }
.precios-foot { display: grid; justify-items: center; gap: 24px; margin-top: 48px; text-align: center; }
.precios-legal { max-width: 740px; text-wrap: pretty; }
@media (min-width: 640px) {
  .precios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .precios-star--1 { top: 156px; left: calc(50% - 470px); width: 24px; height: 24px; }
  .precios-star--2 { top: 110px; right: calc(50% - 450px); width: 18px; height: 18px; }
  .precios-star--3 { display: block; top: 180px; right: calc(50% - 504px); width: 13px; height: 13px; }
  .precios-card { padding: 28px; }
  .precios-list { margin-bottom: 24px; }
  .precios-btn { margin-top: auto; }
  .precios-foot { margin-top: 64px; }
}
@media (min-width: 1200px) {
  .precios-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; padding-block: 16px; }
  .precios-btn { font-size: 16px; padding-inline: 8px; white-space: nowrap; }
  .precios-card--gratis { order: 1; }
  .precios-card--mensual { order: 2; }
  .precios-card--anual { order: 3; margin-block: -16px; }
  .precios-card--lifetime { order: 4; }
}
/* ---------- Preguntas ---------- */
.preguntas-layout { display: grid; gap: 40px; }
.preguntas-head { position: relative; display: grid; gap: 16px; align-content: start; }
.preguntas-head .lead a { color: var(--texto-enlace); }
.preguntas-star { position: absolute; }
.preguntas-star--1 { top: -12px; right: 12px; width: 20px; height: 20px; }
.preguntas-star--2 { display: none; }
.preguntas-list { display: grid; gap: 12px; }
.preguntas-item {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde-base); border-radius: var(--r-card);
}
.preguntas-item[open] { border-color: var(--seleccionado-borde); }
.preguntas-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: 17px; line-height: 24px; font-weight: 600; border-radius: var(--r-card);
}
.preguntas-item summary::-webkit-details-marker { display: none; }
.preguntas-item > p { padding: 0 20px 22px; }
.preguntas-toggle {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--fondo-tinte); color: var(--tinta-pasto);
}
.preguntas-toggle::before, .preguntas-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor;
}
.preguntas-toggle::after { transform: rotate(90deg); }
.preguntas-item[open] .preguntas-toggle { background: var(--seleccionado-fondo); color: var(--tinta-cielo); }
.preguntas-item[open] .preguntas-toggle::after { display: none; }
@media (min-width: 1024px) {
  .preguntas-layout { grid-template-columns: minmax(0, 390px) minmax(0, 690px); justify-content: space-between; column-gap: 48px; }
  .preguntas-head { gap: 20px; }
  .preguntas-star--1 { top: 4px; right: 48px; width: 24px; height: 24px; }
  .preguntas-star--2 { display: block; top: 270px; left: 60px; width: 14px; height: 14px; }
  .preguntas-item summary { min-height: 80px; padding: 20px 24px; }
  .preguntas-item > p { padding: 0 24px 24px; }
}
/* ---------- CTA final ---------- */
.cta { padding-top: 0; }
.cta-panel {
  --sun-size: 140px; --sun-top: -44px; --sun-left: -36px; --sun-right: auto;
  --hill-height: 24%; --hill-bottom: -14%;
  padding: 56px 20px 0; text-align: center; color: var(--tinta-cielo);
}
.cta-panel::after { z-index: 1; }
.cta-content { position: relative; z-index: 2; display: grid; justify-items: center; gap: 20px; }
.cta-content .h1 { color: var(--texto-principal); max-width: 900px; }
.cta-sub { color: var(--tinta-cielo); max-width: 640px; }
.cta-content .appstore { margin-top: 8px; }
.cta-trust { color: var(--tinta-cielo); margin-top: -4px; }
.cta-cloud { height: 28px; border-radius: 999px; background: rgb(255 255 255 / 0.6); z-index: 0; }
.cta-cloud--1 { top: 24px; right: 30px; width: 70px; }
.cta-cloud--2 { display: none; }
.cta-star { position: absolute; z-index: 0; }
.cta-star--1 { top: 20px; right: 120px; width: 18px; height: 18px; }
.cta-star--2 { top: 252px; left: 28px; width: 14px; height: 14px; }
.cta-star--3 { top: 300px; right: 18px; width: 14px; height: 14px; }
.cta-phones { position: relative; z-index: 0; display: flex; justify-content: center; align-items: flex-start; margin-top: 40px; height: 210px; }
.cta-phone { --s: 0.6; transform: rotate(-3deg); transform-origin: top center; }
.cta-phone--maquinas { display: none; }
@media (min-width: 1024px) {
  .cta-panel {
    --sun-size: 200px; --sun-top: -48px; --sun-left: 56px;
    --hill-height: 60%; --hill-bottom: -45%;
    min-height: 528px; padding: 100px 48px 0;
  }
  .cta-content { gap: 24px; }
  .cta-cloud--1 { top: 36px; right: 50px; width: 120px; height: 36px; }
  .cta-cloud--2 { display: block; top: 136px; left: 40px; width: 80px; height: 28px; }
  .cta-star--1 { top: 24px; right: auto; left: calc(50% + 260px); width: 14px; height: 14px; }
  .cta-star--2 { top: 128px; left: auto; right: 32px; width: 18px; height: 18px; }
  .cta-star--3 { top: 346px; left: calc(50% - 228px); right: auto; width: 24px; height: 24px; }
  .cta-phones { position: absolute; inset: 0; margin: 0; height: auto; pointer-events: none; }
  .cta-phone { position: absolute; top: 230px; }
  .cta-phone--inicio { left: 64px; transform: rotate(-8deg); }
  .cta-phone--maquinas { display: block; right: 48px; top: 238px; transform: rotate(8deg); }
}
/* ---------- Footer ---------- */
.footer { padding-block: 56px 32px; }
.footer-top { display: grid; gap: 32px; }
.footer-brand { display: grid; justify-items: start; gap: 8px; }
.footer-logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer-logo img { width: 181px; height: 30px; }
.footer-brand .appstore { margin-top: 4px; }
/* inline-block: el alto táctil de 44 px ocupa su propio espacio y no se encima al logo. */
.footer-org a { display: inline-block; padding-block: 12px; color: var(--texto-principal); text-decoration: underline; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.footer-col--soporte { grid-column: 1 / -1; }
.footer-heading {
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texto-secundario); margin-bottom: 4px;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; line-height: 22px; color: var(--texto-principal); text-decoration: none;
}
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  display: grid; gap: 12px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--borde-base);
}
@media (min-width: 1024px) {
  .footer { padding-block: 64px 48px; }
  .footer-top { grid-template-columns: auto auto; justify-content: space-between; align-items: start; }
  .footer-nav { display: flex; gap: 72px; }
  .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; padding-top: 48px; }
  .footer-bottom > :last-child { flex-basis: 100%; }
}
/* ==== Páginas legales y 404 ==== */
body:has(.legal-main, .notfound) { min-height: 100vh; display: flex; flex-direction: column; }
.legal-nav { border-bottom: 1px solid var(--borde-base); background: var(--fondo-pantalla); }
.legal-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.legal-logo { display: inline-flex; align-items: center; min-height: 44px; }
.legal-logo img { width: 151px; height: auto; }
.legal-lang {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--borde-base); border-radius: 999px; background: var(--fondo-tarjeta);
  color: var(--texto-principal); font-weight: 600; text-decoration: none;
}
.legal-lang:hover { border-color: var(--texto-secundario); }
.legal-main { flex: 1; padding: 48px var(--gutter) 72px; }
.legal-body { max-width: 680px; margin-inline: auto; display: grid; gap: 16px; }
.legal-body .small { margin-bottom: 8px; }
.legal-body h2 { margin-top: 24px; }
.legal-body p:not(.small) { font-size: 17px; line-height: 1.6; color: var(--texto-principal); text-wrap: pretty; }
.legal-footer { padding-block: 32px; }
.legal-footer-inner { display: grid; gap: 12px; justify-items: start; }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--texto-principal); }
@media (min-width: 1024px) {
  .legal-logo img { width: 181px; }
  .legal-main { padding-block: 80px 128px; }
  .legal-footer-inner { grid-auto-flow: column; justify-content: space-between; align-items: center; }
}
.notfound { flex: 1; display: grid; place-items: center; padding: 32px var(--gutter) 72px; }
.notfound-card {
  --sun-size: 140px; --sun-top: -40px; --sun-right: 24px; --hill-height: 40%; --hill-bottom: -22%;
  width: 100%; max-width: 760px; padding: 56px 24px 96px; text-align: center;
  display: grid; gap: 16px; justify-items: center; color: var(--tinta-cielo);
}
.notfound-eyebrow { color: var(--tinta-cielo); }
.notfound-lead { color: var(--tinta-cielo); max-width: 520px; }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 8px; }
.notfound-actions .btn--primary { background: var(--fondo-tarjeta); }
@media (min-width: 1024px) {
  .notfound-card { --sun-size: 200px; padding: 80px 48px 140px; }
}
.notfound-actions .btn--primary:hover { background: var(--chip-cielo); }
/* ==== Movimiento: ambiente ==== */
/* Ambiente: entrada del hero y vida sutil en bucle.
   Solo propiedades individuales (translate/scale/opacity): site.css usa
   transform y rotate en chips, teléfonos y post-it. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes amb-fade { from { opacity: 0; } }
  @keyframes amb-rise { from { opacity: 0; translate: 0 12px; } }
  /* Sin opacidad: el teléfono del hero es candidato a LCP. */
  @keyframes amb-lift { from { translate: 0 10px; } }
  @keyframes amb-pop { from { opacity: 0; scale: 0.8; } }
  @keyframes amb-float { 50% { translate: 0 -6px; } }
  @keyframes amb-float-lg { 50% { translate: 0 -8px; } }
  @keyframes amb-twinkle { 50% { opacity: 0.6; scale: 0.8; } }
  @keyframes amb-breathe { 50% { scale: 1.04; } }
  @keyframes amb-drift { 50% { translate: 6px 0; } }

  /* ---- Entrada del hero (una vez) ---- */
  .nav { animation: amb-fade 0.5s ease-out both; }
  /* h1 sin delay y ≤ 600 ms (LCP). */
  .hero-copy .eyebrow { animation: amb-rise 0.45s ease-out both; }
  .hero-title { animation: amb-rise 0.55s ease-out both; }
  .hero-lead { animation: amb-rise 0.55s 0.08s ease-out both; }
  .hero-actions { animation: amb-rise 0.55s 0.16s ease-out both; }
  .hero-trust { animation: amb-rise 0.55s 0.24s ease-out both; }
  .hero-meadow { animation: amb-fade 0.6s ease-out both; }
  /* La flotación arranca en 0 cuando termina la subida, sin salto. */
  .hero-phone {
    animation: amb-lift 0.5s ease-out, amb-float 7s 0.5s ease-in-out infinite;
  }
  .hero-chip {
    animation:
      amb-pop 0.45s var(--amb-in, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1) both,
      amb-float var(--amb-dur, 5s) var(--amb-ph, 0s) ease-in-out infinite;
  }
  .hero-chip--temp { --amb-in: 0.4s; --amb-dur: 5s; --amb-ph: -1s; }
  .hero-chip--rapidez { --amb-in: 0.5s; --amb-dur: 6s; --amb-ph: -3s; }
  .hero-chip--hoja { --amb-in: 0.6s; --amb-dur: 5.5s; --amb-ph: -2s; }
  .hero-chip--boda { --amb-in: 0.7s; --amb-dur: 6.5s; --amb-ph: -4.5s; }

  /* ---- Ambiente en bucle ---- */
  .funciones-float { animation: amb-float 6s ease-in-out infinite; }
  .funciones-float--b { animation-duration: 7s; animation-delay: -3.5s; }

  .cta-phone { animation: amb-float-lg 8s ease-in-out infinite; }
  .cta-phone--maquinas { animation-duration: 9s; animation-delay: -4s; }

  .star.deco { animation: amb-twinkle 4s ease-in-out infinite; }
  .star.deco:nth-child(2n) { animation-duration: 5s; animation-delay: -1.5s; }
  .star.deco:nth-child(3n) { animation-duration: 6s; animation-delay: -3s; }
  .star.deco:nth-child(5n) { animation-duration: 3.5s; animation-delay: -2s; }

  .meadow::before, .privacidad-sun { animation: amb-breathe 9s ease-in-out infinite; }

  .hero-cloud, .cta-cloud { animation: amb-drift 10s ease-in-out infinite; }
  .cta-cloud--2 { animation-duration: 12s; animation-delay: -6s; }
}
/* ==== Movimiento: scroll ==== */
/* Aparición ligada al scroll. Fill "backwards": el estado oculto solo existe antes del rango;
   al terminar no queda ningún valor fijado que pise los hover del agente de interacción. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes sp-in {
      from { opacity: 0; translate: var(--sx, 0) var(--sy, 20px); }
    }
    @keyframes sp-pop {
      from { opacity: 0; translate: 0 var(--sy, 24px); scale: var(--ss, 0.97); }
    }

    .section:not(.hero) .section-head > *,
    .preguntas-head > :not(.deco),
    .problema-card,
    .problema-swap > *,
    .problema-close,
    .como-step,
    .funciones-text,
    .funciones-visual,
    .funciones-card,
    .maquinas-tile,
    .maquinas-notes,
    .ocasiones-card,
    .precios-card,
    .precios-foot,
    .preguntas-item,
    .privacidad-panel,
    .cta-panel {
      animation: sp-in ease-out backwards;
      animation-timeline: view();
      /* --d escalona por rango: animation-delay no tiene sentido en una línea de tiempo de scroll */
      animation-range: entry var(--d, 0%) cover calc(20% + var(--d, 0%));
    }

    .section-head > :nth-child(2),
    .preguntas-head > .h2,
    .problema-card:nth-child(2),
    .problema-swap > :nth-child(2),
    .como-step:nth-child(2),
    .funciones-card:nth-child(2),
    .maquinas-tile:nth-child(2),
    .ocasiones-card:nth-child(2),
    .precios-card--mensual { --d: 5%; }

    .section-head > :nth-child(3),
    .preguntas-head > .lead,
    .problema-card:nth-child(3),
    .problema-swap > :nth-child(3),
    .como-step:nth-child(3),
    .funciones-card:nth-child(3),
    .maquinas-tile:nth-child(3),
    .ocasiones-card:nth-child(3),
    .precios-card--anual { --d: 10%; }

    .maquinas-tile:nth-child(4),
    .ocasiones-card:nth-child(4),
    .precios-card--lifetime { --d: 15%; }

    .maquinas-tile:nth-child(5),
    .ocasiones-card:nth-child(5) { --d: 20%; }
    .ocasiones-card:nth-child(6) { --d: 25%; }

    .funciones-text { --sx: -24px; --sy: 0px; }
    .funciones-visual { --sx: 24px; --sy: 0px; }
    .funciones-row--flip .funciones-text { --sx: 24px; }
    .funciones-row--flip .funciones-visual { --sx: -24px; }

    .precios-card--anual { animation-name: sp-pop; --sy: 32px; --ss: 0.95; }
    /* En móvil la pista horizontal es el scroller de view() y no avanza en vertical: los mosaicos quedan quietos. */
    @media (max-width: 1023.98px) { .maquinas-tile { animation: none; } }
    .privacidad-panel { animation-name: sp-pop; }
  }
}
/* ==== Movimiento: interacción ==== */
/* Microinteracciones: hover, foco y toque. Solo transform/scale, color y sombra. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .appstore, .link-arrow [aria-hidden], .nav-links a::after,
  .problema-card, .funciones-card, .maquinas-tile, .ocasiones-card, .precios-card,
  .maquinas-icon, .preguntas-item, .preguntas-toggle, .preguntas-toggle::after {
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease,
      background-color .2s ease, border-color .2s ease, color .2s ease;
  }

  /* Botones y badge: el badge solo se eleva; nunca cambia de color ni de forma (reglas de Apple). */
  .btn:focus-visible, .appstore:focus-visible { transform: translateY(-2px); }
  .btn:focus-visible { box-shadow: var(--sombra-boton); }
  .btn:active, .appstore:active { transform: scale(.97); transition-duration: .08s; }

  .link-arrow [aria-hidden] { display: inline-block; }
  .link-arrow:focus-visible [aria-hidden] { transform: translateX(4px); }

  /* Subrayado que crece desde el centro, dentro de la píldora que ya pinta site.css. */
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 9px; height: 2px;
    border-radius: 1px; background: var(--texto-enlace); transform: scaleX(0);
  }
  .nav-links a:focus-visible::after { transform: scaleX(1); }

  .preguntas-item summary:focus-visible .preguntas-toggle { transform: scale(1.08); }
  /* El "+" se vuelve "−" girando la barra vertical hasta acostarse, en vez de ocultarla. */
  .preguntas-item[open] .preguntas-toggle::after { display: block; transform: rotate(180deg); }

  @media (hover: hover) {
    .btn:hover, .appstore:hover { transform: translateY(-2px); }
    .btn:hover, .appstore:hover { box-shadow: var(--sombra-boton); }
    /* Repetido tras el :hover para ganarle en la cascada (misma especificidad). */
    .btn:active, .appstore:active { transform: scale(.97); }
    .link-arrow:hover [aria-hidden] { transform: translateX(4px); }
    .nav-links a:hover::after { transform: scaleX(1); }

    .problema-card:hover, .funciones-card:hover, .maquinas-tile:hover,
    .ocasiones-card:hover, .precios-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--sombra-elevada);
    }
    .precios-card--anual:hover { box-shadow: var(--sombra-elevada-fuerte); }
    .maquinas-tile:hover .maquinas-icon { transform: rotate(-6deg); }

    .preguntas-item:hover { box-shadow: var(--sombra-fila); }
    .preguntas-item summary:hover .preguntas-toggle { transform: scale(1.08); background: var(--pastel-pasto); }
    .preguntas-item[open] summary:hover .preguntas-toggle { background: var(--pastel-cielo); }

    /* Un solo destello al entrar; al salir vuelve sin transición y fuera de vista. */
    .precios-card--anual .precios-chip { position: relative; overflow: hidden; }
    .precios-card--anual .precios-chip::after {
      content: ""; position: absolute; inset: 0; translate: -100% 0;
      background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .6) 50%, transparent 70%);
    }
    .precios-card--anual:hover .precios-chip::after { translate: 100% 0; transition: translate .8s ease; }
  }

  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .preguntas-item { interpolate-size: allow-keywords; }
    .preguntas-item::details-content {
      block-size: 0; overflow: clip;
      transition: block-size .3s cubic-bezier(.2, .8, .2, 1), content-visibility .3s allow-discrete;
    }
    .preguntas-item[open]::details-content { block-size: auto; }
  }
}