/* ===== Panadería JPS · diseño 3 (panadería cálida, colores del logo) ===== */
:root {
  --papel: #fbf4e8;
  --papel2: #f2e4cc;
  --amarillo: #ffc62b;
  --amarillo2: #ffbf00;
  --rojo: #ef3a1d;
  --rojo2: #c8260d;
  --azul: #2b170b;
  --azul2: #4b2a14;
  --gris: #56585e;
  --rosa: #f0508a;
  --celeste: #1fa3e8;
  --naranja: #ff8a1f;
  --verde: #6cc04a;
  --wa: #25d366;
  --tinta: #22130a;
  --suave: #6f5a4a;
  --linea: rgba(43, 23, 11, .14);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --cuerpo: 'DM Sans', system-ui, sans-serif;
  --mano: 'Caveat', cursive;
  --guion: 'Kaushan Script', cursive;
  --redonda: 'Poppins', 'DM Sans', sans-serif;
  --radio: 26px;
  --sale: cubic-bezier(.22, 1, .36, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --sombra: 0 24px 50px -24px rgba(43, 23, 11, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.6 var(--cuerpo); overflow-x: hidden; }
body.cargando { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .95; margin: 0; text-transform: uppercase; color: var(--azul); }
p { margin: 0; }
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 8px; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--rell { fill: currentColor; stroke: none; }
.etq { display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.1 var(--guion); color: var(--rojo); }
.etq::before { content: ''; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.etq--claro { color: var(--amarillo); }
.titulo { font-size: clamp(2.8rem, 7vw, 6.2rem); margin: 16px 0 18px; letter-spacing: .005em; }
.sub { color: var(--suave); font-size: 1.1rem; max-width: 56ch; }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--bg, transparent); text-decoration: none; cursor: pointer; white-space: nowrap;
  font: 800 1rem/1 var(--cuerpo); position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--sale), box-shadow .25s, color .3s;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hover, rgba(255, 255, 255, .2)); transform: translateY(101%); border-radius: inherit; transition: transform .45s var(--sale); }
.btn:hover::before { transform: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn--grande { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }
.btn--bloque { width: 100%; }
.btn--wa { --bg: var(--wa); --hover: #1eb956; color: #fff; box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .9); }
.btn--oscuro { --bg: var(--azul); --hover: var(--rojo); color: #fff; }
.btn--amarillo { --bg: var(--amarillo); --hover: #fff; color: var(--azul); }
.icono-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3); }

/* ===== Pantalla de carga ===== */
.carga { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; }
.carga__telon { position: absolute; left: 0; right: 0; height: 50.5%; background: #f7ecdb; }
.carga__telon--a { top: 0; background: radial-gradient(70% 90% at 50% 100%, #fff7ea, #f3e3cb 70%); }
.carga__telon--b { bottom: 0; background: radial-gradient(70% 90% at 50% 0%, #fff7ea, #f3e3cb 70%); }
.carga__telon--b::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(120, 62, 24, .18)); }
.carga__in { position: relative; display: grid; justify-items: center; text-align: center; padding: 20px; }
.carga__arriba { font: 400 clamp(1.4rem, 3vw, 1.8rem)/1 var(--guion); color: var(--rojo); margin-bottom: 46px; }
.carga__escena { position: relative; display: grid; place-items: center; width: min(66vw, 300px); }
.carga__halo { position: absolute; left: 50%; top: 58%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 60, .45), rgba(255, 170, 60, 0) 62%); opacity: .4; }
.horno { position: relative; width: 100%; overflow: visible; filter: drop-shadow(0 22px 24px rgba(90, 40, 10, .35)); }
.horno__boca { animation: fuego 1.6s ease-in-out infinite alternate; }
@keyframes fuego { to { filter: brightness(1.15) saturate(1.2); } }
.horno .ll { transform-box: fill-box; transform-origin: 50% 100%; animation: llama .5s ease-in-out infinite alternate; }
.horno .ll2 { animation-duration: .65s; }
.horno .ll3 { animation-duration: .45s; animation-delay: -.2s; }
@keyframes llama { to { transform: scaleY(1.25) scaleX(.85); } }
.horno__vapor { position: absolute; left: 50%; top: -14%; width: 34%; translate: -50% 0; fill: none; stroke: rgba(150, 90, 50, .45); stroke-width: 5; stroke-linecap: round; opacity: 0; }
.horno__vapor path { stroke-dasharray: 40 120; animation: vapor 2.2s linear infinite; }
.horno__vapor path:nth-child(2) { animation-delay: -.7s; }
.horno__vapor path:nth-child(3) { animation-delay: -1.4s; }
.carga__marca { position: relative; display: flex; gap: 2px; margin-top: 18px; font: 400 clamp(4rem, 14vw, 6.4rem)/1 var(--display); color: var(--rojo); font-style: italic; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; filter: drop-shadow(0 6px 0 var(--amarillo)); }
.carga__marca span { display: inline-block; }
.carga__lema { font: 800 1rem/1 var(--cuerpo); letter-spacing: .4em; text-transform: uppercase; color: var(--azul); margin-top: 8px; }
.carga__barra { width: min(70vw, 300px); height: 8px; border-radius: 8px; background: rgba(43, 23, 11, .1); margin-top: 28px; overflow: hidden; }
.carga__lleno { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc62b, #ef7a1d, var(--rojo)); transform: scaleX(0); transform-origin: left; }
.carga__estado { display: flex; justify-content: space-between; width: min(70vw, 300px); margin-top: 10px; font-weight: 700; font-size: .9rem; color: var(--azul); }
.carga__pct { font-variant-numeric: tabular-nums; }
.carga__pan { position: absolute; z-index: 2; right: -22%; bottom: -2%; width: 30%; }
.pc__gorro { fill: #fff; stroke: #e0d3bf; stroke-width: 2; }
.pc__gorro-cinta { fill: none; stroke: #e0d3bf; stroke-width: 3; }
.carga__pan svg { width: 100%; overflow: visible; }
.carga__pan .pc__masa { animation: rebota .3s ease-in-out infinite alternate; }
.carga__pan .pc__pie--i { animation: pie .3s ease-in-out infinite alternate; }
.carga__pan .pc__pie--d { animation: pie .3s ease-in-out infinite alternate-reverse; }
.carga__pan.quieto .pc__masa, .carga__pan.quieto .pc__pie { animation: none; }
.carga__pan.saluda .pc__brazo--d { animation: saluda .4s ease-in-out 4 alternate; }
.carga__dice { position: absolute; left: 50%; bottom: calc(100% + 4px); translate: -30% 0; width: max-content; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--azul); color: #fff; font: 700 .85rem/1.2 var(--cuerpo); opacity: 0; }

/* ===== Cabecera ===== */
.cab { position: fixed; top: 14px; left: 0; right: 0; z-index: 40; transition: transform .5s var(--sale); pointer-events: none; }
.cab.oculta { transform: translateY(-140%); }
.cab__in {
  width: min(1240px, 100% - 24px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 18px; border-radius: 999px; pointer-events: auto;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(43, 23, 11, .5), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.cab__logo img { height: 44px; width: auto; }
.cab__nav { display: flex; gap: 2px; }
.cab__nav a { position: relative; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--azul); transition: background .25s, color .25s; }
.cab__nav a:hover { background: rgba(43, 23, 11, .07); }
.cab__nav a.activo { background: var(--azul); color: #fff; }
.cab__acc { display: flex; align-items: center; gap: 8px; }
.bolsa-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 7px 0 18px; border-radius: 999px; border: 0; cursor: pointer; background: var(--rojo); color: #fff; font-weight: 800; }
.bolsa-btn__n { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--rojo); font-size: .9rem; }
.bolsa-btn.salta { animation: salta .55s var(--rebote); }
@keyframes salta { 30% { transform: scale(1.14) rotate(-4deg); } 60% { transform: scale(.95) rotate(2deg); } }
.cab__menu { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--amarillo); color: var(--azul); cursor: pointer; place-items: center; }

/* ===== Hero ===== */
/* ===== Hero: escena de panadería (diseño 3) ===== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: #140a05; color: #fff; isolation: isolate; }
.hero__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__fondo img { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(16px) brightness(.42) saturate(1.5) sepia(.35); opacity: .65; }
.hero__fondo::before { content: ''; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(60% 55% at 72% 38%, rgba(255, 160, 50, .32), transparent 70%),
  radial-gradient(50% 60% at 10% 80%, rgba(120, 50, 10, .45), transparent 70%),
  linear-gradient(90deg, rgba(14, 7, 3, .92) 0%, rgba(14, 7, 3, .55) 45%, rgba(14, 7, 3, .25) 100%); }
.hero__fondo::after { content: ''; position: absolute; inset: auto 0 0; height: 140px; z-index: 1; background: linear-gradient(transparent, rgba(14, 7, 3, .85)); }
.hero__luz { position: absolute; z-index: 2; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 190, 90, .28), rgba(255, 150, 40, .08) 45%, transparent 70%); mix-blend-mode: screen; transform: translate(70vw, 40vh); }
.hero__brillos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__brillos i { position: absolute; width: var(--t, 60px); height: var(--t, 60px); border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 110, .55), transparent 70%); filter: blur(2px); animation: brillo var(--d, 9s) ease-in-out infinite alternate; }
.hero__brillos i:nth-child(1) { left: 58%; top: 12%; --t: 90px; --d: 8s; }
.hero__brillos i:nth-child(2) { left: 82%; top: 20%; --t: 50px; --d: 11s; }
.hero__brillos i:nth-child(3) { left: 66%; top: 70%; --t: 70px; --d: 10s; }
.hero__brillos i:nth-child(4) { left: 92%; top: 64%; --t: 40px; --d: 7s; }
.hero__brillos i:nth-child(5) { left: 48%; top: 40%; --t: 34px; --d: 12s; }
.hero__brillos i:nth-child(6) { left: 74%; top: 6%; --t: 28px; --d: 9s; }
.hero__brillos i:nth-child(7) { left: 20%; top: 14%; --t: 40px; --d: 13s; opacity: .5; }
.hero__brillos i:nth-child(8) { left: 36%; top: 86%; --t: 56px; --d: 10s; opacity: .6; }
.hero__brillos i:nth-child(9) { left: 88%; top: 88%; --t: 80px; --d: 12s; }
.hero__brillos i:nth-child(10) { left: 6%; top: 52%; --t: 30px; --d: 8s; opacity: .4; }
@keyframes brillo { 0% { transform: translate(0, 0) scale(1); opacity: .35; } 100% { transform: translate(18px, -26px) scale(1.25); opacity: .9; } }

.hero__in { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 30px; align-items: center; padding: 120px 0 70px; }
.hero__logo { display: inline-block; margin-bottom: 22px; }
.hero__logo img { width: 170px; height: auto; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255, 255, 255, .8)) drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.hero__titulo { margin: 0; display: grid; line-height: 1; text-transform: none; color: #fff; }
.hero__mas { font: 400 clamp(2.4rem, 4.4vw, 4rem)/1 var(--guion); color: #fff; transform: rotate(-3deg); transform-origin: left; margin-bottom: 2px; text-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.hero__pan { display: flex; font: 900 clamp(3.3rem, 7.6vw, 7.4rem)/.95 var(--redonda); letter-spacing: -.02em; text-transform: uppercase; color: var(--amarillo); text-shadow: 0 6px 0 #a5560f, 0 18px 40px rgba(0, 0, 0, .55); }
.hero__pan .l { display: inline-block; cursor: default; transition: translate .45s var(--rebote), rotate .45s var(--rebote), scale .45s var(--rebote), color .3s; }
.hero__pan .l:hover { translate: 0 -14px; rotate: -6deg; scale: 1.08; color: #ffe27a; }
.hero__feliz { margin-top: 14px; font: 700 clamp(1.5rem, 2.6vw, 2.35rem)/1.15 var(--redonda); color: #fff; max-width: 14em; }
.hero__corazon { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; fill: none; stroke: #ff3b30; stroke-width: 2.6; animation: late 1.4s ease-in-out infinite; }
@keyframes late { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.95); } 45% { transform: scale(1.12); } }
.hero__trazo { width: min(300px, 70%); margin: 14px 0 4px; overflow: visible; }
.hero__trazo path { fill: none; stroke: var(--amarillo); stroke-width: 7; stroke-linecap: round; }
.hero__sub { max-width: 34em; margin: 16px 0 26px; font-size: 1.08rem; color: rgba(255, 244, 228, .86); }
.hero__sub b { color: #fff; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__acciones .btn--amarillo { --hover: #fff; color: var(--tinta); box-shadow: 0 16px 34px -14px rgba(255, 198, 43, .8); }
.btn--borde { --bg: transparent; --hover: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ico--chico { width: 16px; height: 16px; }
.hero__rasgos { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.hero__rasgos li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; line-height: 1.2; color: #fff; }
.hero__rasgos .ico { width: 42px; height: 42px; padding: 8px; border-radius: 50%; stroke: var(--amarillo); background: rgba(255, 198, 43, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 198, 43, .45); transition: transform .4s var(--rebote), background .3s; }
.hero__rasgos li:hover .ico { transform: rotate(-12deg) scale(1.12); background: rgba(255, 198, 43, .22); }

/* La escena: todas las piezas en % de una caja con proporción fija */
.hero__escena { position: relative; width: 100%; aspect-ratio: 640 / 560; }
.capa { position: absolute; will-change: transform; }
.pizarra { right: 0; top: 0; width: 42%; border: 0; padding: 0; background: none; cursor: pointer; rotate: 6deg; transform-origin: 50% 0; }
.pizarra__tabla { display: block; position: relative; padding: 9% 9% 7%; border-radius: 10px; background: radial-gradient(120% 90% at 30% 20%, #3d3f3a, #1c1d1a 70%); border: 10px solid #6a3f1d;
  box-shadow: inset 0 0 0 2px #8b5a2e, inset 0 0 30px rgba(0, 0, 0, .6), 0 24px 40px -16px rgba(0, 0, 0, .8); text-align: left; }
.pizarra__tabla::before, .pizarra__tabla::after { content: ''; position: absolute; top: -32px; width: 3px; height: 30px; background: #8b6a45; }
.pizarra__tabla::before { left: 22%; transform: rotate(18deg); }
.pizarra__tabla::after { right: 22%; transform: rotate(-18deg); }
.pizarra__txt { display: grid; font: 700 clamp(1.05rem, 2.15vw, 1.95rem)/1.12 var(--mano); color: #f6f3ea; text-shadow: 0 0 1px rgba(255, 255, 255, .6); transform: rotate(-7deg); }
.pizarra__txt span { display: block; }
.pizarra__deco { width: 70%; margin-top: 6%; fill: none; stroke: var(--amarillo); stroke-width: 3; stroke-linecap: round; transform: rotate(-6deg); }
.pizarra__deco path:last-child { stroke: #fff; stroke-width: 2.4; }
.pizarra:hover { animation: columpio 1.2s ease-in-out; }
@keyframes columpio { 25% { rotate: 11deg; } 55% { rotate: 2deg; } 80% { rotate: 8deg; } }

.canasta { left: 0; top: 26%; width: 74%; overflow: visible; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.canasta .crois { transform-box: fill-box; transform-origin: 50% 100%; transition: translate .45s var(--rebote), rotate .45s var(--rebote), scale .45s var(--rebote); cursor: pointer; }
.canasta .crois:hover, .canasta .crois.salta { translate: 0 -18px; rotate: var(--r, 0deg); scale: 1.05; }

.taza-hero { right: 1%; bottom: 3%; width: 46%; border: 0; padding: 0; background: none; cursor: pointer; filter: drop-shadow(0 28px 26px rgba(0, 0, 0, .6)); -webkit-tap-highlight-color: transparent; }
.taza-hero svg { width: 100%; overflow: visible; transition: transform .4s var(--rebote); }
.taza-hero:hover svg { transform: rotate(-3deg) scale(1.03); }
.taza-hero:active svg { transform: scale(.96); }
.vp { stroke-dasharray: 60 140; animation: vapor 3.2s linear infinite; opacity: .5; }
.vp2 { animation-delay: -1.1s; }
.vp3 { animation-delay: -2.2s; }
@keyframes vapor { from { stroke-dashoffset: 200; opacity: 0; } 30% { opacity: .55; } to { stroke-dashoffset: 0; opacity: 0; } }
.taza-hero.hierve .vp { animation-duration: 1.2s; stroke-width: 13; }
.latte { transform-box: fill-box; transform-origin: center; }
.taza-hero.hierve .latte { animation: gira 1.2s var(--sale); }
@keyframes gira { 50% { transform: rotate(180deg) scale(.85); } 100% { transform: rotate(360deg); } }
.taza-hero__pista { position: absolute; left: -12%; top: 18%; font: 700 1.5rem/1 var(--mano); color: var(--amarillo); transform: rotate(-12deg); pointer-events: none; animation: pista 2s ease-in-out infinite; transition: opacity .4s; }
.taza-hero__pista::after { content: ''; position: absolute; right: -26px; top: 14px; width: 22px; height: 14px; border-bottom: 2px solid var(--amarillo); border-right: 2px solid var(--amarillo); border-radius: 0 0 12px 0; transform: rotate(20deg); }
.taza-hero.usada .taza-hero__pista { opacity: 0; }
@keyframes pista { 50% { translate: 0 -6px; } }
.corazon-vuela { position: absolute; z-index: 5; width: 26px; height: 26px; fill: #ff3b30; pointer-events: none; }

.granos { left: 2%; bottom: -2%; width: 70%; }
.hoja { width: 13%; rotate: var(--g, 0deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); pointer-events: none; animation: flota 5s ease-in-out infinite alternate; }
.hoja:nth-of-type(2n) { animation-duration: 6.5s; animation-delay: -2s; }
@keyframes flota { to { translate: 0 -16px; } }
.hoja--chica { width: 8%; }
.hoja svg, .hoja use { overflow: visible; }
.hero__disfruta { right: 0; bottom: -8%; margin: 0; display: flex; align-items: center; gap: 6px; font: 400 clamp(1.4rem, 2.4vw, 2.2rem)/1 var(--guion); color: #fff; rotate: -8deg; text-shadow: 0 4px 14px rgba(0, 0, 0, .7); pointer-events: none; }
.hero__disfruta svg { width: 1em; fill: none; stroke: #ff3b30; stroke-width: 2.6; }
.hero__disfruta::after { content: ''; position: absolute; left: 4%; right: 10%; bottom: -10px; height: 4px; border-radius: 4px; background: var(--amarillo); }
.hero__baja { position: absolute; z-index: 3; left: 50%; bottom: 18px; margin: 0; translate: -50% 0; color: rgba(255, 255, 255, .7); }
.hero__baja .ico { animation: baja 1.6s ease-in-out infinite; }

@media (max-width: 980px) {
  .hero__in { grid-template-columns: 1fr; padding: 108px 0 60px; gap: 34px; }
  .hero__escena { max-width: 560px; width: 100%; margin-inline: auto; }
  .hero__fondo::before { background: radial-gradient(70% 40% at 60% 70%, rgba(255, 160, 50, .3), transparent 70%), linear-gradient(rgba(14, 7, 3, .9), rgba(14, 7, 3, .6)); }
}
@media (max-width: 600px) {
  .hero__in { padding: 96px 0 84px; }
  .hero__disfruta { bottom: -6%; right: 2%; }
  .hero__logo img { width: 120px; height: auto; }
  .hero__pan { font-size: 15.2vw; }
  .hero__sub { font-size: 1rem; margin-bottom: 20px; }
  .hero__acciones .btn { flex: 1 1 100%; }
  .hero__rasgos { gap: 12px; justify-content: space-between; }
  .hero__rasgos li { flex-direction: column; text-align: center; font-size: .78rem; gap: 6px; flex: 1; }
  .hero__rasgos .ico { width: 38px; height: 38px; }
  .taza-hero__pista { font-size: 1.2rem; left: -6%; top: 8%; }
  .hero__baja { display: none; }
}


/* ===== Variante "horno": fondo claro de panadería (quitar la clase hero--horno vuelve al fondo oscuro) ===== */
.hero__horno { display: none; }
.hero--horno { background: #e8d3b8; color: var(--tinta); }
.hero--horno .hero__fondo img { display: none; }
.hero--horno .hero__fondo img.hero__horno { display: block; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: none; opacity: 1; }
.hero--horno .hero__fondo::before { background: radial-gradient(22% 30% at 72% 14%, rgba(255, 196, 110, .35), transparent 70%); }
.hero--horno .hero__fondo::after, .hero--horno .hero__brillos, .hero--horno .canasta, .hero--horno .hoja { display: none; }
.hero--horno .hero__luz { background: radial-gradient(circle, rgba(255, 210, 140, .22), transparent 65%); }
/* el texto va en una tarjeta crema translúcida para leerse sobre la foto */
.hero--horno .hero__txt { position: relative; z-index: 4; max-width: 600px; padding: 30px 36px 32px; border-radius: 30px; background: rgba(255, 248, 238, .8);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 30px 60px -30px rgba(60, 30, 10, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.hero--horno .hero__logo { margin-bottom: 12px; }
.hero--horno .hero__logo img { filter: none; width: 150px; }
.hero--horno .hero__mas { color: var(--azul); text-shadow: none; }
.hero--horno .hero__pan { color: var(--amarillo); text-shadow: 0 5px 0 #a5560f, 0 14px 26px rgba(120, 60, 10, .35); -webkit-text-stroke: 1px #c87a12; }
.hero--horno .hero__feliz { color: var(--azul); }
.hero--horno .hero__sub { color: var(--suave); }
.hero--horno .hero__sub b { color: var(--azul); }
.hero--horno .btn--borde { color: var(--azul); --hover: rgba(43, 23, 11, .08); box-shadow: inset 0 0 0 2px rgba(43, 23, 11, .35); }
.hero--horno .hero__rasgos { margin-top: 26px; }
.hero--horno .hero__rasgos li { color: var(--azul); }
.hero--horno .hero__rasgos .ico { stroke: #c46a1c; background: rgba(255, 198, 43, .2); box-shadow: inset 0 0 0 1.5px rgba(196, 106, 28, .4); }
.hero--horno .hero__baja { color: rgba(255, 255, 255, .8); }

@media (min-width: 981px) {
  /* las piezas se ubican sobre la foto: --k es la escala de la imagen (1672 x 941) en pantalla */
  .hero--horno { --k: max(calc(100vw / 1672), calc(100svh / 941)); height: 100vh; height: 100svh; min-height: 0; }
  .hero--horno .hero__in { position: static; grid-template-columns: minmax(0, 600px); padding: 96px 0 40px; }
  .hero--horno .hero__escena { position: absolute; inset: 0; z-index: 3; width: auto; aspect-ratio: auto; pointer-events: none; }
  .hero--horno .hero__escena > * { pointer-events: auto; }
  .hero--horno .taza-hero { left: calc(50vw + 284 * var(--k)); right: auto; top: auto; bottom: calc(62 * var(--k)); width: calc(270 * var(--k)); translate: -50% 0; }
  .hero--horno .pizarra { left: calc(50vw + 314 * var(--k)); right: auto; top: max(96px, calc(100svh - 770 * var(--k))); width: calc(230 * var(--k)); translate: -50% 0; }
  .hero--horno .pizarra__txt { font-size: calc(27 * var(--k)); }
  .hero--horno .granos { left: calc(50vw + 30 * var(--k)); bottom: calc(46 * var(--k)); width: calc(260 * var(--k)); }
  .hero--horno .taza-hero { left: calc(50vw + 314 * var(--k)); }
  .hero--horno .hero__disfruta { left: calc(50vw - 10 * var(--k)); right: auto; bottom: auto; top: calc(100svh - 330 * var(--k)); width: calc(190 * var(--k)); flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.05; font-size: calc(34 * var(--k)); }
  .hero--horno .hero__disfruta::after { display: none; }
  .hero--horno .hero__pan { font-size: clamp(3rem, 5.9vw, 5.6rem); }
  .hero--horno .hero__mas { font-size: clamp(2rem, 3.4vw, 3.2rem); }
  .hero--horno .hero__feliz { font-size: clamp(1.4rem, 2.2vw, 2rem); margin-top: 8px; }
  .hero--horno .hero__trazo { margin: 8px 0 0; }
  .hero--horno .hero__sub { margin: 12px 0 20px; font-size: 1rem; }
}
@media (min-width: 981px) and (max-height: 820px) {
  .hero--horno .hero__in { padding-top: 88px; }
  .hero--horno .hero__txt { padding: 20px 30px 24px; }
  .hero--horno .hero__logo img { width: 110px; }
  .hero--horno .hero__logo { margin-bottom: 4px; }
  .hero--horno .hero__rasgos { display: none; }
  .hero--horno .btn--grande { min-height: 50px; }
}
@media (min-width: 981px) and (max-height: 660px) {
  .hero--horno .hero__sub { display: none; }
}
@media (max-width: 980px) {
  .hero--horno .hero__fondo img.hero__horno { object-position: 30% 100%; }
  .hero--horno .hero__escena { aspect-ratio: 640 / 430; }
  .hero--horno .pizarra { left: 2%; right: auto; top: 6%; width: 44%; }
  .hero--horno .taza-hero { right: 2%; bottom: 0; width: 50%; }
  .hero--horno .granos { left: 6%; bottom: 0; width: 50%; }
  .hero--horno .hero__disfruta { display: none; }
}
@media (max-width: 600px) {
  .hero--horno .hero__txt { padding: 24px 20px 26px; border-radius: 24px; }
}

@keyframes baja { 50% { transform: translateY(5px); } }

/* ===== Manifiesto ===== */
.manifiesto { background: var(--azul); color: #fff; padding: clamp(110px, 16vw, 200px) 0 clamp(80px, 10vw, 130px); }
.manifiesto__txt { font: 400 clamp(2rem, 5vw, 4.4rem)/1.08 var(--display); text-transform: uppercase; max-width: 22ch; }
.manifiesto__txt .w { opacity: .18; }
.manifiesto__txt .w--clave { color: var(--amarillo); }
.manifiesto__datos { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 30px; }
.manifiesto__datos b { display: block; font: 400 clamp(3rem, 6vw, 5rem)/1 var(--display); color: var(--amarillo); }
.manifiesto__datos span { color: rgba(255, 255, 255, .72); }

/* ===== Marca JPS (pista horizontal) ===== */
.marca { background: var(--papel); overflow: hidden; }
.marca__pin { padding: 110px 0 70px; }
.marca__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.marca__cab .titulo { margin-bottom: 0; }
.marca__sub { color: var(--suave); max-width: 40ch; font-size: 1.05rem; }
.marca__der { display: grid; gap: 18px; justify-items: end; }
.flechas { display: flex; gap: 10px; }
.flecha { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--azul); background: transparent; color: var(--azul); display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, transform .25s var(--sale), opacity .25s; }
.flecha:first-child .ico { transform: rotate(180deg); }
.flecha:hover { background: var(--azul); color: #fff; }
.flecha:active { transform: scale(.92); }
.flecha:disabled { opacity: .3; cursor: default; background: transparent; color: var(--azul); }
.marca__pista {
  --lado: max(20px, calc((100vw - 1240px) / 2));
  display: flex; gap: 24px; padding: 50px var(--lado) 30px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); scrollbar-width: none; cursor: grab;
}
.marca__pista::-webkit-scrollbar { display: none; }
.marca__pista.arrastra { cursor: grabbing; scroll-snap-type: none; }
.marca__pista.arrastra * { pointer-events: none; }
.marca__pista > * { scroll-snap-align: start; }
/* Barra de abajo: se arrastra (o se hace clic) para mover el carrusel */
.marca__barra { position: relative; height: 26px; cursor: pointer; touch-action: none; user-select: none; }
.marca__barra::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; background: var(--linea); }
.marca__barra span {
  position: absolute; top: 50%; left: 0; height: 10px; margin-top: -5px; width: calc(var(--t, .3) * 100%); border-radius: 10px; background: var(--rojo);
  transform: translateX(calc(var(--x, 0) * (100% / var(--t, .3) - 100%))); cursor: grab; transition: height .2s, margin .2s;
}
.marca__barra:hover span, .marca__barra.agarra span { height: 14px; margin-top: -7px; }
.marca__barra.agarra span { cursor: grabbing; }
.marca__ayuda { display: none; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; font-size: .9rem; color: var(--suave); }
.marca__ayuda .ico { width: 18px; height: 18px; animation: empuja 1.4s ease-in-out infinite; }
@keyframes empuja { 50% { transform: translateX(6px); } }
.prod { position: relative; flex: none; width: 320px; height: 470px; display: flex; flex-direction: column; border-radius: var(--radio); background: #fff; overflow: hidden; box-shadow: var(--sombra); }
.prod__foto { flex: 1; min-height: 0; overflow: hidden; }
.prod__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1s var(--sale); }
.prod:hover .prod__foto img { transform: scale(1.2); }
.prod__info { position: relative; padding: 18px 20px 20px; }
.prod__precio { position: absolute; right: 16px; top: -46px; display: grid; place-content: center; width: 92px; height: 92px; border-radius: 50%; background: var(--amarillo); color: var(--tinta); font: 400 1.9rem/1 var(--display); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .4); transform: rotate(-8deg); transition: transform .6s var(--rebote); }
.prod:hover .prod__precio { transform: rotate(6deg) scale(1.06); }
.prod__precio small { display: block; font-size: .5em; text-align: center; }
.prod__nom { font: 400 1.7rem/1 var(--display); text-transform: uppercase; color: var(--azul); padding-right: 90px; }
.prod__det { color: var(--suave); font-size: .92rem; margin-top: 6px; }
.prod__texto { color: var(--suave); margin-top: 10px; max-width: 42ch; }
.agregar { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; margin-top: 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--azul); color: #fff; font-weight: 800; font-size: .92rem; transition: transform .2s var(--sale), background .25s; }
.agregar:hover { background: var(--rojo); }
.agregar:active { transform: scale(.92); }
.agregar.ok { background: var(--verde); }
.agregar .ico { width: 18px; height: 18px; }
.prod--destacado { width: 560px; background: var(--rojo); }
.prod--destacado .prod__nom { color: #fff; font-size: 2.6rem; }
.prod--destacado .prod__det, .prod--destacado .prod__texto { color: rgba(255, 255, 255, .85); }
.prod--destacado .prod__precio { width: 118px; height: 118px; font-size: 2.6rem; top: -60px; }
.prod--destacado .agregar { background: #fff; color: var(--rojo); }
.prod__cinta { position: absolute; top: 18px; left: 18px; z-index: 1; padding: 8px 14px; border-radius: 999px; background: var(--amarillo); color: var(--azul); font: 800 .75rem/1 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; }
.marca__promo { flex: none; width: 380px; height: 470px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 34px; border-radius: var(--radio); background: var(--azul); color: #fff; }
.marca__promo::before { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--amarillo); }
.marca__promo .ico--grande { position: absolute; right: 40px; top: 40px; width: 74px; height: 74px; color: var(--azul); }
.marca__promo h3 { color: #fff; font-size: 2.6rem; position: relative; }
.marca__promo p { color: rgba(255, 255, 255, .8); position: relative; }
.marca__promo .btn { align-self: flex-start; }
.vuela { position: fixed; left: 0; top: 0; z-index: 90; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); pointer-events: none; background: var(--amarillo); }
.vuela img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Cintas cruzadas ===== */
.cintas { position: relative; height: 190px; overflow: hidden; background: var(--papel); }
.cinta { position: absolute; left: -5%; right: -5%; top: 50%; padding: 18px 0; }
.cinta--roja { background: var(--rojo); color: #fff; transform: translateY(-50%) rotate(-4deg); z-index: 1; }
.cinta--amarilla { background: var(--amarillo); color: var(--azul); transform: translateY(-50%) rotate(3deg); }
.cinta__mov { margin-left: -15%; }
.cinta__pista { display: flex; align-items: center; gap: 30px; width: max-content; animation: cinta 34s linear infinite; }
.cinta--amarilla .cinta__pista { animation-direction: reverse; }
.cinta span { font: 400 1.7rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.cinta i { width: 14px; height: 14px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ===== Market (pila de tarjetas) ===== */
.market { padding: 80px 0 90px; background: var(--papel2); }
.market__cab { max-width: 640px; margin-bottom: 34px; }
.market .titulo { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.pila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tarjeta {
  position: relative;
  display: grid; grid-template-rows: 170px auto; border-radius: 22px; overflow: hidden;
  background: var(--fondo); color: var(--color); box-shadow: 0 -10px 40px -24px rgba(0, 0, 0, .35); transform-origin: 50% 0;
}
.tarjeta__foto { position: relative; overflow: hidden; }
.tarjeta__foto img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.tarjeta__num { display: none; }
.tarjeta__txt { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px 20px 22px; }
.tarjeta__num { font: 400 1.2rem/1 var(--display); opacity: .7; }
.tarjeta h3 { color: inherit; font-size: 1.6rem; }
.tarjeta p { font-size: .92rem; line-height: 1.45; opacity: .85; margin-top: 8px; }
.tarjeta .btn { align-self: flex-start; }

/* ===== Cafetería ===== */
.cafe { background: var(--rojo); color: #fff; padding: 130px 0; overflow: hidden; }
.cafe .titulo { color: #fff; }
.cafe .sub { color: rgba(255, 255, 255, .85); }
.cafe .etq { color: var(--amarillo); }
.cafe__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.cafe__vis { position: relative; aspect-ratio: 1; }
.cafe__circulo { position: absolute; inset: 0 8% 8% 0; border-radius: 50%; overflow: hidden; border: 10px solid var(--amarillo); }
.cafe__circulo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.15); }
.cafe__mini { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .5); transform: rotate(6deg); }
.cafe__mini img { width: 100%; height: 100%; object-fit: cover; }
.taza { position: absolute; left: 4%; top: 2%; width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--azul); box-shadow: var(--sombra); }
.taza svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vapor { position: absolute; top: 6px; width: 6px; height: 22px; border-radius: 6px; background: rgba(43, 23, 11, .45); filter: blur(1px); animation: vapor 2.4s ease-in infinite; opacity: 0; }
.v1 { left: 38px; } .v2 { left: 47px; animation-delay: .8s; } .v3 { left: 56px; animation-delay: 1.6s; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(14px) scaleY(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.2) translateX(4px); } }
.cafe__nota { position: absolute; left: 0; bottom: 4%; font: 700 2.4rem/1 var(--mano); color: var(--amarillo); transform: rotate(-8deg); }
.carta { margin-top: 28px; background: #fff; color: var(--tinta); border-radius: var(--radio); padding: 10px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); }
.carta__tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); background: var(--papel2); border-radius: 18px; padding: 5px; }
.carta__tab { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 12px 6px; border-radius: 14px; font-weight: 800; font-size: .95rem; color: var(--suave); display: flex; align-items: center; justify-content: center; gap: 8px; transition: color .3s; }
.carta__tab[aria-selected="true"] { color: var(--azul); }
.carta__tab .ico { width: 18px; height: 18px; }
.carta__ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n, 3)); background: var(--amarillo); border-radius: 14px; transition: transform .5s var(--rebote); }
.carta__lista { list-style: none; margin: 0; padding: 10px 14px 6px; height: 380px; overflow: auto; }
.plato { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--linea); }
.plato:last-child { border-bottom: 0; }
.plato__n { font-weight: 700; }
.plato__d { display: block; font-size: .85rem; color: var(--suave); font-weight: 400; }
.plato__puntos { flex: 1; border-bottom: 2px dotted rgba(43, 23, 11, .2); transform: translateY(4px); min-width: 16px; }
.plato__p { font: 400 1.25rem/1 var(--display); color: var(--rojo); white-space: nowrap; }
.plato .agregar { width: 36px; height: 36px; padding: 0; margin: 0; justify-content: center; flex: none; }
.plato.entra { animation: entra .5s var(--sale) both; }
@keyframes entra { from { opacity: 0; transform: translateX(-14px); } }

/* ===== Servicios (filas) ===== */
.servicios { background: var(--azul); color: #fff; padding: 130px 0; }
.servicios .titulo { color: #fff; }
.servicios .sub { color: rgba(255, 255, 255, .75); }
.filas { list-style: none; padding: 0; margin: 60px 0 0; }
.fila { position: relative; display: grid; grid-template-columns: 70px 72px 1fr 1fr; gap: 24px; align-items: center; padding: 30px 10px; isolation: isolate; }
.fila__linea { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .3); transform-origin: left; }
.fila:last-child::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .22); }
.fila__fondo { position: absolute; inset: 0; z-index: -1; background: var(--amarillo); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--sale); border-radius: 18px; }
.fila:hover .fila__fondo { transform: none; }
.fila:hover { color: var(--azul); }
.fila:hover h3 { color: var(--azul); }
.fila__n { font: 400 1.2rem/1 var(--display); opacity: .55; }
.fila__ico { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--amarillo); color: var(--azul); transition: transform .5s var(--rebote), background .3s, color .3s; }
.fila:hover .fila__ico { transform: rotate(-12deg) scale(1.08); background: var(--azul); color: var(--amarillo); }
.fila__ico .ico { width: 28px; height: 28px; }
.fila h3 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3.2rem); transition: color .3s; }
.fila p { opacity: .82; transition: color .3s; }

/* ===== Cómo pedir ===== */
.pedido { background: var(--amarillo); padding: 130px 0; overflow: hidden; }
.pedido .sub { color: var(--azul); opacity: .8; }
.ruta-pasos { position: relative; margin-top: 70px; }
.ruta-pasos__linea { position: absolute; left: 30px; right: 30px; top: 30px; height: 6px; border-radius: 6px; background: rgba(43, 23, 11, .15); }
.ruta-pasos__lleno { position: absolute; inset: 0; border-radius: inherit; background: var(--rojo); transform: scaleX(var(--p, 0)); transform-origin: left; }
.ruta-pasos__moto { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 64px; height: 64px; margin: -58px 0 0 -32px; color: var(--azul); }
.ruta-pasos__moto svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: moto .5s ease-in-out infinite alternate; }
@keyframes moto { to { transform: translateY(-2px) rotate(-2deg); } }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.paso { position: relative; padding-top: 0; }
.paso__n { position: relative; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #fff; color: var(--azul); font: 400 1.8rem/1 var(--display); border: 4px solid var(--amarillo); transition: background .4s, color .4s, transform .5s var(--rebote); }
.paso.hecho .paso__n { background: var(--rojo); color: #fff; transform: scale(1.1); }
.paso b { display: block; margin-top: 22px; font: 400 2rem/1 var(--display); text-transform: uppercase; color: var(--azul); }
.paso p { margin-top: 8px; color: var(--azul); opacity: .8; max-width: 30ch; }
.pedido__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; }

/* ===== Galería (filas en movimiento) ===== */
.galeria { padding: 130px 0; overflow: hidden; background: var(--papel); }
.galeria__filas { margin-top: 50px; display: grid; gap: 18px; }
.gfila { display: flex; gap: 18px; width: max-content; }
.gfila--b { margin-left: -30vw; }
.gal__item { flex: none; width: clamp(240px, 26vw, 380px); height: clamp(200px, 22vw, 300px); border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--papel2); }
.gal__item--ancho { width: clamp(340px, 38vw, 560px); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sale); }
.gal__item:hover img { transform: scale(1.07); }
.visor { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(15, 17, 50, .92); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.visor.abierto { opacity: 1; visibility: visible; }
.visor img { max-height: 88vh; width: auto; border-radius: 16px; transform: scale(.92); transition: transform .4s var(--sale); }
.visor.abierto img { transform: none; }
.visor__x { position: absolute; top: 18px; right: 18px; }

/* ===== Ubicación ===== */
.ubica { padding: 40px 0 140px; background: var(--papel); }
.ubica__in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ubica__datos { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.ubica__datos li { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px -16px rgba(43, 23, 11, .6); }
.ubica__datos .ico { width: 24px; height: 24px; color: var(--rojo); }
.ubica__datos b { display: block; font: 800 .74rem/1 var(--cuerpo); letter-spacing: .18em; text-transform: uppercase; color: var(--suave); margin-bottom: 5px; }
.ubica__datos span span { font-weight: 800; font-size: 1.1rem; color: var(--azul); }
.ubica__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ubica__mapa { position: relative; }
.mapita { width: 100%; filter: drop-shadow(0 24px 34px rgba(43, 23, 11, .22)); }
.calle { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; }
.calle__nom { font: 400 15px var(--display); fill: var(--azul); letter-spacing: .06em; text-transform: uppercase; }
.ruta { fill: none; stroke: var(--rojo); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--r, 0); }
.ubica__pin { position: absolute; left: 71%; top: 40%; display: grid; justify-items: center; transform: translate(-50%, -100%); }
.ubica__pin .ico { width: 58px; height: 58px; fill: var(--rojo); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.ubica__pin span { margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--azul); color: #fff; font: 400 1rem/1.2 var(--display); }

/* ===== Pie ===== */
/* ===== Final: llamado "¿Se te antojó?" ===== */
.antojo { position: relative; overflow: hidden; padding: 170px 0 150px; color: #fff; text-align: center; background: #2b170b; isolation: isolate; }
.antojo__onda { position: absolute; top: -1px; left: 0; width: 100%; height: 80px; z-index: 2; fill: var(--papel); }
.antojo__foto { position: absolute; inset: -10% 0; z-index: -2; width: 100%; height: 120%; object-fit: cover; object-position: 50% 70%; }
.antojo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 55%, rgba(43, 23, 11, .55), rgba(30, 14, 5, .88)); }
.antojo__in { position: relative; z-index: 2; display: grid; justify-items: center; }
.antojo__etq { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--guion); color: var(--amarillo); }
.antojo__titulo { margin: 12px 0 0; max-width: 12ch; font-size: clamp(3.2rem, 8.5vw, 7.6rem); line-height: .92; color: #fff; text-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.antojo__sub { max-width: 34em; margin: 22px 0 32px; font-size: 1.12rem; color: rgba(255, 244, 228, .88); }
.antojo__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.antojo__btns .btn--amarillo { color: var(--tinta); }
.antojo__flota { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.af { position: absolute; overflow: visible; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); }
.af--c1 { left: 5%; top: 22%; width: clamp(110px, 15vw, 230px); rotate: -18deg; }
.af--c2 { right: 4%; bottom: 14%; width: clamp(100px, 13vw, 200px); rotate: 14deg; }
.af--g1 { left: 18%; bottom: 16%; width: 30px; rotate: 30deg; }
.af--g2 { right: 20%; top: 20%; width: 26px; rotate: -50deg; }
.af--g3 { left: 30%; top: 14%; width: 20px; rotate: 80deg; }
.af--h1 { right: 12%; top: 34%; width: clamp(60px, 7vw, 100px); rotate: 150deg; }

/* ===== Pie de página ===== */
.pie { position: relative; overflow: hidden; background: #1e0f06; color: rgba(255, 240, 220, .72); padding: 0; }
.pie::before { content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffc62b' stroke-width='2'%3E%3Cpath d='M30 100 60 40M60 40c-6 4-8 10-6 16 6-2 9-8 6-16Zm-5 10c-7 2-10 8-9 14 7 0 10-6 9-14Zm-5 10c-7 2-10 8-9 14 7 0 10-6 9-14Zm14-12c6 0 11 5 12 11-7 1-11-4-12-11Zm-5 10c6 0 11 5 12 11-7 1-11-4-12-11Z'/%3E%3C/g%3E%3C/svg%3E"); }
.pie__cinta { overflow: hidden; background: var(--amarillo); color: var(--tinta); border-block: 3px solid #1e0f06; }
.pie__cinta-pista { display: flex; align-items: center; gap: 26px; width: max-content; padding: 14px 0; animation: cinta 26s linear infinite; }
.pie__cinta span { font: 400 clamp(1.4rem, 2.4vw, 2rem)/1 var(--guion); white-space: nowrap; }
.pie__cinta i { font-style: normal; color: var(--rojo); font-size: 1.1rem; }
@keyframes cinta { to { transform: translateX(-50%); } }
.pie__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr; gap: 40px; padding: 80px 0 30px; }
.pie__logo { width: 170px; height: auto; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255, 255, 255, .8)); }
.pie__lema { margin: 18px 0 8px; font: 400 1.5rem/1.2 var(--guion); color: var(--amarillo); }
.pie__texto { margin: 0; font-size: .95rem; line-height: 1.6; max-width: 30ch; }
.pie__tit { margin: 0 0 16px; font: 800 .78rem/1 var(--cuerpo); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.pie__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pie__col a { position: relative; color: inherit; text-decoration: none; font-weight: 600; transition: color .25s, translate .3s var(--sale); }
.pie__col nav a, .pie__col > a:not(.pie__mapa) { padding-left: 0; }
.pie__col > a:not(.pie__mapa)::before { content: ''; position: absolute; left: -16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--amarillo); scale: 0; transition: scale .3s var(--rebote); }
.pie__col > a:not(.pie__mapa):hover { color: var(--amarillo); translate: 16px 0; }
.pie__col > a:not(.pie__mapa):hover::before { scale: 1; }
.pie__dato { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 600; }
.pie__dato .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--amarillo); }
.pie__mapa { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--amarillo) !important; font-weight: 800 !important; }
.pie__mapa .ico { width: 18px; height: 18px; transition: translate .3s var(--sale); }
.pie__mapa:hover .ico { translate: 5px 0; }
.pie__tarjeta { position: relative; align-self: start; padding: 26px 24px 24px; border-radius: 24px; background: linear-gradient(150deg, #3a200f, #2a160a); box-shadow: inset 0 0 0 1px rgba(255, 198, 43, .25), 0 24px 40px -24px rgba(0, 0, 0, .8); }
.pie__tarjeta p { margin: 0 0 18px; font-size: .95rem; }
.pie__tarjeta .pie__tit { margin-bottom: 8px; font: 400 1.6rem/1.1 var(--guion); letter-spacing: 0; text-transform: none; color: var(--amarillo); }
.pie__tarjeta-ico { position: absolute; right: 18px; top: -22px; width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--rojo); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 10px 20px -8px rgba(239, 58, 29, .8); animation: late 2.4s ease-in-out infinite; }
.pie__tarjeta .btn { color: var(--tinta); }
.pie__gigante { position: relative; display: flex; justify-content: center; margin: 10px 0 -2px; padding-top: .06em; overflow: hidden; font: 400 clamp(9rem, 36vw, 32rem)/.8 var(--display); font-style: italic; user-select: none; }
.pie__gigante span { display: inline-block; padding: 0 .14em; margin: 0 -.12em; color: transparent; -webkit-text-stroke: 2px rgba(255, 198, 43, .55);
  background: linear-gradient(0deg, var(--rojo) 0 var(--relleno, 0%), transparent var(--relleno, 0%)); -webkit-background-clip: text; background-clip: text; transition: -webkit-text-stroke-color .3s; }
.pie__gigante span:hover { -webkit-text-stroke-color: var(--amarillo); }
.pie__base { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 0 96px; border-top: 1px solid rgba(255, 240, 220, .12); font-size: .85rem; }
.pie__base p { margin: 0; opacity: .7; }
.pie__subir { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 240, 220, .08); color: #fff; font: 700 .9rem/1 var(--cuerpo); cursor: pointer; transition: background .3s; }
.pie__subir:hover { background: var(--amarillo); color: var(--tinta); }
.pie__subir .ico { width: 16px; height: 16px; rotate: 180deg; transition: translate .3s var(--sale); }
.pie__subir:hover .ico { translate: 0 -3px; }
@media (max-width: 980px) {
  .pie__grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; padding-top: 64px; }
  .pie__marca, .pie__tarjeta { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .antojo { padding: 120px 0 110px; }
  .antojo__btns .btn { flex: 1 1 100%; }
  .af--c1 { left: -8%; top: 8%; }
  .af--c2 { right: -6%; bottom: 4%; }
  .af--h1, .af--g3 { display: none; }
  .pie__grid { gap: 32px 18px; }
  .pie__base { flex-direction: column; align-items: flex-start; }
}

/* ===== Bolsa ===== */
.bolsa { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.bolsa.abierta { visibility: visible; }
.bolsa__velo { position: absolute; inset: 0; background: rgba(15, 17, 50, .5); opacity: 0; transition: opacity .35s; }
.bolsa.abierta .bolsa__velo { opacity: 1; }
.bolsa__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--papel); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .55s var(--sale); box-shadow: -20px 0 50px rgba(0, 0, 0, .2); }
.bolsa.abierta .bolsa__panel { transform: none; }
.bolsa__cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--linea); }
.bolsa__cab h2 { font-size: 2.2rem; }
.bolsa__cuerpo { flex: 1; overflow: auto; padding: 16px 22px; overscroll-behavior: contain; }
.bolsa__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linea-b { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, .3); animation: entra .4s var(--sale); }
.linea-b__n { font-weight: 700; line-height: 1.25; }
.linea-b__p { font: 400 1.2rem/1 var(--display); color: var(--rojo); }
.cant { display: inline-flex; align-items: center; gap: 4px; background: var(--papel2); border-radius: 999px; padding: 3px; }
.cant button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; }
.cant button .ico { width: 16px; height: 16px; }
.cant b { min-width: 22px; text-align: center; }
.bolsa__vacia { display: grid; justify-items: center; gap: 10px; padding: 30px 10px; text-align: center; color: var(--suave); }
.bolsa__vacia .ico { width: 54px; height: 54px; color: var(--amarillo2); }
.bolsa__vacia[hidden] { display: none; }
.bolsa__form { display: grid; gap: 14px; margin-top: 20px; }
.campo { display: grid; gap: 6px; }
.campo > span { font-weight: 800; font-size: .9rem; color: var(--azul); }
.campo input, .campo textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--linea); background: #fff; resize: vertical; transition: border-color .2s; }
.campo input:focus, .campo textarea:focus { outline: 0; border-color: var(--celeste); }
.campo.error input { border-color: var(--rojo); }
.campo[hidden] { display: none; }
.modo { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modo legend { font-weight: 800; font-size: .9rem; color: var(--azul); margin-bottom: 6px; }
.modo label { position: relative; cursor: pointer; }
.modo input { position: absolute; opacity: 0; }
.modo span { display: block; text-align: center; padding: 12px; border-radius: 12px; border: 2px solid var(--linea); background: #fff; font-weight: 800; transition: .2s; }
.modo input:checked + span { border-color: var(--azul); background: var(--azul); color: #fff; }
.modo input:focus-visible + span { outline: 3px solid var(--celeste); outline-offset: 2px; }
.recojo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--amarillo); color: var(--azul); font-size: .92rem; line-height: 1.4; }
.recojo b { display: block; font-size: 1rem; }
.recojo .ico { width: 22px; height: 22px; margin-top: 2px; }
.bolsa__error { color: var(--rojo2); font-weight: 700; font-size: .9rem; min-height: 1em; }
.bolsa__pie { padding: 16px 22px 22px; border-top: 1px solid var(--linea); background: #fff; }
.bolsa__total { display: flex; justify-content: space-between; align-items: baseline; }
.bolsa__total b { font: 400 2rem/1 var(--display); color: var(--azul); }
.bolsa__aviso { font-size: .82rem; color: var(--suave); margin: 4px 0 12px; }

/* ===== Panchito ===== */
/* Panchito vive al lado del botón de WhatsApp y solo habla si lo tocas */
.panchito { position: fixed; right: 86px; bottom: 10px; z-index: 34; width: 58px; opacity: 0; transform: translateY(30px); transition: transform .6s var(--rebote), opacity .4s; cursor: pointer; border: 0; padding: 0; background: none; }
.panchito.ve { opacity: 1; transform: none; }
body.en-hero .panchito { opacity: 0; transform: translateY(30px); pointer-events: none; }
.panchito.brinca .pc__masa { animation: rebota .22s ease-in-out 4 alternate; }
.panchito svg { width: 58px; overflow: visible; }
.panchito.camina .pc__masa { animation: rebota .36s ease-in-out infinite alternate; }
.panchito.camina .pc__pie--i { animation: pie .36s ease-in-out infinite alternate; }
.panchito.camina .pc__pie--d { animation: pie .36s ease-in-out infinite alternate-reverse; }
.pc__corteza { fill: #d9902f; }
.pc__miga { fill: #ffe7b0; }
.pc__ojos ellipse { fill: var(--tinta); }
.pc__ojos { transform-box: fill-box; transform-origin: center; animation: parpadeo 4s infinite; }
.pc__brillo { fill: #fff; }
.pc__chapa { fill: #ff9fae; opacity: .8; }
.pc__boca, .pc__brazo { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; }
.pc__brazo { stroke: #b8741f; stroke-width: 5; }
.pc__pie { fill: #b8741f; }
.pc__brazo--d { transform-origin: 84px 74px; }
.panchito.saluda .pc__brazo--d { animation: saluda .5s ease-in-out 3 alternate; }
@keyframes rebota { to { transform: translateY(-4px); } }
@keyframes pie { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes saluda { to { transform: rotate(-60deg); } }
.panchito__globo {
  position: absolute; bottom: calc(100% + 8px); right: -64px; width: max-content; max-width: 250px; text-align: left;
  padding: 12px 16px 12px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--azul); font-weight: 600; font-size: .9rem; line-height: 1.4;
  box-shadow: 0 14px 30px -12px rgba(43, 23, 11, .5), inset 0 0 0 2px var(--amarillo); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 80% 100%;
  transition: opacity .3s, transform .4s var(--rebote); pointer-events: none;
}
.panchito__globo.ve { opacity: 1; transform: none; pointer-events: auto; }
.guia__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; font: 800 .68rem/1 var(--cuerpo); letter-spacing: .18em; text-transform: uppercase; color: var(--rojo); }
.guia__titulo { display: block; font: 400 1.25rem/1.05 var(--display); text-transform: uppercase; color: var(--azul); margin-bottom: 4px; }
.guia__puntos { display: flex; gap: 4px; margin-top: 10px; }
.guia__puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(43, 23, 11, .15); transition: background .3s, width .3s; }
.guia__puntos i.si { background: var(--amarillo); }
.guia__puntos i.aqui { width: 18px; border-radius: 4px; background: var(--rojo); }
.guia__cerrar { border: 0; background: none; padding: 2px 0; cursor: pointer; font: 700 .68rem/1 var(--cuerpo); letter-spacing: .08em; color: rgba(43, 23, 11, .55); text-transform: none; }
.guia__cerrar:hover { color: var(--azul); }
.panchito.salta-entra { animation: entraGuia .7s var(--rebote); }
@keyframes entraGuia { 0% { transform: translateX(60px) rotate(8deg); } 60% { transform: translateX(-6px) rotate(-4deg); } 100% { transform: none; } }

/* WhatsApp flotante */
.wa-flota { position: fixed; right: 18px; bottom: 18px; z-index: 35; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 12px 26px -8px rgba(37, 211, 102, .9); transition: transform .4s var(--rebote), opacity .3s; }
/* en el inicio ya están los botones de WhatsApp */
body.en-hero .wa-flota { opacity: 0; transform: scale(.4); pointer-events: none; }
.wa-flota .ico { width: 32px; height: 32px; }
.wa-flota:hover { transform: scale(1.1) rotate(-6deg); }
.wa-flota::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ===== Responsive ===== */
@media (max-width: 1020px) {
  .cafe__in { grid-template-columns: 1fr; }
  .cafe__vis { max-width: 520px; width: 100%; margin-inline: auto; }
  .fila { grid-template-columns: 50px 62px 1fr; }
  .fila p { grid-column: 3; }
  .pila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .flechas { display: none; }
  .marca__der { justify-items: start; }
  .marca__ayuda { display: flex; }
  .marca__pista { gap: 14px; padding-top: 36px; }
  .prod { width: 74vw; max-width: 320px; height: 430px; }
  .prod--destacado { width: 86vw; max-width: 440px; }
  .marca__promo { width: 80vw; max-width: 360px; height: 430px; }
}
@media (max-width: 880px) {
  .cab__nav {
    position: fixed; top: 82px; left: 12px; right: 12px; flex-direction: column; padding: 12px; border-radius: 22px; background: #fff; box-shadow: var(--sombra);
    opacity: 0; transform: translateY(-10px); pointer-events: none; transition: .3s var(--sale);
  }
  .cab__nav.abierto { opacity: 1; transform: none; pointer-events: auto; }
  .cab__nav a { padding: 14px 16px; }
  .cab__menu { display: grid; }
  .manifiesto__datos { grid-template-columns: 1fr; }
  .tarjeta { grid-template-rows: 130px auto; }
  .tarjeta__txt { padding: 14px 14px 16px; }
  .tarjeta h3 { font-size: 1.25rem; }
  .tarjeta p { font-size: .82rem; }
  .tarjeta .btn { min-height: 40px; padding: 0 14px; font-size: .82rem; }
  .pasos { grid-template-columns: 1fr; gap: 34px; }
  .ruta-pasos__linea { left: 30px; right: auto; top: 30px; bottom: 30px; width: 6px; height: auto; }
  .ruta-pasos__lleno { transform: scaleY(var(--p, 0)); transform-origin: top; }
  .ruta-pasos__moto { display: none; }
  .paso { display: grid; grid-template-columns: 66px 1fr; column-gap: 20px; }
  .paso b { margin-top: 6px; }
  .paso p { grid-column: 2; }
  .ubica__in { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  .cab__logo img { height: 38px; }
  .bolsa-btn__txt { display: none; }
  .bolsa-btn { padding: 0 6px 0 12px; }
  .marca__pista { --lado: 16px; gap: 12px; }
  .prod__nom { font-size: 1.5rem; }
  .prod--destacado .prod__nom { font-size: 2rem; }
  .prod--destacado .prod__texto { font-size: .92rem; }
  .prod--destacado .prod__precio { width: 96px; height: 96px; font-size: 2rem; top: -50px; }
  .marca__promo h3 { font-size: 2.1rem; }
  .cintas { height: 140px; }
  .cinta span { font-size: 1.3rem; }
  .fila { grid-template-columns: 54px 1fr; gap: 6px 16px; padding: 24px 6px; }
  .fila__n { display: none; }
  .fila__ico { width: 54px; height: 54px; grid-row: span 2; align-self: start; }
  .fila p { grid-column: 2; }
  .carta__tab { font-size: .85rem; gap: 6px; }
  .taza { width: 76px; height: 76px; }
  .panchito, .panchito svg { width: 52px; }
  .panchito { right: 82px; }
}

@media (max-width: 600px) {
  .carga__dice { left: auto; right: 0; translate: 0 0; border-radius: 14px 14px 4px 14px; }
}

/* ===== Aviso del evento en el inicio ===== */
.hero__evento { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #14306b; color: #fff; text-decoration: none; font-weight: 700; font-size: .86rem; line-height: 1.2; box-shadow: 0 10px 22px -10px rgba(20, 48, 107, .7); transition: translate .3s var(--sale), background .3s; }
.hero__evento:hover { translate: 0 -2px; background: #1d4290; }
.hero__evento .ico { width: 16px; height: 16px; }
.hero__evento b { color: #ffd34d; }
.papa__punto, .hero__evento-punto { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ffd34d; }
.papa__punto::after, .hero__evento-punto::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #ffd34d; animation: onda 1.8s ease-out infinite; }

/* ===== Evento: Papa León XIV ===== */
.papa { position: relative; overflow: hidden; padding: 110px 0 120px; color: #14306b; isolation: isolate;
  background: linear-gradient(180deg, #8fd0f5 0%, #c9e9fb 45%, #fff8e6 100%); }
.papa__cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.papa__rayos { position: absolute; left: 50%; top: -30%; width: 1600px; height: 1600px; margin-left: -800px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .28) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%); animation: gira-lento 60s linear infinite; }
@keyframes gira-lento { to { rotate: 360deg; } }
.papa__nube { position: absolute; width: 240px; height: 70px; border-radius: 70px; background: #fff; opacity: .75; filter: blur(2px); animation: nube 40s linear infinite; }
.papa__nube::before, .papa__nube::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.papa__nube::before { width: 110px; height: 110px; left: 30px; top: -50px; }
.papa__nube::after { width: 80px; height: 80px; left: 120px; top: -34px; }
.papa__nube--1 { top: 12%; left: -10%; }
.papa__nube--2 { top: 58%; left: 40%; scale: .7; animation-duration: 55s; animation-delay: -20s; }
.papa__nube--3 { top: 30%; left: 70%; scale: .9; animation-duration: 48s; animation-delay: -35s; }
@keyframes nube { from { translate: -30vw 0; } to { translate: 110vw 0; } }
.paloma { position: absolute; width: 64px; fill: #fff; filter: drop-shadow(0 6px 8px rgba(20, 48, 107, .25)); animation: vuela 14s linear infinite; }
.paloma--1 { top: 14%; }
.paloma--2 { top: 26%; width: 44px; animation-duration: 18s; animation-delay: -6s; }
.paloma--3 { top: 8%; width: 36px; animation-duration: 22s; animation-delay: -13s; }
@keyframes vuela { 0% { left: -8%; translate: 0 0; } 25% { translate: 0 -20px; } 50% { translate: 0 6px; } 75% { translate: 0 -14px; } 100% { left: 108%; translate: 0 0; } }
.papa__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.papa__afiche { position: relative; padding: 0; border: 8px solid #fff; border-radius: 28px; overflow: hidden; cursor: zoom-in; background: #fff;
  box-shadow: 0 0 0 3px #e9b41a, 0 40px 70px -30px rgba(20, 48, 107, .65); rotate: -2.5deg; transition: rotate .5s var(--sale), scale .5s var(--sale); }
.papa__afiche:hover { rotate: 0deg; scale: 1.02; }
.papa__afiche img { width: 100%; height: auto; }
.papa__lupa { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(20, 48, 107, .9); color: #fff; font-weight: 700; font-size: .85rem; }
.papa__lupa .ico { width: 16px; height: 16px; }
.papa__chip { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 8px 16px 8px 14px; border-radius: 999px; background: #14306b; color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.papa__mano { margin: 0; font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--guion); color: #1d4290; }
.papa__titulo { margin: 4px 0 2px; font: 900 clamp(3rem, 6.4vw, 6rem)/.95 var(--redonda); text-transform: none; letter-spacing: -.02em; color: #14306b; text-shadow: 0 4px 0 #e9b41a; }
.papa__ciudad { margin: 0; font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--guion); color: #1d4290; }
.papa__ciudad::first-letter { text-transform: lowercase; }
.papa__sub { margin: 20px 0 18px; max-width: 34em; font-size: 1.05rem; color: #28407a; }
.papa__tortas { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.papa__tortas li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -12px rgba(20, 48, 107, .6), inset 0 0 0 1.5px #bfe3f8; font-weight: 700; font-size: .9rem; }
.papa__tortas li::before { content: '✝'; color: #e9b41a; font-size: 1rem; }
.papa__cuenta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.papa__cuenta-tit { margin: 0 6px 0 0; font: 400 1.6rem/1 var(--guion); color: #c8260d; }
.papa__num { display: grid; justify-items: center; min-width: 74px; padding: 10px 8px 8px; border-radius: 16px; background: #14306b; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.papa__num b { font: 400 2.2rem/1 var(--display); font-variant-numeric: tabular-nums; color: #ffd34d; }
.papa__num span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.papa__cuenta.hoy .papa__num { display: none; }
.papa__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--papa { --bg: #14306b; --hover: #c8260d; color: #fff; box-shadow: 0 16px 30px -14px rgba(20, 48, 107, .8); }
.btn--borde-azul { --bg: transparent; --hover: rgba(20, 48, 107, .1); color: #14306b; box-shadow: inset 0 0 0 2px #14306b; }

/* ===== Promociones ===== */
.promos { padding: 110px 0 90px; background: var(--papel); overflow: hidden; }
.promos__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 40px; }
.promos__cab .sub { max-width: 30ch; margin: 0 0 20px; }
.promos__pista { --lado: max(20px, calc((100vw - 1240px) / 2)); display: flex; gap: 22px; padding: 30px var(--lado) 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); scrollbar-width: thin; scrollbar-color: var(--amarillo) transparent; }
.promos__pista::-webkit-scrollbar { height: 6px; }
.promos__pista::-webkit-scrollbar-thumb { background: var(--amarillo); border-radius: 6px; }
.promo { flex: none; width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: 0 20px 40px -26px rgba(43, 23, 11, .55); overflow: hidden; transition: translate .4s var(--sale), box-shadow .4s; }
.promo:hover { translate: 0 -8px; box-shadow: 0 30px 50px -26px rgba(43, 23, 11, .6); }
.promo--ancho { width: 480px; }
.promo__foto { position: relative; display: block; padding: 0; border: 0; background: #f2e4cc; cursor: zoom-in; aspect-ratio: 3 / 4; overflow: hidden; }
.promo--ancho .promo__foto { aspect-ratio: 3 / 2; }
.promo__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--sale); }
.promo:hover .promo__foto img { scale: 1.05; }
.promo__info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 18px; }
.promo__info h3 { font: 700 .98rem/1.25 var(--cuerpo); text-transform: none; color: var(--tinta); }
.promo__precio { display: block; margin-top: 4px; font: 400 1.5rem/1 var(--display); color: var(--rojo); }
.promo__precio small { font: 700 .7rem/1 var(--cuerpo); color: var(--suave); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.promo__pedir { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wa); color: #fff; transition: scale .3s var(--rebote); }
.promo__pedir:hover { scale: 1.12; }
.promo__pedir .ico { width: 24px; height: 24px; }

/* ===== Emprendedores ===== */
.mayor { position: relative; overflow: hidden; padding: 120px 0; background: radial-gradient(80% 90% at 85% 50%, #4a2812, #2b170b 60%); color: #fff; }
.mayor__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: center; }
.mayor .titulo { color: #fff; }
.mayor .sub { color: rgba(255, 240, 220, .8); }
.mayor__lista { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; }
.mayor__lista li { display: flex; gap: 14px; align-items: center; color: rgba(255, 240, 220, .85); }
.mayor__lista b { color: #fff; }
.mayor__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 198, 43, .14); color: var(--amarillo); font: 800 .95rem/1 var(--cuerpo); box-shadow: inset 0 0 0 1.5px rgba(255, 198, 43, .4); }
.mayor__precios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.mayor__precios div { padding: 14px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); text-align: center; }
.mayor__precios b { display: block; font: 400 1.7rem/1 var(--display); color: var(--amarillo); }
.mayor__precios span { display: block; margin-top: 6px; font-size: .78rem; font-weight: 600; opacity: .8; }
.mayor .btn--amarillo { color: var(--tinta); }
.mayor__foto { position: relative; padding: 0; border: 0; border-radius: 26px; overflow: visible; background: none; cursor: zoom-in; rotate: 2deg; transition: rotate .5s var(--sale); }
.mayor__foto:hover { rotate: 0deg; }
.mayor__foto img { width: 100%; height: auto; border-radius: 26px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.mayor__sello { position: absolute; left: -54px; top: -68px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--rojo); color: #fff; text-align: center; font: 400 1.1rem/1.05 var(--guion); rotate: -12deg; box-shadow: 0 14px 26px -10px rgba(239, 58, 29, .8); animation: late 2.6s ease-in-out infinite; }
.mayor__sello b { font: 400 1.25rem/1 var(--guion); color: var(--amarillo); }

/* ===== Tortas (dentro de Pastelería) ===== */
.tortas { margin-top: 80px; }
.tortas__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 30px; margin-bottom: 26px; }
.tortas__cab h3 { font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; }
.tortas__cab p { margin: 0; max-width: 34ch; color: rgba(255, 255, 255, .7); }
.tortas__grid { columns: 4 220px; column-gap: 16px; }
.torta { display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #3a200f; cursor: zoom-in; break-inside: avoid; position: relative; }
.torta img { width: 100%; height: auto; transition: scale .6s var(--sale), filter .4s; }
.torta:hover img { scale: 1.06; filter: saturate(1.15); }
.torta::after { content: '+'; position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--amarillo); color: var(--tinta); font: 800 1.4rem/1 var(--cuerpo); scale: 0; transition: scale .3s var(--rebote); }
.torta:hover::after { scale: 1; }
.tortas__btn { margin-top: 18px; text-align: center; }
.tortas__btn .btn { color: var(--tinta); }

/* ===== Videos ===== */
.videos { padding: 120px 0 100px; background: linear-gradient(180deg, #2b170b, #1e0f06); color: #fff; overflow: hidden; }
.videos .titulo { color: #fff; }
.videos .sub { color: rgba(255, 240, 220, .75); }
.videos__pista { --lado: max(20px, calc((100vw - 1240px) / 2)); display: flex; gap: 20px; padding: 36px var(--lado) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); scrollbar-width: none; }
.videos__pista::-webkit-scrollbar { display: none; }
.video { position: relative; flex: none; width: 240px; scroll-snap-align: start; border-radius: 30px; padding: 8px; background: #0e0703; box-shadow: 0 0 0 2px rgba(255, 198, 43, .25), 0 30px 50px -24px rgba(0, 0, 0, .9); transition: translate .4s var(--sale); }
.video:nth-child(even) { translate: 0 30px; }
.video:hover { translate: 0 -6px; }
.video:nth-child(even):hover { translate: 0 24px; }
.video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 23px; background: #000; }
.video__tit { position: absolute; left: 20px; right: 64px; bottom: 22px; margin: 0; font: 700 .92rem/1.2 var(--cuerpo); text-shadow: 0 2px 10px rgba(0, 0, 0, .9); pointer-events: none; }
.video__btn { position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, scale .3s var(--rebote); }
.video__btn:hover { background: var(--rojo); scale: 1.08; }
.video__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video__sonido { right: 18px; bottom: 16px; width: 40px; height: 40px; }
.video__play { left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 198, 43, .9); color: var(--tinta); opacity: 0; pointer-events: none; }
.video__play svg { fill: currentColor; stroke: none; width: 26px; height: 26px; margin-left: 4px; }
.video.pausado .video__play { opacity: 1; pointer-events: auto; }
.video .ico-on { display: none; }
.video.con-sonido .ico-on { display: block; }
.video.con-sonido .ico-off { display: none; }

@media (max-width: 980px) {
  .papa__in, .mayor__in { grid-template-columns: 1fr; gap: 40px; }
  .papa__afiche { max-width: 520px; width: 100%; margin-inline: auto; }
  .mayor__foto { order: -1; }
}
@media (max-width: 600px) {
  .papa { padding: 80px 0 90px; }
  .papa__num { min-width: 0; flex: 1; }
  .papa__num b { font-size: 1.8rem; }
  .papa__cuenta-tit { width: 100%; }
  .papa__btns .btn { flex: 1 1 100%; }
  .promo { width: 76vw; max-width: 300px; }
  .promo--ancho { width: 88vw; max-width: 420px; }
  .mayor { padding: 90px 0; }
  .mayor__precios b { font-size: 1.35rem; }
  .mayor__sello { width: 84px; height: 84px; left: -4px; top: -70px; font-size: .95rem; }
  .tortas__grid { columns: 2; column-gap: 10px; }
  .torta { margin-bottom: 10px; border-radius: 14px; }
  .video { width: 64vw; max-width: 260px; }
}

.cab__nav a.cab__evento { color: #14306b; box-shadow: inset 0 0 0 1.5px rgba(20, 48, 107, .35); }
.cab__nav a.cab__evento.activo { background: #14306b; color: #fff; }


/* ===== Portada 5: foto del local + bodegón (2026-11-06) ===== */
.portada { --mesa: clamp(54px, 9vh, 92px); align-items: stretch; background: radial-gradient(60% 50% at 30% 30%, #fff6ea, transparent 70%), linear-gradient(180deg, #f8ead6 0%, #f0dbbd 100%); color: var(--tinta); }
.portada__fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.portada__ola { position: absolute; inset: 0; width: 100%; height: 100%; }
.portada__ola-a { fill: #e6c9a4; }
.portada__ola-b { fill: #8d5734; }
.portada__ola-c { fill: #8d5734; }
.portada__luz { position: absolute; width: 520px; height: 520px; left: 60%; top: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 150, .35), transparent 65%); translate: -50% -50%; }
.portada__mesa { position: absolute; left: 0; right: 0; bottom: 0; height: var(--mesa); background:
  repeating-linear-gradient(178deg, rgba(60, 25, 5, .0) 0 9px, rgba(60, 25, 5, .14) 9px 11px),
  linear-gradient(180deg, #c07a43 0%, #9a5a2c 30%, #7a421d 100%); box-shadow: 0 -6px 0 #d89a5e inset, 0 -14px 30px rgba(80, 40, 10, .25); }
.portada__hoja { left: -1.5%; top: 2%; width: clamp(60px, 8vw, 120px); z-index: 2; }
.portada__hoja--2 { left: 2.5%; top: 17%; width: clamp(36px, 4.2vw, 64px); }

.portada__in { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start;
  min-height: 100svh; padding: clamp(100px, 15vh, 140px) 0 calc(var(--mesa) + 26px); }
.portada__txt { position: relative; padding-top: clamp(4px, 2vh, 28px); }
.portada__titulo { margin: 0; text-transform: none; line-height: 1; }
.portada__antes { display: flex; align-items: flex-end; gap: .18em; white-space: nowrap; font: 400 clamp(2.3rem, 4vw, 3.7rem)/1.05 var(--guion); color: #2b170b; transform-origin: 0 100%; }
.portada__gorro { width: 1.45em; height: auto; flex: none; overflow: visible; margin-bottom: .32em; }
.gorro__linea { fill: none; stroke: #2b170b; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.gorro__rayo { fill: none; stroke: #f0891c; stroke-width: 5; stroke-linecap: round; }
.portada .portada__pan { display: flex; margin-top: .06em; font: 900 clamp(3.2rem, 6.2vw, 5.4rem)/.95 var(--redonda); letter-spacing: -.02em; text-transform: uppercase;
  color: #ffb71e; text-shadow: 0 .045em 0 #c66d12, 0 .14em .22em rgba(120, 60, 10, .28); }
.portada .portada__pan .l:hover { color: #ffd04d; }
.portada__sub { max-width: 30ch; margin: clamp(14px, 2.6vh, 26px) 0 0 .2em; font: 500 clamp(1.15rem, 1.75vw, 1.6rem)/1.35 var(--texto); color: #3a2414; }
.portada__sub .hero__corazon { width: 1.15em; height: 1.15em; margin-left: .2em; }
.portada .hero__trazo { margin: clamp(8px, 1.6vh, 16px) 0 clamp(14px, 2.6vh, 26px) .2em; width: min(360px, 80%); }
.portada__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-left: clamp(0px, 4vw, 70px); }
.portada__acciones .btn { box-shadow: 0 16px 30px -14px rgba(196, 110, 18, .8); }

.portada__foto { position: relative; margin: 0; align-self: center; z-index: 3; }
.portada__marco { display: block; width: 100%; padding: clamp(6px, .8vw, 11px); border: 0; border-radius: clamp(22px, 2.6vw, 38px); background: #fffaf2; cursor: zoom-in;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 34px 60px -26px rgba(80, 38, 10, .6), 0 8px 18px -10px rgba(80, 38, 10, .35); transition: translate .5s var(--sale), box-shadow .5s; }
.portada__marco:hover { translate: 0 -6px; box-shadow: 0 2px 0 rgba(255, 255, 255, .8) inset, 0 44px 70px -26px rgba(80, 38, 10, .65), 0 8px 18px -10px rgba(80, 38, 10, .35); }
.portada__marco img { display: block; width: 100%; height: auto; aspect-ratio: 1445 / 1088; max-height: calc(100svh - var(--mesa) - 170px); object-fit: cover; border-radius: clamp(16px, 2vw, 28px); }

.portada__bodegon { position: absolute; z-index: 4; left: 0; bottom: calc(var(--mesa) * .2); width: min(42vw, 660px); aspect-ratio: 660 / 270; pointer-events: none; }
.portada__bodegon > * { pointer-events: auto; }
.portada .canasta { left: -4%; top: auto; bottom: 0; width: 47%; filter: drop-shadow(0 22px 18px rgba(60, 25, 5, .45)); }
.portada .taza-hero { left: 42%; right: auto; top: auto; bottom: 2%; width: 27%; filter: drop-shadow(0 22px 18px rgba(60, 25, 5, .45)); }
.portada .taza-hero__pista { color: #c4581a; left: -18%; top: 0; }
.portada .taza-hero__pista::after { border-color: #c4581a; }
.portada__trigo { left: 63%; bottom: -2%; width: 40%; overflow: visible; filter: drop-shadow(0 16px 14px rgba(60, 25, 5, .4)); }
.portada__trigo .crois { transform-box: fill-box; transform-origin: 50% 100%; transition: translate .45s var(--rebote), rotate .45s var(--rebote); cursor: pointer; }
.portada__trigo .crois:hover, .portada__trigo .crois.salta { translate: 0 -14px; rotate: var(--r, 0deg); }
.portada .hero__baja { left: auto; right: 24px; translate: none; color: rgba(255, 244, 228, .85); }

/* pantallas bajas: todo un poco más compacto */
@media (min-width: 901px) and (max-height: 820px) {
  .portada__antes { font-size: clamp(2.1rem, 3.8vw, 3.6rem); }
  .portada .portada__pan { font-size: clamp(3.1rem, 6vw, 5.8rem); }
  .portada__sub { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
  .portada__bodegon { width: min(38vw, 600px); }
}
@media (min-width: 901px) and (max-height: 690px) {
  .portada__bodegon { width: min(32vw, 520px); }
  .portada__hoja--2 { display: none; }
}
/* tablet y celular: texto, foto y abajo el bodegón sobre la mesa */
@media (max-width: 900px) {
  .portada { --mesa: 64px; grid-template-columns: minmax(0, 1fr); }
  .portada__ola { display: none; }
  .portada__fondo::before, .portada__fondo::after { content: ''; position: absolute; left: -30%; right: -30%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
  .portada__fondo::before { bottom: 70px; height: 210px; background: #e6c9a4; }
  .portada__fondo::after { bottom: 40px; height: 170px; background: #8d5734; }
  .portada__in { grid-template-columns: minmax(0, 1fr); gap: 26px; min-height: 0; padding: 104px 0 0; }
  .portada__txt { padding-top: 0; }
  .portada__antes { font-size: clamp(2.1rem, 8.6vw, 3.4rem); }
  .portada .portada__pan { font-size: clamp(3rem, 14.6vw, 6rem); }
  .portada__sub { font-size: clamp(1.05rem, 4.4vw, 1.35rem); }
  .portada__acciones { margin-left: 0; }
  .portada__marco img { max-height: none; }
  .portada__bodegon { position: relative; left: auto; bottom: auto; width: min(100%, 620px); margin: 6px auto 22px; z-index: 4; }
  .portada__fondo .portada__ola { height: 100%; }
  .portada__hoja { width: 54px; top: 76px; }
  .portada__hoja--2 { display: none; }
  .portada .hero__baja { display: none; }
  .portada__mesa { height: calc(var(--mesa) + 30px); }
}
@media (max-width: 600px) {
  .portada__in { padding-top: 96px; }
  .portada .hero__evento { font-size: .78rem; }
  .portada__bodegon { width: 104%; margin-left: -2%; }
}


/* ===== ¿Quiénes somos? ===== */
.nosotros { position: relative; padding: clamp(80px, 11vw, 140px) 0; background: var(--papel); overflow: hidden; }
.nosotros::before { content: ''; position: absolute; right: -12vw; top: -10vw; width: 46vw; height: 46vw; border-radius: 50%; background: radial-gradient(circle, rgba(255, 198, 43, .22), transparent 68%); pointer-events: none; }
.nosotros__in { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.nosotros .titulo { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.nosotros__foto { position: relative; margin: 30px 0 0; max-width: 520px; }
.nosotros__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; border: 8px solid #fffaf2; box-shadow: 0 30px 60px -28px rgba(80, 38, 10, .55); rotate: -2deg; }
.nosotros__sello { position: absolute; right: -18px; bottom: -22px; display: grid; place-items: center; align-content: center; width: 116px; height: 116px; border-radius: 50%; background: var(--amarillo); color: var(--azul); text-align: center; font: 700 .78rem/1.15 var(--redonda); text-transform: uppercase; letter-spacing: .06em; rotate: 10deg; box-shadow: 0 16px 30px -12px rgba(150, 90, 0, .6); }
.nosotros__sello b { display: block; font: 400 1.25rem/1 var(--guion); text-transform: none; letter-spacing: 0; color: var(--rojo); }
.nosotros__tarjetas { display: grid; gap: 22px; }
.mv { position: relative; padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px) clamp(26px, 3vw, 36px) clamp(86px, 8vw, 112px); border-radius: 28px; background: #fffaf2; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 26px 50px -30px rgba(80, 38, 10, .5); transition: translate .5s var(--sale), box-shadow .5s; }
.mv:hover { translate: 0 -6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 36px 60px -30px rgba(80, 38, 10, .55); }
.mv--vision { background: var(--azul); color: #fbefdc; margin-left: clamp(0px, 4vw, 60px); }
.mv__ico { position: absolute; left: clamp(22px, 2.4vw, 32px); top: clamp(26px, 3vw, 38px); width: clamp(48px, 4.4vw, 58px); height: clamp(48px, 4.4vw, 58px); display: grid; place-items: center; border-radius: 16px; background: var(--amarillo); }
.mv__ico svg { width: 60%; height: 60%; fill: none; stroke: var(--azul); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mv__n { position: absolute; right: 24px; top: 14px; font: 900 clamp(3rem, 5vw, 4.4rem)/1 var(--redonda); color: rgba(43, 23, 11, .07); }
.mv--vision .mv__n { color: rgba(255, 255, 255, .08); }
.mv h3 { margin: 0 0 8px; font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--guion); color: var(--rojo); text-transform: none; }
.mv--vision h3 { color: var(--amarillo); }
.mv p { margin: 0; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; }
@media (max-width: 900px) {
  .nosotros__in { grid-template-columns: minmax(0, 1fr); }
  .nosotros__foto { max-width: none; margin-bottom: 20px; }
  .nosotros__sello { right: 6px; width: 96px; height: 96px; font-size: .68rem; }
  .mv--vision { margin-left: 0; }
}
@media (max-width: 600px) {
  .mv { padding: 84px 22px 26px; }
  .mv__ico { top: 22px; left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}