/* ============================================================
   ZYRA — Landing page CSS
   Fonts: Bricolage Grotesque (títulos) / Space Grotesk (texto)
   Paleta: tinta #111111 · papel #F5F1EA · cian #00E0FF / #0077A8
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:              #111111;
  --ink-raised:       #1A1A1A;
  --ink-soft:         #171717;
  --paper:            #F5F1EA;
  --neon:             #00E0FF;
  --deep:             #0077A8;
  --deep-text:        #00698F;
  --text-secondary-dark:  #C8C3B8;
  --text-secondary-light: #5C5952;
  --line-dark:   rgba(0,224,255,.22);
  --line-light:  rgba(17,17,17,.14);
  --focus-ring:  #00E0FF;
  --success: #3FB68B;
  --warning:  #E8B53A;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;

  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;

  --shadow-paper: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shadow-dark:  0 8px 32px rgba(0,0,0,.35);

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-pad: clamp(4rem, 10vw, 7.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms; --t-base: 250ms;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-body);
  font-size:1rem; line-height:1.6; color:var(--paper);
  background:var(--ink); min-height:100dvh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

img,svg{ display:block; max-width:100%; }
button,a,input,summary{ -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
ul{ list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--paper); font-weight:800; line-height:1.08;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 7vw, 4.5rem); line-height:1.02; letter-spacing:-.02em; }
h2{ font-size:clamp(1.875rem, 4.5vw, 3rem); letter-spacing:-.015em; }
h3{ font-size:clamp(1.25rem, 2vw, 1.5rem); font-weight:700; line-height:1.15; }

p{ max-width:65ch; }

/* ---------- 3. Accesibilidad global ---------- */
.skip-link{
  position:absolute; left:1rem; top:-3.5rem; z-index:1000;
  padding:.75rem 1.25rem; background:var(--neon); color:var(--ink);
  font-weight:700; border-radius:var(--r-sm);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{ top:1rem; }

/* Reveal on scroll */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* Entrance on load (hero) */
.entrance{
  opacity:0;
  animation:entranceFade .8s var(--ease) forwards;
}
@keyframes entranceFade{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
.chat-card.entrance{
  animation:entranceFade .8s var(--ease) forwards, float 6s ease-in-out 1.2s infinite;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .entrance{ opacity:1; transform:none; animation:none; }
  .chat-card, .bubble, .marquee__track{ animation:none !important; }
}

:where(a,button,summary,input):focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px;
}
:where(a,button,summary):focus:not(:focus-visible){ outline:none; }

::selection{ background:var(--neon); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 4. Layout base ---------- */
.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }

.section{ padding-block:var(--section-pad); position:relative; }
.section--paper{ background:var(--paper); color:var(--ink); }
.section--paper h2, .section--paper h3{ color:var(--ink); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--neon); margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--neon); flex:none;
}
.section--paper .eyebrow{ color:var(--deep-text); }
.section--paper .eyebrow::before{ background:var(--deep); }

.section-head{ max-width:720px; margin-bottom:clamp(2.5rem, 6vw, 4rem); }
.section-head p{ color:var(--text-secondary-dark); margin-top:1rem; font-size:1.125rem; }
.section--paper .section-head p{ color:var(--text-secondary-light); }

/* ---------- 5. Botones ---------- */
.btn{
  --btn-bg:var(--neon); --btn-fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; min-width:200px; padding:.75rem 1.75rem;
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  color:var(--btn-fg); background:var(--btn-bg);
  border:2px solid transparent; border-radius:var(--r-md);
  cursor:pointer; text-decoration:none; text-align:center;
  transition:transform var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); filter:brightness(.96); }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--paper);
  border-color:var(--line-dark);
}
.btn--ghost:hover{ background:rgba(245,241,234,.08); border-color:var(--neon); filter:none; }
.btn--ghost:active{ filter:none; background:rgba(245,241,234,.14); }

.section--paper .btn{ --btn-bg:var(--deep); --btn-fg:var(--paper); }

.btn--wide{ width:100%; }

/* ---------- 6. Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(17,17,17,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
}
.nav--scrolled{ border-bottom-color:var(--line-dark); }
.nav__inner{
  display:flex; align-items:center; gap:2rem;
  min-height:72px; max-width:1200px; margin-inline:auto; padding-inline:var(--gutter);
}

.brand{ display:inline-flex; align-items:center; gap:.625rem; text-decoration:none; }
.brand__logo{
  font-family:var(--font-display); font-weight:800; font-size:1.375rem;
  color:var(--paper); letter-spacing:-.01em; line-height:1;
}
.brand__dot{ color:var(--neon); }

.nav__links{
  display:flex; align-items:center; gap:.25rem; margin-left:auto;
}
.nav__link{
  display:inline-flex; align-items:center;
  min-height:44px; padding:.5rem .875rem;
  font-weight:500; font-size:.9375rem; color:var(--text-secondary-dark);
  text-decoration:none; border-radius:var(--r-sm);
  position:relative; transition:color var(--t-fast) var(--ease);
}
.nav__link:hover{ color:var(--paper); }
.nav__cta{ margin-left:.75rem; min-width:auto; min-height:44px; padding:.5rem 1.25rem; }

.nav__toggle{
  display:none; margin-left:auto;
  width:48px; height:48px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-dark); border-radius:var(--r-sm);
  cursor:pointer; color:var(--paper);
}
.nav__toggle svg{ width:22px; height:22px; }

.nav__mobile{ display:none; }
.nav__mobile.is-open{
  display:flex; flex-direction:column; gap:.25rem;
  padding:.75rem var(--gutter) 1.25rem;
  border-top:1px solid var(--line-dark);
  background:var(--ink);
}
.nav__mobile .nav__link{ justify-content:flex-start; min-height:48px; font-size:1rem; }
.nav__mobile .nav__cta{ width:100%; justify-content:center; min-height:48px; }

@media (max-width:599px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
}

/* ---------- 7. Hero ---------- */
.hero{
  padding-block:clamp(4rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20% -20% auto;
  height:60%; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(0,224,255,.16), transparent 70%);
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:3.5rem;
  align-items:center;
}
@media (min-width:1024px){
  .hero__grid{ grid-template-columns:1.05fr .95fr; gap:4rem; }
}
.hero__inner{ position:relative; }
.hero__logo{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 4vw, 3.25rem);
  line-height:1; letter-spacing:-.02em;
  color:var(--paper); margin-bottom:1.5rem;
}
.hero__logo-dot{ color:var(--neon); text-shadow:0 0 24px rgba(0,224,255,.6); }
.hero .sub{
  margin:1.5rem 0 0; font-size:clamp(1.0625rem, 2vw, 1.25rem);
  color:var(--text-secondary-dark); max-width:58ch;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:flex-start;
  margin-top:2rem; font-size:.875rem; color:var(--text-secondary-dark);
}
.hero__trust span{ display:inline-flex; align-items:center; gap:.5rem; }
.hero__trust svg{ width:16px; height:16px; color:var(--neon); }

/* --- Chat mockup (imagen del producto) --- */
.chat-card{
  background:var(--paper); color:var(--ink);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-paper);
  animation:float 6s ease-in-out infinite;
}
.chat-card__head{
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line-light);
  background:#efeae0;
}
.chat-avatar{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  color:var(--ink); background:var(--neon); flex:none;
}
.chat-avatar__dot{ color:var(--ink); }
.chat-card__who{ display:flex; flex-direction:column; gap:.1rem; }
.chat-card__name{ font-weight:700; font-size:.95rem; }
.chat-card__status{ display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--text-secondary-light); }
.chat-card__status .led{
  width:6px; height:6px; border-radius:50%; background:var(--success);
  animation:ledPulse 2.2s ease-in-out infinite;
}
@keyframes ledPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(63,182,139,.45);} 50%{ box-shadow:0 0 0 5px rgba(63,182,139,0);} }
.chat-card__meta{ margin-left:auto; font-size:.75rem; color:var(--text-secondary-light); }
.chat-card__body{
  display:flex; flex-direction:column; gap:.625rem;
  padding:1.25rem 1.25rem 1rem;
  min-height:280px;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,224,255,.06), transparent 40%),
    var(--paper);
}
.bubble{
  max-width:82%; padding:.6rem .9rem; border-radius:16px;
  position:relative; font-size:.9rem; line-height:1.45;
  animation:bubbleIn .5s var(--ease) both;
}
.bubble--in{
  align-self:flex-start;
  background:#efeae0; color:var(--ink);
  border-bottom-left-radius:4px;
}
.bubble--out{
  align-self:flex-end;
  background:var(--neon); color:var(--ink);
  border-bottom-right-radius:4px;
}
.bubble--out-short{ animation-delay:.15s; }
.bubble p{ margin:0; }
.bubble__time{
  display:block; margin-top:.2rem; font-size:.68rem; opacity:.55; text-align:right;
}

/* typing indicator */
.bubble--typing{
  display:flex; align-items:center; gap:4px;
  padding:.9rem 1rem;
  animation-delay:.35s;
}
.typing-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ink); opacity:.35;
  animation:typing 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2){ animation-delay:.15s; }
.typing-dot:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.35;} 30%{ transform:translateY(-4px); opacity:.9;} }
.chat-card__foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.4rem; font-size:.72rem; color:var(--text-secondary-light);
}
.chat-card__ok{ font-weight:500; }
.chat-card__auto{ color:var(--deep-text); }

@keyframes bubbleIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* ---------- 8b. Marquee (preguntas en movimiento) ---------- */
.marquee{
  overflow:hidden;
  background:var(--ink-soft);
  border-block:1px solid var(--line-dark);
  padding-block:1rem;
  white-space:nowrap;
}
.marquee__track{
  display:inline-block;
  animation:marquee 22s linear infinite;
}
.marquee__item{
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; color:var(--text-secondary-dark);
}
.marquee__dot{ color:var(--neon); padding-inline:.9rem; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- 8. Manifiesto ---------- */
/* ---------- 7b. Qué es Zyra (GEO) ---------- */
.que-es__def{
  max-width:76ch;
  font-size:clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height:1.6;
  color:var(--text-secondary-dark);
}
.que-es__cta{ margin-top:1.75rem; }

/* ---------- 8. Manifiesto ---------- */
.manifesto{
  border-block:1px solid var(--line-dark);
  background:var(--ink-soft);
  padding:clamp(3rem, 8vw, 6rem) 0;
}
.manifesto__inner{
  max-width:960px; margin-inline:auto; text-align:center;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.75rem, 5vw, 3.25rem); line-height:1.08; letter-spacing:-.015em;
  text-wrap:balance;
}
.manifesto mark{ background:none; color:var(--neon); }

/* ---------- 9. Facts ---------- */
.facts__grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(1, 1fr);
}
@media (min-width:768px){ .facts__grid{ grid-template-columns:repeat(3, 1fr); } }

.fact{
  background:var(--ink-raised);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  padding:1.75rem 1.5rem;
  transition:transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.fact:nth-child(2){ transition-delay:.08s; }
.fact:nth-child(3){ transition-delay:.16s; }
.fact:hover{ transform:translateY(-3px); border-color:rgba(0,224,255,.5); }
.fact__num{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.5rem, 6vw, 3.25rem); line-height:1;
  color:var(--neon); font-variant-numeric:tabular-nums;
}
.fact__suffix{ font-size:.5em; margin-left:.05em; }
.fact__label{
  display:block; margin-top:.75rem;
  font-weight:500; color:var(--paper);
}
.fact__hint{ display:block; margin-top:.25rem; font-size:.875rem; color:var(--text-secondary-dark); }

/* ---------- 10. Problema ---------- */
.problem__grid{
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .problem__grid{ grid-template-columns:1fr 1fr; gap:4rem; } }
.problem__list{ display:grid; gap:1rem; }
.problem__item{
  display:flex; gap:.875rem; align-items:flex-start;
  background:var(--ink-raised); border:1px solid var(--line-dark);
  border-radius:var(--r-md); padding:1.125rem 1.25rem;
  color:var(--text-secondary-dark); font-size:1.0625rem;
}
.problem__item svg{ width:20px; height:20px; flex:none; margin-top:.2rem; color:var(--warning); }
.problem__art svg{ width:100%; height:auto; display:block; }

/* ---------- 11. Cómo funciona ---------- */
.steps__grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(1, 1fr);
}
@media (min-width:768px){ .steps__grid{ grid-template-columns:repeat(3, 1fr); } }

.step{
  position:relative; padding:1.5rem;
  border:1px solid var(--line-dark); border-radius:var(--r-md);
  background:transparent; transition:background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.step:hover{ background:var(--ink-raised); border-color:rgba(0,224,255,.5); }
.step__num{
  font-family:var(--font-display); font-weight:800; font-size:1rem;
  color:var(--neon);
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--line-dark);
  border-radius:50%; margin-bottom:1.25rem; font-variant-numeric:tabular-nums;
}
.step h3{ margin-bottom:.625rem; }
.step p{ color:var(--text-secondary-dark); font-size:.9375rem; }

/* ---------- 12. Visual de dolor (la misma pregunta x50) ---------- */
.pain-visual .section-head{ margin-inline:auto; text-align:center; }
.pain-svg{
  display:block;
  max-width:820px;
  width:100%;
  height:auto;
  margin:0 auto;
}

/* ---------- 13. Pricing (papel) ---------- */
.pricing__wrap{ max-width:480px; margin-inline:auto; }

.billing-toggle{
  display:flex; gap:4px; padding:4px;
  background:rgba(17,17,17,.06);
  border:1px solid var(--line-light); border-radius:var(--r-full);
  margin-bottom:1.25rem;
}
.billing-toggle__btn{
  flex:1; min-height:40px; padding:.4rem 1rem;
  font-family:var(--font-body); font-weight:700; font-size:.875rem;
  color:var(--text-secondary-light); background:transparent;
  border:none; border-radius:var(--r-full); cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.billing-toggle__btn.is-active{
  background:var(--paper); color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.billing-toggle__save{ color:var(--deep); }

.pricing-card{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-light); border-radius:var(--r-lg);
  box-shadow:var(--shadow-paper);
  padding:clamp(1.5rem, 4vw, 2.5rem);
}
.pricing-card__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-bottom:1.5rem;
}
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-body); font-weight:700; font-size:.75rem;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--r-full); padding:.375rem .75rem;
  border:1px solid transparent;
}
.pill--deep{ background:var(--deep); color:var(--paper); }
.pill--ghost{ background:transparent; color:var(--deep-text); border-color:rgba(0,105,143,.35); }

.pricing-card__price{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.pricing-card__amount{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem, 9vw, 4rem); line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.pricing-card__period{ font-weight:500; color:var(--text-secondary-light); }
.pricing-card__note{
  margin-top:.5rem; font-size:.9375rem; color:var(--text-secondary-light);
}
.pricing-card__features{
  display:grid; gap:.875rem; margin:2rem 0;
}
.pricing-card__feature{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:1rem; font-weight:500; color:var(--ink);
}
.pricing-card__feature svg{
  width:20px; height:20px; flex:none; margin-top:.15rem; color:var(--deep-text);
}
.pricing-card__paypal{
  margin-top:1rem; display:flex; gap:.5rem; align-items:flex-start;
  font-size:.8125rem; color:var(--text-secondary-light);
}
.pricing-card__paypal svg{ width:16px; height:16px; flex:none; margin-top:.1rem; color:var(--deep-text); }

/* ---------- 14. FAQ ---------- */
.faq__wrap{ max-width:720px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line-dark); }
.faq__item:first-child{ border-top:1px solid var(--line-dark); }

.faq__q{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; min-height:56px; padding:1rem 0;
  font-family:var(--font-body); font-weight:500; font-size:1.0625rem;
  color:var(--paper); background:none; border:none; text-align:left;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q svg{
  width:20px; height:20px; flex:none; color:var(--neon);
  transition:transform var(--t-base) var(--ease);
}
.faq__item[open] .faq__q svg{ transform:rotate(180deg); }
.faq__q:hover{ color:var(--neon); }

.faq__a{ color:var(--text-secondary-dark); padding:0 0 1.25rem; max-width:62ch; }
.faq__a p + p{ margin-top:.75rem; }

/* ---------- 15. CTA final ---------- */
.cta-final{ text-align:center; }
.cta-final .section-head{ margin-inline:auto; }
.cta-final .btn{ margin-top:.5rem; }
.cta-final__trust{
  margin-top:1.25rem; font-size:.875rem; color:var(--text-secondary-dark);
}
.cta-final__trust a{ color:var(--neon); text-decoration:none; }
.cta-final__trust a:hover{ text-decoration:underline; }

/* ---------- 16. Footer ---------- */
.footer{
  border-top:1px solid var(--line-dark);
  padding-block:3rem 2rem;
  background:var(--ink-soft);
}
.footer__inner{ display:flex; flex-direction:column; gap:2rem; }
.footer__top{ display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:768px){
  .footer__top{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
}
.footer .brand__word{ color:var(--paper); }
.footer__links{ display:flex; flex-wrap:wrap; gap:.25rem; }
.footer__link{
  min-height:44px; display:inline-flex; align-items:center;
  padding:.5rem .75rem; font-size:.9375rem; font-weight:500;
  color:var(--text-secondary-dark); text-decoration:none; border-radius:var(--r-sm);
  transition:color var(--t-fast) var(--ease);
}
.footer__link:hover{ color:var(--neon); }
.footer__bottom{
  border-top:1px solid var(--line-dark); padding-top:1.5rem;
  font-size:.8125rem; color:var(--text-secondary-dark);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
}
.footer__disclaimer{ opacity:.85; }
.footer__credit{
  color:var(--neon);
  text-decoration:none;
  transition:text-decoration var(--t-fast) var(--ease);
}
.footer__credit:hover{ text-decoration:underline; }

/* ---------- 17. Responsive util ---------- */
@media (min-width:600px){
  .hero__ctas .btn{ min-width:220px; }
}

/* ---------- 18. Auth / Próximamente ---------- */
.auth-body{ display:flex; flex-direction:column; min-height:100dvh; }
.auth-main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:4rem var(--gutter);
  position:relative;
}
.auth-main::before{
  content:""; position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(0,224,255,.14), transparent 70%);
}
.auth-card{
  position:relative;
  width:100%; max-width:440px;
  background:var(--paper); color:var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-paper);
  padding:clamp(1.75rem, 5vw, 2.75rem);
}
.auth-card h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.875rem, 4.5vw, 2.5rem);
  color:var(--ink); line-height:1.08; margin-bottom:.75rem;
}
.auth-sub{ color:var(--text-secondary-light); font-size:1rem; margin-bottom:1.75rem; }
.auth-form{ display:flex; flex-direction:column; gap:.25rem; }
.auth-form label{
  font-weight:500; font-size:.875rem; color:var(--ink); margin-top:.5rem;
}
.auth-form input{
  width:100%; min-height:48px; margin-top:.35rem;
  padding:.65rem .9rem;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid rgba(17,17,17,.22);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease);
}
.auth-form input:focus{ outline:none; border-color:var(--deep); }
.auth-form input:focus-visible{ outline:2px solid var(--deep); outline-offset:2px; }
.auth-form .btn{ margin-top:1.5rem; }
.auth-error{ min-height:1.2em; color:#B30030; font-size:.85rem; margin-top:.5rem; }
.auth-fine{ font-size:.8rem; color:var(--text-secondary-light); margin-top:1.25rem; text-align:center; }

.auth-card--center{ text-align:center; }
.auth-card--center .auth-sub{ margin-bottom:2rem; }
.auth-card--center .btn{ width:100%; }
.auth-check{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.5rem;
  background:var(--neon); color:var(--ink);
  font-size:1.75rem; font-weight:700;
  animation:entranceFade .6s var(--ease) both;
}