/* Definición de estilos para tu cabecera */
.mi-header {
  /* Estas reglas añadirán un espacio interno grande a la cabecera */
  padding-top: 80px;
  padding-bottom: 80px;
}
/* ------------------------------------------------ */
/* ESTILOS DE NAVBAR PERSONALIZADO */
/* ------------------------------------------------ */
.bg-miColor {
  /* Ejemplo: Un color azul medianoche */
  background-color: gray !important;

  /* Nota: No siempre es necesario, pero si el color de Bootstrap persiste,
       el '!important' garantiza que tu estilo sobrescriba a cualquier otra regla. */
}

/* Opcional: Si quieres un borde */
.bg-miColor {
  border-bottom: 3px solid hsl(0, 6%, 97%); /* Un borde amarillo llamativo */
}

/* FONDO WEB */
.fondo-degradado-lineal {
  background: linear-gradient(
    to bottom,
    gray,
    #f7c12e
  ); /* De azul a cian */
  /* Opcional para asegurar que cubra toda la vista */
  min-height: 100vh;
}
.fila-transparente {
  /* Opción 1: Simplemente transparente */
  background-color: transparent !important;

  /* Opción 2: Usando RGBA (0,0,0,0) es Negro con 0% de opacidad */
  /* background-color: rgba(0, 0, 0, 0) !important; */
}

/* Opción A: Aplicar solo a este h2 si le añades una clase */
.titulo-solar {
  /* Color: Blanco puro para máximo contraste */
  color: #f7c12e;
  /* Grosor: Usamos 'bold' (700) o 'semi-bold' (600) */
  font-weight: bold; /* O 700 */
  /* Tamaño: Siguiendo nuestra jerarquía (32px - 40px) */
  font-size: 36px;
  /* Espaciado inferior (ya tienes mb-4) */
  margin-bottom: 1.5rem;
}

/* ---------------------------------------------------- */
/* ESTILOS GLOBALES DE NAVEGACIÓN */
/* ---------------------------------------------------- */

/* Seleccionamos todos los enlaces de navegación */
.navbar-nav .nav-link {
  /* Color del Texto: Blanco puro */
  color: #f7c12e !important;

  /* Grosor de la Fuente: Negrita fuerte */
  font-weight: bold; /* Equivalente a fw-bold */
}

/* Estilo para el logotipo/nombre de la marca */
.navbar-brand {
  /* Color del Texto: Blanco puro */
  color: #f7c12e !important;

  /* Grosor de la Fuente: Negrita fuerte */
  font-weight: bold;
}

/* Opcional: Estilo al pasar el ratón (Hover) */
.navbar-nav .nav-link:hover {
  color: #ffffff !important; /* Un gris muy claro para el efecto hover */
}

/* Clase para el texto del contenedor principal */
.texto-acento-solar,
.texto-acento-solar h1,
.texto-acento-solar p,
.texto-acento-solar .row,
.texto-acento-solar [class*="col-"] {
  color: #ffffff !important;
}

.resaltado {
  color: gray !important;
  font-size: 1.1em;
}
.fondo-footer {
  /*background: linear-gradient(to bottom, #f7c12e, #b4b4b4);*/ /* De azul a cian */
  /* Opcional para asegurar que cubra toda la vista */
  min-height: 7vh;
  background-color: transparent !important;
}
.offcanvas-end {
  background: linear-gradient(to bottom, gray, #f7c12e);
}
/* FONDO canvas */
.fondo-degradado {
  background: linear-gradient(to bottom, gray, #f7c12e);
  color: #ffffff;
}
/* FONDO cambass */
.fondo-degradadoo {
  background: gray;
}
/* Media query para aplicar cambios solo en pantallas pequeñas (móviles) */
@media (max-width: 576px) {
  .offcanvas.offcanvas-top {
    /* Fuerza la altura a ocupar el 100% del alto de la ventana visible */
    height: 100vh !important;

    /* Opcional: Asegura que el ancho también sea 100% si fuera necesario, 
           aunque Bootstrap ya lo hace por defecto para el offcanvas-top */
    width: 100vw;
  }
}
.offcanvas.offcanvas-top {
  /* Por ejemplo, 50% de la altura de la ventana (viewport) */
  height: 50vh;
  color: #f7c12e;
}
.offcanvas-bottom {
  background: linear-gradient(to bottom, gray, #f7c12e);
  color: #ffffff;
}
@media (min-width: 992px) {
  .carousel-portatil {
    /* REDUCCIÓN: Cambia esta altura según tu necesidad */
    height: 500px;

    /* Mantiene el centrado y evita la distorsión */
    object-fit: cover;
  }
}