/* ============================================================
   ComparApp — Sistema de diseño
   Basado en DESIGN.md: "The Intellectual Curator"
   Usado por: landing.html, index.html, ayuda.html
   ============================================================ */

/* ── FUENTES ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap');

/* ── VARIABLES ───────────────────────────────────────────── */
:root {
  /* Colores primarios */
  --primary:              #006c4b;
  --primary-container:    #00a676;
  --on-primary:           #ffffff;

  /* Superficies */
  --background:           #fbf9f2;
  --surface-low:          #f5f4ec;
  --surface-lowest:       #ffffff;
  --on-surface:           #1b1c17;

  /* Secundarios */
  --secondary-container:  #83f5c6;
  --outline-variant:      rgba(27,28,23,0.15);

  /* Alias para compatibilidad con código existente */
  --green:                #006c4b;
  --green-dark:           #004d35;
  --green-light:          #e8f5ef;
  --green-mid:            #83f5c6;
  --text:                 #1b1c17;
  --text-muted:           #4a4b46;
  --text-hint:            #8a8b86;
  --bg:                   #fbf9f2;
  --surface:              #ffffff;
  --border:               rgba(27,28,23,0.12);
  --border-mid:           rgba(27,28,23,0.2);
  --red:                  #c0392b;
  --orange:               #e67e22;
  --wa-green:             #25D366;

  /* Gradiente signature */
  --gradient-primary:     linear-gradient(135deg, #006c4b 0%, #00a676 100%);

  /* Sombras (tinted, no black) */
  --shadow-card:          0 12px 40px 0 rgba(27,28,23,0.06);
  --shadow-float:         0 4px 20px 0 rgba(27,28,23,0.08);

  /* Radios */
  --radius-sm:            4px;
  --radius-md:            12px;
  --radius:               16px;
  --radius-pill:          9999px;

  /* Tipografías */
  --font-serif:   'Newsreader', Georgia, serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-micro:   'Inter', sans-serif;
}

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

/* ── BASE ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--on-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── TIPOGRAFÍA ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--on-surface);
}
.title-md, .title-sm {
  font-family: var(--font-sans);
  font-weight: 600;
}
.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }
.micro { font-family: var(--font-micro); }

/* ── NAV ─────────────────────────────────────────────────── */
.ca-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,249,242,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0 clamp(16px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.ca-nav-logo {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--primary);
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.ca-nav-logo .badge-ia {
  font-family: var(--font-micro);
  font-size: 10px; font-weight: 600;
  background: var(--secondary-container);
  color: var(--primary);
  padding: 2px 8px; border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
}
.ca-nav-links {
  display: flex; gap: 28px; align-items: center;
}
.ca-nav-links a {
  font-family: var(--font-micro);
  font-size: 14px; font-weight: 400;
  color: var(--text-muted); text-decoration: none;
  transition: color .2s;
}
.ca-nav-links a:hover { color: var(--on-surface); }
.ca-nav-links .ca-btn-nav {
  background: var(--gradient-primary) !important;
  color: var(--on-primary) !important;
  padding: 9px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-micro) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-float);
  transition: opacity .2s, transform .15s !important;
}
.ca-nav-links .ca-btn-nav:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.ca-footer {
  background: var(--on-surface);
  color: rgba(251,249,242,0.5);
  padding: 56px clamp(16px, 5vw, 48px) 32px;
}
.ca-footer-top {
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 40px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ca-footer-brand { max-width: 260px; }
.ca-footer-logo {
  font-family: var(--font-serif);
  font-size: 22px; color: var(--on-primary);
  margin-bottom: 10px; display: block;
}
.ca-footer-tagline {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.7;
  font-weight: 300; color: rgba(251,249,242,0.45);
}
.ca-footer-links h4 {
  font-family: var(--font-micro);
  color: var(--on-primary); font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 14px;
}
.ca-footer-links ul { list-style: none; }
.ca-footer-links li { margin-bottom: 9px; }
.ca-footer-links a {
  font-family: var(--font-sans);
  color: rgba(251,249,242,0.4);
  text-decoration: none; font-size: 13px; font-weight: 300;
  transition: color .2s;
}
.ca-footer-links a:hover { color: var(--on-primary); }
.ca-social-links { display: flex; gap: 10px; margin-top: 18px; }
.ca-social-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: rgba(251,249,242,0.5);
  font-size: 12px; font-weight: 700;
  transition: background .2s, color .2s;
}
.ca-social-btn:hover { background: var(--primary-container); color: var(--on-primary); }
.ca-footer-bottom {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 8px;
}
.ca-footer-bottom p {
  font-size: 12px; font-weight: 300; font-family: var(--font-sans);
}
.ca-footer-bottom a {
  color: rgba(251,249,242,0.25);
  text-decoration: none; font-size: 12px;
}

/* ── BOTONES ─────────────────────────────────────────────── */
.ca-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px; border-radius: var(--radius-pill);
  font-family: var(--font-micro); font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; border: none; outline: none;
  transition: opacity .2s, transform .15s;
  letter-spacing: 0.2px;
}
.ca-btn:hover { transform: translateY(-1px); }
.ca-btn:active { transform: translateY(0); }

.ca-btn-primary {
  background: var(--gradient-primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-float);
}
.ca-btn-primary:hover { opacity: .9; }

.ca-btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid rgba(0,108,75,0.2);
  font-weight: 500;
}
.ca-btn-secondary:hover {
  border-color: rgba(0,108,75,0.4);
  background: rgba(0,108,75,0.04);
}

.ca-btn-ghost {
  background: transparent;
  color: var(--primary);
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── BADGES ──────────────────────────────────────────────── */
.ca-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--secondary-container);
  color: var(--primary);
  font-family: var(--font-micro);
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.ca-badge-ia {
  background: var(--secondary-container);
  color: var(--primary);
  font-family: var(--font-micro);
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
}
.ca-badge-promo {
  background: rgba(0,166,118,0.12);
  color: var(--primary);
  font-family: var(--font-micro);
  font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 4px;
}

/* ── CARDS ───────────────────────────────────────────────── */
.ca-card {
  background: var(--surface-lowest);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
}
.ca-card-win {
  outline: 2px solid var(--primary-container);
}

/* Feature icons */
.ca-feature-icon {
  width: 48px; height: 48px;
  background: var(--secondary-container);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── INPUTS ──────────────────────────────────────────────── */
.ca-input {
  width: 100%; padding: 13px 18px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
  font-family: var(--font-sans); font-size: 15px;
  color: var(--on-surface);
  outline: none;
  transition: box-shadow .2s;
}
.ca-input:focus {
  box-shadow: 0 0 0 2px var(--primary-container), var(--shadow-card);
}
.ca-input::placeholder { color: var(--text-hint); }

/* ── SECTION LABEL ───────────────────────────────────────── */
.ca-section-label {
  font-family: var(--font-micro);
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--primary-container); margin-bottom: 12px;
}

/* ── STATUS ──────────────────────────────────────────────── */
.ca-status-loading { color: var(--primary-container); }
.ca-status-error   { color: var(--red); }
.ca-status-warn    { color: var(--orange); }

/* ── UTILIDADES ──────────────────────────────────────────── */
.ca-text-muted   { color: var(--text-muted); }
.ca-text-hint    { color: var(--text-hint); }
.ca-text-green   { color: var(--primary); }
.ca-text-strike  { text-decoration: line-through; color: var(--text-hint); }
.ca-bg-low       { background: var(--surface-low); }
.ca-bg-surface   { background: var(--surface-lowest); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .ca-nav-hide-mobile { display: none; }
}