/* ============================================================
   PillaT · web de pedidos
   Diseño base: el boceto de la portada + "mi cuenta".
   Añadido: logo animado, iconos de verdad, la tarifa por zonas
   y la sección para comercios. Ninguna foto se recorta: cada
   hueco toma la proporción exacta de su imagen.
   ============================================================ */
:root{
  color-scheme:light;
  --tomate:#D92610; --vivo:#FF3B1F; --hondo:#8F1C0A; --rosa:#FBE4E0;
  --oro:#E8A317; --oro-ink:#7A4F05; --oro-suave:#FFF1CC;
  --crema:#FAF8F5; --blanco:#fff; --hueso:#F4EEE9;
  --tinta:#2A1512; --gris:#6F5F59; --gris2:#94847D;
  --noche:#1C0D0A;
  --verde:#0F7A58; --verde-suave:#E4F3EB;
  --borde:#E9E1DB; --borde2:#F3ECE6;
  --disp:"Bricolage Grotesque",ui-sans-serif,system-ui,Arial,sans-serif;
  --txt:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --sombra:0 14px 34px rgba(42,21,18,.10);
  --sombra1:0 1px 2px rgba(42,21,18,.04),0 6px 18px rgba(42,21,18,.05);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;color:var(--tinta);background:var(--crema);
     font:16px/1.5 var(--txt);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--disp);line-height:1.02;letter-spacing:-.045em}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
svg{flex:0 0 auto}
:focus-visible{outline:2.5px solid var(--tomate);outline-offset:3px;border-radius:8px}
.wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.muted{color:var(--gris)}
.eyebrow{color:var(--tomate);font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 11px;
      font-size:.8rem;font-weight:700;line-height:1.2}
.chip svg{width:13px;height:13px}
.chip.gold{background:var(--oro-suave);color:var(--oro-ink)} .chip.gold svg{fill:var(--oro)}
.chip.green{background:var(--verde-suave);color:var(--verde)}
.chip.green .punto{width:7px;height:7px;border-radius:50%;background:var(--verde)}
.chip.red{background:var(--rosa);color:var(--hondo)} .chip.red svg{fill:var(--hondo)}
.chip.neutro{background:var(--hueso);color:var(--gris)}

.cta{border-radius:12px;background:var(--tomate);color:var(--blanco);padding:14px 20px;
     font-weight:700;box-shadow:0 8px 18px rgba(217,38,16,.20);
     transition:filter .15s,transform .12s}
.cta:hover{filter:brightness(1.07)} .cta:active{transform:scale(.985)}

.tira-demo{background:var(--tinta);color:var(--crema);font-family:var(--disp);font-weight:600;
     font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:7px}

/* ---------- el logo, con su animación ---------- */
.marca{display:inline-flex;align-items:center;gap:8px}
.marca svg.iso{width:26px;height:30px;overflow:visible}
.marca .nom{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.035em;
            color:var(--tomate);line-height:1}
.marca .pin{transform-origin:48px 91px}
.marca .sonrisa{stroke-dasharray:52;stroke-dashoffset:52}
.marca .onda{opacity:0;transform-origin:48px 93px}
.animar .pin{animation:caer .72s cubic-bezier(.34,1.56,.64,1) both}
.animar .onda{animation:onda .5s ease-out .58s both}
.animar .sonrisa{animation:sonreir .5s ease-out .74s both}
.animar .nom{animation:subir .5s cubic-bezier(.22,1,.36,1) .5s both}
@keyframes caer{0%{transform:translateY(-30px) scale(.8);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes onda{0%{opacity:.55;transform:scale(.2)}100%{opacity:0;transform:scale(1.5)}}
@keyframes sonreir{to{stroke-dashoffset:0}}
@keyframes subir{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .animar .pin,.animar .onda,.animar .sonrisa,.animar .nom{animation:none}
  .marca .sonrisa{stroke-dashoffset:0}
}

/* ---------- cabecera ---------- */
header.top{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--borde);
           background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(12px)}
header.top nav{min-height:70px;display:grid;grid-template-columns:auto auto 1fr auto auto auto;
               gap:14px;align-items:center}
.zone{display:flex;align-items:center;gap:7px;padding:9px 13px;white-space:nowrap;
      border:1px solid var(--borde);border-radius:999px;background:var(--blanco);font-weight:700;font-size:.92rem}
.zone svg{width:14px;height:14px;fill:var(--tomate)}
.zone .caret{width:11px;height:11px;stroke:var(--gris);fill:none;stroke-width:2.4}
.search{min-width:0;display:flex;align-items:center;gap:9px;padding:10px 15px;
        border:1px solid var(--borde);border-radius:999px;background:var(--crema);color:var(--gris)}
.search svg{width:16px;height:16px;stroke:var(--gris);fill:none;stroke-width:2}
.search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--tinta)}
.nav-link{font-size:.9rem;font-weight:700;white-space:nowrap}
.nav-link:hover{color:var(--tomate)}
.account-link{display:flex;align-items:center;gap:8px;border:1px solid var(--borde);border-radius:12px;
              padding:10px 14px;font-size:.9rem;font-weight:700;white-space:nowrap;background:var(--blanco)}
.account-link svg{width:16px;height:16px;stroke:var(--tinta);fill:none;stroke-width:1.9}
.account-link:hover{border-color:var(--tomate);color:var(--tomate)}
.account-link:hover svg{stroke:var(--tomate)}
.cart{display:flex;align-items:center;gap:9px;border-radius:12px;background:var(--tinta);color:#fff;
      padding:11px 15px;white-space:nowrap;font-weight:700;font-size:.9rem}
.cart svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.9}
.cart .n{background:var(--tomate);border-radius:999px;min-width:20px;height:20px;display:grid;
         place-items:center;font-size:12px;font-weight:800;padding:0 6px;font-variant-numeric:tabular-nums}

/* ---------- héroe ---------- */
.hero{background:var(--blanco);padding-bottom:8px}
.hero-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:44px;align-items:center;
           padding:74px 0 78px}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-copy .eyebrow{margin-bottom:13px}
h1{max-width:600px;font-size:clamp(3.1rem,5.2vw,5.4rem);letter-spacing:-.055em}
.tomate{color:var(--tomate)}
.hero-tagline{margin-top:20px;font-family:var(--disp);font-size:clamp(1.3rem,1.9vw,1.75rem);
              font-weight:700;line-height:1.14;letter-spacing:-.035em}
.hero-tagline strong{color:var(--tomate)}
.intro{max-width:520px;margin-top:18px;color:var(--gris);font-size:1.05rem}
.address{max-width:540px;margin-top:26px;padding:7px;display:grid;grid-template-columns:1fr auto;gap:7px;
         border:1px solid var(--borde);border-radius:16px;background:var(--blanco);box-shadow:var(--sombra)}
.address label{min-width:0;display:flex;align-items:center;gap:9px;padding-inline:11px;color:var(--gris)}
.address label svg{width:16px;height:16px;fill:var(--tomate)}
.address input{min-width:0;width:100%;border:0;outline:0;color:var(--tinta);background:transparent}
.assurances{display:flex;flex-wrap:wrap;gap:18px;margin:26px 0 0;padding:0;list-style:none;
            font-size:.85rem;font-weight:600}
.assurances li{display:flex;align-items:center;gap:8px}
.check{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--verde-suave)}
.check svg{width:12px;height:12px;stroke:var(--verde);fill:none;stroke-width:3;stroke-linecap:round}
/* La foto manda: mantiene su proporción y no se recorta nada. */
.hero-photo{border-radius:24px;overflow:hidden;box-shadow:var(--sombra);justify-self:end;width:100%}
.hero-photo img{width:100%;height:auto}

section{padding:74px 0}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
h2{font-size:clamp(1.95rem,3vw,2.85rem)}
.section-title p.sub{margin-top:9px;color:var(--gris);font-size:1rem}
.more{color:var(--tomate);font-size:.9rem;font-weight:700;white-space:nowrap;
      display:inline-flex;align-items:center;gap:6px}
.more svg{width:13px;height:13px;stroke:var(--tomate);fill:none;stroke-width:2.5}

/* ---------- categorías ---------- */
.categories{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.category{min-height:112px;padding:18px 10px;display:grid;place-items:center;gap:10px;
          border:1px solid var(--borde);border-radius:18px;background:var(--blanco);text-align:center;
          font-size:.88rem;font-weight:700;
          transition:transform .2s cubic-bezier(.33,1,.68,1),box-shadow .2s,border-color .2s}
.category:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:#DFD2C9}
.category svg{width:29px;height:29px;fill:none;stroke:var(--tomate);stroke-width:1.7;
              stroke-linecap:round;stroke-linejoin:round}

/* ---------- comercios ---------- */
.shops{background:var(--blanco)}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shop{overflow:hidden;border:1px solid var(--borde);border-radius:18px;background:var(--blanco);
      text-align:left;width:100%;display:block;
      transition:transform .22s cubic-bezier(.33,1,.68,1),box-shadow .22s,border-color .22s}
.shop:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:#DFD2C9}
.shop-image{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--hueso);flex:0 0 auto}
.shop-image img{width:100%;height:100%;object-fit:cover;
                transition:transform .45s cubic-bezier(.33,1,.68,1)}
.shop:hover .shop-image img{transform:scale(1.04)}
.shop-image .chip{position:absolute;top:12px;left:12px;box-shadow:var(--sombra1)}
.delivery{position:absolute;right:12px;bottom:12px;padding:7px 11px;border-radius:999px;
          background:rgba(255,255,255,.96);font-size:.76rem;font-weight:700;box-shadow:var(--sombra1)}
.shop-body{padding:17px 18px 18px}
.shop-body .alto{display:flex;align-items:flex-start;gap:10px}
.shop h3{font-size:1.2rem;letter-spacing:-.03em}
.shop:hover h3{color:var(--tomate)}
.type{margin-top:5px;color:var(--gris);font-size:.9rem}
.nota{margin-left:auto;display:flex;align-items:center;gap:5px;font-weight:800;font-size:.92rem;
      font-variant-numeric:tabular-nums;padding-top:2px}
.nota svg{width:14px;height:14px;fill:var(--oro)}
/* "conocido por": el detalle que hace que un sitio no sea intercambiable */
.conocido{display:flex;align-items:center;gap:9px;margin-top:13px;padding:9px 12px;min-height:54px;
          background:var(--crema);border-radius:11px;font-size:.85rem;line-height:1.4}
.conocido svg{width:14px;height:14px;fill:var(--tomate)}
.metrics{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:13px;
         border-top:1px solid var(--borde2);color:var(--gris);font-size:.84rem}
.metrics .m{display:flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums}
.metrics .m svg{width:14px;height:14px;fill:var(--gris2)}

/* ---------- comercio destacado ---------- */
.featured{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;border:1px solid var(--borde);
          border-radius:22px;background:var(--blanco);box-shadow:var(--sombra)}
.featured-image{background:var(--hueso);display:flex;flex-direction:column;justify-content:center;
                gap:0;overflow:hidden}
.featured-image img{width:100%;height:auto}
.ficha-datos{padding:24px 30px 26px;display:grid;gap:14px}
.ficha-datos .fd{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.45}
.ficha-datos .fd svg{width:16px;height:16px;stroke:var(--tomate);fill:none;stroke-width:1.8;margin-top:2px}
.ficha-datos .fd b{display:block;font-weight:700}
.ficha-datos .fd span{color:var(--gris)}
.featured-info{padding:44px}
.featured-info h2{margin-top:6px}
.featured-info>p.desc{margin-top:14px;color:var(--gris)}
.featured-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.menu-preview{display:grid;gap:12px;margin-top:26px}
.menu-item{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center;padding:11px;
           border:1px solid var(--borde);border-radius:14px;transition:border-color .16s,background .16s}
.menu-item:hover{border-color:#DFD2C9;background:var(--crema)}
.menu-item img{width:70px;height:70px;object-fit:cover;border-radius:11px}
.menu-item h3{font-family:var(--txt);font-size:.98rem;letter-spacing:0;font-weight:700}
.menu-item p{margin-top:4px;color:var(--gris);font-size:.81rem;line-height:1.4}
.menu-item .der{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.price{font-family:var(--disp);font-weight:800;font-size:1.02rem;white-space:nowrap;
       font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mas{width:32px;height:32px;border-radius:10px;border:1px solid var(--borde);display:grid;
     place-items:center;transition:.16s}
.mas svg{width:15px;height:15px;stroke:var(--tinta);fill:none;stroke-width:2.4;stroke-linecap:round}
.mas:hover{background:var(--tomate);border-color:var(--tomate)}
.mas:hover svg{stroke:#fff}
.mas.hecho{background:var(--verde);border-color:var(--verde)}
.mas.hecho svg{stroke:#fff}
.featured-info .cta{width:100%;margin-top:24px}

/* ---------- zonas de reparto ---------- */
.zonas-sec{background:var(--blanco);border-top:1px solid var(--borde2)}
.zonas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
.zona-c{border:1px solid var(--borde);border-radius:18px;padding:24px 24px 22px;background:var(--blanco);
        position:relative}
.zona-c.tuya{border-color:var(--tomate);box-shadow:0 0 0 3px var(--rosa)}
.zona-c .et{position:absolute;top:-11px;left:22px;background:var(--tomate);color:#fff;font-size:.66rem;
            font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:7px}
.zona-c h3{font-size:1.32rem;letter-spacing:-.035em}
.zona-c .km{margin-top:5px;color:var(--gris);font-size:.9rem}
.zona-c .precio{margin-top:18px;font-family:var(--disp);font-weight:800;font-size:2.4rem;
                letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1}
.zona-c .precio small{font-family:var(--txt);font-size:.9rem;font-weight:600;color:var(--gris);
                      letter-spacing:0;display:block;margin-top:6px}
.zona-c .min{margin-top:16px;padding-top:14px;border-top:1px solid var(--borde2);
             font-size:.88rem;color:var(--gris)}
.zona-c .min b{color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.nota-zonas{margin-top:22px;display:flex;gap:11px;align-items:flex-start;background:var(--crema);
            border-radius:14px;padding:16px 18px;font-size:.9rem;color:var(--gris);line-height:1.5}
.nota-zonas svg{width:18px;height:18px;stroke:var(--tomate);fill:none;stroke-width:1.8;margin-top:2px}
.nota-zonas b{color:var(--tinta);font-weight:700}

/* ---------- mi cuenta ---------- */
.account{background:linear-gradient(180deg,var(--hueso),var(--crema))}
.account-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:25px}
.profile-card,.account-panel{padding:25px;border:1px solid var(--borde);border-radius:20px;
                             background:var(--blanco);box-shadow:0 8px 22px rgba(42,21,18,.045)}
.profile-card{align-self:start;text-align:center}
.avatar-wrap{position:relative;width:128px;height:128px;margin:0 auto 16px}
.avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--crema)}
.edit-avatar{position:absolute;right:0;bottom:2px;width:38px;height:38px;border:3px solid #fff;
             border-radius:50%;background:var(--tomate);display:grid;place-items:center}
.edit-avatar svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}
.profile-card h3{font-size:1.4rem;letter-spacing:-.035em}
.profile-card .muted{margin-top:5px;font-size:.9rem}
.member{display:inline-block;margin:15px 0 21px;padding:6px 11px;border-radius:999px;
        background:var(--rosa);color:var(--hondo);font-size:.76rem;font-weight:700}
.side-nav{padding:0;margin:0;list-style:none;text-align:left;border-top:1px solid var(--borde)}
.side-nav a{display:flex;align-items:center;gap:11px;padding:13px 1px;border-bottom:1px solid var(--borde);
            font-size:.92rem;font-weight:600}
.side-nav svg{width:16px;height:16px;stroke:var(--gris);fill:none;stroke-width:1.8}
.side-nav a:hover{color:var(--tomate)}
.side-nav a.active{color:var(--tomate)} .side-nav a.active svg{stroke:var(--tomate)}
.account-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.account-panel h3{font-size:1.28rem;letter-spacing:-.035em}
.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:20px}
.edit-link{color:var(--tomate);font-size:.86rem;font-weight:700}
.data-list{display:grid;gap:15px}
.data-row{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start}
.data-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--crema)}
.data-icon svg{width:16px;height:16px;stroke:var(--tomate);fill:none;stroke-width:1.8}
.data-row b{display:block;font-size:.86rem}
.data-row span{color:var(--gris);font-size:.91rem}
.card-art{margin-top:20px;padding:19px;min-height:150px;display:flex;flex-direction:column;
          justify-content:space-between;border-radius:16px;color:#fff;
          background:linear-gradient(135deg,var(--hondo),var(--tomate));
          box-shadow:0 12px 20px rgba(143,28,10,.2)}
.card-art small{opacity:.9;font-size:.72rem;letter-spacing:.1em}
.card-number{font-size:1.1rem;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.address-card{grid-column:1 / -1}
.address-box{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px;border-radius:14px;
             background:var(--crema);align-items:center}
.address-box p{margin-top:9px;color:var(--gris);line-height:1.5}
.address-box p b{color:var(--tinta);display:block}
.order-row{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:center}
.order-row img{width:70px;height:70px;object-fit:cover;border-radius:11px}
.order-row h3{font-family:var(--txt);font-size:1rem;letter-spacing:0;font-weight:700}
.order-row p{margin-top:4px;color:var(--gris);font-size:.85rem}
.status{margin-top:16px;display:flex;align-items:center;gap:8px;color:var(--verde);
        font-size:.85rem;font-weight:700}
.status .punto{width:8px;height:8px;border-radius:50%;background:var(--verde)}

/* ---------- para comercios: la única sección oscura ---------- */
.negocios{background:var(--noche);color:#F6EDE8;position:relative;overflow:hidden}
.negocios::before{content:"";position:absolute;top:-170px;right:-130px;width:540px;height:540px;
                  border-radius:50%;pointer-events:none;
                  background:radial-gradient(circle,rgba(217,38,16,.32),transparent 68%)}
.neg-cab{position:relative;max-width:660px}
.neg-cejilla{color:var(--oro);font-family:var(--disp);font-size:.76rem;font-weight:700;
             letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.negocios h2{color:#fff;margin-bottom:16px}
.negocios .lead{font-size:1.05rem;color:#D7C4BC;max-width:52ch}
.neg-cifras{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;
            border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.cifra{padding:26px 30px;border-right:1px solid rgba(255,255,255,.15)}
.cifra:last-child{border-right:none} .cifra:first-child{padding-left:0}
.cifra b{display:block;font-family:var(--disp);font-weight:800;font-size:2.5rem;letter-spacing:-.05em;
         color:#fff;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.cifra span{font-size:.88rem;color:#C9B4AB;line-height:1.45;display:block}
.neg-abajo{position:relative;display:grid;grid-template-columns:1fr 400px;gap:46px;align-items:center;
           margin-top:44px}
.neg-lista{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.neg-lista li{display:flex;gap:13px;font-size:.98rem;color:#EADCD6;line-height:1.5}
.neg-lista svg{width:19px;height:19px;fill:none;stroke:var(--oro);stroke-width:2.6;
               stroke-linecap:round;margin-top:3px}
.neg-lista b{color:#fff;font-weight:700}
.neg-cta{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn-oro{background:var(--oro);color:#2A1512;border-radius:12px;padding:14px 22px;font-weight:800;
         display:flex;align-items:center;gap:9px;transition:filter .15s,transform .12s}
.btn-oro:hover{filter:brightness(1.07)} .btn-oro:active{transform:scale(.985)}
.btn-oro svg{width:14px;height:14px;stroke:#2A1512;fill:none;stroke-width:2.6}
.neg-cta .tel{font-size:.9rem;color:#C9B4AB} .neg-cta .tel b{color:#fff}
/* el argumento de venta es un recibo, así que parece un recibo */
.recibo{background:#fff;color:var(--tinta);border-radius:18px;padding:25px 26px 22px;box-shadow:var(--sombra)}
.recibo .rot{font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.13em;
             text-transform:uppercase;color:var(--gris);margin-bottom:16px;padding-bottom:13px;
             border-bottom:2px dashed var(--borde)}
.recibo .f{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:.92rem;color:var(--gris)}
.recibo .f span:last-child{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.recibo .f.res{border-top:2px dashed var(--borde);margin-top:10px;padding-top:15px;
               font-family:var(--disp);font-weight:800;font-size:1.05rem;color:var(--tinta);letter-spacing:-.03em}
.recibo .f.res span:last-child{font-weight:800;font-size:1.3rem;color:var(--verde)}
/* La nota del envio: aclara que el 0,00 EUR del recibo es el caso del pueblo.
   Va en gris y pequeña, debajo del total, sin robarle sitio a la nota fundador. */
.recibo .nota-envio{margin-top:12px;font-size:.82rem;line-height:1.5;color:var(--gris)}
.recibo .nota-envio b{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.recibo .nota-oro{margin-top:14px;background:var(--oro-suave);border-radius:12px;padding:13px 15px;
                  font-size:.86rem;line-height:1.5;color:var(--oro-ink)}
.recibo .nota-oro b{font-weight:800}

/* ---------- pie ---------- */
footer{background:var(--tinta);color:#F0E4DE}
footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;padding:52px 0 38px}
footer h5{font-family:var(--disp);font-weight:700;font-size:1rem;margin:0 0 16px;color:#fff;letter-spacing:-.02em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
footer a,footer li{font-size:.9rem;color:#C9B4AB}
footer a:hover{color:#fff}
footer .sobre{font-size:.9rem;color:#C9B4AB;max-width:32ch;margin-top:15px;line-height:1.55}
footer .marca .nom{color:#fff}
.ayuda li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.ayuda svg{width:15px;height:15px;stroke:#C9B4AB;fill:none;stroke-width:1.8;margin-top:3px}
.redes{display:flex;gap:10px;margin-top:20px}
.redes a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
         display:grid;place-items:center;transition:.15s}
.redes svg{width:16px;height:16px;stroke:#C9B4AB;fill:none;stroke-width:1.8}
.redes a:hover{border-color:var(--tomate);background:var(--tomate)}
.redes a:hover svg{stroke:#fff}
.pie2{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;text-align:center;
      font-size:.8rem;color:#A8938B}

/* ---------- carta y panel de pago ---------- */
.carta-sec{background:var(--blanco);border-top:1px solid var(--borde2)}
.carta-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:38px;align-items:start}
.nav-sec{display:flex;gap:10px;overflow-x:auto;padding:2px 0 22px;scrollbar-width:none}
.nav-sec::-webkit-scrollbar{display:none}
.nav-btn{flex:0 0 auto;padding:10px 20px;border-radius:999px;font-size:.9rem;font-weight:600;
         border:1px solid var(--borde);background:var(--blanco);white-space:nowrap;transition:.15s}
.nav-btn:hover{border-color:var(--tomate);color:var(--tomate)}
.nav-btn.sel{background:var(--tomate);border-color:var(--tomate);color:#fff}
.grupo-t{font-size:1.4rem;letter-spacing:-.035em}
.grupo-d{margin-top:6px;color:var(--gris);font-size:.92rem}
.platos{display:grid;gap:16px;margin-top:20px}
.plato{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;
       border:1px solid var(--borde);border-radius:16px;padding:14px;background:var(--blanco);
       transition:border-color .18s,box-shadow .18s}
.plato:hover{border-color:#DFD2C9;box-shadow:var(--sombra1)}
.plato img,.plato .foto-pend{width:132px;height:132px;border-radius:12px}
.plato img{object-fit:cover}
.plato .foto-pend{display:grid;place-content:center;text-align:center;background:var(--hueso);
                  border:1px dashed #D9CBC3;color:var(--gris2);font-size:.72rem;font-weight:700;line-height:1.5}
.plato .foto-pend em{font-style:normal;font-weight:500;font-size:.68rem}
.plato h4{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.plato p{margin-top:6px;color:var(--gris);font-size:.88rem;line-height:1.5}
.pab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.btn-anadir{border:1px solid var(--borde);border-radius:11px;padding:9px 20px;font-weight:600;
            font-size:.9rem;transition:.16s}
.btn-anadir:hover{border-color:var(--tomate);color:var(--tomate);background:var(--rosa)}
.btn-anadir.hecho{background:var(--verde);border-color:var(--verde);color:#fff}

.panel{position:sticky;top:96px;background:var(--blanco);border:1px solid var(--borde);
       border-radius:20px;box-shadow:var(--sombra1);overflow:hidden}
.panel-cab{display:flex;align-items:center;padding:20px 22px 14px}
.panel-cab h4{margin:0;font-family:var(--disp);font-weight:800;font-size:1.18rem;letter-spacing:-.035em}
.papelera{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;border-radius:9px}
.papelera svg{width:17px;height:17px;stroke:var(--gris);fill:none;stroke-width:1.8}
.papelera:hover svg{stroke:var(--tomate)}
.vacio{padding:32px 24px 38px;text-align:center;color:var(--gris);font-size:.9rem;line-height:1.6}
.vacio svg{width:38px;height:38px;stroke:var(--borde);fill:none;stroke-width:1.6;margin:0 auto 14px;display:block}
.lin{display:flex;gap:13px;padding:11px 22px;align-items:center}
.lin img,.lin .lin-pend{width:52px;height:52px;border-radius:11px;flex:0 0 auto}
.lin img{object-fit:cover}
.lin .lin-pend{background:var(--hueso);border:1px dashed #D9CBC3}
.lin .lt{flex:1;min-width:0}
.lin h5{margin:0;font-weight:600;font-size:.92rem;line-height:1.3}
.lin .ud{margin-top:2px;font-size:.82rem;color:var(--gris);font-variant-numeric:tabular-nums}
.lin .lp{font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums}
.cuenta{padding:14px 22px 4px;border-top:1px solid var(--borde2);margin-top:8px}
.cuenta .f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;
           font-size:.92rem;color:var(--gris)}
.cuenta .f span:last-child{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cuenta .f.tot{border-top:1px solid var(--borde);margin-top:9px;padding-top:15px;font-family:var(--disp);
               font-weight:800;font-size:1.15rem;color:var(--tinta);letter-spacing:-.035em}
.cuenta .f.tot span:last-child{font-weight:800;font-size:1.4rem}
.falta{margin:14px 22px 0;background:var(--oro-suave);border-radius:12px;padding:12px 15px;
       font-size:.86rem;line-height:1.5;color:var(--oro-ink)}
.falta b{font-weight:800}
.aviso-ll{display:flex;gap:11px;margin:14px 22px 0;background:#FDECE9;border-radius:12px;padding:13px 15px}
.aviso-ll svg{width:19px;height:19px;stroke:var(--tomate);fill:none;stroke-width:1.7;margin-top:1px}
.aviso-ll p{font-size:.85rem;line-height:1.5;color:var(--hondo)}
.aviso-ll b{font-weight:700}
.panel .cta{display:block;width:calc(100% - 44px);margin:18px 22px 10px;text-align:center;padding:16px}
.panel .cta[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.seguro{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 22px 20px;
        font-size:.78rem;color:var(--gris2)}
.seguro svg{width:13px;height:13px;stroke:var(--gris2);fill:none;stroke-width:2}
@media(max-width:1050px){.carta-grid{grid-template-columns:1fr;gap:28px}.panel{position:static}}
@media(max-width:520px){
  .plato{grid-template-columns:96px minmax(0,1fr);gap:13px;padding:11px}
  .plato img{width:96px;height:96px}
}

/* ---------- avisos flotantes ---------- */
#brindis{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:90;
         background:var(--tinta);color:#fff;border-radius:13px;padding:13px 20px;font-size:.9rem;
         font-weight:600;box-shadow:var(--sombra);opacity:0;pointer-events:none;transition:.25s}
#brindis.on{opacity:1;transform:translate(-50%,0)}

/* ---------- adaptación a pantallas pequeñas ---------- */
@media(max-width:1050px){
  .neg-abajo{grid-template-columns:1fr;gap:34px}
  .account-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .categories{grid-template-columns:repeat(3,1fr)}
  .shop-grid{grid-template-columns:1fr 1fr}
  .featured{grid-template-columns:1fr}
  .featured-info{padding:30px}
  .zonas{grid-template-columns:1fr}
  .neg-cifras{grid-template-columns:1fr}
  .cifra{border-right:none;border-bottom:1px solid rgba(255,255,255,.15);padding:20px 0}
  .cifra:last-child{border-bottom:none}
  footer .wrap{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:850px){
  .wrap{width:min(calc(100% - 32px),var(--max))}
  header.top nav{grid-template-columns:1fr auto auto;gap:10px;padding:12px 0}
  .zone,.nav-link{display:none}
  .search{grid-column:1/-1;grid-row:2}
  .account-link{padding:9px 12px;font-size:.82rem}
  .cart{padding:10px 12px;font-size:.82rem}
  section{padding:52px 0}
  .hero-grid{grid-template-columns:1fr;gap:24px;padding:34px 0 44px}
  .hero-copy{order:2}
  .hero-photo{order:1;justify-self:stretch}
  h1{font-size:3.1rem}
  .address{grid-template-columns:1fr}
  .address .cta{width:100%}
  .assurances{gap:12px;font-size:.8rem}
  .section-title{align-items:flex-start;flex-direction:column;gap:10px}
  .account-layout{grid-template-columns:1fr}
  .profile-card{text-align:left}
  .avatar-wrap{margin:0 0 14px}
  .side-nav{display:none}
  .address-card{grid-column:auto}
  .address-box{grid-template-columns:1fr}
}
@media(max-width:520px){
  .account-link span{display:none}
  .account-link{padding:10px}
  .shop-grid{grid-template-columns:1fr}
  .categories{grid-template-columns:repeat(2,1fr)}
  .menu-item{grid-template-columns:58px 1fr auto;gap:11px}
  .menu-item img{width:58px;height:58px}
  .featured-info{padding:22px}
  .profile-card,.account-panel{padding:20px}
  .cifra b{font-size:2.1rem}
  .metrics{gap:6px 12px}
}

/* ===========================================================================
   Lo que necesita la tienda de verdad y no tenía el boceto: los avisos de
   carga, los estados vacíos, la ventana de entrar y el paso del pago.
   =========================================================================== */

/* ---------- cargando y estados vacíos ---------- */
.cargando{display:grid;place-items:center;gap:14px;padding:60px 20px;color:var(--gris);font-size:.95rem}
.girando{width:30px;height:30px;border:3px solid var(--borde);border-top-color:var(--tomate);
         border-radius:50%;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.girando{animation-duration:2.4s}}
.hueco{border:1px dashed #DCD0C7;border-radius:18px;padding:40px 28px;text-align:center;
       background:var(--blanco);color:var(--gris);display:grid;gap:10px;justify-items:center}
.hueco svg{width:34px;height:34px;stroke:var(--gris2);fill:none;stroke-width:1.6}
.hueco h3{font-size:1.15rem;letter-spacing:-.03em;color:var(--tinta)}
.hueco p{max-width:44ch;line-height:1.55;font-size:.95rem}
.hueco .cta{margin-top:6px}
.error-caja{border:1px solid #F0C4BC;background:#FDECE9;border-radius:14px;padding:16px 18px;
            color:var(--hondo);font-size:.92rem;line-height:1.5;display:flex;gap:11px;align-items:flex-start}
.error-caja svg{width:18px;height:18px;stroke:var(--hondo);fill:none;stroke-width:2;margin-top:2px}

/* ---------- esqueletos mientras llega la respuesta ---------- */
.esq{background:linear-gradient(90deg,var(--hueso) 25%,#EFE7DF 37%,var(--hueso) 63%);
     background-size:400% 100%;animation:brillo 1.4s ease-in-out infinite;border-radius:10px}
@keyframes brillo{0%{background-position:100% 0}100%{background-position:0 0}}
.esq-card{border:1px solid var(--borde);border-radius:18px;overflow:hidden;background:var(--blanco)}
.esq-card .esq-foto{aspect-ratio:16/9;border-radius:0}
.esq-card .esq-cuerpo{padding:17px 18px 18px;display:grid;gap:10px}

/* ---------- ventana modal: entrar, registrarse, dirección ---------- */
.velo{position:fixed;inset:0;z-index:100;background:rgba(28,13,10,.55);backdrop-filter:blur(3px);
      display:grid;place-items:center;padding:20px;overflow-y:auto}
.velo[hidden]{display:none!important}
.modal{background:var(--blanco);border-radius:22px;box-shadow:var(--sombra);width:min(100%,460px);
       padding:30px;position:relative;margin:auto}
.modal h3{font-size:1.5rem;letter-spacing:-.04em}
.modal .sub{margin-top:8px;color:var(--gris);font-size:.94rem;line-height:1.5}
.modal .cerrar{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:10px;
               display:grid;place-items:center}
.modal .cerrar svg{width:16px;height:16px;stroke:var(--gris);fill:none;stroke-width:2.2}
.modal .cerrar:hover{background:var(--hueso)}
.campos{display:grid;gap:13px;margin-top:22px}
.campo-l{display:grid;gap:6px}
.campo-l span{font-size:.82rem;font-weight:700;color:var(--gris)}
.campo-l input,.campo-l select,.campo-l textarea{border:1px solid var(--borde);border-radius:12px;
  padding:13px 14px;background:var(--blanco);color:var(--tinta);font:inherit;width:100%}
.campo-l input:focus,.campo-l select:focus,.campo-l textarea:focus{outline:none;border-color:var(--tomate);
  box-shadow:0 0 0 3px var(--rosa)}
.campo-l textarea{resize:vertical;min-height:76px}
.modal .cta{width:100%;margin-top:20px}
.modal .alterna{margin-top:16px;text-align:center;font-size:.9rem;color:var(--gris)}
.modal .alterna button{color:var(--tomate);font-weight:700}
.pestanas{display:flex;gap:8px;background:var(--hueso);padding:5px;border-radius:13px;margin-top:20px}
.pestanas button{flex:1;padding:10px;border-radius:9px;font-weight:700;font-size:.9rem;color:var(--gris)}
.pestanas button.sel{background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra1)}
.legal-nota{margin-top:14px;font-size:.78rem;color:var(--gris2);line-height:1.5;text-align:center}

/* ---------- entrar con Google ----------
   El bloque nace oculto y sólo se enseña cuando el botón está dibujado de
   verdad. Así, si Google no carga o no hay identificador configurado, no queda
   un hueco vacío ni un separador «o con tu correo» separando una sola cosa. */
.google-hueco{margin-top:18px}
.google-hueco>div:first-child{display:flex;justify-content:center;min-height:44px}
.google-nota{margin:10px 2px 0;font-size:.78rem;color:var(--gris2);line-height:1.5;text-align:center}
.o-bien{display:flex;align-items:center;gap:12px;margin:18px 0 2px;
        font-size:.78rem;font-weight:700;color:var(--gris2);
        text-transform:uppercase;letter-spacing:.08em}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--borde)}

/* ---------- pago ---------- */
.pago-caja{border:1px solid var(--borde);border-radius:14px;padding:16px;margin-top:6px;background:var(--blanco)}
.pago-caja.malo{border-color:#F0C4BC}
/* La pista de debajo del mapa donde se marca el portal. */
.pista-mapa{margin:8px 0 0;font-size:.82rem;color:var(--gris);line-height:1.5}
#mapa-sitio{margin-top:8px}
#mapa-otra{margin-top:8px}

/* Las calles que salen al escribir, como en un mapa.
   Va pegada a la casilla y por encima de todo lo demas: si una sugerencia
   queda tapada por el campo de abajo, la lista no sirve de nada. */
.campo-l{position:relative}
.sugerencias{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;
  background:var(--blanco,#fff);border:1px solid var(--borde);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;max-height:260px;overflow-y:auto}
.sugerencias button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:11px 14px;font:inherit;font-size:.9rem;color:var(--tinta);cursor:pointer;
  border-bottom:1px solid var(--borde)}
.sugerencias button:last-child{border-bottom:0}
.sugerencias button:hover{background:var(--crema,#FAF8F5)}

/* Quien recibe el pedido, cuando no es quien lo paga. Se separa con un recuadro
   propio porque no es un dato mas del formulario: es la persona que va a abrir
   la puerta, y el repartidor llamara a ese numero. */
.regalo{border:1px solid var(--borde);border-radius:13px;padding:14px;margin-top:16px;
  background:var(--crema,#FAF8F5)}
.regalo>b{display:block;font-size:.95rem}
.regalo .sub{font-size:.83rem;color:var(--gris);line-height:1.5}
.regalo .campo-l{margin-top:10px}

/* Anular el pedido, en el seguimiento. El boton solo aparece mientras se puede;
   cuando ya no, el mismo hueco explica por que y a donde acudir. */
.anular{margin-top:22px;border:1px solid var(--borde);border-radius:14px;padding:16px}
.anular button{width:100%;border:1px solid var(--tomate);background:#fff;color:var(--tomate);
  border-radius:13px;padding:13px;font:700 .95rem inherit;cursor:pointer}
.anular button:hover{background:var(--rosa)}
.anular button:disabled{opacity:.55;cursor:default}
.anular p{margin:10px 0 0;font-size:.85rem;color:var(--gris);line-height:1.5}
.anular.bloqueado{background:var(--crema,#FAF8F5)}
.anular.bloqueado p{margin:0}
.anular a{color:var(--tomate)}

/* ---------- Valorar el pedido, cuando ya se ha entregado ----------
   La web no podia valorar: las estrellas de un comercio salian SOLO de los
   clientes que pedian desde el movil. Mismo aspecto que el resto de la ficha:
   un recuadro con borde, sin adornos, y las estrellas grandes para el dedo. */
.valorar{margin-top:22px;border:1px solid var(--borde);border-radius:14px;padding:16px}
.valorar h3{font-size:1.05rem;letter-spacing:-.03em}
.valorar > p{margin:6px 0 0;font-size:.85rem;color:var(--gris);line-height:1.5}
.valorar-fila{margin-top:14px}
.valorar-fila > span{display:block;font-size:.85rem;color:var(--gris);margin-bottom:6px}
.estrellas{display:flex;gap:4px}
.estrellas button{width:40px;height:40px;border-radius:11px;border:1px solid transparent;
  display:grid;place-items:center;color:var(--borde);background:none;cursor:pointer;
  transition:color .12s,transform .1s}
.estrellas button:hover{transform:scale(1.08)}
.estrellas button:focus-visible{outline:2px solid var(--tomate);outline-offset:2px}
.estrellas button.on{color:var(--oro)}
.estrellas svg{width:26px;height:26px;fill:currentColor}
.valorar textarea{width:100%;margin-top:14px;border:1px solid var(--borde);border-radius:12px;
  padding:11px 12px;font:inherit;font-size:.92rem;color:var(--tinta);background:#fff;
  resize:vertical;min-height:74px}
.valorar textarea:focus{outline:0;border-color:var(--tomate);box-shadow:0 0 0 3px var(--rosa)}
.valorar .cta{width:100%;margin-top:14px}
.valorar .cta:disabled{opacity:.55;cursor:default;box-shadow:none}
.valorar.hecha{background:var(--verde-suave);border-color:#CBE7DA}
.valorar.hecha h3{color:var(--verde)}

/* Elegir entre que se lo lleven o pasar a recogerlo, encima del desglose del
   carrito. Va justo ahi porque cambia el desglose: en una recogida no hay
   envio ni suplemento, y eso se tiene que ver donde se decide. */
.modo-entrega{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 22px 12px}
.modo-entrega button{border:1px solid var(--borde);background:#fff;border-radius:13px;
  padding:10px 8px;cursor:pointer;font:600 .88rem/1.25 inherit;color:var(--gris);text-align:center}
.modo-entrega button:hover{border-color:#DFD2C9}
.modo-entrega button small{display:block;font-weight:500;font-size:.75rem;color:var(--gris);margin-top:3px}
.modo-entrega button.sel{border-color:var(--tomate);color:var(--tinta);box-shadow:0 0 0 3px var(--rosa)}

/* Donde hay que ir a recogerlo, en la pantalla de confirmar. */
.donde-recoger{border:1px solid var(--borde);border-radius:13px;padding:12px 14px;margin-top:16px;
  background:var(--crema,#FAF8F5)}
.donde-recoger b{display:block;font-size:.95rem}
.donde-recoger span{display:block;font-size:.85rem;color:var(--gris);margin-top:3px}

.metodos{display:grid;gap:10px;margin-top:16px}
.metodo{display:flex;align-items:center;gap:12px;border:1px solid var(--borde);border-radius:13px;
        padding:14px;cursor:pointer;transition:.15s;text-align:left;width:100%}
.metodo:hover{border-color:#DFD2C9}
.metodo.sel{border-color:var(--tomate);box-shadow:0 0 0 3px var(--rosa)}
.metodo svg{width:22px;height:22px;stroke:var(--tomate);fill:none;stroke-width:1.7}
.metodo b{display:block;font-size:.95rem}
.metodo span{font-size:.83rem;color:var(--gris)}
.metodo .marca-sel{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--borde)}
.metodo.sel .marca-sel{border-color:var(--tomate);background:var(--tomate);
                       box-shadow:inset 0 0 0 3px var(--blanco)}

/* ---------- pedido confirmado ---------- */
.recibo-ok{max-width:560px;margin:0 auto;text-align:center}
.recibo-ok .marca-ok{width:76px;height:76px;border-radius:50%;background:var(--verde-suave);
                     display:grid;place-items:center;margin:0 auto 22px}
.recibo-ok .marca-ok svg{width:36px;height:36px;stroke:var(--verde);fill:none;stroke-width:2.6;
                         stroke-linecap:round;stroke-linejoin:round}
.recibo-ok h2{margin-bottom:12px}
.recibo-ok .codigo{display:inline-block;margin-top:6px;font-family:var(--disp);font-weight:800;
                   font-size:1.9rem;letter-spacing:.08em;background:var(--hueso);border-radius:14px;
                   padding:12px 24px}
.recibo-ok .detalle,
#seguir-cuerpo .detalle{margin-top:26px;border:1px solid var(--borde);border-radius:18px;
                    background:var(--blanco);padding:22px;text-align:left}
.recibo-ok .detalle .f,
#seguir-cuerpo .detalle .f{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
                       font-size:.94rem;color:var(--gris)}
.recibo-ok .detalle .f span:last-child,
#seguir-cuerpo .detalle .f span:last-child{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.recibo-ok .detalle .f.tot,
#seguir-cuerpo .detalle .f.tot{border-top:1px solid var(--borde);margin-top:10px;padding-top:14px;
                           font-family:var(--disp);font-weight:800;font-size:1.1rem;color:var(--tinta)}

/* ---------- cabecera de la ficha del comercio ---------- */
.ficha-cab{background:var(--arena);border-bottom:1px solid var(--borde2);padding:20px 0 34px}
.volver{display:inline-flex;align-items:center;gap:10px;background:var(--blanco);border:1px solid var(--borde);
        border-radius:999px;padding:11px 20px;font-weight:600;font-size:.9rem;box-shadow:var(--sombra1);
        margin-bottom:20px;transition:.15s}
.volver:hover{border-color:var(--tomate);color:var(--tomate)}
.volver svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.ficha-banda{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.ficha-banda .retrato{border-radius:22px;overflow:hidden;box-shadow:var(--sombra);background:var(--hueso)}
.ficha-banda .retrato img{width:100%;height:auto}
.ficha-caja{background:var(--blanco);border:1px solid var(--borde);border-radius:22px;
            box-shadow:var(--sombra1);padding:28px 30px}
.ficha-caja h1{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3vw,2.05rem);
               letter-spacing:-.04em;margin-bottom:5px;line-height:1.05}
.ficha-caja .tipo{color:var(--gris);font-size:.95rem;margin-bottom:14px}
.ficha-caja .chips{display:flex;flex-wrap:wrap;gap:8px}
.ficha-caja .sobre{margin-top:18px;font-size:.95rem;color:var(--gris);line-height:1.6}
@media(max-width:880px){.ficha-banda{grid-template-columns:1fr;gap:22px}
  .ficha-banda .retrato{order:-1}}

/* ---------- barra del pedido en móvil ---------- */
.barra-movil{display:none}
@media(max-width:1050px){
  .barra-movil.on{display:block;position:sticky;bottom:0;z-index:45;background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);border-top:1px solid var(--borde);
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .barra-movil .cta{width:100%;display:flex;align-items:center;justify-content:center;gap:12px}
}

/* ---------------------------------------------------------------------------
   Seguimiento del pedido
   ---------------------------------------------------------------------------
   La pantalla de «por dónde va». Se mira de pie, en el pasillo, esperando el
   telefonillo: todo grande y sin nada que leer dos veces.                    */

.seguir-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.seguir-cab h2 { margin: 4px 0 6px; font-size: 30px; }

/* El código de entrega. Es lo que el cliente tiene que leer en voz alta en la
   puerta, así que va grande, monoespaciado y separado: se dicta sin equivocarse. */
.codigo-entrega {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--crema);
  text-align: center;
}
.codigo-entrega > span:first-child {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris);
}
.codigo-entrega b {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 30px;
  letter-spacing: .18em;
  color: var(--tomate);
}
.codigo-entrega .pista { font-size: 12px; color: var(--gris); }

/* Los cuatro pasos. Una línea, no una lista: el pedido avanza hacia la derecha
   y eso se entiende sin leer.                                                */
.pasos {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}
.paso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--gris);
}
.paso .bola {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(42, 21, 18, .16);
  flex: none;
}
.paso.hecho { color: var(--tinta); }
.paso.hecho .bola { background: var(--verde); }
.paso.ahora { color: var(--tomate); font-weight: 700; }
.paso.ahora .bola {
  background: var(--tomate);
  box-shadow: 0 0 0 5px rgba(217, 38, 16, .18);
  animation: latir 1.8s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 38, 16, .16); }
  50%      { box-shadow: 0 0 0 9px rgba(217, 38, 16, .06); }
}
@media (prefers-reduced-motion: reduce) {
  .paso.ahora .bola { animation: none; }
}
.pasos .union {
  flex: 1 1 18px;
  height: 2px;
  min-width: 16px;
  background: rgba(42, 21, 18, .12);
  border-radius: 2px;
}

.seguir-mapa {
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--borde);
}

.seguir-nota {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.seguir-nota .pista {
  display: block;
  font-size: 12px;
  color: var(--gris);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .seguir-cab h2 { font-size: 24px; }
  .codigo-entrega { width: 100%; }
}

/* ---------------------------------------------------------------------------
   ALERGENOS Y EL PUNTO QUE LATE
   Anadido el 11-09-2026. Ver AUDITORIA-2026-09-11.
   --------------------------------------------------------------------------- */

/* La linea de alergenos de un plato. Discreta, pero siempre visible: en venta
   a distancia tiene que estar antes de que el cliente cierre el pedido. */
.plato .alerg{
  margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--gris);
}
.plato .alerg b{color:var(--tinta); font-weight:700}
.plato .alerg i{font-style:normal; color:var(--oro-ink)}
.plato .alerg-duda{
  background:var(--oro-suave); border-radius:7px; padding:5px 8px;
  border:1px solid #F0D79A;
}
/* Este texto NO puede costar leerlo: es el aviso de alérgenos. El gris claro
   daba 3,6:1 de contraste, por debajo del 4,5:1 que exige la norma. */
.plato .alerg-nd{color:var(--gris)}
.plato .alerg-no{color:var(--verde)}

/* El marcador del repartidor. Late porque es el que se mueve. */
.marca-late{ animation:latido-mapa 1.9s ease-in-out infinite; }
.marca-late::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--late, #1f4fb0);
  animation:onda-mapa 1.9s ease-out infinite;
}
@keyframes latido-mapa{
  0%,100%{ transform:translate(-50%,-50%) scale(1) }
  50%    { transform:translate(-50%,-50%) scale(1.18) }
}
@keyframes onda-mapa{
  0%  { opacity:.55; transform:scale(1) }
  100%{ opacity:0;   transform:scale(2.6) }
}
@media (prefers-reduced-motion: reduce){
  .marca-late, .marca-late::after{ animation:none }
  .marca-late::after{ opacity:.4 }
}