/* Cambiamos el fondo de la web y la letra */
body {
    background-color: #fcf8f2; /* Un tono crema suave, no ese blanco nuclear */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #4a3b32; /* Marrón oscuro para las letras, combina mejor que el negro */
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Diseñamos el encabezado principal */
header {
    background-color: #f4b41a; /* Mantiene tu amarillo miel */
    color: #3e2723;            /* ¡CAMBIO! Letras en color marrón chocolate oscuro */
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Estilo para los títulos de sección */
h2 {
    color: #d97706; /* Color ámbar/miel tostada */
    border-bottom: 2px solid #f4b41a;
    padding-bottom: 5px;
}

/* Mejoramos la lista de mieles */
ul {
    list-style-type: "🐝 "; /* Cambiamos los puntitos sosos por abejas */
    padding-left: 20px;
}

li {
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Diseñamos el botón de compra */
button {
    background-color: #d97706;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

/* Efecto para que el botón cambie de color al pasar el ratón por encima */
button:hover {
    background-color: #b45309;
}

/* Estilos para el formulario de envío (Caja redondeada) */
.formulario-envio {
    background-color: #ffffff; /* Fondo blanco para resaltar los campos */
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2d4c9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Espaciado para cada bloque de pregunta */
.grupo-campo {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* Hace que la etiqueta quede ARRIBA y el cuadro ABAJO */
}

/* Estilo de los textos de las etiquetas */
.grupo-campo label {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.95em;
}

/* Estilo para las cajas de texto (inputs y textarea con esquinas redondeadas) */
.grupo-campo input, 
.grupo-campo textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1em;
}

/* Efecto bonito: cuando el cliente hace clic en una casilla, se ilumina en amarillo miel */
.grupo-campo input:focus, 
.grupo-campo textarea:focus {
    border-color: #f4b41a;
    outline: none;
    box-shadow: 0 0 5px rgba(244, 180, 26, 0.4);
}

/* Sección de contacto */
.contacto-seccion {
    text-align: center; /* Centramos todo el texto de esta zona */
    margin-top: 30px;
}

/* Caja que simula el mapa (Redondeada) */
.mapa-ficticio {
    background-color: #e2ecc8; /* Color verde claro estilo mapa o campo */
    border: 2px dashed #a3b86c; /* Borde de guiones rústico */
    padding: 40px 20px;
    border-radius: 12px;
    font-weight: bold;
    color: #4e6320;
    margin: 20px 0;
}

/* Contenedor de WhatsApp (Redondeado) */
.zona-whatsapp {
    margin-top: 25px;
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2d4c9;
}

/* El botón verde de WhatsApp */
.boton-whatsapp {
    display: inline-block;
    background-color: #25d366; /* ¡El color verde oficial de WhatsApp! */
    color: white;
    text-decoration: none; /* Le quita la línea de subrayado típica de los enlaces */
    padding: 12px 25px;
    font-weight: bold;
    border-radius: 50px; /* Bordes totalmente redondeados tipo cápsula */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, background-color 0.2s;
}

/* Efectos al pasar el ratón por encima del botón de WhatsApp */
.boton-whatsapp:hover {
    background-color: #128c7e; /* Un verde un poco más oscuro */
    transform: scale(1.05); /* ¡Efecto sorpresa! El botón se hace un 5% más grande */
}

/* Efecto al pasar el ratón por encima del mapa */
.mapa-ficticio:hover {
    background-color: #d4e2b0; /* Un verde un pelín más oscuro */
    cursor: pointer; /* Cambia el cursor por la manita de hacer clic */
}

/* 📱 CUANDO LA PANTALLA SEA DE UN MÓVIL (MENOS DE 600 PÍXELES DE ANCHO) */
@media (max-width: 600px) {
    
    /* Hacemos el cuerpo de la web más estrecho para que no tenga márgenes gigantes en el móvil */
    body {
        width: 100%;
        padding: 10px;
    }

    /* Reducimos un poco el tamaño del encabezado amarillo para que no ocupe toda la pantalla */
    header {
        padding: 15px;
    }

    header h1 {
        font-size: 1.8em; /* Letras un poco más pequeñas para que quepa "Miel artesana Rafi" */
    }

    /* Los botones y formularios se estiran al 100% del ancho del móvil para que sea facilísimo pulsar con el pulgar */
    button, .boton-whatsapp, .grupo-campo input, .grupo-campo textarea {
        width: 100%;
        display: block;
        box-sizing: border-box; /* Evita que el botón se salga de la pantalla por los lados */
    }
}

/* Estilo único para el botón de Finalizar Pedido (¡Ahora en verde potente!) */
#boton-finalizar {
    background-color: #16a34a; /* Verde éxito bien vivo */
    color: white;
    font-weight: bold; /* Letra un poco más gruesa para que destaque */
    margin-left: 10px; /* Separa el botón */
    transition: background-color 0.3s ease; /* Hace que el cambio de color sea suave al pasar el ratón */
    border-radius: 8px;
}

/* Efecto súper exagerado al pasar el ratón por encima del botón verde */
#boton-finalizar:hover {
    background-color: #14532d; /* Pasa a un verde oscuro casi negro, ¡aquí sí se nota el cambio! */
    transform: scale(1.08); /* Se hace todavía un pelín más grande */
}

/* ========================================================================= */
/* NUEVOS ESTILOS PARA LA CESTA Y EL BOTÓN DE AÑADIR                         */
/* ========================================================================= */

/* Estilo para el botón de añadir a la cesta (Naranja miel) */
#boton-agregar {
    background-color: #f4b41a;
    color: #3e2723;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    border-radius: 8px;
}

#boton-agregar:hover {
    background-color: #d97706;
}

/* Estilo para la caja visual de la cesta de la compra (Ahora con bordes redondeados y suaves) */
#lista-cesta {
    list-style-type: none; /* Quitamos las abejas de la lista del carrito para que se lea limpio */
    padding-left: 0;
}

/* Caja contenedora general de la Cesta */
div[style*="background: #fff8eb"] {
    border-radius: 12px !important;
}

#lista-cesta li {
    background-color: #fcf8f2;
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2d4c9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
}