/*--------------------------------------------------------------
  Ajustes propios, cargados despues de all.min.css

  El proyecto no tiene build de Sass: assets/scss/ no se compila y lo que
  sirve la web es assets/css/all.min.css, minificado. Para no tocar ese
  bundle, los ajustes van aqui.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  Contraste del verde corporativo en texto (WCAG 1.4.3, nivel AA)

  #3DB395 sobre blanco da 2,60:1 y el minimo para texto es 4,5:1. No se puede
  arreglar aclarando el fondo: el verde tiene una luminancia de 0,354, asi que
  un fondo mas claro tendria que llegar a 1,768 y el blanco puro es 1,0.

  La solucion es una variante mas oscura del MISMO color, solo para texto:
  #2B7E69 es el mismo tono (H165) y la misma saturacion (49%), con 14 puntos
  menos de luminosidad. Da 4,89:1.

  #3DB395 no se toca en ningun otro sitio: iconos, bordes, vinetas y todo lo
  que va sobre fondo oscuro (donde ya da 6,43:1) siguen igual.
--------------------------------------------------------------*/

:root {
  --iz-verde: #3db395;      /* el color de marca */

  /*
    DECISION PENDIENTE. Esta variable controla el verde de todo lo que lleva
    texto: enlaces, botones, barra fija, velo del formulario, vinetas e
    iconos. Hoy vale lo mismo que el color de marca, asi que esos elementos
    se quedan en 2,60:1 sobre blanco cuando WCAG pide 4,5:1.

    Cambiando SOLO esta linea a #2b7e69 (mismo tono H165 y misma saturacion,
    14 puntos menos de luminosidad) todo eso pasa a 4,89:1 y la web cumple
    el nivel AA de contraste.
  */
  --iz-verde-texto: #3db395;
}

/* :not(.btn) es importante: un boton lleva el verde de FONDO, asi que si le
   pintamos tambien el texto de verde se queda invisible. */
a:not(.btn),
.heading__subtitle,
.testimonial__meta-desc,
.service-item .btn,
.text__link a,
.btn__secondary.btn__link,
.accordion-item .accordion__title,
.nav-tabs .nav__link.active,
.nav-tabs .nav__link:hover,
.navbar .dropdown-menu .nav__item .nav__item-link:hover,
.navbar .dropdown-menu .nav__item .nav__item-link.active,
.awards .fancybox-item:hover .fancybox__title {
  color: var(--iz-verde-texto);
}

.color-primary,
.phone-number {
  color: var(--iz-verde-texto) !important;
}

/* Sobre fondo oscuro el verde original ya cumple de sobra (6,43:1), asi que
   ahi se queda tal cual. Solo los elementos que de verdad son verdes: nada
   de tocar enlaces ni botones en bloque. */
.bg-dark .color-primary,
.bg-dark .heading__subtitle,
.footer .color-primary,
.footer .heading__subtitle,
.heading-light .color-primary,
.heading-light .heading__subtitle,
.slider .color-primary,
.page-title .color-primary,
.work-process .color-primary,
.work-process .heading__subtitle,
.bg-overlay .color-primary,
.bg-overlay .heading__subtitle {
  color: var(--iz-verde) !important;
}


/*--------------------------------------------------------------
  Botones: el fondo verde con texto blanco daba 2,60:1

  Un boton es texto sobre una superficie, asi que se le aplica la misma regla
  que al texto: la superficie que lleva letra encima usa la variante oscura
  (#2b7e69, 4,89:1 con blanco). El #3DB395 se conserva en el icono circular
  del boton y en todo lo demas.

  El :hover del tema deja el texto verde sobre fondo blanco, asi que ahi
  tambien hace falta la variante.
--------------------------------------------------------------*/

.btn__primary,
.btn__primary:active,
.btn__primary:focus,
#scrollTopBtn {
  background-color: var(--iz-verde-texto);
  color: #fff;
}

.btn__primary:hover {
  color: var(--iz-verde-texto);
}

/* La flecha circular va en verde sobre el circulo blanco: es un icono dentro
   de un boton, no texto, pero conviene que se distinga igual */
.btn__primary .icon-arrow-right,
.btn__primary .icon-arrow-left {
  color: var(--iz-verde-texto) !important;
}

.btn__white {
  color: var(--iz-verde-texto);
}

/* Version con contorno: vive sobre imagenes oscuras, ahi el texto va blanco */
.btn__white.btn__outlined {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn__white.btn__outlined:hover,
.btn__white.btn__outlined:focus {
  background-color: #fff;
  color: var(--iz-verde-texto);
}


/*--------------------------------------------------------------
  Fuera el azul marino del tema

  #1F314F y #091D3E vienen de la plantilla original y no pintan nada en la
  identidad de Innerzia. Donde eran acento pasan al verde de marca; donde
  eran el color de los titulares pasan a un negro neutro, porque ahi no hay
  que meter color: un titular en verde sobre blanco caeria a 2,60:1 y toda
  la web quedaria teñida.
--------------------------------------------------------------*/

:root {
  --iz-tinta: #222222;   /* negro neutro para titulares y texto fuerte */
}

h1, h2, h3, h4, h5, h6,
.heading__title,
.service__title,
.testimonial__title,
.testimonial__meta-title,
.contact-panel__title,
.fancybox__title,
.feature__title,
.process-item__title,
.post__title,
.blog-widget__title,
.cta__title,
.color-heading,
.color-secondary {
  color: var(--iz-tinta);
}

.navbar .dropdown-menu .nav__item .nav__item-link {
  color: var(--iz-tinta);
}

/* El circulo de la flecha dentro de los botones era azul marino */
.btn__primary .icon-outlined,
.btn__secondary .icon-arrow-right,
.btn__secondary .icon-arrow-left,
.btn__link.btn__white .icon-arrow-right,
.btn__link.btn__white .icon-arrow-left {
  color: var(--iz-verde);
}

.btn__secondary.btn__outlined .icon-arrow-right,
.btn__secondary.btn__outlined .icon-arrow-left,
.btn__link.btn__secondary .icon-arrow-right,
.btn__link.btn__secondary .icon-arrow-left {
  color: #fff;
  background-color: var(--iz-verde);
}

.bg-heading {
  background-color: var(--iz-tinta) !important;
}

/* Sobre fondo oscuro los titulares siguen en blanco */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
.bg-dark .heading__title,
.footer h1, .footer h2, .footer h3, .footer h4,
.footer .footer-widget__title,
.heading-light .heading__title,
.slider .slide__title,
.page-title .pagetitle__heading,
.work-process .heading__title,
.work-process .process-item__title,
.bg-overlay .heading__title,
.fancybox-light .fancybox__title,
.color-white {
  color: #fff;
}


/*--------------------------------------------------------------
  La barra fija de navegacion

  Al hacer scroll, la cabecera se vuelve fija con fondo #3db395 y los enlaces
  en blanco: 2,60:1. Mismo caso que los botones, una superficie verde con
  texto encima, asi que usa la misma variante y sube a 4,89:1.
--------------------------------------------------------------*/

.is-sticky {
  background-color: var(--iz-verde-texto) !important;
}


/*--------------------------------------------------------------
  Vinetas de lista y puntos del carrusel

  La vineta es un circulo verde con un tick blanco dentro, y el punto activo
  del carrusel es un aro verde. Los dos son objetos graficos que transmiten
  informacion, asi que el criterio 1.4.11 les pide 3:1. Con #3DB395 sobre
  blanco se quedaban en 2,60.

  El punto activo del carrusel ademas indica en que pagina estas: si no se
  distingue del resto, no sirve de nada.
--------------------------------------------------------------*/

.list-items-layout2 li:before {
  color: #fff;
  border-color: var(--iz-verde-texto);
  background-color: var(--iz-verde-texto);
}

/* La variante sobre fondo oscuro es al reves: circulo blanco, tick verde */
.list-items-light.list-items-layout2 li:before {
  color: var(--iz-verde-texto);
  border-color: #fff;
  background-color: #fff;
}

.slick-dots li.slick-active button {
  border-color: var(--iz-verde-texto) !important;
}

/*
  El icono de las tarjetas de servicio no llevaba ni el verde de marca: estaba
  en #5cb886, un tercer verde colado en el tema, con 2,43:1 sobre blanco.
*/
.service-item .service__icon {
  color: var(--iz-verde-texto);
}

.fancybox-item .fancybox__icon,
.feature-item .feature__icon {
  color: var(--iz-verde-texto);
}

/* Sobre fondo oscuro los iconos siguen con el verde de marca */
.bg-dark .fancybox-item .fancybox__icon,
.fancybox-light .fancybox-item .fancybox__icon {
  color: var(--iz-verde);
}

/* Sobre fondo oscuro el verde de marca ya da 7,28:1: ahi se queda */
.carousel-dots-light .slick-dots li.slick-active button,
.bg-dark .slick-dots li.slick-active button {
  border-color: var(--iz-verde) !important;
}


/*--------------------------------------------------------------
  Contraste del gris de parrafo (WCAG 1.4.3)

  #848e9f sobre blanco da 3,31:1 y el minimo es 4,5:1. Afecta a casi todo el
  texto corrido de la web. #5f6b7d es el mismo gris azulado, 12 puntos mas
  oscuro, y da 5,40:1.

  En el pie el fondo es oscuro, asi que ahi el gris original se conserva.
--------------------------------------------------------------*/

body,
.heading__desc,
.service__desc,
.fancybox__desc,
.process-item__desc,
.contact-panel__desc,
.list-items-layout2 li,
.about__Text,
.text-small,
.nav-tabs .nav__link,
.label-radio,
.custom-control-label,
.text_legal p,
.post__desc {
  color: #5f6b7d;
}

.form-control::placeholder {
  color: #6a7485;
  opacity: 1;
}

/*
  Sobre fondo oscuro la regla se invierte: el gris oscurecido pasa a 3,49:1,
  peor que antes. Ahi el texto tiene que ser claro, y los enlaces recuperan
  el verde de marca, que sobre negro da 7,28:1.
*/
.bg-dark .heading__desc,
.bg-dark .fancybox__desc,
.bg-dark .service__desc,
.bg-dark .text-small,
.fancybox-light .fancybox__desc,
.footer .heading__desc,
.footer .btn__link-plain,
.work-process .process-item__desc,
.work-process .heading__desc,
.heading-light .heading__desc,
.bg-overlay .heading__desc,
.list-items-light li,
.slider .slide__desc {
  color: rgba(255, 255, 255, .92);
}

.bg-dark a:not(.btn),
.footer a:not(.btn),
.footer .phone-number,
.work-process a:not(.btn) {
  color: var(--iz-verde) !important;
}

.footer .footer-widget-nav li a,
.footer .contact-list li,
.footer .color-gray,
.footer .color-body {
  color: rgba(255, 255, 255, .78) !important;
}


/*--------------------------------------------------------------
  El velo verde de la seccion de contacto

  Ese bloque es texto blanco sobre un velo rgba(61,179,149,.85), o sea blanco
  sobre verde: 3,09:1. Es el mismo caso que los botones, una superficie que
  lleva texto encima, asi que usa la misma variante oscura y sube a 5,39:1.

  Y el antetitulo estaba puesto en verde de marca sobre ese mismo velo verde:
  no se veia nada. Aqui todo el texto va en blanco.
--------------------------------------------------------------*/

/* El velo vuelve al color de marca junto con el resto. Con #2b7e69 al 85%
   el texto blanco de encima pasaria de 3,09:1 a 5,39:1. */
.bg-overlay-primary:before {
  background-color: rgba(61, 179, 149, .85);
}

.bg-overlay-primary .heading__subtitle,
.bg-overlay-primary .heading__title,
.bg-overlay-primary .color-primary,
.bg-overlay-primary .list-items-light li {
  color: #fff !important;
}

/* Ojo: solo la columna de texto, no el formulario. La tarjeta del formulario
   esta dentro de este mismo bloque pero tiene fondo blanco, asi que su texto
   tiene que seguir siendo oscuro. */
.bg-overlay-primary .heading__desc {
  color: rgba(255, 255, 255, .92);
}


/*--------------------------------------------------------------
  Proporcion de las imagenes

  Las imagenes llevan width y height en el HTML para que el navegador reserve
  el hueco y la pagina no de saltos mientras cargan. Pero si el ancho se
  reduce por ser responsive y el alto sigue fijo, la imagen sale estirada.
  height:auto deja que el alto acompane al ancho.
--------------------------------------------------------------*/

.about__img img {
  height: auto;
}


/*--------------------------------------------------------------
  Enlace de salto al contenido (WCAG 2.4.1)

  Esta fuera de la pantalla y solo baja cuando recibe el foco con el
  tabulador, asi que con raton no se ve nunca.
--------------------------------------------------------------*/

/* La regla generica de enlaces le gana en especificidad, de ahi el a.skip-link */
a.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  display: inline-block;
  padding: 12px 20px;
  background-color: #fff;
  color: var(--iz-tinta);
  font-weight: 700;
  border: 2px solid var(--iz-tinta);
  border-radius: 0 0 3px 3px;
  transition: top .2s ease-in-out;
}

a.skip-link:focus {
  top: 0;
  color: var(--iz-tinta);
  text-decoration: underline;
}

/* El destino del salto recibe el foco por programa: sin esto, algunos
   navegadores le pintan un contorno que no aporta nada */
#contenido-principal:focus {
  outline: none;
}


/*--------------------------------------------------------------
  Landmark principal

  El contenido va dentro de <main>. Eso rompe los selectores de hermano
  adyacente del tema (.header-transparent + .slider, + .page-title), que son
  los que suben el hero y la banda de titulo por debajo de la cabecera
  transparente. Aqui se replican atravesando el <main>.

  Ademas, la cabecera ya no usa .header-full, asi que mide 100px en vez de
  135px: la banda de titulo sube 100 y no 135, que era lo que le comia 35px
  por arriba.
--------------------------------------------------------------*/

.header-transparent + main > .slider {
  margin-top: -100px;
}

.header-transparent + main > .slider .slide-item {
  padding-top: 100px;
  height: 100vh;
}

.header-transparent + main > .page-title {
  margin-top: -100px;
}

@media only screen and (max-width: 991px) {

  .header-transparent + main > .page-title {
    margin-top: 0;
  }
}

@media (min-width: 320px) and (max-width: 767px) {

  .header-transparent + main > .slider {
    margin-top: 0 !important;
  }
}


/*--------------------------------------------------------------
  Seccion de contacto: alinear las dos columnas

  La tarjeta del formulario tiene 60px de relleno, asi que su primer texto
  arranca 60px mas abajo que el de la columna izquierda. Se compensa solo
  cuando las columnas van una al lado de la otra; apiladas no hace falta.
--------------------------------------------------------------*/
@media (min-width: 1200px) {

  #contact-form .col-xl-5 {
    padding-top: 60px;
  }
}


/*--------------------------------------------------------------
  Etiquetas flotantes del formulario

  Los campos solo tenian placeholder, que no es una etiqueta: desaparece en
  cuanto escribes y hay lectores de pantalla que ni lo anuncian. Aqui hay un
  <label> de verdad que arranca donde estaba el placeholder y sube al escribir,
  asi que nunca se pierde. El aspecto en reposo es el mismo de antes.

  El truco de :placeholder-shown necesita que el campo tenga un placeholder,
  de ahi el placeholder=" " con un espacio en el HTML.

  El <label> va DESPUES del campo en el HTML para poder seleccionarlo con "+".
--------------------------------------------------------------*/

.contact-panel__form .form-group {
  position: relative;
}

.contact-panel__form .form-control {
  padding-top: 22px;
  padding-bottom: 4px;
}

.contact-panel__form textarea.form-control {
  padding-top: 30px;
}

.form-label-float {
  position: absolute;
  top: 18px;
  left: 22px;
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #6a7485;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .15s ease-out, color .15s ease-out;
}

.contact-panel__form textarea.form-control + .form-label-float {
  top: 22px;
}

/* Al enfocar el campo o cuando ya tiene algo escrito, la etiqueta sube y se
   encoge, dejando sitio al texto */
.contact-panel__form .form-control:focus + .form-label-float,
.contact-panel__form .form-control:not(:placeholder-shown) + .form-label-float {
  transform: translateY(-11px) scale(.75);
}

.contact-panel__form .form-control:focus + .form-label-float {
  color: var(--iz-tinta);
}


/*--------------------------------------------------------------
  Casilla de la politica de privacidad

  El borde era #e7ebef sobre blanco: 1,20:1. Practicamente no se veia, y el
  criterio 1.4.11 de WCAG pide 3:1 para el contorno de un control. #767f8c da
  4,05:1 y sigue siendo un gris suave, no un recuadro negro.

  Ademas el input real esta oculto (opacity:0), asi que el contorno de foco
  hay que pintarlo sobre el recuadro dibujado, no sobre el campo.
--------------------------------------------------------------*/

.custom-control-label::before {
  border: 1px solid #767f8c !important;
}

.custom-control-input:focus-visible ~ .custom-control-label::before {
  outline: 3px solid var(--iz-tinta);
  outline-offset: 2px;
}


/*--------------------------------------------------------------
  Foco visible (WCAG 2.4.7)

  El tema anula el contorno del navegador en botones y campos, asi que quien
  navega con teclado no sabe donde esta. :focus-visible solo lo muestra en ese
  caso, no al hacer clic con el raton.
--------------------------------------------------------------*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--iz-tinta);
  outline-offset: 2px;
  border-radius: 2px;
}

.btn:focus,
.btn.active,
.btn:active {
  outline: revert;
}

.btn:focus-visible {
  outline: 3px solid var(--iz-tinta);
  outline-offset: 3px;
}

/* Sobre fondo oscuro el contorno azul marino no se ve */
.bg-dark a:focus-visible,
.bg-dark button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.slider a:focus-visible,
.page-title a:focus-visible,
.work-process a:focus-visible,
.bg-overlay a:focus-visible,
.bg-overlay button:focus-visible,
.header .navbar a:focus-visible,
.header .navbar button:focus-visible,
.header .btn:focus-visible,
.slider .btn:focus-visible,
.bg-dark .btn:focus-visible {
  outline-color: #fff;
}

.form-control:focus {
  border-color: var(--iz-tinta);
}


/*--------------------------------------------------------------
  Menu desplegable accesible con teclado (WCAG 2.1.1)

  El tema solo lo abre con :hover, asi que con teclado era inalcanzable.
--------------------------------------------------------------*/
@media (min-width: 992px) {

  .navbar .nav__item.has-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}


/*--------------------------------------------------------------
  "Configuracion de cookies" era un <a href="javascript:void(0)">. No es un
  enlace, es una accion, asi que ahora es un <button> con aspecto de enlace.
--------------------------------------------------------------*/
.btn__link-plain {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.btn__link-plain:hover,
.btn__link-plain:focus {
  text-decoration: underline;
}

/*
  Un boton no hereda la tipografia, de ahi el font:inherit de arriba. Pero eso
  le da los 16px del <li>, mientras que los enlaces de al lado cogen 14px de
  ".footer .footer-widget-nav li a" del tema. Aqui se replican esas medidas
  para que el boton no cante entre los demas.
*/
.footer .footer-widget-nav li .btn__link-plain {
  display: block;
  position: relative;
  font-size: 14px;
  margin-bottom: 11px;
}

@media only screen and (max-width: 991px) {

  .footer .footer-widget-nav li .btn__link-plain {
    font-size: 13px;
  }
}