md-dialog {
  background-color: black !important; /* O el color que prefieras */
}
header img{max-width:100%;max-height:50vh;display:block;object-fit:cover}
header{background-color:#000000;display:grid;grid-template-rows:auto;grid-template-columns:1fr}
header .hero{
  grid-row:3/4;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));color:white;margin:40px 20px 50px;justify-items:center;align-items:center
}
header .hero .titulo{margin:0 20px 2px 20px;font-family:'Poppins', sans-serif;
  font-style: normal;line-height:100%; text-align: left; text-shadow: 0 0 3px rgb(0, 0, 0), 0 0 2px rgb(0, 0, 0);}
header .hero .bajada{font-size:1.0rem;font-weight:300;margin:0 20px;max-width:400px}
header .hero .celeste{line-height: 80%}
header picture,header img{width:100%;grid-row:1/3;grid-column:1/2;max-height:50vh;object-fit:cover}
.testimonios{margin:2rem 20px 3rem}
.testimonios .fh1{color:#ff8500;margin-bottom:50px}
.testimonios a{display:block;margin:40px auto}
.especialistas{display:grid;grid-template-columns:repeat(10,1fr);grid-gap:10px;justify-items:center}
.especialistas .antetitulo{grid-row:1/2;padding-top:10px}
.especialistas h2{grid-row:2/3}
.especialistas img,.especialistas picture{grid-column:2 / 10;grid-row:5/6;max-width:100%;height:100%}
.especialistas div{height:100%;width:100%;background-color:#e1eef3;grid-column:5/-1;grid-row:4/8}
.especialistas p{grid-row:3/4}
.especialistas p,.especialistas h2,.especialistas a{grid-column:1 / -1;text-align:center;margin-bottom:0}
.especialistas .fh1{color:#095779}
.especialistas p:last-of-type{color:#333;margin:20px 30px}
@media screen and (min-width:550px){
  header picture,header img{width:109%}
  header .hero .titulo{margin:0; text-align: left ;}
  header{grid-template-columns:repeat(10,1fr);grid-template-rows:auto}
  header picture,header img{grid-column:5/-1;justify-self:end;object-fit:cover;height:100%;max-height: 80vh;opacity: 100%;}
  header .hero{margin:0;grid-column:2/7;grid-row:1/3;z-index:10;grid-template-columns:1fr;align-self:center;justify-items:baseline}
  .titulo.naranjo
      {text-shadow: 
        0 0 3px rgb(0, 0, 0),  /* Sombra principal con desenfoque */
        0 0 2px rgb(0, 0, 0);  /* Sombra más difusa para suavidad */}
}
@media screen and (min-width:700px){header .hero .fh1{font-size:50px;line-height:50px}
.servicio {margin: 30px;}
.glider{max-width:700px}
.especialistas{grid-gap:15px;justify-items:left;grid-gap:0;align-items:center;align-items:start}
.especialistas .antetitulo{grid-row:2/3;grid-column:2/5}
.especialistas h2{grid-row:3/4;grid-column:2/5;text-align:left}
.especialistas p{grid-row:4/5;grid-column:2/5;text-align:left}
.especialistas p:last-of-type{margin:0}
.especialistas a{grid-row:5/6;grid-column:2/5;margin-top:20px}
.especialistas img,.especialistas picture{grid-column:6 / -1;grid-row:3 / 6;max-height:100%;max-width:auto;object-fit:contain;align-self:center}
.especialistas div{grid-column:8/-1;grid-row:2/7}
}@media screen and (min-width:1024px){header div img{position: static; overflow: clip;}
  header .hero .bajada{display:block;margin-top:40px;; max-width: 60%;}
header .hero .titulo{font-size:3.5rem;line-height:3.5rem}
header .hero .titulo .celeste{line-height:3.5rem}
.glider{max-width:1024px}
header div img{max-height:83vh;object-fit:cover}
.especialistas h2{font-size:1.7rem;align-self:center;line-height:1.9rem}
.especialistas p:last-of-type{font-size:20px}
.especialistas a{grid-row:5/6}
}@media screen and (min-width:1300px){
.especialistas{grid-template-rows:10px 40px 130px auto auto 20px 20px}
.especialistas .antetitulo{font-size:1rem;grid-row:2/3;align-self:end}
.especialistas h2{font-size:2.5rem;line-height:2.5rem;align-self:baseline;grid-row:3/4}
.especialistas p:last-of-type{font-size:1.2rem;line-height:1.5rem;grid-row:4/5;align-self:center;max-width:70%ñ}
.especialistas a{grid-row:5/6}
}

/* BRANDS THAT I WORKED */
.brands-section {
  text-align: center;
  margin: 20px 0;
}
.brands-section h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.brands-logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}
.brands-logos img {
  width: 50px; /* Tamaño pequeño para móviles */
  height: auto;
  opacity: 0.9; /* Opcional: ajusta la opacidad para suavizar el efecto */
}
@media (min-width: 768px) {
  .brands-logos img {
      width: 70px; /* Tamaño un poco más grande para tablets/desktop */
    }
  }

 .btn-hero {
  display: inline-block;
  margin: 22px auto 0;
  padding: 14px 32px;
  background-color: #ff7a00;
  color: #000;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  width: fit-content;
  transition: all 0.28s ease-in-out;
  box-shadow: 0 0 0 transparent;
}

/* Hover – solo se verá en tablet/desktop, no molesta en móvil */
.btn-hero:hover {
  background-color: #ffa64d;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(255, 122, 0, 0.55);
}

.btn-hero:active {
  transform: translateY(0);
  box-shadow: 0 0 6px rgba(255, 122, 0, 0.3);
}

/* 📱 Mobile ajustes */
@media screen and (max-width: 549px) {
  .btn-hero {
    font-size: 1rem;
    padding: 13px 28px;
    border-radius: 6px;
    margin-top:10px;
    margin-bottom:10px;  }
}

/* 💻 Desktop ajustado al layout de tu header */
@media screen and (min-width: 550px) {
  .btn-hero {
    justify-self: start;
    margin-left: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .btn-hero {
    font-size: 1.1rem;
    padding: 15px 36px;
    margin-top: 35px;
  }
}