/* ==========================================================================
   Cor-E Dark — bloques específicos de /contactUs (public/css/contact-dark.css)
   Namespace .ct-* — solo carga en paginaActual === 'contactUs' (cabecera.ejs).
   Tokens y componentes genéricos .hm-* viven en dark-base.css, cargado antes.
   Ver prompt/contactUsNew.md §6 para la especificación.
   ========================================================================== */

/* ==========================================================================
   Hero con fotografía — split 55/45, sin tinte de color sobre la foto
   (designRules §8: degradado a --dk-canvas, nunca overlay azul/navy)
   ========================================================================== */
.ct-hero {
  position: relative;
  background: var(--dk-canvas);
  display: grid;
  align-items: center;
  min-height: 72svh;
  min-height: 72vh;
  padding-block: clamp(120px, 14vw, 180px) var(--rhythm);
  overflow: hidden;
}
.ct-hero-media {
  position: absolute;
  inset: 0 0 0 45%;
  z-index: 0;
}
.ct-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--dk-canvas) 0%, rgba(8,7,26,0.75) 22%, rgba(8,7,26,0) 60%);
}
.ct-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.ct-hero-title {
  font-size: var(--fs-d1);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--tx-1);
  max-width: 16ch;
  margin: 0 0 28px;
}
.ct-hero-sub {
  font-size: var(--fs-lg);
  color: var(--tx-2);
  max-width: 48ch;
  line-height: 1.65;
  margin: 0 0 32px;
}

@media (max-width: 899.98px) {
  /* En móvil la foto pasa a ser una banda superior: el texto necesita el ancho completo */
  .ct-hero {
    display: block;
    min-height: 0;
    padding-top: 0;
  }
  .ct-hero-media {
    position: relative;
    inset: auto;
    height: 40svh;
    min-height: 260px;
  }
  .ct-hero-media::after {
    background: linear-gradient(180deg, rgba(8,7,26,0.35) 0%, rgba(8,7,26,0.2) 45%, var(--dk-canvas) 100%);
  }
  .ct-hero-inner { padding-top: clamp(28px, 6vw, 48px); }
  .ct-hero-title { max-width: 100%; }
}

/* ==========================================================================
   Formulario
   ========================================================================== */
.ct-form { max-width: 940px; }

.ct-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.ct-field--full { grid-column: 1 / -1; }

.ct-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;   /* sin esto, un fieldset no encoge dentro de un grid */
}

/* .ct-field, .ct-label, .ct-req, .ct-input/.ct-select/.ct-textarea (estilo
   base), .ct-error y .ct-hint se promovieron a dark-base.css como
   .hm-field, .hm-label, .hm-req, .hm-input, .hm-select, .hm-textarea,
   .hm-error, .hm-hint — ver prompt/loginNew.md §5.3, hallazgo U. Login es
   el segundo formulario del sistema y necesitaba las mismas primitivas.
   Lo que sigue aquí son modificadores específicos de <select>/<textarea>
   que solo usa /contactUs — no se promueven porque esta hoja solo carga
   en esa vista, así que no hay riesgo de fuga a otras. */
.hm-select {
  cursor: pointer;
  /* Flecha propia: appearance:none quita la nativa. SVG inline en currentColor
     claro — sin petición de red, sin dependencia de iconos. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C4C1D8'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
}
.hm-select option {
  background: var(--dk-surface);
  color: var(--tx-1);
}
.hm-textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.6;
}

/* Grupo teléfono: selector de país + número */
.ct-phone {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 479.98px) {
  .ct-phone { grid-template-columns: 1fr; }
}

/* Consentimiento (requisito legal — Ley 1581 de 2012) */
.ct-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
  max-width: 68ch;
}
.ct-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--ac-yellow);
  cursor: pointer;
}
.ct-consent label {
  font-size: var(--fs-sm);
  color: var(--tx-2);
  line-height: 1.6;
  cursor: pointer;
}
.ct-consent a { color: var(--tx-1); text-decoration: underline; }
.ct-consent a:hover { color: var(--ac-yellow); }

.ct-submit {
  margin-top: clamp(28px, 3.5vw, 40px);
  border: 0;
  cursor: pointer;
  font-size: var(--fs-md);
  font-family: inherit;
}

@media (max-width: 767.98px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-field--full { grid-column: auto; }
}

/* Honeypot: fuera de pantalla, NUNCA display:none (los bots lo detectan) */
.ct-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Etiqueta solo para lector de pantalla */
.ct-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Avisos (éxito / error / fallo de envío)
   ========================================================================== */
.ct-alert {
  border-left: 3px solid var(--dk-line-strong);
  background: rgba(8,7,26,0.35);
  padding: clamp(20px, 2.5vw, 28px);
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  max-width: 68ch;
}
.ct-alert h3 {
  font-size: var(--fs-h3);
  color: var(--tx-1);
  margin: 0 0 8px;
}
.ct-alert p { color: var(--tx-2); margin: 0 0 12px; }
.ct-alert p:last-child { margin-bottom: 0; }
.ct-alert ul { margin: 0; padding-left: 20px; color: var(--tx-2); }
.ct-alert li { margin-bottom: 4px; }
.ct-alert a { color: var(--tx-1); }

.ct-alert--ok    { border-left-color: var(--ac-yellow); }
.ct-alert--error { border-left-color: var(--ac-red); }
.ct-alert--warn  { border-left-color: var(--ac-orange); }

/* ==========================================================================
   Canales directos — tarjetas
   Profundidad por escalón de superficie + hairline, nunca box-shadow
   (designRules §4). Radio 0. Hover solo cambia el color de la línea,
   sin transform (designRules §5).
   ========================================================================== */
.ct-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.ct-channel {
  display: flex;
  flex-direction: column;
  background: var(--dk-surface);
  border: 1px solid var(--dk-line);
  padding: clamp(24px, 2.6vw, 36px);
  transition: border-color var(--dur-2) var(--ease);
}
.ct-channel:hover { border-color: var(--dk-line-strong); }

.ct-channel-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ac-blue);
  margin-bottom: 20px;
}
.ct-channel h3 {
  font-size: var(--fs-h3);
  color: var(--tx-1);
  margin: 0 0 8px;
}
.ct-channel p {
  color: var(--tx-2);
  margin: 0 0 20px;
}
/* Empuja el enlace al fondo para que quede alineado entre tarjetas
   aunque el texto tenga distinto largo. */
.ct-channel .hm-link-arrow,
.ct-channel .ct-address {
  margin-top: auto;
}
/* --fs-sm: son datos de contacto, no titulares de CTA. Además evita que
   "info@cor-econsulting.com" parta en dos líneas dentro de la tarjeta y
   deje la flecha descolgada. */
.ct-channel .hm-link-arrow {
  align-self: flex-start;
  font-size: var(--fs-sm);
  min-height: 44px;          /* objetivo táctil (designRules §11.3) */
  align-items: center;
}
.ct-address {
  color: var(--tx-1);
  font-style: normal;
  font-weight: 600;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 1099.98px) {
  .ct-channels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599.98px) {
  .ct-channels { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Qué pasa después — split invertido (imagen izquierda / texto derecha)
   ========================================================================== */
.ct-next {
  display: grid;
  grid-template-columns: 45% 55%;
  background: var(--dk-canvas);
  border-top: 1px solid var(--dk-line);
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.ct-next-media { position: relative; overflow: hidden; min-height: 420px; }
.ct-next-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-next-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,7,26,0) 55%, var(--dk-canvas) 100%);
}
.ct-next-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 96px) var(--pad-inline);
}
.ct-next-content h2 {
  font-size: var(--fs-d2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tx-1);
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.ct-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ct-steps li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--gap);
  padding-block: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid var(--dk-line);
}
.ct-steps li:first-child { border-top: 0; padding-top: 0; }
.ct-step-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--tx-3);
}
.ct-steps h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--tx-1);
  margin: 0 0 6px;
}
.ct-steps p {
  color: var(--tx-2);
  max-width: 52ch;
  margin: 0;
}

@media (max-width: 899.98px) {
  .ct-next { grid-template-columns: 1fr; }
  .ct-next-media { min-height: 260px; }
  .ct-next-media::after {
    background: linear-gradient(180deg, rgba(8,7,26,0) 55%, var(--dk-canvas) 100%);
  }
}
@media (max-width: 599.98px) {
  .ct-steps li { grid-template-columns: 1fr; gap: 6px; }
}