/* =====================================================================
   Auditoria UX/UI - Francisco Ahumada
   Capa de correcciones sobre UiCore Pro + Elementor.
   Sistema de diseno activo: "Ahumada Gold on Charcoal".
   Reversible: se desactiva desde wp-content/novamira-sandbox/.
   ===================================================================== */

:root {
  --fa-ink: #111111;
  --fa-ink-soft: rgba(17, 17, 17, 0.78);
  --fa-gold: #BD975A;
  --fa-gold-deep: #6D5222;
  --fa-ground: #0E0E0E;
  --fa-ground-lift: #141312;
  --fa-surface: rgba(255, 255, 255, 0.045);
  --fa-surface-solid: #1A1917;
  --fa-hair: rgba(189, 151, 90, 0.28);
  --fa-hair-strong: rgba(189, 151, 90, 0.55);
  --fa-hair-soft: rgba(255, 255, 255, 0.12);
  --fa-w1: #FFFFFF;
  --fa-w2: rgba(255, 255, 255, 0.88);
  --fa-w3: rgba(255, 255, 255, 0.80);
  --fa-w4: rgba(255, 255, 255, 0.70);
  --fa-line: #E4E1DA;
  --fa-measure: 68ch;
  --fa-shadow: 0 18px 40px rgba(17, 17, 17, 0.10);
  --fa-shadow-dark: 0 18px 40px rgba(9, 7, 4, 0.45);
}

/* ---------------------------------------------------------------------
   1. JERARQUIA TIPOGRAFICA
   Escala mas marcada y leading acorde al tamano: display apretado,
   cuerpo comodo. Se usa :where() para especificidad cero, de modo que
   cualquier ajuste posterior desde Elementor gana sin pelear.
   --------------------------------------------------------------------- */

:where(.elementor-widget-heading h1.elementor-heading-title) {
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 800;
}

:where(.elementor-widget-heading h2.elementor-heading-title) {
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}

:where(.elementor-widget-heading h3.elementor-heading-title) {
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

:where(.elementor-widget-heading h4.elementor-heading-title,
       .elementor-widget-heading h5.elementor-heading-title) {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Etiquetas tipo eyebrow: mismo tratamiento en todo el sitio */
:where(.elementor-widget-heading h6.elementor-heading-title) {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.2;
}

/* Cuerpo: 17px y leading 1.7. El color viene del token global del kit,
   que paso de 0.6 a 0.78 de opacidad. */
:where(.elementor-widget-text-editor) p {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  max-width: var(--fa-measure);
}

:where(.elementor-widget-text-editor[data-widget_type] .elementor-widget-container[style*="center"]) p,
:where(.elementor-widget-text-editor.fa-centered) p {
  margin-left: auto;
  margin-right: auto;
}

/* Palabra acentuada dentro del H1 del hero */
.fa-accent { color: var(--fa-gold); }

/* ---------------------------------------------------------------------
   1 bis. FONDO DE PAGINA
   El tema pinta todo con negro puro (#000). Se cambia al carbon de la
   paleta: mismo caracter, pero deja de aplastar las fotografias y las
   sombras, y permite que los bloques claros se lean como corte real.
   --------------------------------------------------------------------- */

.uicore-body-content,
.uicore-main-background,
.content-area,
main.site-main,
.uicore-body-content > footer {
  background-color: var(--fa-ground);
}

/* Las secciones que si declaran fondo se apoyan sobre ese carbon */
.elementor-element-1ce7d48,
.elementor-element-da9f361 { background-clip: padding-box; }

/* ---------------------------------------------------------------------
   2. CONTRASTE EN LOS BLOQUES OSCUROS A MEDIDA
   Los cuatro bloques HTML de la home fijaban el texto secundario entre
   0.42 y 0.74 de blanco. Se suben todos por encima del umbral comodo,
   sin tocar las lineas decorativas (0.11 - 0.14).
   --------------------------------------------------------------------- */

#fa-tesis-after-stats .fa-tesis-title p { color: rgba(255, 255, 255, 0.88); }
#fa-tesis-after-stats .fa-tesis-text p { color: rgba(255, 255, 255, 0.80); }
#fa-tesis-after-stats .fa-tesis-text p:first-child { color: rgba(255, 255, 255, 0.86); }
#fa-tesis-after-stats .fa-tesis-break p { color: rgba(255, 255, 255, 0.72); }
#fa-tesis-after-stats .fa-tesis-bottom p { color: rgba(255, 255, 255, 0.80); }

#fa-modelos-pi p,
#fa-modelos-pi li { color: rgba(255, 255, 255, 0.82); }

#fa-cp-slim p,
#fa-cp-slim li { color: rgba(255, 255, 255, 0.82); }

#fa-resultados-dynamic p,
#fa-resultados-dynamic li { color: rgba(255, 255, 255, 0.82); }
#fa-resultados-dynamic .fa-rd-nav .is-active { color: #BD975A; }

/* ---------------------------------------------------------------------
   3. RITMO VERTICAL EN MOVIL
   Los bloques a medida usan clamp propio; aqui solo se acota el respiro
   de las secciones de nivel superior en pantallas chicas y se garantizan
   margenes laterales reales.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
  .elementor-element-1ce7d48,
  .elementor-element-36c330e,
  .elementor-element-75b9aab,
  .elementor-element-54d2b08,
  .elementor-element-da9f361 {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 20px;
    padding-right: 20px;
  }

  #fa-tesis-after-stats .fa-tesis-wrap,
  #fa-modelos-pi .fa-modelos-wrap,
  #fa-cp-slim,
  #fa-resultados-dynamic {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------------------------------------------------------------------
   4. BOTONES / CTA
   El kit ya subio padding, peso y tamano. Aqui van los estados, que era
   lo que faltaba para que el CTA se leyera como accion y no como texto.
   --------------------------------------------------------------------- */

/* Cuerpo del boton. Se define aqui y no en el kit de Elementor porque
   UiCore Framework reescribe el kit desde sus propias opciones de tema
   y revierte cualquier cambio hecho ahi.

   El texto era blanco sobre dorado: 2.3:1, muy por debajo del minimo
   legible. Pasa a carbon sobre dorado (7.4:1). En hover el fondo se va
   al dorado profundo y el texto vuelve a blanco (7.1:1). */
.elementor-kit-7 .elementor-widget-button .elementor-button,
.elementor-kit-7 .uicore-navbar a.uicore-btn {
  padding: 19px 34px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-color: var(--fa-gold);
  color: #111111;
  fill: #111111;
  box-shadow: 0 8px 20px rgba(189, 151, 90, 0.22);
}

.elementor-kit-7 .elementor-widget-button .elementor-button:hover,
.elementor-kit-7 .elementor-widget-button .elementor-button:focus,
.elementor-kit-7 .uicore-navbar a.uicore-btn:hover,
.elementor-kit-7 .uicore-navbar a.uicore-btn:focus {
  background-color: var(--fa-gold-deep);
  color: #FFFFFF;
  fill: #FFFFFF;
}

@media (max-width: 1024px) {
  .elementor-kit-7 .elementor-widget-button .elementor-button,
  .elementor-kit-7 .uicore-navbar a.uicore-btn {
    padding: 17px 30px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .elementor-kit-7 .elementor-widget-button .elementor-button,
  .elementor-kit-7 .uicore-navbar a.uicore-btn {
    padding: 16px 26px;
    font-size: 16px;
  }
}

.elementor-widget-button .elementor-button,
.uicore-btn,
.ui-btn {
  transition: transform 0.22s ease, background-color 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.elementor-widget-button .elementor-button:hover,
.uicore-btn:hover,
.ui-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(189, 151, 90, 0.34);
}

.elementor-widget-button .elementor-button:active,
.uicore-btn:active,
.ui-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(189, 151, 90, 0.28);
}

.elementor-widget-button .elementor-button:focus-visible,
.uicore-btn:focus-visible,
.ui-btn:focus-visible {
  outline: 2px solid var(--fa-gold);
  outline-offset: 3px;
}

/* Segundo CTA del hero: contorno dorado, para que no compita con el primario */
.elementor-kit-7 .elementor-element-ba35eab .elementor-button {
  background-color: transparent;
  border: 1px solid rgba(189, 151, 90, 0.75);
  color: #FFFFFF;
  fill: #FFFFFF;
  box-shadow: none;
}

.elementor-kit-7 .elementor-element-ba35eab .elementor-button:hover,
.elementor-kit-7 .elementor-element-ba35eab .elementor-button:focus {
  background-color: var(--fa-gold);
  border-color: var(--fa-gold);
  color: #111111;
  fill: #111111;
}

/* El CTA principal no debe partirse en dos lineas en escritorio */
@media (min-width: 1025px) {
  .elementor-widget-button .elementor-button-text { white-space: nowrap; }
}

@media (max-width: 767px) {
  .elementor-widget-button .elementor-button {
    width: 100%;
    justify-content: center;
  }
  .elementor-widget-button .elementor-button-text { white-space: normal; }
}

/* Lista de tematicas: dos columnas y vinetas doradas en vez de una
   columna larga de puntos por defecto. */
.fa-temas-label {
  margin: 28px 0 12px;
  color: var(--fa-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

ul.fa-temas {
  columns: 2;
  column-gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.fa-temas li {
  break-inside: avoid;
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fa-w3);
}

ul.fa-temas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--fa-gold);
}

@media (max-width: 767px) {
  ul.fa-temas { columns: 1; }
}

/* ---------------------------------------------------------------------
   5. TARJETAS
   Borde de un pixel primero, sombra tenida despues. Nunca sombra negra pura.
   --------------------------------------------------------------------- */

#fa-modelos-pi .fa-modelo-card,
#fa-resultados-dynamic .fa-rd-box {
  border: 1px solid rgba(189, 151, 90, 0.30);
  border-radius: 16px;
  box-shadow: var(--fa-shadow-dark);
  transition: border-color 0.24s ease, transform 0.24s ease;
}

#fa-modelos-pi .fa-modelo-card:hover {
  border-color: rgba(189, 151, 90, 0.65);
  transform: translateY(-3px);
}

.elementor-element-017da3c,
.elementor-element-2c5a6ab {
  transition: border-color 0.24s ease, transform 0.24s ease;
}

.elementor-element-017da3c:hover,
.elementor-element-2c5a6ab:hover {
  border-color: rgba(189, 151, 90, 0.85) !important;
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------------
   6. TESTIMONIOS
   Ancho de lectura acotado y tarjeta con profundidad sobre el nuevo
   fondo claro de la seccion.
   --------------------------------------------------------------------- */

.elementor-element-225fc46 .swiper-slide { height: auto; }

.elementor-element-225fc46 .uicore-review-text,
.elementor-element-225fc46 .uicore-review-text p,
.elementor-element-225fc46 blockquote {
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.elementor-element-225fc46 .uicore-testimonial-item,
.elementor-element-225fc46 .uicore-review-item {
  box-shadow: var(--fa-shadow-dark);
}

/* ---------------------------------------------------------------------
   7. RESPONSIVE Y ACCESIBILIDAD
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.elementor-widget-text-editor) p {
    font-size: 16px;
    line-height: 1.68;
    max-width: none;
  }

  #fa-modelos-pi .fa-modelos-grid,
  #fa-resultados-dynamic .fa-rd-stage {
    grid-template-columns: 1fr;
  }

  .elementor-element-f13bbf4 { gap: 16px; }

  /* Objetivo tactil minimo en navegacion y listas de enlaces */
  .elementor-nav-menu a,
  .uicore-navbar a,
  .elementor-icon-list-item > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

a:focus-visible {
  outline: 2px solid var(--fa-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .elementor-widget-button .elementor-button:hover,
  .uicore-btn:hover { transform: none; }
}


/* =====================================================================
   SISTEMA UNIFICADO OSCURO
   Las cuatro paginas comparten el mismo lenguaje: eyebrow dorado con
   filete, superficies translucidas con borde dorado, escalon tonal muy
   leve entre secciones y una unica escala de blancos.
   ===================================================================== */

/* Eyebrow comun: filete dorado mas etiqueta. Misma firma en las 4 paginas. */
.fa-eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--fa-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.2;
}

.fa-eyebrow .elementor-heading-title::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--fa-gold);
  flex: none;
}

/* Filete de separacion entre bloques, en lugar de cambiar el fondo. */
.fa-rule-top { border-top: 1px solid var(--fa-hair); }

/* Superficie de tarjeta compartida. */
.fa-card,
.fa-card > .elementor-widget-container {
  transition: border-color 0.24s ease, transform 0.24s ease;
}

.fa-card:hover { transform: translateY(-3px); }
.fa-card:hover,
.fa-card:hover > .elementor-widget-container { border-color: var(--fa-hair-strong) !important; }

/* =====================================================================
   FORMULARIO SOBRE OSCURO
   El placeholder estaba al 20% de opacidad: practicamente invisible.
   Sube a 45% y el foco pasa a dorado con anillo, que antes no existia.
   ===================================================================== */

.uicore-contact-form input:not([type='submit']),
.uicore-contact-form textarea,
.uicore-contact-form select,
.elementor-field-textual,
.wpcf7 input:not([type='submit']),
.wpcf7 textarea,
.wpcf7 select {
  background-color: #161512 !important;
  border: 1px solid var(--fa-hair-soft) !important;
  border-radius: 8px !important;
  color: var(--fa-w2) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.uicore-contact-form ::placeholder,
.elementor-field-textual::placeholder,
.wpcf7 ::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1;
}

.uicore-contact-form input:not([type='submit']):focus,
.uicore-contact-form textarea:focus,
.uicore-contact-form select:focus,
.elementor-field-textual:focus,
.wpcf7 input:not([type='submit']):focus,
.wpcf7 textarea:focus {
  border-color: var(--fa-gold) !important;
  box-shadow: 0 0 0 3px rgba(189, 151, 90, 0.18) !important;
  background-color: #1A1917 !important;
  outline: none;
}

.uicore-contact-form label,
.elementor-field-label {
  color: var(--fa-w3) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* El select heredaba la flecha clara del tema y se perdia sobre oscuro. */
.uicore-contact-form select { color-scheme: dark; }

/* La misma firma de eyebrow en los bloques HTML a medida de la home,
   para que Inicio, Coaching, Conferencias y Contacto se lean como un
   solo sitio y no como cuatro plantillas distintas. */
#fa-tesis-after-stats .fa-tesis-label span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

#fa-tesis-after-stats .fa-tesis-label span::before {
  content: '';
  width: 34px;
  height: 1px;
  background: var(--fa-gold);
  flex: none;
}

/* Superficies de las paginas interiores sobre el nuevo carbon. */
.elementor-element-251cf6f6 .ui-e-desc,
.elementor-element-251cf6f6 .ui-e-desc p {
  color: var(--fa-w3);
  font-size: 15px;
  line-height: 1.6;
}

.elementor-element-251cf6f6 .ui-e-title {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* La rejilla de temas mantiene todas las tarjetas a la misma altura. */
.elementor-element-251cf6f6 > .e-con-inner > .elementor-widget,
.elementor-element-251cf6f6 > .elementor-widget { height: 100%; }
.elementor-element-251cf6f6 .elementor-widget-container { height: 100%; }