@charset "UTF-8";
/* ============================================================
   contacto.css -- v3.15.0
   Pagina /contacto/ -- Formulario de evaluacion estrategica.
   Namespace: --ct-*
   FIX v3.15.0: estructura HTML/CSS para que el container sea consistente
   en ambos modos (con rail / sin rail). El grid switcha pero el shell
   max-width=1080 + padding clamp(20,5vw,80) se respeta SIEMPRE.
   ============================================================ */

:root{
  --ct-bg:#F8F9FC;
  --ct-bg-dark:#040609;
  --ct-bg-card:#FFFFFF;
  --ct-ink:#0D1117;
  --ct-ink-soft:rgba(13,17,23,.72);
  --ct-ink-muted:rgba(13,17,23,.55);
  --ct-line:rgba(13,17,23,.12);
  --ct-line-soft:rgba(13,17,23,.06);
  --ct-teal:#00BFA5;
  --ct-teal-soft:rgba(0,191,165,.10);
  --ct-teal-line:rgba(0,191,165,.30);
  --ct-error:#D14343;
  --ct-success:#1B9E66;
  --ct-display:"Bricolage Grotesque", Georgia, serif;
  --ct-body:"Figtree", system-ui, -apple-system, sans-serif;
  --ct-max:1080px;
  --ct-gutter:clamp(20px, 5vw, 80px);
  --ct-rail-w:280px;
}

.ct{
  background:var(--ct-bg);
  color:var(--ct-ink);
  font-family:var(--ct-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.ct-shell{
  max-width:var(--ct-max);
  margin:0 auto;
  padding-left:var(--ct-gutter);
  padding-right:var(--ct-gutter);
}

/* -- Hero ----------------------------------------------------- */
.ct-hero{
  padding-top:clamp(72px, 12vh, 120px);
  padding-bottom:clamp(40px, 6vh, 60px);
  text-align:center;
}
.ct-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid var(--ct-teal);
  color:var(--ct-teal);
  font-size:.70rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-radius:999px;
  margin-bottom:28px;
}
.ct-hero-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ct-teal);
}
.ct-hero-title{
  font-family:var(--ct-display);
  font-size:clamp(2rem, 4.8vw, 3.25rem);
  line-height:1.1;
  letter-spacing:-0.02em;
  font-weight:500;
  margin:0 auto 20px;
  max-width:22ch;
}
.ct-hero-sub{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ct-ink-soft);
  margin:0 auto;
  max-width:56ch;
}

/* -- Status banner -------------------------------------------- */
.ct-status{
  margin:24px auto 0;
  padding:18px 22px;
  border-radius:8px;
  font-size:.95rem;
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:56ch;
  text-align:left;
}
.ct-status-ok{
  background:rgba(27,158,102,.10);
  border:1px solid rgba(27,158,102,.30);
  color:#0d6e44;
}
.ct-status-err{
  background:rgba(209,67,67,.08);
  border:1px solid rgba(209,67,67,.25);
  color:#9b2a2a;
}
.ct-status svg{flex:0 0 auto;margin-top:2px}

/* -- Body wrapper (mantiene shell + padding ALWAYS) ----------- */
.ct-body{
  padding-top:clamp(40px, 6vh, 64px);
  padding-bottom:clamp(96px, 14vh, 140px);
}

/* Inner grid -- conmuta entre 2-col (rail visible) y 1-col centrado */
.ct-body-grid{
  display:grid;
  grid-template-columns:var(--ct-rail-w) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 56px);
  align-items:start;
}
.ct-body-grid.is-norail{
  display:block;
}
.ct-body-grid.is-norail .ct-form{
  max-width:680px;
  margin:0 auto;
}

/* -- Pre-diag rail -------------------------------------------- */
.ct-rail{
  position:sticky;
  top:100px;
  background:var(--ct-bg-card);
  border:1px solid var(--ct-line);
  border-radius:12px;
  padding:24px;
  display:none;
}
.ct-rail.is-on{display:block}
.ct-rail-label{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ct-teal);
  margin:0 0 12px;
}
.ct-rail-title{
  font-family:var(--ct-display);
  font-size:1.1rem;
  font-weight:500;
  line-height:1.3;
  margin:0 0 18px;
  color:var(--ct-ink);
}
.ct-rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ct-rail-list li{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 0;
  border-top:1px solid var(--ct-line-soft);
  font-size:.88rem;
  line-height:1.4;
}
.ct-rail-list li:first-child{border-top:none;padding-top:0}
.ct-rail-list .ct-rail-k{
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ct-ink-muted);
  font-weight:600;
}
.ct-rail-list .ct-rail-v{
  color:var(--ct-ink);
  font-weight:500;
}
.ct-rail-foot{
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px solid var(--ct-line-soft);
  font-size:.78rem;
  color:var(--ct-ink-muted);
  line-height:1.5;
}

/* -- Form card ------------------------------------------------ */
.ct-form{
  background:var(--ct-bg-card);
  border:1px solid var(--ct-line);
  border-radius:12px;
  padding:clamp(28px, 4vw, 44px);
}
.ct-form-title{
  font-family:var(--ct-display);
  font-size:clamp(1.35rem, 2.4vw, 1.7rem);
  line-height:1.3;
  font-weight:500;
  margin:0 0 8px;
}
.ct-form-sub{
  font-size:.95rem;
  color:var(--ct-ink-soft);
  margin:0 0 28px;
  line-height:1.55;
}
.ct-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:16px;
}
.ct-row.is-single{grid-template-columns:1fr}
.ct-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.ct-field label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ct-ink);
}
.ct-field label .ct-req{color:var(--ct-teal);margin-left:2px}
.ct-field input[type="text"],
.ct-field input[type="email"],
.ct-field input[type="tel"],
.ct-field select,
.ct-field textarea{
  appearance:none;
  border:1px solid var(--ct-line);
  background:#fff;
  color:var(--ct-ink);
  padding:13px 16px;
  border-radius:8px;
  font-family:var(--ct-body);
  font-size:.97rem;
  line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus{
  outline:none;
  border-color:var(--ct-teal);
  box-shadow:0 0 0 4px var(--ct-teal-soft);
}
.ct-field textarea{
  resize:vertical;
  min-height:110px;
  line-height:1.55;
}
.ct-field-note{
  font-size:.78rem;
  color:var(--ct-ink-muted);
  margin:2px 0 0;
}
.ct-submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  background:var(--ct-teal);
  color:var(--ct-bg-dark);
  border:none;
  border-radius:999px;
  font-family:var(--ct-body);
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  margin-top:14px;
  transition:transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.ct-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,191,165,.25);
}
.ct-submit svg{width:16px;height:16px}
.ct-submit:disabled{
  opacity:.6;cursor:not-allowed;transform:none;box-shadow:none;
}
.ct-legal{
  margin:18px 0 0;
  font-size:.78rem;
  color:var(--ct-ink-muted);
  line-height:1.55;
}

/* -- Mobile --------------------------------------------------- */
@media (max-width: 820px){
  .ct-body-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .ct-body-grid.is-norail .ct-form{
    max-width:none;
  }
  .ct-rail{position:static;top:auto}
  .ct-row{grid-template-columns:1fr;gap:0}
}