/* Shaktiva · capa de página: contacto (2026-10-09). Se carga solo en esta página, después de shaktiva-fundacion.css. */

/* ------------------------------------------------------------
   Escala de la página (5 tamaños): --sk-2xl h1 · --sk-xl h2 ·
   --sk-md cuerpo y campos · --sk-sm etiquetas, casilla, error ·
   --sk-xs botón (fundación §16). Sin antetítulos (ronda 3). Los !important vencen estilos en línea del
   contenido y las reglas de Fluent Forms en style.css.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Ronda 7 (Adrián: «que se vea ELLA, pero más cool», referencia #cualificacion del Método L).
   Foto de Tamara a sangre por CSS (el contenido no la tiene): contacto-tamara-perfil-top-verde-v-01,
   1600×2400; rostro en x 45-57 % / y 57-68 % de la imagen, aire de roca arriba.
   · ESCRITORIO (≥1024): sección a sangre sobre cosmos. Foto en ::before, desde el borde izquierdo
     hasta el inicio de la columna 8 de la retícula (§19), fija mientras se recorre el formulario
     (sticky, 100svh). Velo en ::after SOLO en el 38 % derecho de la foto, hacia la card; la cara
     queda nítida. Información en las columnas 8-12, sobre cosmos liso (AA). Card de lino en las
     columnas 6-12: monta dos columnas sobre la foto, radio 4 px, sin sombra.
   · MÓVIL (<1024): foto arriba a 56svh y 100 % de ancho; fundido a cosmos solo bajo la barbilla
     (último 20 %); debajo, información y card.
   La foto es decorativa (fondo CSS, sin alt): el texto y el formulario no dependen de ella.
   ------------------------------------------------------------ */

/* 1. Sección a sangre. La isla de cabecera flota encima: sin el padding-top de «página sin héroe». */
html body main:has(.shaktiva-contact-wrap){padding-top:0 !important}
/* Contenedor de consulta: cqw mide el ancho de página sin la barra de desplazamiento. */
.entry-content:has(> .shaktiva-contact-wrap){container-type:inline-size}
.shaktiva-contact-wrap{
  --ct-fondo:#241F28;                 /* violeta-cosmos: el velo y el suelo son el mismo token */
  --ct-lila:74,46,115;                /* lila-espacial #4A2E73 */
  --ct-tinta:var(--sk-hero-tinta);    /* #F4EEE6 */
  --ct-tinta-2:var(--sk-hero-tinta-2);/* #D3C9BE */
  --ct-foto:url('/wp-content/uploads/2026/10/contacto-tamara-perfil-top-verde-v-01.webp');
  --ct-foto-alto:clamp(320px,56svh,640px);
  position:relative;isolation:isolate;
  width:100% !important;max-width:none !important;margin:0 !important;
  padding:0 0 80px !important;
  background:var(--ct-fondo);
  display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:0 !important;
  align-items:start;
}
.shaktiva-contact-wrap::before{
  content:"";display:block;grid-column:1;grid-row:1;width:100%;height:var(--ct-foto-alto);
  background:var(--ct-fondo) var(--ct-foto) 50% 80% / cover no-repeat;
}
/* Fundido al pie de la foto (móvil): empieza en el 80 %, por debajo de la barbilla (≈66 %). */
.shaktiva-contact-wrap::after{
  content:"";display:block;grid-column:1;grid-row:1;align-self:end;
  height:calc(var(--ct-foto-alto) * .2);pointer-events:none;
  background:linear-gradient(180deg,rgba(36,31,40,0) 0%,var(--ct-fondo) 100%);
}
.shaktiva-contact-wrap > *{
  position:relative;z-index:1;box-sizing:border-box;
  width:min(640px, calc(100% - 2 * var(--sk-gutter)));margin-inline:auto !important;
}
.shaktiva-contact-info-box{padding-top:24px}
.shaktiva-contact-form-box{margin-top:48px !important}

@media (min-width:1024px){
  .shaktiva-contact-wrap{
    /* Columnas de .sk-grid (§19) medidas desde el borde de la página. */
    --ct-ancho:calc(min(100cqw, var(--sk-grid-max)) - 2 * var(--sk-gutter));
    --ct-col:calc((var(--ct-ancho) - 11 * var(--sk-grid-gap)) / 12);
    --ct-paso:calc(var(--ct-col) + var(--sk-grid-gap));
    --ct-borde:calc((100cqw - min(100cqw, var(--sk-grid-max))) / 2 + var(--sk-gutter));
    /* QA v2 (alineación): texto y card, uno al lado del otro y con la misma línea superior.
       [foto: borde → inicio de la col. 4] [texto: cols. 4-7] [medianil] [card: cols. 8-12] [margen]
       La card ya no monta sobre la foto: sus dos bordes caen en líneas de columna (8 y 12). */
    grid-template-columns:
      calc(var(--ct-borde) + 3 * var(--ct-paso))
      calc(4 * var(--ct-col) + 3 * var(--sk-grid-gap))
      var(--sk-grid-gap)
      calc(5 * var(--ct-col) + 4 * var(--sk-grid-gap))
      var(--ct-borde) !important;
    grid-template-rows:auto;
    padding-bottom:0 !important;
  }
  .shaktiva-contact-wrap::before,
  .shaktiva-contact-wrap::after{
    grid-column:1 / 2;grid-row:1 / -1;align-self:start;
    position:sticky;top:0;width:100%;height:100svh;
  }
  /* Franja vertical: la foto (2:3) se ajusta por alto y se ve entera de ancho; rostro centrado. */
  .shaktiva-contact-wrap::before{background-position:50% 85%}
  /* Velo solo en el último tercio de la franja (el perfil mira a la derecha: la nariz queda
     antes del 66 %); cosmos liso en el borde, donde empieza el texto. */
  .shaktiva-contact-wrap::after{
    background:linear-gradient(90deg,
      rgba(36,31,40,0) 70%,
      rgba(var(--ct-lila),.30) 84%,
      rgba(36,31,40,.82) 94%,
      var(--ct-fondo) 100%);
  }
  .shaktiva-contact-wrap > *{width:auto;margin-inline:0 !important}
  /* Misma línea superior: el texto arranca a 152 px (como los héroes, bajo la isla) y la card también. */
  .shaktiva-contact-info-box{grid-column:2 / 3;grid-row:1;align-self:start;padding:152px 0 128px}
  .shaktiva-contact-form-box{grid-column:4 / 5;grid-row:1;align-self:start;margin:152px 0 128px !important}
}
/* (el relleno de 1024-1279 va tras la sección 3, que fija los 48 px: aquí no tenía efecto) */

/* 2. Información sobre cosmos: tinta clara (≥ 9:1). */
.shaktiva-contact-info-box h1{
  font-size:var(--sk-2xl) !important;line-height:1.08 !important;letter-spacing:-.015em;
  color:var(--ct-tinta) !important;margin:0 0 24px !important;
}
.shaktiva-contact-info-box p{
  font-size:var(--sk-md) !important;line-height:1.6 !important;
  color:var(--ct-tinta-2) !important;
}
.shaktiva-contact-info-box > p{margin:0 0 40px !important}
/* Filete oro: detalle, no superficie. */
.shaktiva-contact-info-box > div{
  border-top:1px solid var(--shaktiva-oro-border) !important;
  padding-top:32px !important;margin-top:0 !important;
}
/* Pares etiqueta/dato: etiqueta en Montserrat 600 pegada a su dato; 32 px entre pares. */
.shaktiva-contact-info-box > div > p{margin:0 0 32px !important;color:var(--ct-tinta) !important}
.shaktiva-contact-info-box > div > p.shaktiva-contact-label{
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-sm) !important;font-weight:600 !important;
  line-height:1.4 !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--ct-tinta) !important;margin:0 0 4px !important;
}
.shaktiva-contact-info-box > div > p:last-child{margin-bottom:0 !important;color:var(--ct-tinta-2) !important}
.shaktiva-contact-info-box a{
  font-size:inherit !important;min-height:44px;display:inline-flex;align-items:center;
  color:var(--ct-tinta) !important;border-bottom-color:var(--shaktiva-oro-antiguo);
}
.shaktiva-contact-info-box a:hover{color:var(--shaktiva-lila-bruma) !important}
.shaktiva-contact-info-box a:focus-visible{outline:2px solid var(--ct-tinta) !important;outline-offset:4px;box-shadow:none !important}
.shaktiva-contact-info-box a::after{font-size:inherit !important}

/* 3. La card: lino sobre la foto, radio 4 px, sin sombra; la caja interior se disuelve en ella. */
.shaktiva-contact-form-box{
  background:var(--shaktiva-lino-card) !important;
  border:1px solid rgba(36,31,40,.10) !important;
  border-radius:4px !important;
  box-shadow:none !important;
  padding:48px !important;
}
@media (max-width:600px){
  .shaktiva-contact-form-box{padding:32px 20px !important}
}
.shaktiva-contact-form-box > div{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;padding:0 !important;
}
.shaktiva-contact-form-box h2{
  font-size:2rem !important;line-height:1.12 !important;letter-spacing:-.01em; /* 32 px de la escala (§21); --sk-xl daba 29,6 */
  color:var(--sk-heading) !important;margin:0 0 32px !important;
}

/* 4. Campos: etiqueta siempre visible encima, 48 px de alto, borde con 3:1. */
.shaktiva-contact-form-box .fluentform .ff-el-group{margin-bottom:24px !important}
.shaktiva-contact-form-box .fluentform .ff-el-input--label{margin-bottom:8px !important;padding:0 !important}
.shaktiva-contact-form-box .fluentform .ff-el-input--label label{
  font-size:var(--sk-sm) !important;font-weight:600 !important;line-height:1.4 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--shaktiva-violeta-cosmos) !important;margin:0 !important;
}
.shaktiva-contact-form-box .fluentform .ff-el-is-required.asterisk-right label::after{
  font-size:inherit !important;color:var(--shaktiva-lila-espacial) !important;margin-left:4px !important;
}
.shaktiva-contact-form-box .fluentform .ff-el-form-control{
  background:var(--shaktiva-blanco-lino) !important;
  border:1px solid rgba(36,31,40,.55) !important;
  border-radius:2px !important;
  font-family:var(--shaktiva-font-text) !important; /* el plugin imponía la pila del sistema */
  font-size:var(--sk-md) !important;line-height:1.5 !important;
  color:var(--shaktiva-carbon) !important;
  padding:0 16px !important;
  box-shadow:none !important;
  transition:border-color .2s var(--sk-ease),background-color .2s var(--sk-ease) !important;
}
.shaktiva-contact-form-box .fluentform :is(input,select).ff-el-form-control{height:48px !important;min-height:48px !important}
/* El select quedaba en 24 px (solo los input tenían alto). */
.shaktiva-contact-form-box .fluentform select.ff-el-form-control{padding:0 40px 0 16px !important;cursor:pointer}
.shaktiva-contact-form-box .fluentform textarea.ff-el-form-control{
  min-height:144px !important;padding:12px 16px !important;line-height:1.6 !important;resize:vertical;
}
.shaktiva-contact-form-box .fluentform .ff-el-form-control::placeholder{
  color:var(--shaktiva-carbon-soft) !important;opacity:.8 !important;
}

/* 5. Foco visible (style.css lo anulaba con outline:none). */
.shaktiva-contact-form-box .fluentform .ff-el-form-control:focus,
.shaktiva-contact-form-box .fluentform .ff-el-form-control:focus-visible{
  outline:2px solid var(--shaktiva-lila-espacial) !important;
  outline-offset:2px !important;
  border-color:var(--shaktiva-lila-espacial) !important;
  background:var(--shaktiva-blanco-lino) !important;
  box-shadow:none !important;
}

/* 6. Errores legibles: tinta lila de marca (≈9:1 sobre lino-card) en vez del
   rojo del plugin (≈2,8:1), y campo marcado con borde de 2 px. */
.shaktiva-contact-form-box .fluentform .ff-el-is-error .ff-el-form-control{
  border:2px solid var(--shaktiva-lila-espacial) !important;
}
.shaktiva-contact-form-box .fluentform .ff-el-is-error .error,
.shaktiva-contact-form-box .fluentform .text-danger,
.shaktiva-contact-form-box .ff-errors-in-stack{
  font-size:var(--sk-sm) !important;line-height:1.4 !important;font-weight:500 !important;
  color:var(--shaktiva-lila-espacial) !important;margin-top:8px !important;
}

/* 6 bis. Casilla de privacidad (nueva en Fluent 3): misma pieza que en Método L, en claro.
   La etiqueta entera es el objetivo (≥44 px); texto a 15 px (estaba a 18,4 px, 7.º tamaño). */
.shaktiva-contact-form-box .fluentform .ff-el-form-check{margin:0 !important}
.shaktiva-contact-form-box .fluentform .ff-el-form-check-label{
  display:flex !important;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;box-sizing:border-box;
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-sm) !important;font-weight:400 !important;
  line-height:1.55 !important;color:var(--shaktiva-carbon-soft) !important;cursor:pointer;margin:0 !important;
}
.shaktiva-contact-form-box .fluentform .ff_tc_checkbox{flex:0 0 20px;display:flex;margin-top:2px}
.shaktiva-contact-form-box .fluentform .ff-el-form-check-input{
  width:20px !important;height:20px !important;margin:0 !important;accent-color:var(--shaktiva-lila-espacial);cursor:pointer;
}
.shaktiva-contact-form-box .fluentform .ff_t_c{margin:0 !important;padding:0 !important}
.shaktiva-contact-form-box .fluentform .ff_t_c a{color:var(--shaktiva-violeta-cosmos) !important;text-decoration:underline !important;text-underline-offset:3px}
.shaktiva-contact-form-box .fluentform .ff-el-is-error .ff-el-form-check-label{color:var(--shaktiva-carbon-soft) !important}
.shaktiva-contact-form-box .fluentform .ff-el-is-error .ff-el-form-check-label a{color:var(--shaktiva-violeta-cosmos) !important}

/* 7. Botón: el de la fundación (tinta sobre claro), a 48 px y dentro de la escala.
   El texto vive en ::after (style.css); su color ya se hereda (fundación §15, V01). */
.shaktiva-contact-form-box .fluentform .ff_submit_btn_wrapper{margin:32px 0 0 !important}
.shaktiva-contact-form-box .fluentform .ff-btn-submit{
  min-height:48px !important;height:48px;padding:0 28px !important;margin:0 !important;
  font-weight:500 !important;letter-spacing:.08em !important;
}
/* Fluent Forms baja el botón a opacity .8 en foco y hover: parecía deshabilitado. */
.shaktiva-contact-form-box .fluentform .ff-btn-submit:is(:hover,:focus,:focus-visible,:active){opacity:1 !important}
.shaktiva-contact-form-box .fluentform .ff-btn-submit{height:auto !important;padding:14px 28px !important;white-space:normal !important;line-height:1.4 !important}
/* style.css pinta un texto fijo («ENVIAR MENSAJE →») en ::after: se suma al del botón. */
.shaktiva-contact-form-box .fluentform .ff-btn-submit::after{content:none !important}

/* ---------- QA v3 · Héroe partido (decisión, 2026-10-10) ----------
   Contacto NO adopta el héroe unificado (texto a la izquierda sobre la foto a sangre, 100svh):
   · La foto es un perfil vertical (2:3) con el rostro en la franja izquierda: el bloque de texto
     en el borde izquierdo de la caja caería encima de la cara, y ahí no puede ir velo.
   · El trabajo de la página es el formulario: un héroe de 100svh lo mandaría bajo el pliegue.
   Sí comparte con el héroe unificado: la línea superior (152 px, bajo la isla), el h1 al escalón
   --sk-display-hero con interlineado 1.02, -0,015em y text-wrap:balance (3 líneas en las cols. 4-7)
   y la retícula de .sk-grid: texto en las cols. 4-7 y card en las 8-12, con la misma línea superior
   (medido con getBoundingClientRect a 1024, 1280, 1366, 1440 y 1920: desfase 0 px). */
@media (min-width:1024px){
  html body .shaktiva-contact-wrap .shaktiva-contact-info-box h1.shaktiva-hero-title{ /* (0,3,3): vence a fundación §22 */
    font-size:var(--sk-display-hero) !important;line-height:1.02 !important;letter-spacing:-.015em !important;text-wrap:balance;
  }
}
/* 1024-1279: la card mide 371-464 px; 48 px de relleno dejaban los campos en 273 px. */
@media (min-width:1024px) and (max-width:1279px){
  .shaktiva-contact-wrap .shaktiva-contact-form-box{padding:40px 32px !important}
}

/* Revisión cruzada Codex #9 («formulario directo sobre la piedra»): sustituida en la ronda 7
   por la card de lino sobre la foto (sección 3). */