/* 1. Configuración general */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding-bottom: 90px;
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: #f8f5ef;
    color: #243b30;
}

[hidden] {
    display: none !important;
}

button {
    width: 100%;
    padding: 14px;
    background-color: #243b30;
    color: white;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #355744;
}

button:focus-visible {
    outline: 3px solid #6e430a;
    outline-offset: 3px;
}

/* 2. Cabecera */
.cabecera {
    padding: 65px 20px;
    background: linear-gradient(135deg, #183c30, #32634b);
    text-align: center;
}

.etiqueta {
    display: inline-block;
    padding: 8px 14px;
    margin-bottom: 20px;
    border: 1px solid #ffffff55;
    border-radius: 25px;
    color: #f2d8a7;
    font-size: 11px;
    letter-spacing: 2px;
}

.cabecera h1 {
    margin: 0 0 15px;
    color: white;
    font-family: Georgia, serif;
    font-size: clamp(36px, 7vw, 64px);
}

.cabecera p {
    max-width: 450px;
    margin: 0 auto;
    color: #e0e8df;
    line-height: 1.7;
}

.boton-carta {
    display: inline-block;
    margin-top: 28px;
    padding: 14px 24px;
    background-color: #f2d8a7;
    color: #183c30;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.boton-carta:hover {
    background-color: #e7c58e;
}

.boton-carta:focus-visible {
    outline: 3px solid #c65d38;
    outline-offset: 4px;
}

/* 3. Área del menú */
main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 30px;
}

h2 {
    margin-bottom: 25px;
}

main > h2 {
    font-family: Georgia, serif;
    font-size: 32px;
}

#carta,
#mi-pedido {
    scroll-margin-top: 20px;
}

/* 4. Buscador y categorías */
#buscar-plato {
    display: block;
    width: 100%;
    max-width: 450px;
    padding: 14px;
    margin: 10px 0 20px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font: inherit;
}

.categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.categorias button {
    width: auto;
    padding: 10px 20px;
    background-color: white;
    color: #243b30;
    border: 1px solid #243b30;
    border-radius: 25px;
}

.categorias button.activo,
.categorias button:hover {
    background-color: #243b30;
    color: white;
}

#sin-resultados {
    padding: 20px;
    text-align: center;
    color: #666666;
}

/* 5. Tarjetas de productos */
.menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.menu article {
    display: flex;
    flex-direction: column;
    padding: 18px;
    background-color: white;
    border: 1px solid #e8e3d9;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(24, 60, 48, 0.07);
}

.foto-plato {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
}

.menu article h3 {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 25px;
}

.menu article p {
    color: #667168;
    font-size: 14px;
    line-height: 1.6;
}

.menu article strong {
    color: #243b30;
    font-size: 23px;
}

.menu article button {
    margin-top: auto;
    font-weight: bold;
}

/* 6. Carrito */
.pedido {
    margin-top: 40px;
    padding: 30px;
    background-color: white;
    border: 1px solid #e8e3d9;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(24, 60, 48, 0.06);
}

.pedido h2 {
    margin-top: 0;
    font-family: Georgia, serif;
    font-size: 30px;
}

.pedido ul {
    list-style: none;
    padding: 0;
}

.pedido li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eeeeee;
}

#total {
    font-size: 26px;
    color: #243b30;
}

.pedido button {
    max-width: 220px;
    background-color: #f0eee8;
    color: #243b30;
    border: 1px solid #d8dcd4;
}

.pedido button:hover {
    background-color: #e3e7df;
}

.controles-cantidad {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.controles-cantidad button {
    width: 36px;
    padding: 8px;
    margin: 0;
}

/* 7. Datos del cliente */
.datos-cliente {
    max-width: 500px;
    margin-top: 25px;
}

.datos-cliente label {
    display: block;
    margin: 16px 0 8px;
    font-weight: bold;
}

.datos-cliente input,
.datos-cliente select,
.datos-cliente textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font: inherit;
    background-color: #f0f0eb;
    color: #243b30;
}

.datos-cliente textarea {
    min-height: 90px;
    resize: vertical;
}

.datos-cliente input:focus,
.datos-cliente select:focus,
.datos-cliente textarea:focus {
    outline: 2px solid #32634b;
    outline-offset: 2px;
}

.aviso {
    font-size: 13px;
    color: #666666;
}

/* 8. Botón de WhatsApp */
.pedido .boton-whatsapp {
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 16px;
    margin-top: 20px;
    background-color: #128c7e;
    color: white;
    border: none;
    font-weight: bold;
}

.pedido .boton-whatsapp:hover {
    background-color: #0d6b60;
}

/* 9. Acceso rápido al pedido */
.ver-pedido {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    padding: 15px 22px;
    background-color: #243b30;
    color: white;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ver-pedido:hover {
    background-color: #355744;
}

.ver-pedido:focus-visible {
    outline: 3px solid #c65d38;
    outline-offset: 3px;
}

/* 10. Adaptación para celulares */
@media (max-width: 600px) {
    .cabecera {
        padding: 45px 20px;
    }

    .etiqueta {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .menu {
        grid-template-columns: 1fr;
    }

    .foto-plato {
        height: 200px;
    }

    .pedido {
        padding: 20px;
    }
}

/* Respeta la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
.pie-pagina {
    padding: 35px 20px;
    background-color: #183c30;
    color: white;
    text-align: center;
}

.pie-pagina h2 {
    margin: 0 0 12px;
    font-family: Georgia, serif;
    font-size: 26px;
}

.pie-pagina p {
    line-height: 1.6;
}

.pie-pagina .texto-demo {
    margin-top: 20px;
    color: #e0e8df;
    font-size: 12px;
}