/*
========================================
ESTILOS PRINCIPALES DEL SITIO WEB ESTALMM
========================================

- Paleta de colores corporativos
- Tipografía y fondo general
- Header y navegación
- Sección Hero
- Secciones de contenido (Empresa, Objetivo, Proyecto, etc.)
- Sección Servicios
- Sección Clientes
- Sección Garantías
- Sección Galería
- Footer
- Responsive Design
*/

/* ===================== */
/* PALETA DE COLORES     */
/* ===================== */
:root {
  --estalmm-amarillo: #ffc107;
  --estalmm-negro: #181818;
  --estalmm-gris: #444;
  --estalmm-blanco: #fff;
  --estalmm-naranja: #ff9800;
}

/*
============================
ESTILOS PRINCIPALES Y PALETA
============================
- Definición de variables de color corporativo
- Estilos globales de tipografía y fondo
- Encabezado, navegación y footer
*/

/* ===================== */
/* ESTILO GLOBAL         */
/* ===================== */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--estalmm-negro);
  color: var(--estalmm-blanco);
}

/* ===================== */
/* HEADER Y NAVEGACIÓN   */
/* ===================== */
header, .navbar, .sticky-top {
  background: var(--estalmm-negro) !important;
}

.navbar-brand, .navbar-nav .nav-link {
  color: var(--estalmm-amarillo) !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover {
  color: var(--estalmm-naranja) !important;
}

/* ===================== */
/* TITULOS GENERALES     */
/* ===================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--estalmm-amarillo);
  font-weight: bold;
}

/* ===================== */
/* SECCIONES GENERALES   */
/* ===================== */
.section-padding {
  padding: 3rem 0;
  background: transparent !important;
}

.bg-light {
  background: transparent !important;
}

/*
============================
BOTONES Y ENLACES
============================
- Estilos para botones principales (btn-warning)
- Hover y estados activos
*/

/* ===================== */
/* BOTONES               */
/* ===================== */
.btn-warning, .btn-warning:focus, .btn-warning:active {
  background: var(--estalmm-amarillo) !important;
  border: none;
  color: var(--estalmm-negro) !important;
  font-weight: bold;
}

.btn-warning:hover {
  background: var(--estalmm-naranja) !important;
  color: var(--estalmm-blanco) !important;
}

/*
============================
TARJETAS Y COMPONENTES
============================
- Estilos para .card, títulos y textos
- Efectos hover y colores
*/

/* ===================== */
/* SECCIÓN SERVICIOS     */
/* ===================== */
.card {
  border: 2px solid var(--estalmm-amarillo);
  box-shadow: 0 2px 8px rgba(24,24,24,0.07);
  background: #232323 !important;
  color: var(--estalmm-blanco);
}
.card-title {
  color: var(--estalmm-naranja);
  font-weight: bold;
}
.card-text {
  color: var(--estalmm-blanco) !important;
}

/* Ajustes para imágenes de las tarjetas de galería */
.card-img-top {
  width: 100%;
  height: 220px; /* Altura uniforme */
  object-fit: cover; /* Ajusta la imagen para cubrir el contenedor */
  object-position: center; /* Centra la imagen */
  border-radius: 0.5rem; /* Bordes redondeados para consistencia visual */
}

/* Centrar tarjetas en filas incompletas dentro de la sección servicios */
#servicios .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra las tarjetas horizontalmente */
}

/*
============================
SECCIONES CLAVE
============================
- .section-padding: Espaciado vertical para secciones
- .bg-light, .bg-white: Fondos personalizados
*/

/* ===================== */
/* SECCIONES GENERALES   */
/* ===================== */
.section-padding {
  padding: 3rem 0;
  background: transparent !important;
}

.bg-light {
  background: transparent !important;
}

/*
============================
SECCIÓN GARANTÍAS
============================
- Colorea los textos destacados en la lista de garantías
*/

/* ===================== */
/* SECCIÓN GARANTÍAS     */
/* ===================== */
#garantias ul li strong {
  color: var(--estalmm-naranja);
}

/*
============================
SECCIÓN CLIENTES
============================
- Bordes y colores para tarjetas de clientes
- Textos secundarios
*/

/* ===================== */
/* SECCIÓN CLIENTES      */
/* ===================== */
.bg-white {
  background: #232323 !important;
  color: var(--estalmm-blanco);
}
#clientes .bg-white {
  border: 2px solid var(--estalmm-amarillo);
}
#clientes .small.text-muted {
  color: var(--estalmm-blanco) !important;
  font-weight: 500;
}
.small.text-muted.mt-2 {
  color: var(--estalmm-naranja) !important;
  font-weight: 500;
}

/*
============================
MODAL CARRUSEL
============================
- Apariencia del modal y controles del carrusel de galería
*/

/* ===================== */
/* SECCIÓN GALERÍA Y MODAL CARRUSEL */
/* ===================== */
#modalCarrusel .modal-content {
  border: 3px solid var(--estalmm-amarillo);
  background: #232323;
  color: var(--estalmm-blanco);
}
#modalCarrusel .modal-title {
  color: var(--estalmm-amarillo);
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  filter: invert(70%) sepia(100%) saturate(500%) hue-rotate(10deg);
}

/* Personalización de flechas de navegación del carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--estalmm-naranja) !important;
  border-radius: 50%;
}

/* Personalización del botón de cerrar (X) en el modal */
.btn-close {
  background-color: var(--estalmm-naranja) !important;
  opacity: 1;
}

.btn-close:hover {
  background-color: var(--estalmm-amarillo) !important;
}

/*
============================
HERO SECTION (PORTADA)
============================
- Fondo dividido, imagen y contenido centrado
- Adaptación para móvil
*/

/* ===================== */
/* SECCIÓN HERO          */
/* ===================== */
.hero-section {
  background: linear-gradient(90deg, var(--estalmm-negro) 60%, var(--estalmm-amarillo) 100%);
  display: flex;
  min-height: 60vh;
  padding: 0;
}
.hero-content-col {
  flex: 1 1 50%;
  background: #212529;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 60vh;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 3rem 2rem;
}
.hero-content h2, .hero-content p {
  color: var(--estalmm-amarillo) !important;
}
.hero-img-col {
  flex: 1 1 50%;
  position: relative;
  min-width: 0;
  min-height: 60vh;
  overflow: hidden;
}
.hero-img-bg {
  background-image: url('/Imagenes/Fondo_Herrero_Mediano.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #232323;
}
@media (max-width: 767px) {
  .hero-img-bg {
    background-image: url('/Imagenes/Fondo_Herrero_Movil.jpg');
    background-size: cover;
    background-position: center;
    min-height: 40vh;
  }
}

/*
============================
FORMULARIOS
============================
- Etiquetas, campos y enfoque
*/

/* ===================== */
/* FORMULARIO DE CONTACTO*/
/* ===================== */
.form-label {
  color: var(--estalmm-amarillo);
  font-weight: 500;
}
.form-control {
  background: #181818;
  color: var(--estalmm-blanco);
  border: 1px solid var(--estalmm-amarillo);
}
.form-control:focus {
  background: #232323;
  color: var(--estalmm-blanco);
  border-color: var(--estalmm-naranja);
  box-shadow: 0 0 0 0.2rem rgba(255,193,7,.25);
}

/* Ajustar el color del texto del placeholder para que sea visible */
.form-control::placeholder {
  color: var(--estalmm-amarillo); /* Color amarillo para mejor visibilidad */
  opacity: 1; /* Asegura que el placeholder sea completamente visible */
}

/* Estilos para la sección de contacto */
#contacto {
  padding: 20px;
  background-color: #f9f9f9;
}
#contacto h2 {
  font-size: 1.8rem;
  color: #333;
}
#contacto p {
  font-size: 1rem;
  color: #555;
}
#contacto form {
  max-width: 500px;
  margin: 0 auto;
}
#contacto .form-label {
  font-weight: bold;
}
#contacto .form-control {
  border-radius: 5px;
}
#contacto button {
  font-size: 1.2rem;
  padding: 10px;
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
  #contacto h2 {
    font-size: 1.5rem;
  }
  #contacto p {
    font-size: 0.9rem;
  }
  #contacto button {
    font-size: 1rem;
    padding: 8px;
  }
}

/*
============================
IMÁGENES DE SECCIONES CLAVE
============================
- Unificación de tamaño y estilo para imágenes de Objetivo, Proyecto, Experiencia y Garantías
*/

/* ===================== */
/* SECCIÓN EMPRESA, OBJETIVO, PROYECTO, EXPERIENCIA, GARANTÍAS */
/* ===================== */
.img-seccion {
  width: 100%;
  max-width: 340px;
  height: 220px;
  object-fit: cover;
  object-position: left top;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(24,24,24,0.07);
  margin: 0 auto;
  display: block;
}
@media (max-width: 575px) {
  .img-seccion {
    max-width: 100%;
    height: 150px;
    object-position: left top;
  }
}

/*
============================
ALTURA FIJA PARA IMÁGENES DE SERVICIOS
============================
Fuerza que todas las imágenes de servicios tengan la misma altura y aspecto uniforme en las tarjetas.
*/
.img-servicio-fija {
  height: 220px;
  object-fit: cover;
  width: 100%;
  background: #222;
  border-radius: 0.5rem 0.5rem 0 0;
}
@media (max-width: 767px) {
  .img-servicio-fija {
    height: 160px;
  }
}

/* =============================
   ALTURA Y RESPONSIVIDAD PARA IMÁGENES DE SERVICIOS
   =============================
   Limita la altura máxima de las imágenes de servicios y asegura que se adapten bien en todos los dispositivos.
*/
.img-servicio-fija {
  max-height: 220px;
  min-height: 160px;
  object-fit: cover;
  width: 100%;
  background: #222;
  border-radius: 0.5rem 0.5rem 0 0;
  display: block;
}
@media (max-width: 991px) {
  .img-servicio-fija {
    max-height: 160px;
    min-height: 120px;
  }
}
@media (max-width: 575px) {
  .img-servicio-fija {
    max-height: 120px;
    min-height: 80px;
  }
}

/*
============================
ALTURA FIJA Y CENTRADO PARA LOGOS DE CLIENTES
============================
Fuerza que todos los contenedores de logos de clientes tengan la misma altura y alineación.
*/
.cliente-logo-container {
  min-height: 160px;
  max-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #232323; /* Fondo oscuro para coherencia visual */
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 1rem 0.5rem;
  height: 100%;
  border: 2px solid var(--estalmm-amarillo);
}
@media (max-width: 767px) {
  .cliente-logo-container {
    min-height: 100px;
    max-height: 120px;
    padding: 0.5rem 0.2rem;
  }
}

/*
============================
DISEÑO RESPONSIVO
============================
- Media queries para adaptar el sitio a diferentes dispositivos
- Ajustes de paddings, fuentes, tarjetas, hero, galería y clientes
*/

/* ===================== */
/* RESPONSIVE DESIGN     */
/* ===================== */
@media (max-width: 1200px) {
  .hero-content {
    padding: 2rem 1rem;
  }
}
@media (max-width: 991px) {
  .hero-section {
    flex-direction: column;
    min-height: 50vh;
  }
  .hero-content-col, .hero-img-col {
    flex: 1 1 100%;
    min-height: 40vh;
    max-width: 100%;
  }
  .hero-img-bg {
    min-height: 40vh;
    position: relative;
  }
  html {
    scroll-padding-top: 100px;
  }
  .section-padding {
    padding: 2rem 0;
  }
  .navbar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (max-width: 767px) {
  .row {
    --bs-gutter-x: 0.5rem;
  }
  .section-padding {
    padding: 1.2rem 0;
  }
  .card {
    margin-bottom: 1rem;
  }
  .hero-content {
    padding: 1.2rem 0.5rem;
  }
  .hero-content h2 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1.1rem;
  }
  .modal-dialog {
    max-width: 98vw;
    margin: 0.5rem auto;
  }
}
@media (max-width: 575px) {
  h1, h2, h3 {
    font-size: 1.3rem;
  }
  .card-title {
    font-size: 1.1rem;
  }
  .card-text {
    font-size: 0.95rem;
  }
  .navbar-brand span {
    font-size: 1rem;
  }
  .hero-content h2 {
    font-size: 1.2rem;
  }
  .hero-content {
    padding: 0.7rem 0.2rem;
  }
  .form-label {
    font-size: 0.95rem;
  }
  .form-control {
    font-size: 0.95rem;
  }
}
@media (max-width: 767px) {
  #galeria .row > div,
  #clientes .row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #galeria .card,
  #clientes .bg-white {
    margin-bottom: 1.2rem;
  }
}

/* Logo sobre imagen en sección Objetivo */
.logo-sobre-img {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: auto;
  z-index: 2;
  /* background: rgba(255,255,255,0.7); */
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
@media (max-width: 576px) {
  .logo-sobre-img {
    width: 40px;
    top: 6px;
    right: 6px;
    padding: 2px;
  }
}

/* Centrar tarjetas en filas incompletas dentro de la sección galería */
#galeria .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra las tarjetas horizontalmente */
}

/* Estilos para el mosaico de imágenes en la sección "Muebles sobre diseño" */
#muebles-diseno .row img {
  object-fit: cover;
  height: auto;
}
#muebles-diseno .row .col-6:nth-child(1) img {
  height: 300px;
}
#muebles-diseno .row .col-6:nth-child(2) img {
  height: 250px;
}
#muebles-diseno .row .col-6:nth-child(3) img {
  height: 350px;
}
#muebles-diseno .row .col-6:nth-child(4) img {
  height: 200px;
}
#muebles-diseno .row .col-6:nth-child(5) img {
  height: 300px;
}

/* Ajustes para la sección de contacto en dispositivos móviles */
@media (max-width: 768px) {
  #contacto {
    padding: 20px;
  }

  #contacto h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  #contacto form {
    width: 100%;
    margin: 0 auto;
  }

  #contacto .form-control {
    font-size: 1rem;
    padding: 10px;
  }

  #contacto button {
    width: 100%;
    font-size: 1rem;
    padding: 10px;
  }

  #contacto p {
    font-size: 0.9rem;
    text-align: center;
  }
}