/* ==========================================================================
   Apex Consulting · Contacto — la cumbre al amanecer
   El fondo (.dawn, en portal.css) es el cuadro final de la transición
   "sun"; aquí van el contenido y sus paneles de vidrio. El rojo solo en
   el botón y el marcador.
   ========================================================================== */
.ct { background: #2A1B48; }
.ct .dawn { z-index: 0; }
.ct main { position: relative; z-index: 1; }
/* mientras amanece (primer cuadro = cuadro final de la salida) no hay contenido */
.dawn-in .ct-hero > *, .dawn-in .nav, .dawn-in .ct-compose, .dawn-in .ct-where { opacity: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.ct-hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(var(--nav-h) + 9vh) var(--gutter) 34svh;
}
.ct-hero__alt { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); color: oklch(92% 0.03 60); }
.ct-hero__title {
  margin-top: var(--sp-4); max-width: 13ch;
  font-size: clamp(2.7rem, 0.6rem + 5.4vw, 6.8rem); font-weight: 850; font-stretch: 125%;
  line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance;
  text-shadow: 0 0.04em 0.6em oklch(20% 0.08 320 / 0.35);
}
.ct-hero__lede { margin-top: var(--sp-5); max-width: 34rem; font-size: var(--fs-lg); color: oklch(95% 0.02 60); text-shadow: 0 0 1.2em oklch(15% 0.05 300 / 0.5); }
.ct-hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.ct-handle {
  display: inline-flex; gap: 0.4rem; min-height: 44px; align-items: center;
  color: oklch(97% 0.01 60); font-weight: 600;
  background: linear-gradient(var(--red), var(--red)) 0 calc(100% - 0.55rem) / 100% 1.5px no-repeat;
}

/* ==========================================================================
   ARMA TU MENSAJE
   ========================================================================== */
.ct-compose {
  display: grid; gap: var(--sp-6); align-items: center;
  padding: var(--sp-7) var(--gutter);
}
.ct-compose__card, .spot {
  background: oklch(16% 0.05 300 / 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid oklch(100% 0 0 / 0.14);
  box-shadow: 0 2rem 4rem -2rem oklch(10% 0.05 300 / 0.6), inset 0 1px 0 oklch(100% 0 0 / 0.08);
}
.ct-compose__card { padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: var(--radius-xl); }
.ct-compose__title { font-size: var(--fs-h3); font-weight: 800; font-stretch: 116%; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.ct-compose__title .dim { display: block; color: oklch(82% 0.03 300); }
.compose { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.compose__opts { border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.compose__opts legend { margin-bottom: 0.6rem; font-size: var(--fs-sm); color: oklch(88% 0.02 300); }
.opt { position: relative; display: flex; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span {
  flex: 1; display: flex; align-items: center; gap: 0.6rem; min-height: 44px;
  padding: 0.55rem 0.8rem; border-radius: var(--radius-sm);
  border: 1px solid oklch(100% 0 0 / 0.16); color: oklch(92% 0.02 300); font-size: var(--fs-sm);
  transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.opt span::before {
  content: ""; flex: none; width: 0.62rem; height: 0.54rem;
  background: oklch(100% 0 0 / 0.3); clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: background-color 0.25s, transform 0.4s var(--ease-snap);
}
.opt:hover span { border-color: oklch(100% 0 0 / 0.34); }
.opt input:checked + span { border-color: oklch(100% 0 0 / 0.6); background: oklch(100% 0 0 / 0.08); color: #fff; }
.opt input:checked + span::before { background: var(--red); transform: scale(1.25); }
.opt input:focus-visible + span { outline: 2px solid var(--red-hi); outline-offset: 2px; }
.field { display: grid; gap: 0.45rem; }
.field span { font-size: var(--fs-sm); color: oklch(88% 0.02 300); }
.field input, .field textarea {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: var(--radius-sm);
  border: 1px solid oklch(100% 0 0 / 0.18); background: oklch(10% 0.03 300 / 0.45);
  color: #fff; font: inherit; font-size: var(--fs-md); resize: vertical;
  transition: border-color 0.25s;
}
.field input::placeholder, .field textarea::placeholder { color: oklch(78% 0.02 300); }
.field input:focus, .field textarea:focus { outline: none; border-color: oklch(100% 0 0 / 0.55); }
.compose__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* vista previa: el mensaje tal como va a salir (modo claro, fuente del sistema) */
.chat { display: grid; justify-items: center; }
.chat__phone {
  --w: min(19rem, 78vw);
  position: relative; width: var(--w); aspect-ratio: 9 / 18.5;
  padding: calc(var(--w) * 0.032); border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(145deg, #3a3d44, #1b1d22 32%, #0e0f12 60%, #2a2c31);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.18), 0 3rem 5rem -1.5rem oklch(10% 0.05 300 / 0.8);
  rotate: 3deg;
}
.chat__screen {
  position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.13);
  display: flex; flex-direction: column;
  background: #efe7de; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: calc(var(--w) * 0.046); color: #111; -webkit-font-smoothing: antialiased;
}
.chat__island { position: absolute; left: 50%; top: 1.8%; z-index: 3; width: 30%; height: 4%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.chat__top { display: flex; align-items: center; gap: 0.6em; padding: 3.1em 0.9em 0.7em; background: #f7f7f7; border-bottom: 1px solid #e3e3e3; }
.chat__av { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #070b17; flex: none; }
.chat__av svg { width: 1.7em; overflow: visible; }
.chat__av path { fill: none; stroke: #fff; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chat__av .chat__apex { fill: #e8380d; stroke: none; }
.chat__who { display: grid; line-height: 1.2; }
.chat__who b { font-weight: 600; }
.chat__who small { color: #6b6b6b; font-size: 0.78em; }
.chat__body { flex: 1; display: flex; flex-direction: column; gap: 0.5em; padding: 0.9em 0.8em; overflow: hidden; }
.chat__day { align-self: center; padding: 0.2em 0.7em; border-radius: 0.5em; background: #fff; color: #6b6b6b; font-size: 0.72em; }
.chat__in, .chat__out { position: relative; max-width: 84%; padding: 0.5em 0.7em 0.35em; border-radius: 0.8em; box-shadow: 0 1px 1px oklch(0% 0 0 / 0.1); font-size: 0.9em; line-height: 1.35; }
.chat__in { align-self: flex-start; background: #fff; border-top-left-radius: 0.2em; }
.chat__out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0.2em; }
.chat__in p, .chat__out p { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__in time, .chat__out time { display: flex; justify-content: flex-end; align-items: center; gap: 0.2em; margin-top: 0.15em; color: #6b7a6b; font-size: 0.7em; }
.chat__out time svg { width: 1.1em; height: 1.1em; color: #34b7f1; }
.chat__bar { display: flex; align-items: center; gap: 0.5em; margin: 0 0.6em 1.4em; }
.chat__bar span { flex: 1; padding: 0.55em 0.9em; border-radius: 999px; background: #fff; color: #8a8a8a; font-size: 0.86em; }
.chat__bar i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #1f8f5a; color: #fff; }
.chat__bar svg { width: 1.1em; height: 1.1em; }
.chat__out.is-typed { animation: chat-pop 0.35s var(--ease-snap); }
@keyframes chat-pop { from { transform: scale(0.97); } }

/* ==========================================================================
   DÓNDE ENCONTRARNOS
   ========================================================================== */
.ct-where { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--gutter) var(--sp-9); }
.spot {
  display: flex; align-items: center; gap: 0.9rem; min-height: 4.6rem;
  padding: 0.9rem 1.1rem; border-radius: var(--radius-lg);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.spot--static { cursor: default; }
a.spot:hover, button.spot:hover { transform: translateY(-3px); border-color: oklch(100% 0 0 / 0.34); }
.spot__ico { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 0.9rem; background: oklch(100% 0 0 / 0.1); }
.spot__ico svg { width: 1.35rem; height: 1.35rem; }
.spot__txt { display: grid; min-width: 0; line-height: 1.25; }
.spot__txt small { font-size: var(--fs-xs); color: oklch(86% 0.02 300); }
.spot__txt b { font-size: var(--fs-md); font-weight: 650; overflow-wrap: anywhere; }
.spot__go { margin-left: auto; font-size: 1.2rem; transition: transform 0.4s var(--ease-out); }
a.spot:hover .spot__go { transform: translateX(4px); }

/* cinco puntos: WhatsApp y correo arriba, más anchos; el resto debajo */
@media (min-width: 40rem) {
  .ct-where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spot--copy { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .ct-compose { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 6rem); }
  .ct-where { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ct-where > .spot { grid-column: span 2; }
  .ct-where > .spot:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 40rem) {
  .compose__opts { grid-template-columns: minmax(0, 1fr); }
  .ct-hero__lede { font-size: var(--fs-md); }
}

/* titular partido letra por letra (contacto.js) */
.ctw { display: inline-block; white-space: nowrap; padding: 0.1em 0.03em 0.14em; margin: -0.1em -0.03em -0.14em; clip-path: inset(-0.05em -0.1em 0 -0.1em); }
.ctw__i, .ctc { display: inline-block; }
.foot__mark span { white-space: nowrap; }
/* el correo es largo: si no cabe, corta después de la arroba */
.spot--mail .spot__txt b { overflow-wrap: normal; font-size: min(var(--fs-md), 4vw); }