/*
 * Contacto (primera ronda, 14-10-2026). Valores de la versión aprobada por el cliente: sus bloques ht-page-css,
 * ht-contacto-v5 y ht-v6, resueltos en uno (el último ganaba). Tipografía Rajdhani en todo, con la escala del
 * sitio: h1 50/59, h2 36/40, h3 22/28 y texto 16 (en celular, h1 34/40 y h2 30/34). Se carga solo en Contacto
 * (inc/paginas.php); el encabezado azul y la barra de progreso están en global.css.
 *
 * El tema fija con !important la fuente, el tamaño y el interlineado de h1 y el interlineado de h3–h6; esos
 * valores llevan !important acá. El resto no lo necesita.
 */

.ht-contacto {
  --navy: #0E1D3D;
  --ct-deep: #08132C;
  --ct-blue: #0D1F45;
  --ct-paper: #F3F6F7;
  --green: #66CC99;
  --green-light: #DFF5E9;
  --muted: #5D6A7E;
  display: block;
  overflow: clip;
  color: #19233A;
  background: var(--ct-paper);
  font-family: "Rajdhani", Arial, sans-serif;
  font-size: var(--ht-texto); /* texto de lectura: global.css; etiquetas y botones quedan en 16 */
}
.ht-contacto * { box-sizing: border-box; }
.ht-contacto p { margin: 0; }
.ht-contacto a { color: inherit; }
/* el título de las opciones queda fijo al bajar: el tema le pone overflow hidden a body y lo impediría */
body:has(.ht-contacto) { overflow-x: clip; overflow-y: visible; }

/* ---------- Botones ---------- */
.ht-contacto .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 24px;
  color: var(--navy);
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 11px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}
.ht-contacto .button:is(:hover, :focus) { color: var(--navy); background: #7CDBAD; transform: translateY(-2px); }
.ht-contacto .button--ghost { background: transparent; border-color: rgba(20,38,76,.22); }
.ht-contacto .button--ghost:is(:hover, :focus) { background: var(--green-light); }

/* ---------- Portada: azul a pantalla completa con la red de conexiones (contacto.js) ---------- */
.ht-contacto .ct-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--ht-header, 164px));
  min-height: calc(100svh - var(--ht-header, 164px));
  padding: 64px 22px 120px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(38,74,140,.55), transparent 70%),
    linear-gradient(180deg, var(--ct-deep) 0%, var(--ct-blue) 100%);
}
.ht-contacto .ct-net { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ht-contacto .ct-hero__glow {
  position: absolute;
  top: 46%; left: 50%;
  width: 900px; height: 900px; max-width: 140vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(102,204,153,.12), transparent 60%);
  pointer-events: none;
}
.ht-contacto .ct-hero__inner { position: relative; z-index: 2; max-width: 980px; will-change: transform, opacity; }
.ht-contacto .ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 16px;
  color: #BFE9D4;
  border: 1px solid rgba(102,204,153,.35);
  border-radius: 999px;
  background: rgba(102,204,153,.08);
  font-size: 16px;
  font-weight: 600;
}
.ht-contacto .ct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ct-pulso 2.2s ease-out infinite; }
@keyframes ct-pulso { 0% { box-shadow: 0 0 0 0 rgba(102,204,153,.55); } 100% { box-shadow: 0 0 0 12px rgba(102,204,153,0); } }
.ht-contacto .ct-hero h1 {
  max-width: 760px;
  margin: 0 auto;
  color: #fff;
  font-family: "Rajdhani", Arial, sans-serif !important;
  font-size: 50px !important;
  line-height: 59px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-wrap: balance;
}
.ht-contacto .ct-lead { max-width: 640px; margin: 28px auto 0; color: rgba(255,255,255,.74); font-size: var(--ht-bajada); line-height: var(--ht-bajada-alto); }
.ht-contacto .ct-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.ht-contacto .ct-ghost-light { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.ht-contacto .ct-ghost-light:is(:hover, :focus-visible) { color: var(--navy); background: #fff; }
.ht-contacto .ct-scroll {
  position: absolute;
  z-index: 2;
  bottom: 30px; left: 50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: 12px;
  letter-spacing: .2em;
  text-decoration: none;
  text-transform: uppercase;
}
.ht-contacto .ct-scroll i { position: relative; width: 1px; height: 46px; overflow: hidden; background: rgba(255,255,255,.2); }
.ht-contacto .ct-scroll i::after { content: ""; position: absolute; top: -40%; left: 0; width: 1px; height: 40%; background: var(--green); animation: ct-gota 1.8s ease-in-out infinite; }
@keyframes ct-gota { 0% { top: -40%; } 100% { top: 100%; } }

/* Transición del azul al fondo claro, que solo se ve al bajar */
.ht-contacto .ct-fade {
  height: clamp(220px, 34vh, 360px);
  margin-bottom: clamp(-260px, -26vh, -170px);
  background: linear-gradient(180deg, var(--ct-blue) 0%, #13284F 14%, #1F3A66 28%, #3C5682 42%, #6D82A6 56%, #A3B2C9 70%, #D2DAE5 84%, var(--ct-paper) 100%);
}

/* ---------- Tarjeta "¿No sabes por dónde empezar?" ---------- */
.ht-contacto .contact-start {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  width: min(calc(100% - 44px), 1040px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(102,204,153,.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 18%, rgba(102,204,153,.24), transparent 28%),
    linear-gradient(135deg, #14264C 0%, #1B3564 68%, #204879 100%);
  box-shadow: 0 26px 70px rgba(4,14,34,.24);
}
.ht-contacto .contact-start::before,
.ht-contacto .contact-start::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(102,204,153,.24);
  border-radius: 50%;
  pointer-events: none;
}
.ht-contacto .contact-start::before { right: 90px; bottom: -105px; width: 230px; height: 230px; }
.ht-contacto .contact-start::after { top: -72px; right: -42px; width: 170px; height: 170px; }
.ht-contacto .contact-start > * { position: relative; z-index: 1; }
.ht-contacto .contact-start__label { margin: 0 0 8px; color: var(--green); font-size: 16px; font-weight: 600; }
.ht-contacto .contact-start h2 { margin: 0; color: #fff; }

/* ---------- Títulos de sección ---------- */
.ht-contacto h2 { font-family: "Rajdhani", Arial, sans-serif; font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: 0; }
.ht-contacto h3 { font-family: "Rajdhani", Arial, sans-serif; font-size: 22px; line-height: 28px !important; font-weight: 700; letter-spacing: 0; }

/* ---------- Opciones con línea guía (contacto.js la dibuja y activa la tarjeta del centro) ---------- */
.ht-contacto .ct-choices {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 90px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) clamp(22px, 4vw, 48px) clamp(90px, 10vw, 150px);
}
.ht-contacto .ct-sticky { position: sticky; top: 140px; }
.ht-contacto .ct-label { margin: 0 0 14px; color: #3A9E70; font-size: 16px; font-weight: 600; }
.ht-contacto .ct-choices h2 { margin: 0 0 18px; color: var(--navy); }
.ht-contacto .ct-choices__head p:not(.ct-label) { max-width: 440px; color: var(--muted); }
.ht-contacto .ct-track { position: relative; display: grid; gap: 26px; padding-left: 46px; }
.ht-contacto .ct-line { position: absolute; top: 12px; bottom: 12px; left: 14px; width: 2px; border-radius: 2px; background: #DBE3EA; }
.ht-contacto .ct-line__fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #66CC99, #60B0E2);
  transform: scaleY(0);
  transform-origin: top;
}
.ht-contacto .ct-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 30px 30px 32px;
  border: 1px solid #E1E8EF;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(14,29,61,.06);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.ht-contacto .ct-card.is-active { transform: translateX(8px); border-color: rgba(102,204,153,.55); box-shadow: 0 22px 54px rgba(14,29,61,.12); }
.ht-contacto .ct-card__node {
  position: absolute;
  top: 34px; left: -40px;
  width: 14px; height: 14px;
  border: 2px solid #C7D3DE;
  border-radius: 50%;
  background: #fff;
  transition: border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
.ht-contacto .ct-card.is-active .ct-card__node { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 6px rgba(102,204,153,.2); }
.ht-contacto .ct-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  color: #2F8D63;
  background: #E3F6EC;
  font-size: 22px;
}
.ht-contacto .ct-card h3 { margin: 6px 0 0; color: var(--navy); }
.ht-contacto .ct-card p { color: var(--muted); }
.ht-contacto .ct-card .button { justify-self: start; margin-top: 8px; }

/* ---------- Datos de contacto: sección oscura con grilla y luz que sigue al cursor ---------- */
.ht-contacto .ct-details {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 130px) 22px;
  color: #fff;
  background: linear-gradient(180deg, var(--ct-blue), var(--ct-deep));
}
.ht-contacto .ct-grid {
  position: absolute;
  inset: -2px;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
.ht-contacto .ct-spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(102,204,153,.16), transparent 60%);
  pointer-events: none;
}
.ht-contacto .contact-details__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(50px, 8vw, 100px);
  width: min(100%, 1120px);
  margin: 0 auto;
}
/* en la versión aprobada, la regla de los párrafos alcanza también a la línea de arriba del título: queda en
   blanco tenue y con los mismos márgenes (por eso no es verde como las demás) */
.ht-contacto .contact-details__intro p { max-width: 430px; margin: 24px 0 34px; color: rgba(255,255,255,.7); }
.ht-contacto .contact-eyebrow { font-size: 16px; font-weight: 600; }
.ht-contacto .contact-details h2 { margin: 0; color: #fff; }
.ht-contacto .contact-details__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ht-contacto .contact-details__actions .button--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.ht-contacto .contact-details__actions .button--ghost:is(:hover, :focus) { color: var(--navy); }
.ht-contacto .office-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ht-contacto .office-card {
  padding: 30px;
  border: 1px solid rgba(102,204,153,.25);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
/* el país, como la dirección: blanco tenue y sin margen (en la versión aprobada, la regla de la dirección lo alcanza) */
.ht-contacto .office-card :is(address, p) { margin: 0; color: rgba(255,255,255,.7); font-style: normal; }
.ht-contacto .office-card__country { font-size: 16px; font-weight: 600; }
.ht-contacto .office-card h3 { margin: 0 0 14px; color: #fff; }
.ht-contacto .office-card a { display: inline-block; margin-top: 20px; color: #fff; font-weight: 600; text-underline-offset: 4px; }
/* la dirección lleva a Google Maps (16-10): se ve como el texto de al lado y se subraya al pasar el mouse */
.ht-contacto .office-card address a { display: inline; margin: 0; color: inherit; font-weight: inherit; text-decoration: none; }
.ht-contacto .office-card address a:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; }

/* ---------- Aparición al bajar (contacto.js pone ct-wait a lo que está fuera de pantalla) ---------- */
.ht-contacto [data-ct-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
.ht-contacto [data-ct-reveal].ct-wait { opacity: 0; transform: translateY(46px); filter: blur(6px); }
.ht-contacto .ct-card[data-ct-reveal].ct-wait { transform: translate(40px, 30px); }

@media (max-width: 900px) {
  .ht-contacto .ct-choices,
  .ht-contacto .contact-details__inner { grid-template-columns: 1fr; }
  .ht-contacto .ct-sticky { position: static; }
}
@media (max-width: 767px) {
  .ht-contacto .ct-hero h1 { font-size: 34px !important; line-height: 40px !important; }
  .ht-contacto h2 { font-size: 30px; line-height: 34px; }
  .ht-contacto .contact-start { grid-template-columns: 1fr; }
  .ht-contacto .contact-start .button { width: 100%; }
  .ht-contacto .office-card a { display: inline-flex; align-items: center; min-height: 44px; }
  .ht-contacto .office-card address a { display: inline; min-height: 0; }
}
@media (max-width: 600px) {
  .ht-contacto .ct-hero { padding: 48px 18px 110px; }
  .ht-contacto .ct-hero__actions .button { width: 100%; }
  .ht-contacto .ct-track { padding-left: 34px; }
  .ht-contacto .ct-line { left: 8px; }
  .ht-contacto .ct-card__node { left: -32px; }
  .ht-contacto .ct-card { padding: 24px 22px 26px; }
  .ht-contacto .ct-card.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-contacto .ct-dot,
  .ht-contacto .ct-scroll i::after { animation: none; }
  .ht-contacto .button,
  .ht-contacto .ct-card,
  .ht-contacto [data-ct-reveal] { transition: none; }
}