/* ----------- EMPRESA.CSS RESPONSIVE COMPLET ----------- */
.empresa-wrapper {
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}

.empresa-grid {
display: grid;
grid-template-columns: 2.4fr 2.5fr 2.5fr;
grid-template-rows: auto auto;
gap: 30px;
align-items: start;
}

.empresa-col.empresa-titol {
grid-column: 1;
grid-row: 1 / span 2;
}

.empresa-col.empresa-titol h1 {
margin-bottom: 120px;
line-height: 1em;
margin-top: 0px;
}

.empresa-col.empresa-titol p {
text-align: left;
margin-bottom: 40px;
}

.empresa-col.mision {
grid-column: 2;
grid-row: 1;
padding-top: 0px;
max-width: 350px;
margin-left: 170px;
margin-right: auto;
}

.empresa-col.vision {
grid-column: 2;
grid-row: 2;
max-width: 350px;
margin-left: 170px;
margin-right: auto;
}

.empresa-col.valores {
grid-column: 3;
grid-row: 2;
max-width: 350px;
margin-left: 190px;
margin-right: auto;
}

.empresa-col ul {
list-style: none;
padding-left: 0;
}

.empresa-col ul li {
font-size: 0.95em;
color: #0026a3;
line-height: 1.6em;
text-align: left;
margin-bottom: 12px;
}

/* ------------------------ RESPONSIVE ------------------------ */

@media (min-width: 1401px) {
  body {
    padding-top: 160px;
  }
}
@media (min-width: 1401px) and (max-width: 1600px) {
  body {
    padding-top: 250px; /* o 120px segons alçada del menú */
  }
}

/* Pantalles grans (1400px - 1301px) */
@media (max-width: 1400px) {
.empresa-col.mision {
margin-left: 120px;
max-width: 320px;
}
.empresa-col.vision {
margin-left: 120px;
max-width: 320px;
}
.empresa-col.valores {
margin-left: 140px;
max-width: 320px;
}
}

/* Pantalles mitjanes (1300px - 1201px) */
@media (max-width: 1300px) {
.empresa-grid {
gap: 25px;
}
.empresa-col.mision {
margin-left: 80px;
max-width: 300px;
padding-top: 100px;
}
.empresa-col.vision {
margin-left: 80px;
max-width: 300px;
}
.empresa-col.valores {
margin-left: 100px;
max-width: 300px;
}
.empresa-col.empresa-titol h1 {
margin-bottom: 100px;
margin-top: 90px;
}
}

/* Tablets grans (1200px - 1001px) */
@media (max-width: 1200px) {
.empresa-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 40px;
}
.empresa-col.empresa-titol {
grid-column: 1 / -1;
grid-row: 1;
text-align: center;
}
.empresa-col.empresa-titol h1 {
font-size: 4em;
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
}
.empresa-col.mision {
grid-column: 1;
grid-row: 2;
margin-left: auto;
margin-right: auto;
padding-top: 0;
max-width: 100%;
}
.empresa-col.vision {
grid-column: 2;
grid-row: 2;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.empresa-col.valores {
grid-column: 1 / -1;
grid-row: 3;
margin-left: auto;
margin-right: auto;
max-width: 500px;
text-align: center;
}
.empresa-col h2 {
text-align: center;
}
}

/* Tablets (1000px - 769px) */
@media (max-width: 1000px) {
.empresa-wrapper {
padding: 30px 20px;
}
.empresa-grid {
display: flex;
flex-direction: column;
gap: 40px;
}
.empresa-col {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 0 20px;
}
.empresa-col.empresa-titol {
text-align: center;
padding-top: 0;
}
.empresa-col.empresa-titol h1 {
font-size: 3.5em;
text-align: center;
margin-bottom: 30px;
margin-top: 0;
}
.empresa-col h2 {
font-size: 1.6em;
text-align: center;
margin-bottom: 20px;
}
.empresa-col p {
text-align: left;
font-size: 1em;
}
}

/* Mòbils grans (768px - 481px) */
@media (max-width: 768px) {
.empresa-wrapper {
padding: 20px 15px;
}
.empresa-grid {
gap: 35px;
}
.empresa-col {
padding: 0 10px;
max-width: 100%;
}
.empresa-col.empresa-titol h1 {
font-size: 2.8em;
margin-bottom: 25px;
}
.empresa-col h2 {
font-size: 1.4em;
text-align: center;
}
.empresa-col p,
.empresa-col ul li {
font-size: 0.95em;
text-align: left;
line-height: 1.6;
}
}

/* Mòbils petits (480px i menys) */
@media (max-width: 480px) {
.empresa-wrapper {
padding: 15px 10px;
}
.empresa-grid {
gap: 30px;
}
.empresa-col {
padding: 0 5px;
}
.empresa-col.empresa-titol h1 {
font-size: 2.2em;
margin-bottom: 20px;
line-height: 1.1;
}
.empresa-col h2 {
font-size: 1.2em;
margin-bottom: 15px;
}
.empresa-col p,
.empresa-col ul li {
font-size: 0.9em;
line-height: 1.5;
}
}

/* Molt petits (350px i menys) */
@media (max-width: 350px) {
.empresa-wrapper {
padding: 10px 5px;
}
.empresa-col.empresa-titol h1 {
font-size: 1.8em;
}
.empresa-col h2 {
font-size: 1.1em;
}
.empresa-col p,
.empresa-col ul li {
font-size: 0.85em;
}
}

/* ------------------------ MILLORA DE MARGES (Afegeix a empresa.css) ------------------------ */
/* Normalitzem el marge superior per evitar diferències entre portàtils */

/* Contenidor central amb marges laterals i separació del menú */
#contenidor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 60px; /* top | right/left | bottom */
}

/* Evitem desalineacions laterals fixes */
.empresa-col.mision,
.empresa-col.vision,
.empresa-col.valores {
  margin-left: auto;
  margin-right: auto;
}

/* Unifiquem el marge del títol */
.empresa-col.empresa-titol h1 {
  margin-top: 0;
  margin-bottom: 60px;
}

/* Ajustos responsius del padding-top del contenidor si cal */
@media (max-width: 1200px) {
  #contenidor { padding-top: 110px; }
}
@media (max-width: 1000px) {
  #contenidor { padding-top: 130px; } /* quan el menú en columnes ocupa una mica més */
}
@media (max-width: 768px) {
  #contenidor { padding-top: 140px; }
}
@media (max-width: 480px) {
  #contenidor { padding-top: 150px; }
}