/**
 * Diseño "Cafetería" — pizarra blanca escrita a rotulador: títulos en el
 * primario, precios en el secundario, notas adhesivas teñidas del
 * secundario y una foto pegada con celo. Los títulos usan la letra "a mano"
 * del dispositivo (Marker Felt / Chalkboard en Apple, Segoe Print en Windows,
 * Coming Soon —`casual`— en Android). Siempre en claro. Clases propias: ca-*.
 */

.p-cafeteria {
    color-scheme: light;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #fdfdfc;
    --fondo-2: #f2f2f0;
    --texto: #23262a;
    --tenue: #6c7075;
    --linea: #dcdee0;
    --nota: #f6f1df;
    --radio: 10px;
    --fuente-mano: "Marker Felt", "Chalkboard SE", "Segoe Print", "Bradley Hand", casual, "Comic Neue", cursive;
    --fuente-titulo: var(--fuente-mano);
    --c1-tinta: inherit;
    --c2-tinta: inherit;
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .08);
    --trazo: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-cafeteria {
        --fondo: color-mix(in srgb, var(--c2) 3%, #fefefe);
        --fondo-2: color-mix(in srgb, var(--c2) 9%, #f7f7f6);
        --texto: color-mix(in srgb, var(--c1-tinta) 12%, #22252a);
        --tenue: color-mix(in srgb, var(--c1-tinta) 20%, #6b6f74);
        --linea: color-mix(in srgb, var(--c2) 20%, #dedfe1);
        --nota: color-mix(in srgb, var(--c2) 30%, #fffef6);
        --c1-suave: color-mix(in srgb, var(--c1) 12%, #fff);
        --c2-suave: color-mix(in srgb, var(--c2) 14%, #fff);
    }
    html:has(> .p-cafeteria) { background: color-mix(in srgb, var(--c2) 20%, #e2e3e5); }
}
/* la pizarra blanca: un marco de aluminio fino y algún resto de borrado */
.p-cafeteria .carta {
    background:
        radial-gradient(ellipse 60% 25% at 75% 20%, rgba(0, 0, 0, .025), transparent 70%),
        radial-gradient(ellipse 50% 25% at 20% 70%, rgba(0, 0, 0, .02), transparent 70%),
        var(--fondo);
    box-shadow: inset 0 0 0 5px var(--linea), inset 0 0 0 6px rgba(0, 0, 0, .06);
}

/* piezas comunes: base.css las oscurece con el modo del sistema; aquí, siempre claro */
.p-cafeteria .c-ficha-desc { color: var(--texto); }
.p-cafeteria .c-toast { background: var(--texto); color: #fff; }
.p-cafeteria .c-nota--aviso { background: #fdecea; color: #9b1c13; }
.p-cafeteria .c-dieta--vegano, .p-cafeteria .c-dieta--vegetariano, .p-cafeteria .c-dieta--singluten { color: #3f7a2f; }
.p-cafeteria .c-dieta--picante, .p-cafeteria .c-form-msg.es-error { color: #c8261b; }
.p-cafeteria .c-etq { background: none; border: 1.5px solid currentColor; border-radius: var(--trazo); color: var(--c2-tinta); font-family: var(--fuente-mano); font-weight: 400; }
.p-cafeteria .c-etq--agotado { color: #c8261b; }
.p-cafeteria .c-ficha-nombre { color: var(--c1-tinta); font-weight: 400; }
.p-cafeteria .c-ficha-precio, .p-cafeteria .c-formato .c-precio { color: var(--c2-tinta); }
.p-cafeteria .c-boton { border-radius: var(--trazo); font-family: var(--fuente-mano); font-weight: 400; font-size: 1.0625rem; }
.p-cafeteria .c-mas { border-radius: var(--trazo); }
.p-cafeteria .c-alergenos h3 { font-family: var(--fuente-mano); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--c1-tinta); }

.ca-raya { display: block; width: 110px; height: 10px; margin: 2px auto 0; fill: none; stroke: var(--c2); stroke-width: 3; stroke-linecap: round; }

/* ---- portada ---- */

.ca-tira { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: calc(8px + env(safe-area-inset-top)) 14px 0; }
.ca-redes { justify-content: flex-start; color: var(--tenue); }
.ca-idioma { margin-left: auto; border: 1.5px solid var(--linea); border-radius: var(--trazo); }

.ca-cab { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 24px 4px; text-align: center; }
.ca-logo { width: auto; max-width: 62%; max-height: 88px; margin-bottom: 6px; }
.ca-cab h1 { font: 400 2.25rem/1.12 var(--fuente-mano); color: var(--c1-tinta); text-wrap: balance; }
.ca-cab .ca-raya { width: 160px; margin-top: -6px; }
.ca-cab p { margin-top: 4px; font-size: .875rem; color: var(--tenue); }
/* la foto, pegada con dos trozos de celo */
.ca-polaroid {
    position: relative;
    display: block; width: 88%; margin: 22px auto 6px; padding: 8px 8px 30px;
    background: #fff;
    box-shadow: var(--sombra);
    transform: rotate(-1.5deg);
}
.ca-polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ca-polaroid::before, .ca-polaroid::after {
    content: ""; position: absolute; top: -10px; width: 74px; height: 22px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .ca-polaroid::before, .ca-polaroid::after { background: color-mix(in srgb, var(--c2) 30%, rgba(255, 255, 255, .5)); }
}
.ca-polaroid::before { left: 14px; transform: rotate(-8deg); }
.ca-polaroid::after { right: 14px; transform: rotate(7deg); }

.ca-menus { display: grid; gap: 12px; padding: 26px 20px 4px; }
.ca-menus a {
    display: flex; align-items: center; gap: 12px;
    min-height: 66px; padding: 12px 18px;
    border: 2.5px solid var(--c1-tinta); border-radius: var(--trazo);
    background: var(--fondo);
}
.ca-menus a:nth-child(even) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; border-color: var(--c2-tinta); }
.ca-menus a:active { background: var(--c1-suave); }
.ca-menus-nombre { flex: 1; min-width: 0; font: 400 1.5rem/1.15 var(--fuente-mano); color: var(--c1-tinta); }
.ca-menus .c-precio { color: var(--c2-tinta); }
.ca-menus .ic { width: 22px; height: 22px; color: var(--c1-tinta); }

/* ---- recomendaciones: notas adhesivas ---- */

.ca-recos { padding: 32px 18px 4px; }
.ca-recos h2 { padding-bottom: 14px; font: 400 1.5rem/1.2 var(--fuente-mano); color: var(--c1-tinta); text-align: center; }
.ca-notas { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 14px; }
.ca-nota {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 10px 12px;
    background: var(--nota);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 6px 12px -4px rgba(0, 0, 0, .18);
    transform: rotate(-1.5deg);
}
.ca-nota:nth-child(even) { transform: rotate(1.8deg); }
.ca-nota:nth-child(3n) { transform: rotate(-.6deg); }
.ca-nota:only-child { grid-column: 1 / -1; }
.ca-nota:active { transform: scale(.97); }
.ca-nota-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 4px; }
.ca-nota-nombre { font: 400 1.0625rem/1.2 var(--fuente-mano); }
.ca-nota .c-precio { font-family: var(--fuente-mano); font-weight: 400; color: var(--c1-tinta); }

/* ---- pie ---- */

.ca-pie { padding: 30px 18px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.ca-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ca-accion {
    display: flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 6px 16px;
    border: 2px solid var(--linea); border-radius: var(--trazo);
    font: 400 1rem/1.15 var(--fuente-mano);
}
.ca-accion:nth-child(even) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.ca-accion .ic { width: 18px; height: 18px; color: var(--c1-tinta); }
.ca-accion:first-child { border-color: var(--c1-tinta); color: var(--c1-tinta); }
.ca-accion:active { background: var(--fondo-2); }

/* ---- una carta ---- */

.ca-barra { background: var(--fondo); }
.ca-barra h1 { text-align: center; font: 400 1.375rem/1.2 var(--fuente-mano); color: var(--c1-tinta); }
.ca-barra h1:last-child { padding-right: 44px; }
.ca-barra .c-idioma { border: 1.5px solid var(--linea); border-radius: var(--trazo); }
.ca-carta .c-indice a { background: none; border: 1.5px solid var(--linea); border-radius: var(--trazo); font-family: var(--fuente-mano); }
.ca-carta .c-indice a[aria-current] { background: none; border-color: var(--c1-tinta); color: var(--c1-tinta); }

.ca-grupos { padding: 0 20px calc(40px + env(safe-area-inset-bottom)); }
.ca-grupo h2 { padding: 30px 0 10px; font: 400 1.75rem/1.15 var(--fuente-mano); color: var(--c1-tinta); text-align: center; }
.ca-grupo:first-child:not(:has(h2)) { padding-top: 14px; }

.ca-plato { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.ca-plato:active { background: var(--fondo-2); }
.ca-plato-foto { width: 60px; height: 60px; flex: none; object-fit: cover; border-radius: 50%; background: var(--fondo-2); box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3.5px var(--linea); }
.ca-plato-txt { flex: 1; min-width: 0; align-self: center; }
.ca-plato-linea { display: flex; align-items: baseline; gap: 10px; }
.ca-plato-nombre { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.ca-plato-linea .c-precio { font: 400 1.25rem/1 var(--fuente-mano); color: var(--c2-tinta); }
.ca-plato-linea .c-mas { align-self: center; margin: -6px 0; }
.ca-plato-extra { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.35; color: var(--tenue); }
.ca-plato .c-formato { border-top-style: dashed; }