/* Correcciones de color sobre la plantilla.

   main.css (la plantilla) solo define transición y hover para `a`, nunca
   `color`. Eso deja mandar a Bootstrap, que pinta de azul #0d6efd todo
   enlace cuyo contenedor no imponga un color. Y como main.css sí define
   `a:hover { color: inherit }`, el enlace pasaba de azul a gris al pasar
   el ratón, que es lo que se veía en el formulario y en los datos de
   contacto.

   Aquí se corta de raíz: por defecto un enlace toma el color del texto
   que lo rodea, y los que deben leerse como enlace usan el terracota de
   la paleta. Fichero aparte, igual que cookies.css y legal.css. */

/* Beige de la casa. Es el fondo de los bloques destacados y de la barra de
   navegación en las páginas sin hero. Vive aquí, y no en la hoja de una
   página concreta, porque lo usan media docena de secciones repartidas por
   todo el sitio.

   El tono del borde es el mismo beige oscurecido, para que las tarjetas se
   recorten sin introducir un gris ajeno a la paleta. */
:root {
  --gp-beige: #f3ebd6;
  --gp-borde: #e8ddcb;
  /* La barra de navegación en las páginas sin hero. A propósito NO es el
     beige: así se despega de los bloques de contenido en vez de fundirse
     con ellos. */
  --gp-navbar: #f3f3f2;
  /* Azul grisáceo. Lo usa la home en «Áreas de Trabajo» y el panel de
     áreas de Servicios, para que los dos se reconozcan como el mismo tipo
     de bloque. */
  --gp-azul: #d7dde2;
}

a {
  color: inherit;
}

/* Enlaces que sí deben destacar. El :hover necesita ganar en
   especificidad al `a:hover { color: inherit }` de main.css, de ahí que
   cada selector lleve su contenedor delante. */
.gp-enlace,
.contact-info-inner a,
.gp-legal-parrafo a,
.form-check-label a {
  color: var(--color-primary, #b0612b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gp-enlace:hover,
.contact-info-inner a:hover,
.gp-legal-parrafo a:hover,
.form-check-label a:hover {
  color: var(--color-secondary, #304049);
}

/* Los datos de contacto (correo y teléfono) se leen mejor sin subrayado:
   el icono al lado ya indica que son pulsables. */
.contact-info-inner a {
  text-decoration: none;
}

.contact-info-inner a:hover {
  text-decoration: underline;
}

/* Autorrelleno de Chrome. Pinta el campo de celeste y se salta cualquier
   `background-color` que pongamos. El único modo de conservar el fondo
   transparente de la plantilla es retrasar su transición hasta el
   infinito; el color del texto sí admite -webkit-text-fill-color. */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--color-default, #304049);
  transition: background-color 600000s 0s;
}

/* Página actual en el menú.

   La plantilla ya marcaba la entrada activa, pero la pintaba de
   --color-secondary, que es exactamente el mismo color que el estado
   normal: el estado existía y no se veía.

   En escritorio el menú va sobre la foto del hero (texto blanco) y sobre
   la cabecera fija (texto oscuro). Un subrayado en `currentColor` funciona
   en los dos sin tener que mantener dos colores, y no puede fallar de
   contraste: si el texto se lee, el subrayado también. */
.main-menu ul li.current-menu-item > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* En el menú desplegable del móvil el fondo siempre es blanco, así que
   ahí sí se puede usar el terracota de la marca. Nada de subrayado: las
   entradas ya van separadas por una línea y se confundiría con ella. */
.xb-menu-primary li.current-menu-item > a {
  color: var(--color-primary, #b0612b);
}

/* Contraste del hero en móvil. Se queda aquí, y no en responsive.css,
   porque es una decisión de color: el texto blanco del hero necesita un
   velo oscuro para leerse sobre la foto. El resto de ajustes por ancho
   viven en responsive.css. */
@media (max-width: 991px) {
  .hero-one-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(30, 42, 49, 0.45) 0%,
      rgba(30, 42, 49, 0.75) 100%
    );
    border-radius: 20px;
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }
}