/* ============================================================
   PRISMA · contact-modal.css
   Modal de contacto. Estructura e interacción calcadas de
   nk.studio: panel lateral que entra deslizándose y el resto de
   la página se difumina detrás. La paleta sí es la nuestra
   (oscura, con el naranja solo como acento), porque el sitio ya
   no tiene superficies claras.
   Lo carga js/contact-modal.js, que también inyecta el marcado.
   ============================================================ */

.cmodal {
  position: fixed; inset: 0; z-index: 300;
  visibility: hidden; pointer-events: none;
  /* al cerrar, la visibilidad espera a que termine la salida del panel (.55s); al abrir es inmediata */
  transition: visibility 0s linear .55s;
}
.cmodal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Fondo difuminado. El blur vive aquí y no en el panel para que el
   panel se mantenga nítido mientras se desliza. */
.cmodal__scrim {
  position: absolute; inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .45s var(--ease-exit);
}
.cmodal.is-open .cmodal__scrim { opacity: 1; transition-timing-function: var(--ease-enter); }

/* El scroll NO va aquí sino en .cmodal__body: con el scroll en el panel
   y el pie pegado con sticky, el final del formulario quedaba cortado. */
.cmodal__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(100%, 860px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink-2);
  border-left: 1px solid var(--line-on-ink);
  transform: translateX(100%);
  transition: transform .55s var(--ease-exit);
}
.cmodal.is-open .cmodal__panel { transform: translateX(0); transition-timing-function: var(--ease-enter); }

@media (prefers-reduced-motion: reduce) {
  .cmodal__scrim, .cmodal__panel { transition-duration: .01ms; }
}

.cmodal__panel { --cm-pad: clamp(24px, 4vw, 56px); }

/* El formulario ocupa el alto del panel y se parte en dos: el cuerpo,
   que scrollea, y el pie, que se queda fijo. min-height:0 es lo que
   permite que un hijo flexible pueda encogerse y por tanto scrollear. */
.cmodal__inner {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.cmodal__body {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--cm-pad);
  display: flex; flex-direction: column; gap: clamp(32px, 4vh, 52px);
}

.cmodal__head { display: flex; align-items: flex-start; gap: 20px; }
.cmodal__title {
  flex: 1;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--text-on-ink);
}
.cmodal__title strong { font-weight: 500; display: block; }
.cmodal__title a {
  color: var(--orange);
  text-decoration: underline; text-underline-offset: 3px;
}

.cmodal__close {
  flex: none;
  width: 42px; height: 42px; border-radius: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--line-on-ink);
  color: var(--text-on-ink); font-size: 1.1rem; line-height: 1;
  background: transparent; cursor: pointer;
  transition: background-color .2s var(--ease-ui), border-color .2s var(--ease-ui), color .2s var(--ease-ui);
}
.cmodal__close:hover {
  background: var(--orange); border-color: var(--orange); color: var(--ink);
}

/* Cada pregunta: etiqueta a la izquierda, campos a la derecha. */
.cmodal__q { display: grid; gap: 14px; }
@media (min-width: 720px) {
  .cmodal__q { grid-template-columns: 190px 1fr; gap: 24px; align-items: start; }
}
.cmodal__q > h3 {
  font-family: var(--f-text); font-weight: 400;
  font-size: .95rem; line-height: 1.35;
  color: var(--text-on-ink);
}
.cmodal__q > h3::before {
  content: '/ '; color: var(--orange);
}

/* Chips de selección múltiple */
.cmodal__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cmodal__chip {
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line-on-ink);
  background: transparent; color: var(--text-on-ink-2);
  font-size: .9rem; line-height: 1; cursor: pointer;
  transition: background-color .2s var(--ease-ui), border-color .2s var(--ease-ui), color .2s var(--ease-ui);
}
.cmodal__chip b { font-weight: 500; color: var(--text-on-ink); }
.cmodal__chip:hover { border-color: var(--text-on-ink-2); color: var(--text-on-ink); }
.cmodal__chip[aria-pressed="true"] {
  background: var(--orange); border-color: var(--orange); color: var(--ink);
}
.cmodal__chip[aria-pressed="true"] b { color: var(--ink); }

/* Campos: la etiqueta va dentro del recuadro, delante del input.
   El borde es la ÚNICA señal de que ahí se escribe, así que se sube a
   .36 de opacidad: con --line-on-ink (.14) daba 1.47 de contraste y como
   componente de UI necesita 3:1. A .36 da 3.14. */
.cmodal__field, .cmodal__area { --cm-border: rgb(var(--fg-rgb) / .36); }
.cmodal__fields { display: flex; flex-wrap: wrap; gap: 10px; }
.cmodal__field {
  flex: 1 1 200px; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--cm-border);
  transition: border-color .2s var(--ease-ui);
}
.cmodal__field:focus-within { border-color: var(--orange); }
.cmodal__field > span {
  flex: none; font-size: .9rem; color: var(--text-on-ink);
}
.cmodal__field input {
  flex: 1; min-width: 0;
  font: inherit; font-size: .9rem;
  background: transparent; border: 0; color: var(--text-on-ink);
}
.cmodal__field input::placeholder { color: var(--text-on-ink-2); font-style: italic; }
.cmodal__field input:focus { outline: none; }

.cmodal__area {
  display: block; width: 100%;
  padding: 14px 18px; border-radius: 22px;
  border: 1px solid var(--cm-border);
  transition: border-color .2s var(--ease-ui);
}
.cmodal__area:focus-within { border-color: var(--orange); }
.cmodal__area > span { display: block; font-size: .9rem; color: var(--text-on-ink); margin-bottom: 4px; }
.cmodal__area textarea {
  display: block; width: 100%; min-height: 76px; resize: vertical;
  font: inherit; font-size: .9rem;
  background: transparent; border: 0; color: var(--text-on-ink);
}
.cmodal__area textarea::placeholder { color: var(--text-on-ink-2); font-style: italic; }
.cmodal__area textarea:focus { outline: none; }

/* Pie fijo: fuera del área que scrollea, así el botón siempre se ve. */
.cmodal__foot {
  flex: none;
  padding: clamp(18px, 2.6vh, 28px) var(--cm-pad) var(--cm-pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  justify-content: space-between;
  border-top: 1px solid var(--line-on-ink);
  background: var(--ink-2);
}
.cmodal__note { font-size: .82rem; line-height: 1.4; color: var(--text-on-ink-2); max-width: 46ch; display: grid; gap: 6px; }
.cmodal__privacy { font-size: .76rem; }
.cmodal__foot .btn { flex: none; }

/* Etiqueta del programa desde el que se abrió el modal */
.cmodal__tag {
  display: flex; align-items: center; gap: 10px;
  align-self: flex-start;
  margin-top: calc(-1 * clamp(16px, 2vh, 26px));
  padding: 9px 10px 9px 16px; border-radius: 999px;
  border: 1px solid var(--orange);
  background: rgb(var(--orange-rgb) / .1);
  font-size: .88rem; line-height: 1;
}
.cmodal__tag[hidden] { display: none; }
.cmodal__tag > span:first-child { color: var(--text-on-ink-2); }
.cmodal__tag-name { color: var(--orange); font-weight: 500; }
.cmodal__tag button {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-on-ink-2); font-size: .78rem; line-height: 1;
  transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui);
}
.cmodal__tag button:hover { background: var(--orange); color: var(--ink); }
/* Contexto que viaja con el envío (data-contexto): una línea discreta debajo
   de la etiqueta, para que nadie mande sus respuestas sin saberlo. */
.cmodal__ctx {
  margin-top: calc(12px - clamp(32px, 4vh, 52px));   /* 12 px bajo la etiqueta (el cuerpo separa con gap) */
  max-width: 46ch;
  font-size: .8rem; line-height: 1.45;
  color: var(--text-on-ink-2);
}
.cmodal__ctx[hidden] { display: none; }
.cmodal__foot .btn span[aria-hidden] { font-size: .95em; }

/* Error de envío y confirmación (el formulario va a la bandeja del panel) */
.cmodal__error { font-size: .85rem; color: #FF8A6B; max-width: 40ch; }
.cmodal__error[hidden] { display: none; }
.cmodal__done { display: grid; gap: 22px; align-content: start; padding-top: 8px; outline: none; }
.cmodal__done .btn { justify-self: start; }