@font-face { font-family:"Tekton"; src:url("./fuentes/Tekton-Bold.otf") format("opentype"); font-weight:700; }
    @media (min-width: 769px) {
      :root {
        --scale: calc(min(100vw / 768, 100vh / 1171));
      }
    } 


    :root{      
      --scale: 1;
      --page-w: 768; /* px referenciales para proporciones */
      --page-h: 1171; /* px */
      --ratio: calc(var(--page-w) / var(--page-h));

      --red: #CA4546;            
      --ink: #444444;            
      --muted: #7e7e7e;            
      --sep: rgba(185,43,41,.35);  
      --font-head: 'Tekton', 'Baloo 2', system-ui, sans-serif;   /* títulos rojos */
      --font-hand: 'Tekton', 'Patrick Hand', ui-rounded, system-ui, sans-serif; /* items */

      --vh: calc(100% / 100); 

      --topbar-h: 0%;

      --pad-x: 13%;
      --pad-top: 12.0%;

      --col-num: 6.5%;
      --col-gap: 2.3%;
      --col-price: 16%;

      --fs-title: 3em;
      --fs-head: 1.8em;
      --fs-item: 2em;
      --fs-sub: 1.5em;
      --fs-num: 2em;
      --fs-price: 2em;

      --lh-item: 1.00;
      --gap-block: 2.8%;
    }
    @media (max-width: 768px) {

      :root {
        --fs-title: 2.8em;
        --fs-head: 1.7em;
        --fs-item: 1.9em;
        --fs-sub: 1.4em;
        --fs-num: 1.9em;
        --fs-price: 1.9em;
      }
    }

    body {margin: 0px !important;}
    .menu-title{ font-family: var(--font-head);font-size: var(--fs-title); text-align:center; font-weight:bold; color: var(--red); margin-top: 0.5em; margin-bottom: 0.5em;}
    .menu-carta{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
    .sheet{ position: relative; width: 100%; aspect-ratio: calc(var(--page-w) / var(--page-h)); margin: 0px; background-image: url("./img/decoration.jpg"); background-color:#fff; background-repeat: no-repeat;background-size: 100% 100%;background-position: center;}

    .content{ position:absolute; left: var(--pad-x); right: var(--pad-x); top: var(--pad-top); bottom: 0; display:flex; flex-direction: column; }
    
    .title{ font-family: var(--font-head); color: var(--red); font-weight: bold; text-align: center; font-size: var(--fs-title); letter-spacing: .4px; margin: 2% 0 2% 0; text-shadow: 0.15px 0 0 currentColor, -0.15px 0 0 currentColor, 0 0.15px 0 currentColor, 0 -0.15px 0 currentColor;}
    .sub-title{ font-family: var(--font-head); color: var(--red); font-weight: bold; text-align: center; font-size: var(--fs-item); letter-spacing: .4px; }
    .title-context{ color:var(--red); margin-top: -10px; font-family: var(--font-head); font-size: var(--fs-sub) }

    .block{ margin-top: var(--gap-block); }
    .head{ font-family: var(--font-head); color: var(--red); font-weight: bold; text-align: center; font-size: var(--fs-head); margin: 2% 0 1% 0; }

    .list{ display: grid; grid-template-columns: var(--col-num) var(--col-gap) 1fr var(--col-price); row-gap: var(--gap-item); align-items: baseline; }
    .num{ grid-column: 1; justify-self: end; font-family: var(--font-head); color: var(--red); font-size: var(--fs-num); font-weight: bold; }
    .dot{ grid-column: 2; }
    .name{ grid-column: 3; font-family: var(--font-hand); font-size: var(--fs-item); line-height: var(--lh-item); color: var(--ink); font-weight: bold; }
    .sub{ grid-column: 3; font-family: var(--font-hand); font-size: var(--fs-sub); color: var(--red); margin-top: -0.2%;}
    .price{ grid-column: 4; justify-self: end; font-family: var(--font-head); color: var(--red); font-size: var(--fs-price); font-weight: bold; }

    .list-simple{ display:grid; grid-template-columns: 1fr var(--col-price); row-gap: var(--gap-item); }
    .list-simple .name{ grid-column:1 }
    .list-simple .price{ grid-column:2; justify-self:end }

    .list-2col{ display:grid; grid-template-columns: 1fr 16%; row-gap: 10px; align-items:baseline; }
    .list-2col .name{ grid-column:1; font-family:var(--font-hand); font-size: var(--fs-sub); font-weight:700; color:var(--ink); }
    .list-2col .price{ grid-column:2; justify-self:end; font-family:var(--font-head); font-weight:700; color:var(--red); }

    .stack-center{ text-align:center; display:flex; flex-direction:column; gap:14px; }
    .stack-center .kicker{ font-family:var(--font-head); color:var(--red); letter-spacing:.08em; }
    .stack-center .item{ font-family:var(--font-hand); font-weight:700; }
    .stack-center .big-price{ font-family:var(--font-head); color:var(--red); font-weight:700; font-size:1.6rem; margin-top:10px; }

    .dots{ margin-top: auto; display:flex; justify-content:center; gap: 6.5%; }
    .dots i{ width: 12%; height: 2px; background: var(--sep); border-radius: 2px }

    .menu-dia, .menu-donlay, .menu-casa, .menu-simple { text-align:center; }
    .menu-dia .grupo{ margin: 2% 0 }
    .precio-menu { font-family: var(--font-head); color: var(--red); font-weight:700; font-size: var(--fs-price); margin-top: 2.5% }
    .precio-extra { font-family: var(--font-head); color: var(--red); font-weight:700; font-size: var(--fs-price);}
    .menu-subtitle { font-family: var(--font-head); font-size: 20px; font-weight: bold; color: #c33; text-align: center; margin: 10px 0 5px; text-transform: uppercase; }
    .menu-item { font-family: var(--font-head); text-align: center; font-size: var(--fs-sub); margin: 2px 0; color: var(--ink); font-weight: bold; letter-spacing: 0.5px; }
    .menu-postre { color:var(--ink); font-family: var(--font-head); font-size: var(--fs-sub); }
    .menu-simple { top: 15%;}
    .menu-simple.abajo { top: 55%;}

    .name { display: flex; align-items: center; gap: 6px; }
    .icons-inline { display: flex; gap: 5px; margin-left: 6px; }
    .icons-inline img { width: 1.4em; height: 1.4em; object-fit: contain; }

    .bold-font{text-shadow: 0.15px 0 0 currentColor, -0.15px 0 0 currentColor, 0 0.15px 0 currentColor, 0 -0.15px 0 currentColor;}
    .alergenos{background-image: url("./img/alergenos.jpg");}

    @media (max-width: 768px) {
      .menu-carta { display: flex !important; flex-direction: column; align-items: center;}
      .sheet { width: 100%; max-width: 768px; aspect-ratio: calc(var(--page-w) / var(--page-h));}
    }

    @media screen {.sheet { font-size: min(1.2vw, 1.2vh); } }
    @media print {.sheet { page-break-after: always; } }

  
    @media print {
    :root {
      --fs-title: 2.2em;
      --fs-head: 1.2em;
      --fs-item: 1.0em;
      --fs-sub: 0.8em;
      --fs-num: 1.0em;
      --fs-price: 1.0em;
    }
    body {
      margin: 0px !important;
      padding: 0;
      font-size: 16px !important;
    }

    .sheet {
      width: 100vw;
      height: 100vh;
      aspect-ratio: auto;
      page-break-after: always !important;
      break-inside: avoid !important;
      display: block !important;
    }

    .menu-carta {
      display: block !important;
    }
    @page {
      size: A4 portrait;
      margin: 0;
    }
}