/* ============================================================
   VISOR DE PRODUCTO
   ============================================================ */
.card--abre{cursor:pointer}
.card--abre .card__media::after{content:'';position:absolute;inset:0;background:rgba(10,7,4,0);transition:.22s}
.card--abre:hover .card__media::after{background:rgba(10,7,4,.10)}

.visor{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,9,6,.82);backdrop-filter:blur(8px)}
.visor--on{display:flex;animation:vsEntra .2s ease-out}
@keyframes vsEntra{from{opacity:0}}
.visor__caja{width:min(980px,100%);max-height:calc(100dvh - 48px);background:#FFFFFF;border-radius:22px;
  overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  transition:opacity .18s,transform .18s}
.visor__caja.cambia{opacity:.35;transform:scale(.985)}
body[data-tema="oscuro"] .visor__caja{background:#17151E;color:#F5F1EA}

.visor__fotos{position:relative;overflow:hidden;background:#F3EDE4;aspect-ratio:4/3}
body[data-tema="oscuro"] .visor__fotos{background:#100E15}
.visor__pista{display:flex;height:100%;transition:transform .3s cubic-bezier(.22,.8,.28,1)}
.visor__foto{min-width:100%;height:100%}
.visor__foto picture,.visor__foto img{display:block;width:100%;height:100%;object-fit:cover}
.visor__foto--sinfoto{display:grid;place-items:center}
.visor__foto--sinfoto svg{width:38%;height:38%;color:rgba(255,255,255,.85);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}
.visor__f{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(255,255,255,.9);color:#2A241D;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.visor__f svg{width:18px;height:18px}
.visor__f--ant{left:12px} .visor__f--sig{right:12px}
.visor__f[hidden]{display:none}
.visor__puntos{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center}
.visor__puntos button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.visor__puntos button.on{background:#F2AC5E;width:20px;border-radius:999px}
.visor__off{position:absolute;top:14px;left:14px;background:linear-gradient(145deg,#FFE7BE,#D9942F);
  color:#2A1B06;font-weight:800;font-size:.86rem;padding:5px 12px;border-radius:999px}

.visor__texto{padding:30px 32px;display:flex;flex-direction:column;overflow-y:auto}
.visor__et{align-self:flex-start;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:4px 11px;border-radius:999px;background:rgba(242,172,94,.18);color:#96560F;margin-bottom:12px}
body[data-tema="oscuro"] .visor__et{background:rgba(242,172,94,.16);color:#F2B45F}
.visor__texto h3{font-size:1.5rem;margin:0 0 12px;line-height:1.2;letter-spacing:-.02em}
.visor__texto p{margin:0;font-size:.95rem;line-height:1.65;color:#5E5347}
body[data-tema="oscuro"] .visor__texto p{color:#B9AF9F}
.visor__pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:24px}
.visor__pie .price{font-size:1.6rem}
.visor__pie .btn{margin-left:auto}
.visor__ayuda{font-size:.74rem;color:#9A8E7E;margin-top:14px;text-align:center}

.visor__caja{position:relative}
.visor__x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#2A241D;display:grid;place-items:center;z-index:5;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.visor__x:hover{background:#fff;transform:scale(1.06)}
body[data-tema="oscuro"] .visor__x{background:rgba(40,36,48,.92);color:#F5F1EA}
.visor__x svg{width:19px;height:19px}
.visor__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(6px);z-index:2}
.visor__nav:hover{background:rgba(255,255,255,.26)}
.visor__nav svg{width:22px;height:22px}
.visor__nav--ant{left:20px} .visor__nav--sig{right:20px}
.visor__nav[hidden]{display:none}

@media(max-width:860px){
  .visor{padding:0}
  .visor__caja{grid-template-columns:1fr;border-radius:0;max-height:100dvh;height:100dvh;
    grid-template-rows:auto 1fr;overflow-y:auto}
  .visor__fotos{aspect-ratio:1/1}
  .visor__texto{padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  .visor__texto h3{font-size:1.28rem}
  .visor__nav{display:none}
  .visor__x{top:14px;right:14px;background:rgba(10,7,4,.5)}
  .visor__pie .btn{margin-left:0;width:100%}
}

/* ---------- botones de las apps de reparto ---------- */
.app{transition:transform .2s, box-shadow .2s, border-color .2s}
.app:hover{transform:translateY(-2px)}
.app__logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  font-weight:800;font-size:.9rem;letter-spacing:.02em;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.app__logo svg{width:26px;height:26px}
.app--dd .app__logo{background:#EB1700 !important;color:#fff !important}
.app--ue .app__logo{background:#06C167 !important;color:#0B1F14 !important}
.app--dd:hover{border-color:rgba(235,23,0,.45); box-shadow:0 14px 30px -18px rgba(235,23,0,.55)}
.app--ue:hover{border-color:rgba(6,193,103,.45); box-shadow:0 14px 30px -18px rgba(6,193,103,.5)}
.app__go{display:grid;place-items:center;color:var(--pm);opacity:.6;transition:.2s}
.app__go svg{width:17px;height:17px}
.app:hover .app__go{opacity:1;transform:translate(2px,-2px)}
.app--dd:hover .app__go{color:#EB1700}
.app--ue:hover .app__go{color:#06A857}

/* ---------- enlaces legales del pie ---------- */
.legal__pol{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
.legal__pol a{opacity:.75;transition:.2s}
.legal__pol a:hover{opacity:1;color:var(--oro)}
.legal__pol a:not(:last-child)::after{content:' ·';margin-left:6px;opacity:.5}
@media(max-width:600px){.legal__pol{gap:4px;font-size:.78rem}}

/* ---------- aviso de cookies ---------- */
.ck{position:fixed;left:16px;bottom:16px;z-index:75;width:min(420px,calc(100vw - 32px));
  background:#FFFFFF;border:1px solid #EAE2D6;border-radius:18px;padding:18px 20px;
  box-shadow:0 26px 60px -26px rgba(90,64,20,.42);color:#241F19;
  opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s}
.ck--on{opacity:1;transform:none}
.ck__txt b{display:block;font-size:.94rem;margin-bottom:5px}
.ck__txt span{display:block;font-size:.82rem;line-height:1.55;color:#6B6153}
.ck__txt a{color:#A96D14;text-decoration:underline}
.ck__bot{display:flex;gap:9px;margin-top:15px}
.ck__bot .btn{flex:1;justify-content:center;padding:10px 14px;font-size:.84rem}
@media(max-width:620px){
  .ck{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:16px}
  .ck__bot{flex-direction:column-reverse}
}

/* ---------- foto acercada dentro del visor ---------- */
.visor__fotos{touch-action:pan-y}
.visor--zoom .visor__fotos{touch-action:none; cursor:grab}
.visor--zoom .visor__pista{transition:none}
.visor--zoom .visor__f, .visor--zoom .visor__puntos{opacity:.25; pointer-events:none}
.visor__pista img{transform-origin:center center; will-change:transform}
.visor__zoom{position:absolute; left:12px; bottom:12px; z-index:3;
  background:rgba(255,255,255,.9); color:#5E5347; border-radius:999px;
  padding:5px 11px; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  opacity:0; transition:opacity .25s; pointer-events:none}
.visor__fotos:hover .visor__zoom{opacity:1}
body[data-tema="oscuro"] .visor__zoom{background:rgba(30,27,36,.9); color:#C9BFAE}
@media(hover:none){ .visor__zoom{opacity:.85} }

/* ============================================================
   BLOQUES · el primero siempre respeta la barra fija
   Da igual cuál sea: portada, delivery, cinta o descuentos.
   ============================================================ */
.bloque{position:relative}

/* el margen va en el envoltorio, así el bloque no se deforma */
.bloque--primero{padding-top:calc(var(--tb, 96px) + 30px)}
@media(max-width:860px){ .bloque--primero{padding-top:calc(var(--tb, 116px) + 24px)} }

/* si el primero es la portada, que no sume dos veces */
.bloque--primero > .hero,
.bloque--primero .hero{padding-top:0 !important}

/* la cinta rodante suelta necesita su propio aire */
.bloque > .ticker{margin-block:16px}
.bloque--primero > .ticker{margin-top:0}

/* entre bloque y bloque, aire constante sin tocar su interior */
.bloque + .bloque{margin-top:0}
.bloque > section{padding-block:clamp(46px, 6vw, 72px)}
.bloque--primero > section{padding-top:clamp(24px, 3vw, 34px)}