:root{
  /* === Brand (desde la guía) === */
  --brand-primary:        #0ea5e9;
  --brand-primary-600:    #0284c7;
  --brand-secondary:      #f59e0b;
  --brand-accent:         #22c55e;
  --ink-900:              #0f172a;
  --ink-700:              #334155;
  --ink-500:              #64748b;
  --ink-300:              #cbd5e1;
  --bg-0:                 #ffffff;
  --bg-50:                #f8fafc;
  --bg-100:               #f1f5f9;
  --success:              #16a34a;
  --warning:              #eab308;

  /* Tipografía (de la guía) */
  --font-sans:            "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Escala de tamaños (ajustar a guía) */
  --fs-900: clamp(2.4rem, 4vw, 3.2rem);  /* H1 */
  --fs-800: clamp(1.8rem, 3vw, 2.4rem);  /* H2 */
  --fs-700: 1.5rem;                      /* H3 */
  --fs-600: 1.25rem;                     /* Lead */
  --fs-500: 1.1rem;                      /* Body L */
  --fs-400: 1rem;                        /* Body */
  --fs-300: 0.9375rem;                   /* Small */
  --radius: 14px;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.06);
  --shadow-md: 0 6px 24px rgb(0 0 0 / 0.08);
}

html, body{
  background: linear-gradient(180deg, var(--bg-50) 0%, var(--bg-0) 40%) fixed;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}

.container{
  width: min(1120px, 92vw);
  margin: 0 auto;
  padding: 24px;
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:10;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bg-100);
}
.brand-logo{ max-width:220px; height:auto; }

/* Header/Nav */
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-main{ display:flex; align-items:center; gap:18px; }
.nav-left{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.nav-right{ display:flex; gap:10px; align-items:center; }
.nav-link{ color: var(--ink-700); text-decoration:none; padding:.45rem .2rem; }
.nav-link:hover{ color: var(--ink-900); }
.nav-toggle{ display:none; background:transparent; border:0; font-size:1.25rem; }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .nav-main{
    position: fixed; inset: 64px 0 auto 0; /* debajo del header */
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--bg-100);
    display:none; flex-direction:column; gap:14px; padding:14px 16px;
  }
  .nav-left{ flex-direction:column; gap:10px; }
  .nav-right{ align-self:flex-end; }
  html.nav-open .nav-main{ display:flex; }
}

.hero{
  padding: 72px 0 48px;
  background:
    radial-gradient(120rem 60rem at 20% -10%, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, transparent 70%),
    radial-gradient(120rem 60rem at 80% -10%, color-mix(in srgb, var(--brand-secondary) 12%, transparent) 0%, transparent 70%);
}
.hero h1{ font-size: var(--fs-900); font-weight: 700; margin-bottom: 16px; }
.hero .kicker{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 12px;
}
.hero p.lead{ font-size: var(--fs-600); color: var(--ink-700); max-width: 60ch; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .8rem 1.1rem; border-radius: var(--radius);
  border: 1px solid transparent; font-weight:600; text-decoration:none;
  transition: background .2s ease, box-shadow .2s ease, transform .02s ease-in;
}
.btn-primary{
  background: var(--brand-primary); color: white;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ filter: brightness(1.05); box-shadow: var(--shadow-md); }
.btn-outline{
  background: transparent; color: var(--brand-primary);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.btn-outline:hover{ background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }

/* Sections */
.section{ padding: 36px 0; }
.section h2{ font-size: var(--fs-800); margin-bottom: 12px; }
.kicker{ text-transform: uppercase; letter-spacing:.08em; font-size: .78rem; color: var(--ink-500); }

/* Feature rows */
.features{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(2, 1fr);
}
.card{
  background: white; border: 1px solid var(--bg-100); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.card h3{ font-size: var(--fs-700); margin-bottom: 6px; }
.card p{ color: var(--ink-700); }

/* Footer */
.site-footer{
  margin-top: 40px; padding: 28px 0;
  background: var(--bg-50); border-top: 1px solid var(--bg-100);
  color: var(--ink-700);
}

/* Links */
a{ color: var(--brand-primary); }
a:hover{ color: var(--brand-primary-600); }

/* Media queries mínimas */
@media (max-width:720px){
  .hero{ padding: 40px 0 24px; }
  .container{ padding: 16px; }
  .features{ grid-template-columns: 1fr; }
}

/* === Pricing layout normalization === */
.pricing-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px){ .pricing-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .pricing-grid{ grid-template-columns: 1fr; } }

.pricing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  min-height: 100%;
}

.pricing-card h3 {
  margin-top: 0;
  color: var(--gray-800);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .5rem 0 1rem;
}

.price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-800);
}
.period {
  font-size: 1rem;
  color: var(--gray-600);
}

.pricing-features {
  margin: 0 0 1rem 1.25rem;
  color: var(--gray-700);
}

.pricing-card .cta {
  margin-top: auto;
  display: flex;
}

.pricing-card .btn {
  width: 100%;
  height: 44px;
}

/* Destacar Pro si se desea */
.pricing-card.highlight {
  box-shadow: 0 0 0 2px var(--primary-600) inset;
}

/* Annual billing note */
.annual-note {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-top: 0.5rem;
}

/* === Footer basics === */
.site-footer {
  border-top: 1px solid var(--gray-200);
  padding: 1.5rem 0;
  font-size: 0.95rem;
  color: var(--gray-700);
}
.site-footer a { color: var(--gray-700); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Contact info block */
.contact-info { margin-top: 1.5rem; color: var(--gray-700); }

/* === Data2Bids: mínimos para que no se vea "pelado" === */
html, body {
  margin: 0;
  background: #fff;
  color: #0f172a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.brand-logo { max-width: 220px; height: auto; display: block; }

.site-header .nav {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
}

.app-nav { display: flex; gap: 1rem; align-items: center; }
.nav-toggle { display: none; }

@media (max-width: 768px) {
  .brand-logo { max-width: 160px; }
  .app-nav { display: none; }
  .app-nav.open { display: flex; flex-direction: column; gap: .75rem; }
  .nav-toggle { display: inline-block; }
}

/*
.hero { padding: 48px 0 28px; }
.hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 12px; }
.hero .sub { color: #475569; font-size: 1.1rem; max-width: 820px; margin: 0 0 16px; }
*/

.btn { display:inline-block; padding:10px 16px; border-radius:8px; border:1px solid #0ea5e9; text-decoration:none; }
.btn.ghost { background:transparent; border-color:#cbd5e1; }

/* ===== Spacing tweaks (Home) ===== */
.hero             { margin-top: 12px; }
.hero h1          { margin: 8px 0 6px; line-height: 1.1; }
.hero .subtitle   { margin: 4px 0 10px; color:#4b5563; }
.section          { margin: 22px 0; }
.section.compact  { margin: 14px 0; }
.features-wrap    { margin-top: 10px; }
.features-grid    { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width: 1024px){ .features-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

/* ===== Contact page polish ===== */
.contact-hero { margin-top: 12px; }
.contact-hero h1 { margin-bottom: 6px; }
.contact-hero .lead { margin-bottom: 14px; color:#4b5563; }
.contact-grid { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap:22px; align-items:start; }
.contact-form .field { margin-bottom: 12px; }
.contact-form input, .contact-form textarea { background:#f9fbfd; border:1px solid #cfd6e4; }
.contact-form .btn-primary { padding:10px 16px; }
.contact-info { padding: 8px 12px; background:#fbfdff; border:1px dashed #e5eaf3; border-radius: 12px; }

/* ===== Footer Pro ===== */
.site-footer { background:#f7f9fc; border-top:1px solid #e8edf5; margin-top: 28px; }
.footer-inner { max-width:1100px; margin:0 auto; padding:20px 16px; }
.footer-grid { display:grid; grid-template-columns: 1.2fr repeat(3, minmax(0,1fr)); gap:18px; }
.footer-brand { display:flex; gap:10px; align-items:center; }
.footer-brand img { width:36px; height:36px; }
.footer-title { font-weight:700; font-size:1.05rem; margin-bottom:8px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin:6px 0; }
.footer-col a { color:#334155; text-decoration:none; }
.footer-col a:hover { text-decoration:underline; }
.footer-meta { border-top:1px solid #e8edf5; margin-top:14px; padding-top:10px; color:#64748b; font-size:.95rem; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
@media (max-width: 900px){
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-grid { grid-template-columns: 1fr; }
}

/* ===== Pricing page ===== */
.pricing-hero { margin: 16px 0 12px; }
.pricing-hero h1 { font-size: 32px; font-weight: 700; margin: 0 0 6px; }
.pricing-hero .lead { color:#4b5563; margin:0 0 10px; font-size:16px; }

.billing-toggle { display:flex; gap:8px; align-items:center; margin: 8px 0 16px; }
.billing-toggle .segmented {
  display:inline-flex; border:1px solid #d1d5db; border-radius:10px; overflow:hidden;
}
.billing-toggle .segmented button {
  padding:8px 14px; border:0; background:#fff; cursor:pointer; font-weight:600;
}
.billing-toggle .segmented button.active { background:#111827; color:#fff; }

.plans-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width: 1024px){ .plans-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .plans-grid{ grid-template-columns: 1fr; } }

.plan-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 8px 18px rgba(0,0,0,.04);
  display:flex; flex-direction:column; justify-content:space-between;
}
.plan-card h3 { font-size:18px; margin:0 0 6px; }
.plan-card .desc { color:#6b7280; font-size:14px; margin:0 0 10px; min-height:38px; }
.plan-card .price { font-size:28px; font-weight:700; margin: 2px 0 4px; }
.plan-card .price .per { font-size:14px; color:#6b7280; font-weight:500; margin-left:4px; }
.plan-card ul { list-style:none; padding:0; margin:10px 0 12px; color:#374151; font-size:14px; }
.plan-card li { margin:6px 0; }

.btn-primary { background:#0ea5e9; color:#fff; }
.btn-secondary { background:#111827; color:#fff; }
.btn-ghost { background:#fff; color:#111827; border:1px solid #d1d5db; }
.plan-card .cta { margin-top:auto; }
.plan-card .cta .btn { display:block; text-align:center; padding:10px 14px; border-radius:10px; font-weight:700; border:none; cursor:pointer; }

.pricing-note { margin-top:14px; color:#6b7280; font-size:14px; }

/* ocultar/mostrar precios según billing */
[data-price="annual"] { display:none; }
[data-billing="annual"] [data-price="monthly"] { display:none; }
[data-billing="annual"] [data-price="annual"] { display:block; }

/* Hero adjustments */
.hero h1 { font-size: 32px; font-weight: 600; margin-bottom: 8px; }
.hero .subtitle { font-size: 13px; color:#6b7280; margin-bottom: 4px; }
.hero p { font-size: 16px; color:#374151; margin-bottom: 12px; }
.hero .note { font-size: 14px; color:#6b7280; }

/* Footer cleanup */
.site-footer .footer-brand { display:none; }
.footer-col { font-size: 14px; color:#334155; }
.footer-col .footer-title { font-size: 15px; font-weight: 700; margin-bottom:6px; }
.footer-meta { font-size: 13px; color:#64748b; }

/* Nav links */
.nav-link{ color: var(--ink-700); text-decoration:none; padding:.4rem .2rem; }
.nav-link:hover{ color: var(--ink-900); }

/* Auth pages */
.auth-wrap{ min-height: 100vh; display:grid; place-items:center; padding: 24px; }
.form-card{
  width: min(480px, 96vw);
  background:#fff; border:1px solid var(--bg-100);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 22px;
}
.form-card h1{ font-size: var(--fs-800); margin-bottom: 6px; }
.form-card p.help{ color: var(--ink-700); margin-bottom: 18px; }
.form-row{ display:grid; gap:6px; margin-bottom:12px; }
.form-row label{ font-weight:600; color: var(--ink-900); }
.input{
  border:1px solid var(--bg-100); border-radius:12px; padding:.75rem .9rem;
  width:100%; outline:none; background:#fff;
}
.input:focus{ border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--bg-100)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.btn.block{ width:100%; justify-content:center; }
.form-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.link{ color: var(--brand-primary); text-decoration:none; }
.link:hover{ color: var(--brand-primary-600); }

/* Eliminar cualquier color “rosado” previo */
:root{
  /* si hay variables o clases con rosa, comentarlas o reemplazarlas por --brand-primary */
}

/* Toggle layout: centrado horizontal */
.pricing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

/* Labels del toggle */
.pricing-toggle .label {
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

.pricing-toggle .label.active {
  font-weight: 700;
  color: var(--fg);
}

/* Nota de annual debajo, centrada */
.pricing-note {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 20px;
}

/* ===== Home: features centering ===== */
#homeFeatures { padding: 24px 16px 60px; }
#homeFeatures .container { max-width:1120px; margin:0 auto; }
#homeFeatures .cards{display:grid!important;gap:18px;grid-template-columns:repeat(1,minmax(260px,320px))!important;justify-content:center;}
@media(min-width:720px){#homeFeatures .cards{grid-template-columns:repeat(2,minmax(260px,320px))!important}}
@media(min-width:1024px){#homeFeatures .cards{grid-template-columns:repeat(4,minmax(260px,320px))!important}}
#homeFeatures .card,#homeFeatures .feature-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 10px 25px rgba(2,6,23,.06);padding:18px;display:flex;flex-direction:column;min-height:160px}

/* ===== Pricing ===== */
:root{--brand:#2563eb;--ink:#0f172a;--muted:#64748b;--ring:rgba(37,99,235,.25)}
.wrap.pricing{max-width:1120px;margin:0 auto;padding:40px 16px 80px}
.wrap.pricing h1{font-size:clamp(28px,3vw,40px);text-align:center;margin:0 0 6px}
.p-subtitle{text-align:center;color:var(--muted);margin:0 0 24px}
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px auto 28px;user-select:none}
.pricing-toggle .label{font-weight:700;color:var(--muted)}
.pricing-toggle .label.active{color:var(--ink)}
.switch{width:58px;height:32px;border-radius:20px;background:#e5e7eb;position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px #e2e8f0;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 10px 25px rgba(2,6,23,.08);transition:transform .22s ease}
.switch.active{background:#dbeafe;box-shadow:inset 0 0 0 2px #bfdbfe}
.switch.active::after{transform:translateX(24px)}
.card-grid{display:grid;gap:18px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:720px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.card-grid{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 10px 25px rgba(2,6,23,.08);padding:22px;display:flex;flex-direction:column}
.card h3{margin:0 0 8px;font-size:18px}
.price{display:flex;align-items:baseline;gap:8px;margin:8px 0 14px}
.price-value{font-size:34px;font-weight:800;letter-spacing:-.02em}
.price-suffix{color:var(--muted);font-size:14px}
.features{list-style:none;padding:0;margin:0 0 16px;color:#334155;display:flex;flex-direction:column;gap:8px}
.btn.full{display:inline-block;text-align:center;width:100%;padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 6px 18px var(--ring)}
.btn.alt{background:#0f172a;color:#fff}
.btn.primary:hover,.btn.alt:hover{filter:brightness(.98)}
.pricing-note{max-width:880px;margin:18px auto 0;text-align:center;color:var(--muted);font-size:14px}

/* ===== Contact ===== */
#contactPage.contact-form{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(2,6,23,.06)}
#contactPage .form-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){#contactPage .form-grid{grid-template-columns:1fr 1fr}}
#contactPage .span-2{grid-column:1 / -1}
#contactPage .field{display:flex;flex-direction:column}
#contactPage .label{font-weight:700;color:#0f172a;margin-bottom:6px}
#contactPage .control,#contactPage .textarea{width:100%;box-sizing:border-box;font-size:16px;line-height:1.4;padding:12px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#0f172a}
#contactPage .textarea{min-height:160px;resize:vertical}
#contactPage .control:focus,#contactPage .textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
#contactPage .control::placeholder,#contactPage .textarea::placeholder{color:#94a3b8}
#contactPage .actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#contactPage .btn.primary{background:#2563eb;color:#fff;padding:12px 18px;border:none;border-radius:12px;box-shadow:0 8px 20px rgba(37,99,235,.25);font-weight:700}
#contactPage .btn.primary:hover{filter:brightness(.98)}
#contactPage .hint{margin:0;color:#64748b;font-size:14px}

/* ===== Auth (signup) ===== */
.auth.wrap{max-width:720px;margin:0 auto;padding:40px 16px 80px}
.auth h1{text-align:center;margin:0 0 6px}
.auth .p-subtitle{text-align:center;color:#64748b;margin:0 0 24px}
.auth .grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:720px){.auth .grid{grid-template-columns:1fr}}
.auth .span-2{grid-column:1 / -1}
.auth .field{display:flex;flex-direction:column}
.auth .label{font-weight:700;margin-bottom:6px}
.auth .control{padding:12px 14px;border:1px solid #cbd5e1;border-radius:12px;font-size:16px}
.auth .control:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.25)}
.auth .actions{display:flex;gap:12px;flex-wrap:wrap}
.auth .btn.primary{background:#2563eb;color:#fff;padding:12px 18px;border:none;border-radius:12px;font-weight:700;box-shadow:0 8px 20px rgba(37,99,235,.25)}
.auth .btn.alt{background:#0f172a;color:#fff;padding:12px 18px;border:none;border-radius:12px;font-weight:700}
.alert.error{background:#fee2e2;border:1px solid #fecaca;color:#7f1d1d;padding:10px 12px;border-radius:10px;margin:0 0 14px}
.alert.success{background:#dcfce7;border:1px solid #bbf7d0;color:#065f46;padding:10px 12px;border-radius:10px;margin:0 0 14px}