/* ===============================
   Variables base
   =============================== */
:root{
  --ccb-red: #E50019;
  --ccb-red-dark: #8B0010;
  --ink: #111114;
  --muted: #6b7280;
  --bg: #f7f7f8;
  --white: #fff;
  --radius: 14px;
  --ring: 0 0 0 3px rgba(229,0,25,.18);
  --shadow-sm: 0 4px 10px rgba(16,24,40,.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
}

/* ===============================
   Reset & tipografía
   =============================== */
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
body{ font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.45; }
img{ max-width:100%; display:block; }
a{ color:var(--ccb-red); text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; box-shadow: var(--ring); border-color: var(--ccb-red); }

/* ===============================
   Layout contenedor
   =============================== */
.container{ max-width:1100px; margin:0 auto; padding: 18px 16px; }

/* Header minimal con NAT + título */
.header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee; }
.header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:8px 0; }
.header-left{ display:flex; align-items:center; gap:10px; }
.logo-nat{ height:40px; }
@media (min-width: 992px){ .logo-nat{ height:52px; } }

.header-title{
  font-weight:800; letter-spacing:-.01em; color:#1f2937;
  font-size:16px;
}
@media (min-width: 768px){ .header-title{ font-size:18px; } }

/* Hero: soporte de logos (CCB/Boost) */
.hero{ position:relative; color:#fff; text-align:center; overflow:hidden; min-height:260px; display:flex; align-items:center; justify-content:center; }
@media (min-width:768px){ .hero{ min-height:340px; } }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; filter: brightness(72%); }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(229,0,25,.81), rgba(139,0,16,.89)); mix-blend-mode:multiply; }
.hero-content{ position:relative; z-index:2; padding:32px 16px; }
.hero h1{ font-size:28px; font-weight:800; margin:8px 0; }
@media (min-width:768px){ .hero h1{ font-size:40px; } }

.hero-support{
  display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap;
  margin: 14px 0 8px;
}
.hero-support .item{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.28); padding:6px 10px; border-radius:999px; }
.hero-support .item span{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#000000; opacity:.9; font-weight:700; }
.hero-support img{ height:26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
@media (min-width:992px){ .hero-support img{ height:30px; } }

/* Botón volver en hero */
.btn-back{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:#E50019; padding:8px 16px; border-radius:999px;
  font-weight:800; border:1px solid rgba(255,255,255,.0); box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:.2s ease;
  margin-top:10px;
}
.btn-back:hover{ background:#E50019; color:#fff; }


/* Botón volver (cuando aplique) */
.btn-back{
  background:#fff; color:var(--ccb-red); padding:8px 14px; border-radius:999px;
  font-weight:700; border:1px solid #e5e7eb; box-shadow: var(--shadow-sm);
  transition: .2s ease;
}
.btn-back:hover{ background: var(--ccb-red); color:#fff; border-color: var(--ccb-red); }


/* ===============================
   Wizard
   =============================== */
.wizard{
  background:#fff; border:1px solid #eee; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.wizard-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 12px 16px; border-bottom:1px solid #f0f0f0;
}
.wizard-header strong{ font-size:15px; }

.progress{ height:8px; background:#f1f5f9; border-radius:999px; overflow:hidden; width: 45%; }
.progress>span{ display:block; height:100%; background: var(--ccb-red); width:0%; transition: width .25s ease; }

.step{ display:none; padding:18px; }
.step.active{ display:block; }

/* ===============================
   Grid helpers
   =============================== */
.grid{ display:grid; gap:14px; }
@media (min-width:768px){
  .grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}

/* ===============================
   Cards
   =============================== */
.card{
  background:#fff; border:1px solid #eee; border-radius: var(--radius); padding:16px;
  box-shadow: var(--shadow-sm);
}

/* ===============================
   Formularios (modernos)
   =============================== */
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-weight:700; font-size: 13.5px; color:#0f172a; }
.help{ font-size:12px; color:#71717a; }

input, select, textarea{
  font: inherit; background:#fff; color:#0f172a;
  padding: 12px 12px; border:1px solid #e5e7eb; border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{ min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder{ color:#9ca3af; }
input:focus, select:focus, textarea:focus{ border-color: var(--ccb-red); box-shadow: var(--ring); }
input[disabled], select[disabled], textarea[disabled]{ background:#f4f4f5; color:#a1a1aa; }

/* Grupos en columnas más densas en desktop */
@media (min-width: 992px){
  .field.inline-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
}

/* ===============================
   Escala Likert (chips)
   =============================== */
.likert{ display:flex; gap:8px; flex-wrap: wrap; }
.likert input{ display:none; }
.likert label{
  border:1px solid #e5e7eb; border-radius: 12px; padding: 8px 12px; cursor:pointer;
  background:#fff; min-width: 42px; text-align:center; font-weight:700; color:#334155;
  transition: .15s ease;
}
.likert input:checked + label{ border-color: var(--ccb-red); background: rgba(229,0,25,.08); color: var(--ccb-red-dark); }
.likert label:hover{ border-color:#d1d5db; }

/* ===============================
   Botones
   =============================== */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; font-weight: 800; transition: transform .04s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--ccb-red); color:#fff; box-shadow: 0 10px 20px rgba(229,0,25,.2);
}
.btn-primary:hover{ background: #d60017; }

.btn-outline{
  background:#fff; color:#111; border-color:#e5e7eb;
}
.btn-outline:hover{ border-color:#d1d5db; background:#fff; }

.btn-ghost{
  background: transparent; color: var(--ccb-red);
}
.btn-ghost:hover{ background: rgba(229,0,25,.06); }

/* Acciones del wizard */
.actions{
  display:flex; justify-content:space-between; gap:10px; padding: 14px 16px;
  border-top: 1px solid #f0f0f0; background:#fff; border-radius: 0 0 var(--radius) var(--radius);
}

/* ===============================
   Toast
   =============================== */
.toast{
  position:fixed; right:12px; bottom:12px; background:#111; color:#fff;
  padding:10px 14px; border-radius:10px; opacity:.95; display:none; z-index:60;
  box-shadow: var(--shadow-md);
}
.toast.show{ display:block; }

/* ===============================
   Footer
   =============================== */
.footer{ color:#6b7280; font-size:13px; padding:18px 0; }

/* ===============================
   Utilidades rápidas
   =============================== */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius: 999px; font-size:12px; font-weight:700;
  background: var(--ccb-red); color:#fff;
}
.hide{ display:none !important; }
.center{ text-align:center; }