/* yevenna.com — page styles. Loads after fonts.css, tokens.css, yevenna.css. Tokens only, no hex. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
a:focus-visible { outline: 2px solid transparent; box-shadow: var(--yv-focus-ring); border-radius: 4px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--yv-space-5); }

/* Wordmark (inline SVG, follows the theme) */
.wm { display: block; height: 28px; width: auto; }
.wm .wm-ink { fill: var(--yv-ink); }
.wm .wm-dot { fill: var(--yv-cereza); }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: var(--yv-space-6); }
.lang { display: inline-flex; border: 1px solid var(--yv-line); border-radius: var(--yv-radius-full); padding: 2px; }
.lang button { font: inherit; font-size: 13px; font-weight: 600; min-width: 44px; height: 32px; border: 0; border-radius: var(--yv-radius-full); background: transparent; color: var(--yv-gray); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--yv-hueso); color: var(--yv-ink); }
.lang button:focus-visible { outline: 2px solid transparent; box-shadow: var(--yv-focus-ring); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yv-space-12); padding-block: var(--yv-space-8) var(--yv-space-16); }
@media (min-width: 920px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--yv-space-16); padding-block-start: var(--yv-space-12); } }
.hero h1 { margin: var(--yv-space-4) 0 var(--yv-space-5); font-family: var(--yv-font-display); font-weight: 600; font-size: clamp(40px, 7vw, 72px); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.hero h1 span { display: block; }
.lede { margin: 0; font-size: 18px; line-height: 1.5; color: var(--yv-gray); max-width: 34em; }
.promise { margin: var(--yv-space-6) 0 0; padding-top: var(--yv-space-5); border-top: 1px solid var(--yv-line); display: flex; align-items: baseline; gap: var(--yv-space-4); }
.promise b { font-family: var(--yv-font-display); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.03em; }
.promise b i { font-style: normal; color: var(--yv-cereza); }
.promise span { font-size: 15px; line-height: 1.4; }

/* Form */
.signup { background: var(--yv-surface); border: 1px solid var(--yv-line); border-radius: var(--yv-radius-lg); padding: var(--yv-space-6); align-self: start; }
.signup h2 { margin: 0 0 var(--yv-space-1); font-family: var(--yv-font-voice); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.25; }
.signup .hint { margin: 0 0 var(--yv-space-5); font-size: 14px; color: var(--yv-gray); }
.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yv-space-4); }
@media (min-width: 560px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-size: 14px; font-weight: 600; padding: 0; }
.field .opt { font-weight: 400; color: var(--yv-gray); }
.field input:not([type="radio"]), .field select { font: inherit; font-size: 16px; height: var(--yv-touch-min); padding: 0 var(--yv-space-3); border: 1px solid var(--yv-line-strong); border-radius: var(--yv-radius-btn); background: var(--yv-paper); color: var(--yv-ink); width: 100%; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--yv-gray) 50%), linear-gradient(135deg, var(--yv-gray) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid transparent; box-shadow: var(--yv-focus-ring); }
.field input:user-invalid { border-color: var(--yv-cereza); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yv-space-2); }
.choice label { display: flex; align-items: center; gap: var(--yv-space-2); min-height: var(--yv-touch-min); padding: 0 var(--yv-space-3); border: 1px solid var(--yv-line); border-radius: var(--yv-radius-btn); background: var(--yv-paper); font-weight: 500; cursor: pointer; }
.choice label:has(input:checked) { border: 1.5px solid var(--yv-cereza); background: var(--yv-surface); }
.choice label:has(input:focus-visible) { box-shadow: var(--yv-focus-ring); }
.choice input { accent-color: var(--yv-ink); margin: 0; width: 18px; height: 18px; flex: none; }
.signup .yv-btn--primary { width: 100%; height: var(--yv-touch-pos-button); margin-top: var(--yv-space-5); }
.fine { margin: var(--yv-space-3) 0 0; font-size: 13px; line-height: 1.45; color: var(--yv-gray); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* How it works */
.how { border-top: 1px solid var(--yv-line); padding-block: var(--yv-space-16); }
.how > .yv-eyebrow { display: block; margin-bottom: var(--yv-space-3); }
.how h2 { margin: 0 0 var(--yv-space-8); font-family: var(--yv-font-display); font-weight: 600; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.025em; max-width: 18em; text-wrap: balance; }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yv-space-4); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { display: flex; flex-direction: column; gap: var(--yv-space-4); }
.step .n { font-family: var(--yv-font-mono); font-size: 13px; color: var(--yv-gray); }
.step h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--yv-gray); }
.demo { background: var(--yv-surface); border: 1px solid var(--yv-line); border-radius: var(--yv-radius-md); padding: var(--yv-space-4); display: flex; flex-direction: column; gap: var(--yv-space-3); flex: 1; }
.demo .yv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo .yv-tile { min-height: 72px; }
.demo .yv-inv { gap: 6px; }
.demo .yv-btn { width: 100%; }
.demo .yv-code { white-space: nowrap; }
.demo .msg { margin: 0; font-family: var(--yv-font-voice); font-style: italic; font-size: 16px; line-height: 1.35; }
.demo table { font-size: 13px; }
.demo .yv-table td { padding: 0 8px; }
.demo .yv-table th { padding: 8px; }

/* Footer */
.foot { margin-top: auto; border-top: 1px solid var(--yv-line); padding: var(--yv-space-6) 0 var(--yv-space-8); font-size: 14px; color: var(--yv-gray); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--yv-space-3) var(--yv-space-6); justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--yv-space-4); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--yv-ink); }

/* Simple pages (gracias, privacidad) */
.page { padding-block: var(--yv-space-12) var(--yv-space-16); max-width: 680px; }
.page h1 { margin: 0 0 var(--yv-space-4); font-family: var(--yv-font-display); font-weight: 600; font-size: clamp(36px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.035em; }
.page .voice { margin: 0 0 var(--yv-space-8); font-family: var(--yv-font-voice); font-style: italic; font-size: 22px; line-height: 1.35; }
.page h2 { margin: var(--yv-space-8) 0 var(--yv-space-2); font-size: 18px; font-weight: 600; }
.page p, .page li { font-size: 16px; line-height: 1.6; }
.page .muted { color: var(--yv-gray); }
.page .yv-btn { text-decoration: none; }
.page .actions { display: flex; flex-wrap: wrap; gap: var(--yv-space-3); }

@media (prefers-reduced-motion: no-preference) {
  .yv-btn, .choice label, .lang button { transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
}