/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1

*/



/* FUENTE */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


/* VARIABLES POR DEFECTO */



:root {
  --c-negro: #252525;
  --c-blanco: #FFFFFF;

  --c-primario: #f15232;
  --c-secundario: #331817;

  --c-fondo: #f9f9f9;
  --c-grisclaro: #f0eceb;
  --c-gris: #e0ddd8;

  --f-main: 'DM Sans', sans-serif;
}



/* OUTLINE */

*:focus { outline: 0px solid orange; }

::selection {
  background-color: #f1523244;
}


/* ESTILOS COMUNES */

.zindex0 {
  z-index:0;
}

.zindex1 {
  z-index:1;
}


body {
  font-family: var(--f-main) !important;
  color: var(--c-negro);
  font-size: 1.125rem;
  line-height: 1.6875rem ;
  overflow-x: hidden;

}

h1, h2, h3 {
  font-family: var(--f-main) !important;
}

h1 {
  font-weight: 300 !important;
  font-size: clamp(3.2rem, 8vw, 6.5rem) !important;
}

h2 {
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
}

h3 {
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
overflow-wrap: normal; 
  text-transform: uppercase;

}

a {
  color: var(--c-negro);
  font-weight: 700;
  text-decoration: none;
}

a, a:hover {
  transition: all 0.4s ease !important;
}


.text-light p {
  color: var(--c-blanco);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  font-weight: 700;
  color: var(--c-negro) !important;
}

b {
  font-weight: 700 !important;
}

/* MENÚ NAV */

.site-logo {
    z-index: 999;
}

.main-navigation, .main-navigation ul ul {
  background-color:  transparent !important;

  a {
    text-transform: uppercase;
    font-size: 18px !important;
    color: var(--c-negro) !important;
  }

  li:last-child a {
    text-transform: uppercase;
    font-size: 18px !important;
  
    
  }
}


.copyright-bar a {
  color: var(--c-grisclaro) !important;
  font-weight: 400 !important;
}

/* FORMULARIO DE CONTACTO */

form .contacto {
    display: flex;
    flex-direction: column;
    padding-top: 0px;
}

form .contacto .datos {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    margin-bottom: 0px;
}

form .contacto .datos > div {
    flex: 1 1 calc(50% - 20px); 
    min-width: 250px; 
    box-sizing: border-box;
}


form .contacto label {
    display: inline-block;
    margin-bottom: 10px;
}

form .contacto input:not([type="submit"]),
form .contacto textarea,
form .contacto select {
    border: 1px solid #0000007e;
    background-color: var(--c-fondo);
    border: 1px solid var(--c-negro);
    font-family: inherit !important;
    transition: all 0.3s ease;

    &:hover {
      border-color: #252525bb;
    }
}

form .contacto input:not([type="submit"]), form .contacto select {
    width: 100%;
}  

form .contacto select {
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 11px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

form .contacto .datos > div p{
    margin-bottom: 0 !important;
}

form .contacto textarea {
    resize: none;
    max-height: 200px;
    margin-top: 40px;
}
form.aceptar-rgpd {
    display: flex;
}
form .contacto input:focus,
form .contacto textarea:focus, form .contacto input:active,
form .contacto textarea:active,
form .contacto input:focus-visible, form .contacto textarea:focus-visible {
  border: 1px solid var(--c-negro);
 
}

/* Mensaje de error */

.wpcf7-not-valid-tip {
  padding-top: 5px;

}


/* Tipo de letra de las textareas */

form input, form select, form textarea {
  font-family: inherit, "DM Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 300;
  color: var(--c-primario-dark);
}

form input#nombre, form input#telefono, form input#email {
    background-color: var(--c-negro) !important;
    border: 1px solid #fff;
    margin-top: 5px;
    width: 100%;
}

/* Check box de aceptar */

form .contacto input[type=checkbox] {
  width: auto;
}

form .aceptar-rgpd > p, form .btn-enviar > p {
  margin-bottom: 0;
}

form .aceptar-rgpd .wpcf7-list-item {
  margin: 0;
}

.wpcf7-list-item-label {
    color: var(--c-negro);
    padding-left: 15px;
}

.wpcf7-list-item-label a, form .let-peq a {
    color: var(--c-blanco);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.5s ease;

    &:hover {
        color: var(--c-negro);
    }
}

/* Letra pequeña */

form .let-peq {
    font-size: 0.8rem;
    margin-top: 0px;
    padding-bottom: 20px;
    margin-bottom: 25px !important;
    line-height: normal;
}


@media screen and (max-width:768px) {

  form.contacto select {
      -webkit-appearance: textfield;
      -moz-appearance: none;
      appearance: none;
  }

  form.contacto select {
      padding-top: 20px;
      padding-bottom: 15px;
      min-height: 45px; 
      height: auto; 
  }
}

.aceptar-rgpd {
    display: flex
;
}

.btn-enviar input[type="submit"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 30px;
  border: 1px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: var(--c-negro) !important;
  border-radius: 100px;
  font-weight: 400;
  color: var(--c-grisclaro) !important;
  box-shadow: 0 0 0 1px var(--c-negro) !important;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  font-family: inherit !important;
}

.servicios > div {
  .animado {
    max-height: 0px;
    opacity: 0;

    transition: max-height 2s ease, opacity 0.8s ease; 

    p {
      padding-top: 20px !important;
    }
  }

  &:hover {
    .animado {
      max-height: 500px;
      opacity: 1;
    }

  }
}

li.menu-item-language-switcher {
  display: flex; 
  align-items: center; 
  margin-left: 40px;
}


li.menu-item.menu-item-type-custom.menu-item-language-switcher {
  gap: 10px;
  margin-right: 20px;
}

@media screen and (max-width: 768px) {
  li.menu-item-language-switcher {

  margin-left: 0px;
}
}

@media screen and (max-width: 768px) {
    .menu-container, .menu-sticky {
      display: none;
    }


    .page-id-2  #primary-menu {
        transform: translateX(0px);
         opacity: 1;
       
    }

    .site-logo {
      display: inline-block;
      
      z-index: 999;
    }

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        z-index: 999;
        margin-right: -15px;
    }

    .main-navigation .main-nav ul li a {
    padding-left: 34px !important;
    font-size: 22px;
    
}

.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
    background-color: rgba(0, 0, 0, 0.0) !important;
}

    

    #site-navigation.toggled {
        .inside-navigation {
          background-color: var(--c-fondo);
          padding-bottom: 150%;
          position: absolute;
          inset: 0;
          padding-top: 200px;
      }
      
    }

    #sticky-navigation {
      background-color: var(--c-fondo) !important;
      padding-inline: 25px;
    }

    .menu-toggle[aria-expanded="true"] #primary-menu {
        background-color: var(--c-fondo);
        padding-bottom: 150%;
        position: absolute;
        inset: 0;
        padding-top: 200px;
}

li.menu-item-language-switcher {
  margin-left: 0px;
}

}