/* =====================================================
   COMPONENT: Contact Router Modal + Form
   Scope: .cvxScope [data-cvx-root="contact-router-modal"], .cvxScope [data-cvx-root="contact-router"]
===================================================== */

.cvxScope [data-cvx-root="contact-router-modal"]{
  --cvx-cr-z: 1400;
  --cvx-cr-overlay: rgba(3, 8, 18, 0.74);
  --cvx-cr-panel-bg: linear-gradient(180deg, rgba(10,16,30,.90) 0%, rgba(8,13,24,.94) 100%);
  --cvx-cr-border: rgba(255,255,255,.10);
  --cvx-cr-shadow: 0 28px 80px rgba(0,0,0,.42);
  --cvx-cr-radius: 24px;
  --cvx-cr-blur: 14px;
  --cvx-cr-close-size: 42px;
  position: relative;
  z-index: var(--cvx-cr-z);
}

.cvxScope [data-cvx-root="contact-router-modal"] *,
.cvxScope [data-cvx-root="contact-router"] *{ box-sizing:border-box; }

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__overlay,
.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__shell{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__overlay{
  background: var(--cvx-cr-overlay);
  backdrop-filter: blur(calc(var(--cvx-cr-blur) * .7));
  -webkit-backdrop-filter: blur(calc(var(--cvx-cr-blur) * .7));
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__shell{
  display: grid;
  place-items: center;
  padding: 22px;
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__panel{
  position: relative;
  width: min(100%, 1040px);
  max-height: min(100dvh - 34px, 920px);
  overflow: auto;
  border-radius: var(--cvx-cr-radius);
  border: 1px solid var(--cvx-cr-border);
  background: var(--cvx-cr-panel-bg);
  box-shadow: var(--cvx-cr-shadow);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__panel::-webkit-scrollbar{ width: 10px; }
.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__close{
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cvx-cr-close-size);
  height: var(--cvx-cr-close-size);
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__close span{
  display: block;
  line-height: 1;
  font-size: 22px;
  transform: translateY(-1px);
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.cvxScope [data-cvx-root="contact-router-modal"].is-open .cvxCRM__overlay,
.cvxScope [data-cvx-root="contact-router-modal"].is-open .cvxCRM__shell{
  opacity: 1;
  pointer-events: auto;
}

.cvxScope [data-cvx-root="contact-router"]{
  --cvx-cf-bg: transparent;
  --cvx-cf-border: transparent;
  --cvx-cf-soft: rgba(255,255,255,.05);
  --cvx-cf-soft-2: rgba(255,255,255,.035);
  --cvx-cf-text: #F8FAFC;
  --cvx-cf-muted: rgba(226,232,240,.74);
  --cvx-cf-accent: #38BDF8;
  --cvx-cf-accent-soft: rgba(56,189,248,.16);
  --cvx-cf-radius: 24px;
  --cvx-cf-field-radius: 14px;
  --cvx-cf-shadow: none;
  --cvx-cf-maxw: none;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF{
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--cvx-cf-radius);
  border: 0;
  background: var(--cvx-cf-bg);
  box-shadow: var(--cvx-cf-shadow);
  color: var(--cvx-cf-text);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__head{
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding-right: 60px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__kicker,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__branchTitle,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__doneKicker{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.34);
  background: rgba(56,189,248,.15);
  color: #E0F2FE;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__title{
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__subtitle{
  margin: 0;
  max-width: 760px;
  color: var(--cvx-cf-muted);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.6;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__types{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__type{
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,252,.92);
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__type:hover{ transform: translateY(-1px); }

.cvxScope [data-cvx-root="contact-router"] .cvxCF__type.is-on{
  background: linear-gradient(180deg, rgba(56,189,248,.18) 0%, rgba(56,189,248,.11) 100%);
  border-color: rgba(56,189,248,.34);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__form{
  display: grid;
  gap: 18px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; }

.cvxScope [data-cvx-root="contact-router"] .cvxCF__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field{
  display: grid;
  gap: 8px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field--full{ grid-column: 1 / -1; }

.cvxScope [data-cvx-root="contact-router"] .cvxCF__lbl{
  color: rgba(248,250,252,.94);
  font-size: 13px;
  font-weight: 600;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field input,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field select,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field textarea{
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--cvx-cf-field-radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--cvx-cf-text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field textarea{
  min-height: 150px;
  padding: 14px;
  resize: vertical;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field input::placeholder,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field textarea::placeholder{ color: rgba(226,232,240,.45); }

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field input:focus,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field select:focus,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field textarea:focus{
  border-color: rgba(56,189,248,.38);
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__branch{
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__actions{
  display: flex;
  justify-content: flex-start;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__btn{
  appearance: none;
  border: 1px solid rgba(56,189,248,.34);
  background: linear-gradient(180deg, rgba(56,189,248,.18) 0%, rgba(56,189,248,.12) 100%);
  color: #F8FAFC;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__btn:hover{ transform: translateY(-1px); }
.cvxScope [data-cvx-root="contact-router"] .cvxCF__btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.cvxScope [data-cvx-root="contact-router"] .cvxCF__status{
  min-height: 20px;
  color: var(--cvx-cf-muted);
  font-size: 13px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__status.is-error{ color: #FCA5A5; }
.cvxScope [data-cvx-root="contact-router"] .cvxCF__status.is-loading{ color: #BAE6FD; }

.cvxScope [data-cvx-root="contact-router"] .cvxCF__done{
  display: grid;
  gap: 10px;
  padding: 20px 0 2px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__doneTitle{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.03em;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__doneDesc{
  max-width: 680px;
  color: var(--cvx-cf-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px){
  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__shell{
    align-items: end;
    padding: 10px;
  }

  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__panel{
    width: 100%;
    max-height: min(100dvh - 20px, 920px);
    border-radius: 22px 22px 18px 18px;
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF__grid{
    grid-template-columns: 1fr;
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF{
    padding: 16px;
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF__head{
    padding-right: 52px;
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF__actions{
    display: grid;
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF__btn{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__overlay,
  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__shell,
  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__close,
  .cvxScope [data-cvx-root="contact-router"] .cvxCF__type,
  .cvxScope [data-cvx-root="contact-router"] .cvxCF__btn{
    transition: none !important;
  }
}

/* =====================================================
   MIN FIX — compactar UI ~25% + mejorar select nativo
===================================================== */

/* 1) Modal y formulario menos abrumadores */
.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__panel{
  width: min(100%, 860px);
  max-height: min(100dvh - 40px, 780px);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF{
  padding: 20px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__head{
  gap: 8px;
  margin-bottom: 14px;
  padding-right: 52px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__title{
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.04;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__subtitle{
  font-size: 14px;
  line-height: 1.5;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__types{
  gap: 7px;
  margin-bottom: 14px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__type{
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__form{
  gap: 14px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__grid{
  gap: 12px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field{
  gap: 6px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__lbl{
  font-size: 12px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field input,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field select,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field textarea{
  min-height: 40px;
  padding: 0 12px;
  font-size: 13px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field textarea{
  min-height: 120px;
  padding: 12px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__branch{
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__branchTitle,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__kicker,
.cvxScope [data-cvx-root="contact-router"] .cvxCF__doneKicker{
  min-height: 24px;
  font-size: 11px;
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__close{
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
}

.cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__close span{
  font-size: 20px;
}

/* 2) Select cerrado con look consistente */
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-color: rgba(255,255,255,.04);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M4 6L8 10L12 6' stroke='%23E5E7EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.03) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, center;
  background-size: 14px 14px, auto;
}

/* 3) Intento de theme para options nativas
   Nota: el desplegable abierto sigue dependiendo bastante del navegador/SO */
.cvxScope [data-cvx-root="contact-router"] .cvxCF__field select option{
  color: #F8FAFC;
  background: #0D1422;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__field select option[value=""]{
  color: rgba(226,232,240,.55);
}

/* 4) Mobile */
@media (max-width: 767px){
  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__shell{
    padding: 10px;
    align-items: end;
  }

  .cvxScope [data-cvx-root="contact-router-modal"] .cvxCRM__panel{
    width: 100%;
    max-height: min(100dvh - 14px, 92dvh);
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF{
    padding: 16px;
  }

  .cvxScope [data-cvx-root="contact-router"] .cvxCF__grid{
    grid-template-columns: 1fr;
  }
}

/* Ocultar todo el formulario hasta elegir una categoría superior */
.cvxScope [data-cvx-root="contact-router"] .cvxCF[data-has-type="0"] .cvxCF__form{
  display: none;
}

/* Estado éxito: dejar solo bloque de agradecimiento */
.cvxScope [data-cvx-root="contact-router"] .cvxCF.is-done .cvxCF__head,
.cvxScope [data-cvx-root="contact-router"] .cvxCF.is-done .cvxCF__types,
.cvxScope [data-cvx-root="contact-router"] .cvxCF.is-done .cvxCF__status{
  display: none;
}

/* =====================================================
   OPTIONAL CONTACT DETAILS
===================================================== */
.cvxScope [data-cvx-root="contact-router"] .cvxCF__more{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__moreToggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  color: rgba(248,250,252,.94);
  font-size: 13px;
  font-weight: 600;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__moreToggle::-webkit-details-marker{
  display: none;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__moreToggle::after{
  content: "+";
  font-size: 18px;
  line-height: 1;
  color: rgba(226,232,240,.78);
  transition: transform .18s ease;
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__more[open] .cvxCF__moreToggle::after{
  content: "−";
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__moreBody{
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.cvxScope [data-cvx-root="contact-router"] .cvxCF__moreGrid{
  padding-top: 14px;
}