/* ══════════════════════════════════════════════════════════════════════════
   "Nadie sobra en la montaña" — encontrar dupla.  25-sep-2026
   El tono es cálido y abierto, no el del resto del sitio (que es oscuro y
   épico): quien llega acá está admitiendo que no tiene con quién, y eso
   cuesta. La página tiene que recibir, no impresionar.
   ══════════════════════════════════════════════════════════════════════════ */

.dup__hero{
  /* El encabezado del sitio es fijo: sin este colchon el titulo le queda
     debajo. */
  padding:clamp(110px,16vh,190px) 0 clamp(40px,7vh,80px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(1100px 420px at 18% -10%, rgba(146,192,9,.16), transparent 62%),
    var(--black)
}
.dup__h1{
  font-family:var(--h-font);font-weight:900;line-height:.95;margin:.5rem 0 1.1rem;
  font-size:clamp(2.3rem,7vw,4.6rem);letter-spacing:-.01em
}
.dup__lede{
  max-width:62ch;font-size:clamp(1rem,1.7vw,1.15rem);line-height:1.7;
  color:var(--grey);margin:0 0 1rem
}
.dup__lede em{font-style:normal;color:var(--white)}
.dup__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}

.dup__h2{
  font-family:var(--h-font);font-weight:900;font-size:clamp(1.4rem,3vw,2rem);
  margin:0 0 1.3rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap
}
.dup__cuenta{font-family:var(--font);font-weight:400;font-size:.85rem;color:var(--grey)}
.dup__sub{color:var(--grey);max-width:60ch;margin:-.6rem 0 1.6rem;line-height:1.65}

/* ── los tres pasos ── */
.dup__pasos{
  list-style:none;counter-reset:p;margin:0 0 1.8rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem
}
.dup__pasos li{
  counter-increment:p;position:relative;padding:1.4rem 1.1rem 1.1rem;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);
  font-size:.9rem;line-height:1.6;color:var(--grey)
}
.dup__pasos li::before{
  content:counter(p);position:absolute;top:-14px;left:1.1rem;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-l,#B6E81A);color:#07090A;
  font-family:var(--h-font);font-weight:900;font-size:.82rem
}
.dup__pasos b{display:block;color:var(--white);margin-bottom:.3rem;font-size:.95rem}

.dup__nota,.dup__seguro{
  max-width:70ch;font-size:.88rem;line-height:1.65;color:var(--grey);
  padding:.9rem 1rem;border-radius:11px;margin:0 0 1rem
}
.dup__nota{background:rgba(255,255,255,.035);border:1px solid var(--line)}
/* Lo de seguridad va en verde y no en rojo: es una promesa, no una advertencia. */
.dup__seguro{background:rgba(146,192,9,.07);border:1px solid rgba(146,192,9,.3)}

/* ── el muro ── */
.dup__filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.dup__muro{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1rem}
.dup__card{
  border:1px solid var(--line);border-radius:14px;padding:1.1rem;
  background:var(--black-3);display:flex;flex-direction:column;gap:.6rem
}
.dup__card.es-mio{border-color:rgba(146,192,9,.45);background:rgba(146,192,9,.05)}
.dup__chd{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.dup__nom{font-family:var(--h-font);font-weight:900;font-size:1.15rem}
.dup__cat{
  font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--grey)
}
.dup__mio{
  font-size:.64rem;padding:2px 8px;border-radius:6px;
  background:rgba(146,192,9,.18);color:var(--green-l,#B6E81A);font-weight:700
}
/* La frase es lo que hace que alguien quiera acompañarte: se le da el peso
   de una cita, no el de un campo más del formulario. */
.dup__frase{
  margin:0;font-size:.95rem;line-height:1.6;color:var(--white);
  padding-left:.8rem;border-left:2px solid rgba(146,192,9,.5)
}
.dup__exp{margin:0;font-size:.82rem;line-height:1.55;color:var(--grey)}
.dup__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.1rem 0 0}
.dup__tags span{
  font-size:.7rem;padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.055);color:var(--grey)
}
.dup__quiero{margin-top:auto;align-self:flex-start}
.dup__vacio{
  color:var(--grey);font-size:.92rem;line-height:1.65;max-width:58ch;
  padding:1.1rem;border:1px dashed var(--line);border-radius:12px
}

/* ── el formulario ── */
.dup__formwrap{max-width:760px}
.dup__form{display:flex;flex-direction:column;gap:1rem}
.dup__form label{display:flex;flex-direction:column;gap:.35rem;font-size:.86rem;font-weight:500}
.dup__form small{font-weight:400;font-size:.74rem;color:var(--grey);line-height:1.45}
.dup__form input,.dup__form select,.dup__form textarea{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;color:inherit;padding:.7rem .8rem;font:inherit;font-size:.92rem;
  width:100%;box-sizing:border-box
}
.dup__form textarea{resize:vertical;line-height:1.55}
.dup__form input:focus,.dup__form select:focus,.dup__form textarea:focus{
  outline:2px solid var(--green-l,#B6E81A);outline-offset:1px;border-color:transparent
}
.dup__g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){ .dup__g2{grid-template-columns:1fr} }
.dup__req{color:var(--green-l,#B6E81A)}

/* Las casillas de autorización: en fila, con el texto legible. Apiladas como
   los demás campos se leen como un trámite y nadie las lee. */
.dup__chk{flex-direction:row !important;align-items:flex-start;gap:.6rem;
  font-weight:400;font-size:.82rem;line-height:1.55;color:var(--grey)}
.dup__chk input{width:auto;flex:0 0 auto;margin-top:.15rem}
.dup__chk a{color:var(--green-l,#B6E81A)}

.dup__err,.dup__ok{padding:.85rem 1rem;border-radius:10px;font-size:.88rem;line-height:1.6;margin:0}
.dup__err{background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.4)}
.dup__ok{background:rgba(146,192,9,.1);border:1px solid rgba(146,192,9,.4)}
.dup__yo{
  margin-top:1.2rem;font-size:.84rem;color:var(--grey);line-height:1.6;
  padding:.8rem .9rem;border-radius:10px;background:rgba(255,255,255,.035);
  border:1px solid var(--line)
}
.linkish{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--green-l,#B6E81A);text-decoration:underline
}

/* ── cierre ── */
.dup__cierre{
  padding:clamp(56px,9vh,110px) 0;text-align:center;
  border-top:1px solid var(--line);background:var(--black)
}
.dup__cierre p{
  max-width:56ch;margin:0 auto;font-size:clamp(1rem,2vw,1.25rem);
  line-height:1.7;color:var(--grey)
}
.dup__firma{
  margin-top:1.1rem !important;font-size:.75rem !important;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-2,#6b7280)
}