/* ==========================================================================
   Pedidos Restaurant
   Pensado primero para el teléfono: el cliente llega desde WhatsApp y pide de
   pie. Botones grandes, una columna, y el resumen siempre a la vista.
   ========================================================================== */

:root {
    --tinta: #241710;
    --tinta-suave: #6b5b4d;
    --crema: #fbf3e6;
    --crema-fuerte: #f5e9d6;
    --papel: #ffffff;
    --borde: #ead9c4;
    --verde: #1f5c3f;
    --verde-oscuro: #133c29;
    --verde-suave: #e7f0ea;
    --coral: #e8602f;
    --coral-oscuro: #bf4a20;
    --coral-suave: #fdece2;
    --wa: #25d366;
    --wa-oscuro: #128c4a;
    --exito: #1a7f37;
    --alerta: #9a5b00;
    --alerta-fondo: #fff4d6;
    --error: #b32218;
    --error-fondo: #fdeceb;
    --radio: 16px;
    --radio-chico: 10px;
    --radio-grande: 22px;
    --sombra: 0 2px 12px rgba(36, 23, 16, .06);
    --sombra-alta: 0 12px 32px rgba(36, 23, 16, .12);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--crema);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--coral-oscuro); }

.contenedor {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
}

/* -------------------------------------------------- Cabecera y pie */

.sitio-cabecera {
    background: var(--verde);
    color: var(--crema);
    padding: 12px 0;
}

.sitio-cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca__logo img { border-radius: 50%; display: block; }

.marca__nombre {
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
    text-decoration: none;
    display: block;
}

.marca__eslogan {
    margin: 2px 0 0;
    font-size: .82rem;
    color: #cfe3d6;
}

.cabecera__info { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.cabecera__badges {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.cabecera__badges li {
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .82rem;
    white-space: nowrap;
}

.cabecera__badges strong { color: #fff; }

.cabecera__wa {
    background: var(--wa);
    color: #05321a;
    font-weight: 700;
    font-size: .88rem;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .cabecera__badges { display: flex; }
}

.sitio-pie {
    background: var(--verde-oscuro);
    color: #cfe3d6;
    margin-top: 48px;
    padding: 28px 0;
    text-align: center;
    font-size: .92rem;
}

.sitio-pie__nombre { color: #fff; font-weight: 800; font-size: 1.05rem; margin: 0 0 6px; }
.sitio-pie p { margin: 4px 0; }
.sitio-pie__cierre { font-size: 1.05rem; }
.sitio-pie__legal { margin-top: 14px; font-size: .8rem; opacity: .8; }
.sitio-pie a { color: #f5d99b; }

/* -------------------------------------------------- Portada */

.portada-hero {
    background: linear-gradient(160deg, var(--coral), var(--coral-oscuro));
    color: #fff;
    padding: 26px 0 28px;
}

.portada-hero__interior {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
}

.portada-hero__antetitulo {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: .78rem;
    font-weight: 700;
    opacity: .9;
}

.portada-hero__titulo {
    margin: 6px 0 8px;
    font-size: clamp(1.7rem, 5vw, 2.5rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .01em;
}

.portada-hero__bajada {
    margin: 0 0 14px;
    font-size: 1rem;
    opacity: .95;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

.portada-hero__datos {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.portada-hero__datos li {
    background: rgba(0, 0, 0, .18);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .92rem;
}

@media (min-width: 900px) {
    .portada-hero__interior { flex-direction: row; align-items: center; text-align: left; }
    .portada-hero__texto { flex: 1 1 auto; }
    .portada-hero__bajada { margin-left: 0; margin-right: 0; }
    .portada-hero__datos { justify-content: flex-start; }
    .portada-hero__datos { display: none; }
}

.portada-incluye {
    margin: 6px auto 0;
    max-width: 360px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radio);
    padding: 14px 18px;
    text-align: left;
    flex: 0 0 auto;
}

@media (min-width: 900px) {
    .portada-incluye { margin: 0; }
}

.portada-incluye__titulo { margin: 0 0 8px; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.portada-incluye ul { list-style: none; margin: 0; padding: 0; }
.portada-incluye li { padding-left: 26px; position: relative; margin: 5px 0; font-size: .95rem; }
.portada-incluye li::before { content: "✔️"; position: absolute; left: 0; }

.portada-pedido { padding: 26px 0 0; }

.aviso-plugin {
    background: var(--alerta-fondo);
    border: 1px solid var(--alerta);
    border-radius: var(--radio);
    padding: 18px;
}

/* -------------------------------------------------- Armador de pedido */

.pdc-vacio {
    background: var(--papel);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    padding: 28px;
    text-align: center;
}

.pdc-aviso {
    border-radius: var(--radio);
    padding: 13px 16px;
    margin: 0 0 18px;
    font-weight: 600;
}

.pdc-aviso--sujeto { background: var(--alerta-fondo); color: var(--alerta); border: 1px solid #eccb7a; }
.pdc-aviso--cerrado { background: var(--error-fondo); color: var(--error); border: 1px solid #edb5b0; }

.pdc-columnas { display: grid; gap: 22px; }

@media (min-width: 900px) {
    .pdc-columnas { grid-template-columns: minmax(0, 1fr) minmax(300px, 32%); align-items: start; }
    .pdc-resumen { position: sticky; top: 16px; }
}

/* Pasos */

.pdc-paso {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
    margin-bottom: 14px;
}

.pdc-paso[hidden] { display: none; }

.pdc-paso__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 800;
}

.pdc-paso__num {
    background: var(--verde);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex: 0 0 auto;
}

.pdc-paso__ayuda { margin: 0 0 12px; color: var(--tinta-suave); font-size: .92rem; }

.pdc-contador {
    display: inline-block;
    margin-left: 6px;
    background: var(--crema-fuerte);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 700;
    color: var(--tinta);
}

.pdc-contador.esta-completo { background: var(--verde-suave); border-color: #b9d7c4; color: var(--verde); }

.pdc-grupo {
    margin: 18px 0 10px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--coral-oscuro);
    border-bottom: 2px dashed var(--borde);
    padding-bottom: 6px;
}

.pdc-grupo:first-of-type { margin-top: 8px; }

/* Opciones */

.pdc-opciones { display: grid; gap: 10px; }
.pdc-opciones--chips { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

@media (min-width: 640px) {
    .pdc-opciones--platos { grid-template-columns: repeat(2, 1fr); }
}

.pdc-opcion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 12px 14px;
    cursor: pointer;
    background: var(--papel);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.pdc-opcion input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.pdc-opcion:hover { border-color: #d8c3a6; box-shadow: var(--sombra); }
.pdc-opcion:focus-within { outline: 3px solid #f0a500; outline-offset: 2px; }

.pdc-opcion.esta-elegida {
    border-color: var(--coral);
    background: var(--coral-suave);
}

.pdc-opcion.esta-elegida::after {
    content: "✓";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdc-opcion__foto {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--crema-fuerte);
}

.pdc-opcion__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdc-opcion__cuerpo { flex: 1; min-width: 0; }
.pdc-opcion__nombre { display: block; font-weight: 700; }
.pdc-emoji { margin-right: 4px; }
.pdc-opcion__detalle { display: block; font-size: .85rem; color: var(--tinta-suave); margin-top: 2px; }

.pdc-opcion__precio {
    font-weight: 800;
    color: var(--coral-oscuro);
    white-space: nowrap;
}

.pdc-opcion--chip { justify-content: center; text-align: center; padding: 11px 10px; font-weight: 600; }
.pdc-opcion--switch { border-style: dashed; }
.pdc-rellenos { margin-top: 14px; }
.pdc-rellenos[hidden] { display: none; }

/* Campos */

.pdc-input {
    width: 100%;
    border: 2px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 11px 12px;
    font-size: 16px; /* menos de 16px hace que iOS haga zoom al enfocar */
    font-family: inherit;
    background: var(--papel);
    color: var(--tinta);
}

.pdc-textarea { resize: vertical; min-height: 64px; }

.pdc-input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-suave); }

.pdc-campo { display: block; margin-bottom: 12px; }
.pdc-campo > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; }
.pdc-campo em { color: var(--coral); font-style: normal; }
.pdc-campo[hidden] { display: none; }

.pdc-error {
    background: var(--error-fondo);
    border: 1px solid #edb5b0;
    color: var(--error);
    border-radius: var(--radio-chico);
    padding: 11px 14px;
    margin: 0 0 12px;
    font-weight: 600;
}

.pdc-error[hidden] { display: none; }

/* Botones */

.pdc-boton {
    display: block;
    width: 100%;
    border: none;
    border-radius: var(--radio-chico);
    padding: 15px 18px;
    font-size: 1.05rem;
    font-weight: 800;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, transform .05s ease;
}

.pdc-boton--agregar { background: var(--coral); color: #fff; }
.pdc-boton--agregar:hover { background: var(--coral-oscuro); }
.pdc-boton--agregar:active { transform: translateY(1px); }
.pdc-boton--agregar:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.pdc-boton--whatsapp {
    background: var(--wa);
    color: #04331b;
    box-shadow: 0 4px 0 var(--wa-oscuro);
}

.pdc-boton--whatsapp:hover { background: #1fbe5c; }
.pdc-boton--whatsapp:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wa-oscuro); }
.pdc-boton--whatsapp:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.pdc-boton--whatsapp[aria-disabled="true"],
.pdc-boton.esta-inactivo {
    background: #d6cfc6;
    color: #7d7168;
    box-shadow: none;
    cursor: not-allowed;
}

/* Resumen */

.pdc-resumen {
    background: var(--papel);
    border: 2px solid var(--verde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
    padding: 18px;
}

.pdc-resumen__titulo { margin: 0 0 12px; font-size: 1.2rem; font-weight: 900; }

.pdc-carrito { list-style: none; margin: 0 0 14px; padding: 0; }
.pdc-carrito__vacio { color: var(--tinta-suave); font-style: italic; }

.pdc-item {
    border-top: 1px dashed var(--borde);
    padding: 12px 0;
}

.pdc-item:first-child { border-top: none; padding-top: 0; }

.pdc-item__cabecera { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pdc-item__nombre { font-weight: 700; }
.pdc-item__precio { font-weight: 800; color: var(--coral-oscuro); white-space: nowrap; }

.pdc-item__detalle {
    margin: 4px 0 0;
    font-size: .86rem;
    color: var(--tinta-suave);
    line-height: 1.45;
}

.pdc-item__acciones { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.pdc-cant {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 999px;
    overflow: hidden;
}

.pdc-cant button {
    border: none;
    background: var(--crema);
    color: var(--tinta);
    width: 34px;
    height: 32px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
}

.pdc-cant button:hover { background: var(--crema-fuerte); }
.pdc-cant span { min-width: 32px; text-align: center; font-weight: 700; }

.pdc-quitar {
    background: none;
    border: none;
    color: var(--error);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
}

.pdc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--verde);
    padding-top: 12px;
    margin: 0 0 16px;
    font-size: 1.1rem;
    font-weight: 700;
}

.pdc-total strong { font-size: 1.45rem; color: var(--coral-oscuro); }

.pdc-datos h3 { margin: 0 0 10px; font-size: 1rem; }
.pdc-resumen__nota { margin: 10px 0 0; font-size: .82rem; color: var(--tinta-suave); text-align: center; }

.pdc-confianza {
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--borde);
    display: grid;
    gap: 6px;
    font-size: .8rem;
    color: var(--tinta-suave);
}

.pdc-confianza strong { color: var(--tinta); }

/* -------------------------------------------------- Páginas sueltas */

.pagina { padding: 30px 0; }
.pagina--centrada { text-align: center; }
.pagina__titulo { font-size: 1.8rem; font-weight: 900; margin: 0 0 14px; }
.pagina__contenido img { border-radius: var(--radio); }
.entrada { border-bottom: 1px solid var(--borde); padding: 16px 0; }
.entrada__titulo { margin: 0 0 6px; font-size: 1.2rem; }

.pagina--centrada .pdc-boton,
.pagina .pdc-boton { max-width: 320px; margin: 18px auto 0; }

/* -------------------------------------------------- Accesibilidad */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}