/* Almar_carta_QR_Fondo_OK_V1
   CHECKPOINT_ALMAR_CARTA_QR_FONDO_OK_V1
   Fondo maestro real como imagen absoluta de documento:
   - NO fixed
   - NO background-size: cover
   - NO recorte vertical
   - NO movimiento vertical tipo créditos
   - movimiento lateral suave y visible
*/

:root{
  --ink:#211a14;
  --muted:#62584e;
  --line:rgba(65,53,42,.18);
  --sand:rgba(255,249,235,.18);
  --sand-readable:rgba(255,249,235,.30);
  --max:820px;
  --radius:26px;
  --shadow-soft:0 16px 34px rgba(38,30,22,.10);
}

*{box-sizing:border-box}

html{
  min-height:100%;
  scroll-behavior:smooth;
  background:#eadfce;
}
body{
  position:relative;
  margin:0;
  min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#eadfce;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto}

body > header,
body > main{
  position:relative;
  z-index:5;
}


.page-bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#eadfce;
}

.page-bg__image{
  position:absolute;
  top:0;
  left:50%;
  width:calc(100% + 40px);
  height:100%;
  max-width:none;
  object-fit:fill;
  transform:translate3d(-50%,0,0);
  transform-origin:50% 0;
  animation:almarFondoLateral 16s ease-in-out infinite;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}

@keyframes almarFondoLateral{
  0%,100%{transform:translate3d(calc(-50% - 10px),0,0)}
  50%{transform:translate3d(calc(-50% + 10px),0,0)}
}

.bg-soft{
  display:none;
}

.float{
  position:fixed;
  z-index:2;
  pointer-events:none;
  opacity:.12;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.float.cloud{
  width:min(68vw,460px);
  top:9svh;
  left:-18vw;
  animation:driftCloud 46s linear infinite;
}

.float.fish{
  display:none;
}

.float.foot{
  width:min(30vw,150px);
  bottom:12svh;
  left:6vw;
  opacity:.16;
  transform:rotate(-10deg);
}

@keyframes driftCloud{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(130vw,0,0)}
}

@keyframes floatFish{
  0%,100%{transform:translate3d(0,0,0) rotate(3deg)}
  50%{transform:translate3d(0,-14px,0) rotate(-2deg)}
}

.hero{
  position:relative;
  min-height:108svh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:#132532;
}

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

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,10,15,.04),rgba(6,10,15,.34) 62%,rgba(6,10,15,.62));
}

.hero-inner{
  position:relative;
  z-index:2;
  width:min(92vw,760px);
  padding:34px 18px calc(58px + env(safe-area-inset-bottom));
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
}

.logo-hero{
  width:min(76vw,420px);
  display:block;
  margin:0 auto 14px;
}

.kicker{
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:.78rem;
  opacity:.9;
}

.hero p{
  margin:.7rem auto 0;
  max-width:31ch;
  line-height:1.42;
  font-size:1.05rem;
}

.scroll-hint{
  display:inline-block;
  margin-top:16px;
  color:#fff;
  text-decoration:none;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.86;
}

main{
  width:min(100%,var(--max));
  margin:0 auto;
  padding:18px 14px 64px;
}

.intro{
  margin:10px 0 22px;
  padding:18px 16px;
  border-radius:var(--radius);
  background:transparent;
  color:var(--muted);
  line-height:1.55;
  border:0;
  box-shadow:none;
  text-shadow:none;
}

.nav-menu{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 0 14px;
  margin:0 -14px 8px 0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.nav-menu::-webkit-scrollbar{display:none}

.nav-menu a{
  flex:0 0 auto;
  text-decoration:none;
  color:rgba(43,35,27,.88);
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,248,232,.28));
  border:1px solid rgba(255,255,255,.58);
  padding:10px 14px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(130,102,70,.08),
    0 8px 18px rgba(45,35,24,.08);
  backdrop-filter:saturate(118%);
  -webkit-backdrop-filter:saturate(118%);
}

.nav-menu a:active{
  transform:translateY(1px);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,248,232,.34));
}

.section{margin:0 0 16px}

.card{
  border:0;
  border-radius:var(--radius);
  padding:17px 15px;
  background:transparent;
  box-shadow:none;
  text-shadow:none;
}

h2{
  margin:0 0 12px;
  font-size:1.33rem;
  line-height:1.08;
  letter-spacing:-.02em;
}

.rows{display:grid;gap:10px}

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:end;
  border-bottom:1px solid rgba(92,80,68,.12);
  padding-bottom:8px;
}

.row:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.name{
  line-height:1.32;
  font-size:1rem;
}

.desc{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.35;
}

.price{
  white-space:nowrap;
  font-weight:720;
  text-align:right;
}

.note{
  margin-top:20px;
  text-align:center;
  line-height:1.6;
  font-size:0.95rem;
  opacity:0.95;
  white-space:pre-line;
}

.photo{
  margin:14px 0 24px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:none;
  background:transparent;
}

.photo img{
  width:100%;
  display:block;
  object-fit:contain;
}

.photo-card{
  margin:12px 0 16px;
  border-radius:22px;
}

.edit-note{
  font-size:.82rem;
  color:rgba(70,60,50,.72);
  margin-top:10px;
}

.end{
  margin-top:20px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:none;
}

.end img{
  width:100%;
  display:block;
}

footer{
  text-align:center;
  padding:26px 4px 34px;
  color:var(--muted);
}

.logo-footer{
  width:230px;
  max-width:72vw;
  display:block;
  margin:0 auto 16px;
}

.cta-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 6px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:#5d5147;
  text-decoration:none;
  font-weight:700;
  font-size:.90rem;
  box-shadow:none;
}

.cta:focus-visible,
.nav-menu a:focus-visible,
.scroll-hint:focus-visible{
  outline:3px solid rgba(30,80,110,.45);
  outline-offset:3px;
}

@media (min-width:760px){
  main{padding-left:22px;padding-right:22px}
  .card{padding:22px}
  .cta-row{grid-template-columns:repeat(4,1fr)}
  .cta{font-size:.95rem}
  .hero p{font-size:1.15rem}
}

@media (max-width:380px){
  .row{
    grid-template-columns:1fr;
    gap:4px;
  }
  .price{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  .page-bg__image{animation:none!important}
  .float{display:none}
}
.photo-logo{
  margin: 26px auto 18px;
  text-align: center;
}

.photo-logo img{
  width: 190px;
  max-width: 58vw;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* CAFÉS + BEBIDAS · ajuste limpio 2026-06
   - Cafés: texto y logo unidos antes del listado.
   - Bebidas: precios compuestos en columnas de formato.
   - No modifica menu-data.js.
*/

.cafe-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  margin:4px 0 18px;
}

.cafe-note{
  margin:0;
  text-align:left;
  max-width:58ch;
}

.cafe-logo{
  width:clamp(144px,42vw,264px);
  max-height:18em;
  object-fit:contain;
  display:block;
}

.rows-formatos{
  gap:8px;
}

.row-formatos{
  display:grid;
  grid-template-columns:minmax(0,1fr) repeat(var(--format-count), minmax(68px, 68px));
  column-gap:8px;
  align-items:end;
}

.row-formatos-head{
  color:rgba(70,60,50,.72);
  font-size:.78rem;
  font-weight:780;
  letter-spacing:.02em;
  padding:0 0 2px;
  text-align:center;
}

.row-formatos-head > div:first-child{
  text-align:left;
}

.row-formatos.row{
  grid-template-columns:minmax(0,1fr) repeat(var(--format-count), minmax(68px, 68px));
}

.price-formato{
  min-width:68px;
  text-align:center;
}

@media (max-width:430px){
  .cafe-intro{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }

  .cafe-note{
    font-size:.90rem;
    line-height:1.48;
  }

  .cafe-logo{
    width:clamp(124px,38vw,184px);
    max-height:15em;
  }

  .row-formatos,
  .row-formatos.row{
    grid-template-columns:minmax(0,1fr) repeat(var(--format-count), minmax(58px, 58px));
    column-gap:6px;
  }

  .row-formatos-head{
    font-size:.72rem;
  }

  .price-formato{
    min-width:58px;
  }
}

@media (max-width:330px){
  .cafe-intro{
    grid-template-columns:1fr;
  }

  .cafe-logo{
    justify-self:center;
  }
}


/* FINAL V3 · botones, contraste y estabilidad móvil
   - Botones de navegación y contacto con bisel suave, sin sombra blanca.
   - Texto negro estable en Safari/Brave/Chrome.
   - Precios protegidos para no bajar de línea.
   - Logo de cafés ampliado.
*/

body,
main,
.section,
.card,
.row,
.name,
.price,
.note,
.intro,
footer{
  color:var(--ink);
}

.nav-menu a,
.cta{
  color:#2c231b !important;
  background:linear-gradient(180deg,rgba(255,248,232,.68),rgba(232,214,185,.48));
  border:1px solid rgba(118,94,64,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(83,62,37,.10);
  text-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.nav-menu a{
  padding:10px 15px;
}

.nav-menu a:active,
.cta:active{
  transform:translateY(1px);
  background:linear-gradient(180deg,rgba(255,246,224,.76),rgba(226,205,173,.56));
}

.cta-row{
  gap:9px;
}

.cta{
  min-height:46px;
  padding:11px 10px;
}

.row{
  grid-template-columns:minmax(0,1fr) max-content;
}

.name{
  min-width:0;
  overflow-wrap:normal;
}

.price{
  color:#211a14 !important;
  align-self:end;
}

.rows-formatos .name{
  padding-right:2px;
}

.row-formatos,
.row-formatos.row{
  grid-template-columns:minmax(0,1fr) repeat(var(--format-count), minmax(64px,64px));
  column-gap:8px;
}

.row-formatos-head{
  text-align:center;
}

.row-formatos-head > div:not(:first-child),
.price-formato{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-align:center;
}

.cafe-intro{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}

.cafe-logo{
  width:clamp(230px,54vw,390px);
  max-height:24em;
}

@media (max-width:430px){
  .row{
    grid-template-columns:minmax(0,1fr) max-content;
    gap:10px;
  }

  .name{
    font-size:.98rem;
    line-height:1.28;
  }

  .price{
    font-size:.98rem;
    text-align:right;
  }

  .row-formatos,
  .row-formatos.row{
    grid-template-columns:minmax(0,1fr) repeat(var(--format-count), minmax(54px,54px));
    column-gap:5px;
  }

  .row-formatos-head{
    font-size:.70rem;
  }

  .price-formato{
    min-width:54px;
    font-size:.94rem;
  }

  .cafe-intro{
    gap:12px;
  }

  .cafe-note{
    font-size:.88rem;
    line-height:1.42;
  }

  .cafe-logo{
    width:clamp(190px,50vw,260px);
    max-height:22em;
  }
}

@media (max-width:360px){
  .nav-menu a{
    padding:9px 13px;
  }

  .row-formatos,
  .row-formatos.row{
    grid-template-columns:minmax(0,1fr) repeat(var(--format-count), minmax(50px,50px));
    column-gap:4px;
  }

  .price-formato{
    min-width:50px;
    font-size:.90rem;
  }

  .cafe-logo{
    width:clamp(170px,48vw,230px);
  }
}

@media (max-width:330px){
  .cafe-intro{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .cafe-logo{
    justify-self:end;
    width:150px;
  }
}