/* Estilos Generales */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: #f0f0f0;
}

/* Contenedor del Formulario */
.form-cotizacion {
    background: #007bff; /* Color de fondo azul */
    border-radius: 20px; /* Esquinas redondeadas */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra para profundidad */
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px; /* Ancho máximo para el formulario */
    margin: auto; /* Centrar el formulario en la página */
}

/* Estilos de Entrada de Formulario */
.form-cotizacion .input-group {
    display: flex;
    justify-content: space-between; /* Distribuir espacio entre los elementos de entrada */
    width: 100%;
    margin-bottom: 10px; /* Espacio debajo de cada grupo de entrada */
}

.form-cotizacion .input-group .input-field {
    padding: 10px;
    border: none; /* Sin bordes */
    border-radius: 10px; /* Esquinas redondeadas para las entradas */
    background: white; /* Fondo blanco para las entradas */
    width: 48%; /* Aproximadamente la mitad del espacio disponible, menos un poco para el margen */
}

/* Botón de Cotizar */
.boton-cotizar {
    background-color: #ffa500; /* Color de fondo naranja para el botón */
    color: white;
    border: none;
    border-radius: 20px; /* Esquinas redondeadas para el botón */
    padding: 15px 30px;
    margin-top: 10px; /* Espacio encima del botón */
    cursor: pointer;
    width: 100%; /* Ancho para que ocupe el ancho completo */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra para el botón */
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}



.contenedor-central {
    flex-direction: column;
    align-items: center;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 10vh; /* O el mínimo alto deseado para tu contenedor */
    padding: 50px; /* Espacio alrededor del contenido para evitar que toque los bordes de la ventana */
    box-sizing: border-box; /* Incluye el padding dentro del ancho y alto del contenedor */
}

.servicios-adicionales {
    max-width: 100%; /* Ajusta el ancho máximo según sea necesario */
    margin: auto; /* Centra el contenedor en la página */
}

.servicio {
    display: flex;
    align-items: center; /* Alinea los ítems verticalmente */
    margin-bottom: 20px; /* Espaciado entre cada servicio */
}

.icono-servicio {
    width: 60px; /* Tamaño del ícono */
    height: 60px; /* Tamaño del ícono */
    border-radius: 50%; /* Hace que el fondo sea redondo */
    background-color: #0056b3; /* Color de fondo naranja */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* Espacio entre el ícono y el texto */
}


.contenido-servicio {
    display: flex;
    flex-direction: column;
}

.titulo-servicio {
    font-weight: bold; /* Negrita para el título */
    margin: 0 0 10px 0; /* Espaciado debajo del título */
    color: #333; /* Color de texto para el título */
    font-size: 18px; /* Tamaño de texto para el título */
}

.servicio p {
    margin: 0; /* Elimina márgenes por defecto */
    color: #666; /* Color de texto para la descripción */
    font-size: 16px; /* Tamaño de texto para la descripción */
}

.tarjeta-envios {
    background-color: #FFA500; /* Color de fondo naranja */
    border-radius: 20px; /* Bordes redondeados */
    color: white; /* Color de texto */
    padding: 30px; /* Espacio interior alrededor del contenido */
    width: 100%; /* Ancho de la tarjeta */
    max-width: 500px; /* Ancho máximo de la tarjeta, ajusta según necesidades */
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho/altura */
    display: flex; /* Habilita flexbox para los hijos directos */
    flex-direction: column; /* Organiza los hijos en una columna */
    align-items: center; /* Centra los hijos horizontalmente */
    justify-content: center; /* Centra los hijos verticalmente */
    position: relative; /* Para el posicionamiento de los hijos absolutos */
    text-align: center; /* Alineación del texto */
    margin: 20px auto; /* Margen superior e inferior y centra horizontalmente */
}

.tarjeta-envios h2 {
    font-size: 1.4em; /* Tamaño de la fuente del título */
    font-weight: bold; /* Fuente en negrita */
    margin: 0 0 15px 0; /* Margen alrededor del título */
}

.tarjeta-envios p {
    font-size: 1em; /* Tamaño de la fuente del párrafo */
    margin: 0 0 20px 0; /* Margen alrededor del párrafo */
}

.tarjeta-envios .enlace-informacion {
    font-weight: bold; /* Fuente en negrita para el enlace */
    color: white; /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
    margin-bottom: 30px; /* Espacio debajo del enlace */
}

.tarjeta-envios .imagen-cajas {
    width: 100%; /* Ajusta la imagen a la anchura del contenedor */
    max-width: 200px; /* Ancho máximo de la imagen */
    height: auto; /* Altura automática para mantener la proporción */
    position: absolute; /* Posicionamiento absoluto */
    bottom: -30px; /* Desplazamiento hacia abajo para salir del contenedor */
    left: 50%; /* Desplazamiento a la mitad del contenedor */
    transform: translateX(-50%); /* Ajuste para centrar la imagen exactamente */
}

@media (max-width: 768px) {
    .tarjeta-envios {
        max-width: 90%; /* Ancho máximo más grande para pantallas pequeñas */
        padding: 20px; /* Menos relleno para pantallas pequeñas */
    }
}

.alert {
    margin-top: 20px; /* Ajusta según sea necesario */
    padding: 20px;
    background-color: #f44336; /* Color rojo */
    color: white;
    text-align: center;
    border-radius: 4px;
    display: none; /* Oculta por defecto */
}


.loader {
    display: none;
    position: fixed;
    top: 50%; /* Centrado verticalmente */
    left: 50%; /* Centrado horizontalmente */
    width: 65px; /* Nueva anchura reducida */
    height: 50px; /* Nueva altura reducida */
    transform: translate(-50%, -50%); /* Ajusta la posición exactamente al centro */
    z-index: 1000; /* Asegura que el spinner esté por encima de otros elementos */
    background-repeat: no-repeat;
    /* Ajusta el tamaño de las imágenes de fondo y las posiciones para que coincidan con las nuevas dimensiones */
    background-image: linear-gradient(#0277bd, #0277bd),
    linear-gradient(#29b6f6, #4fc3f7), linear-gradient(#29b6f6, #4fc3f7);
    background-size: 40px 35px, 15px 25px, 15px 15px; /* Reducido a la mitad */
    background-position: 0 0, 40px 10px, 50px 20px; /* Ajustado para las nuevas dimensiones */
}

.loader:after {
    content: "";
    position: absolute;
    bottom: 5px; /* Ajustado para las nuevas dimensiones */
    left: 6px; /* Ajustado para las nuevas dimensiones */
    width: 5px; /* Ajustado para las nuevas dimensiones */
    height: 5px; /* Ajustado para las nuevas dimensiones */
    background: #fff;
    border-radius: 50%;
    box-sizing: content-box;
    border: 5px solid #000; /* Ajustado para las nuevas dimensiones */
    box-shadow: 39px 0 0 -5px #fff, 39px 0 #000; /* Ajustado para las nuevas dimensiones */
    animation: wheelSk 0.75s ease-in infinite alternate;
}

.loader:before {
    content: "";
    position: absolute;
    right: 100%; /* Mantén esto si quieres que el 'before' esté fuera del contenedor */
    top: 0px;
    height: 35px; /* Ajustado para las nuevas dimensiones */
    width: 35px; /* Ajustado para las nuevas dimensiones */
    background-image: linear-gradient(#000000 22px, transparent 0),
      linear-gradient(#000000 22px, transparent 0),
      linear-gradient(#000000 22px, transparent 0);
    background-repeat: no-repeat;
    background-size: 15px 2px; /* Reducido a la mitad */
    background-position: 0px 5px, 4px 17px, 0px 30px; /* Ajustado para las nuevas dimensiones */
    animation: lineDropping 0.75s linear infinite;
}


  
  @keyframes wheelSk {
    0%, 50%, 100% { transform: translatey(0) }
    30%, 90% { transform: translatey(-3px) }
  }
  
  @keyframes lineDropping {
    0% {
      background-position: 100px 11px, 115px 35px, 105px 60px;
      opacity: 1;
    }
    50% { background-position: 0px 11px, 20px 35px, 5px 60px }
    60% { background-position: -30px 11px, 0px 35px, -10px 60px }
    75%, 100% {
      background-position: -30px 11px, -30px 35px, -30px 60px;
      opacity: 0;
    }
  }