/* ============================================================================
   Gestiona mi Veterinaria — Landing comercial (registro de clínicas)
   Tema oscuro inspirado en el brochure de ventas: negro-teal degradado,
   acentos brillantes, capturas reales del producto. Reusa los tokens de
   design-system.css como base y los sobrescribe para este tema oscuro.
   ========================================================================= */

:root {
  --dk-bg:      #0C201D;
  --dk-bg-2:    #112A26;
  --dk-surface: rgba(255,255,255,.055);
  --dk-border:  rgba(255,255,255,.12);
  --dk-border-2:rgba(255,255,255,.20);
  --dk-ink:     #FFFFFF;
  --dk-ink-2:   rgba(255,255,255,.88);
  --dk-muted:   rgba(255,255,255,.68);
  --dk-accent:  #2FE9C0;
  --dk-accent-2:#14A28E;
  --wa-green:   #25D366;
}

body {
  background: var(--dk-bg);
  color: var(--dk-ink);
}

.dots {
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------------------------------------------------------------- Nav ---- */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s6);
  background: rgba(12,32,29,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dk-border);
}
.nav .brand { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 650; color: var(--dk-ink); }
.nav .brand .paw {
  width: 30px; height: 30px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 15px;
  background: linear-gradient(135deg, var(--dk-accent-2), var(--dk-accent));
}
.nav .btn.ghost { --btn-bg: transparent; --btn-fg: var(--dk-ink); --btn-br: var(--dk-border-2); }
.nav .btn.ghost:hover { --btn-bg: rgba(255,255,255,.06); }

/* --------------------------------------------------------------- Hero ---- */

.hero {
  position: relative;
  padding: var(--s10) var(--s6) var(--s8);
  background:
    radial-gradient(1000px 480px at 18% -10%, rgba(34,224,184,.16), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(15,123,108,.20), transparent 60%);
}
.hero-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dk-accent); margin-bottom: var(--s4);
}
.eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--dk-accent); border-radius: 2px; }
@media (max-width: 980px) { .eyebrow { justify-content: center; } }

.hero h1 {
  font-size: clamp(30px, 4vw, 46px); line-height: 1.14; letter-spacing: -.02em;
  color: var(--dk-ink); margin-bottom: var(--s5);
}
.hero h1 .hl { color: var(--dk-accent); }
.hero p.lead {
  font-size: 16.5px; line-height: 1.6; color: var(--dk-muted);
  max-width: 480px; margin: 0 0 var(--s6);
}
@media (max-width: 980px) { .hero p.lead { margin-inline: auto; } }

.cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
@media (max-width: 980px) { .cta-row { justify-content: center; } }
.cta-row .btn { height: 46px; padding: 0 var(--s6); font-size: 14.5px; }
.cta-row .btn.ghost { --btn-bg: transparent; --btn-fg: var(--dk-ink); --btn-br: var(--dk-border-2); }
.cta-row .btn.ghost:hover { --btn-bg: rgba(255,255,255,.06); }

.login-menu { position: relative; display: inline-block; }
.login-menu .chev { display: inline-block; transition: transform var(--t-fast); font-size: 11px; }
.login-menu.open .chev { transform: rotate(180deg); }

.login-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 220px; display: flex; flex-direction: column; gap: 2px;
  background: var(--dk-bg-2); border: 1px solid var(--dk-border-2); border-radius: var(--r-md);
  box-shadow: 0 16px 36px -8px rgba(0,0,0,.55); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.login-menu.open .login-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.hero .login-menu .login-dropdown { left: 0; right: auto; }

.login-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 550; color: var(--dk-ink-2); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.login-dropdown a:hover { background: rgba(255,255,255,.08); color: var(--dk-ink); }

.btn.whatsapp {
  --btn-bg: var(--wa-green); --btn-br: var(--wa-green); --btn-fg: #fff;
  gap: 9px;
}
.btn.whatsapp:hover { --btn-bg: #1FB855; --btn-br: #1FB855; }
.btn.whatsapp svg { width: 18px; height: 18px; flex: none; }

.fine { font-size: 13px; color: var(--dk-muted); }
.fine a { color: var(--dk-accent); font-weight: 550; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}

/* --------------------------------------------------------- Franja logos -- */

.trustbar {
  border-top: 1px solid var(--dk-border); border-bottom: 1px solid var(--dk-border);
  padding: var(--s5) var(--s6);
}
.trustbar-row {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s7);
  font-size: 13px; color: var(--dk-muted);
}
.trustbar-row b { color: var(--dk-ink-2); font-weight: 600; }

/* -------------------------------------------------------------- Dolor ---- */

.pain {
  max-width: 1180px; margin: 0 auto; padding: var(--s9) var(--s6);
}
.pain-head { max-width: 640px; margin: 0 auto var(--s7); text-align: center; }
.pain-head h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: var(--s3); color: var(--dk-ink); }
.pain-head h2 .hl { color: var(--dk-accent); }
.pain-head p { color: var(--dk-muted); font-size: 15px; line-height: 1.6; }

.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pain-grid { grid-template-columns: 1fr; } }

.pain-card {
  background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--r-lg);
  padding: var(--s5);
}
.pain-card .num {
  font-size: 11px; font-weight: 700; color: var(--dk-accent);
  border: 1px solid rgba(34,224,184,.35); border-radius: var(--r-full);
  width: 24px; height: 24px; display: grid; place-items: center; margin-bottom: var(--s4);
}
.pain-card h3 { font-size: 14.5px; margin-bottom: 6px; color: var(--dk-ink); }
.pain-card p { font-size: 13px; line-height: 1.55; color: var(--dk-muted); }

/* ----------------------------------------------------------- Features ---- */

.features { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s9); }

.feat-row {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s8); align-items: center;
  padding: var(--s8) 0; border-top: 1px solid var(--dk-border);
}
.feat-row:first-child { border-top: none; }
.feat-row.rev .feat-media { order: 1; }
.feat-row.rev .feat-text { order: 2; }
@media (max-width: 900px) {
  .feat-row, .feat-row.rev { grid-template-columns: 1fr; }
  .feat-row.rev .feat-media, .feat-row.rev .feat-text { order: initial; }
}

.feat-text .eyebrow { margin-bottom: var(--s3); }
.feat-text h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; margin-bottom: var(--s4); color: var(--dk-ink); }
.feat-text > p { color: var(--dk-muted); font-size: 14.5px; line-height: 1.6; margin-bottom: var(--s5); }

.feat-list { display: flex; flex-direction: column; gap: var(--s3); }
.feat-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--dk-ink-2); line-height: 1.5; }
.feat-list .fi {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-full); margin-top: 1px;
  display: grid; place-items: center; background: rgba(34,224,184,.14); color: var(--dk-accent);
}

.feat-media {
  width: 420px; max-width: 100%;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--dk-border);
  background: var(--dk-bg-2);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.55);
}
.feat-row.rev .feat-media { margin-left: 0; margin-right: auto; }
.feat-row:not(.rev) .feat-media { margin-left: auto; margin-right: 0; }
.feat-media img { width: 100%; height: auto; display: block; }
.feat-media.phone { width: 230px; }
.feat-row.phones .feat-media { width: 320px; }

/* ------------------------------------------------------------ Confianza -- */

.trust {
  max-width: 1180px; margin: 0 auto; padding: var(--s7) var(--s6) var(--s9);
  border-top: 1px solid var(--dk-border);
}
.trust-head { max-width: 620px; margin: 0 auto var(--s7); text-align: center; }
.trust-head h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--s3); color: var(--dk-ink); }
.trust-head h2 .hl { color: var(--dk-accent); }
.trust-head p { color: var(--dk-muted); font-size: 15px; }

.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }

.trust-card {
  background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--r-lg);
  padding: var(--s5);
}
.trust-card .tico {
  width: 42px; height: 42px; border-radius: var(--r-md); margin-bottom: var(--s4);
  display: grid; place-items: center; background: rgba(34,224,184,.12); color: var(--dk-accent);
}
.trust-card h3 { font-size: 14.5px; margin-bottom: 6px; color: var(--dk-ink); }
.trust-card p { font-size: 13px; line-height: 1.55; color: var(--dk-muted); }

/* ------------------------------------------------------------------ Band - */

.band {
  position: relative; overflow: hidden; text-align: center; padding: var(--s9) var(--s6);
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(34,224,184,.20), transparent 65%),
    linear-gradient(180deg, var(--dk-bg-2), var(--dk-bg));
  border-top: 1px solid var(--dk-border);
}
.band-inner {
  position: relative; z-index: 1;
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--s8);
}
.band-content { flex: 1; min-width: 0; max-width: 480px; }
.band h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: var(--s3); color: var(--dk-ink); }
.band p { color: var(--dk-muted); margin-bottom: var(--s6); font-size: 15px; }
.band .btn { height: 46px; padding: 0 var(--s7); font-size: 14.5px; }

.band-pet {
  flex: none; width: 230px; height: auto;
}
@media (max-width: 820px) { .band-pet { display: none; } }

footer.site-foot {
  text-align: center; padding: var(--s6); font-size: 12.5px; color: var(--dk-muted);
  border-top: 1px solid var(--dk-border);
}
footer.site-foot a { color: var(--dk-ink-2); }