/* ═══════════════════════════════════════════════════════════
ÓRALE PADRE · landing pública
Mundo visual único y deliberado: papel crema de cartel de
cantina, tinta y burdeos. Todos los colores se pintan
explícitos — la página no hereda nada del tema del navegador.
El burdeos (#7C2430) es el mismo que ya usáis en la plataforma
interna y en la web de catering. El amarillo queda relegado a
un solo detalle: la chapa de "Nº1".
═══════════════════════════════════════════════════════════ */
:root{
/* ── Color ── */
--crema: #F5EEE6; /* papel: crema cálido, ligeramente rosado */
--crema-2: #EDE2D6; /* banda / panel elevado */
--crema-3: #FBF7F2; /* campos de formulario, casi blanco */
--linea: #DDD0C2; /* filetes */
--tinta: #241A1C; /* casi negro con sesgo vinoso, no gris neutro */
--tinta-2: #574548; /* texto secundario */
--humo: #6E5C60; /* apagado — 5,3:1 sobre crema; más claro no pasaba el mínimo */
/* Burdeos tinto. El anterior (#7B1D3A) estaba a MEDIO GRADO de tono del
de Hundred (#8A1538): era literalmente el mismo color. Este se va diez
grados hacia el rojo cálido y baja saturación, así que se lee como vino
y chile seco en vez de como carmín. 8,2:1 sobre el crema. */
--burdeos: #7C2430;
--burdeos-d: #5E1A24; /* hover */
--burdeos-cl: #F2E0DF; /* tinte suave */
--oro: #C98A12; /* solo la chapa Nº1 y algún subrayado */
--nopal: #4F7A3A; /* solo el tag vegetal */
/* ── Tipo ── */
--display: 'Anton', 'Arial Narrow', Impact, sans-serif;
--texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
/* ── Ritmo ── */
--gut: clamp(20px, 5vw, 64px);
--max: 1240px;
--marco: clamp(8px, 1.2vw, 16px); /* borde de cartel alrededor de la página */
/* filete de imprenta: burdeos rebajado, para cajas y marcos */
--filete: rgba(124,36,48,.34);
--filete-f: rgba(124,36,48,.62); /* el mismo, más marcado */
/* zigzag sacado del patrón interior de las letras del logo */
--zigzag: url("data:image/svg+xml;utf8,");
}
*,*::before,*::after{ box-sizing:border-box; }
/* Cualquier clase con display: propio pisa el atributo hidden del navegador.
Nos pasó con la chapa del local, que salía como una casilla vacía. */
[hidden]{ display:none !important; }
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
/* 'clip' y no 'hidden': hidden convierte al elemento en contenedor de
scroll, y entonces las barras pegajosas (cabecera y categorías de la
carta) dejan de pegarse en Safari. clip corta el desbordamiento
horizontal sin crear contenedor. */
overflow-x:clip;
}
body{
margin:0;
padding:var(--marco);
background:var(--crema);
color:var(--tinta);
font-family:var(--texto);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* ── Marco de cartel ──
Un filete fijo que encuadra toda la página, como el borde impreso
de un cartel o un mantel individual. No intercepta clics. */
body::after{
content:"";
position:fixed; inset:var(--marco);
border:1px solid var(--filete);
pointer-events:none;
z-index:300;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; }
li{ list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--burdeos); color:var(--crema); }
:focus-visible{
outline:3px solid var(--burdeos);
outline-offset:3px;
border-radius:2px;
}
.skip{
position:absolute; left:8px; top:8px; z-index:200;
transform:translateY(-300%); /* fuera de pantalla sin ensanchar la página */
background:var(--burdeos); color:var(--crema);
padding:12px 20px; font-weight:700;
}
.skip:focus{ transform:none; }
/* ─────────── Utilidades tipográficas ─────────── */
.eyebrow{
font-size:12px; font-weight:700; letter-spacing:.22em;
text-transform:uppercase; color:var(--burdeos);
margin-bottom:18px;
}
.big{
font-family:var(--display);
font-size:clamp(42px, 8vw, 96px);
/* interlineado más suelto que .92: las tildes de las mayúsculas
(CUÁNDO, AQUÍ) chocaban con la línea de arriba */
line-height:.98;
letter-spacing:.005em;
text-transform:uppercase;
color:var(--tinta);
padding-top:.06em;
}
.sec-head{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.sec-lede{
max-width:52ch; margin-top:20px;
color:var(--tinta-2); font-size:16px;
}
.zig{
height:12px;
background-image:var(--zigzag);
background-repeat:repeat-x;
background-size:24px 12px;
opacity:.5;
}
/* ── Marcas de corte ──
Escuadras en dos esquinas opuestas, como las cruces de registro
de una plancha de imprenta. Se aplica a cualquier caja con filete. */
.tick{ position:relative; }
.tick::before, .tick::after{
content:"";
position:absolute;
width:10px; height:10px;
border:1.5px solid var(--burdeos);
pointer-events:none;
}
.tick::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.tick::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* ─────────── Botones ─────────── */
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:8px;
font-family:var(--texto);
font-size:15px; font-weight:700;
letter-spacing:.04em; text-transform:uppercase;
padding:15px 26px;
border:2px solid transparent;
cursor:pointer;
transition:transform .12s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-p{
background:var(--burdeos); color:var(--crema);
border-color:var(--burdeos);
}
.btn-p:hover{ background:var(--burdeos-d); border-color:var(--burdeos-d); }
.btn-ghost{
background:transparent; color:var(--burdeos);
border-color:var(--burdeos);
}
.btn-ghost:hover{ background:var(--burdeos); color:var(--crema); }
.btn-sm{ padding:11px 18px; font-size:13px; }
.btn-block{ width:100%; padding:18px 24px; font-size:16px; }
/* ─────────── Nav ─────────── */
.nav{
position:sticky; top:var(--marco); z-index:100;
background:rgba(245,238,230,.93);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--filete);
}
.nav-in{
max-width:var(--max); margin:0 auto;
padding:12px var(--gut);
display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand img{ width:38px; height:auto; }
.brand span{
font-family:var(--display); font-size:21px;
text-transform:uppercase; letter-spacing:.03em;
color:var(--tinta);
}
/* cada enlace es su propia casilla con filete */
.nav-links{ display:flex; gap:8px; }
.nav-links a{
font-size:13px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--tinta);
padding:8px 14px;
border:1px solid var(--filete);
transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav-links a:hover{
color:var(--crema); background:var(--burdeos); border-color:var(--burdeos);
}
.burger{
display:none;
width:44px; height:38px;
background:transparent; border:2px solid var(--linea);
cursor:pointer;
padding:9px 10px;
flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:2px; background:var(--tinta); }
.mobnav{ display:none; }
@media (max-width:860px){
.nav-links, .nav-cta{ display:none; }
.burger{ display:flex; }
.mobnav{
display:block;
overflow:hidden;
max-height:0;
transition:max-height .28s ease;
border-top:0 solid var(--linea);
}
.mobnav.open{ max-height:60vh; border-top-width:1px; }
.mobnav a{
display:block; padding:15px var(--gut);
font-weight:600; text-transform:uppercase;
font-size:15px; letter-spacing:.05em;
border-bottom:1px solid var(--linea);
color:var(--tinta);
}
}
/* ─────────── Hero ─────────── */
.hero{ padding:clamp(48px,9vw,104px) 0 clamp(40px,7vw,80px); }
.hero-in{
max-width:var(--max); margin:0 auto; padding:0 var(--gut);
display:grid; grid-template-columns:1.05fr .95fr;
gap:clamp(28px,5vw,72px); align-items:center;
}
.hero h1{
font-family:var(--display);
font-size:clamp(56px, 11.5vw, 148px);
/* el contorno de "EL SUELO" ocupa más que la letra maciza: por debajo
de .93 las líneas se tocan en móvil */
line-height:.93;
text-transform:uppercase;
letter-spacing:-.005em;
color:var(--tinta);
display:flex; flex-direction:column;
}
.hero h1 .l2{ color:var(--burdeos); }
.hero h1 .l3{
-webkit-text-stroke:2px var(--burdeos);
color:transparent;
}
.lede{
margin-top:26px; max-width:44ch;
font-size:clamp(16px,1.7vw,19px); color:var(--tinta-2);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-facts{
display:flex; flex-wrap:wrap; gap:14px 34px;
margin-top:38px; padding-top:26px;
border-top:1px solid var(--linea);
font-size:14px; color:var(--humo);
}
.hero-facts b{
display:block;
font-family:var(--display); font-size:26px;
color:var(--burdeos); letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.hero-shot{ margin:0; }
/* la foto va encuadrada, no suelta */
.shot-marco{
position:relative;
border:1px solid var(--filete-f);
padding:10px;
background:var(--crema);
}
.shot-marco img{ width:100%; }
/* sello de tinta, ligeramente torcido, como un tampón sobre el cartel */
.sello{
position:absolute; right:-14px; bottom:34px;
transform:rotate(-7deg);
display:flex; flex-direction:column; align-items:center; gap:1px;
padding:9px 16px;
background:var(--crema);
border:2px solid var(--burdeos);
box-shadow:0 0 0 2px var(--crema), 0 0 0 3px var(--burdeos);
color:var(--burdeos);
text-transform:uppercase;
}
.sello b{ font-family:var(--display); font-size:19px; letter-spacing:.04em; line-height:1; }
.sello i{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.22em; }
.hero-shot figcaption{
margin-top:16px; font-size:13px; color:var(--humo);
letter-spacing:.02em;
}
.hero-shot figcaption b{ color:var(--tinta); }
@media (max-width:860px){
.hero-in{ grid-template-columns:1fr; }
.hero-shot{ order:-1; }
.shot-marco img,
.hero-video{ max-height:50vh; width:100%; object-fit:cover; }
.sello{ right:6px; bottom:26px; transform:rotate(-6deg) scale(.9); }
}
/* ─────────── Marquee ─────────── */
/* Banda burdeos a sangre: el bloque de color más grande de la página */
.marquee{
overflow:hidden;
padding:18px 0;
background:var(--burdeos);
}
.marquee-track{
display:flex; width:max-content;
animation:slide 42s linear infinite;
}
.marquee span{
font-family:var(--display);
font-size:clamp(28px,5vw,54px);
text-transform:uppercase;
letter-spacing:.03em;
white-space:nowrap;
padding-right:.5em;
color:transparent;
-webkit-text-stroke:1.4px var(--crema);
}
@keyframes slide{ to{ transform:translateX(-50%); } }
/* ─────────── Chapa del local elegido (cabecera) ─────────── */
.chip-local{
display:flex; align-items:center; gap:6px;
padding:7px 12px;
border:1px solid var(--burdeos);
font-size:12px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--burdeos);
white-space:nowrap;
}
.chip-local svg{
width:14px; height:14px; flex:none;
fill:none; stroke:currentColor; stroke-width:1.9;
stroke-linejoin:round;
}
.chip-local:hover{ background:var(--burdeos); color:var(--crema); }
@media (max-width:860px){ .chip-local{ display:none; } }
/* ─────────── Pedir: dos pasos ─────────── */
.pedir{ padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,70px); }
.pedir-in{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(34px,5vw,56px) auto 0;
display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(16px,2vw,26px);
align-items:start;
}
.paso{
position:relative;
border:1px solid var(--filete);
padding:clamp(24px,3vw,34px);
background:var(--crema);
}
.paso-acc{ background:var(--crema-2); }
.paso-k{
display:flex; align-items:center; gap:10px;
font-size:11.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--burdeos);
margin-bottom:20px;
}
.paso-k b{
display:grid; place-items:center;
width:22px; height:22px;
background:var(--burdeos); color:var(--crema);
font-family:var(--display); font-size:13px;
letter-spacing:0; padding-top:1px;
}
.paso-ubi .btn{ width:100%; }
.ubi-nota{
margin-top:11px; font-size:12.5px; line-height:1.5; color:var(--humo);
}
.ubi-o{
display:flex; align-items:center; gap:12px;
margin:20px 0 14px;
font-size:11.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--humo);
}
.ubi-o::before, .ubi-o::after{
content:""; flex:1 1 auto; height:1px; background:var(--linea);
}
.ubi-manual{ display:flex; flex-direction:column; gap:8px; }
.ubi-manual button{
font-family:var(--texto);
font-size:14px; font-weight:700; letter-spacing:.05em;
text-transform:uppercase;
text-align:left;
padding:12px 15px;
color:var(--tinta);
background:transparent;
border:1px solid var(--linea);
cursor:pointer;
transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.ubi-manual button:hover{ border-color:var(--burdeos); color:var(--burdeos); }
.ubi-manual button[aria-pressed="true"]{
background:var(--burdeos); color:var(--crema); border-color:var(--burdeos);
}
.ubi-estado{ margin-top:14px; font-size:13.5px; line-height:1.5; }
.ubi-estado:empty{ margin-top:0; }
.ubi-estado.es-ok{ color:var(--nopal); font-weight:600; }
.ubi-estado.es-error, .ubi-estado.es-lejos{ color:var(--burdeos); font-weight:600; }
.ubi-estado.es-cargando{ color:var(--humo); }
.ubi-enlace{
display:inline-block; margin-top:6px;
color:var(--burdeos); font-weight:700;
border-bottom:1px solid currentColor;
}
.acc-vacio{ color:var(--humo); font-size:15px; padding:6px 0 10px; }
.acc-cabecera{
display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
padding-bottom:14px; margin-bottom:18px;
border-bottom:1px solid var(--linea);
}
.acc-cabecera span{
font-family:var(--display); font-size:clamp(22px,2.6vw,30px);
text-transform:uppercase; letter-spacing:.03em; color:var(--tinta);
}
.acc-cabecera em{ font-style:normal; font-size:13.5px; color:var(--humo); }
.acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.acc-card{
display:flex; flex-direction:column; gap:8px;
padding:20px 18px 18px;
background:var(--crema);
border:1px solid var(--filete);
transition:border-color .16s ease, transform .16s ease;
}
.acc-card:hover{ border-color:var(--burdeos); transform:translateY(-2px); }
.acc-destacada{ border-color:var(--burdeos); border-width:2px; }
.acc-badge{
align-self:flex-start;
font-size:9.5px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase;
padding:3px 7px;
background:var(--burdeos); color:var(--crema);
}
.acc-badge-sec{ background:transparent; color:var(--humo); border:1px solid var(--linea); }
.acc-card h3{
font-family:var(--display); font-size:clamp(24px,2.6vw,30px);
text-transform:uppercase; letter-spacing:.03em; color:var(--tinta);
}
.acc-desc{ font-size:13.5px; line-height:1.5; color:var(--tinta-2); flex:1 1 auto; }
.acc-cta{
margin-top:6px;
font-size:13px; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; color:var(--burdeos);
border-bottom:2px solid currentColor;
align-self:flex-start; padding-bottom:2px;
}
.acc-card.sin-enlace .acc-cta{ color:var(--humo); }
.acc-pie{ margin-top:16px; font-size:13.5px; color:var(--humo); }
.acc-pie a{ color:var(--burdeos); font-weight:600; border-bottom:1px solid currentColor; }
.pedir-fuera{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(22px,3vw,32px) auto 0;
padding-top:18px;
border-top:1px solid var(--linea);
font-size:14.5px; color:var(--humo);
}
.pedir-fuera a{ color:var(--burdeos); font-weight:700; border-bottom:1px solid currentColor; }
@media (max-width:860px){
.pedir-in{ grid-template-columns:1fr; }
}
@media (max-width:480px){
.acc-grid{ grid-template-columns:1fr; }
}
/* ─────────── Planes: cajas y catering ─────────── */
.cajas, .catering{ padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,70px); }
.catering{ background:var(--crema-2); }
.planes{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(34px,5vw,56px) auto 0;
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(14px,1.8vw,22px);
align-items:stretch;
}
.planes-4{ grid-template-columns:repeat(4,1fr); }
.plan{
position:relative;
display:flex; flex-direction:column; gap:10px;
background:var(--crema);
border:1px solid var(--filete);
padding:clamp(22px,2.6vw,30px);
}
.plan-top{ border-color:var(--burdeos); border-width:2px; }
.plan-cinta{
position:absolute; top:0; right:clamp(14px,2vw,20px);
transform:translateY(-50%);
background:var(--burdeos); color:var(--crema);
font-size:10px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase;
padding:4px 10px;
}
.plan-para{
font-size:11px; font-weight:700; letter-spacing:.18em;
text-transform:uppercase; color:var(--burdeos);
}
.plan h3{
font-family:var(--display); font-size:clamp(26px,2.8vw,34px);
text-transform:uppercase; letter-spacing:.02em; color:var(--tinta);
line-height:1;
}
.plan-precio{
display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
padding-bottom:14px; margin-bottom:4px;
border-bottom:1px solid var(--linea);
}
.plan-precio b{
font-family:var(--display); font-size:30px; color:var(--burdeos);
letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.plan-precio span{ font-size:12.5px; color:var(--humo); }
.plan-lista{ display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
.plan-lista li{
position:relative; padding-left:16px;
font-size:14px; line-height:1.45; color:var(--tinta-2);
}
.plan-lista li::before{
content:""; position:absolute; left:0; top:.62em;
width:6px; height:6px; background:var(--burdeos);
}
.plan-envio{ font-size:12.5px; color:var(--humo); padding-top:10px; border-top:1px solid var(--linea); }
.plan .btn{ margin-top:12px; }
.envios{
position:relative;
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(18px,2.4vw,26px) auto 0;
border:1px solid var(--filete);
padding:clamp(22px,2.6vw,30px);
}
.envios h3{
font-family:var(--display); font-size:22px;
text-transform:uppercase; letter-spacing:.03em; color:var(--tinta);
margin-bottom:16px;
}
.envios-lista{
display:grid; grid-template-columns:repeat(3,1fr);
gap:10px clamp(16px,2vw,30px);
}
.envios-lista > div{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
padding-bottom:7px;
border-bottom:1px dotted var(--linea);
}
.envios-lista dt{ font-size:14px; color:var(--tinta-2); }
.envios-lista dd{
font-size:14px; font-weight:700; color:var(--burdeos);
font-variant-numeric:tabular-nums; white-space:nowrap;
}
.envios-nota{ margin-top:16px; font-size:13.5px; color:var(--humo); }
.envios-nota a{ color:var(--burdeos); font-weight:600; border-bottom:1px solid currentColor; }
@media (max-width:1000px){
.planes, .planes-4{ grid-template-columns:1fr 1fr; }
.envios-lista{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
.planes, .planes-4{ grid-template-columns:1fr; }
.envios-lista{ grid-template-columns:1fr; }
}
/* ─────────── Formulario de catering ─────────── */
.cat-form-in{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(44px,6vw,76px) auto 0;
display:grid; grid-template-columns:.85fr 1.15fr;
gap:clamp(32px,5vw,64px); align-items:start;
}
.cat-form-copy p{ color:var(--tinta-2); margin-top:18px; max-width:40ch; }
.cat-ventajas{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.cat-ventajas li{
position:relative; padding-left:18px;
font-size:14.5px; color:var(--tinta-2);
}
.cat-ventajas li::before{
content:""; position:absolute; left:0; top:.6em;
width:8px; height:8px; background:var(--burdeos);
}
.cat-directo{
margin-top:22px; padding-top:18px;
border-top:1px solid var(--linea);
font-size:14.5px; color:var(--humo) !important;
}
.cat-directo a{ color:var(--burdeos); font-weight:700; border-bottom:1px solid currentColor; }
.cat-form{
position:relative;
display:flex; flex-direction:column; gap:18px;
border:1px solid var(--filete-f);
background:var(--crema);
padding:clamp(22px,2.8vw,34px);
}
.cat-form::before, .cat-form::after{
content:""; position:absolute;
width:10px; height:10px;
border:1.5px solid var(--burdeos);
}
.cat-form::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.cat-form::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.check{ display:grid; grid-template-columns:auto 1fr; gap:4px 11px; align-items:start; }
.check input{ width:18px; height:18px; margin-top:3px; accent-color:var(--burdeos); }
.check span{ font-size:14px; line-height:1.5; color:var(--tinta-2); }
.check a{ color:var(--burdeos); font-weight:600; border-bottom:1px solid currentColor; }
.check .err{ grid-column:2; }
.check.bad input{ outline:2px solid var(--burdeos); outline-offset:2px; }
.f-foot.es-ok{ color:var(--nopal); font-weight:600; }
.f-foot.es-error{ color:var(--burdeos); font-weight:600; }
.f-foot a{ color:inherit; border-bottom:1px solid currentColor; }
.cat-ok{ text-align:center; padding:clamp(20px,4vw,44px) 0; }
.cat-ok-t{
font-family:var(--display); font-size:38px;
text-transform:uppercase; letter-spacing:.03em;
color:var(--burdeos); margin-bottom:12px;
}
.cat-ok p{ color:var(--tinta-2); max-width:44ch; margin:0 auto; }
.cat-ok a{ color:var(--burdeos); font-weight:700; border-bottom:1px solid currentColor; }
@media (max-width:820px){
.cat-form-in{ grid-template-columns:1fr; }
}
/* ─────────── Carta ─────────── */
.carta{ padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,80px); }
.carta-grid{
max-width:var(--max); margin:clamp(38px,6vw,68px) auto 0;
padding:0 var(--gut);
}
.menu{ display:flex; flex-direction:column; gap:clamp(26px,3.4vw,40px); }
/* cada categoría es una ficha con filete y su pestaña montada arriba */
.cat{
position:relative;
border:1px solid var(--filete);
padding:clamp(30px,3vw,38px) clamp(18px,2.4vw,30px) clamp(22px,2.6vw,30px);
}
.cat-head{
position:absolute; top:0; left:clamp(14px,2vw,22px); right:clamp(14px,2vw,22px);
transform:translateY(-50%);
display:flex; align-items:center; justify-content:space-between;
gap:12px;
pointer-events:none;
}
.cat-head h3{
font-family:var(--display);
font-size:clamp(22px,2.6vw,30px);
text-transform:uppercase; letter-spacing:.04em;
color:var(--crema);
background:var(--burdeos);
padding:5px 14px 4px;
line-height:1.12;
}
.cat-price{
font-size:12.5px; font-weight:700; letter-spacing:.08em;
color:var(--burdeos); white-space:nowrap;
background:var(--crema);
padding:4px 10px;
border:1px solid var(--filete);
font-variant-numeric:tabular-nums;
text-transform:uppercase;
}
.cat-note{
margin-top:2px; font-size:14px; color:var(--humo); font-style:italic;
}
/* el panel de "Y además" no lleva precio, la pestaña va sola */
.cat-min .cat-head{ justify-content:flex-start; }
.dishes{ display:none; }
/* ─────────── Fichas de plato ─────────── */
.platos{
margin-top:26px;
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(12px,1.6vw,20px);
container-type:inline-size;
}
.plato{
position:relative;
display:flex; flex-direction:column;
background:var(--crema-3);
border:1px solid var(--filete);
transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.plato:hover{ border-color:var(--burdeos); transform:translateY(-2px); }
.plato-foto{ overflow:hidden; }
.plato-foto img{
width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .7s var(--ease);
}
.plato:hover .plato-foto img{ transform:scale(1.05); }
/* Sin foto todavía: en vez de un hueco gris, el nombre a tamaño cartel
sobre burdeos. Queda intencionado y señala qué falta por fotografiar. */
.plato-sinfoto{
aspect-ratio:4/3;
display:grid; place-items:center;
padding:14px;
background:var(--burdeos);
background-image:var(--zigzag);
background-repeat:repeat-x;
background-position:center bottom 10px;
background-size:20px 10px;
}
.plato-sinfoto span{
font-family:var(--display);
font-size:clamp(20px,2.2vw,30px); line-height:.98;
text-transform:uppercase; letter-spacing:.02em;
color:transparent;
-webkit-text-stroke:1.2px var(--crema);
text-align:center;
}
.plato-cuerpo{
padding:16px 16px 14px;
display:flex; flex-direction:column; gap:6px;
flex:1 1 auto;
}
.plato-nombre{
font-family:var(--display);
font-size:clamp(19px,2vw,25px); line-height:1.02;
text-transform:uppercase; letter-spacing:.02em;
color:var(--tinta);
padding-right:44px; /* hueco para el botón + */
}
.plato-precio{
font-size:15px; font-weight:700; color:var(--burdeos);
font-variant-numeric:tabular-nums;
}
.plato-desc{
font-size:13.5px; line-height:1.5; color:var(--tinta-2);
}
/* El botón +, calcado en intención al de Hundred: abre lo que la ley
obliga a poder consultar, sin llenar la ficha de letra pequeña. */
.plato-mas{
position:absolute; right:0; bottom:0;
width:42px; height:42px;
display:grid; place-items:center;
background:var(--burdeos);
border:0; cursor:pointer;
transition:background-color .18s var(--ease);
}
.plato-mas:hover{ background:var(--burdeos-d); }
.plato-signo{
position:relative; display:block; width:14px; height:14px;
}
.plato-signo::before, .plato-signo::after{
content:""; position:absolute; left:0; top:6px;
width:14px; height:2px; background:var(--crema);
transition:transform .22s var(--ease);
}
.plato-signo::after{ transform:rotate(90deg); }
.plato-mas[aria-expanded="true"] .plato-signo::after{ transform:rotate(0deg); }
/* el texto de alérgenos vive en el diálogo; aquí solo lo guardamos
para que el JS lo lea, sin ocupar sitio en la rejilla */
.plato-extra{ display:none; }
.plato-alergenos{
font-size:12.5px; line-height:1.5; color:var(--humo);
padding-top:12px;
border-top:1px dotted var(--linea);
}
.visually-hidden{
position:absolute; width:1px; height:1px;
margin:-1px; padding:0; overflow:hidden;
clip-path:inset(50%); white-space:nowrap;
}
/* icono de la categoría, en línea con el titular */
.cat-head h3{ display:flex; align-items:center; gap:9px; }
.cat-icono{
width:20px; height:20px; flex:none;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.carta-nav a, .carta-nav button{ display:inline-flex; align-items:center; gap:7px; }
@media (max-width:900px){
/* dos columnas también en móvil: caben, y así se ve más carta de un
vistazo sin tener que scrollear medio kilómetro */
.platos{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.plato-cuerpo{ padding:13px 12px 12px; gap:5px; }
.plato-nombre{ font-size:17px; padding-right:38px; }
.plato-precio{ font-size:14px; }
.plato-desc{ font-size:12.5px; line-height:1.45; }
.plato-mas{ width:36px; height:36px; }
.plato-extra{ padding:0 12px 12px; margin-right:36px; }
.plato-sinfoto span{ font-size:17px; }
.tag{ font-size:9px; padding:2px 5px; letter-spacing:.1em; margin-left:5px; }
}
/* solo si la ficha se queda de verdad estrecha, una columna */
@container (max-width: 240px){
.platos{ grid-template-columns:1fr; }
}
/* ─────────── Chapas de plato ─────────── */
.tag{
display:inline-block; vertical-align:middle;
/* dentro de .plato-nombre heredaría Anton y la cursiva del */
font-family:var(--texto); font-style:normal;
margin-left:7px;
font-size:10px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase;
padding:3px 7px;
border:1px solid currentColor;
white-space:nowrap;
}
.tag-hot{ color:var(--burdeos); }
.tag-veg{ color:var(--nopal); }
.tag-pre{ color:var(--tinta); }
.tag-fus{ color:var(--humo); }
.tag-top{ color:var(--tinta); background:var(--oro); border-color:var(--oro); }
.plato-nombre .tag{ vertical-align:3px; }
/* ─────────── Bebidas y salsas ─────────── */
.minis{ margin-top:20px; display:grid; gap:14px; }
.minis dt{
font-size:12px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--burdeos);
}
.minis dd{ font-size:15px; color:var(--tinta-2); }
.minis dd b{ color:var(--tinta); white-space:nowrap; }
/* ─────────── Neón ─────────── */
/* Banda oscura a sangre: el respiro de contraste dentro del crema */
.neon{
position:relative;
margin:clamp(50px,8vw,96px) 0;
min-height:clamp(440px,52vw,640px);
overflow:hidden;
background:var(--tinta);
display:flex; align-items:center;
}
.neon > img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center 30%;
opacity:.55;
}
.neon::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, var(--tinta) 4%, rgba(36,26,28,.74) 46%, rgba(36,26,28,.22) 100%);
}
.neon-copy{
position:relative; z-index:1;
max-width:var(--max); width:100%;
margin:0 auto; padding:clamp(40px,6vw,72px) var(--gut);
display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
.neon-copy .eyebrow{ color:var(--crema-2); }
.neon-copy .big{ color:var(--crema); }
.neon-copy p{ color:var(--crema-2); max-width:40ch; }
.neon-copy .btn{ margin-top:8px; }
/* sobre fondo oscuro el botón burdeos pierde fuerza: va en crema */
.neon-copy .btn-p{
background:var(--crema); color:var(--tinta); border-color:var(--crema);
}
.neon-copy .btn-p:hover{ background:var(--crema-2); border-color:var(--crema-2); }
@media (max-width:700px){
.neon::after{
background:linear-gradient(180deg, rgba(36,26,28,.5) 0%, rgba(36,26,28,.9) 65%);
}
}
/* ─────────── Locales ─────────── */
.locales{ padding:clamp(50px,8vw,96px) 0 clamp(56px,9vw,110px); }
/* tres fichas sueltas con marcas de corte, no una rejilla continua */
.loc-grid{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(34px,5vw,60px) auto 0;
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(14px,1.6vw,22px);
}
.loc{
position:relative;
background:var(--crema);
border:1px solid var(--filete);
padding:clamp(26px,3.4vw,38px);
display:flex; flex-direction:column; gap:14px;
}
.loc::before, .loc::after{
content:"";
position:absolute;
width:10px; height:10px;
border:1.5px solid var(--burdeos);
}
.loc::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.loc::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* el local que el visitante ha elegido arriba */
.loc-tuyo{ border-color:var(--burdeos); border-width:2px; background:var(--crema-2); }
.loc-tuyo .loc-barrio::after{
content:" · el tuyo";
color:var(--tinta-2);
}
.loc-barrio{
font-size:11px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--burdeos);
}
.loc h3{
font-family:var(--display);
font-size:clamp(28px,3.2vw,40px); line-height:1;
text-transform:uppercase; color:var(--tinta);
}
.loc address{ font-size:15px; color:var(--tinta-2); line-height:1.55; }
.loc-h{
display:grid; grid-template-columns:auto 1fr; gap:6px 16px;
padding-top:14px; margin-top:2px;
border-top:1px solid var(--linea);
font-size:13.5px;
}
.loc-h dt{ color:var(--humo); font-weight:600; white-space:nowrap; }
.loc-h dd{ color:var(--tinta-2); font-variant-numeric:tabular-nums; }
.loc-act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:18px; }
@media (max-width:900px){ .loc-grid{ grid-template-columns:1fr; } }
/* ─────────── Reserva ─────────── */
.reserva{ padding:clamp(56px,9vw,110px) 0; background:var(--crema-2); }
.res-in{
max-width:var(--max); margin:0 auto; padding:0 var(--gut);
display:grid; grid-template-columns:.85fr 1.15fr;
gap:clamp(32px,5vw,72px); align-items:start;
}
.res-copy p{ color:var(--tinta-2); margin-top:18px; max-width:38ch; }
.res-note{
font-size:14.5px; color:var(--humo) !important;
padding-top:18px; border-top:1px solid var(--linea);
}
.res-note a{ color:var(--burdeos); font-weight:600; border-bottom:1px solid currentColor; }
.res-form{
display:flex; flex-direction:column; gap:18px;
position:relative;
border:1px solid var(--filete-f);
background:var(--crema);
padding:clamp(22px,2.8vw,34px);
}
.res-form::before, .res-form::after{
content:"";
position:absolute;
width:10px; height:10px;
border:1.5px solid var(--burdeos);
}
.res-form::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.res-form::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.f-row-3{ grid-template-columns:1fr 1fr .8fr; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{
font-size:12px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--tinta-2);
}
.field > span i{ font-style:normal; color:var(--humo); letter-spacing:.06em; text-transform:none; }
.field input, .field select, .field textarea{
font-family:var(--texto); font-size:16px;
color:var(--tinta);
background:var(--crema-3);
border:1px solid var(--linea);
padding:14px 16px;
width:100%;
transition:border-color .18s ease;
}
.field textarea{ resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:#948488; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--humo); }
.field input:focus, .field select:focus, .field textarea:focus{
border-color:var(--burdeos); outline:none;
}
.err{
display:none;
font-size:12.5px; font-style:normal; color:var(--burdeos); font-weight:600;
}
.field.bad input, .field.bad select{ border-color:var(--burdeos); background:var(--burdeos-cl); }
.field.bad .err{ display:block; }
.f-foot{ font-size:13px; color:var(--humo); text-align:center; }
@media (max-width:820px){
.res-in{ grid-template-columns:1fr; }
}
@media (max-width:560px){
.f-row, .f-row-3{ grid-template-columns:1fr; }
}
/* ─────────── Footer ─────────── */
/* Cierra en burdeos macizo: el logo blanco vuelve a funcionar aquí */
.foot{ background:var(--burdeos); color:var(--crema); }
.foot-in{
max-width:var(--max); margin:0 auto;
padding:clamp(44px,6vw,72px) var(--gut);
display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:clamp(26px,4vw,50px);
}
.foot-brand img{ width:74px; margin-bottom:18px; }
.foot-brand p{ font-size:14.5px; color:var(--burdeos-cl); line-height:1.6; }
.foot-col{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.foot-col h4{
font-size:11px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--crema);
margin-bottom:4px;
}
.foot-col a{ font-size:14.5px; color:var(--burdeos-cl); }
.foot-col a:hover{ color:var(--crema); text-decoration:underline; }
.foot-bar{
border-top:1px solid rgba(245,238,230,.22);
max-width:var(--max); margin:0 auto;
padding:20px var(--gut);
display:flex; flex-wrap:wrap; gap:10px 24px;
justify-content:space-between;
font-size:13px; color:var(--burdeos-cl);
}
.foot-legal a:hover{ color:var(--crema); text-decoration:underline; }
@media (max-width:820px){
.foot-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
.foot-in{ grid-template-columns:1fr; }
}
/* ─────────── Reveal al hacer scroll ─────────── */
.rv{ opacity:0; transform:translateY(22px); }
.rv.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
.marquee-track{ animation:none; }
.rv, .rv.in{ opacity:1; transform:none; transition:none; }
.btn{ transition:none; }
}
/* ═══════════════════════════════════════════════════════════
CAPA 2030
Lo que separa una web correcta de una web de marca:
textura de papel, movimiento ligado al scroll (sin JS),
barra de pedido siempre a mano en móvil y una carta que
se navega como una app.
═══════════════════════════════════════════════════════════ */
:root{
--nav-h: 62px; /* lo mide el JS al cargar */
--ease: cubic-bezier(.2,.8,.2,1);
}
/* ─────── Grano de papel ───────
El crema plano se ve digital. Un grano finísimo por encima de
todo hace que parezca impreso sobre stock. Va fijo para que no
"resbale" con el scroll, como el grano de una fotografía real. */
body::before{
content:"";
position:fixed; inset:0;
z-index:250;
pointer-events:none;
opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ─────── Barra de progreso de lectura ───────
Ligada al scroll con CSS puro: ni un byte de JavaScript. */
.progreso{
position:fixed; top:0; left:0; right:0;
height:3px; z-index:400;
transform-origin:0 50%;
transform:scaleX(0);
background:var(--burdeos);
pointer-events:none;
}
@supports (animation-timeline: scroll()){
.progreso{
animation:barra linear;
animation-timeline:scroll(root block);
}
@keyframes barra{ to{ transform:scaleX(1); } }
}
/* ─────── Aparición ligada al scroll ───────
Donde el navegador lo soporta, el JS se aparta y lo hace CSS:
más suave, sin trabajo en el hilo principal. */
@supports (animation-timeline: view()){
.rv{ opacity:1; transform:none; }
.rv-css{
animation:asomar linear both;
animation-timeline:view();
animation-range:entry 0% entry 42%;
}
@keyframes asomar{
from{ opacity:0; transform:translateY(26px); }
to { opacity:1; transform:none; }
}
}
/* ─────── Transición entre anclas ─────── */
@view-transition{ navigation:auto; }
/* ─────── Foto viva dentro del marco ───────
La imagen respira dentro de su filete al pasar por encima.
El marco no se mueve: sólo el contenido. */
.shot-marco, .zona-foto{ overflow:hidden; }
.shot-marco img, .zona-foto img{
transition:transform .7s var(--ease);
}
.zona-foto:hover img{ transform:scale(1.045); }
/* ─────── Botones con más intención ─────── */
.btn{ position:relative; overflow:hidden; }
.btn-p::after{
content:""; position:absolute; inset:0;
background:var(--tinta);
transform:translateY(101%);
transition:transform .38s var(--ease);
z-index:-1;
}
.btn-p:hover::after{ transform:translateY(0); }
.btn-p{ z-index:0; }
/* ─────── Carta: cabecera de categorías pegajosa ─────── */
.carta-nav{
position:sticky;
top:calc(var(--marco) + var(--nav-h));
z-index:90;
margin:clamp(26px,4vw,40px) auto 0;
width:min(var(--max), calc(100% - 2 * var(--gut)));
background:var(--crema);
border-top:1px solid var(--filete);
border-bottom:1px solid var(--filete);
}
.carta-nav-in{
display:flex; gap:8px;
overflow-x:auto;
scrollbar-width:none;
padding:11px 0;
scroll-snap-type:x proximity;
}
.carta-nav-in::-webkit-scrollbar{ display:none; }
.carta-nav a,
.carta-nav button{
flex:none;
font-family:var(--texto);
background:var(--crema);
cursor:pointer;
scroll-snap-align:start;
font-size:12.5px; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--tinta-2);
padding:8px 14px;
border:1px solid var(--filete);
white-space:nowrap;
transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.carta-nav a:hover,
.carta-nav button:hover{ border-color:var(--burdeos); color:var(--burdeos); }
.carta-nav a[aria-current="true"],
.carta-nav button[aria-pressed="true"]{
background:var(--burdeos); color:var(--crema); border-color:var(--burdeos);
}
/* que el ancla no quede tapada por las dos barras pegajosas */
.cat{ scroll-margin-top:calc(var(--marco) + var(--nav-h) + 74px); }
/* ─────── Barra de pedido fija en móvil ───────
El patrón que más convierte en hostelería: la acción principal
siempre a un dedo, sin tener que volver arriba. */
.barra-pedido{ display:none; }
@media (max-width:860px){
.barra-pedido{
position:fixed; left:0; right:0; bottom:0;
z-index:200;
display:grid; grid-template-columns:1fr auto;
gap:1px;
background:var(--burdeos);
border-top:1px solid var(--burdeos);
transform:translateY(110%);
transition:transform .35s var(--ease);
padding-bottom:env(safe-area-inset-bottom);
}
.barra-pedido.dentro{ transform:none; }
.barra-pedido a{
display:flex; align-items:center; justify-content:center; gap:8px;
padding:16px 18px;
font-size:14px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase;
background:var(--burdeos); color:var(--crema);
}
.barra-pedido .bp-sec{
background:var(--crema); color:var(--burdeos);
padding-inline:20px;
}
.barra-pedido b{ font-weight:700; }
.barra-pedido small{
display:block; font-size:9.5px; letter-spacing:.16em;
opacity:.72; font-weight:700;
}
/* que la barra no tape el final de la página */
.foot-bar{ padding-bottom:calc(20px + 62px + env(safe-area-inset-bottom)); }
}
/* ─────── Bloque editorial: vídeo vertical + oficio ─────── */
.oficio{
padding:clamp(56px,9vw,104px) 0;
background:var(--tinta);
color:var(--crema);
}
.oficio .eyebrow{ color:var(--crema-2); }
.oficio .big{ color:var(--crema); }
.oficio-in{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(34px,5vw,54px) auto 0;
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(20px,3vw,40px);
align-items:start;
}
/* el vídeo es vertical: le damos su proporción real y lo dejamos mandar */
.video-vert{
position:relative;
aspect-ratio:9/16;
/* el tope de alto y el de ancho tienen que ir a la par, si no la caja
deja de ser 9:16 y el vídeo queda con bandas negras a los lados */
max-height:78vh;
max-width:calc(78vh * 9 / 16);
margin-inline:auto;
border:1px solid rgba(245,238,230,.28);
padding:8px;
background:rgba(245,238,230,.05);
}
.video-vert iframe,
.video-vert img{
width:100%; height:100%;
display:block; border:0;
object-fit:cover;
}
.video-pie{
margin-top:12px; font-size:12px; letter-spacing:.1em;
text-transform:uppercase; color:var(--crema-2); opacity:.8;
}
.oficio-lado{ display:flex; flex-direction:column; gap:clamp(16px,2vw,24px); }
.oficio-texto p{ color:var(--crema-2); font-size:16.5px; max-width:44ch; }
.oficio-texto p + p{ margin-top:14px; }
.oficio-fotos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.zona-foto{
border:1px solid rgba(245,238,230,.28);
padding:7px;
background:rgba(245,238,230,.05);
}
.zona-foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.zona-foto figcaption{
margin-top:8px; padding-top:6px;
border-top:1px solid rgba(245,238,230,.22);
font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
color:var(--crema-2);
}
@media (max-width:860px){
.oficio-in{ grid-template-columns:1fr; }
.video-vert{ max-height:none; max-width:420px; margin-inline:auto; width:100%; }
}
/* ─────── Franja de producto fresco ─────── */
.fresco{
position:relative;
margin:clamp(50px,8vw,90px) 0;
min-height:clamp(360px,42vw,520px);
overflow:hidden;
display:flex; align-items:center;
background:var(--crema-2);
}
.fresco > img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center 55%;
}
.fresco::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, rgba(36,26,28,.9) 0%, rgba(36,26,28,.62) 48%, rgba(36,26,28,.12) 100%);
}
.fresco-copy{
position:relative; z-index:1;
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:0 auto; padding:clamp(34px,5vw,60px) 0;
}
.fresco-copy blockquote{
margin:0; max-width:22ch;
font-family:var(--display);
font-size:clamp(30px,4.6vw,58px);
line-height:1.02; text-transform:uppercase;
color:var(--crema); letter-spacing:.01em;
}
.fresco-copy cite{
display:block; margin-top:18px;
font-style:normal; font-size:12px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color:var(--crema-2);
}
/* ─────── Consultas de contenedor ───────
Las fichas se adaptan al hueco que tienen, no al ancho de la
ventana. Así una misma ficha vale en una rejilla de 4 o de 2. */
.planes, .acc-grid{ container-type:inline-size; }
@container (max-width: 300px){
.plan h3{ font-size:24px; }
.plan-precio b{ font-size:26px; }
.plan-lista li{ font-size:13px; }
}
/* ─────── Detalles finos de tipografía ─────── */
.lede, .sec-lede, .d-desc, .oficio-texto p, .plan-lista li{ text-wrap:pretty; }
.big, .hero h1, .plan h3, .loc h3{ text-wrap:balance; }
@media (prefers-reduced-motion:reduce){
.progreso{ display:none; }
.rv-css{ animation:none; opacity:1; transform:none; }
.shot-marco img, .zona-foto img{ transition:none; }
.btn-p::after{ transition:none; }
.barra-pedido{ transition:none; }
}
/* ═══════════════════════════════════════════════════════════
CAPA TORTILLA
Tres cosas que vi en su web y encajan aquí:
la monoespaciada para el texto de servicio, el botón con
sombra dura, y la manecilla — que no es un emoji cualquiera,
es el ornamento de imprenta de toda la vida.
═══════════════════════════════════════════════════════════ */
:root{
--mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
/* Texto de servicio: datos, avisos, letra pequeña.
La monoespaciada le da aire de ficha técnica, no de folleto. */
.mono{
font-family:var(--mono);
font-size:14px;
line-height:1.65;
letter-spacing:-.01em;
}
.plato-alergenos,
.envios-nota,
.ubi-nota,
.f-foot,
.plan-envio,
.plato-precio,
.plan-precio span{
font-family:var(--mono);
letter-spacing:-.01em;
}
/* la manecilla, señalando */
.manecilla{
font-size:1.45em;
color:var(--burdeos);
margin-right:6px;
vertical-align:-.08em;
}
/* Botón con sombra dura: el bloque de color se desplaza al pulsar,
como un sello que se apoya en el papel. */
.btn-sombra{
background:var(--crema);
color:var(--tinta);
border:2px solid var(--tinta);
box-shadow:7px 7px 0 var(--burdeos);
transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.btn-sombra:hover{
transform:translate(3px,3px);
box-shadow:4px 4px 0 var(--burdeos);
}
.btn-sombra:active{
transform:translate(7px,7px);
box-shadow:0 0 0 var(--burdeos);
}
/* ─────────── Control del vídeo de portada ─────────── */
.shot-marco{ position:relative; }
/* Vídeo propio: sin barra de título ni logo que recortar, así que
simplemente rellena el hueco del marco. */
/* En el flujo, no en absoluto: así es el propio vídeo el que le da
altura al marco. Con position:absolute el contenedor se quedaba en
una raya, porque no le quedaba nada dentro que lo estirara. */
.hero-video{
display:block;
width:100%;
aspect-ratio:2/3; /* el mismo encuadre que tenía la foto */
object-fit:cover;
background:var(--tinta);
}
.video-ctrl{
position:absolute; left:18px; top:18px; z-index:3;
width:38px; height:38px;
display:grid; place-items:center;
background:var(--crema); border:2px solid var(--tinta);
cursor:pointer;
transition:background-color .18s var(--ease);
}
.video-ctrl:hover{ background:var(--crema-2); }
.video-ctrl-icono{
display:block; width:12px; height:14px;
border-left:4px solid var(--tinta);
border-right:4px solid var(--tinta);
}
/* pausado: el icono pasa a ser un play */
.video-ctrl[aria-pressed="true"] .video-ctrl-icono{
width:0; height:0;
border-left:14px solid var(--tinta);
border-right:0;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
margin-left:4px;
}
/* ─────────── Nudes · bowls ─────────── */
.bowls{
padding:clamp(56px,9vw,104px) 0;
background:var(--crema-2);
text-align:center;
}
.bowls-in{
width:min(920px, calc(100% - 2 * var(--gut)));
margin:0 auto;
display:flex; flex-direction:column; align-items:center;
}
.bowls .eyebrow{ margin-bottom:14px; }
.bowls-lede{
max-width:60ch; margin-top:22px;
color:var(--tinta-2);
}
.bowls-specs{
display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
margin-top:26px;
}
.bowls-specs li{
font-size:12px; letter-spacing:.02em;
padding:7px 13px;
border:1px solid var(--filete);
color:var(--burdeos);
background:var(--crema);
}
.bowls-fotos{
display:grid; grid-template-columns:1fr 1fr;
gap:clamp(12px,1.8vw,20px);
margin-top:clamp(28px,4vw,44px);
width:100%;
}
.bowls .zona-foto{
border:1px solid var(--filete);
background:var(--crema);
padding:8px;
text-align:left;
}
.bowls .zona-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.bowls .zona-foto figcaption{
margin-top:8px; padding-top:7px;
border-top:1px solid var(--filete);
font-family:var(--mono);
font-size:11px; letter-spacing:.08em; text-transform:uppercase;
color:var(--burdeos);
}
.bowls-cita{
margin-top:clamp(26px,3.5vw,38px);
max-width:44ch;
color:var(--tinta);
font-size:15px;
}
.bowls .btn-sombra{ margin-top:26px; }
.bowls-nota{
margin-top:26px; max-width:56ch;
font-size:12.5px; color:var(--humo);
}
@media (max-width:620px){
.bowls-fotos{ grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════════════════════
EL CUARTO COLOR · verde nopal
Al burdeos, la tinta y el crema les faltaba un color con
trabajo propio. Verde nopal: el del cactus, el del guacamole
y el de la salsa verde. No es decorativo — tiene tres usos y
solo esos: lo fresco, lo vegetal y lo que sale bien.
Por qué éste y no otro:
· Naranja o terracota se pelean con el burdeos, están al lado.
· Azul talavera es más llamativo, pero no dice nada de la comida.
· El verde cumple una función: señala frescura sin explicarla.
#46703C da 4,9:1 sobre el crema, así que también vale para texto.
═══════════════════════════════════════════════════════════ */
:root{
--verde: #46703C;
--verde-cl: #E4EBDF;
}
.tag-veg{ color:var(--verde); }
/* ─────────── Tira de valoraciones ─────────── */
.notas{
border-bottom:1px solid var(--filete);
background:var(--crema);
}
.notas-in{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:0 auto;
padding:18px 0;
display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
}
.notas-k{
font-size:11px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--humo);
}
.notas-lista{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.notas-lista li{
display:flex; align-items:baseline; gap:8px;
padding:6px 12px;
border:1px solid var(--filete);
}
.notas-plat{
font-size:11px; font-weight:700; letter-spacing:.12em;
text-transform:uppercase; color:var(--tinta-2);
}
.notas-num{
font-family:var(--display); font-size:19px;
color:var(--burdeos); letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.notas-est{ color:var(--oro); font-size:12px; letter-spacing:.06em; }
.notas-pie{ font-family:var(--mono); font-size:11px; color:var(--humo); }
@media (max-width:620px){
.notas-k{ width:100%; }
.notas-lista{ gap:8px; }
}
/* ─────────── Botón de subir ─────────── */
.subir{
position:fixed; right:calc(var(--marco) + 14px); bottom:calc(var(--marco) + 14px);
z-index:210;
width:52px; height:52px;
display:grid; place-items:center;
background:var(--burdeos);
border:2px solid var(--crema);
box-shadow:0 3px 0 var(--tinta);
cursor:pointer;
transition:transform .16s var(--ease), background-color .16s var(--ease);
}
.subir:hover{ background:var(--burdeos-d); transform:translateY(-3px); }
.subir svg{
width:26px; height:26px;
fill:none; stroke:var(--crema); stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
transform:rotate(-45deg); /* el burrito apuntando hacia arriba */
}
@media (max-width:860px){
/* que no se plante encima de la barra de pedido */
.subir{ bottom:calc(var(--marco) + 76px); width:46px; height:46px; }
.subir svg{ width:22px; height:22px; }
}
/* ─────────── Bowls, versión interactiva ─────────── */
.bowls-tabs{
display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
margin-top:30px;
}
.bowls-tabs button{
font-family:var(--texto);
font-size:13px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase;
padding:11px 17px;
color:var(--tinta);
background:var(--crema);
border:1px solid var(--filete);
cursor:pointer;
transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.bowls-tabs button:hover{ border-color:var(--verde); color:var(--verde); }
.bowls-tabs button[aria-selected="true"]{
background:var(--verde); color:var(--crema); border-color:var(--verde);
}
.bowls-panel{
margin-top:clamp(22px,3vw,34px);
width:100%;
display:grid; grid-template-columns:1.15fr .85fr;
gap:clamp(16px,2.4vw,28px);
align-items:stretch;
text-align:left;
}
.bowls-foto{
margin:0; overflow:hidden;
border:1px solid var(--filete);
background:var(--crema); padding:8px;
}
.bowls-foto img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.bowls-sinfoto{
display:grid; place-items:center;
aspect-ratio:4/3;
background:var(--verde);
padding:18px;
}
.bowls-sinfoto span{
font-family:var(--display);
font-size:clamp(22px,3vw,34px); line-height:1;
text-transform:uppercase; text-align:center;
color:transparent; -webkit-text-stroke:1.3px var(--crema);
}
.bowls-datos{
border:1px solid var(--filete);
background:var(--crema);
padding:clamp(18px,2.2vw,26px);
display:flex; flex-direction:column; gap:14px;
}
.bowls-precio{
font-size:22px; font-weight:500; color:var(--burdeos);
display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.ingredientes{ display:flex; flex-wrap:wrap; gap:7px; }
.ingredientes li{
font-family:var(--mono);
font-size:12px; letter-spacing:-.01em;
padding:6px 11px;
color:var(--verde);
background:var(--verde-cl);
border:1px solid rgba(70,112,60,.28);
}
.bowls-specs li{ color:var(--verde); border-color:rgba(70,112,60,.35); }
@media (max-width:760px){
.bowls-panel{ grid-template-columns:1fr; }
}
/* ─────────── Cómo llega la caja ─────────── */
.pasos-envio{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(30px,4vw,46px) auto 0;
display:grid; grid-template-columns:repeat(4,1fr);
gap:clamp(12px,1.6vw,18px);
}
.paso-envio{
position:relative;
border:1px solid var(--filete);
background:var(--crema);
padding:clamp(18px,2.2vw,26px);
display:flex; flex-direction:column; gap:9px;
}
.paso-envio-n{
font-size:11px; letter-spacing:.14em; color:var(--burdeos);
}
.paso-envio svg{
width:34px; height:34px;
fill:none; stroke:var(--burdeos); stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
.paso-envio h4{
font-family:var(--display); font-size:20px;
text-transform:uppercase; letter-spacing:.02em; color:var(--tinta);
}
.paso-envio p{ font-size:12.5px; color:var(--tinta-2); }
@media (max-width:900px){ .pasos-envio{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .pasos-envio{ grid-template-columns:1fr; } }
/* ─────────── My Órale Padre ─────────── */
.club{ padding:clamp(56px,9vw,104px) 0; background:var(--crema-2); }
.club-in{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:0 auto;
display:grid; grid-template-columns:1fr .92fr;
gap:clamp(30px,5vw,64px); align-items:start;
}
.club-copy > p{ color:var(--tinta-2); margin-top:18px; max-width:42ch; }
.club-pasos{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.club-pasos li{ display:flex; align-items:flex-start; gap:13px; }
.club-pasos b{
flex:none;
display:grid; place-items:center;
width:26px; height:26px;
background:var(--burdeos); color:var(--crema);
font-family:var(--display); font-size:14px; padding-top:1px;
}
.club-pasos span{ font-size:15px; color:var(--tinta-2); }
.club-ventajas{
display:flex; flex-direction:column; gap:9px;
margin-top:26px; padding-top:22px;
border-top:1px solid var(--linea);
font-size:13.5px; color:var(--tinta-2);
}
.club-form{
position:relative;
display:flex; flex-direction:column; gap:16px;
background:var(--crema);
border:1px solid var(--filete-f);
padding:clamp(22px,2.8vw,32px);
}
.club-form-t{
font-family:var(--display); font-size:26px;
text-transform:uppercase; letter-spacing:.03em; color:var(--tinta);
}
@media (max-width:860px){ .club-in{ grid-template-columns:1fr; } }
/* ─────────── Equipo ─────────── */
.equipo{ padding:clamp(56px,9vw,104px) 0; }
.equipo-valores{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(34px,5vw,54px) auto 0;
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(14px,1.8vw,22px);
}
.valor{
border:1px solid var(--filete);
padding:clamp(22px,2.6vw,32px);
display:flex; flex-direction:column; gap:10px;
background:var(--crema);
}
.valor-n{ font-size:12px; letter-spacing:.16em; color:var(--burdeos); }
.valor h3{
font-family:var(--display); font-size:clamp(24px,2.6vw,30px);
text-transform:uppercase; letter-spacing:.02em; color:var(--tinta);
}
.valor p{ font-size:14.5px; color:var(--tinta-2); }
.equipo-fotos{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(16px,2vw,22px) auto 0;
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(12px,1.6vw,18px);
}
.equipo .zona-foto{
border:1px solid var(--filete);
background:var(--crema); padding:8px;
}
.equipo .zona-foto img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.equipo .zona-foto figcaption{
margin-top:8px; padding-top:7px;
border-top:1px solid var(--filete);
font-family:var(--mono); font-size:11px;
letter-spacing:.06em; text-transform:uppercase; color:var(--burdeos);
}
.equipo-trabajo{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(26px,3.4vw,40px) auto 0;
border:1px solid var(--filete-f);
background:var(--crema);
padding:clamp(24px,3vw,36px);
display:flex; flex-wrap:wrap; align-items:center;
justify-content:space-between; gap:22px;
}
.equipo-trabajo h3{
font-family:var(--display); font-size:clamp(24px,3vw,34px);
text-transform:uppercase; color:var(--tinta); margin-bottom:8px;
}
.equipo-trabajo p{ max-width:52ch; color:var(--tinta-2); font-size:13.5px; }
@media (max-width:860px){
.equipo-valores, .equipo-fotos{ grid-template-columns:1fr; }
}
/* ─────────── Instagram ─────────── */
.insta{ padding:clamp(50px,8vw,90px) 0 clamp(56px,9vw,100px); background:var(--crema-2); }
.insta-cab{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:0 auto;
display:flex; flex-wrap:wrap; align-items:flex-end;
justify-content:space-between; gap:20px;
}
.insta-rejilla{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(26px,3.4vw,40px) auto 0;
display:grid; grid-template-columns:repeat(6,1fr);
gap:clamp(8px,1.2vw,14px);
}
.insta-rejilla li{ overflow:hidden; border:1px solid var(--filete); }
.insta-rejilla img{
width:100%; aspect-ratio:1; object-fit:cover;
transition:transform .6s var(--ease);
}
.insta-rejilla a:hover img{ transform:scale(1.07); }
@media (max-width:900px){ .insta-rejilla{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .insta-rejilla{ grid-template-columns:repeat(2,1fr); } }
/* ─────────── Foto vertical del bloque de oficio ─────────── */
.foto-vert{ margin:0; }
.foto-vert img{ width:100%; aspect-ratio:9/14; object-fit:cover; }
.foto-vert figcaption{
margin-top:9px; padding-top:7px;
border-top:1px solid rgba(245,238,230,.22);
font-family:var(--mono); font-size:11px;
letter-spacing:.08em; text-transform:uppercase; color:var(--crema-2);
}
@media (prefers-reduced-motion:reduce){
.subir, .insta-rejilla img{ transition:none; }
}
/* ═══════════════════════════════════════════════════════════
EL QUINTO COLOR · azul talavera
Al verde le di la comida fresca. El azul se queda con otra
cosa distinta: el servicio — las cajas, los envíos, la
logística. Es el azul de la cerámica de Talavera, así que
sigue siendo mexicano, y al estar enfrente del burdeos en la
rueda de color separa los dos mundos de un vistazo.
5,9:1 sobre el crema, vale también para texto.
═══════════════════════════════════════════════════════════ */
:root{
--azul: #2E5E7E;
--azul-cl: #DEE8EE;
}
.paso-envio svg{ stroke:var(--azul); }
.paso-envio-n{ color:var(--azul); }
.envios-lista dd{ color:var(--azul); }
.plan-envio{ color:var(--azul); }
/* ─────────── Por qué recoger ─────────── */
.acc-porque{
display:flex; flex-direction:column; gap:5px;
margin:4px 0 2px;
}
.acc-porque li{
position:relative; padding-left:16px;
font-size:12px; color:var(--verde);
}
.acc-porque li::before{
content:"";
position:absolute; left:0; top:.55em;
width:7px; height:7px; background:var(--verde);
}
/* ─────────── Rótulos sobre la foto del bowl ─────────── */
/* Como una lámina botánica: cada ingrediente señalado con su nombre.
Dice "sabemos exactamente qué lleva" sin escribir un párrafo. */
.bowls-foto-rot{ position:relative; }
.rotulo{
position:absolute;
left:var(--x); top:var(--y);
transform:translate(-50%,-50%);
font-family:var(--mono);
font-size:10.5px; letter-spacing:-.01em;
white-space:nowrap;
padding:4px 8px;
background:var(--crema);
color:var(--verde);
border:1px solid var(--verde);
box-shadow:0 1px 0 rgba(36,26,28,.18);
opacity:0;
animation:rotulo-entra .5s var(--ease) forwards;
}
.rotulo::before{
content:"";
position:absolute; left:50%; top:50%;
width:5px; height:5px;
margin:-2.5px 0 0 -2.5px;
border-radius:50%;
background:var(--verde);
box-shadow:0 0 0 3px var(--crema);
}
.rotulo:nth-of-type(1){ animation-delay:.15s; }
.rotulo:nth-of-type(2){ animation-delay:.3s; }
.rotulo:nth-of-type(3){ animation-delay:.45s; }
.rotulo:nth-of-type(4){ animation-delay:.6s; }
.rotulo:nth-of-type(5){ animation-delay:.75s; }
@keyframes rotulo-entra{ to{ opacity:1; } }
@media (max-width:560px){
.rotulo{ font-size:9px; padding:3px 6px; }
}
/* ─────────── Ficha ampliada ─────────── */
.sin-scroll{ overflow:hidden; }
.ficha-capa{
position:fixed; inset:0; z-index:400;
display:flex; align-items:center; justify-content:center;
padding:calc(var(--marco) + 12px);
background:rgba(36,26,28,.74);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.ficha-caja{
position:relative;
width:min(860px, 100%);
max-height:88vh;
background:var(--crema);
border:1px solid var(--burdeos);
color:var(--tinta);
display:flex; flex-direction:column;
overflow:hidden;
}
.ficha-cerrar{
position:absolute; right:0; top:0; z-index:5;
width:52px; height:52px;
display:grid; place-items:center;
background:var(--burdeos); color:var(--crema);
border:0; cursor:pointer;
font-size:26px; line-height:1;
}
.ficha-cerrar:hover{ background:var(--burdeos-d); }
.ficha-media{ flex:none; }
.ficha-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.ficha-media-sin{
aspect-ratio:16/10;
display:grid; place-items:center;
background:var(--burdeos);
padding:20px;
}
.ficha-media-sin span{
font-family:var(--display);
font-size:clamp(26px,5vw,44px); line-height:1;
text-transform:uppercase; text-align:center;
color:transparent; -webkit-text-stroke:1.4px var(--crema);
}
.ficha-cuerpo{
padding:clamp(20px,3vw,30px);
display:flex; flex-direction:column; gap:12px;
overflow-y:auto;
}
.ficha-nombre{
font-family:var(--display);
font-size:clamp(28px,4.4vw,42px); line-height:1;
text-transform:uppercase; letter-spacing:.02em;
padding-right:56px;
}
.ficha-precio{
font-size:19px; color:var(--burdeos);
display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.ficha-desc{ font-size:15.5px; color:var(--tinta-2); max-width:58ch; }
.ficha-alergenos{
padding-top:14px; margin-top:2px;
border-top:1px dotted var(--linea);
}
.ficha-k{
font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
color:var(--burdeos); margin-bottom:5px;
}
.ficha-alergenos p:last-child{ font-size:13px; color:var(--humo); }
.ficha-cuerpo .btn{ margin-top:4px; }
@media (min-width:760px){
.ficha-caja{ display:grid; grid-template-columns:1fr 1fr; }
.ficha-media img, .ficha-media-sin{ height:100%; aspect-ratio:auto; min-height:360px; }
.ficha-cuerpo{ max-height:88vh; }
/* en dos columnas el botón de cerrar de abajo sobra: la X se ve siempre */
.ficha-cuerpo [data-cierra-ficha]{ display:none; }
}
@media (prefers-reduced-motion:reduce){
.rotulo{ animation:none; opacity:1; }
}
/* ─────────── Nivel de picante ─────────── */
/* Una guindilla o dos, en vez de la palabra. Se lee de un vistazo
y no ocupa línea en fichas que ya van justas. */
.picante{
display:inline-flex; align-items:center; gap:1px;
margin-left:7px; vertical-align:2px;
}
.picante svg{
width:15px; height:15px;
/* silueta rellena y no a trazo: a este tamaño el contorno se leía
como una coma, no como una guindilla */
fill:var(--chile);
stroke:none;
}
.picante svg + svg{ margin-left:-4px; }
:root{ --chile:#C8321F; }
.ficha-precio .picante svg{ width:19px; height:19px; }
/* ═══════════════════════════════════════════════════════════
CHAT · ¿QUÉ TE PIDO?
Abajo a la derecha, cerrado por defecto. El botón de subir
se va a la izquierda para que no se estorben.
═══════════════════════════════════════════════════════════ */
.elige-abrir{ margin-top:24px; }
/* el botón de subir cambia de esquina */
.subir{ right:auto; left:calc(var(--marco) + 14px); }
.chat-lanza{
position:fixed; z-index:220;
right:calc(var(--marco) + 14px); bottom:calc(var(--marco) + 14px);
display:flex; align-items:center; gap:9px;
padding:13px 18px 13px 15px;
background:var(--burdeos); color:var(--crema);
border:2px solid var(--crema);
box-shadow:0 3px 0 var(--tinta);
cursor:pointer;
font-family:var(--texto);
font-size:14px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase;
transition:transform .16s var(--ease), background-color .16s var(--ease);
}
.chat-lanza:hover{ background:var(--burdeos-d); transform:translateY(-3px); }
.chat-lanza svg{
width:22px; height:22px; flex:none;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.chat-lanza-abierto{ background:var(--tinta); }
.chat{
position:fixed; z-index:221;
right:calc(var(--marco) + 14px); bottom:calc(var(--marco) + 78px);
width:min(370px, calc(100vw - 2 * var(--marco) - 28px));
max-height:min(560px, calc(100vh - 130px));
display:flex; flex-direction:column;
background:var(--crema);
border:1px solid var(--burdeos);
box-shadow:0 10px 0 rgba(36,26,28,.12), 0 0 0 1px var(--crema);
}
.chat-cab{
display:flex; align-items:center; gap:11px;
padding:13px 14px;
background:var(--burdeos); color:var(--crema);
flex:none;
}
.chat-avatar{
width:34px; height:34px; flex:none;
display:grid; place-items:center;
background:var(--tinta);
}
.chat-avatar img{ width:24px; height:auto; }
.chat-quien{ display:flex; flex-direction:column; line-height:1.25; margin-right:auto; }
.chat-quien b{
font-family:var(--display); font-size:16px;
text-transform:uppercase; letter-spacing:.03em;
}
.chat-quien span{ font-size:10.5px; opacity:.85; }
.chat-cerrar{
width:30px; height:30px; flex:none;
display:grid; place-items:center;
background:transparent; border:1px solid rgba(245,238,230,.4);
color:var(--crema); font-size:19px; line-height:1;
cursor:pointer;
}
.chat-cerrar:hover{ background:rgba(245,238,230,.16); }
.chat-hilo{
flex:1 1 auto;
overflow-y:auto;
padding:16px 14px;
display:flex; flex-direction:column; gap:9px;
background:var(--crema-2);
}
.burbuja{
max-width:85%;
padding:10px 13px;
font-size:14px; line-height:1.45;
animation:burbuja-entra .28s var(--ease) both;
}
@keyframes burbuja-entra{
from{ opacity:0; transform:translateY(6px); }
to{ opacity:1; transform:none; }
}
.burbuja-ellos{
align-self:flex-start;
background:var(--crema);
border:1px solid var(--filete);
color:var(--tinta);
}
.burbuja-tu{
align-self:flex-end;
background:var(--burdeos);
border:1px solid var(--burdeos);
color:var(--crema);
font-weight:600;
}
/* la recomendación, con algo más de cuerpo */
.chat-plato{
display:block;
font-family:var(--display); font-size:22px;
text-transform:uppercase; letter-spacing:.02em;
color:var(--tinta);
}
.chat-precio{ display:block; font-size:14px; color:var(--burdeos); margin:2px 0 6px; }
.chat-desc{ display:block; font-size:13px; color:var(--tinta-2); }
.chat-motivo{
display:block; margin-top:8px; padding-top:8px;
border-top:1px dotted var(--linea);
font-size:11.5px; color:var(--verde);
}
/* los tres puntitos de "está escribiendo" */
.burbuja-puntos{ display:flex; gap:4px; padding:13px; }
.burbuja-puntos span{
width:6px; height:6px; border-radius:50%;
background:var(--humo);
animation:puntito 1.1s infinite;
}
.burbuja-puntos span:nth-child(2){ animation-delay:.18s; }
.burbuja-puntos span:nth-child(3){ animation-delay:.36s; }
@keyframes puntito{
0%,60%,100%{ opacity:.25; transform:translateY(0); }
30%{ opacity:1; transform:translateY(-3px); }
}
.chat-pie{
flex:none;
display:flex; flex-wrap:wrap; gap:7px;
padding:12px 14px;
border-top:1px solid var(--filete);
background:var(--crema);
}
.chat-pie:empty{ display:none; }
.chat-op{
font-family:var(--texto);
font-size:13px; font-weight:600;
padding:9px 13px;
color:var(--burdeos);
background:var(--crema);
border:1px solid var(--burdeos);
cursor:pointer;
transition:background-color .16s var(--ease), color .16s var(--ease);
}
.chat-op:hover{ background:var(--burdeos); color:var(--crema); }
@media (max-width:860px){
/* en móvil la barra de pedido ocupa el fondo: todo sube */
.chat-lanza{ bottom:calc(var(--marco) + 76px); padding:11px 15px 11px 13px; font-size:13px; }
.chat{ bottom:calc(var(--marco) + 138px); max-height:min(60vh, 460px); }
}
@media (max-width:420px){
.chat-lanza span{ display:none; } /* solo el icono, para no tapar media pantalla */
.chat-lanza{ padding:13px; }
}
@media (prefers-reduced-motion:reduce){
.burbuja, .burbuja-puntos span{ animation:none; }
.chat-lanza{ transition:none; }
}
/* ═══════════════════════════════════════════════════════════
BOWLS · ingredientes flotando
Siluetas sueltas —aguacate, chile, lima, tomate, hoja— que
suben a distinto ritmo al hacer scroll. Con CSS ligado al
scroll, sin JavaScript: no ocupa el hilo principal y se para
solo si el visitante ha pedido reducir movimiento.
═══════════════════════════════════════════════════════════ */
.bowls{ position:relative; overflow:hidden; isolation:isolate; }
.bowls-in{ position:relative; z-index:1; }
.flota{
position:absolute; inset:0;
z-index:0;
pointer-events:none;
}
.flota-p{
position:absolute;
left:var(--l); top:var(--t);
width:clamp(46px, 7vw, 86px); height:auto;
fill:none;
stroke:var(--verde);
stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
opacity:.16;
transform:rotate(var(--g));
}
@supports (animation-timeline: view()){
.flota-p{
animation:flotar linear both;
animation-timeline:view();
animation-range:cover 0% cover 100%;
}
@keyframes flotar{
from{ transform:translateY(calc(var(--v) * -1)) rotate(var(--g)); }
to { transform:translateY(var(--v)) rotate(calc(var(--g) * -1)); }
}
}
/* en pantallas pequeñas estorban más que suman */
@media (max-width:640px){
.flota-p:nth-child(n+4){ display:none; }
.flota-p{ opacity:.12; }
}
@media (prefers-reduced-motion:reduce){
.flota-p{ animation:none; }
}
/* ═══════════════════════════════════════════════════════════
PORTADA · masthead de periódico
Sustituye al arranque anterior (antetítulo + titular + párrafo
+ dos botones + tres contadores), que es el patrón de plantilla
más repetido que existe.
Las webs de hostelería que funcionan abren con una imagen, una
frase y una acción. Aquí el nombre hace de cabecera impresa, con
sus filetes y su línea de datos, y los hechos que antes eran
contadores decorativos pasan a ser pies de foto — donde sí son
información.
═══════════════════════════════════════════════════════════ */
.masthead{
padding:clamp(34px,6vw,72px) var(--gut) clamp(26px,4vw,44px);
text-align:center;
}
.masthead-in{ max-width:var(--max); margin:0 auto; }
.masthead-meta{
display:flex; justify-content:center; flex-wrap:wrap;
gap:6px 22px;
font-size:11px; letter-spacing:.2em; text-transform:uppercase;
color:var(--humo);
padding-bottom:14px;
border-bottom:1px solid var(--tinta);
}
.masthead-meta span + span{ position:relative; }
.masthead-meta span + span::before{
content:"·"; position:absolute; left:-13px; color:var(--filete-f);
}
/* el nombre a tamaño cabecera: es la marca, no un eslogan */
.masthead-t{
font-family:var(--display);
font-size:clamp(54px, 15vw, 190px);
line-height:.9;
letter-spacing:-.012em;
text-transform:uppercase;
color:var(--tinta);
/* la tilde de la Ó sobresale por arriba y tropezaba con el filete */
padding:.18em 0 .05em;
}
.masthead-bajo{
font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:var(--burdeos);
padding-top:13px;
border-top:1px solid var(--tinta);
}
.masthead-frase{
/* Ya no es una frase suelta sino el lema que lleva el propio logo
debajo del nombre. Así que se compone como lema, no como párrafo. */
margin-top:clamp(22px,3.4vw,34px);
font-family:var(--display);
font-size:clamp(24px,3.4vw,40px);
line-height:1;
text-transform:uppercase;
letter-spacing:.06em;
color:var(--burdeos);
}
.masthead-acc{
margin-top:24px;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:10px 18px;
}
.masthead-alt{
font-family:var(--mono);
font-size:14px; color:var(--humo);
border-bottom:1px solid var(--filete);
}
.masthead-alt:hover{ color:var(--burdeos); border-bottom-color:var(--burdeos); }
/* ─────────── Tira de portada ─────────── */
/* Tres viñetas verticales, como una tira de contactos de laboratorio.
El vídeo manda y las otras dos lo acompañan. */
.tira{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:0 auto clamp(26px,4vw,44px);
display:grid;
/* dos piezas: el vídeo manda y la foto acompaña */
grid-template-columns:1.15fr 1fr;
gap:clamp(14px,2vw,24px);
align-items:start;
}
.tira-celda{ margin:0; }
.tira-marco{
position:relative;
border:1px solid var(--filete-f);
padding:9px;
background:var(--crema);
overflow:hidden;
}
.tira-marco img{
width:100%; aspect-ratio:3/4; object-fit:cover;
transition:transform .7s var(--ease);
}
.tira-celda:hover .tira-marco img{ transform:scale(1.05); }
.tira-video .hero-video{ aspect-ratio:3/4; }
.tira-celda figcaption{
margin-top:11px; padding-top:9px;
border-top:1px solid var(--linea);
font-size:12px; color:var(--humo);
line-height:1.45;
}
.tira-celda figcaption b{ color:var(--burdeos); }
@media (max-width:520px){
.tira{ grid-template-columns:1fr; }
.tira-marco img, .tira-video .hero-video{ aspect-ratio:4/3; }
}
/* ═══════════════════════════════════════════════════════════
PÁGINA MÁS CORTA
Iba por 22 pantallas de scroll. El bloque de "oficio" contaba
lo mismo que "equipo" y la banda del neón decía lo mismo que
"locales", así que se han fundido. Instagram baja al pie.
═══════════════════════════════════════════════════════════ */
/* la foto del neón, ahora dentro de locales y en formato banda */
.locales-foto{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(26px,4vw,40px) auto 0;
border:1px solid var(--filete);
padding:9px;
background:var(--crema);
overflow:hidden;
}
.locales-foto img{
width:100%; aspect-ratio:24/6; object-fit:cover; object-position:center 34%;
}
@media (max-width:640px){ .locales-foto img{ aspect-ratio:16/9; } }
/* ─────────── Instagram en el pie ─────────── */
.foot-insta{
max-width:var(--max); margin:0 auto;
padding:0 var(--gut) clamp(28px,4vw,42px);
}
.foot-insta-cab{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:12px; padding-bottom:14px;
border-bottom:1px solid rgba(245,238,230,.22);
}
.foot-insta-cab p{ font-size:12px; letter-spacing:.06em; color:var(--burdeos-cl); }
.foot-insta-cab a{ color:var(--crema); font-weight:600; }
.foot-seguir{
font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
padding:8px 15px; border:1px solid rgba(245,238,230,.45); color:var(--crema);
}
.foot-seguir:hover{ background:var(--crema); color:var(--burdeos); }
.foot-insta .insta-rejilla{
width:100%; margin-top:14px;
grid-template-columns:repeat(6,1fr);
gap:8px;
}
.foot-insta .insta-rejilla li{ border-color:rgba(245,238,230,.28); }
@media (max-width:640px){ .foot-insta .insta-rejilla{ grid-template-columns:repeat(3,1fr); } }
/* ─────────── Pedidos grandes ─────────── */
.grupos{ padding:clamp(56px,9vw,104px) 0; background:var(--crema-2); }
.grupos-tabs{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(28px,4vw,44px) auto 0;
display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.grupos-tabs button{
font-family:var(--texto);
display:flex; flex-direction:column; gap:3px;
text-align:left;
padding:16px 20px;
background:var(--crema);
border:1px solid var(--filete);
color:var(--tinta);
cursor:pointer;
transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.grupos-tabs b{
font-family:var(--display); font-size:21px;
text-transform:uppercase; letter-spacing:.02em;
}
.grupos-tabs span{ font-size:11.5px; color:var(--humo); }
.grupos-tabs button:hover{ border-color:var(--burdeos); }
.grupos-tabs button[aria-selected="true"]{
background:var(--burdeos); border-color:var(--burdeos); color:var(--crema);
}
.grupos-tabs button[aria-selected="true"] span{ color:var(--burdeos-cl); }
/* dentro del panel ya no hace falta el aire de sección completa */
.grupos [role="tabpanel"] > :first-child{ margin-top:clamp(20px,3vw,30px); }
@media (max-width:600px){ .grupos-tabs{ grid-template-columns:1fr; } }
/* ═══════════════════════════════════════════════════════════
PEDIR EN NEGATIVO
La sección que más queremos que se use pasa a fondo burdeos.
Los dos paneles se quedan en crema: el paso de elegir local y
pedir tiene que leerse sin esfuerzo, y texto claro sobre color
saturado cansa. El bloque de color llama; el contenido dentro
sigue siendo cómodo.
═══════════════════════════════════════════════════════════ */
.pedir{ background:var(--burdeos); }
.pedir .eyebrow{ color:var(--crema-2); }
.pedir .big{ color:var(--crema); }
.pedir .sec-lede{ color:var(--burdeos-cl); }
/* Los botones de esta sección van DENTRO de los paneles crema, no sobre
el burdeos, así que se quedan como estaban. Invertirlos los dejaba
crema sobre crema, es decir, invisibles. */
.pedir .paso{ background:var(--crema); border-color:rgba(245,238,230,.55); }
.pedir .paso-acc{ background:var(--crema-2); }
.pedir-fuera{
color:var(--burdeos-cl);
border-top-color:rgba(245,238,230,.3);
}
.pedir-fuera a{ color:var(--crema); }
/* las escuadras de imprenta, en crema sobre el fondo de color */
.pedir .tick::before, .pedir .tick::after{ border-color:var(--crema); }
/* ═══════════════════════════════════════════════════════════
PÁGINA DEL CLUB
═══════════════════════════════════════════════════════════ */
.club-mas{ margin-top:20px; }
.club-mas a{
font-family:var(--mono); font-size:13.5px;
color:var(--burdeos); font-weight:500;
border-bottom:1px solid currentColor;
}
.nav-cta-movil{ display:none; }
@media (max-width:860px){
.nav-cta-movil{ display:inline-flex; padding:11px 16px; font-size:13px; }
}
.club-portada{
background:var(--burdeos);
padding:clamp(48px,8vw,96px) var(--gut);
text-align:center;
}
.club-portada-in{ max-width:760px; margin:0 auto; }
.club-portada .eyebrow{ color:var(--crema-2); }
.club-portada .big{ color:var(--crema); }
.club-lede{
margin:22px auto 30px; max-width:46ch;
color:var(--burdeos-cl); font-size:clamp(16px,2vw,19px);
text-wrap:pretty;
}
.club-pag{ padding:clamp(50px,8vw,92px) 0; }
.club-pasos-grandes{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(30px,4vw,48px) auto 0;
display:grid; grid-template-columns:repeat(4,1fr);
gap:clamp(12px,1.6vw,20px);
}
.club-pasos-grandes li{
position:relative;
border:1px solid var(--filete);
background:var(--crema-3);
padding:clamp(20px,2.6vw,28px);
display:flex; flex-direction:column; gap:9px;
}
.cpg-n{
font-family:var(--mono); font-size:12px; letter-spacing:.16em;
color:var(--burdeos);
}
.club-pasos-grandes h3{
font-family:var(--display); font-size:clamp(20px,2.2vw,25px);
text-transform:uppercase; letter-spacing:.02em; color:var(--tinta);
}
.club-pasos-grandes p{ font-size:14px; color:var(--tinta-2); }
.club-doble{ background:var(--crema-2); padding:clamp(50px,8vw,92px) 0; }
.club-doble-in{ width:min(var(--max), calc(100% - 2 * var(--gut))); margin:0 auto; }
.club-doble > div > p{ margin-top:20px; max-width:56ch; color:var(--tinta-2); }
.tabla-canal{
margin-top:clamp(26px,3.4vw,40px);
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(12px,1.6vw,18px);
}
.canal{
border:1px solid var(--filete);
background:var(--crema);
padding:clamp(18px,2.4vw,26px);
display:flex; flex-direction:column; gap:8px;
}
.canal-top{ border-color:var(--verde); border-width:2px; background:var(--verde-cl); }
.canal-cero{ opacity:.72; }
.canal-donde{ font-size:13.5px; font-weight:600; color:var(--tinta); }
.canal-x{
font-family:var(--display); font-size:44px; line-height:1;
color:var(--burdeos); letter-spacing:.02em;
}
.canal-top .canal-x{ color:var(--verde); }
.canal-por{ font-size:12px; color:var(--humo); }
.nivel-medio{ border-color:var(--filete-f); }
.nivel-alto{ border-color:var(--burdeos); border-width:2px; }
.club-pag .niveles{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin-left:auto; margin-right:auto;
}
.club-cuentas{ background:var(--crema-2); }
.cuentas-rejilla{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(28px,4vw,44px) auto 0;
display:grid; grid-template-columns:repeat(3,1fr);
gap:clamp(12px,1.6vw,20px);
}
.cuenta{
position:relative;
border:1px solid var(--filete);
background:var(--crema);
padding:clamp(20px,2.6vw,30px);
}
.cuenta-num{
font-family:var(--display); font-size:clamp(40px,5vw,58px);
line-height:1; color:var(--burdeos); letter-spacing:.02em;
}
.cuenta-txt{ margin-top:11px; font-size:14px; color:var(--tinta-2); }
.letra-pequena{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:clamp(26px,3.4vw,40px) auto 0;
border:1px solid var(--filete);
background:var(--crema);
padding:clamp(22px,3vw,32px);
}
.letra-pequena h3{
font-family:var(--display); font-size:clamp(20px,2.4vw,26px);
text-transform:uppercase; letter-spacing:.02em; color:var(--tinta);
margin-bottom:14px;
}
.lista-fina{ display:flex; flex-direction:column; gap:8px; }
.lista-fina li{
position:relative; padding-left:17px;
font-size:13px; color:var(--tinta-2);
}
.lista-fina li::before{
content:""; position:absolute; left:0; top:.65em;
width:6px; height:6px; background:var(--burdeos);
}
.club-cierre{
background:var(--tinta);
padding:clamp(48px,7vw,84px) var(--gut);
text-align:center;
}
.club-cierre .big{ color:var(--crema); }
.club-cierre p{ margin:16px 0 26px; color:var(--crema-2); font-size:14px; }
@media (max-width:900px){
.club-pasos-grandes{ grid-template-columns:1fr 1fr; }
.tabla-canal, .cuentas-rejilla{ grid-template-columns:1fr; }
}
@media (max-width:520px){
.club-pasos-grandes{ grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════════════════════════
MENÚ MÓVIL EN NEGATIVO
Al desplegarse invierte a burdeos: deja claro que has entrado
en otro modo y separa el menú del contenido de detrás.
═══════════════════════════════════════════════════════════ */
@media (max-width:860px){
.mobnav{ background:var(--burdeos); }
.mobnav.open{ border-top-color:var(--burdeos); }
.mobnav a{
color:var(--crema);
border-bottom-color:rgba(245,238,230,.2);
}
.mobnav a:active{ background:var(--burdeos-d); }
.mobnav a:last-child{ border-bottom:0; }
/* la cabecera acompaña mientras está abierto */
.nav:has(.mobnav.open){ background:var(--burdeos); border-bottom-color:var(--burdeos); }
.nav:has(.mobnav.open) .brand span{ color:var(--crema); }
.nav:has(.mobnav.open) .brand img{ filter:invert(1) brightness(2.2); }
.nav:has(.mobnav.open) .burger{ border-color:rgba(245,238,230,.55); }
.nav:has(.mobnav.open) .burger span{ background:var(--crema); }
}
/* ═══════════════════════════════════════════════════════════
GUIÑO VEGETAL
Verde nopal de fondo. Es el único sitio donde el verde manda
en vez de acompañar, y por eso funciona como guiño: se nota
que es otra cosa sin salirse de la paleta.
═══════════════════════════════════════════════════════════ */
/* Antes era un bloque a toda anchura, con foto 4:5 a media altura de
pantalla, título a tamaño .big, chips, dos CTAs y una nota aparte:
ocupaba casi tanto como una sección de verdad. Un "guiño" no necesita
ese peso — ahora es una tira: miniatura + una frase + un botón. */
.vegetal{ background:var(--verde); padding:clamp(18px,2.4vw,26px) 0; }
.vegetal-in{
width:min(var(--max), calc(100% - 2 * var(--gut)));
margin:0 auto;
display:flex; align-items:center;
gap:clamp(16px,2.4vw,26px);
}
.vegetal .eyebrow{ color:var(--verde-cl); margin-bottom:6px; }
.vegetal-t{
font-family:var(--display);
font-size:clamp(19px,2.2vw,25px); line-height:1;
text-transform:uppercase; letter-spacing:.02em;
color:var(--crema);
}
.vegetal-copy > p{
margin-top:9px; color:var(--verde-cl);
max-width:52ch; font-size:14px;
}
.vegetal-copy > p b{ color:var(--crema); }
.vegetal-precio{
margin-left:6px; padding:2px 7px;
color:var(--crema); border:1px solid rgba(245,238,230,.5);
font-size:11.5px; white-space:nowrap;
}
.vegetal-acc{
display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
margin-top:12px;
}
.btn-verde{
background:var(--crema); color:var(--verde);
border-color:var(--crema);
}
.btn-verde:hover{ background:var(--crema-2); border-color:var(--crema-2); color:var(--verde); }
.vegetal-nota{ font-size:11px; color:var(--verde-cl); opacity:.85; }
.vegetal-foto{
flex:none; margin:0; position:relative;
width:clamp(64px,8vw,88px);
border:1px solid rgba(245,238,230,.5);
padding:5px; overflow:hidden;
}
.vegetal-foto img{
width:100%; aspect-ratio:1/1; object-fit:cover;
transition:transform .7s var(--ease);
}
.vegetal-foto:hover img{ transform:scale(1.05); }
.vegetal .tick::before, .vegetal .tick::after{ border-color:var(--crema); }
@media (max-width:640px){
.vegetal-in{ align-items:flex-start; }
.vegetal-nota{ display:block; margin-top:6px; }
}
/* ─────────── Ficha nutricional ─────────── */
.nutri{
margin-top:16px; padding-top:14px;
border-top:1px dotted var(--linea);
}
.nutri-k{
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--verde); margin-bottom:10px;
}
.nutri-lista{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.nutri-lista > div{
border:1px solid rgba(70,112,60,.3);
background:var(--verde-cl);
padding:9px 10px;
text-align:center;
}
.nutri-lista dt{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--verde); }
.nutri-lista dd{ font-size:14px; font-weight:500; color:var(--tinta); margin-top:3px; }
.nutri-nota{ margin-top:9px; font-size:11px; color:var(--humo); }
/* sin datos, la ficha se apaga y lo dice */
.nutri-pendiente .nutri-lista > div{ background:transparent; border-style:dashed; }
.nutri-pendiente .nutri-lista dd{ color:var(--humo); }
@media (max-width:520px){ .nutri-lista{ grid-template-columns:1fr 1fr; } }
/* ─────────── Bowls a medida ─────────── */
.bowls-medida{
position:relative;
width:100%; margin-top:clamp(20px,3vw,30px);
border:1px solid var(--filete);
background:var(--crema);
padding:clamp(18px,2.4vw,26px);
text-align:left;
}
.bowls-medida-k{
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--burdeos); margin-bottom:14px;
}
.bowls-medida-lista{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.bowls-medida-lista li{ display:flex; flex-direction:column; gap:3px; }
.bowls-medida-lista b{
font-family:var(--display); font-size:16px;
text-transform:uppercase; letter-spacing:.02em; color:var(--tinta);
}
.bowls-medida-lista span{ font-family:var(--mono); font-size:11.5px; color:var(--humo); }
@media (max-width:760px){ .bowls-medida-lista{ grid-template-columns:1fr 1fr; } }
/* ═══════════════════════════════════════════════════════════
MOVIMIENTO
Todo ligado al scroll con CSS, sin JavaScript: no ocupa el
hilo principal y el navegador lo para solo si el visitante
ha pedido reducir movimiento.
═══════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()){
/* La cabecera se encoge y se desvanece al salir, como si el cartel
se alejara. Sutil: de 1 a 0,94. */
.masthead-t{
animation:cabecera-sale linear both;
animation-timeline:view();
animation-range:exit 0% exit 100%;
}
@keyframes cabecera-sale{
from{ transform:scale(1); opacity:1; }
to { transform:scale(.94); opacity:.25; }
}
/* Las dos piezas de la tira suben a distinto ritmo. La diferencia es
de pocos píxeles: se nota como profundidad, no como efecto. */
.tira-celda:first-child .tira-marco{
animation:deriva-a linear both;
animation-timeline:view();
animation-range:entry 0% exit 100%;
}
.tira-celda:last-child .tira-marco{
animation:deriva-b linear both;
animation-timeline:view();
animation-range:entry 0% exit 100%;
}
@keyframes deriva-a{ from{ transform:translateY(16px); } to{ transform:translateY(-16px); } }
@keyframes deriva-b{ from{ transform:translateY(30px); } to{ transform:translateY(-30px); } }
/* La foto del neón en locales, con recorrido dentro de su marco */
.locales-foto img{
animation:panoramica linear both;
animation-timeline:view();
animation-range:entry 0% exit 100%;
}
@keyframes panoramica{
from{ object-position:center 22%; }
to { object-position:center 62%; }
}
/* Las guindillas asoman cuando entra su ficha */
.picante svg{
animation:guindilla linear both;
animation-timeline:view();
animation-range:entry 10% entry 55%;
}
@keyframes guindilla{
from{ transform:translateY(4px) rotate(-14deg); opacity:0; }
to { transform:none; opacity:1; }
}
}
/* El zigzag se desplaza despacio: es un filete impreso que corre */
.zig{
animation:zig-corre 22s linear infinite;
}
@keyframes zig-corre{ to{ background-position-x:96px; } }
/* El + de cada plato gira al pasar por encima */
.plato-mas .plato-signo{ transition:transform .3s var(--ease); }
.plato:hover .plato-signo{ transform:rotate(90deg); }
/* La chapa del local elegido late una vez al aparecer */
.chip-local{ animation:chapa-entra .4s var(--ease) both; }
@keyframes chapa-entra{
from{ opacity:0; transform:translateY(-4px); }
to { opacity:1; transform:none; }
}
/* Los botones principales empujan hacia arriba al pasar por encima */
.btn-p:hover, .btn-verde:hover{ transform:translateY(-2px); }
.btn-p, .btn-verde{ will-change:transform; }
@media (prefers-reduced-motion:reduce){
.zig{ animation:none; }
.plato-mas .plato-signo{ transition:none; }
.chip-local{ animation:none; }
.btn-p:hover, .btn-verde:hover{ transform:none; }
.masthead-t, .tira-marco, .locales-foto img, .picante svg{ animation:none; }
}
/* los valores estimados llevan marca visible: no se presentan como declarados */
.nutri-estimado .nutri-k::after{
content:" · estimado";
color:var(--humo);
letter-spacing:.06em;
}
.nutri-estimado .nutri-lista > div{ border-style:dashed; }
/* ═══════════════════════════════════════════════════════════
PEDIDO PARA RECOGER · el compositor sin pago en la web
Mismo patrón que .ficha-capa: capa propia, no