/* ============================================================================
   Pitágoras Cloud · Contacto
   Carga DESPUÉS de portada.css, de donde hereda nav, megamenús y botones.
   ========================================================================== */

.pagina-contacto { --nav-h: 76px; }
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

/* Fondo (D-064). El problema del primer montaje no era la fotografía sino el
   velo: `tinta-fondo` mide 1,85:1 en el tercio izquierdo —donde va el texto—
   y por eso exigía un velo al 90 %, que es justo lo que apagaba el color.
   `fondo-futuro` mide 16,89:1 en esa misma franja con más saturación media,
   así que aguanta un velo mucho más ligero y el color por fin se aprecia:
   la retícula se ve plena arriba, abajo y alrededor del panel. */
.piso { position: relative; isolation: isolate; }
.fondo { position: absolute; inset: 0; z-index: -2; display: block; }
.fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; display: block; }
.fondo__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--ink-a) / .88) 0, rgb(var(--ink-a) / .72) 34%, rgb(var(--ink-a) / .34) 58%, rgb(var(--ink-a) / .22) 100%),
    linear-gradient(0deg, var(--ink) 0, rgb(var(--ink-a) / .30) 26%, rgb(var(--ink-a) / 0) 58%, rgb(var(--ink-a) / .34) 100%);
}
@media (max-width: 980px) {
  /* En una sola columna el texto cruza toda la imagen: el velo vuelve a subir */
  .fondo__velo {
    background: linear-gradient(180deg, rgb(var(--ink-a) / .90) 0, rgb(var(--ink-a) / .80) 22%, rgb(var(--ink-a) / .84) 100%);
  }
}

.piso--contacto { padding-block: calc(var(--nav-h) + clamp(44px, 7vh, 84px)) clamp(64px, 10vh, 120px); }
.ct {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}

/* ------------------------------------------------ columna izquierda --- */
.ct__title {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: 'opsz' 96;
  font-size: clamp(2.2rem, 1rem + 3.6vw, 3.9rem); line-height: 1.0; letter-spacing: -.035em;
  text-wrap: balance; color: var(--paper);
}
.ct__lead {
  margin: clamp(16px, 2.4vh, 26px) 0 0; max-width: 46ch;
  font-size: clamp(.95rem, .9rem + .3vw, 1.06rem); line-height: 1.68; color: var(--paper-dim); text-wrap: pretty;
}

.ct__datos { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: grid; gap: 16px; }
.ct__datos li { display: grid; gap: 4px; }
.ct__dato-k { font: 600 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }
.ct__dato-v { font: 500 clamp(15px, .92rem + .3vw, 17px)/1.4 var(--font-mono); color: var(--paper); text-decoration: none; }
a.ct__dato-v { border-bottom: 1px solid var(--rule); width: fit-content; transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out); }
a.ct__dato-v:hover { color: var(--magenta); border-bottom-color: var(--magenta); }

/* La promesa de qué pasa después es lo que baja el miedo a enviar: el
   visitante sabe exactamente en qué se está metiendo al darle al botón. */
.ct__promesa {
  margin-top: clamp(28px, 4vh, 44px); padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--rule); border-radius: 14px;
  background: linear-gradient(180deg, rgb(29 24 48 / .58), rgb(18 14 28 / .70));
}
.ct__promesa-t { margin: 0 0 12px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ct__promesa-l { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.ct__promesa-l li { font-size: 13.5px; line-height: 1.55; color: var(--paper-dim); }
.ct__promesa-l li::marker { color: var(--magenta); font-weight: 700; }

/* --------------------------------------------------- el formulario --- */
.ct__panel {
  padding: clamp(22px, 2.8vw, 36px);
  border: 1px solid var(--rule); border-radius: 18px;
  background: linear-gradient(180deg, rgb(24 19 40 / .92), rgb(14 11 24 / .96));
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / .9);
}
.frm { display: grid; gap: clamp(18px, 2.2vh, 24px); }
.frm__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.frm__campo { display: grid; gap: 7px; }
.frm__campo label, .frm__paquetes legend {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dim);
}
.frm__campo label b, .frm__acepta b { color: var(--magenta); }
.frm__hint { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--paper-faint); }

.frm input[type="text"], .frm input[type="email"], .frm input[type="tel"], .frm textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--rule); background: rgb(12 10 22 / .72); color: var(--paper);
  font: 400 15px/1.5 var(--font-body);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.frm textarea { resize: vertical; min-height: 130px; }
.frm ::placeholder { color: var(--paper-faint); }
.frm input:focus-visible, .frm textarea:focus-visible {
  outline: none; border-color: var(--magenta); background: rgb(18 14 30 / .9);
  box-shadow: 0 0 0 3px rgb(233 79 209 / .18);
}

/* ------------------------------------------------------- las fichas --- */
.frm__paquetes { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.frm__paquetes legend { padding: 0; margin-bottom: 4px; }
.frm__grupo-t {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--paper-dim);
}
.frm__punto { width: 7px; height: 7px; border-radius: 2px; display: block; }
.frm__punto--magenta { background: var(--magenta); }
.frm__punto--teal { background: var(--teal); }
.frm__punto--gold { background: var(--gold); }
.frm__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: rgb(29 24 48 / .5);
  font-size: 13px; line-height: 1.2; color: var(--paper-dim);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover span { border-color: var(--paper-faint); color: var(--paper); }
}
.chip input:checked + span {
  border-color: var(--magenta); background: rgb(233 79 209 / .16); color: var(--paper); font-weight: 600;
}
.chip--teal input:checked + span { border-color: var(--teal); background: rgb(79 184 176 / .16); }
.chip--gold input:checked + span { border-color: var(--gold); background: rgb(232 162 61 / .16); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Cuando el visitante llega desde el botón de un paquete, su ficha ya viene
   marcada: un destello corto lo señala sin obligarlo a buscarla. */
.is-precargado .chip input:checked + span { animation: chipLlega 1100ms var(--ease-out) 1; }
@keyframes chipLlega {
  0%   { box-shadow: 0 0 0 0 rgb(233 79 209 / .55); }
  70%  { box-shadow: 0 0 0 10px rgb(233 79 209 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(233 79 209 / 0); }
}

.frm__rehacer {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: none;
  color: var(--magenta); border-bottom: 1px solid rgb(233 79 209 / .45);
}
/* --paper-faint no llega a 4,5:1 sobre los fondos de marca: en texto
   informativo pequeño se usa --paper-dim (ver D-062). */
.frm__nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--paper-dim); }

.frm__acepta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start;
  padding-top: 4px; cursor: pointer;
}
.frm__acepta input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--magenta); cursor: pointer; }
.frm__acepta span { font-size: 12.5px; line-height: 1.55; color: var(--paper-dim); }

.frm__acciones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.btn--grande { padding: 20px 30px; font-size: 14px; }

.frm__aviso { margin: 0; font-size: 13px; line-height: 1.5; min-height: 1px; }
.frm__aviso.is-mal  { color: #FF9AD6; }
.frm__aviso.is-bien { color: var(--teal); }

/* ========================================================= RESPONSIVE == */
@media (max-width: 980px) {
  .ct { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 560px) {
  .frm__fila { grid-template-columns: minmax(0, 1fr); }
  .frm__acciones .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .is-precargado .chip input:checked + span { animation: none; }
  .chip span, .frm input, .frm textarea, a.ct__dato-v { transition: none; }
}

/* La trampa para robots: fuera de pantalla, sin display:none —algunos robots
   saltan lo que está oculto con display— y excluida del orden de tabulación. */
.frm__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }