/* ============================================================
   EJE INTELIGENTE - contacto.css (pagina /contacto)
   Se carga despues de premium.css.
   ============================================================ */

/* ---------- Hero de subpagina ---------- */
.hero--sub{padding-bottom:clamp(56px,7vw,88px)}
.hero--sub .hero__sub{margin-top:26px}

/* ---------- 01 Formulario ---------- */
.fsec{padding-block:clamp(88px,10.5vw,140px)}
.frm{
  position:relative;border-radius:28px;
  border-color:transparent;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(47,164,83,.07),transparent 55%) padding-box,
    linear-gradient(165deg,rgba(74,222,128,.2),rgba(242,244,239,.08) 42%,rgba(242,244,239,.05)) border-box;
  padding:clamp(26px,3.6vw,46px);
  display:flex;flex-direction:column;gap:clamp(28px,3.6vw,38px);
}

.lbl{
  display:block;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;
}
.lbl em{font-style:normal;color:var(--green-bright)}

/* eleccion de camino (radio cards) */
.chgrp{display:grid;gap:12px}
.ch{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--line-2);border-radius:18px;
  padding:17px 19px;cursor:pointer;
  background:rgba(242,244,239,.02);
  transition:border-color .3s,background .3s,transform .35s var(--ease);
}
.ch:hover{border-color:rgba(74,222,128,.45);transform:translateY(-2px)}
.ch:focus-within,.opt360:focus-within{border-color:rgba(74,222,128,.55);background:rgba(47,164,83,.07)}
.ch input{position:absolute;opacity:0;pointer-events:none}
.ch__mark{
  margin-top:2px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-2);flex:none;position:relative;
  transition:border-color .25s,background .25s;
}
.ch:has(input:checked){
  border-color:rgba(74,222,128,.6);
  background:rgba(47,164,83,.08);
}
.ch:has(input:checked) .ch__mark{
  border-color:var(--green-bright);
  background:var(--green-bright);
}
.ch:has(input:checked) .ch__mark::after{
  content:"";position:absolute;inset:5px;border-radius:50%;background:#07130A;
}
.ch__t{min-width:0}
.ch__t b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:1.04rem;letter-spacing:-.01em;color:var(--ink);
}
.ch__t small{
  display:block;margin-top:5px;color:var(--muted);
  font-size:.9rem;line-height:1.5;
}

/* selector de servicio (3 chips con precio) */
.svc{grid-template-columns:repeat(3,1fr)}
.svc .ch{padding:15px 16px;border-radius:16px}
.svc .ch__t small b{color:var(--green-bright);letter-spacing:.1em;font-weight:400}

/* Plan EJE 360 (checkbox card) */
.opt360{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--line-2);border-radius:20px;
  padding:clamp(18px,2.4vw,24px);cursor:pointer;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(47,164,83,.09),transparent 60%) ,
    rgba(242,244,239,.02);
  transition:border-color .3s,background .3s;
}
.opt360:hover{border-color:rgba(74,222,128,.45)}
.opt360 input{position:absolute;opacity:0;pointer-events:none}
.opt360 .ch__mark{border-radius:6px}
.opt360:has(input:checked){
  border-color:rgba(74,222,128,.6);background:rgba(47,164,83,.09);
}
.opt360:has(input:checked) .ch__mark{
  background:var(--green-bright);border-color:var(--green-bright);
}
.opt360:has(input:checked) .ch__mark::after{
  content:"";position:absolute;left:5.5px;top:1px;
  width:7px;height:12px;
  border-right:2.5px solid #07130A;border-bottom:2.5px solid #07130A;
  transform:rotate(45deg);
}
.opt360__t{min-width:0;flex:1}
.opt360__t b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:1.06rem;letter-spacing:-.01em;
}
.opt360__t small{
  display:block;margin-top:5px;color:var(--muted);
  font-size:.88rem;line-height:1.55;
}
.opt360__price{
  margin-left:auto;flex:none;text-align:right;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  color:var(--green-bright);text-transform:none;
  border:1px solid rgba(74,222,128,.35);border-radius:99px;
  padding:8px 14px;white-space:nowrap;
}

/* telefono: codigo de pais + numero separados */
.telrow{display:grid;grid-template-columns:178px 1fr;gap:10px}
.frm select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(242,244,239,.04);
  border:1px solid var(--line-2);border-radius:14px;
  padding:14px 14px;min-height:52px;
  transition:border-color .25s;cursor:pointer;
  color-scheme:dark; /* el popup nativo se dibuja oscuro (windows) */
}
.frm select:focus{border-color:rgba(74,222,128,.6)}
/* opciones del popup: colores explicitos por si el navegador ignora el scheme */
.frm select option{background-color:#0B100C;color:#F2F4EF}
.frm select option:hover,
.frm select option:checked{background-color:#12331F;color:#4ADE80}
.cc-more{
  margin-top:10px;display:grid;
  grid-template-columns:130px 1fr;gap:12px;align-items:center;
}
.cc-more.is-off{display:none!important}
.cc-more input{width:130px;text-align:center}
.cc-more .mono{letter-spacing:.14em;font-size:10px}

/* campos */
.flds{display:grid;gap:18px}
.frm input,
.frm textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(242,244,239,.04);
  border:1px solid var(--line-2);border-radius:14px;
  padding:14px 16px;min-height:52px;
  transition:border-color .25s;
}
.frm textarea{min-height:112px;resize:vertical;line-height:1.6}
.frm input:focus,
.frm textarea:focus{border-color:rgba(74,222,128,.6)}
.frm ::placeholder{color:rgba(154,166,156,.78)}
@media (min-width:820px){
  .row2{grid-template-columns:1fr 1fr}
}
.row2{display:grid;gap:18px}

/* envio */
.snd{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.snd a,.snd button{flex:1 1 auto}
.snd .btn{font-family:var(--f-display);letter-spacing:-.01em;text-transform:none}
#send.is-ok{background:var(--green-bright);color:#07130A}
.priv{letter-spacing:.14em;font-size:10.5px;line-height:2;margin-top:18px;text-align:center}
#hint{color:#E4695E;font-size:.92rem;display:none}
#hint.show{display:block}

/* avisos modales: como alert() de js — centrados, con el fondo difuminado,
   estilo de marca. Las buenas noticias NUNCA van en rojo. */
.modal{
  position:fixed;inset:0;z-index:80;display:none;padding:20px;
  background:rgba(7,10,8,.68);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.modal.show{display:grid;place-items:center;animation:fad .28s var(--ease)}
@keyframes fad{from{opacity:0}}
.modal__card{
  width:min(440px,100%);
  display:grid;justify-items:center;gap:14px;text-align:center;
  border:1px solid var(--line-2);border-radius:22px;
  background:linear-gradient(180deg,#0C120E,#090D0A);
  box-shadow:0 34px 90px rgba(0,0,0,.6);
  padding:clamp(30px,5.5vw,40px) clamp(24px,4vw,36px);
  animation:pop .38s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
.modal__ico{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  border:1px solid rgba(74,222,128,.4);
  background:linear-gradient(180deg,rgba(47,164,83,.18),rgba(47,164,83,.05));
}
.modal__ico .i{width:26px;height:26px;stroke:var(--green-bright);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.modal__ico--info{border-color:var(--line-2);background:rgba(242,244,239,.05)}
.modal__ico--info .i{stroke:var(--muted)}
.modal__t{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;font-size:1.4rem;line-height:1.15}
.modal__p{color:var(--muted);font-size:.98rem;line-height:1.65;max-width:36ch}
.modal__p b{color:var(--green-bright);font-weight:600}
.modal .els{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.elbtn{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:99px;padding:12px 18px;
  color:var(--ink);background:rgba(242,244,239,.05);cursor:pointer;
  transition:border-color .25s,color .25s,transform .3s var(--ease),box-shadow .3s;
}
.elbtn:hover{border-color:rgba(74,222,128,.55);color:var(--green-bright)}
.elbtn--si{
  background:linear-gradient(135deg,var(--green-bright),var(--green));
  border-color:transparent;color:#06130B;font-weight:700;
}
.elbtn--si:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(47,164,83,.32);color:#06130B}
.elbtn:disabled{opacity:.55;cursor:wait}

/* ---------- 02 Canales ---------- */
.chans{padding-block:clamp(88px,10.5vw,140px);border-top:1px solid var(--line)}
.chans__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2vw,20px);margin-top:clamp(40px,5vw,56px);
}
.chan{
  display:flex;align-items:center;gap:15px;
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2.2vw,22px) clamp(18px,2.2vw,22px);
  background:rgba(242,244,239,.02);
  transition:border-color .3s,background .3s,transform .4s var(--ease);
}
.chan:hover{
  border-color:rgba(74,222,128,.4);background:rgba(47,164,83,.055);
  transform:translateY(-3px);
}
.chan__ico{
  width:46px;height:46px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  border:1px solid rgba(74,222,128,.3);
  background:linear-gradient(180deg,rgba(47,164,83,.16),rgba(47,164,83,.05));
}
.chan__ico svg{width:22px;height:22px;stroke:var(--green-bright);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chan b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:1rem;letter-spacing:-.01em;
}
.chan b i{font-style:normal;color:var(--green-bright)}
.chan small{display:block;margin-top:3px;color:var(--muted);font-size:.86rem}
.chans .mini-steps{margin-top:clamp(30px,4vw,44px)}

/* sheen */
.frm.sheen::before{border-radius:28px}
.chan.sheen::before{border-radius:18px}

/* ---------- RESPONSIVE ---------- */
.is-off{display:none!important}

@media (max-width:820px){
  .svc{grid-template-columns:1fr}
}
@media (max-width:700px){
  .fsec{padding-block:clamp(64px,15vw,96px)}
  .chans{padding-block:clamp(64px,15vw,96px)}
  .frm{padding:24px 20px;border-radius:24px;gap:26px}
  .ch{padding:15px 16px;border-radius:16px}
  .ch__mark{margin-top:1px}
  .opt360{flex-wrap:wrap}
  .opt360__price{
    margin-left:34px;order:9;width:auto;text-align:left;
    padding:7px 12px;font-size:11px;
  }
  .flds{gap:14px}
  .frm input,.frm textarea,.frm select{padding:13px 15px;min-height:50px}
  .telrow{grid-template-columns:1fr}
  .telrow select{order:-1}
  .cc-more{grid-template-columns:130px auto}
  .fld input,.fld textarea{padding:13px 15px;min-height:50px}
  .snd{flex-direction:column;align-items:stretch}
  .snd a,.snd button{justify-content:center;text-align:center}
  .chans__grid{grid-template-columns:1fr;gap:12px}
  .chan{padding:16px 18px}
}