/* ============================
   styles.css
   - Aquí se encuentran los estilos BEM, Flexbox y CSS Grid
   ============================ */

/* ---------- RESET y VARIABLES ---------- */
* { 
   box-sizing: border-box; 
   margin:0; 
   padding:0; 
}
:root{
--primary:#0d6efd;
--dark:#203040;
--bg:#f5f7fb;
--accent:#2ecc71;
--max-width:1200px;
--radius:10px;
--text:#222;
}
body{ 
   font-family: "Montserrat", sans-serif; 
   color:var(--text); 
   background: white; 
   line-height:1.6; 
}

/* Contenedor central */
.container-max{ 
   max-width:var(--max-width); 
   margin:0 auto; 
   padding:0 1rem; 
}

/* ============================
   HEADER / NAVBAR (BEM)
   - main-header block
   - NOTE: la estructura del collapse es de BOOTSTRAP
   ============================ */
.main-header{ 
   box-shadow:0 4px 10px rgba(0,0,0,0.04); 
   background:#fff; 
}
.main-header__brand{ 
   display:flex; 
   gap:0.5rem; 
   align-items:center; 
   font-weight:700; 
   color:var(--primary); 
   text-decoration:none; 
}
.main-header__logo-sub{ 
   font-family:"Roboto Mono", monospace; 
   color:var(--accent); 
   font-size:0.85rem;
}

/* ============================
   HERO (BEM + BOOTSTRAP grid)
   - FLEXBOX utilities de Bootstrap aplicadas en HTML (d-flex, align-items-center)
   ============================ */
.hero-section{ 
   background:var(--dark); 
   color:white; 
   padding:4rem 0; }
.hero-section__title{ 
   font-size:2.2rem;
   margin-bottom:1.6rem; 
}
.hero-section__lead{ 
   opacity:0.9; 
   margin-bottom:1rem; 
}
.hero-section__img{ 
   border-radius:12px; 
   box-shadow:0 10px 30px rgba(13,110,253,0.08); 
}

/* ============================
   CAROUSEL (Ajustes visuales)
   - BOOTSTRAP carousel usado; aquí solo pequeñas personalizaciones BEM
   ============================ */
.projects-carousel .carousel-caption{ 
   background:rgba(0,0,0,0.36); 
   padding:0.6rem 0.9rem;
   border-radius:8px; 
}
.projects-section{ 
   background:transparent; 
}

/* ============================
   SERVICES (CSS GRID) - BEM
   - .services-grid usa CSS Grid (bidimensional)
   ============================ */
.services-section{ 
   padding:3rem 0; 
   background:var(--bg); 
}
.services-section__title{ 
   color:var(--dark);
   margin-bottom:1.25rem; 
   font-weight: 700;
}
.services-grid{
   max-width:var(--max-width); 
   margin:0 auto;
   display:grid; /* GRID */
   gap:1.25rem;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.service-card{ 
   background:#fff; 
   border-radius:var(--radius); 
   padding:1.25rem;
   box-shadow:0 6px 20px rgba(0,0,0,0.06); 
   transition:transform .25s; 
}
.service-card:hover{ 
   transform:translateY(-6px);
}
.service-card--featured{ 
   border-left:5px solid var(--accent); 
}

/* ============================
   CONTACT (BEM + BOOTSTRAP form-control)
   - Las clases .form-control son de BOOTSTRAP y se aplican en HTML
   - Aquí personalizamos tamaños y espaciados
   ============================ */
.contact-section{ 
   padding:3rem 0; 
}
.contact-form__input, .contact-form__textarea{ 
   border-radius:8px; 
}

/* ============================
   FOOTER
   ============================ */
.site-footer{ 
   background:var(--dark); 
   color:#d1d1d1;
}

/* ============================
   UTILIDADES Y ACCESIBILIDAD
   ============================ */
a:focus, button:focus, input:focus, textarea:focus{ 
   outline:3px solid rgba(13,110,253,0.16); 
   outline-offset:2px; 
}

/* ============================
   MEDIA QUERIES (Pequeños ajustes)
   ============================ */
@media(min-width:992px){
.hero-section__title{ font-size:3rem; }
}