/* RADAR MARKETIZADOS · Web pública
   Paleta: pino tinta #12332C · papel #F2F5F3 · señal #1E9E6A · ámbar #C98A2B */

:root {
  --pino: #12332C;
  --pino-oscuro: #0C241F;
  --papel: #F2F5F3;
  --tinta: #22312B;
  --apagado: #68776F;
  --linea: #DDE5E0;
  --senal: #1E9E6A;
  --senal-clara: #4ADE97;
  --ambar: #C98A2B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.6;
  font-size: 16px;
}

.contenedor { max-width: 1060px; margin: 0 auto; padding: 0 22px; }
a { color: var(--senal); }
h1, h2, h3 { color: var(--pino); letter-spacing: -0.3px; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--pino); }
.cabecera-int { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.marca { color: #fff; font-weight: 800; letter-spacing: 4px; display: flex; align-items: center; gap: 10px; font-size: 17px; }
.cabecera-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cabecera-nav a { color: #C4D6CC; text-decoration: none; font-size: 14px; }
.cabecera-nav a:hover { color: #fff; }
.btn-nav { background: var(--senal); color: #fff !important; padding: 8px 16px; border-radius: 8px; font-weight: 600; }

.radar-dot { width: 11px; height: 11px; background: var(--senal-clara); border-radius: 50%; position: relative; flex-shrink: 0; }
.radar-dot::after {
  content: ""; position: absolute; inset: -5px;
  border: 2px solid rgba(74, 222, 151, .5); border-radius: 50%;
  animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--pino) 0%, var(--pino-oscuro) 75%); color: #DCE9E2; padding: 70px 0 80px; }
.hero-int { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.eyebrow { font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--senal-clara); margin-bottom: 16px; }
.hero h1 { color: #fff; font-size: 42px; line-height: 1.15; margin: 0 0 18px; }
.hero-sub { font-size: 17px; color: #B9CFC4; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-datos { margin-top: 26px; font-size: 14px; color: #8FB3A3; }
.hero-datos b { color: var(--senal-clara); }

/* El radar (elemento firma) */
.hero-radar { display: flex; justify-content: center; }
.radar {
  width: 300px; height: 300px; border-radius: 50%; position: relative;
  background: radial-gradient(circle, rgba(30,158,106,.16) 0%, rgba(12,36,31,.4) 70%);
  border: 1px solid rgba(74,222,151,.35);
  overflow: hidden;
}
.radar::before, .radar::after {
  content: ""; position: absolute; background: rgba(74,222,151,.18);
}
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar-anillo { position: absolute; border: 1px solid rgba(74,222,151,.25); border-radius: 50%; }
.radar-anillo.a1 { inset: 18%; }
.radar-anillo.a2 { inset: 33%; }
.radar-anillo.a3 { inset: 44%; }
.radar-barrido {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(74,222,151,.55) 0deg, rgba(74,222,151,.12) 55deg, transparent 90deg, transparent 360deg);
  animation: barrido 4.5s linear infinite;
}
@keyframes barrido { to { transform: rotate(360deg); } }
.blip {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--senal-clara); box-shadow: 0 0 10px rgba(74,222,151,.9);
  animation: blipear 4.5s ease-out infinite;
}
.blip.b1 { top: 28%; left: 62%; animation-delay: .9s; }
.blip.b2 { top: 58%; left: 30%; animation-delay: 2.3s; }
.blip.b3 { top: 70%; left: 66%; animation-delay: 3.4s; }
@keyframes blipear { 0%, 12% { opacity: 1; } 55% { opacity: .15; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .radar-barrido, .blip, .radar-dot::after { animation: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 9px;
  padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.btn-primario { background: var(--senal); color: #fff; }
.btn-primario:hover { background: #188A5B; }
.btn-fantasma { background: transparent; color: #DCE9E2; border-color: rgba(220,233,226,.4); }
.btn-fantasma:hover { border-color: #fff; color: #fff; }
.btn-ancho { width: 100%; margin-top: 18px; }

/* ---------- Secciones ---------- */
.seccion { padding: 64px 0; }
.seccion h2 { font-size: 30px; margin: 0 0 30px; }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.paso { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 26px 24px; }
.paso-icono { font-size: 30px; }
.paso h3 { font-size: 17px; margin: 12px 0 8px; }
.paso p { font-size: 14px; color: var(--apagado); margin: 0; }

/* ---------- Alta ---------- */
.seccion-alta { background: #E7EEEA; }
.alta-int { display: grid; grid-template-columns: .9fr 1.1fr; gap: 46px; align-items: start; }
.alta-texto p { color: var(--apagado); }
.alta-form { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 28px; }
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 5px; color: var(--pino); }
.opcional { color: var(--apagado); font-weight: 400; }
input[type="text"], input[type="email"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--linea); border-radius: 9px;
  font-size: 15px; font-family: inherit;
}
input:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--senal); outline-offset: 1px; }

.sectores-caja { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px 14px; margin-top: 16px; }
.sectores-caja legend { font-size: 13px; font-weight: 700; color: var(--pino); padding: 0 6px; }
.sector-check { display: inline-flex; align-items: center; gap: 6px; margin: 4px 10px 4px 0; font-weight: 400; font-size: 14px; cursor: pointer; }
.sector-check input { width: auto; }
.legal { font-size: 12px; color: var(--apagado); margin-top: 12px; text-align: center; }

.aviso { padding: 13px 16px; border-radius: 9px; margin-bottom: 16px; font-size: 14px; }
.aviso-ok { background: #E1F4E8; color: #14532D; border: 1px solid #BBE3CC; }
.aviso-error { background: #F9E4E4; color: #B32B2B; border: 1px solid #EFC7C7; }

/* ---------- Archivo ---------- */
.lista-boletines { list-style: none; padding: 0; }
.lista-boletines li { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lista-boletines a { font-weight: 600; text-decoration: none; color: var(--pino); }
.lista-boletines a:hover { color: var(--senal); }
.apagado-pub { color: var(--apagado); font-size: 13px; }

/* ---------- Pie ---------- */
.pie { background: var(--pino-oscuro); color: #8FB3A3; padding: 40px 0; font-size: 13px; }
.pie-int { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.marca-pie { margin-bottom: 10px; }
.pie a { color: #C4D6CC; }
.pie-enlaces { display: flex; flex-direction: column; gap: 8px; text-align: right; }

/* ---------- Páginas simples (confirmar / baja) ---------- */
.pagina-simple {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(160deg, var(--pino) 0%, var(--pino-oscuro) 70%);
}
.caja-simple {
  background: #fff; border-radius: 16px; padding: 44px 40px; text-align: center;
  max-width: 440px; margin: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.caja-icono { font-size: 44px; }
.caja-simple h1 { font-size: 24px; margin: 14px 0 10px; }
.caja-simple p { color: var(--apagado); margin-bottom: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-int, .alta-int { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .hero-radar { order: -1; }
  .radar { width: 220px; height: 220px; }
  .pasos { grid-template-columns: 1fr; }
  .pie-enlaces { text-align: left; }
}