/* ============================================================
   Emprendedores Imparables — capa sobre site.css
   ============================================================ */

/* ---------- Encabezado compacto ---------- */
.reg-sec{padding-top:calc(var(--paso) + 3.2rem);position:relative;overflow:hidden}
/* arco tenue de fondo, el motivo de la casa */
.reg-sec::before{content:'';position:absolute;left:50%;top:-14vw;width:46vw;height:46vw;
  transform:translateX(-50%);border-radius:var(--arco);
  border:1.5px solid var(--piedra-2);opacity:.5;pointer-events:none}

.cabeza{position:relative;max-width:44rem;margin:0 auto 2.4rem;text-align:center}
.cabeza h1{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.3rem);font-weight:400;
  letter-spacing:-.005em;line-height:1.12;margin:1rem 0 0}
.cabeza h1 .it{font-family:var(--cita-fuente);font-style:italic;font-weight:600;
  font-size:1.16em;color:var(--guinda);letter-spacing:0}
.cabeza .eyebrow{justify-content:center}
.cabeza .lead{margin:1rem auto 0;max-width:52ch}

.cabeza__datos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin:1.5rem 0 0;padding:0}
.cabeza__datos li{display:inline-flex;align-items:center;gap:.45rem;
  font-size:.79rem;font-weight:600;color:var(--tinta-2);
  background:var(--cal);border:1px solid var(--linea);border-radius:999px;padding:.42rem .95rem}
.cabeza__datos li::before{content:'';width:6px;height:6px;border-radius:50%;flex:none}
.cabeza__datos li:nth-child(1)::before{background:var(--jade)}
.cabeza__datos li:nth-child(2)::before{background:var(--ambar)}
.cabeza__datos li:nth-child(3)::before{background:var(--rosa)}

/* ---------- Contenedor del registro ---------- */
.reg{background:var(--cal);border:1px solid var(--linea);border-radius:24px;
  box-shadow:var(--sombra-sm);overflow:hidden;max-width:920px;margin-inline:auto}

/* barra de avance */
.reg__barra{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--piedra);border-bottom:1px solid var(--linea);margin:0}
.reg__barra li{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:1.1rem .4rem;font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--tinta-3);text-align:center;position:relative;transition:color .3s}
.reg__barra li::before{content:'';position:absolute;left:0;right:50%;top:calc(1.1rem + 15px);
  height:1.5px;background:var(--linea)}
.reg__barra li::after{content:'';position:absolute;left:50%;right:0;top:calc(1.1rem + 15px);
  height:1.5px;background:var(--linea)}
.reg__barra li:first-child::before,.reg__barra li:last-child::after{display:none}
.reg__barra li span{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--cal);border:1.5px solid var(--linea);
  font-family:var(--display);font-size:.9rem;letter-spacing:0;color:var(--tinta-3);
  transition:background .3s,border-color .3s,color .3s}
.reg__barra li.on{color:var(--guinda)}
.reg__barra li.on span{background:var(--guinda);border-color:var(--guinda);color:var(--cal)}
.reg__barra li.hecho span{background:var(--jade);border-color:var(--jade);color:var(--cal)}
.reg__barra li.hecho span::after{content:'✓';font-size:.85rem}
.reg__barra li.hecho span{font-size:0}

/* paneles */
.reg__form{padding:2rem 2.1rem 1.6rem;position:relative}
.pane{border:0;padding:0;margin:0;display:none}
.pane.on{display:block;animation:aparece .38s cubic-bezier(.2,.9,.3,1)}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane__t{font-family:var(--display);font-size:1.42rem;font-weight:400;letter-spacing:-.01em;
  margin-bottom:1.4rem;padding:0;color:var(--tinta)}

.campo select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23574A4E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
  padding-right:2.4rem}
.campo select.is-mal{border-color:var(--vino)}

/* pista bajo el código postal */
.pista{font-size:.78rem;line-height:1.4;margin-top:.35rem;min-height:1.1em;color:var(--tinta-3);
  letter-spacing:0;text-transform:none;font-weight:500}
.pista.ok{color:var(--jade);font-weight:600}
.pista.mal{color:var(--vino);font-weight:600}   /* legible: 8.7:1 */
.campo select[hidden]{display:none}

/* opciones (radio / checkbox) */
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.op{position:relative;display:inline-flex}
.op input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.op span{display:block;font-size:.85rem;font-weight:600;padding:.6rem 1.05rem;border-radius:999px;
  border:1px solid var(--linea);background:var(--piedra);color:var(--tinta-2);
  transition:background .22s,color .22s,border-color .22s,transform .22s;cursor:pointer}
.op:hover span{border-color:var(--guinda);color:var(--guinda);transform:translateY(-1px)}
.op input:checked+span{background:var(--guinda);border-color:var(--guinda);color:var(--cal)}
.op input:focus-visible+span{outline:2px solid var(--guinda);outline-offset:2px}
.opciones.is-mal{outline:1.5px solid var(--rosa);outline-offset:6px;border-radius:14px}

/* pie de navegación */
.reg__pie{display:flex;align-items:center;gap:.6rem;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid var(--linea)}
.reg__pie .btn{padding:.82rem 1.5rem}

/* éxito */
.exito{margin:0;border:0;border-radius:0;padding:3rem 2.1rem}
.exito__acc{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .reg__barra li{font-size:0;padding:.95rem .2rem;gap:0}
  .reg__barra li span{font-size:.85rem}
  .reg__barra li.hecho span{font-size:0}
}
@media(max-width:640px){
  .reg-sec{padding-top:calc(var(--paso) + 2.6rem)}
  .reg-sec::before{width:150vw;height:150vw;top:-58vw}
  .cabeza{margin-bottom:1.8rem}
  .cabeza h1{margin-top:.75rem}
  .reg{border-radius:18px}
  .reg__form{padding:1.4rem 1.2rem 1.2rem}
  .pane__t{font-size:1.2rem;margin-bottom:1.1rem}
  .exito{padding:2rem 1.2rem}
  .reg__pie{flex-wrap:wrap}
  .reg__pie .btn{flex:1;min-width:0;padding:.85rem 1rem;font-size:.76rem}
  .op span{font-size:.82rem;padding:.55rem .9rem}
  /* el campo no debe hacer zoom en iOS: 16px mínimo */
  .campo input,.campo select,.campo textarea{font-size:16px}
}
@media(max-width:400px){
  .reg__barra{grid-template-columns:repeat(5,1fr)}
  .cabeza__datos li{font-size:.75rem;padding:.38rem .8rem}
}
@media(hover:none){
  .op:hover span{transform:none;border-color:var(--linea);color:var(--tinta-2)}
  .op input:checked+span{border-color:var(--guinda);color:var(--cal)}
}