/* ============================================================
   CERTINOM.Sitio  –  certinom-sitio.css
   Variables CSS + estilos globales del sitio www.certinom.com
   Fuente: Plus Jakarta Sans (profesional, legible, corporativa)
   ============================================================ */

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

/* ── Variables modo claro ─────────────────────────────────── */
:root {
  --crs-pri:        #1a56db;
  --crs-pri-d:      #1240a8;
  --crs-pri-h:      #1e66ff;
  --crs-pri-s:      #eef4ff;
  --crs-pri-b:      #c3d9fd;
  --crs-teal:       #0891b2;
  --crs-green:      #059669;
  --crs-green-s:    #ecfdf5;
  --crs-warn:       #d97706;
  --crs-danger:     #dc2626;

  --crs-bg:         #f8fafc;
  --crs-surface:    #ffffff;
  --crs-surface2:   #f1f5f9;
  --crs-text:       #0f172a;
  --crs-text2:      #475569;
  --crs-text3:      #94a3b8;
  --crs-border:     #e2e8f0;
  --crs-border2:    #cbd5e1;

  --crs-sh-s: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --crs-sh:   0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --crs-sh-l: 0 20px 50px rgba(15,23,42,.12), 0 8px 20px rgba(15,23,42,.05);

  --crs-nav-h:  66px;
  --crs-r:      10px;
  --crs-rl:     16px;
  --crs-rxl:    22px;
  --crs-font:   'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Variables modo oscuro ────────────────────────────────── */
html.dark, body.dark {
  --crs-bg:       #0a0f1e;
  --crs-surface:  #111827;
  --crs-surface2: #1e2a3d;
  --crs-text:     #f1f5f9;
  --crs-text2:    #94a3b8;
  --crs-text3:    #475569;
  --crs-border:   #1e2a3d;
  --crs-border2:  #2d3f58;
  --crs-pri-s:    #0d1f3c;
  --crs-pri-b:    #1a3a6e;
  --crs-green-s:  #052e22;
  --crs-sh-s: 0 1px 3px rgba(0,0,0,.4);
  --crs-sh:   0 4px 16px rgba(0,0,0,.35);
  --crs-sh-l: 0 20px 50px rgba(0,0,0,.5);
}

/* ── Reset base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--crs-font);
  background: var(--crs-bg);
  color: var(--crs-text);
  overflow-x: hidden;
  transition: background .3s, color .3s;
  line-height: 1.6;
  font-size: 15px;
}

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--crs-font); }
p  { margin: 0; }
a  { color: var(--crs-pri); }

/* ── Utilidades compartidas ───────────────────────────────── */
.crs-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--crs-pri);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px;
  display: block;
}

.crs-btn-pri {
  height: 46px; padding: 0 26px; border-radius: 10px;
  background: var(--crs-pri); color: #fff;
  font-size: 15px; font-weight: 600; font-family: var(--crs-font);
  border: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(26,86,219,.3);
  transition: background .15s, transform .12s;
}
.crs-btn-pri:hover { background: var(--crs-pri-d); transform: translateY(-2px); }

.crs-btn-sec {
  height: 46px; padding: 0 22px; border-radius: 10px;
  background: var(--crs-surface); border: 1px solid var(--crs-border2);
  color: var(--crs-text); font-size: 15px; font-weight: 500;
  font-family: var(--crs-font); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s, transform .12s;
}
.crs-btn-sec:hover {
  background: var(--crs-surface2);
  border-color: var(--crs-pri);
  transform: translateY(-2px);
}

.crs-campo {
  display: grid; gap: 6px; margin-bottom: 15px;
}
.crs-campo label {
  font-size: 11px; font-weight: 700; color: var(--crs-text2);
  text-transform: uppercase; letter-spacing: .06em;
}
.crs-campo input,
.crs-campo select {
  width: 100%; height: 46px;
  border: 1.5px solid var(--crs-border2); border-radius: 10px;
  padding: 0 14px; font-size: 15px; font-family: var(--crs-font);
  background: var(--crs-surface2); color: var(--crs-text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.crs-campo input:focus,
.crs-campo select:focus {
  border-color: var(--crs-pri);
  box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}
.crs-campo .crs-hint {
  font-size: 11px; color: var(--crs-text3); margin-top: 3px;
}

.crs-divider {
  height: 1px; background: var(--crs-border); margin: 20px 0;
}

/* ── Toast ────────────────────────────────────────────────── */
.crs-toast-container {
  position: fixed; bottom: 24px; right: 20px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.crs-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--crs-surface); border: 1px solid var(--crs-border);
  box-shadow: var(--crs-sh-l); font-size: 13px; font-weight: 600;
  min-width: 260px; max-width: 360px;
  animation: crsToastIn .3s ease forwards;
}
.crs-toast.success { border-color: rgba(5,150,105,.3);  background: rgba(5,150,105,.07);  }
.crs-toast.error   { border-color: rgba(220,38,38,.3);  background: rgba(220,38,38,.07);  }
.crs-toast.warning { border-color: rgba(217,119,6,.3);  background: rgba(217,119,6,.07);  }
.crs-toast.info    { border-color: rgba(26,86,219,.25); background: rgba(26,86,219,.05);  }
@keyframes crsToastIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}

/* ── Animación de página ──────────────────────────────────── */
@keyframes crsFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.crs-fade-up { animation: crsFadeUp .4s ease both; }

/* ── Responsive helpers ───────────────────────────────────── */
@media (max-width: 900px) {
  .crs-hide-mobile { display: none !important; }
}
@media (max-width: 600px) {
  .crs-hide-small { display: none !important; }
}