/* ============================================
  Archivo: index.css
  Descripción: Estilos para la página principal del sistema web Ecorut@s.
  Notas:
    - Define variables de color globales.
    - Incluye estilos para títulos, tarjetas informativas, grupo de servicios, botones y modales.
    - Contiene ajustes responsivos para dispositivos medianos y pequeños.
============================================ */

/* =========================
  1. VARIABLES DE COLOR
========================= */
:root {
  --color-verde-uno: #398738;
  --color-verde-dos: #69B450;
  --color-azul-uno: #29A0BE;
  --color-azul-dos: #75D3D8;
  --color-marron: #936F2F;
  --color-negro: black;
  --color-blanco: white;
}

/* =========================
  2. TÍTULOS Y SEPARADORES
========================= */

/* Estilo para el título principal de la página */
.titulo-principal h1 {
  color: var(--color-marron);
  font-weight: bold;
}

/* Línea decorativa debajo del título */
.separador {
  border-color: var(--color-marron) !important;
}

/* =========================
  3. INFORMACIÓN ECORUT@S
========================= */

/* Sombra para tarjetas informativas */
.informacion-ecorutas .card {
  box-shadow: 0 4px 6px var(--color-verde-uno);
}

/* Estilo para encabezado de tarjetas */
.informacion-ecorutas .card-header {
  color: var(--color-verde-uno);
  font-weight: bold;
}

/* Texto en negrita dentro del cuerpo de las tarjetas */
.informacion-ecorutas .card-body .card-text {
  font-weight: bold;
}

/* =========================
  4. GRUPO DE FINANCIAMIENTO
========================= */

/* Estilo para título de la sección de Financiamiento */
.grupo-financiamiento .titulo-seccion h2 {
  color: var(--color-negro);
  font-weight: bold;
}

/* =========================
  5. GRUPO DE SERVICIOS
========================= */

/* Estilo para título de la sección de servicios */
.grupo-servicios .titulo-seccion h2 {
  color: var(--color-marron);
  font-weight: bold;
}

/* Estilo general para cada tarjeta de servicio */
.grupo-servicios .card {
  flex: 1 1 calc(33.33% - 20px);
  margin: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-blanco);
  box-shadow: 0px 1px 10px rgba(0, 7, 66, 0.555);
  transition: all 400ms ease-out;
  cursor: default;
  position: relative;
  min-width: 250px;
}

/* Efecto hover para elevar la tarjeta */
.grupo-servicios .card:hover {
  box-shadow: 5px 5px 14px rgba(0,0,0,0.4);
  transform: translateY(-5%);
}

/* Imágenes y videos dentro de las tarjetas con ajuste responsivo */
.grupo-servicios .card img, .card video {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Efecto hover para imágenes y videos (transparencia) */
.grupo-servicios .card img:hover, .card video:hover {
  opacity: 0.5;
}

/* Título del servicio en color azul */
.grupo-servicios .titulo-servicio {
  color: var(--color-azul-uno);
  font-weight: bold;
}

/* Texto descriptivo del servicio */
.grupo-servicios .texto-servicio {
  font-weight: bold;
}

/* =========================
  6. BOTONES PERSONALIZADOS
  Basado en diseño de adamgiebl (Uiverse.io)
========================= */

/* Estilo base para botones */
.grupo-servicios .boton {
  letter-spacing: 2px;
  display: inline-block;
  font-weight: bold;
  border: 3px solid var(--color-azul-uno);
  border-radius: 2px;
  position: relative;
  box-shadow: 0 2px 10px var(--color-azul-dos), 0 3px 6px var(--color-azul-dos);
  color: var(--color-azul-uno);
  text-decoration: none;
  transition: 0.5s ease all;
  z-index: 1;
}

/* Pseudo-elemento para efecto de fondo al hacer hover */
.grupo-servicios .boton:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: '';
  background-color: var(--color-azul-uno);
  z-index: -1;
}

/* Cambios de color al hacer hover o focus */
.grupo-servicios .boton:hover, button:focus {
  color: var(--color-blanco);
}

/* Expansión del fondo azul al hacer hover o focus */
.grupo-servicios .boton:hover:before, button:focus:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
}

/* Escalado al hacer clic */
.grupo-servicios .boton:active {
  transform: scale(0.9);
}

/* =========================
  7. MODAL
========================= */

/* Título en negrita del modal */
.modal-content .modal-header .modal-title {
  font-weight: bold;
}

/* Botones del footer en negrita */
.modal-content .modal-footer button {
  font-weight: bold;
}

/* =========================
  8. DISEÑO RESPONSIVO
  Ajustes para dispositivos medianos (md)
========================= */
@media screen and (max-width: 768px) {
  .titulo-principal h1 {
    font-size: 31px;
  }

  .informacion-ecorutas .card-header {
    font-size: 20px;
  }
  
  .informacion-ecorutas .card-body .card-text {
    font-size: 14px;
  }

  .grupo-financiamiento .titulo-seccion h2 {
    font-size: 26px;
  }
  
  .grupo-servicios .titulo-seccion h2 {
    font-size: 26px;
  }

  .grupo-servicios .titulo-servicio {
    font-size: 20px;
  }
  
  .grupo-servicios .texto-servicio {
    font-size: 14px;
  }

  .grupo-servicios .boton {
    font-size: 14px;
  }

  .modal-content .modal-header .modal-title {
    font-size: 18px !important;
  }

  .modal-content .modal-body p {
    font-size: 14px;
  }
  
  .modal-content .modal-footer button {
    font-size: 14px;
  }
}

/* =========================
  9. DISEÑO RESPONSIVO
  Ajustes para dispositivos pequeños (sm)
========================= */
@media screen and (max-width: 576px) {
  .titulo-principal h1 {
    font-size: 29px;
  }

  .informacion-ecorutas .card-header {
    font-size: 18px;
  }
  
  .informacion-ecorutas .card-body .card-text {
    font-size: 12px;
  }
  
  .grupo-financiamiento .titulo-seccion h2 {
    font-size: 24px;
  }

  .grupo-servicios .titulo-seccion h2 {
    font-size: 24px;
  }

  .grupo-servicios .titulo-servicio {
    font-size: 18px;
  }
  
  .grupo-servicios .texto-servicio {
    font-size: 12px;
  }

  .grupo-servicios .boton {
    font-size: 12px;
  }

  .modal-content .modal-header .modal-title {
    font-size: 16px !important;
  }

  .modal-content .modal-body p {
    font-size: 12px;
  }
  
  .modal-content .modal-footer button {
    font-size: 12px;
  }
}