/* ===========================================================
   CEYS · SENSA — Pre-registro · Edición Mundial
   Diseño formal + mundialista (Argentina): celeste y blanco,
   tres estrellas, Sol de Mayo y dorado de copa. Sello CEYS.
   Símbolos genéricos (sin marcas FIFA/AFA).
   =========================================================== */

:root {
  /* Argentina */
  --celeste:   #74ACDF;
  --celeste-d: #4f93cf;
  --celeste-l: #eaf3fb;
  --gold:      #F4C20D;   /* sol / copa */
  --gold-d:    #d9a900;

  /* CEYS institucional */
  --blue:    #0067A5;
  --blue-d:  #004f7e;
  --green:   #4DAE46;
  --green-d: #3c8a37;
  --green-l: #eaf6e9;
  --green-deep: #15602a;

  --navy:  #0c2746;   /* secciones oscuras / texto fuerte */
  --ink:   #13243d;
  --ink-2: #45576f;
  --mute:  #7e8ca2;
  --paper: #ffffff;
  --mist:  #f4f8fc;
  --line:  #dde7f2;
  --err:   #d23a4b;

  --radius:   18px;
  --radius-sm: 12px;
  --shadow:    0 14px 38px -16px rgba(12,39,71,.28);
  --shadow-sm: 0 6px 18px -8px rgba(12,39,71,.22);

  --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans); color: var(--ink); background: var(--paper);
  line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--green-d); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.container { width: min(1180px, 92vw); margin-inline: auto; }

.display { font-family: var(--display); font-weight: 600; text-transform: uppercase; line-height: 1.1; letter-spacing: .5px;
  font-feature-settings: "case" 1; }
.stars { color: var(--gold); letter-spacing: 4px; font-size: 18px; }

/* Bandera celeste-blanco-celeste (acento fino) */
.flag-line { height: 5px; background: linear-gradient(180deg,
  var(--celeste) 0 34%, #fff 34% 66%, var(--celeste) 66% 100%); }

/* ---------------- Topbar ---------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .bar { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 16px; }
.topbar .logo img { height: 48px; display: block; }
.topbar nav { display: flex; gap: 6px; align-items: center; }
.nav-link { color: var(--ink); padding: 10px 14px; font-size: 14.5px; font-weight: 600; border-radius: 9px; }
.nav-link:hover { color: var(--green-d); background: var(--green-l); text-decoration: none; }

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer;
  border: none; border-radius: 999px; padding: 13px 26px; background: #fff; color: var(--green-d);
  border: 2px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .2s ease, background .2s, color .2s; }
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-gold { background: linear-gradient(180deg, #ffd23f, var(--gold)); color: #3a2d00; border-color: var(--gold-d); }
.btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); box-shadow: none; }
.btn-outline:hover { background: rgba(255,255,255,.14); }
.btn-block { width: 100%; }
.btn-lg { font-size: 16.5px; padding: 16px 32px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Hero ---------------- */
.hero { position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(900px 520px at 80% 6%, rgba(255,255,255,.18) 0%, transparent 60%),
    radial-gradient(1100px 700px at 78% -20%, #a9cef0 0%, transparent 55%),
    linear-gradient(157deg, #7fb3e3 0%, var(--celeste-d) 52%, var(--blue) 118%); }
/* Líneas de luz diagonales (profundidad tipo estadio) */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 58px, rgba(255,255,255,.045) 58px 60px); }
/* Sombra inferior para legibilidad + transición */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8,29,54,.28)); }
/* Sol de Mayo (rayos) */
.sun { position: absolute; top: -170px; right: -150px; width: 580px; height: 580px; opacity: .6; z-index: 1;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.0) 0deg 6.5deg, rgba(255,255,255,.5) 6.5deg 9deg);
  border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 27%, #000 28%);
  mask: radial-gradient(circle, transparent 27%, #000 28%); pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(244,194,13,.35)); }
.sun::after { content: ""; position: absolute; inset: 32%; border-radius: 50%;
  background: radial-gradient(circle, #ffe27a 0%, var(--gold) 62%, transparent 100%); }
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 54px; align-items: center;
  padding: 84px 0 96px; }
.kicker-stars { display: inline-flex; align-items: center; gap: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; color: #fff;
  background: rgba(12,39,71,.30); border: 1px solid rgba(255,255,255,.4);
  padding: 9px 18px; border-radius: 999px; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
.hero h1 { font-size: clamp(42px, 6.6vw, 82px); margin-bottom: 22px; letter-spacing: .5px;
  line-height: 1.12; text-shadow: 0 2px 12px rgba(8,30,55,.24); }
.hero h1 .gold { color: var(--gold); -webkit-text-stroke: 0; position: relative;
  text-shadow: 0 2px 0 rgba(120,84,0,.25), 0 0 30px rgba(244,194,13,.5); }
/* Marca "sensa": Poppins, en minúscula y compacta (como el logo) */
.brand-sensa { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-weight: 800;
  text-transform: lowercase; letter-spacing: -0.03em; }
.hero p.lead { font-size: 18.5px; color: #eef5fc; max-width: 46ch; margin-bottom: 14px; }
.hero p.lead b { color: #fff; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
/* Chips de confianza */
.hero-trust { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: 7px 14px; border-radius: 999px; }

/* Tarjeta trofeo */
.hero-card { position: relative; }
.hero-card::before { content: ""; position: absolute; inset: -14px; border-radius: 26px;
  background: conic-gradient(from 140deg, rgba(244,194,13,.55), rgba(255,255,255,.35), rgba(116,172,223,.5), rgba(244,194,13,.55));
  filter: blur(14px); opacity: .8; }
.trophy-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius); backdrop-filter: blur(10px);
  padding: 40px 30px; text-align: center; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.5); }
.trophy-card .cup { font-size: 86px; line-height: 1; filter: drop-shadow(0 10px 16px rgba(8,30,55,.4)); }
.trophy-card .three { font-size: 30px; letter-spacing: 8px; color: var(--gold); margin: 12px 0 4px;
  text-shadow: 0 2px 10px rgba(244,194,13,.5); }
.trophy-card h3 { font-family: var(--display); text-transform: uppercase; font-size: 36px; letter-spacing: 1px; }
.trophy-card p { color: #eef5fc; font-size: 14.5px; margin-top: 8px; }
.trophy-card .pill { display: inline-block; margin-top: 18px; background: #fff; color: var(--blue);
  font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* ---------------- Tira de features ---------------- */
.feature-bar { background: var(--navy); color: #fff; border-top: 4px solid var(--green); }
.feature-bar .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  text-align: center; padding: 22px 0; }
.feature-bar .f { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 10px; }
.feature-bar .f .ic { font-size: 24px; }
.feature-bar .f b { font-weight: 700; font-size: 15px; }
.feature-bar .f span { color: #aebfd4; font-size: 12.5px; }

/* ---------------- Section ---------------- */
.section { padding: 70px 0; }
.section.mist { background: var(--mist); }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .ey { font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--green-d); font-size: 13px; margin-bottom: 10px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); color: var(--navy); }
.section-head p { color: var(--ink-2); max-width: 56ch; margin: 12px auto 0; font-size: 16.5px; }

/* Pasos */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm); text-align: center; }
.step .n { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 26px; color: #fff;
  background: linear-gradient(160deg, var(--celeste) 0%, var(--green) 115%); box-shadow: var(--shadow-sm); }
.step h4 { font-size: 19px; color: var(--navy); margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 14.5px; }

/* ---------------- Planes ---------------- */
.plans-note { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center;
  gap: 11px; text-align: center; background: var(--green-l); border: 1.5px solid var(--green);
  border-radius: var(--radius-sm); padding: 13px 24px; max-width: 700px; margin: 0 auto 46px;
  font-size: 15px; font-weight: 500; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.plans-note .ic { font-size: 22px; flex: none; }
.plans-note b { color: var(--green-d); font-weight: 700; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { position: relative; cursor: pointer; display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 30px 26px; transition: transform .16s, box-shadow .16s, border-color .16s; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-weight: 700; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffd23f, var(--gold)); color: #3a2d00;
  border-radius: 999px; padding: 6px 16px; box-shadow: var(--shadow-sm); }
.plan .speed { font-family: var(--display); font-weight: 600; font-size: 60px; line-height: .9; color: var(--blue); }
.plan .speed small { font-size: 20px; color: var(--ink-2); }
.plan .pack { display: inline-block; align-self: flex-start; margin: 12px 0 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; font-size: 13.5px; color: var(--green-d);
  background: #eaf6e9; padding: 5px 14px; border-radius: 999px; }
.plan .price { font-family: var(--display); font-size: 34px; color: var(--ink); letter-spacing: .5px;
  margin-bottom: 18px; line-height: 1; }
.plan .price .cur { color: var(--green-d); font-size: 24px; vertical-align: 2px; }
.plan .price small { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--mute);
  letter-spacing: 0; text-transform: none; }
.plan ul { list-style: none; display: grid; gap: 12px; margin-bottom: 24px; }
.plan ul li { font-size: 15px; color: var(--ink-2); display: flex; gap: 10px; }
.plan ul li::before { content: "✓"; color: var(--green); font-weight: 800; }
.plan .pick { margin-top: auto; text-align: center; font-weight: 700; font-size: 15px; padding: 13px;
  border-radius: 999px; border: 2px solid var(--green); color: var(--green-d); background: #fff;
  transition: background .15s, color .15s; }
.plan.featured { border-color: var(--green); box-shadow: var(--shadow); }
.plan.featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  padding: 2px; background: linear-gradient(160deg, var(--green), var(--gold)); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.plan:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 3px #4dae4633, var(--shadow); }
.plan:has(input:checked) .pick { background: var(--green); color: #fff; border-color: var(--green); }
.plan:has(input:checked) .pick::before { content: "✓ "; }
.plan:has(input:checked)::after { content: "✓"; position: absolute; top: 18px; right: 20px; width: 34px; height: 34px;
  background: var(--green); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 800; box-shadow: var(--shadow-sm); }

/* ---------------- Formulario ---------------- */
.form-shell { display: grid; grid-template-columns: .92fr 1.08fr; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.form-aside { position: relative; color: #fff; padding: 46px 38px; overflow: hidden;
  background: linear-gradient(165deg, var(--green) 0%, var(--green-d) 100%); }
.form-aside .mini-sun { position: absolute; bottom: -120px; left: -90px; width: 320px; height: 320px; opacity: .25;
  background: repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(255,255,255,.5) 7deg 9deg);
  border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%); mask: radial-gradient(circle, transparent 30%, #000 31%); }
.form-aside > * { position: relative; z-index: 2; }
.form-aside h2 { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: 1.02; margin-bottom: 16px; }
.form-aside h2 .gold { color: var(--gold); }
.form-aside p { color: #eef9ef; font-size: 15px; margin-bottom: 28px; }
.form-aside .mini { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.form-aside .mini .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); font-size: 18px; }
.form-aside .mini b { display: block; font-size: 15px; }
.form-aside .mini span { color: #dcf2df; font-size: 13.5px; }

.form-body { padding: 44px 40px; }
.form-body .fh { font-family: var(--display); text-transform: uppercase; color: var(--navy); font-size: 26px; margin-bottom: 4px; }
.form-body .fsub { color: var(--ink-2); font-size: 14.5px; margin-bottom: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 14px; color: var(--navy); }
.field label .req { color: var(--err); }
.field .hint { font-size: 12.5px; color: var(--mute); }
.field input, .field select { font-family: var(--sans); font-size: 15px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; width: 100%;
  transition: border-color .15s, box-shadow .15s; }
.field input::placeholder { color: var(--mute); }
.field input:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(77,174,70,.28); }
.field input.invalid, .field select.invalid { border-color: var(--err); box-shadow: 0 0 0 4px #d23a4b2b; }
.field .error-msg { font-size: 12.5px; color: var(--err); font-weight: 600; display: none; }
.field.show-error .error-msg { display: block; }

.consent { margin-top: 8px; padding: 18px; border: 1.5px solid var(--green); border-radius: var(--radius-sm);
  background: var(--green-l); display: flex; gap: 14px; align-items: flex-start; }
.consent input[type=checkbox] { flex: none; width: 23px; height: 23px; margin-top: 1px; accent-color: var(--green); cursor: pointer; }
.consent label { font-size: 14px; color: var(--ink); cursor: pointer; }
.consent.show-error { border-color: var(--err); background: #fbe9eb; }

/* Aviso requisito (solo socios con Internet) */
.notice { display: flex; gap: 13px; align-items: flex-start; background: #fff7df; border: 1px solid #f0d27a;
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 24px; }
.notice .ic { font-size: 20px; line-height: 1.2; flex: none; }
.notice p { font-size: 13.5px; color: #6b5413; margin: 0; }
.notice p b { color: #5a4509; }
.field .hint b { color: var(--ink-2); }

/* Leyenda informativa (dónde encontrar los datos) */
.nota-info { display: flex; gap: 11px; align-items: flex-start; background: var(--celeste-l);
  border: 1px solid var(--celeste); border-radius: var(--radius-sm); padding: 12px 14px; margin: 2px 0 4px; }
.nota-info .ic { font-size: 18px; line-height: 1.2; flex: none; }
.nota-info p { font-size: 13px; color: var(--ink-2); margin: 0; }
.nota-info b { color: var(--blue-d); }

/* ---------------- Modal ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8,28,52,.62); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 80; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px;
  background: linear-gradient(160deg, var(--green-d), var(--green-deep)); color: #fff; }
.modal header h3 { font-family: var(--display); text-transform: uppercase; font-size: 22px; letter-spacing: .5px; }
.modal .close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; }
.modal .body { padding: 26px; overflow-y: auto; color: var(--ink-2); font-size: 14.5px; }
.modal .body h4 { color: var(--navy); margin: 20px 0 7px; font-size: 15px; }
.modal .body p, .modal .body li { margin-bottom: 9px; }
.modal .body ol, .modal .body ul { padding-left: 20px; }
.modal footer { padding: 18px 26px; border-top: 1px solid var(--line); display: flex; gap: 14px; justify-content: flex-end; }
.proximamente { text-align: center; padding: 26px 12px; }
.proximamente .px-ico { font-size: 48px; margin-bottom: 14px; line-height: 1; }
.proximamente h4 { font-family: var(--display); text-transform: uppercase; color: var(--green-d);
  font-size: 28px; letter-spacing: .5px; margin-bottom: 12px; }
.proximamente p { color: var(--ink-2); font-size: 15.5px; max-width: 44ch; margin: 0 auto; }

/* ---------------- Descargas (links de la app) ---------------- */
.descargas { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; }
.descargas a { display: inline-flex; align-items: center; gap: 11px; background: var(--ink); color: #fff;
  border-radius: 13px; padding: 11px 20px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease; }
.descargas a:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.descargas a .ic { display: inline-flex; align-items: center; line-height: 1; }
.descargas a .ic svg { display: block; width: 22px; height: 22px; }
.descargas a .txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.descargas a .txt small { font-size: 10.5px; opacity: .82; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.descargas a .txt b { font-size: 15px; font-weight: 700; }
.descargas a.web { background: var(--green); }
@media (max-width: 480px) { .descargas { flex-direction: column; align-items: stretch; } .descargas a { justify-content: center; } }

/* ---------------- Footer ---------------- */
.footer { background:
    radial-gradient(820px 360px at 12% -20%, rgba(255,255,255,.16) 0%, transparent 58%),
    linear-gradient(105deg, #54bd4d 0%, var(--green-d) 50%, var(--green-deep) 100%);
  color: #eef9ef; padding: 0; }
.footer .inner { padding: 40px 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .credit { border-top: 1px solid rgba(255,255,255,.22); padding: 16px 0 30px; text-align: center;
  font-size: 12.5px; color: #d3edd7; }
.footer .credit a { color: #fff; font-weight: 700; }
.footer .credit a:hover { color: var(--gold); }
.footer .logo-chip { background: #fff; padding: 14px 18px; border-radius: var(--radius-sm); }
.footer .logo-chip img { height: 46px; display: block; }
.footer .meta { font-size: 13.5px; text-align: right; line-height: 1.7; }
.footer .meta a { color: #fff; }
.footer .meta .stars { display: block; margin-bottom: 4px; }

/* ---------------- Toast ---------------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow);
  font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 90; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--err); }
.toast.ok { background: var(--green-d); }

/* ---------------- Gracias ---------------- */
.thanks-hero { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 80px 0 70px;
  background: linear-gradient(160deg, var(--celeste) 0%, var(--celeste-d) 60%, var(--blue) 130%); }
.thanks-hero .sun { opacity: .45; }
.thanks-hero .container { position: relative; z-index: 2; }
.thanks-hero .check { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 26px;
  background: var(--green); color: #fff; display: grid; place-items: center; font-size: 52px; font-weight: 800;
  border: 5px solid #fff; box-shadow: var(--shadow); }
.thanks-hero h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(38px, 6.5vw, 66px); margin-bottom: 12px; }
.thanks-hero p { color: #eaf3fb; max-width: 52ch; margin: 0 auto; font-size: 16.5px; }
.summary { max-width: 520px; margin: -44px auto 0; position: relative; z-index: 5; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.summary .row { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.summary .row:last-child { border-bottom: none; }
.summary .row span { color: var(--mute); font-weight: 600; }
.summary .row b { color: var(--ink); text-align: right; }

/* ===========================================================
   PANEL DEL OPERARIO
   =========================================================== */
.admin-body { background: var(--mist); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; position: relative; overflow: hidden;
  background: radial-gradient(900px 600px at 50% -10%, #bfe6c5 0%, transparent 55%), linear-gradient(160deg, var(--green), var(--green-deep)); }
.login-card { width: min(420px, 100%); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px 34px; text-align: center; position: relative; z-index: 2; }
.login-card img { height: 48px; margin-bottom: 22px; }
.login-card h1 { font-family: var(--display); text-transform: uppercase; font-size: 28px; color: var(--navy); margin-bottom: 6px; }
.login-card p { color: var(--ink-2); font-size: 14px; margin-bottom: 24px; }
.login-card .field { text-align: left; margin-bottom: 16px; }
.login-card .demo-hint { font-size: 12.5px; color: var(--mute); margin-top: 14px; }

.admin-header { background: #fff; border-bottom: 1px solid var(--line); padding: 0; position: sticky; top: 0; z-index: 30; }
.admin-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.admin-header img { height: 42px; }
.admin-main { padding: 34px 0 70px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 24px; }
.stat .label { font-size: 12.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-bottom: 6px; }
.stat .value { font-family: var(--display); font-size: 46px; line-height: 1; color: var(--navy); }
.stat.is-total { background: linear-gradient(160deg, var(--green-d), var(--green-deep)); border: none; } .stat.is-total .label { color: #c7e6cc; } .stat.is-total .value { color: #fff; }
.stat.is-green { background: linear-gradient(160deg, var(--green), var(--green-d)); border: none; } .stat.is-green .label { color: #e1f5df; } .stat.is-green .value { color: #fff; }

.toolbar { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; align-items: stretch; }
.toolbar .search { flex: 1; min-width: 240px; display: flex; }
.toolbar input, .toolbar select { font-family: var(--sans); font-size: 15px; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 12px 18px; background: #fff; color: var(--ink); width: 100%; }
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(77,174,70,.28); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 920px; }
table.data th, table.data td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th { background: var(--green-deep); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; }
table.data tbody tr:nth-child(even) { background: var(--mist); }
table.data tbody tr:hover { background: var(--green-l); }
table.data .plan-tag { font-weight: 700; font-size: 12px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: var(--green-l); color: var(--green-d); }
.badge-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--green); padding: 4px 12px; border-radius: 999px; }
.row-actions button { background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.row-actions button:hover { background: var(--err); color: #fff; border-color: var(--err); }
.empty-state { text-align: center; padding: 70px 20px; color: var(--mute); }
.empty-state .ico { font-size: 50px; margin-bottom: 14px; }
.consent-detail { font-size: 11.5px; color: var(--mute); margin-top: 3px; }

/* --- Multioperario / trazabilidad --- */
.op-info { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.gest-hist { max-height: 170px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.gest-hist .h { padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.gest-hist .h:last-child { border-bottom: none; }
.gest-hist .h b { color: var(--ink); }
.gest-hist .h .meta { color: var(--mute); font-size: 11.5px; margin-top: 2px; }
.ops-list .op { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 9px; }
.ops-list .op .info b { color: var(--ink); }
.ops-list .op .info .meta { color: var(--mute); font-size: 12px; margin-top: 2px; }
.ops-list .badge-rol { font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--green-l);
  color: var(--green-d); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.ops-list .op .acts { display: flex; gap: 6px; flex: none; }
.ops-list .op .acts button { background: #fff; border: 1.5px solid var(--line); color: var(--ink-2);
  border-radius: 8px; padding: 6px 11px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.ops-list .op .acts button.del:hover { background: var(--err); color: #fff; border-color: var(--err); }

/* Paginación */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.pager .btn { padding: 9px 16px; font-size: 13.5px; }
.pager .btn:disabled { opacity: .45; cursor: not-allowed; }
.pager .page-info { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }

/* Reportes */
.rep-totales { background: var(--green-l); border: 1px solid var(--green); border-radius: 10px;
  padding: 12px 15px; margin-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.rep-totales b { color: var(--green-d); }

/* Seguimiento "volver a llamar" + DNI duplicado */
.seg-alerta { background: #fff7df; border: 1px solid #e6b800; color: #7a5b00; border-radius: 10px;
  padding: 11px 15px; margin-bottom: 14px; font-weight: 600; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; }
.seg-alerta:hover { background: #fff0c2; }
.row-seg { font-size: 11.5px; font-weight: 700; margin-top: 4px; }
.row-seg.venc { color: var(--err); }
.row-seg.ok { color: var(--ink-2); }
.badge-dup { display: inline-block; font-size: 11px; font-weight: 700; color: #b02a37; background: #fbe9eb;
  border: 1px solid #d23a4b; border-radius: 6px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }

/* Asignación de contactos */
.asig-box { display: flex; flex-direction: column; gap: 10px; }
.asig-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#asigOwnerWrap { display: inline-flex; gap: 8px; align-items: center; }
#asigSelect { font-family: var(--sans); font-size: 14px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 8px 12px; background: #fff; color: var(--ink); }
.sub-asig { font-size: 11.5px; font-weight: 700; color: var(--blue-d); margin-top: 3px; }

/* Gráficos de métricas */
.met-bars .bar { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13px; }
.met-bars .bar .lbl { width: 92px; flex: none; color: var(--ink-2); }
.met-bars .bar .track { flex: 1; background: var(--mist); border-radius: 6px; height: 16px; overflow: hidden; }
.met-bars .bar .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green-d)); }
.met-bars .bar .val { width: 38px; flex: none; text-align: right; font-weight: 700; color: var(--ink); }

/* Tablas dentro de modales (auditoría, reportes): que entren en el ancho del modal */
.modal table.data { min-width: 0; font-size: 13px; }
.modal table.data th, .modal table.data td { white-space: normal; }
.modal .table-wrap { box-shadow: none; }

/* --- Gestión de contactos (panel) --- */
.stat.is-amber { background: linear-gradient(160deg, #f8b733, #e09600); border: none; }
.stat.is-amber .label { color: #5a4509; } .stat.is-amber .value { color: #3a2c00; }

.sub-sumi { font-size: 11.5px; color: var(--mute); margin-top: 2px; }

.est-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; border: 1.5px solid; white-space: nowrap; }
.est-nuevo       { color: #0067A5; background: #e6f1f8; border-color: #0067A5; }
.est-llamado     { color: #3a6ea5; background: #eaf3fb; border-color: #74ACDF; }
.est-no_contesta { color: #8a6100; background: #fff7df; border-color: #e6b800; }
.est-contratado  { color: #2f7d2f; background: #eaf6e9; border-color: #4DAE46; }
.est-no_interesa { color: #b02a37; background: #fbe9eb; border-color: #d23a4b; }
.mini-motivo { font-size: 11.5px; color: var(--mute); margin-top: 4px; max-width: 220px;
  white-space: normal; font-style: italic; }
tr.fila-nueva { box-shadow: inset 4px 0 0 var(--gold); }

/* Celda de acciones */
.acc-cell { display: flex; gap: 8px; align-items: center; }
.qa-wa { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 9px;
  text-decoration: none; font-size: 16px; background: #e7f7ec; border: 1.5px solid #4DAE46; }
.qa-wa:hover { background: #4DAE46; text-decoration: none; }
.qa-gest { background: var(--green); color: #fff; border: none; border-radius: 9px; padding: 8px 14px;
  font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.qa-gest:hover { background: var(--green-d); }

/* Modal gestión */
.gest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 20px; }
.gest-grid > div { display: flex; flex-direction: column; gap: 2px; }
.gest-grid > div.full { grid-column: 1 / -1; }
.gest-grid span { font-size: 11.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.gest-grid b { font-size: 14.5px; color: var(--ink); }
.gest-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.gest-actions .btn { padding: 11px 18px; font-size: 14px; }
.gest-field { margin-bottom: 16px; }
.gest-field label { display: block; font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 7px; }
.gest-field select, .gest-field textarea { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.gest-field textarea { resize: vertical; min-height: 80px; }
.gest-field select:focus, .gest-field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(77,174,70,.28); }
.gest-updated { font-size: 12.5px; color: var(--mute); }
.btn-danger { color: var(--err); border-color: #f3c0c6; }
.btn-danger:hover { background: var(--err); color: #fff; border-color: var(--err); }

@media (max-width: 720px) {
  .acc-cell { justify-content: flex-end; }
  .gest-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   RESPONSIVE — Mobile-first prolijo
   =========================================================== */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 52px 0 60px; }
  .steps3, .plans { grid-template-columns: 1fr; }
  .form-shell { grid-template-columns: 1fr; }
  .feature-bar .grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 52px 0; }
}

/* ---- Celular ---- */
@media (max-width: 600px) {
  .container { width: 90vw; }

  /* Topbar compacta */
  .topbar .bar { height: 62px; }
  .topbar .logo img { height: 36px; }
  .topbar nav .nav-link { display: none; }
  .topbar nav .btn { padding: 9px 14px; font-size: 12.5px; }

  /* Hero */
  .hero-grid { padding: 40px 0 50px; gap: 30px; }
  .hero h1 { font-size: 40px; line-height: 1.14; }
  .hero p.lead { font-size: 16px; max-width: none; }
  .kicker-stars { font-size: 12px; padding: 8px 14px; margin-bottom: 20px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; }                 /* botones full-width = fáciles de tocar */
  .hero-trust { gap: 8px; margin-top: 22px; }
  .hero-trust span { font-size: 12.5px; padding: 6px 12px; }
  .trophy-card { padding: 30px 22px; }
  .trophy-card .cup { font-size: 70px; }
  .trophy-card h3 { font-size: 30px; }
  .hero-card::before { inset: -8px; }

  /* Tira de features 2x2 */
  .feature-bar .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 0; }
  .feature-bar .f .ic { font-size: 22px; }

  /* Secciones */
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head p { font-size: 15px; }
  .step { padding: 24px 20px; }

  /* Planes */
  .plan { padding: 26px 22px; }
  .plan .speed { font-size: 54px; }
  .plan .ribbon { font-size: 11.5px; }

  /* Formulario */
  .form-shell { margin-top: 38px !important; border-radius: 14px; }
  .form-aside { padding: 30px 24px; }
  .form-aside h2 { font-size: 34px; }
  .form-aside .mini { margin-bottom: 14px; }
  .form-body { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-body .fh { font-size: 23px; }
  /* inputs a 16px: evita el zoom automático de iOS al tocar el campo */
  .field input, .field select { font-size: 16px; padding: 14px 15px; }
  .consent { padding: 16px; }
  .btn-lg { font-size: 16px; padding: 16px 24px; }

  /* Modal a pantalla casi completa */
  .modal { max-height: 92vh; border-radius: 14px; }
  .modal header { padding: 18px 20px; }
  .modal .body { padding: 20px; }
  .modal footer { padding: 16px 20px; flex-direction: column-reverse; }
  .modal footer .btn { width: 100%; }

  /* Gracias */
  .thanks-hero { padding: 56px 0 60px; }
  .summary { margin: -36px 18px 0; }

  /* Footer */
  .footer .inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 34px 0; }
  .footer .meta { text-align: left; }

  /* Toast más angosto */
  .toast { width: calc(100% - 32px); text-align: center; }
}

/* ---- Panel del operario en celular: la tabla se convierte en tarjetas ---- */
@media (max-width: 720px) {
  .admin-header .bar { padding: 12px 0; }
  .admin-header img { height: 34px; }
  .admin-main { padding: 24px 0 50px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px 18px; }
  .stat .value { font-size: 38px; }
  .toolbar { flex-direction: column; }
  .toolbar .search { min-width: 0; }
  .toolbar input, .toolbar select, .toolbar .btn { width: 100%; }

  .table-wrap { overflow: visible; border: none; box-shadow: none; background: transparent; }
  table.data { min-width: 0; }
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; }
  table.data tr { background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden; }
  table.data tr:nth-child(even) { background: #fff; }
  table.data td { display: flex; justify-content: space-between; align-items: center; gap: 16px;
    text-align: right; white-space: normal; padding: 11px 16px; border-bottom: 1px solid var(--line); }
  table.data td:last-child { border-bottom: none; }
  table.data td::before { content: attr(data-label); font-weight: 700; color: var(--mute);
    text-transform: uppercase; font-size: 11px; letter-spacing: .5px; text-align: left; flex: none; }
  table.data td .consent-detail { text-align: right; }
  .row-actions button { width: 100%; padding: 10px; }
  table.data td.row-actions { justify-content: stretch; }
  table.data td.row-actions::before { content: none; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 35px; }
  .plan .speed { font-size: 48px; }
}