/* ── Barra superior: logo azul sobre blanco (uso principal del manual) ── */
.topbar{background:#fff;position:relative;z-index:2}
.topbar .in{max-width:1080px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar .logo{width:190px}
.toplink{display:inline-flex;align-items:center;gap:8px;color:var(--space);font-weight:700;font-size:14.5px;text-decoration:none;border:1.5px solid var(--space-20);border-radius:999px;padding:8px 16px;transition:border-color .15s,background .15s}
.toplink:hover{border-color:var(--space);background:var(--space-05)}

/* ── Cabecera institucional ── */
.hero{background:var(--space);color:#fff;position:relative;overflow:hidden;padding:56px 24px 124px}
/* Globo estilizado como motivo decorativo (permitido por el manual: sin girar ni deformar) */
.hero::before{content:"";position:absolute;width:560px;height:560px;right:-150px;top:-120px;background:url(/shared/brand/isotipo-blanco.png) center/contain no-repeat;opacity:.07}
.hero .dots{right:6%;bottom:58px;width:180px;height:120px}
.hero .dots .d1{width:46px;height:46px;left:0;top:30px}
.hero .dots .d2{width:22px;height:22px;left:70px;top:0}
.hero .dots .d3{width:34px;height:34px;left:104px;top:56px}
.hero .dots .d4{width:16px;height:16px;left:58px;top:88px}
.hero .in{max-width:880px;margin:0 auto;position:relative}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sea)}
.hero h1{font-weight:300;font-size:clamp(32px,5vw,48px);line-height:1.1;margin:10px 0 14px;letter-spacing:-.01em}
.hero h1 b{font-weight:900}
.hero p{margin:0;max-width:640px;color:#cfd6ef;font-size:16.5px}
.assure{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:26px 0 0;padding:0}
.assure li{display:flex;align-items:center;gap:8px;font-size:14px;color:#e6ebfa}
.assure svg{flex:none}

/* ── Contenedor y progreso ── */
.wrap{max-width:880px;margin:-84px auto 0;padding:0 16px 56px;position:relative;z-index:2}
.progress{background:var(--card);border-radius:14px;box-shadow:0 12px 32px rgba(0,24,113,.14);padding:16px 20px 14px}
.bar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.bar span{height:6px;border-radius:3px;background:#e7eaf1;position:relative;overflow:hidden}
.bar span::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.bar span:nth-child(1){--c:var(--space)} .bar span:nth-child(2){--c:var(--magenta)} .bar span:nth-child(3){--c:var(--sea)}
.bar span:nth-child(4){--c:var(--orange)} .bar span:nth-child(5){--c:var(--sky)} .bar span:nth-child(6){--c:var(--space-80)}
.bar span.done::after,.bar span.on::after{transform:scaleX(1)}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;list-style:none;margin:0;padding:0}
.steps li{font-size:13px;color:var(--grey);display:flex;align-items:center;gap:7px;min-width:0}
.steps li b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;border:1.5px solid #cfd5e2;color:var(--muted)}
.steps li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li.on{color:var(--space);font-weight:700}
.steps li.on b{background:var(--space);border-color:var(--space);color:#fff}
.steps li.done b{background:var(--sea);border-color:var(--sea);color:#fff}
.steps li.done{color:var(--ink)}

/* ── Tarjeta del formulario ── */
.card{background:var(--card);border-radius:14px;margin-top:18px;padding:36px 40px 36px;box-shadow:0 1px 3px rgba(0,24,113,.07);position:relative;overflow:hidden}
.card h2{font-size:30px;font-weight:300;color:var(--space);margin:0 0 6px;line-height:1.2}
.card h2 b{font-weight:700}
.card .lead{color:var(--muted);margin:0 0 28px;max-width:66ch}
.panel{display:none}
.panel.on{display:block;animation:in .28s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.field{margin-bottom:24px}
.label{display:block;font-weight:700;font-size:15px;margin-bottom:5px;color:var(--ink)}
.req{color:var(--orange);margin-left:3px}
.hint{display:block;font-size:13.5px;color:var(--muted);margin:0 0 10px;max-width:70ch}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{
  width:100%;border:1.5px solid #cdd3df;border-radius:10px;padding:12px 14px;background:#fff;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#9aa1b1}
textarea{min-height:130px;resize:vertical}
textarea.short{min-height:96px}
input:hover,textarea:hover{border-color:#b6bed0}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(0,169,206,.2)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.count{display:block;text-align:right;font-size:12px;color:var(--grey);margin-top:4px;min-height:1em}

/* Opciones tipo tarjeta, con ícono en los colores de la marca */
.choices{display:grid;gap:10px}
.choice{display:flex;gap:16px;align-items:center;text-align:left;width:100%;background:#fff;border:1.5px solid #d9deea;border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.choice:hover{border-color:var(--sky);box-shadow:0 4px 14px rgba(0,24,113,.06)}
.choice .ico{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.ico.c-space{background:var(--space-20);color:var(--space)} .ico.c-magenta{background:var(--magenta-20);color:var(--magenta)}
.ico.c-sea{background:var(--sea-20);color:#008b82} .ico.c-orange{background:var(--orange-20);color:#b56a00} .ico.c-sky{background:var(--sky-20);color:#00809c}
.choice .txt{flex:1;min-width:0}
.choice strong{display:block;font-size:15.5px;color:var(--ink)}
.choice small{display:block;color:var(--muted);font-size:14px;margin-top:2px;line-height:1.45}
.choice .dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #b7bfce;position:relative;transition:border-color .15s}
.choice[aria-checked=true]{border-color:var(--space);background:var(--space-05)}
.choice[aria-checked=true] .dot{border-color:var(--space);background:var(--space)}
.choice[aria-checked=true] .dot::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.choice:focus-visible,.pill:focus-visible,.btn:focus-visible,.drop:focus-visible,.toplink:focus-visible{outline:3px solid rgba(0,169,206,.45);outline-offset:2px}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1.5px solid #cdd3df;background:#fff;border-radius:999px;padding:10px 22px;font-weight:700;cursor:pointer;transition:all .15s;color:var(--ink)}
.pill:hover{border-color:var(--sky)}
.pill[aria-checked=true]{background:var(--space);border-color:var(--space);color:#fff}

.reveal{border-left:3px solid var(--sea);padding:18px 0 2px 22px;margin:4px 0 24px;display:none}
.reveal.on{display:block;animation:in .28s ease}

/* Archivos */
.drop{border:1.5px dashed #b9c1d1;border-radius:12px;padding:26px;text-align:center;cursor:pointer;background:var(--space-05);transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--sky);background:#eef9fc}
.drop svg{display:block;margin:0 auto 8px;color:var(--sky)}
.drop b{color:var(--space)}
.drop small{display:block;color:var(--muted);margin-top:4px}
.files{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.files li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:14px}
.files li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files button{border:0;background:none;color:var(--magenta);font-weight:700;cursor:pointer}

.note{display:flex;gap:12px;background:#ebf9f8;border-radius:12px;padding:14px 16px;font-size:14px;color:#17504c;margin-bottom:24px}
.note.warn{background:#fff5e6;color:#6b4100}
.note svg{flex:none;margin-top:2px}
details.info{border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:10px;padding:0 18px;margin-bottom:28px;background:#fbfcfe}
details.info summary{cursor:pointer;font-weight:700;padding:14px 0;color:var(--space)}
details.info p{margin:0 0 14px;color:var(--muted);font-size:14.5px}

.error{display:none;color:var(--magenta);font-size:13.5px;margin-top:6px;font-weight:700}
.field.bad .error{display:block}
.field.bad input,.field.bad textarea{border-color:var(--magenta)}
.field.bad .choice,.field.bad .pill{border-color:var(--magenta)}

/* Campo trampa anti-bots: invisible para personas y lectores de pantalla */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Revisión */
.review{display:grid;gap:14px}
.review section{border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.review header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.review h3{margin:0;font-size:16px;color:var(--space)}
.review header button{border:0;background:none;color:var(--sky);font-weight:700;cursor:pointer}
.review dl{margin:0;display:grid;grid-template-columns:200px 1fr;gap:6px 16px;font-size:14.5px}
.review dt{color:var(--muted)}
.review dd{margin:0;white-space:pre-wrap;word-break:break-word}

/* Navegación */
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px}
.btn{border:0;border-radius:10px;padding:13px 30px;font-weight:700;cursor:pointer;font-size:15.5px;transition:background .15s,opacity .15s,border-color .15s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn.ghost{background:#fff;border:1.5px solid #cdd3df;color:var(--space)}
.btn.ghost:hover:not(:disabled){border-color:var(--space)}
.btn.ghost:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--space);color:#fff}
.btn.primary:hover{background:var(--space-80)}
.btn.primary[disabled]{opacity:.6;cursor:progress}
.counter{font-size:13px;color:var(--grey)}

/* Confirmación */
.done-screen{text-align:center;padding:20px 8px 8px}
.done-screen .ok{width:72px;height:72px;border-radius:50%;background:var(--sea);display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 0 10px var(--sea-20)}
.done-screen h2{margin-bottom:8px}
.done-screen .lead{margin:0 auto 8px}
.tickets{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 12px}
.ticket{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;border:1.5px solid var(--line);border-top:4px solid var(--space);border-radius:12px;padding:12px 18px;text-align:left;min-width:230px}
.ticket + .ticket{border-top-color:var(--magenta)}
.ticket span{font-size:13px;color:var(--muted)}
.ticket strong{font-size:20px;letter-spacing:.04em;color:var(--space);font-variant-numeric:tabular-nums}
.ticket button{border:0;background:var(--space-05);border-radius:8px;padding:5px 12px;font-weight:700;color:var(--space);cursor:pointer;font-size:13px}
.done-screen .note{text-align:left;max-width:560px;margin:8px auto 22px}
.fail{display:none;background:#fbeefb;color:#5c1060;border-radius:12px;padding:14px 16px;margin-top:16px;font-size:14.5px}
.fail.on{display:block}

/* ── Pie: logo blanco sobre azul (uso negativo del manual) ── */
.site-footer{background:var(--space);color:#cfd6ef;font-size:13.5px}
.site-footer .in{max-width:1080px;margin:0 auto;padding:30px 24px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-footer .logo{width:170px}
.site-footer nav{display:flex;gap:22px;flex-wrap:wrap}
.site-footer a{color:#fff;text-decoration:none;font-weight:700}
.site-footer a:hover{text-decoration:underline}
.site-footer p{margin:0;flex-basis:100%;font-size:12.5px;color:#9faad0}

/* Seguimiento */
.track{max-width:540px;margin-left:auto;margin-right:auto}
.status{border:1.5px solid var(--line);border-top:4px solid var(--sea);border-radius:12px;padding:18px 20px;margin-top:22px}
.status dl{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;margin:0}
.status dt{color:var(--muted)}
.status dd{margin:0;font-weight:700}
.badge{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--space-05);color:var(--space);font-weight:700}

@media (max-width:720px){
  .topbar .in{padding:14px 16px}
  .topbar .logo{width:150px}
  .toplink span{display:none}
  .hero{padding:36px 16px 112px}
  .hero::before{width:360px;height:360px;right:-140px;top:-60px}
  .hero .dots{display:none}
  .card{padding:26px 20px}
  .card h2{font-size:25px}
  .row{grid-template-columns:1fr}
  .steps li span{display:none}
  .steps li.on span{display:inline}
  .steps{grid-template-columns:repeat(6,auto);justify-content:space-between}
  .review dl,.status dl{grid-template-columns:1fr}
  .review dt{margin-top:6px}
  .choice .ico{width:36px;height:36px}
  .btn{padding:12px 20px}
}