:root {
  --accent: #F26C4F;
  --dark: #3E4A56;
  --light: #FCF9F4;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}
body {
  background-color: var(--light);
  font-family: 'Montserrat', sans-serif;
  color: var(--dark);
}
#main-header {
  background-color: var(--dark);
  transition: all 0.3s ease;
}
#main-header.shrink {
  padding: 0.4rem 2rem;
  background-color: rgba(62, 74, 86, 0.95);
}
.navbar{
  background-color: #263238;
}
.navbar-brand img{ 
  width: 400px;
  max-width: 100%;
  padding: 5px 0;
}
.navbar-nav{
  font-size: 24px;
}
.text-accent { 
  color: var(--accent); 
}
.hero { 
  background-color: var(--dark); height: 300px; 
  object-fit: cover; /* mantiene proporción recortando si es necesario */
  object-position: center;
}
.hero img{
  width: 100%;
}
.hero h1 { 
  font-size: 2rem; 
  margin-top: 45px;
  color: #cfd8dc;
}
.category { 
  cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; 
}
.category:hover { 
  transform: scale(1.05); color: var(--accent); 
}
.category p{
  font-size: 1.4rem;
  margin-top: 10px;
}
.icon { 
  width: 100px; height: 100px; margin-bottom: 10px; /*filter: invert(60%) sepia(50%) saturate(400%) hue-rotate(-10deg)*/; 
}
.header-line {
  width: 70px;
  height: 6px;
  background: #ffab91;
  border-radius: 6px;
  margin: 0 auto;
}
.divisor{
  border: 1px solid #eceff1;
}
h2{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-top: 10px;
}
.img-destacadas img {
  width: 690px;
  height: 590px;
  object-fit: cover;      /* mantiene proporción recortando si es necesario */
  object-position: center; /* centra la imagen dentro del marco */
  border-radius: 0.5rem;   /* opcional: mantiene las esquinas redondeadas */
  display: block;
  margin: 0 auto;
}
.hover-scale { 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.hover-scale:hover { 
  transform: scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
}
.btn-outline-accent { 
  border-color: var(--accent); color: var(--accent);
}
.btn-outline-accent:hover { 
  background-color: var(--accent); color: white; 
}
.brand-container {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* evita scroll inesperado */
  gap: 3rem; /* espacio entre logos */
  max-width: 100%;
}
@media (max-width: 992px) {
  .brand {
    max-height: 50px;
  }
  .brand-hm {
    max-height: 50px;
  }
}
@media (max-width: 768px) {
  .brand-container {
    gap: 2rem;
    padding: 0 1rem;
  }
  .brand {
    max-height: 45px;
  }
  .brand-hm {
    max-height: 45px;
  }
}
@media (max-width: 576px) {
  .brand-container {
    flex-direction: row;
    justify-content: center;
  }
  .brand {
    max-height: 40px;
    flex: 1 1 40%; /* 2 logos por fila */
    max-width: 45%;
  }
  .brand-hm {
    max-height: 40px;
    flex: 1 1 40%; /* 2 logos por fila */
    max-width: 45%;
  }
}
.brand { 
  height: 65px;  transition: opacity 0.3s ease, transform 0.3s ease; 
}
.brand-hm{
    height: 95px;  transition: opacity 0.3s ease, transform 0.3s ease; 
}
.brand:hover { 
  opacity: 1; transform: scale(1.1); 
}
.brand-hm:hover { 
  opacity: 1; transform: scale(1.1); 
}

.nosotros {
  background-color: #fdf8ef; /* Beige suave */
  color: #333;
  font-family: 'Montserrat', sans-serif;
}
.nosotros h2 {
  font-variant: small-caps;
  font-weight: 600;
  color: #333;
}
.nosotros .avatar-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f07c54; /* Naranja coral */
}
.nosotros .quote {
  position: relative;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #4a4a4a;
  max-width: 250px;
}
.nosotros .quote p {
  margin: 0;
  font-weight: 500;
}
.nosotros .quote-icon {
  position: absolute;
  right: -15px;
  bottom: -10px;
  font-size: 2rem;
  color: #f07c54;
  font-weight: bold;
  line-height: 1;
}


.about { 
  background-color: #f8f6f2;
}
footer { 
  background-color: var(--dark); color: white; 
}
footer .socials a { 
  color: white; margin: 0 10px; font-size: 1.2rem; transition: color 0.3s ease; 
}
footer .socials a:hover { 
  color: var(--accent); 
}