/* CSS propio del proyecto. Usar siempre los tokens, nunca hex sueltos. */

body{
  font-family:var(--slx-font-body);
  font-size:var(--slx-fs-base);
  line-height:var(--slx-lh-base);
  color:var(--slx-ink);
}

h1,h2,h3,h4{
  font-family:var(--slx-font-display);
  line-height:var(--slx-lh-tight);
  color:var(--slx-navy-900);
}

/* Foco visible: requisito de accesibilidad, no negociable */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--slx-green-600);
  outline-offset:2px;
}
/* Sobre fondo oscuro el foco necesita la variante clara para verse */
.slx-on-dark a:focus-visible,.slx-on-dark button:focus-visible{
  outline-color:var(--slx-green-300);
}

/* --------------------------------------------------------------------------
   Botón de acción
   green-600 con texto blanco → 5,02:1, cumple AA para texto normal.
   No usar texto marino sobre el verde: solo alcanza 3,29:1.
   -------------------------------------------------------------------------- */
.slx-btn{
  display:inline-flex;align-items:center;gap:var(--slx-sp-1);
  background:var(--slx-green-600);color:var(--slx-white);
  padding:var(--slx-sp-2) var(--slx-sp-4);
  border-radius:var(--slx-radius-sm);
  font-weight:600;text-decoration:none;
  transition:transform var(--slx-dur) var(--slx-ease),background var(--slx-dur) var(--slx-ease);
}
.slx-btn:hover{background:var(--slx-green-800);transform:translateY(-1px);}

/* Variante secundaria sobre claro */
.slx-btn--outline{
  background:transparent;color:var(--slx-navy-900);
  border:1px solid var(--slx-rule-light);
}
.slx-btn--outline:hover{border-color:var(--slx-navy-900);background:transparent;}

/* Variante sobre fondo oscuro: el blanco sólido rinde mejor que el verde */
.slx-btn--on-dark{background:var(--slx-white);color:var(--slx-green-800);}
.slx-btn--on-dark:hover{background:var(--slx-gray-100);}

/* --------------------------------------------------------------------------
   Enlaces de texto
   Sobre blanco el verde 600 cumple (5,02:1). Sobre gray-100 se queda en 4,46:1,
   así que ahí se usa marino y el verde queda para el subrayado.
   -------------------------------------------------------------------------- */
.slx-link{
  color:var(--slx-green-800);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--slx-dur) var(--slx-ease);
}
.slx-link:hover{color:var(--slx-green-600);}

/* --------------------------------------------------------------------------
   Formulario de contacto (Contact Form 7)
   -------------------------------------------------------------------------- */
.wpcf7 label{display:block;font-weight:600;color:var(--slx-navy-900);margin-bottom:var(--slx-sp-3);}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{
  width:100%;margin-top:.4em;padding:.7em .9em;border:1px solid var(--slx-gray-300);
  border-radius:var(--slx-radius-sm);font-family:var(--slx-font-body);font-size:var(--slx-fs-base);
}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--slx-green-600);box-shadow:0 0 0 3px rgba(21,128,61,.15);}
.wpcf7-acceptance label{display:flex;align-items:flex-start;gap:.6em;font-weight:400;font-size:var(--slx-fs-sm);}
.wpcf7 input[type=submit]{
  background:var(--slx-green-600);color:var(--slx-white);border:0;padding:var(--slx-sp-2) var(--slx-sp-4);
  border-radius:var(--slx-radius-sm);font-weight:600;cursor:pointer;transition:background var(--slx-dur) var(--slx-ease);
}
.wpcf7 input[type=submit]:hover{background:var(--slx-green-800);}
.wpcf7-not-valid-tip{color:#B3261E;font-size:var(--slx-fs-xs);margin-top:.3em;}

/* Honeypot antispam: campo real en el DOM (los bots que autorrellenan lo
   detectan), invisible y sin etiqueta para cualquier persona. No usar
   display:none — algunos lectores de formularios de bots lo ignoran mejor
   que un desplazamiento fuera de pantalla. */
.slx-hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;
  width:1px!important;height:1px!important;overflow:hidden!important;}
input.slx-hp{position:absolute;left:-9999px;}