/* =====================================================================
   Coctelería El Colocho — sitio público

   Hoja aparte de la del sistema a propósito. Las dos comparten los colores
   del negocio, pero el punto de venta se diseña para trabajar de pie y con
   prisa, y esto se diseña para que alguien acostado en su cama decida qué
   se le antoja. No tienen por qué evolucionar juntas.

   Primero el teléfono: ahí va a entrar casi todo el mundo, desde un enlace
   compartido por WhatsApp.
   ===================================================================== */

:root {
    --azul-profundo: #0A3D6B;
    --azul:          #1565A8;
    --turquesa:      #17A2C6;
    --naranja:       #F05423;
    --crema:         #FFF8EC;
    --arena:         #F5E6C8;

    --texto:       #1B2A38;
    --texto-tenue: #66788A;
    --borde:       #E3DCCC;
    --blanco:      #FFFFFF;
    --verde-wa:    #1FA855;

    --radio: 14px;
    --sombra: 0 1px 3px rgba(16, 38, 58, .08), 0 6px 20px rgba(16, 38, 58, .07);

    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--crema);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
a { color: var(--azul); }

/* La barra del pedido tapa el final de la página; este hueco evita que el
   último platillo quede debajo de ella y no se pueda leer. */
body:has(#barra:not([hidden])) { padding-bottom: 88px; }

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

.portada {
    background: var(--azul-profundo);
    color: var(--arena);
    padding: 36px 20px 32px;
    text-align: center;
}

.portada__interior { max-width: 640px; margin: 0 auto; }
.portada__logo    { display: block; margin: 0 auto 14px; }
.portada__nombre  { font-size: 27px; color: var(--blanco); letter-spacing: -.01em; }
.portada__eslogan { margin: 6px 0 0; font-style: italic; color: var(--turquesa); }

.datos {
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.datos__fila {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 10px;
    align-items: baseline;
}

.datos dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 230, 200, .55);
}

.datos dd { margin: 0; color: var(--blanco); }
.datos dd a { color: var(--blanco); }

.portada__acciones {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* --------------------------------------------------------------- Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    background: transparent;
    color: var(--blanco);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.boton--principal { background: var(--naranja); border-color: var(--naranja); }
.boton--whatsapp {
    width: 100%;
    background: var(--verde-wa);
    border-color: var(--verde-wa);
    margin-top: 4px;
}

.boton--whatsapp[aria-disabled="true"] { opacity: .45; }

/* ----------------------------------------------------------------- Carta */

.carta { max-width: 680px; margin: 0 auto; padding: 0 16px 40px; }

/* ------------------------------------------------- Portada de categorías */

/* Lo primero que se ve. Diecinueve tarjetas caben en dos pantallas; la
   carta completa mide más de veinte, y nadie la recorre con el dedo
   buscando las cervezas. */
.portada-cat {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 18px 0 0;
}

.tarjeta-cat {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 112px;
    padding: 12px;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--azul-profundo);
    color: var(--blanco);
    text-decoration: none;
    box-shadow: var(--sombra);
}

/* Sin fotos todavía, diecinueve tarjetas del mismo azul se ven muertas.
   Estos tres tonos son los de la marca y se turnan por posición: dan ritmo
   sin decir nada que no sea cierto sobre la categoría. Cuando entren las
   fotos, la foto manda y esto queda de fondo. */
.tarjeta-cat--t0 { background: var(--azul-profundo); }
.tarjeta-cat--t1 { background: var(--azul); }
.tarjeta-cat--t2 { background: #12788F; }

.tarjeta-cat__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Velo oscuro para que el nombre se lea sobre cualquier foto. */
.tarjeta-cat__texto {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.tarjeta-cat:has(.tarjeta-cat__foto)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 30, 48, .82) 12%, rgba(8, 30, 48, .12) 72%);
}

.tarjeta-cat__texto strong { font-size: 16px; }
.tarjeta-cat__texto small  { font-size: 12px; opacity: .8; margin-top: 2px; }

/* ---------------------------------------------------------- El buscador */

.buscador { padding: 16px 0 0; }

.buscador__campo {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--blanco);
    font: inherit;
    color: var(--texto);
}

.buscador__campo:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(21, 101, 168, .15);
}

.regreso { padding: 16px 0 0; }

.regreso__boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--azul-profundo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ver-todo { margin: 18px 0 0; text-align: center; font-size: 14px; }
.ver-todo a { color: var(--texto-tenue); }

.sin-resultados { padding: 36px 4px; text-align: center; color: var(--texto-tenue); }

/* Sin JavaScript la carta se queda como una lista corrida, que es lo que
   era antes: se lee completa y los enlaces de la portada funcionan como
   anclas. Esconder secciones es cosa del JavaScript, nunca del HTML. */
.con-js .indice[hidden],
.con-js .seccion[hidden],
.con-js .platillo[hidden] { display: none; }

/* Índice pegajoso: con diecinueve secciones, volver arriba cada vez para
   cambiar de sección haría la carta inusable en un teléfono. */
.indice {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px 16px;
    margin: 0 -16px 8px;
    background: var(--crema);
    border-bottom: 1px solid var(--borde);
}

.indice::-webkit-scrollbar { display: none; }

/* La categoria abierta, marcada. Sin esto uno cambia de pastilla y no sabe
   si el toque hizo algo. */
.indice a.activo {
    background: var(--azul-profundo);
    border-color: var(--azul-profundo);
    color: var(--blanco);
}

.indice a {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    color: var(--azul-profundo);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.seccion { padding-top: 26px; scroll-margin-top: 62px; }

.seccion__titulo {
    font-size: 21px;
    color: var(--azul-profundo);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--naranja);
    display: inline-block;
}

.seccion__nota { margin: 6px 0 0; font-size: 14px; color: var(--texto-tenue); font-style: italic; }

.platillos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.platillo {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px 16px;
}

.platillo--agotado { opacity: .6; }

/* Nombre y foto en un renglón; la foto a la derecha. Los platillos con y sin
   foto conviven en la misma lista —van a pasar meses antes de que estén
   todas— así que la foto se suma al costado en vez de mandar el diseño. */
.platillo__encabezado { display: flex; gap: 14px; align-items: flex-start; }
.platillo__texto      { flex: 1; min-width: 0; }

.platillo__nombre { font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.platillo__nota   { margin: 4px 0 0; font-size: 14px; color: var(--texto-tenue); }

.platillo__foto {
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--arena);
    cursor: zoom-in;
    /* La medida se reserva desde el CSS y el ancho/alto van en la etiqueta:
       así la lista no da brincos mientras van entrando las fotos. */
}

.platillo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.platillo--agotado .platillo__foto img { filter: grayscale(.7); }

/* -------------------------------------------------------- Foto en grande */

.visor {
    width: min(94vw, 720px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    overflow: visible;
}

.visor::backdrop { background: rgba(10, 30, 48, .86); }

.visor__imagen {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radio);
    background: var(--azul-profundo);
    cursor: zoom-out;
}

.visor__pie {
    margin: 12px 0 0;
    text-align: center;
    color: var(--blanco);
    font-size: 17px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.visor__cerrar {
    position: absolute;
    top: -14px;
    right: -8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--blanco);
    color: var(--texto);
    font-size: 17px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.etiqueta {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--arena);
    color: #8A5C11;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.platillo__precio--consultar { display: inline-block; margin-top: 10px; color: var(--texto-tenue); font-style: italic; }

/* Cada tamaño es su propio botón: así «Grande $180» se pide de un toque,
   sin menús desplegables que en un teléfono son un estorbo. */
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.opcion {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid var(--azul);
    border-radius: 999px;
    background: var(--blanco);
    color: var(--azul-profundo);
    font: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}

/* El precio cuando no hay nada que tocar: agotado, o la página sin pedidos.
   Se pinta sin borde azul para que no prometa un toque que no hace nada. */
.opcion--lectura { border-color: var(--borde); color: var(--texto-tenue); cursor: default; }
.opcion--lectura .opcion__precio { color: var(--texto); }
.opcion__nombre  { font-weight: 600; }
.opcion__precio  { font-weight: 700; color: var(--naranja); }
.opcion--sola    { padding: 8px 20px; }

.opcion--agregada {
    background: var(--azul-profundo);
    border-color: var(--azul-profundo);
    color: var(--blanco);
    transform: scale(.96);
}

.opcion--agregada .opcion__precio { color: var(--arena); }

.vacio { padding: 40px 0; text-align: center; color: var(--texto-tenue); }

/* ------------------------------------------------------------------- Pie */

.pie {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--borde);
    text-align: center;
    font-size: 14px;
    color: var(--texto-tenue);
}

.pie p { margin: 3px 0; }
.pie__aviso { margin-top: 14px; font-size: 13px; }

/* --------------------------------------------- Barra y ventana del pedido */

.barra {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--crema) 62%, rgba(255, 248, 236, 0));
}

.barra__resumen {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 648px;
    margin: 0 auto;
    min-height: 56px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--naranja);
    color: var(--blanco);
    font: inherit;
    font-weight: 700;
    box-shadow: 0 6px 22px rgba(240, 84, 35, .38);
    cursor: pointer;
}

.barra__cuenta {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: 14px;
}

.barra__total { margin-left: auto; }

/* Hoja que sube desde abajo, como las de cualquier app: el pulgar ya está
   ahí. Pegada al borde inferior y al ancho completo del teléfono; en una
   pantalla grande se queda centrada y con su medida. */
.pedido {
    inset-inline: 0;
    width: auto;
    max-width: 560px;
    max-height: 86vh;
    margin: auto auto 0;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--radio) var(--radio) 0 0;
    background: var(--blanco);
    color: var(--texto);
    overflow-y: auto;
}

.pedido::backdrop { background: rgba(10, 38, 58, .55); }

.pedido__cerrar-form { float: right; margin: -6px -6px 0 0; }

.pedido__cerrar {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-tenue);
    font-size: 18px;
    cursor: pointer;
}

.pedido__titulo { font-size: 20px; color: var(--azul-profundo); margin-bottom: 14px; }
.pedido__lista  { list-style: none; margin: 0; padding: 0; }
.pedido__vacio  { padding: 18px 0; color: var(--texto-tenue); text-align: center; }

.renglon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde);
}

.renglon__texto   { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.renglon__texto strong { font-weight: 600; }
.renglon__precio  { font-size: 14px; color: var(--texto-tenue); }

.contador { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.contador__boton {
    width: 38px;
    height: 38px;
    border: 1px solid var(--borde);
    border-radius: 50%;
    background: var(--blanco);
    color: var(--azul-profundo);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.contador__numero { min-width: 26px; text-align: center; font-weight: 700; }

.pedido__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 16px 0 20px;
    font-size: 17px;
}

.pedido__total strong { font-size: 21px; color: var(--azul-profundo); }

.campo { margin: 0 0 14px; padding: 0; border: 0; }

.campo label, .campo legend {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-tenue);
}

.campo input[type="text"], .campo textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: var(--blanco);
    font: inherit;
    color: var(--texto);
    resize: vertical;
}

.radio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-weight: 400;
    color: var(--texto);
    cursor: pointer;
}

.radio input { width: 20px; height: 20px; accent-color: var(--naranja); }

.pedido__aviso { margin: 12px 0 0; font-size: 13px; color: var(--texto-tenue); text-align: center; }

.pedido__vaciar {
    display: block;
    margin: 16px auto 0;
    padding: 10px 16px;
    border: 0;
    background: none;
    color: var(--texto-tenue);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* ------------------------------------------------------------ Pantallona */

@media (min-width: 720px) {
    .portada { padding: 56px 20px 48px; }
    .portada__nombre { font-size: 36px; }
    .datos { max-width: 470px; margin-inline: auto; }
    .seccion__titulo { font-size: 24px; }

    /* Con más ancho caben tres: las diecinueve categorías entran de una sola
       mirada, sin desplazar nada. */
    .portada-cat { grid-template-columns: repeat(3, 1fr); }
    .tarjeta-cat { min-height: 128px; }
}

/* Quien pidió menos movimiento no tiene por qué ver el botón encogerse. */
@media (prefers-reduced-motion: reduce) {
    .opcion { transition: none; }
    .opcion--agregada { transform: none; }
}