/* ═══════════════════════════════════════════════════════════════════════════
   PICANTA — Landing design system
   Carbón + Ají · Bricolage Grotesque / Hanken Grotesk / JetBrains Mono
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  /* Marca */
  --aji: #DB2B39;
  --aji-deep: #BC1F2C;
  --aji-soft: #FDEBEC;
  --accent: #F0505E;
  --guinda: #8A1A28;

  /* Carbón (superficies oscuras) */
  --carbon: #1B1613;
  --carbon-deep: #120E0C;
  --panel: #241C18;

  /* Neutros / tiza */
  --ink: #16191A;
  --tiza: #F7F8F6;
  --bg: #F7F8F6;
  --mut: #6B726F;
  --mut-2: #8A8F8C;
  --line: #E7E9E7;
  --line-dark: rgba(255,255,255,0.08);

  /* Advertencia (manual: ámbar SOLO warning — no se usa como marca) */
  --warn: #D98A12;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--body);
  background: #fff;
  color: var(--ink);
  letter-spacing: -0.004em;
}

a { text-decoration: none; color: inherit; }

/* Cursor pointer en interactivos (Tailwind CDN resetea button a default) */
a, button, [role="button"], [onclick], label[for], select, summary,
input[type="submit"], input[type="button"], input[type="checkbox"],
.faq-trigger, .btn-primary, .btn-dark, .btn-ghost-dark, .btn-outline,
.nav-link, .nav-ghost, .nav-logo-mark, .plan a { cursor: pointer !important; }
button:disabled, [aria-disabled="true"], .btn-primary:disabled { cursor: not-allowed !important; }

.font-mono { font-family: var(--mono); }
.font-display { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; }

/* ─── Container ──────────────────────────────────────────────────────────── */
.container-xl { max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 640px) { .container-xl { padding-inline: 20px; } }

.rule { height: 1px; background: var(--line); width: 100%; }

/* ─── Eyebrow ────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--aji-deep);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; display: inline-block; }
.eyebrow-dark { color: var(--accent); }

/* ─── Section heading ────────────────────────────────────────────────────── */
.h-display { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.03; }
.h-display em { font-style: normal; font-weight: 800; color: var(--aji-deep); }
.h-display-dark em { color: var(--accent); }

/* ─── Nav ────────────────────────────────────────────────────────────────── */
#navbar { transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
#navbar.scrolled {
  background: rgba(247, 248, 246, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
#navbar.scrolled .nav-wordmark { color: var(--ink); }
#navbar.scrolled .nav-link, #navbar.scrolled .nav-ghost { color: var(--mut); }
#navbar.scrolled .nav-link:hover, #navbar.scrolled .nav-ghost:hover { color: var(--ink); }
#navbar.scrolled .mark-ink { fill: var(--ink); }

.nav-logo-mark { width: 34px; height: 34px; display: grid; place-items: center; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-logo-mark:hover { transform: scale(1.06); }
.nav-logo-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mark-ink { fill: #fff; transition: fill .2s ease; }
.mark-aji { fill: var(--aji); }

/* ─── Botones ────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--aji);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--body);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--aji-deep);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 20px -6px rgba(219,43,57,0.42), 0 2px 4px rgba(0,0,0,0.12);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn-primary:hover { background: #E23644; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 12px 26px -6px rgba(219,43,57,0.5), 0 2px 4px rgba(0,0,0,0.12); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0.5px); }
.btn-primary.btn-lg { padding: 14px 24px; font-size: 15px; }

.btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03);
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.26); }
.btn-ghost-dark.btn-lg { padding: 14px 24px; font-size: 15px; }

.btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--carbon); color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600; transition: background .15s ease;
}
.btn-dark:hover { background: #2A221D; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink); padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; transition: border-color .15s ease, background .15s ease;
}
.btn-outline:hover { border-color: #CBD0CC; background: var(--bg); }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card-raised {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 1px 0 rgba(22,25,26,0.02), 0 18px 40px -22px rgba(22,25,26,0.18);
}

/* ─── Hero photo frame + floating card ───────────────────────────────────── */
.hero-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 40px 80px -28px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,14,12,0) 40%, rgba(18,14,12,0.55) 100%);
  pointer-events: none;
}

.float-card {
  position: absolute;
  background: rgba(27,22,19,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
  z-index: 3;
}
.float-tag {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(27,22,19,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
}
.pulse-dot { width: 7px; height: 7px; border-radius: 999px; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,0.5); animation: pulse 2s infinite; }
.pulse-dot.aji { background: var(--aji); box-shadow: 0 0 0 0 rgba(219,43,57,0.5); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5);} 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0);} 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0);} }

/* ─── Check items ────────────────────────────────────────────────────────── */
.check-item-sm, .check-item-dark {
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
}
.check-item-sm { font-size: 13px; color: #475052; }
.check-item-dark { font-size: 13px; color: #CBD0CC; }
.check-item-sm::before, .check-item-dark::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px;
  background-repeat: no-repeat; background-position: center;
}
.check-item-sm::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%231B1613' stroke-width='2.5' fill='none'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E"); }
.check-item-dark::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23F0505E' stroke-width='2.5' fill='none'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E"); }
.check-item-sm.feat-no { color: #9AA09C; }
.check-item-sm.feat-no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%239AA09C' stroke-width='2.5' fill='none'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6l8 8M14 6l-8 8'/%3E%3C/svg%3E"); }

/* ─── Pricing ────────────────────────────────────────────────────────────── */
.plan { position: relative; border-radius: 22px; border: 1px solid var(--line); background: #fff; padding: 32px 28px; display: flex; flex-direction: column; }
.plan-featured {
  background: linear-gradient(180deg, var(--carbon) 0%, var(--carbon-deep) 100%);
  border: 1px solid rgba(219,43,57,0.4); color: #fff; padding: 40px 28px;
  box-shadow: 0 0 0 1px rgba(219,43,57,0.14), 0 30px 60px -30px rgba(0,0,0,0.5), 0 0 80px -20px rgba(219,43,57,0.2);
  transform: translateY(-8px);
}
@media (max-width: 768px) { .plan-featured { transform: none; } }
.plan-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--aji); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 7px; margin-bottom: 18px;
}
.plan-label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut-2); }
.plan-featured .plan-label { color: var(--accent); }
.plan-price { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.plan-featured .plan-price { color: #fff; }
.plan-price-suffix { font-size: 14px; color: var(--mut-2); margin-left: 3px; white-space: nowrap; }
.plan-meta { font-family: var(--mono); font-size: 11px; color: var(--mut-2); margin-top: 8px; }
.plan-featured .plan-meta { color: rgba(240,80,94,0.8); }

/* ─── Reveal ─────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Input (dark) ───────────────────────────────────────────────────────── */
.input-dark {
  width: 100%; padding: 13px 14px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; font-family: var(--body);
  font-size: 14px; color: #fff; transition: border-color .15s, background .15s;
}
.input-dark::placeholder { color: #8A8F8C; }
.input-dark:focus { outline: none; border-color: rgba(219,43,57,0.7); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(219,43,57,0.14); }

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq-trigger:focus { outline: none; }
.faq-trigger:focus-visible { outline: 2px solid var(--aji); outline-offset: 2px; border-radius: 4px; }

/* ─── Founding benefit ───────────────────────────────────────────────────── */
.founding-benefit { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px 22px; transition: border-color .2s, background .2s; }
.founding-benefit:hover { border-color: rgba(240,80,94,0.28); background: rgba(240,80,94,0.04); }

/* ─── Grid overlay ───────────────────────────────────────────────────────── */
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .flex-col > .btn-primary, .flex-col > .btn-dark, .flex-col > .btn-ghost-dark, .flex-col > .btn-outline { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  .plan { padding: 28px 22px; }
  .plan-featured { padding: 32px 22px; }
}