/* ═══════════════════════════════════════════════════════════════════
   TuComidApp landing design system — shared by every static page in
   public_site/ (index.html, contacto.html, …). Extracted out of
   index.html so a second page (contacto.html) doesn't have to carry a
   ~280-line copy of the same tokens/components; both pages just link
   this file. See public_site/assets/landing-shared.js for the runtime
   half of the same "share, don't duplicate" split (theme + locale
   plumbing).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════ DESIGN TOKENS (light defaults) ═══════════════ */
:root {
    --tc-bg: #FBFDF9;
    --tc-alt: #F2FAF4;
    --tc-soft: #EAF6EE;
    --tc-soft3: #BDEBD2;
    --tc-card: #FFFFFF;
    --tc-ink: #0C2B18;
    --tc-muted: rgba(12,43,24,0.68);
    --tc-muted-2: rgba(12,43,24,0.6);
    --tc-border: rgba(12,43,24,0.08);
    --tc-border-soft: rgba(12,43,24,0.06);
    --tc-border-strong: rgba(12,43,24,0.14);
    --tc-accent: #19A85F;
    --tc-deep: #157A46;
    --tc-lime: #D8F26E;
    --tc-citrus: #FFE28A;
    --tc-citrus-text: #6B4E00;
    --tc-coral: #FF7A59;
    --tc-nav-bg: rgba(251,253,249,0.85);
    --tc-chrome: #F2FAF4;
    --tc-pill-ink-bg: #0C2B18;
    --tc-pill-ink-text: #FFFFFF;
    --tc-cta-bg: #0C2B18;
    --tc-cta-text: #EFF5FA;
    --tc-shadow-cta: 0 8px 20px rgba(25,168,95,0.35);
    --tc-shadow-frame: 0 30px 70px rgba(25,168,95,0.22);
    --tc-shadow-frame-2: 0 30px 70px rgba(25,168,95,0.18);
    --tc-shadow-phone: 0 24px 50px rgba(12,43,24,0.18);
    --tc-shadow-chip: 0 10px 26px rgba(25,168,95,0.4);
}

html[data-theme="dark"] {
    --tc-bg: #0A1622;
    --tc-alt: #0F2231;
    --tc-soft: #132C40;
    --tc-soft3: #1F4562;
    --tc-card: #122130;
    --tc-ink: #EFF5FA;
    --tc-muted: rgba(239,245,250,0.7);
    --tc-muted-2: rgba(239,245,250,0.6);
    --tc-border: rgba(239,245,250,0.12);
    --tc-border-soft: rgba(239,245,250,0.08);
    --tc-border-strong: rgba(239,245,250,0.22);
    --tc-accent: #22C87C;
    --tc-deep: #6FE3A6;
    --tc-lime: #D8F26E;
    --tc-citrus: #FFE28A;
    --tc-citrus-text: #4A3600;
    --tc-coral: #FF8A6B;
    --tc-nav-bg: rgba(10,22,34,0.85);
    --tc-chrome: #0F2231;
    --tc-pill-ink-bg: #162E44;
    --tc-pill-ink-text: #EFF5FA;
    --tc-cta-bg: #081220;
    --tc-cta-text: #EFF5FA;
    /* Dark elevation stays neutral — colored halos on dark read as decoration. */
    --tc-shadow-cta: 0 8px 20px rgba(0,0,0,0.45);
    --tc-shadow-frame: 0 30px 70px rgba(0,0,0,0.45);
    --tc-shadow-frame-2: 0 30px 70px rgba(0,0,0,0.4);
    --tc-shadow-phone: 0 24px 50px rgba(0,0,0,0.5);
    --tc-shadow-chip: 0 10px 26px rgba(0,0,0,0.4);
}

:root {
    /* Motion voice: strong exponential ease-out — fast start, gentle settle. */
    --tc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { overflow-x: clip; }
body {
    background: var(--tc-bg);
    color: var(--tc-ink);
    font-family: "Hanken Grotesk", sans-serif;
    transition: background 0.25s ease, color 0.25s ease;
    caret-color: var(--tc-accent);
    accent-color: var(--tc-accent);
}
::selection { background: var(--tc-accent); color: #fff; }
a { text-decoration: none; }

/* Browser surfaces carry the palette too: scrollbar + keyboard focus. */
html { scrollbar-color: var(--tc-soft3) transparent; }
:focus-visible {
    outline: 2px solid var(--tc-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.tc-h { font-family: "Sora", sans-serif; font-weight: 800; }
h1, h2, .tc-h { text-wrap: balance; }
p { text-wrap: pretty; }
.tc-num { font-variant-numeric: tabular-nums; }

.tc-skip-link {
    position: fixed; top: -100px; left: 16px; z-index: 100;
    background: var(--tc-cta-bg); color: var(--tc-cta-text);
    font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px;
    transition: top 0.2s var(--tc-ease);
}
.tc-skip-link:focus-visible { top: 16px; }

/* ─────────── NAV ─────────── */
.tc-nav {
    background: var(--tc-nav-bg);
    border-bottom: 1px solid var(--tc-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.tc-nav-link {
    color: var(--tc-muted); transition: color 0.2s ease;
    position: relative; padding-bottom: 2px;
}
.tc-nav-link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
    border-radius: 2px; background: var(--tc-accent);
    transition: right 0.3s var(--tc-ease);
}
.tc-nav-link:hover { color: var(--tc-deep); }
.tc-nav-link[aria-current="true"] { color: var(--tc-ink); }
.tc-nav-link[aria-current="true"]::after { right: 0; }
.tc-lang-pill {
    border: 1px solid var(--tc-border-strong); border-radius: 999px;
    color: var(--tc-ink); transition: all 0.2s ease;
}
.tc-lang-pill:hover { background: var(--tc-soft); }

/* ─────────── SURFACES ─────────── */
.tc-section-alt { background: var(--tc-alt); }
.tc-card { background: var(--tc-card); border: 1px solid var(--tc-border-soft); }
.tc-card-mint { background: var(--tc-soft); }
.tc-text-muted { color: var(--tc-muted); }
.tc-text-muted-2 { color: var(--tc-muted-2); }
.tc-text-accent { color: var(--tc-accent); }
.tc-text-deep { color: var(--tc-deep); }
.tc-border-t { border-top: 1px solid var(--tc-border); }
.tc-border-b { border-bottom: 1px solid var(--tc-border); }

/* ─────────── PILLS / BUTTONS ─────────── */
.tc-pill {
    font-family: "Sora", sans-serif; font-weight: 700; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    transition: transform 0.2s var(--tc-ease), filter 0.2s ease, background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .tc-pill:hover { transform: translateY(-2px); }
}
.tc-pill:active { transform: scale(0.97); transition-duration: 0.1s; }
.tc-pill-accent { background: var(--tc-accent); color: #fff; box-shadow: var(--tc-shadow-cta); }
.tc-pill-accent:hover { filter: brightness(0.94); }
.tc-pill-ink { background: var(--tc-pill-ink-bg); color: var(--tc-pill-ink-text); }
.tc-pill-ink:hover { filter: brightness(1.18); }
.tc-pill-ghost { background: var(--tc-card); border: 1.5px solid var(--tc-border-strong); color: var(--tc-ink); }
.tc-pill-ghost:hover { background: var(--tc-alt); }
.tc-pill-lime { background: var(--tc-lime); color: #0C2B18; }
.tc-pill-lime:hover { filter: brightness(0.95); }

.tc-theme-btn {
    width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    border: 1px solid var(--tc-border-strong); color: var(--tc-ink); background: transparent;
    transition: all 0.2s ease;
}
.tc-theme-btn:hover { background: var(--tc-soft); }
.tc-theme-btn .tc-theme-icon { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.tc-theme-btn:hover .tc-theme-icon { transform: rotate(14deg) scale(1.08); }

/* ─────────── CHIPS ─────────── */
.tc-chip { border-radius: 999px; font-weight: 700; font-size: 13.5px; padding: 9px 18px; display: inline-block; }
.tc-chip-lime { background: var(--tc-lime); color: #0C2B18; }
.tc-chip-citrus { background: var(--tc-citrus); color: var(--tc-citrus-text); }
.tc-chip-mint { background: var(--tc-soft); border: 1px solid rgba(25,168,95,0.3); color: var(--tc-deep); }
.tc-chip-white { background: var(--tc-card); border: 1px solid var(--tc-border-strong); color: var(--tc-ink); }

/* ─────────── BROWSER / PHONE FRAMES ─────────── */
.tc-frame {
    background: var(--tc-card); border: 1px solid var(--tc-border); border-radius: 18px;
    box-shadow: var(--tc-shadow-frame); overflow: hidden;
}
.tc-frame-2 { box-shadow: var(--tc-shadow-frame-2); }
.tc-frame-chrome {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    border-bottom: 1px solid var(--tc-border); background: var(--tc-chrome);
}
.tc-frame-dot { width: 9px; height: 9px; border-radius: 999px; display: block; }
.tc-frame-url { margin-left: 10px; font-size: 12px; color: var(--tc-muted-2); font-weight: 600; }
.tc-phone-frame {
    background: var(--tc-card); border: 1px solid var(--tc-border); border-radius: 26px;
    padding: 8px; box-shadow: var(--tc-shadow-phone);
}
.tc-commission-sticker {
    background: var(--tc-accent); color: #fff; font-family: "Sora", sans-serif; font-weight: 700;
    font-size: 12px; letter-spacing: 0.08em; padding: 10px 16px; border-radius: 999px;
    box-shadow: var(--tc-shadow-chip);
}

/* ─────────── FOUNDERS / CTA BANDS (intentionally theme-stable) ─────────── */
.tc-founders-band { background: var(--tc-lime); }
.tc-founders-sticker { background: #0C2B18; color: var(--tc-lime); }
.tc-cta-band { background: var(--tc-cta-bg); color: var(--tc-cta-text); }
.tc-cta-band .tc-footer-link { color: rgba(239,245,250,0.6); transition: color 0.2s ease; }
.tc-cta-band .tc-footer-link:hover { color: #fff; }
.tc-cta-band .tc-border-t { border-top-color: rgba(239,245,250,0.12); }

/* ─────────── STEP NUMBERS ─────────── */
.tc-step-num {
    width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-family: "Sora", sans-serif; font-weight: 800; font-size: 18px; color: #0C2B18;
}
.tc-step-num-1 { background: var(--tc-lime); }
.tc-step-num-2 { background: var(--tc-citrus); }
/* step 3's box turns dark in dark mode (unlike the always-bright lime/citrus
   boxes), so its number needs to flip to the theme-aware ink color too. */
.tc-step-num-3 { background: var(--tc-soft3); color: var(--tc-ink); }

/* ─────────── VERTICALS (flat rows + drawn icons) ─────────── */
.tc-vertical {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center; padding: 4px 2px;
}
.tc-vicon { color: var(--tc-deep); flex-shrink: 0; }

/* ─────────── STORIES (flat editorial ledger) ─────────── */
.tc-story { border-top: 2px solid var(--tc-border-strong); padding-top: 22px; }
.tc-story-tag { display: inline-block; border-radius: 999px; font-weight: 700; font-size: 12px; padding: 6px 12px; }
.tc-story-tag-mint { background: var(--tc-soft); color: var(--tc-deep); }
.tc-story-tag-citrus { background: var(--tc-citrus); color: var(--tc-citrus-text); }

/* ─────────── CAROUSEL ─────────── */
.tc-carousel-track { display: flex; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); touch-action: pan-y; }
.tc-carousel-slide { flex: 0 0 100%; min-width: 0; }
/* Segmented pill bar — same control language as the app's period selector. */
.tc-seg {
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px;
    padding: 4px; border-radius: 999px; background: var(--tc-soft);
}
.tc-carousel-tab {
    font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; border-radius: 999px;
    padding: 8px 16px; border: 0; color: var(--tc-muted);
    background: transparent; cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tc-carousel-tab:hover { color: var(--tc-deep); }
.tc-carousel-tab:active { transform: scale(0.97); }
.tc-carousel-tab[aria-selected="true"] {
    background: var(--tc-card); color: var(--tc-ink);
    box-shadow: 0 2px 8px rgba(12,43,24,0.12);
}
.tc-carousel-arrow {
    width: 42px; height: 42px; border-radius: 999px; background: var(--tc-card);
    border: 1px solid var(--tc-border-strong); color: var(--tc-ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: var(--tc-shadow-phone);
    transition: background 0.2s ease, transform 0.15s var(--tc-ease);
}
.tc-carousel-arrow:hover { background: var(--tc-soft); }
.tc-carousel-arrow:active { transform: scale(0.94); }
.tc-carousel-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tc-border-strong); border: none; padding: 0; cursor: pointer; transition: all 0.25s ease; }
.tc-carousel-dot[aria-selected="true"] { background: var(--tc-accent); width: 26px; }
@media (prefers-reduced-motion: reduce) { .tc-carousel-track { transition: none; } }

/* ─────────── FORMS (contact page) ─────────── */
.tc-field-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tc-input {
    width: 100%; border-radius: 10px; border: 1px solid var(--tc-border-strong);
    background: var(--tc-card); color: var(--tc-ink); padding: 10px 14px;
    font-size: 15px; font-family: inherit; outline: none;
    transition: border-color 0.15s ease;
}
.tc-input:focus { border-color: var(--tc-accent); }
.tc-input::placeholder { color: var(--tc-muted-2); }
textarea.tc-input { resize: vertical; }

/* ─────────── MOTION: one authored moment ───────────
   Elements tilt statically for personality; movement is reserved for the
   scroll-in reveal (once, fast ease-out, light stagger). */
.tc-tilt { transform: rotate(var(--r, 0deg)); }

html.tc-js .tc-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--tc-ease), transform 0.55s var(--tc-ease);
    transition-delay: var(--reveal-delay, 0ms);
}
html.tc-js .tc-reveal.tc-in { opacity: 1; transform: none; }
html.tc-js .tc-reveal.tc-tilt { transform: translateY(14px) rotate(var(--r, 0deg)); }
html.tc-js .tc-reveal.tc-tilt.tc-in { transform: rotate(var(--r, 0deg)); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
    html.tc-js .tc-reveal { opacity: 1; transform: none; }
    html.tc-js .tc-reveal.tc-tilt { transform: rotate(var(--r, 0deg)); }
}