/* Natury · propuesta. Bento (bento-box-grid), portada de revista (P34), sello VEGAN (R7), cápsula (M3), fondo blanco, sin degradados. */
@view-transition { navigation: auto; }
:root { --gut: clamp(1rem, 3vw, 2.5rem); --wrap: 80rem; --curva: cubic-bezier(.2,.7,.1,1); --franja: 2.05rem; --tile: 0 0 0 1px var(--c-line), 0 .625rem 1.5rem -1.125rem rgb(58 34 16 / .3); --mask-troquel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0%2050.0L99.7%2051.3L98.7%2052.6L97.3%2053.7L95.8%2054.8L94.5%2055.9L93.6%2056.9L93.3%2058.0L93.6%2059.3L94.4%2060.7L95.4%2062.2L96.4%2063.7L97.0%2065.3L97.1%2066.7L96.5%2067.9L95.4%2068.8L93.8%2069.5L92.0%2070.0L90.3%2070.5L89.0%2071.2L88.1%2072.0L87.8%2073.2L87.9%2074.6L88.3%2076.4L88.8%2078.2L89.0%2079.9L88.7%2081.4L88.0%2082.4L86.7%2083.1L85.1%2083.3L83.2%2083.2L81.4%2083.1L79.8%2083.1L78.6%2083.5L77.8%2084.3L77.3%2085.6L77.1%2087.3L76.9%2089.1L76.6%2090.9L76.0%2092.4L75.0%2093.3L73.7%2093.7L72.1%2093.4L70.4%2092.8L68.7%2092.1L67.2%2091.5L65.8%2091.2L64.7%2091.5L63.8%2092.4L63.0%2093.8L62.2%2095.4L61.3%2097.0L60.3%2098.3L59.1%2099.1L57.8%2099.2L56.4%2098.7L55.0%2097.7L53.7%2096.4L52.4%2095.2L51.2%2094.3L50.0%2094.0L48.8%2094.3L47.6%2095.2L46.3%2096.4L45.0%2097.7L43.6%2098.7L42.2%2099.2L40.9%2099.1L39.7%2098.3L38.7%2097.0L37.8%2095.4L37.0%2093.8L36.2%2092.4L35.3%2091.5L34.2%2091.2L32.8%2091.5L31.3%2092.1L29.6%2092.8L27.9%2093.4L26.3%2093.7L25.0%2093.3L24.0%2092.4L23.4%2090.9L23.1%2089.1L22.9%2087.3L22.7%2085.6L22.2%2084.3L21.4%2083.5L20.2%2083.1L18.6%2083.1L16.8%2083.2L14.9%2083.3L13.3%2083.1L12.0%2082.4L11.3%2081.4L11.0%2079.9L11.2%2078.2L11.7%2076.4L12.1%2074.6L12.2%2073.2L11.9%2072.0L11.0%2071.2L9.7%2070.5L8.0%2070.0L6.2%2069.5L4.6%2068.8L3.5%2067.9L2.9%2066.7L3.0%2065.3L3.6%2063.7L4.6%2062.2L5.6%2060.7L6.4%2059.3L6.7%2058.0L6.4%2056.9L5.5%2055.9L4.2%2054.8L2.7%2053.7L1.3%2052.6L0.3%2051.3L0.0%2050.0L0.3%2048.7L1.3%2047.4L2.7%2046.3L4.2%2045.2L5.5%2044.1L6.4%2043.1L6.7%2042.0L6.4%2040.7L5.6%2039.3L4.6%2037.8L3.6%2036.3L3.0%2034.7L2.9%2033.3L3.5%2032.1L4.6%2031.2L6.2%2030.5L8.0%2030.0L9.7%2029.5L11.0%2028.8L11.9%2028.0L12.2%2026.8L12.1%2025.4L11.7%2023.6L11.2%2021.8L11.0%2020.1L11.3%2018.6L12.0%2017.6L13.3%2016.9L14.9%2016.7L16.8%2016.8L18.6%2016.9L20.2%2016.9L21.4%2016.5L22.2%2015.7L22.7%2014.4L22.9%2012.7L23.1%2010.9L23.4%209.1L24.0%207.6L25.0%206.7L26.3%206.3L27.9%206.6L29.6%207.2L31.3%207.9L32.8%208.5L34.2%208.8L35.3%208.5L36.2%207.6L37.0%206.2L37.8%204.6L38.7%203.0L39.7%201.7L40.9%200.9L42.2%200.8L43.6%201.3L45.0%202.3L46.3%203.6L47.6%204.8L48.8%205.7L50.0%206.0L51.2%205.7L52.4%204.8L53.7%203.6L55.0%202.3L56.4%201.3L57.8%200.8L59.1%200.9L60.3%201.7L61.3%203.0L62.2%204.6L63.0%206.2L63.8%207.6L64.7%208.5L65.8%208.8L67.2%208.5L68.7%207.9L70.4%207.2L72.1%206.6L73.7%206.3L75.0%206.7L76.0%207.6L76.6%209.1L76.9%2010.9L77.1%2012.7L77.3%2014.4L77.8%2015.7L78.6%2016.5L79.8%2016.9L81.4%2016.9L83.2%2016.8L85.1%2016.7L86.7%2016.9L88.0%2017.6L88.7%2018.6L89.0%2020.1L88.8%2021.8L88.3%2023.6L87.9%2025.4L87.8%2026.8L88.1%2028.0L89.0%2028.8L90.3%2029.5L92.0%2030.0L93.8%2030.5L95.4%2031.2L96.5%2032.1L97.1%2033.3L97.0%2034.7L96.4%2036.3L95.4%2037.8L94.4%2039.3L93.6%2040.7L93.3%2042.0L93.6%2043.1L94.5%2044.1L95.8%2045.2L97.3%2046.3L98.7%2047.4L99.7%2048.7Z'/%3E%3C/svg%3E"); }
*, *::before, *::after { box-sizing: border-box; font-feature-settings: "lnum" !important; }
html { -webkit-text-size-adjust: 100%; }
body { font-variant-numeric: lining-nums; margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 1.0625rem/1.55 var(--f-body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.015em; line-height: 1.06; margin: 0; }
h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
h3 { font-size: 1.3rem; letter-spacing: -.005em; line-height: 1.18; }
p { margin: 0; }
:focus-visible { outline: .1875rem solid var(--c-accent); outline-offset: .1875rem; border-radius: .25rem; }
.envol { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.sec { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sec-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-cab p { max-width: 34ch; color: var(--c-muted); font-size: 1.125rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.25rem; padding: .8em 1.6em; border: 2px solid var(--c-ink); border-radius: 99rem; background: var(--c-ink); color: #fff; font: 600 1.0625rem/1.1 var(--f-body); text-decoration: none; cursor: pointer; transition: background .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva), transform .35s var(--curva); }
.btn:hover { background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); }
.btn.vacio { background: transparent; color: var(--c-ink); }
.btn.vacio:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.enlace { color: var(--c-accent); font-weight: 600; text-underline-offset: .2em; }

/* Franja de propuesta: siempre a la vista */
.propuesta { position: sticky; top: 0; z-index: 60; min-height: var(--franja); display: flex; align-items: center; justify-content: center; padding: .25rem .75rem; background: var(--c-accent); color: #fff; font-size: .8125rem; font-weight: 600; line-height: 1.25; text-align: center; }
.propuesta a { color: #fff; }

/* M3 · Cápsula flotante */
.capsula { position: fixed; z-index: 50; top: calc(var(--franja) + .75rem); left: 50%; translate: -50% 0; width: min(46rem, 100% - 1.5rem); display: flex; align-items: center; gap: .25rem; padding: .375rem .375rem .375rem 1.25rem; border-radius: 99rem; background: rgb(255 255 255 / .9); backdrop-filter: blur(.875rem); box-shadow: 0 0 0 1px var(--c-line), 0 .75rem 2rem -1rem rgb(58 34 16 / .45); transition: width .5s var(--curva), padding .5s var(--curva); }
.capsula.encogida { width: min(36rem, 100% - 1.5rem); }
.capsula .logo { flex: none; display: flex; align-items: center; min-height: 2.75rem; color: var(--c-ink); }
.capsula .logo svg { width: 6.25rem; height: auto; }
.capsula nav { display: flex; margin-left: auto; }
.capsula nav a, .cesta-ir, .menu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .9rem; border-radius: 99rem; border: 0; background: none; color: var(--c-ink); font: 600 .9375rem var(--f-body); text-decoration: none; cursor: pointer; transition: background .3s; }
.capsula nav a:hover, .capsula nav a[aria-current] { background: var(--c-surface-2); }
.cesta-ir { background: var(--c-ink); color: #fff; gap: .45rem; margin-left: .25rem; }
.cesta-ir:hover { background: var(--c-accent); }
.cesta-ir b { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; border-radius: 99rem; background: #fff; color: var(--c-ink); font-size: .8125rem; }
.menu-btn { display: none; }
.btn.claro { background: #fff; border-color: #fff; color: var(--c-ink); }
.btn.claro:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn.vacio-claro { background: transparent; border-color: #fff; color: #fff; }
.btn.vacio-claro:hover { background: #fff; color: var(--c-ink); }
[data-m-digitos] { display: inline-flex; line-height: 1.1; white-space: pre; }
[data-m-digitos] .m-col > span { font-variant-numeric: lining-nums tabular-nums; text-align: center; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* scroll-reveal-subtle: fundido con muy poco recorrido */
.js .revela { opacity: 0; translate: 0 .75rem; transition: opacity .38s ease-out, translate .38s ease-out; }
.js .revela.visto { opacity: 1; translate: none; }

/* P34 · Portada de revista */
.pres-p34 { padding: calc(var(--franja) + 4.75rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; }
.pres-p34 .linea-sup { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font: 600 .75rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--c-ink); padding-bottom: .5rem; }
.pres-p34 .linea-sup a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.75rem; text-underline-offset: .2em; }
.pres-p34 .linea-sup a span { color: var(--c-accent); margin-right: .35em; }
.pres-p34 .cabecera { margin: clamp(.75rem, 2vw, 1.5rem) 0 0; }
.pres-p34 .cabecera svg { display: block; width: 100%; height: auto; }
.pres-p34 .cuerpo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, .95fr); gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }
.pres-p34 .portada { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 1rem; }
.pres-p34 .portada img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; box-shadow: 0 1.875rem 3rem -1.75rem rgb(58 34 16 / .5); }
.pres-p34 .titulares { list-style: none; margin: 0; padding: 0; align-self: end; display: grid; gap: .25rem; }
.pres-p34 .titulares li { display: grid; grid-template-columns: 1.75rem 1fr; border-top: 1px solid var(--c-ink); }
.pres-p34 .titulares b { padding-top: 1.05rem; font: 700 .75rem var(--f-body); color: var(--c-accent); }
.pres-p34 .titulares a { display: block; min-height: 2.75rem; padding: .7rem 0 .9rem; font: 600 clamp(1.25rem, 1.9vw, 1.65rem)/1.15 var(--f-display); text-decoration: none; transition: color .25s; }
.pres-p34 .titulares a:hover { color: var(--c-accent); }
.pres-p34 .titulares em { display: block; margin-top: .25rem; font: 400 .9375rem/1.4 var(--f-body); font-style: normal; color: var(--c-muted); }
.pres-p34 h1 { font-size: clamp(2.25rem, 3.8vw, 3.5rem); font-style: italic; font-weight: 500; margin-bottom: .9rem; text-wrap: balance; }
.pres-p34 .entrada { color: var(--c-muted); font-size: 1.125rem; max-width: 34ch; margin-bottom: 1.5rem; }
.pres-p34 .acciones { display: flex; flex-wrap: wrap; gap: .625rem; }

/* R7 · El sello VEGAN */
.troquel { position: absolute; top: .6rem; right: .6rem; z-index: 1; display: grid; place-items: center; width: 4rem; aspect-ratio: 1; margin: 0; background: var(--c-accent); color: #fff; font: 800 .6875rem/1 var(--f-body); letter-spacing: .07em; rotate: -9deg; -webkit-mask: var(--mask-troquel) center/100% no-repeat; mask: var(--mask-troquel) center/100% no-repeat; transition: rotate .4s var(--curva); }
.troquel.grande { top: auto; bottom: -1.5rem; right: -1.5rem; width: clamp(7rem, 11vw, 9.5rem); font-size: clamp(1.125rem, 1.8vw, 1.5rem); }
.sellos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .625rem; list-style: none; margin: 0; padding: 0; }
.sellos li { padding: .55rem 1rem; border: 1.5px solid currentColor; border-radius: 99rem; font: 600 .9375rem/1.1 var(--f-body); }
.sellos li.vegan { padding: .6rem 1.35rem; border-color: var(--c-accent); background: var(--c-accent); color: #fff; font-weight: 800; font-size: 1.125rem; letter-spacing: .1em; }
.banda-sellos { padding-block: 1.5rem; background: var(--c-ink); color: #fff; }

/* S2 con bento-box-grid · Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.625rem, 1.2vw, 1rem); grid-auto-flow: dense; }
.tarjeta { position: relative; display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; background: var(--c-surface); box-shadow: var(--tile); text-decoration: none; transition: scale .3s var(--curva), box-shadow .3s var(--curva); }
.tarjeta:hover { scale: 1.02; box-shadow: 0 0 0 1px var(--c-line), 0 1.25rem 2rem -1.25rem rgb(58 34 16 / .4); }
.tarjeta .marco { position: relative; flex: 1 1 auto; aspect-ratio: 1; min-height: 0; background: var(--c-surface-2); }
.tarjeta .marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarjeta:hover .troquel { rotate: 6deg; }
.tarjeta h3 { padding: .8rem .95rem 0; }
.tarjeta p { margin: .3rem .95rem 0; color: var(--c-muted); font-size: .9375rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eur-t { padding: .45rem .95rem .9rem; font-weight: 700; font-size: 1rem; }
.bento > :nth-child(1), .bento-tienda > :nth-child(10n + 1) { grid-column: span 2; grid-row: span 2; }
.bento > :nth-child(1) .marco, .bento-tienda > :nth-child(10n + 1) .marco { aspect-ratio: auto; min-height: 16rem; }
.bento > :nth-child(1) h3, .bento-tienda > :nth-child(10n + 1) h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.bento > :nth-child(1) .troquel, .bento-tienda > :nth-child(10n + 1) .troquel { width: 5.75rem; font-size: .9375rem; top: .9rem; right: .9rem; }
.bento > :nth-child(6) { grid-column: span 2; }
.bento > :nth-child(6) .marco { aspect-ratio: auto; min-height: 12rem; }
.mas { margin-top: 2rem; }

/* Tu tarta, en tres pasos */
.sec-suave { background: var(--c-surface-2); }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.625rem, 1.2vw, 1rem); }
.pasos > article { display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; background: var(--c-surface); box-shadow: var(--tile); }
.pasos .p2 { background: var(--c-accent); color: #fff; box-shadow: none; }
.pasos .p3 { background: var(--c-ink); color: #fff; box-shadow: none; }
.pasos img { flex: none; width: 100%; height: clamp(15rem, 24vw, 21rem); object-fit: cover; }
.pasos .p3 img { object-position: 50% 100%; }
.pasos .txt { padding: clamp(1.1rem, 2vw, 1.75rem); }
.pasos .num { display: block; font: 600 clamp(2.5rem, 4vw, 3.5rem)/1 var(--f-display); margin-bottom: .75rem; }
.pasos h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: .5rem; }
.pasos p { font-size: 1rem; }

/* ft2 · Bloque grande, dentro de la composición */
.bento-cafe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto minmax(13rem, 1fr); gap: clamp(.625rem, 1.2vw, 1rem); }
.bento-cafe figure { margin: 0; border-radius: 1rem; overflow: hidden; }
.bento-cafe img { width: 100%; height: 100%; object-fit: cover; }
.bento-cafe .grande-f { grid-column: span 2; grid-row: span 2; min-height: 50vh; }
.tile-txt { grid-column: span 2; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 1rem; background: var(--c-surface-2); }
.tile-txt h2 { margin-bottom: .75rem; }
.tile-txt p { font-size: 1.125rem; margin-bottom: 1.25rem; max-width: 34ch; }
.bloque-foto { margin-bottom: clamp(3rem, 6vw, 5rem); }
.bloque-foto img { width: 100%; height: clamp(18rem, 50vh, 34rem); object-fit: cover; border-radius: 1rem; }

/* A14 y A35 */
.m-estela { --m-estela-color: var(--c-accent); }
.btn.m-estela { --m-estela-color: #f3e4d2; }
.titulares.m-carta { --m-carta-fondo: var(--c-accent); --m-carta-texto: #fff; border-top: 0; }
.titulares.m-carta > li { border-bottom: 0; }

/* F6 */
.sec-f6 { background: var(--c-surface-2); --c-line: #dcc8b0; }
.f6-tit { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.f6-p { font-family: var(--f-display); font-weight: 600; }

/* C3 · Horario en ticket con talón */
.ticket-h { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); background: var(--c-surface-2); -webkit-mask: radial-gradient(circle .45rem at .55rem 0, transparent 98%, #000) 0 0/1.1rem 51% repeat-x, radial-gradient(circle .45rem at .55rem 100%, transparent 98%, #000) 0 100%/1.1rem 51% repeat-x; mask: radial-gradient(circle .45rem at .55rem 0, transparent 98%, #000) 0 0/1.1rem 51% repeat-x, radial-gradient(circle .45rem at .55rem 100%, transparent 98%, #000) 0 100%/1.1rem 51% repeat-x; }
.th-cuerpo { padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.75rem); }
.th-cuerpo h2 { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.th-tabla { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.th-tabla th, .th-tabla td { padding: .85rem .75rem .85rem 0; text-align: left; border-top: 1.5px dashed #cdb79c; font-weight: 400; white-space: nowrap; }
.th-tabla thead td, .th-tabla thead th { border-top: 0; padding-block: 0 .6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.th-tabla tbody th { font-weight: 600; white-space: normal; }
.th-tabla tr.hoy th { font-weight: 700; }
.th-tabla tr.hoy td { font-weight: 600; }
.hoy-et { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 99rem; background: var(--c-accent); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: .1em; white-space: nowrap; }
.th-talon { display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.75rem); background: var(--c-ink); color: #f3e4d2; }
.th-talon h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.th-talon p a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: .2em; }
.th-acc { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: auto; }
.ticket-h.compacto { grid-template-columns: minmax(0, 1fr); }
.ticket-h.compacto .th-cuerpo { padding-block: 1.75rem 1.25rem; }
.ticket-h.compacto .th-talon { padding-block: 1.25rem 1.75rem; }

/* Cierre, sin degradado */
.cierre-sec { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.cierre { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 1rem; background: var(--c-ink); color: #fff; }
.cierre h2 { margin-bottom: .6rem; }
.cierre-acc { display: grid; gap: .6rem; justify-items: start; }

/* Pie */
.pie { --m-grano-a: #5c3a20; --m-grano-b: #6b2733; --m-grano-c: #2a1608; --m-grano-fuerza: .22; padding-block: 3.5rem 2rem; background: var(--c-ink); color: #f3e4d2; font-size: 1rem; }
.pie .marca-pie { color: #f3e4d2; margin-bottom: 2.5rem; }
.pie .marca-pie svg { display: block; width: 100%; height: auto; }
.pie-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.pie h3 { font-size: 1.125rem; margin-bottom: .6rem; }
.pie address { font-style: normal; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li a, .pie address a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: .2em; }
.pie :focus-visible { outline-color: #f3e4d2; }
.horario { width: 100%; max-width: 22rem; border-collapse: collapse; font-size: .9375rem; }
.horario th, .horario td { padding: .3rem .5rem .3rem 0; text-align: left; font-weight: 400; border-bottom: 1px solid rgb(243 228 210 / .25); }
.horario thead th { font-weight: 600; }
.pie .aviso { margin-top: 2rem; color: #e6d3bb; font-size: .875rem; }
.pie .aviso a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Tienda */
.cab-pag { padding: calc(var(--franja) + 6rem) 0 2.5rem; }
.cab-pag h1 { font-size: clamp(2.75rem, 7vw, 6rem); text-wrap: balance; margin-bottom: 1rem; }
.cab-pag p { max-width: 46ch; color: var(--c-muted); font-size: 1.1875rem; }
.filtros { position: sticky; top: calc(var(--franja) + 4.1rem); z-index: 20; padding-block: .4rem; background: var(--c-bg); }
.filtros > * { pointer-events: auto; }
.filtros .fila { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .2rem; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--c-ink); border-radius: 99rem; background: transparent; color: var(--c-ink); font: 600 .9375rem var(--f-body); cursor: pointer; transition: background .3s, color .3s; }
.chip[aria-pressed="true"] { background: var(--c-ink); color: #fff; }
.chip.suave { border-color: var(--c-line); background: var(--c-surface); }
.chip.suave[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.vacio-msg { padding: 3rem 0; color: var(--c-muted); }

/* Ficha */
.ficha { padding-top: calc(var(--franja) + 5.5rem); padding-bottom: 4rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.galeria { position: sticky; top: calc(var(--franja) + 5rem); display: grid; gap: .6rem; }
.galeria .grande { position: relative; aspect-ratio: 1; border-radius: 1.5rem; overflow: hidden; background: var(--c-surface-2); }
.galeria .grande img { width: 100%; height: 100%; object-fit: cover; }
.galeria .grande::after { content: "VEGAN"; position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 6rem; aspect-ratio: 1; background: var(--c-accent); color: #fff; font: 800 .9375rem/1 var(--f-body); letter-spacing: .08em; rotate: -9deg; -webkit-mask: var(--mask-troquel) center/100% no-repeat; mask: var(--mask-troquel) center/100% no-repeat; }
.flecha { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--c-ink); box-shadow: 0 .25rem .75rem rgb(58 34 16 / .25); font: 600 1.25rem/1 var(--f-body); cursor: pointer; transition: background .25s, color .25s; }
.flecha:hover { background: var(--c-ink); color: #fff; }
.flecha.ant { left: .75rem; }
.flecha.sig { right: .75rem; }
.galeria .minis { display: flex; gap: .5rem; }
.galeria .minis button { width: 4.5rem; height: 4.5rem; padding: 0; border: 2px solid transparent; border-radius: .75rem; overflow: hidden; background: none; cursor: pointer; }
.galeria .minis button[aria-pressed="true"] { border-color: var(--c-ink); }
.galeria .minis img { width: 100%; height: 100%; object-fit: cover; }
.migas { font-size: .9375rem; color: var(--c-muted); margin-bottom: .75rem; }
.migas a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ficha h1 { font-size: clamp(2.4rem, 4.6vw, 4.25rem); margin-bottom: .9rem; text-wrap: balance; }
.ficha .desc { color: var(--c-muted); font-size: 1.125rem; margin-bottom: 1.5rem; }
.precio { display: flex; align-items: baseline; gap: .6rem; font: 700 clamp(2.4rem, 4vw, 3.25rem)/1 var(--f-display); letter-spacing: -.03em; margin-bottom: 1.75rem; }
.precio small { font: 400 .9375rem var(--f-body); letter-spacing: 0; color: var(--c-muted); }
.precio .cifra { display: inline-block; }
.precio .cifra.cambia { animation: precio .45s var(--curva); }
@keyframes precio { from { transform: translateY(.45em); opacity: 0; } }
.opcion { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.opcion legend, .campo label { padding: 0; margin-bottom: .45rem; font-weight: 600; font-size: .9375rem; }
.opcion .fila { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion label { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1rem; border: 1.5px solid var(--c-line); border-radius: .5rem; background: transparent; font-weight: 600; font-size: .9375rem; line-height: 1.15; cursor: pointer; transition: background .25s, color .25s, rotate .35s var(--curva); }
.opcion input:checked + label { border-style: solid; background: var(--c-ink); color: #fff; rotate: -1.5deg; }
.opcion input:focus-visible + label { outline: .1875rem solid var(--c-accent); outline-offset: 2px; }
.opcion input:disabled + label { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.campo { display: grid; min-width: 0; }
.campo input, .campo select { width: 100%; min-height: 3rem; padding: .5rem .75rem; border: 1.5px solid var(--c-ink); border-radius: .625rem; background: var(--c-surface); color: var(--c-ink); font: 400 1rem var(--f-body); }
.ayuda { font-size: .9375rem; color: var(--c-muted); margin-bottom: 1.25rem; }
.error { color: var(--c-bad); font-weight: 600; font-size: .9375rem; margin-bottom: .75rem; }
.comprar { display: flex; gap: .625rem; align-items: stretch; margin-bottom: 1rem; }
.comprar .btn { flex: 1; }
.ok-cesta .enlace { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ok-cesta { padding: .9rem 1rem; border-radius: .75rem; background: var(--c-surface-2); font-weight: 600; margin-bottom: 1rem; }
.datos { margin: 1.5rem 0 0; border-top: 1px solid var(--c-line); }
.datos > div { padding: .85rem 0; border-bottom: 1px solid var(--c-line); }
.datos dt { font-weight: 600; font-size: .9375rem; }
.datos dd { margin: .15rem 0 0; color: var(--c-muted); font-size: .9375rem; }
.datos .pend { color: var(--c-bad); }

/* Cesta */
.cesta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-bottom: 5rem; }
.linea { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .9rem; padding-block: 1.25rem; border-top: 1px solid var(--c-line); }
.linea img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: .875rem; }
.linea ul { list-style: none; margin: .3rem 0 .5rem; padding: 0; color: var(--c-muted); font-size: .9375rem; }
.cantidad { display: inline-flex; align-items: center; }
.cantidad button, .quitar { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: none; color: var(--c-ink); font: 600 1.125rem var(--f-body); cursor: pointer; border-radius: .5rem; }
.cantidad button:hover { background: var(--c-surface-2); }
.quitar { font-size: .9375rem; text-decoration: underline; padding-inline: .4rem; }
.linea .importe { font: 700 1.25rem var(--f-display); text-align: right; white-space: nowrap; }
.ticket { position: sticky; top: calc(var(--franja) + 5rem); padding: 1.75rem 1.5rem; background: var(--c-surface-2); -webkit-mask: radial-gradient(circle .45rem at .55rem 0, transparent 98%, #000) 0 0/1.1rem 51% repeat-x, radial-gradient(circle .45rem at .55rem 100%, transparent 98%, #000) 0 100%/1.1rem 51% repeat-x; mask: radial-gradient(circle .45rem at .55rem 0, transparent 98%, #000) 0 0/1.1rem 51% repeat-x, radial-gradient(circle .45rem at .55rem 100%, transparent 98%, #000) 0 100%/1.1rem 51% repeat-x; }
.ticket h2 { font-size: 1.75rem; margin-bottom: 1rem; letter-spacing: -.02em; }
.ticket .fila-t { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; border-bottom: 1.5px dashed var(--c-line); }
.ticket .total { align-items: baseline; font: 700 1.125rem var(--f-display); border-bottom: 0; padding-top: .9rem; }
.ticket .total span:last-child { font-size: 1.75rem; white-space: nowrap; }
.ticket .opcion { margin: 1rem 0; }
.ticket .btn { width: 100%; margin-top: .5rem; }
.ticket .ayuda { margin: .75rem 0 0; font-size: .875rem; }
dialog.pago { width: min(32rem, 100% - 2rem); padding: clamp(1.5rem, 4vw, 2.5rem); border: 0; border-radius: 1.5rem; background: var(--c-surface); color: var(--c-ink); }
dialog.pago::backdrop { background: rgb(58 34 16 / .6); }
dialog.pago h2 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin-bottom: .9rem; }
dialog.pago p { margin-bottom: .9rem; }
dialog.pago .btn { width: 100%; margin-top: .5rem; }

/* Cafetería y empresas */
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.dos img { border-radius: 1.5rem; }
.dos img.vertical { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; }
.carta { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 5rem); }
.carta section { break-inside: avoid; margin-bottom: 2.75rem; }
.carta h3 { font-size: 1.75rem; margin-bottom: .75rem; }
.carta ul { list-style: none; margin: 0; padding: 0; }
.carta li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .55rem; border-top: 1px solid var(--c-line); }
.carta li b { font-weight: 600; white-space: nowrap; }
.carta li small { display: block; color: var(--c-muted); font-size: .9375rem; }
.leyenda { color: var(--c-muted); font-size: .9375rem; margin-top: 1rem; }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(.625rem, 1.2vw, 1rem); }
.box { position: relative; padding: 1.75rem 1.5rem; border-radius: 1rem; background: var(--c-surface); box-shadow: var(--tile); display: flex; flex-direction: column; gap: .9rem; }
.box .eur { font: 600 clamp(2.5rem, 4.5vw, 3.5rem)/1 var(--f-display); }
.box .eur small { font: 400 .9375rem var(--f-body); color: var(--c-muted); }
.box ul { margin: 0; padding-left: 1.1rem; color: var(--c-muted); font-size: 1rem; }
.func { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.625rem, 1.2vw, 1rem); list-style: none; margin: 0; padding: 0; }
.func li { grid-column: span 2; padding: 1.25rem 1.35rem 1.5rem; border-radius: 1rem; background: rgb(255 255 255 / .08); }
.func li:nth-child(-n + 2) { grid-column: span 3; }
.func h3 { margin-bottom: .4rem; }
.oscura { background: var(--c-ink); color: #fff; }
.oscura .sec-cab p { color: #f3e4d2; }
.legal { max-width: 46rem; padding-bottom: 5rem; }
.legal h2 { font-size: 1.75rem; margin: 2rem 0 .6rem; letter-spacing: -.02em; }
.legal p { margin-bottom: .8rem; }

@media (max-width: 62rem) {
  .pres-p34 .cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pres-p34 .texto { grid-column: 1 / -1; grid-row: 1; }
  .pres-p34 .troquel.grande { right: -.75rem; }
  .rejilla, .bento-cafe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-h { grid-template-columns: minmax(0, 1fr); }
  .ficha, .cesta { grid-template-columns: minmax(0, 1fr); }
  .galeria, .ticket { position: static; }
}
@media (max-width: 44rem) {
  :root { --franja: 2.5rem; }
  body { font-size: 1rem; }
  .capsula { padding-left: 1rem; }
  .capsula .logo svg { width: 5.25rem; }
  .capsula nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + .4rem); flex-direction: column; padding: .5rem; border-radius: 1.25rem; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-line), 0 1rem 2rem -1rem rgb(58 34 16 / .5); }
  .capsula.abierta nav { display: flex; }
  .capsula nav a { justify-content: flex-start; min-height: 3rem; font-size: 1.0625rem; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .pres-p34 { padding-top: calc(var(--franja) + 4.25rem); }
  .pres-p34 .linea-sup { letter-spacing: .08em; }
  .pres-p34 .cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pres-p34 .texto { grid-row: auto; }
  .pres-p34 .portada { margin-right: .5rem; }
  .pres-p34 .titulares { order: 3; }
  .pres-p34 h1 { font-size: 2.5rem; }
  .bento > :nth-child(1), .bento-tienda > :nth-child(10n + 1) { grid-row: auto; }
  .bento > :nth-child(1) .marco, .bento-tienda > :nth-child(10n + 1) .marco { aspect-ratio: 4 / 3; min-height: 0; }
  .bento > :nth-child(6) .marco { aspect-ratio: 2 / 1; min-height: 0; }
  .troquel { width: 3.5rem; font-size: .625rem; top: .4rem; right: .4rem; letter-spacing: .05em; }
  .bento > :nth-child(1) .troquel, .bento-tienda > :nth-child(10n + 1) .troquel { width: 4.5rem; font-size: .75rem; top: .6rem; right: .6rem; }
  .galeria .grande::after { width: 4.75rem; font-size: .75rem; top: .6rem; right: .6rem; }
  .tarjeta h3 { font-size: 1.0625rem; padding: .6rem .7rem 0; }
  .tarjeta p { display: none; }
  .eur-t { padding: .3rem .7rem .7rem; font-size: .9375rem; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .pasos img { height: 13rem; }
  .pasos .p3 img { object-position: 50% 78%; }
  .bento-cafe { grid-template-rows: none; }
  .bento-cafe .grande-f { min-height: 0; grid-row: auto; aspect-ratio: 1; }
  .bento-cafe figure:not(.grande-f) { aspect-ratio: 1; }
  .tile-txt { order: -1; }
  .th-tabla { font-size: .9375rem; }
  .th-tabla th, .th-tabla td { padding-right: .5rem; }
  .cierre { grid-template-columns: minmax(0, 1fr); }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .func { grid-template-columns: minmax(0, 1fr); }
  .func li, .func li:nth-child(-n + 2) { grid-column: auto; }
  .linea { grid-template-columns: 4.75rem 1fr; }
  .linea img { width: 4.75rem; height: 4.75rem; }
  .linea .importe { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===== Pantallas grandes (14 oct 2026; herramientas/pantallas-grandes.mjs) =====
   Hasta 1440 px de ancho la web es idéntica. Por encima, la letra raíz crece en proporción (letra, espacios y
   medidas van en rem) hasta el 150 % a 2840 px, y el contenido ocupa al menos el 70 % de la pantalla: en una
   pantalla 2K o 4K se ve como en un portátil, solo que más grande, en vez de quedar apretado en el centro. */
html:not(:has([data-login])) { font-size: clamp(100%, calc(100% + (100vw - 1440px) * .005714), 150%); } /* el panel (admin.html) no crece */
@media (min-width: 1441px) { :root:not(:has([data-login])) { --wrap: max(80rem, 70vw); } }