/* ══════════ LAS LETRAS DEL MANUAL ══════════════════════
Las tres caras van alojadas en el propio sitio, no pedidas a un
tercero: cargan igual sin conexión y no hay una petición externa
en la primera pantalla.
Josefin Sans · la geométrica del manual (páginas 5, 8 y 10)
Short Stack · suplente del rotulado a mano · ver BIBLIOTECA/README
Figtree · texto corrido · el manual no define una
══════════════════════════════════════════════════════════ */
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fuentes/josefin-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fuentes/josefin-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fuentes/josefin-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fuentes/josefin-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Short Stack";font-style:normal;font-weight:400;font-display:swap;src:url("../fuentes/short-stack-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300;font-display:swap;src:url("../fuentes/figtree-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("../fuentes/figtree-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("../fuentes/figtree-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("../fuentes/figtree-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("../fuentes/figtree-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url("../fuentes/figtree-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ══════════════════════════════════════════════════════════
BANQUETES Y COCINAS CONCHITA · Disrupción Social
Tokens muestreados del logotipo. Ningún gris puro.
══════════════════════════════════════════════════════════ */
:root{
/* superficie */
--navy: #27524B; /* verde pino · la tinta del manual */
--navy-deep: #16302B; /* verde profundo */
--navy-mid: #1F4A43;
--crema: #E6E3D2; /* crema hueso del manual */
--rojo: #F3674C; /* coral del manual */
/* jerarquía: crema con alfa, nunca gris */
--c-90: rgba(230,227,210,.90);
--c-70: rgba(230,227,210,.70);
--c-45: rgba(230,227,210,.45);
--c-22: rgba(230,227,210,.22);
--c-10: rgba(230,227,210,.10);
--n-70: rgba(39,82,75,.70);
--n-45: rgba(39,82,75,.45);
--n-14: rgba(39,82,75,.14);
/* tipografía */
--monu: "Josefin Sans", "Futura", "Avenir Next", sans-serif; /* la geométrica del manual (p. 5, 8 y 10) */
--ed: "Short Stack", "Segoe Print", cursive; /* el rotulado del manual · ver deuda */
--ui: "Figtree", system-ui, -apple-system, sans-serif; /* el manual no trae fuente de texto */
/* ── color de comida ──────────────────────────────────
Literales a propósito: un mole es mole sobre crema y sobre navy.
Viven dentro de la ilustración del platillo; nunca en la interfaz. */
--f-tomate:#D64B34; --f-mole:#6B2B20; --f-dorado:#D79A48;
--f-maiz:#EBB559; --f-verde:#6E8F4E; --f-jamaica:#B3304E;
/* ── superficie ───────────────────────────────────────
Por defecto el sitio es oscuro. Las secciones con clase .papel
redefinen estos mismos tokens y todo se voltea solo. */
--papel: var(--navy);
--tinta-0: var(--crema);
--tinta-1: rgba(230,227,210,.90);
--tinta-2: rgba(230,227,210,.70);
--tinta-3: rgba(230,227,210,.45);
--linea-1: rgba(230,227,210,.22);
--linea-2: rgba(230,227,210,.10);
--panel: rgba(230,227,210,.05);
--superficie: rgba(230,227,210,.022);
--superficie-2:rgba(230,227,210,.06);
--tinta-plato: var(--crema);
--ease: cubic-bezier(.23,1,.32,1);
--gut: clamp(20px, 5vw, 84px);
--maxw: 1320px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--navy); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0; background:var(--navy); color:var(--crema);
font-family:var(--ui); font-size:clamp(15px,1.05vw,17px); line-height:1.55;
font-variant-numeric:tabular-nums; overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; }
.vh{ position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--rojo); color:var(--navy); padding:12px 18px; font-weight:700; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; }
/* ── tipografía de registro ───────────────────────────── */
.monu{
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:clamp(2.15rem, 6.8vw, 6.4rem); line-height:.94; letter-spacing:-.008em;
margin:0; text-wrap:balance;
}
.monu.sm{ font-size:clamp(1.68rem, 3.9vw, 3.5rem); letter-spacing:-.004em; }
.ed{
font-family:var(--ed); font-weight:400; font-size:clamp(1.62rem, 3.8vw, 3.4rem);
line-height:1.14; letter-spacing:-.005em; margin:0; text-wrap:balance;
}
.ed em{ font-style:normal; }
.kicker{
font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--tinta-3); margin:0 0 1.6em; font-weight:600;
}
.nota{ font-size:.82rem; color:var(--tinta-3); max-width:58ch; line-height:1.6; }
.hint{ font-size:.82rem; color:var(--tinta-3); margin:.7em 0 0; }
/* deuda de producción, marcada en la propia página */
.verificar{
font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--tinta-3); border:1px dashed var(--linea-1); display:inline-block;
padding:.55em .9em; margin-top:2.4rem; max-width:46ch; line-height:1.5;
}
.mv-venta .verificar{ color:var(--tinta-3); border-color:var(--linea-2); }
/* ── marca anclada ────────────────────────────────────── */
.mark{
position:fixed; top:clamp(10px,1.6vw,20px); left:calc(var(--gut) - 10px); z-index:90;
transition:opacity .3s linear, background-color .35s linear;
display:flex; align-items:center; padding:8px 10px;
background:var(--papel); transition:opacity .45s var(--ease), background-color .35s linear;
opacity:0; pointer-events:none;
}
.mark.on{ opacity:1; }
.mark.on.tapada{ opacity:.14; }
.mark img{ width:clamp(40px,3.6vw,54px); height:auto; }
.mark > img{ display:block; }
.mark .m-pos{ display:none; }
.mark.dark .m-neg{ display:none; }
.mark.dark .m-pos{ display:block; }
.mark.dark{ background:var(--crema); }
.mark span{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.no-js .mark{ opacity:1; }
/* ── navegación ────────────────────────────────────────
Antes el sitio no tenía: sólo la marca anclada, y aparecía al 88 %
de la primera pantalla. Una primera pantalla sin navegación es una
primera pantalla que pierde gente. Ahora está desde el segundo uno. */
.menu{
position:fixed; z-index:92; top:clamp(10px,1.6vw,20px); right:var(--gut);
display:flex; align-items:center; gap:clamp(4px,.9vw,14px);
padding:6px 6px 6px clamp(10px,1.2vw,18px);
background:rgba(22,48,43,.46); border-radius:999px;
backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
box-shadow:inset 0 0 0 1px rgba(230,227,210,.16);
transition:background-color .35s linear, box-shadow .35s linear;
}
.menu a{
text-decoration:none; color:rgba(230,227,210,.86); white-space:nowrap;
font-size:clamp(.72rem,.86vw,.86rem); letter-spacing:.04em;
padding:.62em .85em; border-radius:999px;
transition:color .2s linear, background-color .2s linear;
}
.menu a:hover{ color:var(--crema); background:rgba(230,227,210,.12); }
.menu .menu-cta{
background:var(--rojo); color:var(--navy); font-weight:600;
padding:.68em 1.1em; letter-spacing:.02em;
}
.menu .menu-cta:hover{ background:var(--rojo); color:var(--navy); filter:brightness(1.06); }
/* sobre papel la barra se voltea, igual que la marca */
/* sobre papel —y sobre el muro de fotos— la barra se pone de crema:
es lo único que garantiza que se lea encima de cualquier imagen */
.menu.dark{
background:rgba(238,236,224,.82);
box-shadow:inset 0 0 0 1px rgba(39,82,75,.14);
}
.menu.dark a{ color:rgba(39,82,75,.82); }
.menu.dark a:hover{ color:var(--navy); background:rgba(39,82,75,.07); }
.menu.dark .menu-cta{ color:var(--navy); }
.no-js .menu{ position:absolute; }
/* la barra vive arriba en todos los tamaños: en el teléfono se aprieta,
no se baja. Lo que sobra es el destino menos usado, no la navegación. */
@media (max-width:860px){
.menu{ padding:4px; gap:0; }
.menu a{ font-size:.68rem; padding:.58em .52em; letter-spacing:.02em; }
.menu .menu-cta{ padding:.62em .8em; }
.menu a:not(.menu-cta):nth-child(4){ display:none; }
}
@media (max-width:430px){
.menu a{ font-size:.63rem; padding:.56em .42em; }
.menu .solo-ancho{ display:none; }
}
.solo-ancho{ display:inline; }
/* ── superficie clara: manda el crema, el navy queda de marco ── */
.papel{
--papel: var(--crema);
--tinta-0: var(--navy);
--tinta-1: var(--navy);
--tinta-2: rgba(39,82,75,.74);
--tinta-3: rgba(39,82,75,.50);
--linea-1: rgba(39,82,75,.30);
--linea-2: rgba(39,82,75,.13);
--panel: #DCD8C4;
--superficie: rgba(39,82,75,.025);
--superficie-2:rgba(39,82,75,.06);
--tinta-plato: #F2F0E4;
background-color:var(--crema); color:var(--navy);
/* trama de mantel: dos tramas de un píxel cruzadas, casi invisibles */
background-image:
repeating-linear-gradient(90deg, rgba(39,82,75,.020) 0 1px, transparent 1px 4px),
repeating-linear-gradient(0deg, rgba(39,82,75,.020) 0 1px, transparent 1px 4px);
}
/* ── estructura de movimientos ────────────────────────── */
.mv{ position:relative; }
.js .mv[data-scroll-length]{ height:var(--len,200vh); }
.js .mv[data-scroll-length] > .pin{
position:sticky; top:0; height:100svh; overflow:hidden;
display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.no-js .mv > .pin{ padding:12vh var(--gut); }
/* ══════════ I · EL PRIMER CUBIERTO ══════════ */
.mv-apertura > .pin{ background:var(--papel); }
/* ── la apertura: el icono camina y se vuelve logotipo ──
El icono entra caminando desde la izquierda. Cuando llega a su sitio,
el logotipo se abre desde el centro: la B y la C crecen por detrás de
él. Las coordenadas salen de la página 2 del manual a 600 dpi, así
que el icono y el chef del logotipo ocupan el mismo pixel y el
relevo entre los dos es invisible. */
.ap-logo{
position:absolute; left:50%; top:46%;
width:min(38vh,46vw); aspect-ratio:328/315;
transform:translate(-50%,-52%);
}
.ap-mono{
display:block; width:100%; height:auto;
opacity:var(--mo,1); transform:translateY(var(--my,0));
clip-path:inset(0 var(--tapa,0%) 0 var(--tapa,0%));
}
/* el icono, dentro del mismo lienzo que el logotipo */
.ap-ico{
position:absolute; left:27.41%; top:-1.18%; width:44.42%; aspect-ratio:470/900;
transform:translateX(var(--andar,0));
opacity:var(--io,1);
}
.ap-ico img{ position:absolute; display:block; height:auto; }
.ico-cuerpo{ left:6.596%; top:3.556%; width:81.702%; }
.ico-pata-i{ left:19.574%; top:86.222%; width:24.043%; transform-origin:88% 6%; }
.ico-pata-d{ left:69.149%; top:87.333%; width:26.809%; transform-origin:8% 10%; }
/* el paso no corre con un reloj: corre con el trayecto. Así el pie
nunca patina sobre el suelo, que es lo que delata una caminata falsa. */
.ap-ico .ico-pata-i,.ap-ico .ico-pata-d,.ap-ico .ico-cuerpo{ will-change:transform; }
.js .ap-mono,.js .ap-ico{ will-change:transform,opacity,clip-path; }
/* el bloque que resuelve la primera pantalla: etiqueta, título,
bajada y llamada. Entra cuando el logotipo ya se retiró. */
.ap-texto{
position:absolute; left:50%; top:var(--apy,48%); transform:translate(-50%,-50%);
width:min(760px,86vw); text-align:center; z-index:3;
opacity:var(--to,0); pointer-events:none;
}
.ap-texto.viva{ pointer-events:auto; }
.ap-tit{ color:var(--crema); font-size:clamp(1.9rem,4.4vw,3.7rem); line-height:1.04; max-width:16ch; margin-inline:auto; }
.ap-bajada{
margin:1.3em auto 0; max-width:52ch; font-size:clamp(.92rem,1.1vw,1.08rem);
line-height:1.6; color:var(--tinta-2);
}
.ap-cta{ display:flex; gap:clamp(10px,1.4vw,18px); justify-content:center; flex-wrap:wrap; }
.ap-cta .cta{ align-self:center; margin-top:clamp(22px,3.2vh,40px); }
.ap-cta .cta-linea{ box-shadow:inset 0 0 0 2px var(--crema)!important; color:var(--crema); }
@media (max-width:760px){
.ap-texto{ --apy:46%; }
.ap-cta{ flex-direction:column; align-items:stretch; }
.ap-cta .cta{ text-align:center; }
}
.tablelinea{
position:absolute; left:0; bottom:var(--mesa,13vh); width:100%; height:40px; pointer-events:none;
}
.tablelinea .tl{ stroke:var(--crema); stroke-width:2; }
.js .tablelinea .tl{ stroke-dasharray:100; stroke-dashoffset:100; }
.cubiertos{ position:absolute; left:0; bottom:var(--mesa,13vh); width:100%; height:120px; }
.cub{
position:absolute; bottom:0; width:clamp(26px,2.4vw,38px); height:clamp(84px,7.6vw,120px); fill:var(--crema);
}
.cub-a{ left:calc(50% - 190px); margin-left:-13px; }
.cub-b{ left:calc(50% + 164px); margin-left:-13px; }
.js .cub{ clip-path:inset(100% 0 0 0); }
/* ══════════ III · EL CHEF TE HABLA ═══════════════════════
Marioneta de recorte con las piezas del propio manual.
Las coordenadas son medidas sobre la página 4 a 300 dpi,
normalizadas contra un lienzo de 930 × 1270. No se estiman. */
.mv-chef{
--papel:var(--rojo);
--tinta-0:#16302B; --tinta-1:#16302B;
--tinta-2:rgba(22,48,43,.82); --tinta-3:rgba(22,48,43,.58);
--linea-1:rgba(22,48,43,.34); --linea-2:rgba(22,48,43,.16);
color:#16302B;
}
.mv-chef > .pin{ background:var(--rojo); }
.chef-grid{
width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
gap:clamp(16px,3.4vw,64px); align-items:center;
}
/* ── la escena ───────────────────────────────────────── */
.chef-escena{
position:relative; width:100%; max-width:min(52vh,520px);
margin-inline:auto; aspect-ratio:93/127;
}
.ovalo{
position:absolute; z-index:1; left:50%; top:55%; width:112%; height:82%;
transform:translate(-50%,-50%) scale(var(--ov,1));
border-radius:50%; background:rgba(22,48,43,.08);
box-shadow:inset 0 0 0 clamp(3px,.45vw,6px) #16302B;
}
.ovalo::after{
content:""; position:absolute; inset:clamp(7px,1.1vw,14px);
border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(22,48,43,.34);
}
.marioneta{
position:absolute; z-index:2; inset:0; transform:translateY(var(--sube,0));
/* el dibujo del manual se corta al pie de su propia página: en vez de
rematar en filo recto, se desvanece en el coral */
-webkit-mask-image:linear-gradient(180deg,#000 0 93%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0 93%,transparent 100%);
}
.pz{ position:absolute; display:block; height:auto; }
.pz-brazo { left:3.2796%; top:24.4882%; width:34.9462%;
transform-origin:95.2% 70%; transform:rotate(var(--rb,0deg)); }
.pz-cabeza{ left:38.6022%; top:4.0551%; width:48.4946%;
transform-origin:30.2% 100.5%;
transform:rotate(var(--rc,0deg)) translateY(var(--tc,0)); }
.pz-cabeza > img.cara{ display:block; width:100%; height:auto; }
.pz-cuerpo{ left:13.0108%; top:41.4173%; width:86.9892%;
transform-origin:50% 100%; transform:scaleY(var(--resp,1)); }
/* la boca real del manual, montada encima de sí misma: en reposo calza
exacto, y al hablar sólo crece hacia abajo. Nunca descubre el dibujo. */
.boca{
position:absolute; left:23.61%; top:81.27%; width:21.18%; height:auto;
transform-origin:50% 0; transform:scaleY(var(--hb,1));
}
/* el parpadeo: un óvalo del mismo crema de la cara, con su línea de pestaña */
.parpado{
position:absolute; left:15.30%; top:58.42%; width:15.30%; height:12.73%;
background:#E6E3D2; border-radius:50%;
transform-origin:50% 0; transform:scaleY(var(--pp,0));
}
.parpado::after{
content:""; position:absolute; left:6%; right:6%; bottom:-1px; height:0;
border-bottom:2.5px solid #27524B; border-radius:50%;
}
/* ── el rotulado del manual, como lo que va diciendo ──── */
.dicho{
position:absolute; z-index:3; height:auto; opacity:0;
transform:translateY(16px) rotate(var(--gi,0deg)) scale(.86);
transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.dicho.on{ opacity:1; transform:translateY(0) rotate(var(--gf,0deg)) scale(1); }
.dicho-a{ left:-7%; top:1%; width:35%; --gi:4deg; --gf:-8deg; }
/* ── lo que dice ─────────────────────────────────────── */
.chef-titulo{ margin:.14em 0 clamp(16px,2.8vh,32px); }
.chef-titulo em{
display:block; font-style:normal; text-transform:none;
font-family:var(--ed); font-weight:400; font-size:1.1em; letter-spacing:0;
}
.parlamento{
list-style:none; margin:0; padding:0; position:relative;
min-height:clamp(118px,16vh,164px);
}
.parlamento li{
position:absolute; left:0; top:0; width:100%; max-width:26ch;
font-family:var(--ed); font-weight:400; line-height:1.3;
font-size:clamp(1.1rem,1.75vw,1.62rem); color:var(--tinta-0);
opacity:0; transform:translateY(16px);
transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.parlamento li.on{ opacity:1; transform:none; }
.chef-cta{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px); }
.mv-chef .cta{ margin-top:clamp(18px,2.6vh,34px); background:#16302B; color:var(--crema); }
.mv-chef .cta-linea{ box-shadow:inset 0 0 0 2px #16302B!important; color:#16302B; }
@media (max-width:860px){
.chef-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(10px,3vh,26px); }
.chef-escena{ max-width:min(34vh,300px); }
.parlamento{ min-height:clamp(104px,15vh,150px); }
.dicho-a{ top:17%; left:-5%; width:33%; }
}
.numwrap{ display:inline-block; position:relative; }
.num{
font-family:var(--monu); font-weight:700; letter-spacing:0; font-size:1em; line-height:.86;
color:var(--rojo); background:none; border:0; border-bottom:.06em solid var(--rojo);
width:3.6ch; text-align:center; padding:0; margin:0 .06em;
-moz-appearance:textfield; appearance:textfield;
transition:color .2s linear;
}
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.num:focus{ outline:none; background:rgba(243,103,76,.10); }
.mesa-fila{
margin:clamp(28px,5vh,64px) 0 clamp(24px,4vh,48px);
border-top:1px solid var(--linea-1); padding-top:18px;
}
.cubiertos-fila{ display:flex; gap:12px; align-items:flex-end; min-height:64px; flex-wrap:nowrap; }
.cubiertos-fila svg{ width:18px; height:58px; fill:var(--tinta-2); flex:0 0 auto; }
.js .cubiertos-fila svg{ clip-path:inset(100% 0 0 0); transition:clip-path .34s var(--ease); }
.cubiertos-fila svg.on{ clip-path:inset(0 0 0 0); }
.cubiertos-fila .mas{
font-family:var(--monu); font-weight:700; letter-spacing:.012em; font-size:1.5rem; color:var(--tinta-3);
align-self:center; margin-left:8px; white-space:nowrap;
}
.derivados{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,40px); margin:0 0 1.6rem; }
.derivados > div{ border-top:1px solid var(--linea-1); padding-top:12px; }
.derivados dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.5em; }
.derivados dd{ font-family:var(--monu); font-weight:700; letter-spacing:-.005em; font-size:clamp(1.6rem,2.8vw,2.6rem); line-height:.9; margin:0; color:var(--tinta-1); }
.mascota{ position:absolute; pointer-events:none; }
.mascota-ii{ right:var(--gut); bottom:6vh; width:clamp(92px,12vw,180px); opacity:.95; }
/* ══════════ V · UNA SOLA CONTRATACIÓN (único fondo crema) ══════════ */
.claro{ max-width:var(--maxw); margin:0 auto; padding:clamp(72px,14vh,180px) var(--gut); position:relative; }
.mv-venta .ed{ max-width:20ch; }
.mascota-iii{ position:absolute; right:var(--gut); top:clamp(60px,10vh,140px); width:clamp(90px,10vw,150px); opacity:.14; }
/* ══════════ IV · LA CARTA ══════════ */
.mv-carta > .pin{ background:var(--papel); }
.js .mv-carta[data-scroll-length] > .pin{ justify-content:flex-start; }
.js .mv-mesa[data-scroll-length] > .pin{ justify-content:center; }
.rail-head{
width:100%; padding:clamp(88px,13vh,138px) var(--gut) 0; position:relative; flex:0 0 auto;
display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,3vw,56px);
}
.rail-head .monu{ font-size:clamp(1.3rem,2.5vw,2.3rem); max-width:24ch; flex:1 1 auto; }
.rail-hint{ font-size:.78rem; color:var(--tinta-3); margin:0; max-width:30ch; text-align:right; line-height:1.5; }
.mascota-iv{ position:static; width:clamp(60px,6vw,92px); opacity:.55; flex:0 0 auto; }
.rail{ display:flex; align-items:flex-start; gap:clamp(40px,6vw,120px); padding:clamp(18px,3vh,40px) var(--gut) 0; flex:1 1 auto; min-height:0; }
.js .rail{ flex-wrap:nowrap; will-change:transform; align-self:stretch; }
.no-js .rail{ flex-wrap:wrap; }
.platos{ list-style:none; margin:0; padding:0; }
.platos li{ border-bottom:1px solid var(--linea-2); }
.platos button.quitado{ text-decoration:line-through; text-decoration-color:var(--linea-1); }
/* Los velos de los cantos van en el marco fijo, no en el carril.
Sobre el carril la máscara se calcula contra su ancho total (más de
4000 px): al final del recorrido el degradado caía encima de las
últimas columnas y la carta se desvanecía sola. Aquí el fondo siempre
es var(--papel), así que un velo de color hace el trabajo sin ese error. */
.js .mv-carta > .pin::before,
.js .mv-carta > .pin::after{
content:""; position:absolute; top:0; bottom:0; z-index:3;
width:clamp(22px,4.5vw,84px); pointer-events:none;
}
.js .mv-carta > .pin::before{ left:0; background:linear-gradient(90deg, var(--papel) 0, transparent 100%); }
.js .mv-carta > .pin::after { right:0; background:linear-gradient(270deg, var(--papel) 0, transparent 100%); }
.rail-progress{ z-index:4; position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(18px,3vh,30px); height:1px; background:var(--linea-2); }
.rail-progress i{ display:block; height:100%; width:0; background:var(--rojo); }
/* ══════════ V · TU COMANDA ══════════ */
.mv-comanda{ max-width:var(--maxw); margin:0 auto; padding:clamp(84px,16vh,190px) var(--gut) clamp(60px,10vh,120px); }
.mv-comanda > .monu{ max-width:19ch; font-size:clamp(2rem,4.6vw,4.2rem); margin-bottom:clamp(46px,8vh,96px); }
.preguntas{ display:flex; flex-direction:column; gap:clamp(48px,9vh,120px); }
.q{ border:0; margin:0; padding:0; max-width:900px; }
.q legend{
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:clamp(1.5rem,3.4vw,3rem); line-height:.9; padding:0; margin-bottom:1.4rem;
color:var(--tinta-1);
}
.js .q{ opacity:0; transform:translateY(20px); }
.q.on{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
.ops input{ position:absolute; opacity:0; width:1px; height:1px; }
.ops span::after{
content:""; position:absolute; right:2px; top:50%; width:13px; height:9px;
border-left:2px solid var(--rojo); border-bottom:2px solid var(--rojo);
transform:translateY(-70%) rotate(-45deg) scale(.6); opacity:0;
transition:opacity .2s linear, transform .2s var(--ease);
}
.ops label:hover span{ color:var(--tinta-0); }
.ops input:checked + span{ color:var(--tinta-0); }
.ops input:checked + span::after{ opacity:1; transform:translateY(-70%) rotate(-45deg) scale(1); }
.ops input:focus-visible + span{ outline:2px solid var(--rojo); outline-offset:2px; }
.campos{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,48px); align-items:flex-end; }
.campo{ display:block; flex:1 1 260px; }
.campo > span{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.7em; }
.campo input,.campo textarea{
width:100%; background:none; border:0; border-bottom:1px solid var(--linea-1);
padding:.5em 0; color:var(--tinta-0); font-size:1.05rem; border-radius:0;
}
.campo textarea{ resize:vertical; line-height:1.5; font-size:1rem; }
.campo input:focus,.campo textarea:focus{ outline:none; border-bottom-color:var(--rojo); }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--linea-1); }
.q .campo{ margin-top:1.8rem; }
.q .campos .campo{ margin-top:0; }
.externo{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,48px); }
.externo .campo{ margin-top:0; }
.check{ display:inline-block; position:relative; margin-top:1.6rem; }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check span{ color:var(--tinta-2); cursor:pointer; position:relative; }
.check span::after{ content:""; position:absolute; right:2px; top:50%; width:13px; height:9px; border-left:2px solid var(--rojo); border-bottom:2px solid var(--rojo); transform:translateY(-70%) rotate(-45deg) scale(.6); opacity:0; transition:opacity .2s linear, transform .2s var(--ease); }
.check input:checked + span{ color:var(--tinta-0); }
.check input:checked + span::after{ opacity:1; transform:translateY(-70%) rotate(-45deg) scale(1); }
.resumen-tiempos ul{ list-style:none; margin:0; padding:0; }
.resumen-tiempos li{ border-bottom:1px solid var(--linea-2); padding:.6em 0; display:flex; justify-content:space-between; gap:20px; }
.resumen-tiempos li b{ font-weight:500; color:var(--tinta-0); }
.resumen-tiempos li span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); white-space:nowrap; align-self:center; }
.resumen-tiempos .vacio{ color:var(--tinta-3); margin:0; }
.resumen-tiempos a{ color:var(--rojo); text-underline-offset:3px; }
/* ══════════ PIE ══════════ */
.pie{ background:var(--navy-deep); padding:clamp(48px,8vh,90px) var(--gut); text-align:center; border-top:1px solid var(--linea-2); }
.pie img{ width:120px; height:auto; margin:0 auto 22px; opacity:.85; }
.pie p{ margin:.4em 0; font-size:.82rem; color:var(--tinta-3); }
.pie .cred{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--linea-1); margin-top:1.6em; }
/* ══════════ LA COMANDA ══════════ */
/* La comanda no está desde el principio: aparece cuando el cliente arma su
menú, y sólo de la carta hacia abajo. Arriba el sitio se queda limpio. */
.ticket{
position:fixed; z-index:100; right:0; top:0; height:100svh; width:min(370px,88vw);
display:flex; flex-direction:column; pointer-events:none;
transform:translateX(100%); opacity:0; visibility:hidden;
transition:transform .6s var(--ease), opacity .4s linear, visibility 0s linear .4s;
}
.ticket.on{ opacity:1; visibility:visible; transition-delay:0s, 0s, 0s; }
.ticket.on.abierta{ transform:none; }
/* la pestaña se escribe en vertical en lugar de rotarse: rotar con
transform-origin la sacaba de la pantalla en escritorio */
.ticket-tab{
position:absolute; right:100%; top:calc(50% - 110px);
writing-mode:vertical-rl; transform:rotate(180deg);
background:var(--rojo); color:var(--navy); padding:1.15em .6em; font-weight:700;
font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
pointer-events:auto; display:flex; gap:.9em; align-items:center;
}
.ticket-tab b{ font-variant-numeric:tabular-nums; }
.ticket-body{
--tinta-0:var(--navy); --tinta-1:var(--navy);
--tinta-2:rgba(39,82,75,.74); --tinta-3:rgba(39,82,75,.5);
--linea-1:rgba(39,82,75,.3); --linea-2:rgba(39,82,75,.13);
--tinta-plato:var(--navy);
pointer-events:auto; transition:box-shadow .4s var(--ease); background:var(--crema); color:var(--navy);
height:100%; overflow-y:auto; padding:26px 24px 24px;
box-shadow:-14px 0 0 rgba(22,48,43,.35);
display:flex; flex-direction:column;
}
.ticket-head{ display:flex; gap:12px; align-items:center; border-bottom:2px dashed var(--linea-2); padding-bottom:14px; }
.ticket-head img{ width:62px; height:auto; filter:none; }
.ticket-head strong{ display:block; font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; font-size:1rem; line-height:1; }
.ticket-head span{ font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); }
.ticket-lines{ flex:1 1 auto; padding:16px 0; font-size:.86rem; }
.tl-row{ display:flex; justify-content:space-between; gap:12px; padding:.42em 0; border-bottom:1px dotted var(--linea-2); }
.tl-row dt{ color:var(--tinta-3); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; padding-top:.25em; }
.tl-row dd{ margin:0; text-align:right; font-weight:500; line-height:1.4; }
.js .tl-row{ clip-path:inset(0 100% 0 0); }
.tl-row.printed{ clip-path:inset(0 0 0 0); transition:clip-path .18s linear; }
.tl-group{ margin-top:14px; }
.tl-group > p{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rojo); margin:0 0 .3em; }
.ticket-note{ font-size:.7rem; color:var(--tinta-3); border-top:2px dashed var(--linea-2); padding-top:12px; margin:0 0 14px; line-height:1.5; }
.enviar{
background:var(--rojo); color:var(--navy); font-family:var(--monu); font-weight:700; letter-spacing:.012em;
text-transform:uppercase; font-size:1.35rem; letter-spacing:.02em; padding:.6em 1em; width:100%;
transition:transform .18s var(--ease);
}
.enviar:hover{ transform:translateY(-2px); }
.mail{ display:block; text-align:center; font-size:.72rem; color:var(--tinta-3); margin-top:10px; }
.no-js .ticket{
position:static; width:auto; height:auto; transform:none;
opacity:1; visibility:visible; pointer-events:auto;
}
.no-js .ticket-tab{ display:none; }
/* ══════════ RESPONSIVO ══════════ */
@media (max-width:1080px){
.derivados{ grid-template-columns:repeat(2,1fr); row-gap:22px; }
.tres{ grid-template-columns:1fr; gap:34px; }
.cif{ font-size:clamp(3.4rem,16vw,6rem); }
.mascota-iii{ display:none; }
}
@media (max-width:760px){
.ap-logo{ width:62vw; }
.tablelinea,.cubiertos{ --mesa:9vh; }
.cub{ width:22px; height:70px; }
.mascota-ii{ width:60px; bottom:9vh; opacity:.7; }
/* la comanda vive como barra inferior */
.ticket{
top:auto; bottom:0; right:0; left:0; width:100%; height:auto;
max-height:82svh; transform:translateY(100%);
}
.ticket.on{ transform:translateY(calc(100% - 46px)); }
.ticket.on.abierta{ transform:translateY(0); }
.ticket-tab{
position:static; transform:none; width:100%; justify-content:space-between;
writing-mode:horizontal-tb; padding:.9em var(--gut); font-size:.7rem;
}
.ticket-body{
max-height:calc(82svh - 46px); box-shadow:0 -14px 0 rgba(22,48,43,.35);
padding:20px var(--gut) 24px;
}
}
/* ── carta: densidad por tiempo ───────────────────────── */
@media (max-width:760px){
.js .mv-carta[data-scroll-length]{ height:auto!important; }
.js .mv-carta[data-scroll-length] > .pin{ position:static; height:auto; overflow:visible; display:block; }
.js .rail,.rail{ flex-wrap:wrap; gap:clamp(40px,7vh,64px); transform:none!important; padding-bottom:14vh; will-change:auto; }
.tiempo,.tiempo[data-cat="primer"],.tiempo[data-cat="infantil"]{ width:100%; }
.rail-progress{ display:none; }
.js .mv-carta > .pin::before,.js .mv-carta > .pin::after{ display:none; }
.mascota-iv{ width:46px; }
.rail-head{ padding-top:14vh; flex-direction:column; align-items:flex-start; gap:14px; }
.rail-hint{ text-align:left; }
}
/* ══════════════════════════════════════════════════════════
AÑADIDOS v2 · mesa cenital, ilustración de platillos y venta
══════════════════════════════════════════════════════════ */
/* ── botón de acción ──────────────────────────────────── */
.cta{
display:inline-block; margin-top:clamp(28px,4vh,52px);
align-self:flex-start; background:var(--rojo); color:var(--navy);
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:clamp(1.05rem,1.7vw,1.5rem); letter-spacing:.02em; line-height:1;
padding:.62em 1.3em; text-decoration:none;
transition:transform .2s var(--ease);
}
.cta:hover{ transform:translateY(-2px); }
/* ── I · texto del hero ───────────────────────────────── */
/* ── II · LA MESA CENITAL ─────────────────────────────── */
.mv-mesa > .pin{ background:var(--papel); }
.mesa{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:min(880px, 74%); height:auto;
--linea:var(--tinta-3); --hueco:var(--superficie-2); --tenue:var(--linea-1);
}
/* sobre papel la loza necesita más filo: un plato blanco sobre mantel blanco
no se ve, y el platillo servido encima menos */
.papel .mesa{ --linea:rgba(39,82,75,.55); --hueco:rgba(39,82,75,.06); --tenue:rgba(39,82,75,.24); }
.papel .mesa .mantel{ fill:rgba(39,82,75,.035); stroke:rgba(39,82,75,.22); }
.papel .mesa .camino{ fill:rgba(39,82,75,.05); }
.papel .mesa .centro circle{ stroke:rgba(39,82,75,.3); }
.mesa .mantel{ fill:var(--superficie); stroke:var(--linea-1); stroke-width:2; }
.mesa .camino{ fill:var(--superficie-2); }
.mesa .centro circle{ fill:none; stroke:var(--linea-1); stroke-width:2; }
.js .lu{ opacity:0; }
.js .mesa .mantel,.js .mesa .camino,.js .mesa .centro{ opacity:0; }
.js .servido,.js .bebida{ opacity:0; }
.plato-nombre{
position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(48px,9vh,104px);
text-align:center; margin:0; opacity:0; padding:0; width:min(640px,82%);
}
.plato-nombre b{
display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--rojo); font-weight:600; margin-bottom:.7em;
}
.plato-nombre span{
font-family:var(--monu); font-weight:700; letter-spacing:.02em; text-transform:uppercase;
font-size:clamp(1.05rem,2vw,1.9rem); line-height:1.08; color:var(--tinta-1);
}
.mesa-txt{
position:absolute; left:var(--gut); top:clamp(68px,10vh,108px);
max-width:min(34ch,42vw); opacity:0;
}
.mesa-txt .monu{ font-size:clamp(1.5rem,2.7vw,2.5rem); max-width:13ch; }
.mesa-txt p{ font-size:.86rem; color:var(--tinta-3); margin:1em 0 0; line-height:1.6; }
/* ── ilustración de platillos ─────────────────────────── */
/* el ticket también muestra el platillo */
.tl-row .ic-tk{ width:26px; height:24px; flex:0 0 auto; margin-left:8px;
--tinta:var(--navy); --fondo:var(--crema); }
.tl-row dd{ display:flex; align-items:center; justify-content:flex-end; gap:2px; }
/* ── V · UNA SOLA CONTRATACIÓN ────────────────────────── */
.mv-venta .ed{ max-width:22ch; }
.mv-venta .ed em{ color:var(--rojo); }
.incluye{
display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:0 clamp(24px,3vw,56px); margin:clamp(48px,8vh,100px) 0 0;
}
.incluye > div{ border-top:1px solid var(--linea-2); padding:1.1em 0 1.4em; }
.js .incluye > div{ opacity:0; transform:translateY(16px); }
.incluye > div.on{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.incluye dt{
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:1.35rem; line-height:1; color:var(--tinta-1); margin-bottom:.55em;
}
.incluye dd{ margin:0; color:var(--tinta-2); font-size:.92rem; line-height:1.5; }
.incluye-nota{ font-size:.82rem; color:var(--tinta-3); max-width:56ch; margin:2.4rem 0 0; line-height:1.6; }
.espacios{ margin-top:clamp(48px,8vh,96px); border-top:1px solid var(--linea-2); padding-top:1.6rem; }
.espacios h3{
font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--tinta-3); font-weight:600; margin:0 0 1.4rem;
}
.espacios .tira{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:clamp(12px,1.4vw,22px); }
/* ── responsivo v2 ────────────────────────────────────── */
@media (max-width:1080px){
.incluye{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
.cta{ font-size:1.05rem; }
.mesa{ width:158%; transform:translate(-50%,-54%); }
.mv-mesa > .pin{ overflow:hidden; } /* la mesa se sale a propósito: aquí se recorta */
.mesa-txt{ position:static; max-width:none; padding:0 var(--gut); margin-top:auto; margin-bottom:13vh; }
.mesa-txt .monu{ max-width:none; }
.plato-nombre{ bottom:12vh; width:88%; }
.incluye{ grid-template-columns:1fr; }
}
/* resumen de tiempos con su ilustración */
.resumen-tiempos li{ align-items:center; }
.resumen-tiempos .ic-rs{ width:34px; height:31px; flex:0 0 auto; margin-right:10px;
--tinta:var(--tinta-plato); --fondo:var(--navy); }
.resumen-tiempos li b{ flex:1 1 auto; }
.platos button.quitado .tx{ text-decoration:line-through; text-decoration-color:var(--linea-1); }
/* ══════════════════════════════════════════════════════════
v3 · el platillo como imagen, y los bloques de texto como placas
══════════════════════════════════════════════════════════ */
/* ── medallón: el platillo servido en su plato ────────── */
.med{
--tinta:var(--tinta-plato); --fondo:var(--navy);
--d:56px;
position:relative; display:grid; place-items:center; flex:0 0 auto;
width:var(--d); height:var(--d); border-radius:50%;
background:var(--superficie);
box-shadow:inset 0 0 0 1px var(--linea-2);
transition:background-color .22s linear, box-shadow .22s linear, transform .3s var(--ease);
}
.med svg{ width:72%; height:auto; display:block; }
.med-xl{
--d:clamp(132px,13.5vw,196px); --tinta:var(--tinta-plato);
background:var(--superficie-2); box-shadow:inset 0 0 0 1px var(--linea-1);
}
.med-xl svg{ width:70%; }
/* ── carril: columnas de la carta ─────────────────────── */
.tiempo{ flex:0 0 auto; width:min(430px,86vw); display:flex; flex-direction:column; min-height:0; }
.tiempo[data-ancho="2"]{ width:min(720px,88vw); }
.tiempo-head{
display:flex; align-items:center; gap:clamp(16px,1.8vw,28px);
padding-bottom:clamp(14px,2vh,22px); margin-bottom:clamp(14px,2vh,22px);
border-bottom:1px solid var(--linea-1); flex:0 0 auto;
}
.tiempo-meta{ min-width:0; }
.eyebrow{
font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--tinta-3); font-weight:600; margin:0 0 .7em;
transition:color .25s linear;
}
.tiempo h3{
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:clamp(1.5rem,2.7vw,2.5rem); line-height:.9; margin:0; color:var(--tinta-1);
transition:color .25s linear;
}
.tiempo.activo h3{ color:var(--tinta-0); }
.tiempo.activo .med-xl{ box-shadow:inset 0 0 0 1px var(--tinta-3); }
/* vitrina con platillo real: el mismo óvalo, con fotografía dentro */
.med-xl.foto{ background:var(--superficie-2); box-shadow:none; overflow:hidden; }
.med-xl.foto img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.med-xl.foto::after{
content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
box-shadow:inset 0 0 0 1px var(--linea-1);
transition:box-shadow .22s linear;
}
.tiempo.activo .med-xl.foto::after{ box-shadow:inset 0 0 0 1px var(--tinta-3); }
.vitrina-cap{ margin:1em 0 0; min-height:2.6em; }
.vitrina-cap b{ display:block; font-weight:500; font-size:.92rem; color:var(--tinta-2); line-height:1.3; }
.vitrina-cap em{ display:block; font-style:normal; font-size:.74rem; color:var(--tinta-3); margin-top:.25em; line-height:1.4; }
/* ── filas de platillo ────────────────────────────────── */
.platos{ list-style:none; margin:0; padding:0; }
.platos[data-cols="2"]{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(20px,2.2vw,44px); align-content:start; }
.platos li{ border-bottom:1px solid var(--linea-2); }
.platos button{
display:flex; align-items:center; gap:clamp(11px,1.1vw,16px); width:100%;
text-align:left; padding:.5em 1.9em .5em .1em; position:relative;
}
.platos .tx{ flex:1 1 auto; min-width:0; }
.platos .tx b{
display:block; font-weight:500; font-size:.92rem; line-height:1.25;
color:var(--tinta-2); transition:color .2s linear;
}
.platos .tx em{
display:block; font-style:normal; font-size:.72rem; color:var(--tinta-3);
margin-top:.22em; line-height:1.35;
}
.platos button::after{
content:""; position:absolute; right:2px; top:50%; width:13px; height:9px;
border-left:2px solid var(--rojo); border-bottom:2px solid var(--rojo);
transform:translateY(-70%) rotate(-45deg) scale(.6); opacity:0;
transition:opacity .22s linear, transform .22s var(--ease);
}
.platos button:hover .med,
.platos button:focus-visible .med{
--tinta:var(--tinta-1); background:var(--superficie-2); box-shadow:inset 0 0 0 1px var(--linea-1);
}
.platos button:hover .tx b{ color:var(--tinta-0); }
.platos button[aria-pressed="true"] .med{
--tinta:var(--tinta-plato);
background:rgba(243,103,76,.13); box-shadow:inset 0 0 0 1px var(--rojo);
}
.platos button[aria-pressed="true"] .tx b{ color:var(--tinta-0); }
.platos button[aria-pressed="true"]::after{ opacity:1; transform:translateY(-70%) rotate(-45deg) scale(1); }
.platos button.quitado .tx b{ text-decoration:line-through; text-decoration-color:var(--linea-1); }
/* ══════════ PLACAS · los bloques de texto ══════════
Superficie mínima, filo de un píxel y aire. El realce se gana:
una placa inerte se queda en su alfa más baja. */
.derivados > div{
border:1px solid var(--linea-2); border-top-color:var(--linea-1);
background:var(--superficie);
padding:clamp(15px,1.5vw,22px) clamp(15px,1.5vw,22px) clamp(17px,1.7vw,24px);
transition:background-color .3s linear, border-color .3s linear;
}
.derivados > div:hover{ background:var(--superficie-2); border-color:var(--linea-1); }
.derivados{ gap:clamp(10px,1vw,16px); }
.derivados dt{ margin-bottom:.9em; }
.incluye{ gap:clamp(10px,1vw,16px); }
.incluye > div{
border:1px solid var(--linea-2); background:var(--superficie);
padding:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,24px) clamp(18px,1.8vw,26px);
transition:background-color .3s linear, border-color .3s linear;
}
.incluye > div:hover{ background:var(--superficie-2); border-color:var(--tinta-3); }
.incluye dt{ margin-bottom:.7em; }
/* opciones del cuestionario: fichas, no renglones */
.ops{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.ops.inline{ grid-template-columns:repeat(auto-fit,minmax(130px,160px)); }
.ops label{ position:relative; display:block; min-width:0; border-bottom:0; }
.ops span{
display:block; padding:.85em 2.4em .85em 1em; color:var(--tinta-2); cursor:pointer;
border:1px solid var(--linea-2); background:var(--superficie); line-height:1.3;
transition:color .2s linear, border-color .2s linear, background-color .2s linear;
}
.ops span::after{ right:1em; }
.ops label:hover span{ color:var(--tinta-0); border-color:var(--linea-1); background:var(--superficie-2); }
.ops input:checked + span{
color:var(--tinta-0); border-color:var(--rojo); background:rgba(243,103,76,.12);
}
.check span{
display:inline-block; padding:.85em 2.4em .85em 1em; border:1px solid var(--linea-2);
background:var(--superficie); transition:color .2s linear, border-color .2s linear, background-color .2s linear;
}
.check span::after{ right:1em; }
.check:hover span{ border-color:var(--linea-1); background:var(--superficie-2); }
.check input:checked + span{ border-color:var(--rojo); background:rgba(243,103,76,.1); }
/* el resumen de tiempos también es placa */
.resumen-tiempos ul{ display:grid; gap:10px; }
.resumen-tiempos li{
border:1px solid var(--linea-2); border-bottom:1px solid var(--linea-2);
background:var(--superficie); padding:.75em 1em;
}
@media (max-width:760px){
.tiempo,.tiempo[data-ancho="2"]{ width:100%; }
.platos[data-cols="2"]{ grid-template-columns:1fr; }
.med{ --d:48px; }
.med-xl{ --d:110px; }
.tiempo-head{ gap:16px; }
.ops{ grid-template-columns:1fr; }
.ops.inline{ grid-template-columns:repeat(3,1fr); }
.ops.inline span{ padding:.85em .6em; text-align:center; }
.ops.inline span::after{ display:none; }
}
.guarnicion{
font-size:.74rem; color:var(--tinta-3); line-height:1.5; margin:1.2em 0 0;
max-width:52ch; border-top:1px solid var(--linea-2); padding-top:1em;
}
.q .ops.inline{ margin-top:1.4rem; }
.cta-conteo{ margin-top:clamp(24px,3.4vh,44px); }
/* ── la mesa servida ──────────────────────────────────── */
.servido{ --tinta:var(--tinta-plato); --fondo:var(--navy); }
.bebida{ fill:var(--rojo); }
.mesa .centro use{ --linea:var(--tinta-3); --acento:var(--rojo); }
.no-js .servido,.no-js .bebida{ opacity:1; }
/* ══════════════════════════════════════════════════════════
v8 · huecos de fotografía real y tipos de evento dibujados
══════════════════════════════════════════════════════════ */
/* ── el hueco: un encuadre declarado, no un espacio en blanco ──
Vacío se anuncia (código, encuadre y proporción). Con ![]()
dentro,
engine.js le pone .lleno y el marcaje desaparece solo. */
.hueco{
position:relative; margin:0; width:100%; aspect-ratio:var(--ar,3/2);
display:grid; place-items:center; overflow:hidden;
background:var(--superficie); border:1px dashed var(--linea-1);
}
.hueco::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(-45deg,var(--linea-2) 0 1px,transparent 1px 11px);
}
.hueco .marca{ position:relative; text-align:center; padding:1.4em; line-height:1.5; max-width:26ch; }
.hueco .marca b{
display:block; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--rojo); font-weight:600;
}
.hueco .marca span{ display:block; font-size:.9rem; color:var(--tinta-2); margin:.7em 0 .4em; }
.hueco .marca em{
display:block; font-style:normal; font-size:.66rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--tinta-3);
}
.hueco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hueco.lleno{ border-style:solid; border-color:var(--linea-2); background:var(--superficie-2); }
.hueco.lleno::before,.hueco.lleno .marca{ display:none; }
/* el pie: sólo existe cuando hay foto, y vive sobre un velo del propio navy */
.hueco > figcaption{ display:none; }
.hueco.lleno > figcaption{
display:block; position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:3.2em 1.15em .95em; color:var(--crema);
font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
background:linear-gradient(to top, rgba(22,48,43,.82) 0%, rgba(22,48,43,.55) 45%, transparent 100%);
}
.hueco.lleno > figcaption span{
display:block; text-transform:none; letter-spacing:.02em; font-size:.68rem;
color:rgba(230,227,210,.6); margin-top:.5em;
}
.hueco.lleno > figcaption span::before{ content:"· "; }
.ev-face.lleno > figcaption{ display:none; }
/* ── MOVIMIENTO · la foto se descubre, no se pasea ──────────────
Revelado por máscara con el mismo easing del mantel, y un asentado
del 6% al 0%. Nada de parallax ni de Ken Burns: con material de
teléfono el movimiento lento sólo invita a mirar el pixel. */
.js .hueco.lleno img{ clip-path:inset(0 100% 0 0); transform:scale(1.06); }
.js .hueco.lleno.rev img{
clip-path:inset(0 0 0 0); transform:scale(1);
transition:clip-path 1s var(--ease), transform 1.5s var(--ease);
}
.js .hueco.lleno > figcaption{ opacity:0; }
.js .hueco.lleno.rev > figcaption{ opacity:1; transition:opacity .5s linear .45s; }
/* la misma foto puede entrar en el medallón del platillo (F-15…F-21) */
.med > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.med.lleno > svg{ display:none; }
/* ── banda reservada a la mesa real ───────────────────── */
.banda-foto{ border-top:1px solid var(--linea-2); }
.banda-foto > .claro{ padding-top:clamp(56px,10vh,120px); padding-bottom:clamp(56px,10vh,120px); }
.banda-titulo{ display:none; max-width:18ch; margin:0 0 clamp(28px,5vh,56px); }
.completa .verificar{ display:none; }
.banda-foto.completa .banda-titulo{ display:block; }
.banda-foto .tira{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,22px); }
.banda-foto .tira > :first-child{ grid-column:1 / -1; }
/* ── los tipos de evento ──────────────────────────────── */
.mv-eventos{ border-top:1px solid var(--linea-2); }
.ev-grid{
list-style:none; margin:clamp(44px,7vh,86px) 0 0; padding:0;
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,40px);
}
.js .ev-card{ opacity:0; transform:translateY(18px); }
.ev-card.on{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
/* la ficha de evento no se ve vacía: hoy la llena el dibujo, mañana la foto */
.ev-face{ --ar:4/5; background:var(--panel); border-style:solid; border-color:var(--linea-2); }
.ev-face::before{ display:none; }
.ev-ilu{
position:relative; display:grid; place-items:center; width:66%;
--tinta:var(--tinta-0); --fondo:var(--papel); --acento:var(--rojo);
}
.ev-ilu svg{ width:100%; height:auto; display:block; }
.ev-face .marca{ position:absolute; left:0; right:0; bottom:0; padding:1em; max-width:none; opacity:.5; }
.ev-face .marca span{ display:none; }
.ev-face .marca em{ margin-top:.35em; }
.hueco.lleno .ev-ilu{ display:none; }
.ev-face.lleno{ background:var(--superficie-2); }
.ev-card h3{
display:flex; min-width:0; align-items:center; gap:.6em;
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; line-height:.94;
font-size:clamp(1.25rem,2.1vw,1.9rem); color:var(--tinta-0); margin:1.1rem 0 .55rem;
}
.med-ev{ --d:38px; --tinta:var(--tinta-0); --fondo:var(--papel); --acento:var(--rojo); }
.med-ev svg{ width:80%; }
.ev-card h3 > span:last-child,.ev-card h3{ min-width:0; }
.ev-card p{ margin:0; font-size:.88rem; line-height:1.55; color:var(--tinta-2); max-width:34ch; }
/* ── el dibujo también entra en la ficha del cuestionario ─ */
.q[data-q="evento"] .ops span{ display:flex; align-items:center; gap:.6em; padding-left:.85em; }
.ops span .ic{
width:1.7em; height:1.7em; flex:0 0 auto; display:block;
--tinta:var(--tinta-3); --fondo:var(--papel); --acento:var(--tinta-3);
transition:none;
}
.ops label:hover span .ic,.ops input:checked + span .ic{ --tinta:var(--tinta-0); --acento:var(--rojo); }
@media (max-width:1080px){
.ev-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
.ev-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ev-card p{ display:none; }
.ev-card h3{ font-size:1.05rem; gap:.45em; }
.med-ev{ --d:30px; }
.banda-foto .tira,.espacios .tira{ grid-template-columns:1fr; }
.hueco figcaption{ padding:1em; }
.ops span .ic{ width:1.5em; height:1.5em; }
}
@media (max-width:400px){
.ev-grid{ grid-template-columns:1fr; }
}
/* ══════════════════════════════════════════════════════════
v10 · COCINA CONCHITA · el restaurante
Los colores son los del cartel del cliente, muestreados del archivo.
La tinta sigue siendo el navy de la marca: el cartel también escribe
en oscuro, y así los dos capítulos se leen como la misma casa.
══════════════════════════════════════════════════════════ */
.dia{
--coral:#F3674C; --coral-o:#D8502F; --naranja:#F3674C; --mostaza:#E8A765;
--cielo:#CFD8C9; --cielo-m:#A9BBAE; --oliva:#4E6B4A; --terra:#9A5B42;
--ocre:#D8A24A;
}
.dia .ed em{ color:var(--coral); }
/* el nombre del restaurante: navy con la sombra coral corrida, la misma
que llevan las letras BCC del logotipo */
.fach-nombre{
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; margin:0;
font-size:clamp(2.7rem,7.4vw,6.6rem); line-height:.86; letter-spacing:.005em;
color:var(--navy); text-shadow:.045em .045em 0 var(--coral);
}
.fach-nombre.sm{ font-size:clamp(1.9rem,3.6vw,3rem); }
/* ── R1 · la fachada ─────────────────────────────────── */
.mv-fachada > .pin{ background:var(--papel); }
.fach-arriba,.fach-abajo{ position:absolute; left:0; right:0; text-align:center; z-index:2; padding:0 var(--gut); pointer-events:none; }
.fach-arriba{ top:clamp(62px,8.5vh,96px); }
.fach-abajo{ bottom:clamp(20px,4vh,44px); }
.no-js .fach-arriba,.no-js .fach-abajo{ position:static; padding-top:2rem; }
.liston{ margin:0; display:inline-block; }
.liston span{
display:inline-block; background:var(--cielo); color:var(--coral);
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:clamp(2.1rem,5.6vw,4.8rem); line-height:.9; letter-spacing:.01em;
padding:.14em .8em .1em;
clip-path:polygon(0 0,100% 0,calc(100% - .38em) 50%,100% 100%,0 100%,.38em 50%);
}
.js .liston{ clip-path:inset(0 calc((1 - var(--r,1)) * 100%) 0 0); }
/* El rótulo pasó de doce caracteres a treinta: con el cuerpo del
«¡Ya abrimos!» se salía de pantalla. Baja de tamaño para ocupar
el mismo ancho, no para caber apretado. */
.liston-largo span{ font-size:clamp(.92rem,2.55vw,2.15rem); padding:.3em 1.1em .26em; }
.fach-sub{
margin:.55em 0 0; font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase;
font-size:clamp(1.15rem,2.4vw,2rem); line-height:1; color:var(--navy); letter-spacing:.02em;
}
.fach-sub em{ font-style:normal; color:var(--coral); }
/* vida propia, independiente del scroll: el papel se mece, la estrella gira,
el vapor sube, el chef saluda. Todo lento: es ambiente, no espectáculo. */
.pp-sw{ transform-box:fill-box; transform-origin:50% 0; animation:mecer 3.8s ease-in-out infinite alternate; animation-delay:calc(var(--i,0) * -.37s); }
@keyframes mecer{ from{ transform:rotate(-3.2deg); } to{ transform:rotate(3.2deg); } }
.est-giro{ transform-box:fill-box; transform-origin:50% 50%; animation:giro 14s linear infinite; }
@keyframes giro{ to{ transform:rotate(360deg); } }
.vapor{ animation:vapor 2.6s ease-in-out infinite; animation-delay:calc(var(--v,0) * -.5s); }
@keyframes vapor{ 0%{ transform:translateY(8px); opacity:0; } 35%{ opacity:.95; } 100%{ transform:translateY(-16px); opacity:0; } }
.fc-chef{ transform-box:fill-box; transform-origin:50% 100%; animation:saludo 2.8s ease-in-out infinite; }
@keyframes saludo{ 0%,100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(2.5deg); } }
.fc-toldo{ transform-box:fill-box; transform-origin:50% 0; }
.fc-maceta{ transform-box:fill-box; transform-origin:50% 100%; }
.rueda{ transform-box:fill-box; transform-origin:50% 50%; }
/* ── R2 · la palapa ──────────────────────────────────── */
.mv-palapa{ overflow:hidden; }
.techo{ display:block; width:100%; height:clamp(150px,17vw,250px); }
.js .techo{ transform:translateY(-38%); opacity:0; }
.techo.on{ transform:none; opacity:1; transition:transform 1.1s var(--ease), opacity .6s linear; }
.palapa-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,96px); align-items:center; padding-top:clamp(40px,7vh,90px); }
.palapa-lead{ font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; color:var(--tinta-2); max-width:40ch; margin:1.4em 0 0; }
.rasgos{ list-style:none; padding:0; margin:clamp(28px,5vh,52px) 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rasgos li{
display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center;
border:1px solid var(--linea-2); background:var(--superficie); padding:14px 16px;
}
.rasgos svg{ grid-row:1 / 3; width:52px; height:52px; }
.rasgos b{ font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; font-size:1.2rem; line-height:1; color:var(--tinta-0); align-self:end; }
.rasgos span{ font-size:.8rem; color:var(--tinta-3); align-self:start; margin-top:.3em; }
.palapa-media{ position:relative; display:grid; grid-template-columns:repeat(12,1fr); align-items:start; }
.palapa-media .hueco-video{ grid-column:4 / 13; grid-row:1; }
.palapa-media .hueco:not(.hueco-video){ grid-column:1 / 7; grid-row:1; margin-top:48%; z-index:2; box-shadow:0 0 0 10px var(--papel); }
.hueco video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.js .hueco.lleno video{ clip-path:inset(0 100% 0 0); transform:scale(1.06); }
.js .hueco.lleno.rev video{ clip-path:inset(0 0 0 0); transform:scale(1); transition:clip-path 1s var(--ease), transform 1.5s var(--ease); }
/* ── R3 · la mesa de todos los días, sobre el piso amarillo de la palapa ── */
.mv-diaria > .pin{
background-color:var(--navy-deep);
background-image:linear-gradient(90deg, transparent calc(50% - 1px), rgba(230,227,210,.10) calc(50% - 1px), rgba(230,227,210,.10) calc(50% + 1px), transparent calc(50% + 1px));
}
/* sobre verde la tinta se voltea: la mesa de madera y la loza blanca
son lo único claro de la pantalla, y así mandan */
.mv-diaria{
--tinta-0:var(--crema); --tinta-1:var(--crema);
--tinta-2:rgba(230,227,210,.82); --tinta-3:rgba(230,227,210,.58);
--linea-1:rgba(230,227,210,.28); --linea-2:rgba(230,227,210,.14);
color:var(--crema);
}
.js .mv-diaria .diaria{ position:absolute; left:50%; top:53%; transform:translate(-50%,-50%); width:auto; height:min(76vh,920px); max-width:96vw; }
.diaria{ display:block; width:100%; height:auto; }
.diaria-txt{ position:absolute; left:var(--gut); top:clamp(76px,11vh,120px); max-width:min(30ch,34vw); z-index:2; }
.diaria-txt .paso-tit{ color:var(--crema); max-width:14ch; font-size:clamp(1.5rem,3vw,2.6rem); line-height:1.12; margin:0; }
.diaria-txt p:last-child{ font-size:.9rem; line-height:1.55; color:var(--tinta-2); margin:1em 0 0; }
.cafecito{
position:absolute; left:0; right:0; bottom:clamp(26px,5.5vh,60px); text-align:center; margin:0; padding:0 var(--gut);
font-family:var(--ed); font-size:clamp(1.6rem,3.6vw,3.2rem); line-height:1.1; color:var(--navy); z-index:2;
}
.cafecito em{ color:var(--rojo); font-size:1.32em; text-shadow:none; }
.no-js .diaria-txt,.no-js .cafecito{ position:static; max-width:none; padding:2rem var(--gut) 0; }
.d-plato,.d-taza,.d-centro{ transform-box:fill-box; transform-origin:50% 50%; }
.d-vapor path{ animation:vapor 2.4s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.4s); }
/* ── R4 · el jardín y cómo llegar ────────────────────── */
.jardin-lista{ font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; color:var(--tinta-2); max-width:48ch; margin:1.2em 0 0; }
.jardin-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,26px); margin-top:clamp(40px,7vh,84px); align-items:start; }
.jardin-grid .hueco:nth-child(2){ margin-top:clamp(40px,9vh,120px); }
.jardin-grid .hueco:nth-child(3){ margin-top:clamp(20px,4.5vh,60px); }
.letrero{ margin:clamp(48px,8vh,96px) auto 0; max-width:26ch; text-align:center; }
.letrero p{ margin:0; font-family:var(--ed); font-style:italic; font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.12; color:var(--tinta-0); }
.letrero cite{ display:block; margin-top:1em; font-style:normal; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terra); }
/* ── la ficha de dirección y su mapa ───────────────────
El mapa no se pide a Google al cargar la página: vive detrás de un
botón. Así no hay una petición a un tercero en la primera visita, y
si el mapa no puede cargar —hosting, bloqueador, vista previa— la
ficha sigue completa y los dos botones siguen llevando a Maps. */
.visita{
margin-top:clamp(56px,10vh,120px); display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,3.4vw,64px);
align-items:stretch; border-top:1px solid var(--linea-1); padding-top:clamp(32px,5vh,56px);
}
.visita-ficha{
background:var(--superficie); border-radius:clamp(24px,2.8vw,42px);
padding:clamp(26px,3vw,44px);
box-shadow:inset 0 0 0 1px var(--linea-2);
display:flex; flex-direction:column; align-items:flex-start;
}
.visita-ficha .monu{ margin-bottom:.5em; }
.visita address{ font-style:normal; color:var(--tinta-2); margin:0 0 1.6em; line-height:1.65; max-width:34ch; font-size:1.02rem; }
.visita-datos dd a{ color:inherit; text-decoration:none; }
.visita-datos dd a:hover{ color:var(--coral); }
.visita-datos{ margin:0 0 auto; display:grid; gap:10px; width:100%; }
.visita-datos > div{ display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--linea-2); padding-bottom:.6em; }
.visita-datos dt{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-3); }
.visita-datos dd{ margin:0; font-weight:500; color:var(--tinta-0); }
.visita-datos dd[data-debt]{ color:var(--tinta-3); }
.visita-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(24px,3.2vh,36px); }
.visita-cta .cta{ margin-top:0; }
.visita-mapa{
position:relative; margin:0; overflow:hidden; min-height:clamp(260px,34vh,380px);
border-radius:clamp(24px,2.8vw,42px); background:var(--panel);
box-shadow:inset 0 0 0 1px var(--linea-2);
display:flex; align-items:flex-end;
}
.mapa-fondo{
position:absolute; right:-6%; bottom:-8%; width:min(58%,300px); height:auto;
opacity:.16; pointer-events:none;
}
.visita-mapa::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:url("../img/marca/bicis-tile.png") repeat 0 0/clamp(300px,34vw,460px) auto; opacity:.035;
}
.mapa-pie{
position:relative; z-index:2; padding:clamp(22px,2.6vw,34px); width:100%;
}
.mapa-pie p{
margin:0 0 1em; font-family:var(--ed); font-size:clamp(1.05rem,1.5vw,1.35rem);
line-height:1.3; color:var(--tinta-1); max-width:18ch;
}
.mapa-btn{ margin-top:0; background:var(--navy); color:var(--crema); cursor:pointer; }
.visita-mapa.puesto{ background:var(--navy); }
.visita-mapa.puesto .mapa-fondo,.visita-mapa.puesto .mapa-pie,.visita-mapa.puesto::before{ display:none; }
.visita-mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.visita-cta .cta:first-child{ background:var(--coral); color:var(--navy); }
.cta-linea{ background:none!important; box-shadow:inset 0 0 0 2px var(--navy); color:var(--navy); }
.puente{
margin:0; padding:clamp(60px,11vh,130px) var(--gut) clamp(40px,8vh,90px); text-align:center;
font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; line-height:.9;
font-size:clamp(2rem,5.4vw,4.8rem); color:var(--navy);
}
.puente em{ font-style:normal; color:var(--coral); }
@media (max-width:860px){
.visita{ grid-template-columns:minmax(0,1fr); }
.visita-mapa{ min-height:clamp(220px,30vh,300px); }
}
@media (max-width:760px){
.palapa-grid{ grid-template-columns:1fr; }
.rasgos{ grid-template-columns:1fr 1fr; gap:8px; }
.rasgos li{ grid-template-columns:38px 1fr; column-gap:10px; padding:10px; }
.rasgos svg{ width:38px; height:38px; }
.rasgos b{ font-size:1rem; }
.rasgos span{ font-size:.72rem; }
.jardin-grid{ grid-template-columns:1fr 1fr; }
.jardin-grid .hueco:nth-child(1){ grid-column:1 / -1; }
.jardin-grid .hueco:nth-child(2),.jardin-grid .hueco:nth-child(3){ margin-top:0; }
.visita{ grid-template-columns:1fr; }
.visita-cta{ flex-direction:column; }
.diaria-txt{ left:0; right:0; max-width:none; padding:0 var(--gut); top:clamp(70px,10vh,96px); }
.js .mv-diaria .diaria{ top:57%; height:auto; width:104vw; max-width:none; }
.fach-arriba{ top:clamp(76px,12vh,110px); }
.fach-abajo{ bottom:21vh; }
}
/* ══════════════════════════════════════════════════════════
v11 · el copy vende el lugar para tu evento
══════════════════════════════════════════════════════════ */
/* ── R2 · aquí cabe tu ___ ───────────────────────────── */
.palapa-media{ display:block; }
.palapa-media .hueco-video{ width:min(100%,430px); margin-left:auto; }
.motivo{ font-size:clamp(2.1rem,4.4vw,4.1rem); line-height:1.02; min-height:3.08em; }
.motivo-rueda{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; }
.motivo-palabra{ display:inline-block; color:var(--coral); }
.motivo-punto{ color:var(--coral); }
.motivo-palabra.sale{ transform:translateY(-105%); opacity:0; transition:transform .38s cubic-bezier(.6,0,.9,.4), opacity .3s linear; }
.motivo-palabra.entra{ transform:translateY(105%); opacity:0; }
.motivo-palabra.llega{ transform:none; opacity:1; transition:transform .55s var(--ease), opacity .3s linear; }
.motivos{ list-style:none; padding:0; margin:clamp(26px,4.5vh,46px) 0 clamp(26px,4vh,40px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.motivos button{
width:100%; display:flex; align-items:center; gap:.6em; text-align:left; padding:.6em .8em;
border:1px solid var(--linea-2); background:var(--superficie); color:var(--tinta-2); font-size:.84rem; line-height:1.2;
transition:color .2s linear, border-color .2s linear, background-color .2s linear;
--tinta:var(--tinta-3); --fondo:var(--papel); --acento:var(--tinta-3);
}
.motivos svg{ width:30px; height:30px; flex:0 0 auto; }
.motivos button:hover,.motivos button.activo{ color:var(--tinta-0); border-color:var(--coral); background:rgba(243,119,61,.10); --tinta:var(--navy); --acento:var(--coral); }
/* ── R3 · el piso de la palapa tiene materia ─────────── */
.mv-diaria > .pin{
background-image:
linear-gradient(90deg, transparent calc(50% - 1px), rgba(230,227,210,.10) calc(50% - 1px), rgba(230,227,210,.10) calc(50% + 1px), transparent calc(50% + 1px)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .86 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E"),
radial-gradient(ellipse at 40% 35%, rgba(243,103,76,.14), transparent 62%);
}
/* ── R5 · el paquete ─────────────────────────────────── */
.mv-paquete{ border-top:1px solid var(--linea-2); }
.paquete-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,5vw,96px); align-items:center; }
.paquete-txt .fach-nombre{ font-size:clamp(2.3rem,4.4vw,4.3rem); margin:.2em 0 0; max-width:11ch; text-wrap:balance; }
.paquete-lead{ font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; color:var(--tinta-2); max-width:42ch; margin:1.4em 0 0; }
.paq{
position:relative; background:#F4F2E8; padding:clamp(70px,9vw,96px) clamp(22px,2.6vw,40px) clamp(24px,3vw,40px);
box-shadow:0 1px 0 var(--linea-2), 0 24px 48px -28px rgba(39,82,75,.35);
}
.paq::after{ /* borde de comanda: picos abajo */
content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
background:linear-gradient(-45deg, transparent 7px, #F4F2E8 0) 0 0/14px 10px repeat-x,
linear-gradient(45deg, transparent 7px, #F4F2E8 0) 0 0/14px 10px repeat-x;
}
.paq-picado{ position:absolute; left:0; right:0; top:0; width:100%; height:clamp(56px,6vw,74px); }
.paq-titulo{ margin:0; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--terra); font-weight:600; }
.paq-precio{ margin:.35em 0 0; display:flex; align-items:baseline; gap:.4em; flex-wrap:wrap; }
.paq-desde{ flex:0 0 100%; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.25em; }
.paq-cifra{
font-family:var(--monu); font-weight:700; letter-spacing:.012em; font-size:clamp(4.2rem,9vw,7.6rem); line-height:.82;
color:var(--coral); text-shadow:.04em .04em 0 var(--navy);
}
.paq-ast{ font-style:normal; font-size:.34em; vertical-align:super; color:var(--rojo); margin-left:.06em; }
.paq-nota{
flex:0 0 100%; margin:.5em 0 0; font-size:.76rem; line-height:1.45;
color:var(--tinta-3); max-width:30ch;
}
.paq-nota span{ color:var(--rojo); }
.paq-unidad{ flex:0 0 100%; margin-top:.1em; font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; font-size:clamp(1.1rem,1.8vw,1.5rem); color:var(--navy); }
.paq-incluye{ list-style:none; padding:0; margin:clamp(18px,2.8vh,28px) 0; display:grid; gap:8px; }
.paq-incluye li{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--linea-2); padding-top:9px; }
.paq-incluye svg{ width:40px; height:40px; flex:0 0 auto; }
.paq-incluye span{ font-family:var(--monu); font-weight:700; letter-spacing:.016em; text-transform:uppercase; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--navy); line-height:1; }
.paq-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.paq-cta .cta{ margin-top:0; background:var(--coral); color:var(--navy); }
.js .paq{ opacity:0; transform:translateY(28px) rotate(-1.2deg); }
.paq.on{ opacity:1; transform:rotate(-.6deg); transition:opacity .6s linear, transform .9s var(--ease); }
.mv-paquete .visita{ margin-top:clamp(64px,10vh,120px); padding-bottom:0; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; }
@media (max-width:1080px){
.motivos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.paquete-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
.palapa-media .hueco-video{ width:100%; margin:0; }
.motivos button{ font-size:.76rem; padding:.5em .6em; }
.motivos svg{ width:24px; height:24px; }
.mv-paquete .visita{ grid-template-columns:1fr; }
.cafecito{ font-size:1.45rem; bottom:7vh; }
}
/* ── v12 · la mesa: un solo escenario, cuatro pasos de texto ── */
.diaria-txt{ min-height:12em; width:min(30ch,30vw); }
.diaria-txt .paso{ position:absolute; left:0; top:0; width:100%; }
.diaria-txt .paso h3{ margin:0; color:var(--crema); max-width:12ch; }
.diaria-txt .paso p:last-child{ font-size:.9rem; line-height:1.55; color:var(--tinta-2); margin:1em 0 0; }
.no-js .diaria-txt .paso{ position:static; margin-bottom:1.6rem; }
.diaria-cta{
position:absolute; left:0; right:0; bottom:clamp(26px,5.5vh,60px); z-index:2; margin:0;
display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:0 var(--gut);
}
.diaria-cta .cta{ margin-top:0; background:var(--coral); color:var(--navy); }
.diaria-cta .cta-linea{ background:none!important; box-shadow:inset 0 0 0 2px var(--crema)!important; color:var(--crema); }
.ev-mantel,.ev-lugar,.ev-centro{ transform-box:fill-box; transform-origin:50% 50%; }
.js .ev-mantel,.js .ev-lugar,.js .ev-centro,.js .ev-silla .sl{ opacity:0; }
.no-js .mesero,.no-js .ev-mantel,.no-js .ev-lugares,.no-js .ev-centro,.no-js .ev-sillas,
.no-js .diaria-txt .paso:not([data-paso="1"]),.no-js .diaria-cta{ display:none; }
@media (max-width:760px){
.diaria-txt{ min-height:10em; width:auto; }
.diaria-txt .paso{ padding:0 var(--gut); box-sizing:border-box; }
.diaria-cta{ bottom:6vh; }
}
/* ══════════════════════════════════════════════════════════
v15 · el trazo del manual
El manual dibuja con pincel. Lo vectorial se queda vectorial,
pero el canto tiembla: un displacement map sobre cada pieza.
══════════════════════════════════════════════════════════ */
.med svg,.ops span .ic{ filter:url(#tinta-s); }
.med-xl svg,.ev-ilu svg,.med-ev svg,.rasgos svg,.paq-incluye svg{ filter:url(#tinta-m); }
.techo,.diaria,.mesa,.paq-picado{ filter:url(#tinta-l); }
.cub,.cubiertos-fila svg{ filter:url(#tinta-s); }
/* la hoja del manual tiene grano de papel */
.papel::after,.dia::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .32 0 0 0 0 .29 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}
.papel > *,.dia > *{ position:relative; z-index:1; }
.mv-carta > .pin::before,.mv-carta > .pin::after{ z-index:3; }
/* ── la voz del manual: manuscrita de verdad ── */
.manu{ font-family:var(--ed); font-weight:400; }
.cafecito{ font-family:var(--ed); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.7rem); }
.cafecito em{ font-style:normal; font-size:1.18em; }
.fach-sub em,.motivo-palabra{ }
.letrero p{ font-family:var(--ed); font-size:clamp(1.6rem,3vw,2.6rem); font-style:normal; }
/* ── las piezas reales del manual ── */
.firma{ display:block; height:auto; }
.firma-rico{ width:clamp(88px,10vw,150px); }
.firma-amor{ width:clamp(132px,13vw,196px); }
/* ── las piezas del manual, colocadas ── */
/* El rótulo de la fachada pasó del logotipo «Cocina Conchita» —ancho,
proporción 1.96— al monograma BCC, que es casi cuadrado. Al mismo
ancho medía el doble de alto y se montaba encima del edificio: el
ancho baja para que la pieza ocupe la misma altura de antes. */
.fach-marca{ display:block; margin:0 auto; width:clamp(100px,12.6vw,212px); height:auto; }
.js .fach-marca{ opacity:0; transform:translateY(-14px) scale(.96); }
.fach-arriba.vista .fach-marca{ opacity:1; transform:none; transition:opacity .7s linear, transform .9s var(--ease); }
.cafecito{ display:flex; align-items:center; justify-content:center; gap:.5em; flex-wrap:wrap; }
.cafecito .firma-rico{ margin:0; }
.cafecito span{ font-family:var(--ed); font-size:.8em; color:var(--crema); }
.cafecito em{ font-style:normal; font-size:1.1em; color:var(--rojo); text-shadow:none; }
.placa-amor{ display:inline-block; background:var(--coral,#F3674C); padding:clamp(14px,1.6vw,22px) clamp(18px,2.2vw,30px); }
.mv-carta .placa-amor{ background:#F3674C; }
.firma-amor{ margin:0; }
.rail-head .placa-amor{ align-self:flex-end; }
.mascota-iii{ opacity:.85; mix-blend-mode:normal; }
.mv-venta .mascota-iii{ filter:none; }
/* el patrón de bicicletas del manual, como cierre del capítulo del lugar */
/* ── las bicicletas del manual ──────────────────────────
Son las que cuelgan de verdad en la entrada de la palapa. Aquí
hacen dos trabajos: filigrana de fondo en las superficies claras,
y una banda que rueda con el scroll entre los dos capítulos. */
.papel::before,.dia::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:url("../img/marca/bicis-tile.png") repeat 0 0/clamp(420px,46vw,700px) auto;
opacity:.055;
}
.mv-diaria > .pin::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:url("../img/marca/bicis-tile-crema.png") repeat 0 0/clamp(420px,46vw,700px) auto;
opacity:.055;
}
.mv-venta .claro::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:url("../img/marca/bicis-tile-crema.png") repeat 0 0/clamp(420px,46vw,700px) auto;
opacity:.05;
}
/* La banda de bicicletas que corría con el scroll se retiró en v44. */
@media (max-width:760px){
.rail-head .placa-amor{ align-self:flex-start; }
.firma-amor{ width:150px; }
}
/* ══════════ LA FACHADA DEL MANUAL ═════════════════════
Ya no es un dibujo mío: son las piezas de la página 4 del manual,
recortadas una por una y recolocadas con su geometría original
(lienzo de 1890 × 1155 medido sobre la página a 300 dpi).
La puerta se abre de verdad porque la hoja coral y el marco navy
se separaron por color. */
.fachada{
position:absolute; left:50%; top:var(--fy,56%);
height:min(var(--fh,45vh), 46vw); width:auto; aspect-ratio:1890/1155;
transform:translate(-50%,-50%) scale(var(--fs,1));
transform-origin:46.56% 35.5%; /* el centro del vano de la puerta */
will-change:transform;
/* La profundidad va atada al tamaño de la fachada, no a la pantalla:
así el giro de la hoja se ve igual en un monitor que en un teléfono.
El punto de fuga se pone en la puerta, no en el centro del dibujo. */
perspective:calc(min(var(--fh,45vh), 46vw) * 1.75);
perspective-origin:46.56% 42%;
}
.fz{ position:absolute; display:block; height:auto; }
.fz-venI { left:0%; top:.866%; width:32.275%; }
.fz-vapor { left:17.619%; top:18.442%; width:6.349%; transform-origin:50% 100%; }
.fz-marco { left:33.333%; top:0%; width:26.455%; }
/* El vano de la puerta, detrás de la hoja. El recorte deja ver el
hueco exacto que tapa la hoja: medido sobre el alfa del PNG, no
a ojo (la tinta de la hoja empieza en el 28.25 % de su lienzo y
el dintel en el 9.91 %). Sin esto, al abrir se vería el papel
crema de la página, que es justo lo que no debe pasar. */
.fz-vano{
left:33.333%; top:0%; width:26.455%; aspect-ratio:400/656;
background:
linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%),
var(--navy-deep);
clip-path:inset(9.91% 0% 0% 28.25%);
}
/* La hoja gira sobre su bisagra de verdad. Antes se aplastaba con
scaleX, que a cuadro se lee como un desvanecido y no como una
puerta. La bisagra está en el canto izquierdo de la tinta —28.25 %
del lienzo—, no en el 8 % que se había estimado. */
.fz-hoja { left:33.333%; top:0%; width:26.455%;
transform-origin:28.25% 50%;
transform:translateY(var(--hoja-sube,0px)) rotateY(var(--puerta,0deg));
filter:brightness(var(--puerta-luz,1));
backface-visibility:hidden; }
.fz-venD { left:65.079%; top:.866%; width:32.275%; }
.fz-bici { left:66.667%; top:45.887%; width:33.333%; }
/* el vapor sube solo, como en la ilustración */
@keyframes humo{
0% { opacity:0; transform:translateY(10%) scaleY(.86); }
22% { opacity:1; }
100%{ opacity:0; transform:translateY(-46%) scaleY(1.14); }
}
.js .fz-vapor{ animation:humo 3.4s ease-out infinite; }
@media (max-width:760px){
.fachada{ --fh:34vh; --fy:50%; }
}
/* ══════════ EL MURO ═══════════════════════════════════
La galería no es una rejilla y no espera al scroll: corre sola.
Cada columna es una pista con su contenido duplicado que se
desplaza media pista en bucle, unas hacia arriba y otras hacia
abajo, a duraciones distintas para que nunca se sincronicen.
Al pasar el cursor el muro entero se detiene. */
.mv-muro{
position:relative; overflow:hidden;
background:var(--crema); color:var(--navy);
--tinta-0:var(--navy); --tinta-2:rgba(39,82,75,.74); --tinta-3:rgba(39,82,75,.5);
}
.muro{
display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
gap:clamp(8px,1vw,18px); padding:0 clamp(8px,1vw,18px);
height:clamp(560px,96vh,960px); align-items:start;
}
.muro-col{ height:100%; transform:translateY(var(--d,0px)); }
.pista{
display:flex; flex-direction:column; gap:clamp(8px,1vw,18px);
will-change:transform;
}
.js .pista{ animation:correr var(--dur,52s) linear infinite; }
.js .pista[style*="--sent:-1"]{ animation-direction:reverse; }
@keyframes correr{
from{ transform:translateY(0); }
to { transform:translateY(-50%); }
}
/* media pista exacta: el salto es invisible porque el contenido va dos veces */
/* el muro no se detiene con el cursor: corre siempre, también
mientras alguien lo graba. Solo se para si el sistema pide
menos movimiento, y eso se resuelve al final del archivo. */
/* cada columna arranca a distinta altura: el muro no se lee como tabla */
.muro-col:nth-child(2) .pista{ animation-delay:-11s; }
.muro-col:nth-child(3) .pista{ animation-delay:-26s; }
.muro-col:nth-child(4) .pista{ animation-delay:-5s; }
.muro-col:nth-child(5) .pista{ animation-delay:-33s; }
.mz{
margin:0; position:relative; overflow:hidden; z-index:1; flex:0 0 auto;
border-radius:clamp(14px,1.6vw,26px);
transition:transform .42s var(--ease), box-shadow .42s var(--ease);
}
.mz img{ display:block; width:100%; height:auto; }
.mz:hover,.mz:focus{
transform:scale(1.2) translateY(-4px); z-index:6;
box-shadow:0 26px 54px -24px rgba(22,48,43,.6), 0 0 0 2px var(--crema);
}
.mz:focus{ outline:none; }
.mz:focus-visible{ outline:2px solid var(--rojo); outline-offset:4px; }
@media (hover:none){ .mz:hover{ transform:none; box-shadow:none; } }
@media (max-width:1080px){
.muro{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.muro-col:nth-child(4),.muro-col:nth-child(5){ display:none; }
}
@media (max-width:640px){
/* en telefono el muro ocupa la pantalla entera: ni recuadro ni margen */
.muro{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px; padding:0;
height:100vh; height:100lvh;
}
.muro-col:nth-child(3){ display:none; }
}
/* ══════════ EL LUGAR · la banda horizontal ════════════
La hermana del muro, girada noventa grados. Dos carriles que
corren solos en sentidos opuestos y no se detienen nunca, ni con
el cursor encima: igual que el muro, para que se pueda grabar.
El contenido de cada carril va dos veces y el bucle salta media
pista, así que el corte no se ve.
══════════════════════════════════════════════════════════ */
.mv-lugar{
position:relative; overflow:hidden;
background:var(--navy-deep);
padding:clamp(70px,12vh,150px) 0 clamp(70px,12vh,150px);
border-top:1px solid var(--linea-2);
}
.lugar-cab{ max-width:var(--maxw); margin:0 auto clamp(40px,6.5vh,80px); padding:0 var(--gut); }
.lugar-cab h2{ max-width:16ch; }
.lugar-cab p{ margin:1.1em 0 0; max-width:46ch; font-size:clamp(.95rem,1.3vw,1.1rem); line-height:1.6; color:var(--tinta-2); }
.carriles{ display:flex; flex-direction:column; gap:clamp(10px,1.2vw,20px); }
.carril{ overflow:hidden; }
.hpista{
display:flex; width:max-content; gap:clamp(10px,1.2vw,20px);
will-change:transform;
}
.js .hpista{ animation:correr-h var(--dur,70s) linear infinite; }
.js .hpista[style*="--sent:-1"]{ animation-direction:reverse; }
@keyframes correr-h{
from{ transform:translateX(0); }
to { transform:translateX(-50%); }
}
.hz{
margin:0; position:relative; overflow:hidden; flex:0 0 auto; z-index:1;
height:clamp(190px,30vh,340px); aspect-ratio:3/2;
border-radius:clamp(14px,1.6vw,26px);
transition:transform .42s var(--ease), box-shadow .42s var(--ease);
}
.hz img{ display:block; width:100%; height:100%; object-fit:cover; }
.hz:hover{
transform:scale(1.07); z-index:6;
box-shadow:0 26px 54px -24px rgba(0,0,0,.6), 0 0 0 2px var(--crema);
}
@media (hover:none){ .hz:hover{ transform:none; box-shadow:none; } }
@media (max-width:760px){
.hz{ height:clamp(150px,24vh,210px); }
}
/* ══════════ DESLIZA ═══════════════════════════════════
La única indicación de uso del sitio. Va en el rotulado del
manual, no en versalitas, porque es una voz y no un rótulo:
la dice el chef. La línea que cae hace el trabajo de la flecha
sin dibujar una flecha. */
.desliza{
position:absolute; left:50%; bottom:clamp(18px,3.4vh,40px);
transform:translateX(-50%); z-index:6; margin:0;
display:flex; flex-direction:column; align-items:center; gap:.7em;
opacity:var(--dz,1); transition:opacity .18s linear;
pointer-events:none; text-align:center;
}
.desliza span{
font-family:var(--ed); font-weight:400;
font-size:clamp(.92rem,1.5vw,1.18rem); line-height:1.2;
color:var(--crema); opacity:.82; white-space:nowrap;
}
.desliza i{
display:block; width:1px; height:clamp(26px,4vh,46px);
background:linear-gradient(to bottom, var(--crema), rgba(230,227,210,0));
transform-origin:top center;
}
.js .desliza i{ animation:cae 2.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cae{
0% { transform:scaleY(0); opacity:0; }
28% { transform:scaleY(1); opacity:.95; }
72% { transform:scaleY(1); opacity:.95; }
100% { transform:scaleY(1) translateY(100%); opacity:0; }
}
@media (max-width:420px){ .desliza span{ font-size:.86rem; } }
/* el campo trampa no se oculta con display:none: varios robots
descartan lo que está en display:none. Se saca de la pantalla. */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* ══════════ CONTACTO EN EL PIE ════════════════════════
El cierre se eliminó por instrucción del cliente y con él se iban
el teléfono y la dirección. Bajan aquí, que es donde el chef los
pidió, y en dos columnas porque van a ser dos números. */
.pie-contacto{
display:flex; flex-wrap:wrap; justify-content:center;
gap:clamp(22px,4vw,64px); margin:clamp(22px,3.5vh,38px) 0 0;
}
.pie-tel{ display:flex; flex-direction:column; align-items:center; gap:.5em; }
/* cada número se puede marcar o abrir en WhatsApp: no se reparten
los teléfonos por canal, los dos sirven para las dos cosas. */
.pie-vias{ display:flex; gap:.9em; align-items:center; }
.pie-vias a{
font-family:var(--monu); font-weight:600; font-size:.7rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-3);
text-decoration:none; padding:.45em .95em; border-radius:99px;
box-shadow:inset 0 0 0 1px var(--linea-2);
transition:color .2s linear, box-shadow .2s linear;
}
.pie-vias a:hover,.pie-vias a:focus-visible{ color:var(--crema); box-shadow:inset 0 0 0 1px var(--crema); }
.pie-tel .tel{ font-size:clamp(1.5rem,3.2vw,2.4rem); }
.pie-dir{
font-style:normal; margin:clamp(18px,2.6vh,30px) auto 0; max-width:34ch;
font-size:.86rem; line-height:1.5; color:var(--tinta-3);
}
.pie .verificar{ margin:1.1rem auto 0; }
/* ══════════════════════════════════════════════════════════
RESEÑAS · dieciséis lugares
El muro no finge estar lleno: los lugares libres se ven libres.
El primer lugar libre es el botón, para que dejar una reseña no
cueste un viaje a otra parte de la página.
══════════════════════════════════════════════════════════ */
.mv-resenas{
max-width:var(--maxw); margin:0 auto;
padding:clamp(84px,14vh,170px) var(--gut) clamp(60px,10vh,120px);
border-top:1px solid var(--linea-2);
}
.mv-resenas > h2{ max-width:20ch; }
.rs-cuenta{
margin:1.1em 0 0; font-family:var(--monu); font-weight:600;
font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3);
}
.rs-cuenta b{ color:var(--rojo); font-weight:600; }
.rs-muro{
list-style:none; margin:clamp(40px,6.5vh,80px) 0 0; padding:0;
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px);
}
.rs-slot{
position:relative; display:flex; flex-direction:column; min-width:0;
background:var(--superficie); border:1px solid var(--linea-2);
padding:clamp(14px,1.3vw,20px); min-height:clamp(230px,30vh,300px);
}
.js .rs-slot{ opacity:0; transform:translateY(16px); }
.rs-slot.on{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
/* ── el lugar libre ──
Un lugar vacío no se anuncia con una caja del tamaño de una reseña:
eso hace ver el muro a medio hacer. Se queda en una barra baja, sin
texto. Quien lleva la cuenta es el renglón de arriba. */
.rs-libre{
min-height:0; padding:0; align-items:center; justify-content:center;
height:clamp(20px,2.4vh,26px);
background:none; border:1px solid var(--linea-2);
}
.rs-libre span{ display:none; }
/* el primer lugar libre es el botón, y ocupa el renglón completo */
.rs-slot.rs-invita{
grid-column:1 / -1; height:auto; min-height:clamp(78px,9.5vh,104px);
flex-direction:row; align-items:center; justify-content:center; gap:.9em;
text-align:center; padding:1.1em clamp(16px,2vw,28px);
border:1px solid var(--rojo); background:var(--superficie-2); cursor:pointer;
}
.rs-slot.rs-invita:hover{ background:var(--panel); }
.rs-invita span{
display:block; font-family:var(--monu); font-weight:600; font-size:clamp(.78rem,1.1vw,.92rem);
letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); opacity:1;
}
.rs-invita em{
font-style:normal; font-size:.84rem; color:var(--tinta-2); letter-spacing:0; text-transform:none;
}
.rs-invita button{
position:absolute; inset:0; width:100%; background:none; border:0; cursor:pointer;
font:inherit; color:transparent;
}
.rs-invita button:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; }
/* ── el lugar ocupado ── */
.rs-foto{
position:relative; margin:0 0 clamp(11px,1vw,15px); width:100%; aspect-ratio:4/3;
overflow:hidden; background:var(--panel); flex:0 0 auto;
}
.rs-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rs-estrellas{ display:flex; gap:3px; margin-bottom:.7em; }
.rs-estrellas svg{ width:14px; height:14px; display:block; fill:var(--rojo); }
.rs-estrellas svg.off{ fill:var(--linea-1); }
.rs-texto{
margin:0 0 .9em; font-size:.84rem; line-height:1.52; color:var(--tinta-1);
overflow-wrap:anywhere;
}
.rs-sinfoto .rs-texto{ font-size:.95rem; line-height:1.55; }
.rs-sinfoto .rs-estrellas svg{ width:16px; height:16px; }
.rs-firma{
margin:auto 0 0; font-family:var(--monu); font-weight:600;
font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
overflow-wrap:anywhere;
}
.rs-firma b{ color:var(--tinta-0); font-weight:600; }
.rs-firma em{ font-style:normal; color:var(--linea-1); }
/* ── el formulario ── */
.rs-form{ margin:clamp(34px,5vh,60px) 0 0; max-width:720px; }
.rs-form[hidden]{ display:none; }
.rs-form > p.hint{ margin-top:0; }
.rs-form > .campo{ margin-top:1.9rem; }
.rs-form .campos{ margin-top:0; }
.rs-calif{ border:0; margin:0 0 1.8rem; padding:0; }
.rs-calif legend{
font-family:var(--monu); font-weight:600; font-size:.68rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--tinta-3); padding:0; margin-bottom:.8em;
}
.rs-pick{ display:flex; gap:6px; }
.rs-pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.rs-pick label{ cursor:pointer; line-height:0; }
.rs-pick svg{ width:30px; height:30px; display:block; fill:var(--linea-1); transition:fill .15s linear; }
.rs-pick label:hover svg,.rs-pick label.marca svg{ fill:var(--rojo); }
.rs-pick input:focus-visible + svg{ outline:2px solid var(--rojo); outline-offset:3px; }
.rs-cont{ display:block; margin-top:.6em; font-family:var(--monu); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); text-align:right; }
.rs-cont.tope{ color:var(--rojo); }
.rs-archivo{ margin-top:1.8rem; }
.rs-archivo input{ position:absolute; opacity:0; width:1px; height:1px; }
.rs-archivo > .rs-rotulo{ display:block; font-family:var(--monu); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.7em; }
.rs-suelta{
display:flex; align-items:center; gap:14px; cursor:pointer;
border:1px dashed var(--linea-1); padding:.85em 1.2em; color:var(--tinta-2); font-size:.9rem;
}
.rs-suelta:hover{ border-color:var(--rojo); color:var(--tinta-0); }
.rs-previo{ width:52px; height:52px; object-fit:cover; display:none; flex:0 0 auto; }
.rs-previo.on{ display:block; }
.rs-enviar{ margin-top:1.9rem; }
.rs-aviso:empty{ display:none; }
.rs-aviso{ margin:1.4em 0 0; font-size:.86rem; line-height:1.5; color:var(--tinta-2); }
.rs-aviso.mal{ color:var(--rojo); }
.rs-cerrada{
margin:clamp(34px,5vh,60px) 0 0; max-width:52ch; font-size:.95rem; line-height:1.6; color:var(--tinta-2);
}
@media (max-width:1080px){ .rs-muro{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){
.rs-muro{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.rs-slot{ min-height:200px; }
.rs-libre{ height:18px; min-height:0; }
.rs-texto{ font-size:.8rem; }
}
@media (max-width:400px){ .rs-muro{ grid-template-columns:1fr; } }
/* ══════════ EL RÓTULO ═════════════════════════════════
Disciplina tipográfica del manual, en un solo lugar.
La regla: toda versalita con tracking —toda etiqueta que hace
trabajo de rótulo y no de lectura— va en la geométrica del
manual, igual que los títulos. La de texto solo se usa para
leer: bajadas, descripciones y ayudas de formulario.
Antes el sitio se contradecía: el mismo salía en la
geométrica dentro de «lo que incluye» y en la de texto dentro
de la ficha de dirección. Mismo gesto, dos letras distintas.
La geométrica tiene altura de x baja, así que todo rótulo por
debajo de .7rem sube a .7rem: sin eso, respetar el manual
costaría legibilidad, y eso no sería respetarlo. */
.campo > span,
.ticket-tab,
.visita-datos dt,
.paq-titulo,
.paq-desde,
.espacios h3,
.ticket-head span,
.tl-row dt,
.tl-group > p,
.resumen-tiempos li span,
.plato-nombre b,
.hueco figcaption,
.hueco .marca b,
.hueco .marca em,
.pie .cred{
font-family:var(--monu);
font-weight:600;
}
.ticket-head span,
.tl-row dt,
.tl-group > p,
.plato-nombre b,
.hueco .marca b,
.hueco .marca em{ font-size:.7rem; }
/* ══════════ SIN ESQUINAS ══════════════════════════════
Decisión de marca: en el sitio no hay un solo recuadro de ángulo
recto. Todo lo que es ficha, botón o etiqueta va en píldora; todo
lo que es marco de imagen o placa va en óvalo o esquina ancha.
Se concentra aquí a propósito: un solo lugar donde ajustar la
curvatura de todo el sitio. */
/* píldoras: botones, fichas y etiquetas de una línea */
.cta,
.enviar,
.ticket-tab,
.mark,
.ops span,
.check span,
.verificar,
.motivos button,
.skip,
.mas,
.rs-enviar,
.rs-suelta{ border-radius:999px; }
.mark{ padding:8px 14px; }
.ops span,.check span{ padding-left:1.25em; }
.verificar{ padding:.62em 1.25em; }
/* esquina ancha: las placas con varias líneas dentro */
.derivados > div,
.incluye > div,
.resumen-tiempos li,
.ev-card,
.rs-slot,
.q{ border-radius:clamp(18px,2.1vw,30px); }
/* el ticket es un papel: se redondea del lado que se ve */
.ticket-body{ border-radius:clamp(22px,2.4vw,34px) 0 0 clamp(22px,2.4vw,34px); }
/* la comanda conserva su filo dentado abajo y redondea la cabeza.
El papel picado va dentro, así que lleva el mismo radio. */
.paq{ --rpaq:clamp(26px,3vw,46px); border-radius:var(--rpaq) var(--rpaq) 0 0; }
.paq-picado{ clip-path:inset(0 round var(--rpaq) var(--rpaq) 0 0); }
/* marcos de imagen: esquina ancha, nunca ángulo recto */
.hueco{ border-radius:clamp(30px,4vw,70px); }
.ev-face{ border-radius:clamp(26px,3.2vw,56px); }
.rs-foto{ border-radius:clamp(14px,1.6vw,26px); }
.rs-previo{ border-radius:999px; }
/* la placa del manual es un óvalo de verdad */
/* el óvalo se calcula para que la caja del rótulo quepa inscrita:
con relación 649×475, un 21 % de holgura por lado basta y sobra */
.placa-amor{
border-radius:50%; padding:clamp(19px,2vw,29px) clamp(27px,2.8vw,41px);
display:grid; place-items:center;
}
/* ══════════ MOVIMIENTO REDUCIDO · cierra la hoja a propósito ══════════ */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
.js .tablelinea .tl{ stroke-dashoffset:0; }
.js .cub,.js .cubiertos-fila svg{ clip-path:inset(0 0 0 0); }
.js .lu,.js .mesa .mantel,.js .mesa .camino,.js .mesa .centro{ opacity:1; }
.js .q,.js .incluye > div,.js .ev-card,.js .rs-slot{ opacity:1; transform:none; }
.js .hueco.lleno img{ clip-path:none; transform:none; }
.js .hueco.lleno > figcaption{ opacity:1; }
.js .hueco.lleno video{ clip-path:none; transform:none; }
.pp-sw,.est-giro,.vapor,.fc-chef,.d-vapor path,.js .fz-vapor,.js .pista,.js .hpista,.js .desliza i{ animation:none; }
.js .techo{ transform:none; opacity:1; }
.js .liston{ clip-path:none; }
.js .fach-marca{ opacity:1; transform:none; }
.med svg,.med-xl svg,.ev-ilu svg,.med-ev svg,.rasgos svg,.paq-incluye svg,
.techo,.diaria,.mesa,.paq-picado,.cub,.cubiertos-fila svg,.ops span .ic{ filter:none; }
.js .paq{ opacity:1; transform:none; }
.js .tl-row{ clip-path:inset(0 0 0 0); }
.ticket,.mark,.enviar{ transition:opacity .3s linear; }
}