/* === MÓVILES PEQUEÑOS (hasta 375px) === */
@media screen and (max-width: 375px) {
  body {
    header footer {
      width: 100dvw;
      max-width: 100%;
      box-sizing: border-box;
    }

    #paginaPrincipal,
    #paginaPrincipal-inici {
      width: 100dvw;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;      /* corregido */
      padding-bottom: 20px;   /* corregido */
      box-sizing: border-box;
      font-size: 15px;

      h1,
      h3,
      p,
      li {
        word-wrap: break-word;
        word-break: break-word;
      }
    }

    #menuDesplegable {
      padding-top: 30px;
    }

    #logos-XXSS {
      margin-left: -4% !important;
    }

    footer nav p {
      margin: 0 !important;
      padding: 0 !important;
    }

    .enllacos-peu {
      margin-right: -25px !important;
      margin-left: 7px !important;
    }

    #pestanya_GuiaMetodologica {
      max-width: 80dvw !important;
    }

    #btnScrollTop {
      margin-bottom: 10dvh !important;
    }
  }
}

/* === TELÉFONOS GRANDES (hasta 450px) === */
@media screen and (max-width: 450px) {
  body {
    header footer {
      width: 100dvw;
      max-width: 100%;
      box-sizing: border-box;
    }

    #paginaPrincipal,
    #paginaPrincipal-inici {
      width: 100dvw;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;     /* corregido */
      padding-bottom: 20px;  /* corregido */
      box-sizing: border-box;
      font-size: 15px;

      h1,
      h3,
      p,
      li {
        word-wrap: break-word;
        word-break: break-word;
      }
    }

    #menuDesplegable {
      padding-top: 30px;
    }

    #logos-XXSS {
      margin-left: -4% !important;
    }

    footer nav p {
      margin: 0 !important;
      padding: 0 !important;
    }

    .enllacos-peu {
      margin-right: -25px !important;
      margin-left: 7px !important;
    }

    #pestanya_GuiaMetodologica {
      max-width: 80dvw !important;
    }

    #btnScrollTop {
      margin-bottom: 10dvh !important;
    }
  }
}

/* === TABLETS Y PANTALLAS MEDIANAS (hasta 768px) === */
@media screen and (max-width: 768px) {
  body {
    flex-direction: column;

    #contenidor {
      flex-direction: column;

      #mostrarMenuEsquerra {
        position: absolute;
        left: 50px;
      }
    }

    .enllacos-superiors {
      > *:not(:last-child) {
        opacity: 0;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        transition: opacity 0.4s, height 0.4s, visibility 0.4s;
      }

      > :last-child {
        opacity: 1;
        visibility: visible;
        height: 16px;
      }

      .cerca-icon {
        width: 22px;
        height: 22px;
      }
    }

    /* Páginas principales */
    #paginaPrincipal,
    #paginaPrincipal-inici {
      width: 100%;
      padding: 0 20px;
      margin: 0;
      padding-top: 20px;     /* igual para ambos */
      padding-bottom: 20px;
      font-size: 16px;

      iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        max-width: 100%;
      }

      h1, p {
        margin: 0;
        padding: 0;
        word-break: break-word;
      }
    }

    /* === FOOTER (PEU DE PÀGINA) === */
    footer {
      nav:first-of-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 10px;
      }

      #logos-XXSS {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto !important;
      }

      nav:nth-of-type(2) {
        .logoPeuGeneral img {
          width: 100px;
          margin-top: 10px;
        }

        .enllacos-peu {
          margin: 0 auto;
          margin-top: 5px;

          a {
            font-size: 10px;
          }

          .icona-enllac {
            width: 10px;
            height: 10px;
          }
        }
      }

      .logoPeuGeneral {
        order: 1;
        margin: 0 auto;

        img {
          margin-top: 0;
        }
      }
    }
  }
}


/* === Ajuste general para pantallas menores a 800px === */
@media screen and (max-width: 800px) {
  body {
    scroll-padding-top: 120px; /* deja espacio para el header fijo */
  }

  #paginaPrincipal-inici {
    margin-top: 0;
    padding-top: 20px;
  }
}


@media screen and (max-width: 940px) {
    body {
      /* &.menu-obert {
        position: fixed; 

      } */
      header {
        flex-direction: column;
        
        .menuEntorn {
          position: relative;
  
          #menu-hamburguesa {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            width: 35px;
            height: 35px;
            position: absolute;
            top: 8px;
            left: 10px;
            z-index: 1100;
            background: transparent;
            border: none;
            cursor: pointer;

            span {
              width: 100%;
              height: 2px;
              background: white;
              border-radius: 2px;
              transition: transform 0.3s ease, opacity 0.3s ease;
            }
          
            &.open {
              span:nth-child(1) {
                transform: translateY(7.5px) rotate(45deg);
              }
              span:nth-child(2) {
                opacity: 0;
              }
              span:nth-child(3) {
                transform: translateY(-7.5px) rotate(-45deg);
              }
            }
          }
          .menu-desplegable {
            position: absolute;
            top: 70px;
            right: 0;
            background: white;
            width: 100%;
            padding: 10px 20px;
            z-index: 3000 !important;
            line-height: 1.6;
            
          
            ul {
              list-style: none;
              margin: 0;
              padding: 0;
          
              li {
                margin: 10px 0;
                position: relative;
                
                &.paginaActual::after {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 80%;
                  width: 4px;
                  background-color: rgba(180, 14, 14, 0.6);
                }
          
                a {
                  margin-left: 18px;
                  color: #222;
                  text-decoration: none;
                  font-size: 16px;
                }
              }
            }
            &.active {
              display: flex;
            }
          }
        }
        > :first-child {
          position: sticky;
          flex-direction: column;
          top: 0;
          z-index: 1000;
          justify-content: center;
          align-items: center;
          gap: 10px;
          padding: 10px 20px;
          height: 45px;
  
          > :first-child {
            margin-left: 0;
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 35px;
  
            #logo_gencat {
              height: 25px;
            }
          }
  
          > :nth-child(2) {
            display: none;
          }
  
          > :nth-child(3) {
            margin-left: 0;
            margin-right: 0;
            justify-content: flex-end;
            width: 100%;
            padding: 0 10px;
            display: flex !important;
  
            /* Ocultar tot excepte la cerca */
            a:not(:has(#logo_cerca)),
            span,
            #idiomes-contenidor {
              display: none !important;
            }
  
            a:has(#logo_cerca) {
              display: flex !important;
              align-items: center;
              justify-content: center;
              padding: 5px;
            }
  
            #logo_cerca {
              display: block !important;
              width: 20px;
              height: 20px;
              filter: invert(1);
            }
          }
        }
  
        /* Segona franja centrada */
        > :nth-child(2) {
          position: sticky;
          top: 45px;
          z-index: 999;
          justify-content: center;
          align-items: center;
          padding: 15px 20px;
          height: 35px;
          text-align: center;
  
          a {
            margin-left: 0;
            font-size: 14px;
            text-align: center;
            color: white;
            text-decoration: none;
            line-height: 1.4;
          }
  
          #titol-sitio {
            display: inline-block;
            text-align: center;
          }
        }
  
        > :nth-child(3) {
          background-color: #222;
          color: #222;
          height: 20px;
          ul, li, a {
            display: none;
          }
        }
      }
  
      & #contenidor {
        #mostrarMenuEsquerra {
          position: absolute;
          top: 150px;
          left: 80px;
        }
      }
      .ruta-navegacio-container {
        top: 80px !important; 
      }

      #paginaPrincipal,
      #paginaPrincipal-inici{
        margin: 0 10% 0 10%;
        padding-top: 0;
      }
  
      &.scrolled {
        #titol-sitio {
          display: none !important;
        }
  
        header > :first-child > :nth-child(2) {
          display: none !important;
        }
  
        header > :first-child > :nth-child(2)::before {
          content: none !important;
        }
      }

      /* #paginaPrincipal-inici{
        margin: 0 10% 0 10%;
        padding-top: 20% !important;;
      } */
    }
}



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

    body{  	
      header{
        > :first-child{
          > :first-child{					
            margin-left: 0;
          }

          > :nth-child(3) {
            margin-right: 0;
          }
          }
          > :nth-child(2) {
            a{
              margin-left: 0;
            }
          }
      }
      #contenidor {
        #menuEsquerra {
          width: 100%;
          padding: 20px 20px 20px 40px;
        }
        .contenidor-info {
          flex-direction: column;

          .globus-de-preguntes.sidebar-faq {
            position: relative;
            z-index: 20;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: stretch;
            gap: 20px;
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
            margin-top: 500px;

            .sidebar-section {
              flex: 1 1 calc(50% - 20px);
              max-width: calc(50% - 20px);
              min-width: 280px;
            }

            .globus-conversa.resposta {
              scroll-margin-top: 180px;
            }
          }

  
        .scroll-wrapper {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
          overflow-y: visible; 
          padding: 0;

          .contingut-dret {
            width: 100%;
            margin: 0;
            padding: 0 10px;
            max-height: unset; 
          }
        }
        }
        
      #paginaPrincipal-inici{
        margin: 0 10% 0 10%;
        padding-top: 20% !important;;
      }
      }
      .ruta-navegacio-container {
        position: sticky;
        top: 150px;
        z-index: 999;
        padding: 10px 20px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }


      footer {
        nav:first-of-type {
          p {
            /* margin-left: 10%; */
            margin: 0 auto !important;
            }
          #logos-XXSS {
            /* margin-left: 5%;   */
            margin: 0 auto;
          }
        }
        nav:nth-of-type(2) {
          .logoPeuGeneral img {
          margin-left: 0;
          }
          .enllacos-peu {
          margin-right: 0;  
          }
        }
        }
    }
  }

  @media screen and (max-width: 1800px) {
    .contenidor-info {
        margin-left: 40px;
        margin-right: 40px;
        gap: 30px;
      }

      .contingut-dret {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 10px;
      }

      .globus-de-preguntes.sidebar-faq {
        min-width: 280px;
        max-width: 300px;
      }
    }

  /* --Maquetació per a pantalles de 15"-- */

  @media (max-width: 1370px) {

  /* Pàgina principal*/
  #paginaPrincipal-inici {
    margin-top: 140px !important;
  }

  /*Scroll aside esquerra Guia metodològica*/
  .sidebar-faq {
    padding-right: 15px !important;
  }

  }

  /* --Maquetació Telèfons-- */

  @media (max-width: 450px) {
    
  }
/* === AJUSTE DEFINITIVO #paginaPrincipal-inici === */

/* Establecemos una variable con la altura media del header */
:root {
  --altura-header: 70px; /* ajusta si tu header mide más o menos */
}

/* Normalizamos el flujo del documento */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Asegurar que el header sea sticky, pero no tape el main */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
}

/* Corregir el posicionamiento del main */
#paginaPrincipal-inici {
  position: relative !important;
  box-sizing: border-box !important;
  max-width: 1200px !important;
  line-height: 1.8 !important;
 
  margin: 0 auto !important;
  /* Espacio justo para quedar debajo del header */
  margin-top: calc(var(--altura-header) + 10px) !important;
  padding: 10px 40px !important;
  padding-top: 0 !important;
  padding-bottom: 40px !important;
  min-height: auto !important; /* quita el límite de scroll */
  height: auto !important;
  overflow: visible !important;
}

/* Textos internos legibles */
#paginaPrincipal-inici h1,
#paginaPrincipal-inici h2,
#paginaPrincipal-inici h3,
#paginaPrincipal-inici p,
#paginaPrincipal-inici li {
  margin: 0 0 16px 0 !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
}

/* --- Ajustes para pantallas pequeñas --- */
@media screen and (max-width: 768px) {
  :root { --altura-header: 85px; }

  #paginaPrincipal-inici {
    margin-top: calc(var(--altura-header) + 6px) !important;
    padding: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 60px !important; /* más espacio para el final */
  }
}

/* --- Ajustes para móviles muy pequeños --- */
@media screen and (max-width: 450px) {
  :root { --altura-header: 95px; }

  #paginaPrincipal-inici {
    margin-top: calc(var(--altura-header) + 4px) !important;
    padding: 14px !important;
    padding-bottom: 80px !important;
    height: auto !important;
    min-height: auto !important;
  }
}

  /* === AJUSTE FINAL #paginaPrincipal-inici PARA IGUALAR A #paginaPrincipal === */

:root {
  --altura-header: 70px; /* ajusta si tu header es más alto o bajo */
  --margen-lateral: 10%; /* mismo margen que usa #paginaPrincipal */
}

/* Estilo base idéntico al de #paginaPrincipal */
#paginaPrincipal-inici {
  position: relative !important;
  box-sizing: border-box !important;
  /* width: 100% !important; */
  max-width: 1200px !important;
  /* iguales márgenes laterales que el tutorial */
  margin-left: var(--margen-lateral) !important;
  margin-right: var(--margen-lateral) !important;
  /* margin-bottom: 10% !important; */
  /* margen superior justo para que no tape el nav */
  margin-top: 2% !important;
  padding: 0 20px 70px 20px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Ajustes para tablets */
@media screen and (max-width: 940px) {
  :root {
    --altura-header: 85px;
    --margen-lateral: 8%;
  }

  #paginaPrincipal-inici {
    margin-top: 30px !important;
    margin-left: var(--margen-lateral) !important;
    margin-right: var(--margen-lateral) !important;
    padding: 0 16px 30px 16px !important;
  }
}

/* Ajustes para móviles */
@media screen and (max-width: 480px) {
  :root {
    --altura-header: 95px;
    --margen-lateral: 6%;
  }

  #paginaPrincipal-inici {
    margin-top: 30px !important;
    margin-left: var(--margen-lateral) !important;
    margin-right: var(--margen-lateral) !important;
    padding: 0 14px 180px 14px !important;
  }
}