/* ==========================================================================
   css/paginas/contact.css — página de CONTACTO en M3 (perfil `contact`)
   --------------------------------------------------------------------------
   Sumario
   · Se carga con custom_globalvar1 = contact (inc/paginas.php), detrás de
     css/mutador/ y m3.css. Usa sus tokens: --paper --ink --mute --rule
     --accent --display --body --mono.
   · Todo acotado a [data-bsl-page] .mct-* para no tocar páginas SPPB.
   · La página se monta SOLO con addons genéricos de M3 (mutador /
     mutadoritems) + bloque de módulo: este CSS da forma al HTML que llevan
     sus plantillas (clases .mct-*). Ver m3-about/m3/paginas/contacto/.
   · Bloques
       K1  Sección del formulario
       K2  Cabecera (mutador): título + entradilla
       K3  Sedes (mutadoritems): hora en directo; cada una se pone en tinta
           cuando allí es de noche (.is-noche, js/paginas/contact.js)
       K4  Qué contarnos + redes (mutadoritems)
       K5  Formulario: maquetación del módulo mut-contact (.mc-field…). El módulo
       trae su CSS en línea con selectores (0,3,1): aquí todo va con
       [data-bsl-page] .mct-form .mut-contact … para ganarle sin !important.
   · Ojo: el styler (bootstrap_custom.css) fuerza con !important el tamaño de
     todo <p> y el aspecto de .btn. Por eso los textos grandes son <div> y el
     botón conserva el tamaño/mayúsculas del styler.
       K6  Mensajes del módulo (éxito / error)
       K7  Responsive (768px) y movimiento reducido
   · Sustituye al contact.css antiguo («split metrológico» para SPPB, nunca
     usado): está en recamara/monoliticos-2026-10-06/css/contact.css.
   ========================================================================== */

/* ---------- K1 · Sección del formulario (en blanco) ----------
   Fondo blanco para separar el bloque de trabajo (qué contarnos + formulario)
   del papel de la cabecera y las sedes. */
[data-bsl-page] .mct-section{
  padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 64px);
  background-color: #fff;
}

/* ---------- K2 · Cabecera (addon mutador: a1 título, a2 entradilla) ----------
   El título es un <div role="heading">: el styler fuerza h1–h6 y <p> con !important. */
[data-bsl-page] .mct-head{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding: clamp(56px, 8vw, 120px) clamp(20px, 4vw, 64px) clamp(40px, 5vw, 72px);
  color: var(--ink);
}
[data-bsl-page] .mct-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7.4vw, 124px);
  line-height: .94;
  letter-spacing: -.025em;
  max-width: 11ch;
}
[data-bsl-page] .mct-title > :last-child,
[data-bsl-page] .mct-lead > :last-child{ margin-bottom: 0; }
[data-bsl-page] .mct-lead,
[data-bsl-page] .mct-lead p{
  font-family: var(--body);
  font-size: clamp(17px, 1.35vw, 21px) !important;   /* por si el editor mete <p> */
  line-height: 1.55;
  color: var(--ink);
  max-width: 34ch;
}

/* ---------- K3 · Sedes (addon mutadoritems: un elemento por sede) ----------
   Rejilla auto-fit: vale para 2, 3, 4… sedes sin tocar el CSS.
   .is-noche la pone js/paginas/contact.js según la hora local de cada sede. */
[data-bsl-page] .mct-sedes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
[data-bsl-page] .mct-sede{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px) clamp(32px, 3.6vw, 52px);
  background-color: var(--paper);
  color: var(--ink);
  border-left: 1px solid var(--rule);
  margin-left: -1px;            /* la primera columna no enseña su borde */
  transition: background-color .8s ease, color .8s ease;
}
[data-bsl-page] .mct-sede.is-noche{ background-color: var(--ink); color: var(--paper); }
[data-bsl-page] .mct-ciudad{
  font-family: var(--body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
[data-bsl-page] .mct-estado{
  display: inline-flex;
  align-self: center;
  opacity: .75;
  line-height: 0;
}
[data-bsl-page] .mct-estado svg{ display: block; }
[data-bsl-page] .mct-hora{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 112px);
  line-height: .86;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
[data-bsl-page] .mct-hora .mct-seg{
  font-size: .34em;
  letter-spacing: 0;
  vertical-align: top;
  margin-left: .12em;
  opacity: .4;
}
[data-bsl-page] .mct-coord{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  opacity: .55;
}
[data-bsl-page] .mct-mail{
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--body);
  font-size: clamp(17px, 1.3vw, 20px);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
[data-bsl-page] .mct-mail:hover,
[data-bsl-page] .mct-mail:focus-visible{ color: var(--accent); border-color: var(--accent); }
[data-bsl-page] .mct-sede.is-noche .mct-mail:hover,
[data-bsl-page] .mct-sede.is-noche .mct-mail:focus-visible{ color: #e3937a; border-color: #e3937a; }

/* ---------- K4 · Qué contarnos + redes (dos addons mutadoritems) ---------- */
[data-bsl-page] .mct-brief{ color: var(--ink); }
[data-bsl-page] .mct-brief-title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 24px;
}
[data-bsl-page] .mct-intro{
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 0 18px;
}
[data-bsl-page] .mct-pistas{
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  max-width: 38ch;
}
[data-bsl-page] .mct-pistas li{
  position: relative;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--rule);
}
[data-bsl-page] .mct-pistas li::before{
  content: "";
  position: absolute;
  left: 0; top: 1.2em;
  width: 8px; height: 8px;
  background: var(--accent);
}
[data-bsl-page] .mct-pistas li span{ display: block; color: var(--mute); font-size: 15px; }
[data-bsl-page] .mct-redes{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  font-family: var(--body);
  font-size: 16px;
}
[data-bsl-page] .mct-redes-label{ color: var(--mute); }
[data-bsl-page] .mct-redes a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
[data-bsl-page] .mct-redes a:hover,
[data-bsl-page] .mct-redes a:focus-visible{ border-color: var(--ink); }

/* ---------- K5 · Formulario (módulo mut-contact) ----------
   El módulo pinta: .mut-contact > form > .mut-hp (trampa) + .mc-field
   (input/textarea .mc-field-input) + .mc-gdpr + .mc-submit .btn          */
[data-bsl-page] .mct-form .mut-contact form{ margin: 0; }
[data-bsl-page] .mct-form .mut-contact .mut-hp{
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
[data-bsl-page] .mct-form .mut-contact .mc-field{
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s ease;
  margin: 0;
}
[data-bsl-page] .mct-form .mut-hp + .mc-field{ border-top: 1px solid var(--ink); }
[data-bsl-page] .mct-form .mut-contact .mc-field:focus-within{ border-bottom-color: var(--ink); }
[data-bsl-page] .mct-form .mut-contact .mc-field-input{
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--body);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.35;
  color: var(--ink);
  padding: 22px 0 18px;
  resize: vertical;
  transition: padding-left .2s ease;
}
[data-bsl-page] .mct-form .mut-contact textarea.mc-field-input{ min-height: 9em; }
[data-bsl-page] .mct-form .mut-contact .mc-field-input::placeholder{ color: var(--mute); opacity: .85; }
[data-bsl-page] .mct-form .mut-contact .mc-field-input:focus{ outline: none; }
[data-bsl-page] .mct-form .mut-contact .mc-field-input:focus-visible{ box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px; }
[data-bsl-page] .mct-form .mut-contact .mc-field-input:user-invalid{ box-shadow: inset 3px 0 0 #a3311c; padding-left: 14px; }

[data-bsl-page] .mct-form .mut-contact .mc-gdpr{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 0;
  padding: 24px 0 0;
}
[data-bsl-page] .mct-form .mut-contact .mc-gdpr-check{
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px !important; height: 18px;   /* el módulo pone width:auto !important */
  margin: 2px 0 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  display: grid;
  place-content: center;
}
[data-bsl-page] .mct-form .mut-contact .mc-gdpr-check:checked{ background: var(--ink); }
[data-bsl-page] .mct-form .mut-contact .mc-gdpr-check:checked::after{
  content: ""; width: 8px; height: 8px; background: var(--paper);
}
[data-bsl-page] .mct-form .mut-contact .mc-gdpr-check:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
[data-bsl-page] .mct-form .mut-contact .mc-gdpr-label{
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--mute);
}
[data-bsl-page] .mct-form .mut-contact .mc-gdpr-label a{ color: var(--ink); }

[data-bsl-page] .mct-form .mut-contact .mc-submit{ margin-top: 36px; }
[data-bsl-page] .mct-form .mut-contact .mc-submit .btn{
  appearance: none;
  border: 0;
  border-radius: 0;
  background-color: var(--ink);
  color: var(--paper);
  line-height: 1;
  padding: 20px 34px;   /* tamaño de letra y mayúsculas: los del styler (.btn), como el resto de botones */
  box-shadow: none;
  transition: background-color .25s ease;   /* background-color, nunca el shorthand (regla del tema) */
}
[data-bsl-page] .mct-form .mut-contact .mc-submit .btn:hover{ background-color: var(--accent); }
[data-bsl-page] .mct-form .mut-contact .mc-submit .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- K6 · Mensajes del módulo ---------- */
[data-bsl-page] .mct-form .mut-contact-success,
[data-bsl-page] .mct-form .mut-contact-error,
[data-bsl-page] .mct-form .mut-contact .mc-error,
[data-bsl-page] .mct-form .alert{
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  padding: 18px 20px;
  margin: 0 0 24px;
  border: 0;
  border-left: 3px solid var(--ink);
  border-radius: 0;
  background: rgba(26,24,20,.04);
  color: var(--ink);
}
[data-bsl-page] .mct-form .mut-contact-error,
[data-bsl-page] .mct-form .mut-contact .mc-error,
[data-bsl-page] .mct-form .alert-danger,
[data-bsl-page] .mct-form .alert-error{ border-left-color: #a3311c; }

/* ---------- K7 · Responsive y movimiento ---------- */
@media (max-width: 767.98px){
  [data-bsl-page] .mct-head{ grid-template-columns: 1fr; gap: 28px; }
  [data-bsl-page] .mct-sede{ border-left: 0; margin-left: 0; border-top: 1px solid var(--rule); gap: 12px; }
  [data-bsl-page] .mct-sede:first-child{ border-top: 0; }
  [data-bsl-page] .mct-hora{ font-size: clamp(64px, 21vw, 100px); }
  [data-bsl-page] .mct-section .col-md-5{ margin-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce){
  [data-bsl-page] .mct-sede{ transition: none; }
}