/* ============================================================
   RaptorCX — módulo compartido: formulario de contacto + panel de
   contacto ("svc-contact") + logos de clientes ("rx-clients").

   Extraído de service.css (2026-07-17) para el HOME: medido con la API
   de cobertura de CSS de Chrome DevTools que el home solo usa 5.665 de
   82.223 bytes (6.9%) de service.css — el resto son secciones de las
   landings de servicio (hero, problema, showcase, FAQ) que el home no
   renderiza. Este archivo contiene exactamente esos componentes
   compartidos, completos (incluye estados :focus/:checked/.is-invalid/
   hover aunque la medición automática de cobertura no los haya
   marcado, porque no se disparó esa interacción específica durante la
   medición — se agregaron a mano revisando el componente completo en
   el código fuente de service.css, no solo el fragmento reportado).

   service.css SIGUE intacto y sin cambios — las landings de servicio,
   /contacto/, /planes/ y /socios/ lo siguen cargando completo, sin
   ningún riesgo para esas páginas.
   ============================================================ */

.svc-check { width: 18px; height: 18px; flex: none; color: var(--rx-purple); }

/* ---------- Panel de contacto ("svc-contact") ---------- */
.svc-contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: stretch; }
.svc-contact__pitch {
  background: linear-gradient(160deg, #2a1a66 0%, #532BCC 60%, #6835FE 100%);
  border-radius: 24px; padding: 40px; color: #fff; display: flex; flex-direction: column;
}
.svc-contact__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.svc-contact__title { font-size: clamp(26px, 3vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -.8px; margin: 12px 0 0; color: #fff; }
.svc-contact__desc { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 16px 0 0; }
.svc-contact__points { list-style: none; margin: auto 0 0; padding: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.svc-contact__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #fff; }
.svc-contact__points .svc-check { color: #fff; }

.svc-contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.svc-contact__card {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.svc-contact__card-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.svc-contact__card-value { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; }
a.svc-contact__card-value:hover { color: var(--rx-purple-lt); }

/* ---------- Logos de clientes (prueba social) ---------- */
.rx-clients { padding: 56px 0 64px; background: var(--rx-bg); border-top: 1px solid var(--rx-border); }
.rx-clients__eyebrow {
  text-align: center; margin: 0 0 34px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rx-ink-40);
}
.rx-clients__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px 56px; }
.rx-clients__logo { display: inline-flex; }
.rx-clients__logo img {
  height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .55; transition: filter .3s ease, opacity .3s ease;
}
.rx-clients__logo img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 600px) {
  .rx-clients { padding: 44px 0 48px; }
  .rx-clients__grid { gap: 26px 36px; }
  .rx-clients__logo img { height: 30px; max-width: 120px; }
}

/* ---------- Formulario (reutilizable) ---------- */
.rx-form { background: #fff; border: 1px solid var(--rx-border); border-radius: 24px; padding: 28px; box-shadow: 0 10px 40px rgba(22,36,49,.07); }
.rx-form__title { font-size: 22px; font-weight: 600; letter-spacing: -.5px; color: var(--rx-ink); margin: 0; }
.rx-form__sub { font-size: 14.5px; line-height: 1.5; color: var(--rx-ink-55); margin: 6px 0 16px; }
.rx-form__alert { font-size: 14.5px; line-height: 1.45; border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; }
.rx-form__alert--ok  { background: rgba(34,160,90,.10); color: #1c7a45; border: 1px solid rgba(34,160,90,.25); }
.rx-form__alert--err { background: rgba(214,60,60,.08); color: #b3261e; border: 1px solid rgba(214,60,60,.22); }
.rx-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rx-form__body { display: flex; flex-direction: column; gap: 12px; }
.rx-field { display: flex; flex-direction: column; gap: 5px; }
.rx-field__label { font-size: 13px; font-weight: 600; color: var(--rx-ink-70); }
.rx-field input, .rx-field textarea, .rx-select select {
  width: 100%; font-family: var(--rx-font); font-size: 15px; color: var(--rx-ink);
  background: var(--rx-bg-soft); border: 1px solid var(--rx-border); border-radius: 10px;
  padding: 10px 14px; transition: border-color .18s, box-shadow .18s;
}
.rx-field textarea { resize: vertical; min-height: 76px; }
.rx-field input:focus, .rx-field textarea:focus, .rx-select select:focus {
  outline: none; border-color: var(--rx-purple); box-shadow: 0 0 0 3px rgba(83,43,204,.14); background: #fff;
}
/* Estado de error de campo (validación accesible) */
.rx-field__error { font-size: 12.5px; line-height: 1.4; color: #c0271f; margin-top: 2px; }
.rx-field__error:empty { display: none; }
.rx-field__count { align-self: flex-end; font-size: 12px; color: var(--rx-ink-40); margin-top: 2px; font-variant-numeric: tabular-nums; }
.rx-field__count.is-near { color: #c0271f; }
.rx-field.is-invalid input,
.rx-field.is-invalid textarea { border-color: #d7342a; background: #fff7f6; }
.rx-field.is-invalid input:focus,
.rx-field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(215,52,42,.16); }
.rx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rx-select { position: relative; display: block; }
.rx-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--rx-ink-55); border-bottom: 2px solid var(--rx-ink-55);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.rx-select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }

/* Consentimiento de tratamiento de datos (habeas data) — checkbox obligatorio */
.rx-consent { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 4px; }
.rx-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.rx-consent__box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rx-border); border-radius: 6px; background: var(--rx-bg); color: #fff;
  transition: background .15s, border-color .15s;
}
.rx-consent__box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .12s; }
.rx-consent input:checked + .rx-consent__box { background: var(--rx-purple); border-color: var(--rx-purple); }
.rx-consent input:checked + .rx-consent__box svg { opacity: 1; }
.rx-consent input:focus-visible + .rx-consent__box { outline: 2px solid var(--rx-purple-lt); outline-offset: 2px; }
.rx-consent-field.is-invalid .rx-consent__box { border-color: #c0392b; }
.rx-consent__text { font-size: 13.5px; line-height: 1.45; color: var(--rx-ink-70); }
.rx-consent__text a { color: var(--rx-purple); text-decoration: underline; }
.rx-consent-field .rx-field__error { margin-top: 4px; }

.rx-form__submit { align-self: flex-start; margin-top: 4px; }

/* Badge de confianza sobre el formulario */
.ct-trust {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 13.5px; font-weight: 600; color: var(--rx-purple);
  background: #fff; border: 1px solid var(--rx-border); border-radius: 100px;
  padding: 8px 16px; box-shadow: 0 8px 24px rgba(22,36,49,.08);
}
.ct-trust svg { width: 15px; height: 15px; fill: rgba(104,53,254,.15); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .svc-contact__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .svc-contact__cards { grid-template-columns: 1fr; }
  .rx-field-row { grid-template-columns: 1fr; }
  .svc-contact__pitch,
  .rx-form { padding: 22px; }
}