/* Asegura que el logo tenga la misma altura que el texto de la marca */
.navbar-brand.logo {
  display: inline-flex;
  align-items: center;
}

.brand-logo img {  
  width: auto;
  max-height: 200px;        /* evita desbordes si el espacio es reducido */
}

.ban {  
  width: auto;
  max-height: 800px;        /* evita desbordes si el espacio es reducido */
}

.contReg {
  margin-top: 500px;
}

/* Mitades del botón */
    .btn-parte {
      display: block;
      width: 100%;
      color: #fff;
      text-decoration: none;
      line-height: 1;
      padding: 0;
      border: 0;
    }

    .btn-parte .half {
      display: block;
      width: 100%;
      padding: 14px 16px;
      /*text-align: left; /* por defecto, centrar; podemos override en fact y consultar */
    }

    /* Colores */
    .turquesa-claro {
      background-color: #22cc93;
      border-color: #22cc93;
    }
    .turquesa-oscuro {
      background-color: #057e6e;
      border-color: #057e6e;
    }

    /* Estilo específico para la izquierda (Factura) */
    .left-align {
      text-align: left;
      font-weight: 700;      /* negrita */
      font-size: 2.25rem;    /* tamaño más grande (ajusta según necesites) */
      padding: 16px 0;       /* espaciado vertical dentro de la mitad */
    }

    /* Alineación centrada para la segunda mitad */
    .center-align {
      text-align: center;
      font-weight: 700;
      padding: 16px 0;
    }

    /* Contenedor del bloque para evitar desbordes en móviles */
    .btn-doble {
      border-radius: 0.75rem;
      overflow: hidden;
      display: inline-block;  
    }

    .login-box {
      background: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
      padding: 2rem;
      border-radius: 10px;
      max-width: 400px;
      width: 100%
    }

   	.degVerde {
        	/* Degradado de verde (success) a blanco con 30% de opacidad */
        	background: linear-gradient(
            	to bottom, 
            	rgba(40, 167, 69, 0.3) 0%, 
            	rgba(255, 255, 255, 0.3) 100%
        	) !important;
        
        	/* Ajustes para que el contenido respire */
        	padding: 2rem !important;
        	border-radius: 15px;
    	}

    	/* Asegura que el contenedor banner no oculte el fondo */
    	.banner.style1 .content {
        	border-bottom: none !important;
    	}

		

/* Color para los botones */
.button.wide {
    background-color: #329B8A !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Efecto hover opcional para que los botones reaccionen al pasar el mouse */
.button.wide:hover {
    background-color: #287d6f !important;
    color: #ffffff !important;
}

/* Resaltar palabras específicas */
.texto-resaltado {
    color: #1b5e20 !important; /* Verde oscuro (Forest Green) */
    font-weight: 900 !important; /* Negrita extra */
}

.navbar-brand {
	margin-top: 0px;
	padding-top: 0px;
}

.center-container {
  text-align: center;    /* centra el <p> y cualquier texto inline */
  margin: 0 auto;
}

/* Si quieres centrar verticalmente dentro de un contenedor con alto fijo: */
.center-container--vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente */
  align-items: center;     /* centra horizontalmente */
  text-align: center;
}


.image1-lizardo {
  width: auto;
  height: auto;
  max-height: 300px; /* Valor por defecto (PC/pantallas grandes) */
  display: block;    /* evita espacios en línea si es elemento inline */
  max-width: 100%;   /* evita desbordes en contenedores pequeños */
  object-fit: contain;/* opcional: mantiene proporción y no recorta la imagen */
  border-radius: 12px;     /* bordes redondeados (ajusta el valor) */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); /* sombra (ajusta valores/alpha) */
  object-fit: cover;       /* mantiene proporción y cubre el área sin distorsión */
  margin: 0 auto;  
}

/* Aplica solo en pantallas pequeñas (celulares) */
@media (max-width: 767px) {
	  .menutop {
		  height: 60px;
	  }

    .banner.style1 {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .banner.style1 .image {
      order: 1; /* La imagen se queda de fondo */
      min-height: 100vh !important; /* Asegura que cubra toda la pantalla */
    }

    .banner.style1 .content {
      position: absolute;
      z-index: 2;
      top: 320px;
      left: 50%;
      transform: translate(-50%, -50%); /* Centra el contenido vertical y horizontal */
      width: 90%; /* Deja un margen a los lados */
      text-align: center;
      background: linear-gradient(to bottom, rgba(40, 167, 69, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      backdrop-filter: blur(5px); /* Efecto de desenfoque opcional para mejor lectura */
      border-radius: 10px;
    }

    /* Ajuste de textos para móvil */
    .banner.style1 .content h1 {
        font-size: 1.8rem !important;
    }
    .banner.style1 .content h3 {
        font-size: 1.2rem !important;
    }

    .margen-movil {
        margin-top: 3rem; /* mt-5 en Bootstrap equivale a 3rem */
    }
    .image1-lizardo {
      height: 220px;
      max-height: 250px;
      width: auto;     /* ancho automático para mantener proporción */
	    border-radius: 8px;    /* opcional: menos redondeo en móvil */
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

/* En pantallas medianas o más grandes (PC) no aplica margen */
@media (min-width: 768px) {
  	.menutop {
	  	height: 75px;
  	}
    .margen-movil {
      margin-top: 0;
    }
}