/* ==========================================================================
   contactanos.css — /contactanos: formulario editorial.
   Hero oscuro; al bajar al formulario el fondo pasa a claro (JV.themeRamp, como el Home). Todos los colores
   salen de --bg / --fg / --fg-2 / --calido (el hero fija los suyos oscuros). Bordes duros, sin sombras.
   ========================================================================== */

.js:not(.rm) .fld,
.js:not(.rm) .kf__actions { opacity: 0; }

/* ══ HERO (siempre oscuro) ═════════════════════════════════════════════════ */
.khero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--negro);
  --fg: var(--blanco); --fg-2: var(--gris); --calido: var(--brass);
  --linea: rgb(255 255 255 / .2); --linea-fuerte: rgb(255 255 255 / .5);
  color: var(--blanco);
}
.khero__pattern { position: absolute; inset: 0; z-index: -1; opacity: .06; --pat-size: 420px; }
.khero__top { padding: calc(var(--header-h) + 24px) var(--pad-r) clamp(28px, 6vh, 64px) var(--pad-l); }
.khero__intro { display: grid; gap: 14px; max-width: 36ch; }
.khero__lead { font-size: clamp(1.15rem, .9rem + 1vw, 1.65rem); font-weight: 600; line-height: 1.24; letter-spacing: -.01em; text-wrap: balance; }
.khero__title { position: relative; margin: 0; padding-top: 18px; }
.khero__title::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-marca); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.js:not(.rm) .khero__title { --rule: 0; }
.khero__title [data-fit] { font-size: 10vw; line-height: .86; padding-bottom: .02em; color: var(--blanco); }

/* ══ FORMULARIO ════════════════════════════════════════════════════════════ */
.kform { background: var(--bg); color: var(--fg); padding: clamp(56px, 10vh, 120px) var(--pad-r) clamp(64px, 11vh, 140px) var(--pad-l); }
.kform__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 72px); }
@media (min-width: 1000px) {
  .kform__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 40px); align-items: start; }
  .kaside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 24px); }
  .kmain { grid-column: 6 / -1; }
}

/* Lateral */
.kaside { display: grid; gap: clamp(16px, 2vw, 26px); }
.kaside__title { font-size: clamp(2.6rem, 1rem + 5.4vw, 6rem); line-height: .9; }
.kaside__text { color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.3; max-width: 26ch; }
.kaside__priv { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; max-width: 36ch; padding-left: 14px; border-left: 2px solid var(--rojo); }
.klinks { display: grid; gap: 8px; padding-top: 6px; }
.klinks .eyebrow { margin-top: 10px; }
.klinks ul { display: grid; gap: 4px; }
.klinks a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; }

/* Campos */
.kf { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.kf[hidden] { display: none; }   /* display:grid anularía el atributo hidden */
.fld { display: grid; gap: 8px; }
.fld > label, .fld__label { font: 700 12px/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg); }

.fld input[type="text"], .fld input[type="email"], .fld select, .fld textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  border: 1px solid var(--linea-fuerte); border-radius: 0; background: transparent; color: var(--fg);
  font: 400 1rem/1.5 var(--font-body);   /* 16 px: iOS no hace zoom al enfocar */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none; -webkit-appearance: none;
}
.fld textarea { min-height: 190px; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--fg-2); opacity: 1; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--fg); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--fg); }
.fld [aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.fld input:-webkit-autofill { -webkit-text-fill-color: var(--fg); box-shadow: 0 0 0 100px var(--bg) inset; caret-color: var(--fg); }

/* Select con flecha propia */
.sel { position: relative; }
.sel select { padding-right: 48px; cursor: pointer; }
.sel select:invalid { color: var(--fg-2); }
.sel option { color: #141312; background: #fff; }
.sel::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: rotate(45deg); pointer-events: none; }

/* Errores: junto al campo, no solo arriba */
.fld__err { color: var(--rojo); font: 600 .875rem/1.4 var(--font-body); }
.fld__err::before { content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .5em; background: var(--rojo); color: var(--blanco); font-weight: 800; font-size: .8em; }
.fld__err[hidden] { display: none; }
.fld__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-height: 1.4em; }
.fld__count { margin-left: auto; color: var(--fg-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.fld__count.is-over { color: var(--rojo); font-weight: 700; }

/* Casilla de consentimiento */
.fld > label.chk { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; cursor: pointer; font: 400 var(--fs-small)/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg-2); }   /* más específico que «.fld > label» (etiqueta en mayúsculas) */
.chk input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 24px; height: 24px; border: 1px solid var(--linea-fuerte); border-radius: 0; background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); }
.chk input::after { content: ""; width: 6px; height: 12px; margin-top: -2px; border-right: 2px solid var(--blanco); border-bottom: 2px solid var(--blanco); transform: rotate(45deg) scale(0); transition: transform var(--t-fast) var(--ease-out); }
.chk input:checked { background: var(--rojo); border-color: var(--rojo); }
.chk input:checked::after { transform: rotate(45deg) scale(1); }
.chk input:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.chk input[aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }

/* Robots: fuera de la vista y del teclado (no display:none: algunos robots lo detectan) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Resumen de estado (errores generales) */
.kf__resumen { padding: 14px 16px; border: 1px solid var(--rojo); border-left-width: 4px; color: var(--fg); font-weight: 600; line-height: 1.4; }
.kf__resumen[hidden] { display: none; }

.kf__actions { display: flex; align-items: center; gap: 20px; padding-top: 6px; }
.kf__send { min-height: 56px; padding-inline: 32px; font-size: .95rem; }
.kf__send[disabled] { opacity: .6; cursor: progress; pointer-events: none; }
.kf__send.is-loading .arrow { animation: kf-pulse 1s ease-in-out infinite; }
@keyframes kf-pulse { 50% { transform: translateX(8px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .kf__send.is-loading .arrow { animation: none; } }

.knotice { padding: 22px 24px; border: 1px solid var(--linea-fuerte); font-size: var(--fs-lead); line-height: 1.3; }

/* Éxito */
.kok { display: grid; gap: clamp(14px, 2vw, 22px); justify-items: start; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--linea-fuerte); }
.kok[hidden] { display: none; }
.kok:focus { outline: none; }
.kok__title { font-size: clamp(3rem, 1rem + 8vw, 8rem); line-height: .86; }
.kok__text { font-size: var(--fs-lead); color: var(--fg-2); line-height: 1.3; }
.kok__sign { width: min(100%, 360px); color: var(--rojo); }
.firma--kok { width: 100%; height: auto; }
.kok__cta { display: flex; flex-wrap: wrap; gap: 14px; }