/* Mesa Reservada — v8: mismo diseño, paleta clara + movimiento (ronda 3) */
:root{
  --v8-bg:#EFE8DA;          /* un solo fondo: blanco sucio con base manteca */
  --v8-bg-2:#E4DBCA;        /* apenas más oscuro: placeholders */
  --v8-laurel:#2E3A2C;
  --v8-green:#4E6B3E;
  --v8-ink:#1F241F;
  --v8-carbon:#1F241F;      /* fondo del cierre */
  --v8-manteca:#E5DCCB;     /* texto sobre el cierre */
  --v8-radius:8px;
  --v8-ease:cubic-bezier(.19,1,.22,1);
  --v8-paper:url('assets/papel-carta.jpg');
  /* el resto del sitio usa --mr-cream como fondo: lo igualamos */
  --mr-cream:#EFE8DA;
  --cream:#EFE8DA;
}
html{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Fondo único (el papel va solo en "Todo lo necesario") ---------- */
html,body,.mr-app{background:var(--v8-bg)!important}
html body :is(.mr-how,.mr-carta,.mr-receive){background:var(--v8-bg)!important}
html body .mr-app .header.is-scrolled{background:rgba(239,232,218,.92)!important}
html body .mr-step-num{background:transparent!important}

/* Hero: mismo fondo que el resto + trazo que se desvanece hacia abajo */
html body .mr-cover{background:var(--v8-bg)!important;color:var(--v8-ink)!important}
html body .mr-cover::before{background:url('assets/hero-trazo-mobile.webp') center top/cover no-repeat!important;opacity:1!important;inset:0!important;transform:scale(1.04)!important;transition:transform 2.6s var(--v8-ease)!important}
@media (min-width:760px){html body .mr-cover::before{background:url('assets/hero-trazo-desktop.webp') center top/cover no-repeat!important}}
html.v8-loaded body .mr-cover::before{transform:scale(1)!important}
html body .mr-cover-brand,html body .mr-cover-tagline,html body .mr-cover-copy{color:var(--v8-laurel)!important}
html body .mr-app .header:not(.is-scrolled){color:var(--v8-laurel)!important}
html body .mr-cover-index{color:var(--v8-laurel)!important}

/* ---------- Esquinas casi rectas: 5px en todo ---------- */
html body :is(.mr-button,.mr-round-link,.mr-dish,.mr-dish-media,.mr-dish-media img,.mr-dish-media--empty,.mr-receive-sheet,.mr-dish-index a,.mr-dish-index span){border-radius:var(--v8-radius)!important}

html body .mr-button{background:var(--v8-laurel)!important;color:var(--v8-bg)!important;transition:background-color .6s var(--v8-ease),letter-spacing .6s var(--v8-ease)!important}
html body .mr-button:hover{background:var(--v8-green)!important;letter-spacing:.09em!important}

/* ---------- Cómo funciona: todo negro, solo los números en verde ---------- */
html body .mr-how-title,html body .mr-how-intro{color:var(--v8-ink)!important}
html body .mr-step :is(h3,p){color:var(--v8-ink)!important}
html body .mr-step .mr-step-num{color:var(--v8-green)!important}
html body .mr-step{transition:opacity .9s var(--v8-ease)!important}

/* ---------- Carta: platos sin foto ---------- */
html body .mr-dish-media--empty{background:var(--v8-bg-2)!important}
html body .mr-dish-media--empty::after{background:none!important}
html body .mr-dish-media--empty span{color:var(--v8-green)!important;opacity:.7;position:relative;z-index:2}
html body .mr-dish:has(.mr-dish-media--empty){color:var(--v8-laurel)!important}
html body .mr-dish:has(.mr-dish-media--empty) .mr-dish-content *{color:var(--v8-laurel)!important;border-color:rgba(46,58,44,.2)!important}
html body .mr-dish:has(.mr-dish-media--empty) .mr-round-link{background:var(--v8-laurel)!important;color:var(--v8-bg)!important}

/* Tipografía de la etiqueta en todos los platos: Archivo Medium mayúscula / Archivo Light */
html body .mr-dish h3{font-family:'Archivo',var(--sans),sans-serif!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.03em!important;font-size:clamp(19px,5.2vw,22px)!important;line-height:1.1!important}
html body .mr-dish .mr-dish-desc{font-family:'Archivo',var(--sans),sans-serif!important;font-weight:300!important;text-transform:none!important;letter-spacing:.005em!important;line-height:1.5!important}
html body .mr-dish :is(.mr-dish-no,.mr-dish-time){font-family:'Archivo',var(--sans),sans-serif!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.14em!important;font-size:9.5px!important}
@media (min-width:760px){
  html body .mr-dish h3{font-size:clamp(15px,1.25vw,19px)!important}
  html body .mr-dish .mr-dish-desc{font-size:13px!important}
  html body .mr-dish :is(.mr-dish-no,.mr-dish-time){font-size:10px!important}
}

/* ---------- Qué recibís ---------- */
html body .mr-receive{padding-bottom:0!important;margin-bottom:0!important}
html body .mr-receive-visual{transition:background-image .6s ease}
html body .mr-receive-visual::after{background:none!important}
html body .mr-receive-sheet{background:#ECE5DA var(--v8-paper) center/cover no-repeat!important}
/* sin líneas entre los ítems */
html body .mr-receive-list,html body .mr-receive-row{border:0!important}
html body .mr-receive-row{padding:11px 0!important}
/* Fotos elegidas: desktop foto 2, mobile foto 3 */
html body .mr-receive-visual{background-image:url('assets/recibis-3.jpg')!important}
@media (min-width:760px){html body .mr-receive-visual{background-image:url('assets/recibis-2.jpg')!important}}

/* Desktop: grilla con mucho aire. Mobile: queda la lista */
@media (min-width:760px){
  html body .mr-receive-center .mr-receive-sheet{max-width:1080px!important;width:min(calc(100% - 14vw),1080px)!important;padding:76px 84px 72px!important}
  html body .mr-receive-sheet h3{margin-bottom:64px!important;max-width:none!important}
  html body .mr-receive-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(40px,4.5vw,72px);row-gap:40px;margin:0 0 64px!important}
  html body .mr-receive-row{display:flex!important;flex-direction:column;gap:14px;padding:0!important;font-size:14px!important;line-height:1.45!important}
  html body .mr-receive-row span:first-child{font-size:26px!important;line-height:1;color:var(--v8-green)}
  html body .mr-receive-copy{max-width:420px!important}
}

/* ---------- Cierre: verde, título en mayúscula y Rodrigo de fondo ---------- */
html body .mr-close{background:var(--v8-carbon)!important;color:var(--v8-manteca)!important}
html body .mr-close::before{content:none!important}
html body .mr-close h2{color:var(--v8-manteca)!important;text-transform:uppercase!important;font-size:30px!important;line-height:1.02!important;letter-spacing:.01em!important}
html body .mr-close p{color:rgba(229,220,203,.78)!important;text-transform:uppercase!important;font-family:var(--serif)!important;font-size:11px!important;letter-spacing:.12em!important;line-height:1.6!important;max-width:340px!important;margin-top:16px!important}
html body svg.mr-close-signature{position:absolute!important;z-index:0!important;left:50%!important;top:50%!important;width:118vw!important;height:auto!important;max-width:none!important;margin:0!important;transform:translate(-50%,-50%) rotate(-4deg)!important;color:#262B25!important;aspect-ratio:395/200;pointer-events:none}
html body .mr-close-inner{z-index:3!important}
html body .mr-footer,html body .mr-footer a,html body .mr-footer strong{color:var(--v8-manteca)!important}
@media (min-width:760px){
  html body .mr-close h2{font-size:46px!important}
  html body .mr-close p{font-size:12px!important;max-width:460px!important}
  html body svg.mr-close-signature{width:min(96vw,1500px)!important}
}

/* ---------- Microinteracciones ---------- */
.mr-dish-media{overflow:hidden}
.mr-dish-media img{transition:transform 1.6s var(--v8-ease),opacity 1.4s var(--v8-ease)!important}
@media (hover:hover){
  .mr-dish:hover .mr-dish-media img{transform:scale(1.045)!important}
  .mr-round-link{transition:transform .7s var(--v8-ease),background-color .5s!important}
  .mr-dish:hover .mr-round-link{transform:translateX(4px)}
}

/* Aparición al scrollear (las clases las pone v8.js; sin JS todo se ve normal) */
.v8-js .v8-up{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.3s var(--v8-ease),transform 1.3s var(--v8-ease);transition-delay:var(--d,0s)}
.v8-js .v8-up.is-in{opacity:1;transform:none}
.v8-js .v8-img img{transform:scale(1.08);opacity:.001}
.v8-js .v8-img.is-in img{transform:scale(1);opacity:1}
/* máscara de cada palabra con lugar para las letras que bajan (g, p, y) */
.v8-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.24em;margin-bottom:-.24em}
.v8-w>span{display:inline-block;transform:translate3d(0,120%,0);transition:transform 1.4s var(--v8-ease);transition-delay:var(--d,0s)}
.is-in .v8-w>span{transform:none}
/* Rodrigo de fondo: se "escribe" lento */
.v8-js svg.mr-close-signature{opacity:0!important;transition:opacity 2.4s ease .3s!important}
.v8-js svg.mr-close-signature.is-in{opacity:1!important}

/* ---------- Botones de prueba (solo para elegir; se sacan después) ---------- */
/* (botones de prueba retirados) */
.v8-test{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:200;display:flex;gap:6px;font:500 10px/1 var(--sans,Arial);letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .4s,transform .4s}
.v8-test.is-on{opacity:1;pointer-events:auto;transform:none}
.v8-test button{appearance:none;border:0;border-radius:var(--v8-radius);background:var(--v8-ink);color:var(--v8-bg);padding:11px 14px;font:inherit;letter-spacing:inherit;cursor:pointer}
.v8-test button:hover{background:var(--v8-green)}

@media (prefers-reduced-motion:reduce){
  .v8-js .v8-up,.v8-js .v8-img img,.v8-w>span{opacity:1!important;transform:none!important;transition:none!important}
  .v8-js svg.mr-close-signature{clip-path:none!important}
}

/* ---------- Correcciones de especificidad ---------- */
html body svg.mr-close-signature path{fill:currentColor!important}
html body .mr-receive-center .mr-receive-sheet{border-radius:var(--v8-radius)!important}
html body .mr-step.mr-step :is(h3,p){color:var(--v8-ink)!important}
html body .mr-step.mr-step .mr-step-num{color:var(--v8-green)!important}

/* Carta: el encabezado usa el mismo fondo que la página */
html body .mr-carta-sticky{background:rgba(239,232,218,.97)!important}
/* Mobile: más aire al llegar a la carta (después el encabezado queda fijo igual) */
@media (max-width:759px){html body .mr-carta{padding-top:56px!important}}

/* Link a la página de la carta */
html body .v8-carta-more{display:flex;justify-content:center;padding:44px 24px 96px;background:var(--v8-bg)}
html body .v8-carta-more a{display:inline-flex;align-items:center;gap:12px;font:500 11px/1 'Archivo',var(--sans),sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--v8-laurel);padding:15px 22px;border:1px solid rgba(46,58,44,.3);border-radius:var(--v8-radius);transition:background-color .5s,color .5s,gap .6s var(--v8-ease)}
html body .v8-carta-more a:hover{background:var(--v8-laurel);color:var(--v8-bg);gap:18px}

/* Todo lo necesario: todo el texto en un color, los números se destacan */
html body .mr-receive-sheet :is(h3,.mr-receive-row,.mr-receive-row span,.mr-receive-copy){color:var(--v8-ink)!important}
html body .mr-receive-row span:first-child{color:var(--v8-green)!important;font-family:var(--serif)!important}
@media (min-width:760px){html body .mr-receive-row span:first-child{font-size:40px!important}}

/* Tarjeta del plato entera cliqueable (el link de la flecha cubre toda la tarjeta) */
html body .mr-dish{position:relative!important;cursor:pointer}

/* Prueba: "Platos pensados para tu mesa" en serif mayúscula */
html body .mr-carta-title{text-transform:uppercase!important;font-size:34px!important;line-height:1!important;letter-spacing:.01em!important}
@media (min-width:760px){html body .mr-carta-title{font-size:52px!important}}

/* ---------- Menú mobile unificado: sin líneas ni números, serif mayúscula interletrada, Rodrigo a la derecha ---------- */
html body .menu-overlay{background:var(--v8-laurel,#2E3A2C)!important;color:#E5DCCB!important}
html body .menu-inner{padding:24px 28px 34px!important}
html body .menu-inner::before{content:none!important}
html body .menu-wordmark{font-family:var(--serif)!important;font-size:13px!important;line-height:1!important;letter-spacing:.16em!important;text-transform:uppercase!important}
html body .menu-wordmark br{display:none}
html body .menu-nav{display:grid!important;gap:30px!important;margin-top:120px!important;border:0!important}
html body .menu-nav a{display:block!important;padding:0!important;border:0!important;font-family:var(--serif)!important;font-weight:400!important;font-size:24px!important;line-height:1.1!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#E5DCCB!important}
html body .menu-nav a::before{content:none!important}
html body .menu-signature{width:150px!important;margin:auto 0 0 auto!important;align-self:flex-end!important;opacity:.85!important}

/* ---------- Ronda 10 ---------- */
/* Título "La carta" */
html body .mr-carta-title{margin-top:0!important}
/* Precio en las tarjetas */
html body .mr-dish-price{font:500 13px/1 'Archivo',var(--sans),sans-serif;letter-spacing:.06em;margin-right:14px}
html body .mr-dish-bottom{align-items:center}
/* Qué estás comprando */
html body .mr-receive-lead{font:300 16px/1.6 'Archivo',var(--sans),sans-serif!important;color:var(--v8-ink)!important;max-width:560px;margin:-6px 0 34px!important}
@media (min-width:760px){html body .mr-receive-lead{font-size:18px!important;margin:-28px 0 56px!important}}
/* Footer: solo el zócalo verde con links y logo */
.v8-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:44px 7vw calc(44px + env(safe-area-inset-bottom,0px));background:#1F241F;color:#E5DCCB}
.v8-foot a{font-family:var(--serif);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#E5DCCB;opacity:.8;transition:opacity .3s}
.v8-foot a:hover{opacity:1}
.v8-foot a:last-child{text-align:right}
.v8-foot .v8-foot-logo{display:flex;flex-direction:column;align-items:center;opacity:1;font-size:22px;line-height:.92;letter-spacing:.02em}
.v8-foot .v8-foot-logo span:last-child{font-size:1em}
@media (min-width:760px){.v8-foot{padding:56px 7vw}.v8-foot a{font-size:13px}.v8-foot .v8-foot-logo{font-size:28px}}

/* ---------- Zócalo chico: MESA RESERVADA arriba, abajo "La carta · Contacto" ---------- */
.v8-foot{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;padding:26px 24px calc(26px + env(safe-area-inset-bottom,0px))!important;text-align:center}
.v8-foot .v8-foot-logo{order:-1;flex-direction:row!important;gap:.35em;font-size:14px!important;line-height:1!important;letter-spacing:.16em!important;text-transform:uppercase}
.v8-foot .v8-foot-links{display:flex;align-items:center;gap:10px}
.v8-foot .v8-foot-links a{font-size:10px!important;letter-spacing:.16em!important;text-align:center!important}
.v8-foot .v8-foot-links span{opacity:.5;font-size:10px}

/* Zócalo: logo grande en dos líneas, links abajo */
.v8-foot{gap:18px!important;padding:44px 24px calc(40px + env(safe-area-inset-bottom,0px))!important}
.v8-foot .v8-foot-logo{flex-direction:column!important;gap:0!important;font-size:30px!important;line-height:.9!important;letter-spacing:.01em!important}
@media (min-width:760px){.v8-foot .v8-foot-logo{font-size:38px!important}}
@media (max-width:759px){html body .mr-carta-title{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:none!important}}


/* Cruz del menú de celu en color claro (no el azul por defecto) */
html body .menu-close{color:#E5DCCB!important;-webkit-appearance:none;appearance:none}
html body .menu-close::before,html body .menu-close::after{background:#E5DCCB!important}

/* Arranque: la página queda vacía hasta que la animación de entrada está lista, y aparece con fundido */
html.v8-pre{background:#EFE8DA}
html.v8-pre body{opacity:0}
html body{transition:opacity .7s cubic-bezier(.19,1,.22,1)}

/* Entrada de la primera pantalla: todo aparece con un fundido suave y apenas desenfocado, sin desplazarse */
.v8-js .mr-cover-brand .v8-w{overflow:visible!important;padding-bottom:0!important;margin-bottom:0!important}
.v8-js .mr-cover-brand .v8-w>span{transform:none!important;opacity:0;filter:blur(5px);transition:opacity .9s cubic-bezier(.33,1,.68,1),filter .9s cubic-bezier(.33,1,.68,1)!important;transition-delay:var(--d,0s)!important}
.v8-js .mr-cover-brand.is-in .v8-w>span{opacity:1;filter:blur(0)}
.v8-js .v8-hb{opacity:0!important;filter:blur(3px);transform:none!important;transition:none!important}
.v8-js .v8-hb.is-in{opacity:var(--o,1)!important;filter:blur(0);transition:opacity .8s cubic-bezier(.33,1,.68,1),filter .8s cubic-bezier(.33,1,.68,1)!important;transition-delay:var(--d,0s)!important}
@media (prefers-reduced-motion:reduce){.v8-js .mr-cover-brand .v8-w>span,.v8-js .v8-hb{opacity:1!important;filter:none!important}}

/* Tarjetas de la carta: descripción en 2 renglones (la completa está en la página del plato),
   así el texto baja y queda sobre la parte más oscura de la foto, sin agregar velo */
html body .mr-carta .mr-dish .mr-dish-desc{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;max-height:none!important}
@media (min-width:760px){html body .mr-carta .mr-dish .mr-dish-desc{-webkit-line-clamp:2!important}}
html body .mr-dish:not(:has(.mr-dish-media--empty)) .mr-dish-content h3,html body .mr-dish:not(:has(.mr-dish-media--empty)) .mr-dish-desc{text-shadow:0 1px 10px rgba(0,0,0,.28)}

/* Menú del celular: un punto más chico para que "Preguntas frecuentes" entre en una línea */
@media (max-width:759px){html body .menu-nav a{font-size:20px!important;letter-spacing:.09em!important;white-space:nowrap}}
