/*
Theme Name: GeneratePress Somtic
Description: Child theme de GeneratePress para personalizaciones específicas
Author: Jordán Pérez
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-somtic
*/

.gb-shape svg
{
    fill: none;
}

.p-animation-move-sideways .wp-block-column {
    transition: transform 0.3s ease;
}

.som-titulo {
  font-family: 'Gothic A1', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: left;
}

.som {
    font-family: 'Gothic A1', sans-serif;
    color: #92b7f6;
}
.tic {
    font-family: 'Gothic A1', sans-serif;
    color: #2b74c7;
}

.som, .tic {
	    font-size: 2.5rem;
    font-weight: 400; /* light */
}

.somtic-serveis-home .somtic-serveis {

	text-align: center;
    
}

.somtic-serveis a {
  text-decoration: none !important;
}

/* ========================================
   MENÚ ESTILO PRESPA - GENERATEPRESS PREMIUM
   ======================================== */

/*/* Asegúrate de que el menú principal esté bien posicionado */
/*.main-navigation .main-nav ul li a {
  position: relative;
  color: #000000;
  text-decoration: none;
  padding-bottom: 8px;
  transition: color 0.3s;
}*/

/* Línea subrayada animada */
/*.main-navigation .main-nav ul li a::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}*/

/* Hover: subrayado se expande */
/*.main-navigation .main-nav ul li.current-menu-item a::after,
.main-navigation .main-nav ul li.current_page_item a::after,
.main-navigation .main-nav ul li.current-menu-ancestor a::after,
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current_page_ancestor a::after {
  width: 100%;
}*/

/*fi menú principal*/



/* Botones por defecto estilo "primary" */
body:not(.wp-admin) button:not(.menu-toggle):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close),
body:not(.wp-admin) .wp-block-button__link,
body:not(.wp-admin) a.button {
  background-color: var(--accent);
  color: var(--base-3);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  padding: 12.8px 24px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  cursor: pointer;
}

body:not(.wp-admin) button:not(.menu-toggle):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):hover,
body:not(.wp-admin) .wp-block-button__link:hover,
body:not(.wp-admin) a.button:hover,
body:not(.wp-admin) button:not(.menu-toggle):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):focus,
body:not(.wp-admin) .wp-block-button__link:focus,
body:not(.wp-admin) a.button:focus {
  background-color: rgb(235, 238, 252);
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
}

/* Botón Primario */
body:not(.wp-admin) .wp-block-button.btn-primary .wp-block-button__link {
  background-color: var(--accent);
  color: var(--base-3);
  border: 1px solid var(--base-3);
  border-radius: 4px;
  padding: 0.75em 1.5em;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(34,34,34,0.08);
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

body:not(.wp-admin) .wp-block-button.btn-primary > .wp-block-button__link:hover,
body:not(.wp-admin) .wp-block-button.btn-primary > .wp-block-button__link:focus {
    background-color: rgb(235, 238, 252);
    color: var(--accent);
    text-decoration: underline;
    border: 1px solid var(--accent);
}

/* Botón Secundario */
body:not(.wp-admin) .wp-block-button.btn-secondary .wp-block-button__link {
  background-color: rgb(235, 238, 252);
  color: var(--accent);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 24px;
  padding: 12.8px 24px;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body:not(.wp-admin) .wp-block-button.btn-secondary > .wp-block-button__link:hover,
body:not(.wp-admin) .wp-block-button.btn-secondary > .wp-block-button__link:focus {
    background-color: var(--accent);
    color: var(--base-3);
    text-decoration: underline;
}

/* -- Fin botones -- */





/* .somtic-serveis h2:hover {
    border: 1px solid var(--accent) !important;
    text-decoration: none !important;
} */





/*
==========================================
Efectos típicos de AOS (Animate On Scroll)
https://michalsnik.github.io/aos/

Ejemplo de uso en un bloque:
  data-aos="fade-up" data-aos-duration="1000"

Principales efectos:
--------------------
- Fade (desvanecer)
  data-aos="fade"
  data-aos="fade-up"
  data-aos="fade-down"
  data-aos="fade-left"
  data-aos="fade-right"
  data-aos="fade-up-right"
  data-aos="fade-up-left"
  data-aos="fade-down-right"
  data-aos="fade-down-left"

- Flip (giro)
  data-aos="flip-left"
  data-aos="flip-right"
  data-aos="flip-up"
  data-aos="flip-down"

- Slide (deslizar)
  data-aos="slide-up"
  data-aos="slide-down"
  data-aos="slide-left"
  data-aos="slide-right"

- Zoom (acercar/alejar)
  data-aos="zoom-in"
  data-aos="zoom-in-up"
  data-aos="zoom-in-down"
  data-aos="zoom-in-left"
  data-aos="zoom-in-right"
  data-aos="zoom-out"
  data-aos="zoom-out-up"
  data-aos="zoom-out-down"
  data-aos="zoom-out-left"
  data-aos="zoom-out-right"

Parámetros útiles:
------------------
- data-aos-duration="1000"   // Duración en milisegundos (por defecto 400)
- data-aos-delay="200"       // Retardo antes de empezar (en ms)
- data-aos-offset="120"      // Distancia desde el trigger (por defecto 120)
- data-aos-easing="ease-in-out" // Tipo de animación

Ejemplos rápidos:
-----------------
- Entrada desde la izquierda:
    data-aos="fade-left" data-aos-duration="1000"
- Entrada desde la derecha:
    data-aos="fade-right" data-aos-duration="1000"
- Zoom:
    data-aos="zoom-in" data-aos-duration="800"
- Flip:
    data-aos="flip-left" data-aos-duration="1200"
*/

/* ==== FORMULARI MAUTIC PEU - LABELS A L'ESQUERRA ==== */
.form_curt .mauticform-row.mauticform-text,
.form_curt .mauticform-row.mauticform-tel {
  display: flex;
  align-items: center;
  width: 100%;
  margin-right: 0;
  margin-bottom: 12px;
}

.form_curt .mauticform-label {
  width: 90px; /* Puedes ajustar el ancho según el texto */
  min-width: 70px;
  margin-bottom: 0;
  margin-right: 10px;
  font-size: 16px;
  color: #2b74c7;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.form_curt .mauticform-input {
  flex: 1 1 0%;
  width: auto;
  padding: 7px 10px;
  border: 1px solid #b6c8e6;
  border-radius: 6px;
  background: var(--base-3);
  box-shadow: inset 0 1px 4px rgba(43, 116, 199, 0.10);
  font-size: 16px;
  max-height: 38px;
  transition: border 0.2s, box-shadow 0.2s;
}

.form_curt .mauticform-input:focus {
  border: 1.5px solid #2b74c7;
  box-shadow: inset 0 2px 8px rgba(43, 116, 199, 0.18);
  outline: none;
}

.form_curt .mauticform-button-wrapper {
  text-align: center;
  margin-top: 10px;
}

.form_curt .mauticform-button {
  background: linear-gradient(90deg, #2b74c7 0%, #92b7f6 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 18px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(43, 116, 199, 0.10);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin: 0 auto;
  display: inline-block;
}

.form_curt .mauticform-button:hover,
.form_curt .mauticform-button:focus {
  background: linear-gradient(90deg, #92b7f6 0%, #2b74c7 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(43, 116, 199, 0.15);
}

.form_curt .mauticform-errormsg {
  color: #e32;
  font-size: 0.95em;
  margin-top: 2px;
}

.form_curt .mauticform-message {
  color: #2b74c7;
  font-size: 1em;
  margin-bottom: 8px;
}

/* Responsive: en móvil los labels vuelven arriba */
@media (max-width: 600px) {
  .form_curt .mauticform-row.mauticform-text,
  .form_curt .mauticform-row.mauticform-tel {
    flex-direction: column;
    align-items: stretch;
  }
  .form_curt .mauticform-label {
    width: 100%;
    min-width: 0;
    margin-right: 0;
    margin-bottom: 4px;
    text-align: left;
  }

  .form_contacte {
    padding: 20px
  }
}

/* Preloader */
#preloader-overlay img {
  width: 150px; /* Tamaño base o "normal" de tu imagotipo */
  height: auto;
  animation: scaleSpinOut 2s ease-out forwards; /* Mantenemos la duración y el timing */
  will-change: transform, opacity;
}

@keyframes scaleSpinOut {
  0% {
      transform: scale(3.0) rotate(0deg);
      opacity: 1;
  }
  50% {
      transform: scale(1.5) rotate(720deg);
      opacity: 1;
  }
  100% {
      transform: scale(1.0) rotate(1080deg);
      opacity: 0;
  }
}

/* El resto de tu CSS para #preloader-overlay y .hidden permanece igual */
#preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-in-out;
  will-change: opacity;
}

#preloader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

html, body {
  overflow-x: hidden;
}