:root {
    --comic-claro: #f5f7fb;
}

body {
    margin: 0;
    padding-top: 72px;
    background-color: var(--comic-claro);
    color: #222;
}

.pagina-inicio {
    background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32rem), var(--comic-claro);
}

main:not(.container) {
    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;
    background-color: white;
}

h1 { text-align: center; }
main p { line-height: 1.6; }
.texto-bienvenida { max-width: 800px; }

.boton-imagen-carrusel {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.imagen-carrusel,
.imagen-tarjeta {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.fondo-caption {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 3rem 1.25rem 1.25rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
}

.tarjeta-promocional {
    overflow: hidden;
    border: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-promocional:hover { transform: translateY(-4px); }

form {
    max-width: 600px;
    margin: 25px auto 0;
}

form div { margin-bottom: 15px; }
form label { display: block; margin-bottom: 5px; font-weight: bold; }
form input { width: 100%; padding: 10px; box-sizing: border-box; }
form button { padding: 10px 20px; cursor: pointer; }

.fondo-consulta,
.fondo-administracion {
    min-height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.fondo-consulta { background-image: url('../img/consulta.jpg'); }
.fondo-administracion { background-image: url('../img/pedidos.jpg'); }

.fondo-consulta main,
.fondo-administracion main {
    padding: 30px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.93);
}

@media (max-width: 575.98px) {
    body { padding-top: 64px; }
    .carousel-caption { padding-bottom: 1rem; }
    .carousel-caption h3 { font-size: 1rem; }
    main:not(.container) { margin: 15px; padding: 16px; }
}