/* ============================================================
   BLOQUE DE ENTREGA Y PEDIDOS · rediseñado
   ============================================================ */
.duo--pedidos{gap:clamp(30px, 4vw, 56px); align-items:start}
.lede--corta{margin-top:12px; max-width:44ch}

/* ---------- las apps, protagonistas ---------- */
.apps--tarjetas{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;margin:30px 0 0}

.appx{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;padding:32px 18px 26px;border-radius:22px;text-decoration:none;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--marca) 82%, #fff),
    var(--marca) 58%,
    color-mix(in srgb, var(--marca) 82%, #000));
  color:var(--tinta);
  box-shadow:0 18px 38px -20px var(--marca), 0 2px 6px -2px rgba(30,15,5,.22);
  transition:transform .26s cubic-bezier(.22,.9,.28,1), box-shadow .26s}
/* brillo suave desde arriba, como en las tarjetas de la web */
.appx::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,.30), transparent 62%)}

.appx__logo{width:80px;height:80px;border-radius:26px;display:grid;place-items:center;
  background:rgba(255,255,255,.20);position:relative}
/* halo que late detrás del logotipo: más visible, y en las tres tarjetas por igual */
.appx__logo::after{content:'';position:absolute;inset:-10px;border-radius:34px;
  border:2.5px solid rgba(255,255,255,.55);animation:appxPulso 2.4s ease-out infinite}
.appx:nth-child(1) .appx__logo::after{animation-delay:0s}
.appx:nth-child(2) .appx__logo::after{animation-delay:.8s}
.appx:nth-child(3) .appx__logo::after{animation-delay:1.6s}
@keyframes appxPulso{
  0%{transform:scale(.9);opacity:.95}
  70%,100%{transform:scale(1.34);opacity:0}}
.appx__logo svg{width:45px;height:45px}
.appx__sigla{font-weight:800;font-size:1.7rem;letter-spacing:.02em}

.appx__n{font-size:1.42rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;text-align:center}

.appx__cta{margin-top:2px;display:inline-flex;align-items:center;gap:8px;
  font-size:.87rem;font-weight:700;padding:10px 20px;border-radius:999px;
  background:rgba(255,255,255,.20);transition:background .24s, gap .24s}
.appx__cta svg{width:15px;height:15px;transition:transform .24s}

.appx:hover{transform:translateY(-6px);
  box-shadow:0 32px 54px -22px var(--marca), 0 3px 9px -3px rgba(30,15,5,.28)}
.appx:hover .appx__cta{background:rgba(255,255,255,.36);gap:11px}
.appx:hover .appx__cta svg{transform:translateX(2px)}
.appx:focus-visible{outline:3px solid var(--marca);outline-offset:3px}

/* sin enlace configurado todavía: misma tarjeta a todo color, solo que aún no lleva a ningún sitio */
.appx--vacia{pointer-events:none; cursor:default;
  box-shadow:0 14px 30px -22px var(--marca), 0 2px 6px -2px rgba(30,15,5,.18)}
.appx--vacia .appx__cta{background:rgba(255,255,255,.16)}

.entrega__notas{margin-top:20px;display:grid;gap:9px}
.entrega__notas .entrega__nota{margin-top:0}
.entrega__nota{margin-top:20px;font-size:.87rem;line-height:1.6;color:var(--pm);max-width:46ch;
  display:flex;align-items:flex-start;gap:9px}
.entrega__nota::before{content:'';width:7px;height:7px;border-radius:50%;background:#25D366;
  flex:0 0 auto;margin-top:7px}
.entrega .btn{margin-top:20px}

@media (prefers-reduced-motion: reduce){
  .appx__logo::after{animation:none;opacity:0}
}

/* ---------- pedidos personalizados: lista vertical, un punto debajo del otro ---------- */
.pasos-encargo{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column}
.paso-encargo{display:flex; gap:15px; padding:18px 0; align-items:flex-start;
  border-top:1px solid color-mix(in srgb, var(--acc) 20%, transparent)}
.paso-encargo:first-child{border-top:none; padding-top:0}
/* El número, perfectamente centrado en su círculo.
   Antes lo pisaba la regla de las descripciones (.paso-encargo span, más
   específica): le quitaba el centrado, el line-height y hasta el color.
   Por eso «no había manera» de centrarlo. Ahora el número gana siempre
   y la regla de las descripciones solo alcanza a los textos del div. */
.paso-encargo .paso-encargo__n{width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  padding:0; margin:1px 0 0; box-sizing:border-box;
  font-size:.82rem; font-weight:800; color:#1A1008; line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  letter-spacing:0; text-indent:0;
  background:linear-gradient(145deg,
    var(--oro-luz) 0%,
    color-mix(in srgb, var(--oro-luz) 50%, var(--oro)) 30%,
    var(--oro) 62%,
    var(--oro-med) 100%);
  border:1px solid color-mix(in srgb, var(--oro-med) 55%, transparent);
  box-shadow:0 4px 10px -4px color-mix(in srgb, var(--oro) 75%, transparent),
             inset 0 1px 0 rgba(255,255,255,.45)}
.paso-encargo strong{display:block; font-size:1rem; line-height:1.3; margin-bottom:5px}
.paso-encargo div span{display:block; font-size:.87rem; line-height:1.6; color:var(--pm)}

.perso__cierre{margin-top:22px; padding:15px 17px; border-radius:14px;
  background:color-mix(in srgb, var(--pan-b) 70%, transparent);
  border:1px dashed color-mix(in srgb, var(--acc) 26%, transparent);
  font-size:.9rem; line-height:1.6; color:var(--pm)}
.perso .btn{margin-top:20px}

@media(max-width:560px){
  .paso-encargo{padding:15px 0; gap:12px}
}
@media(max-width:560px){
  .apps--tarjetas{grid-template-columns:1fr 1fr; gap:12px}
  .appx{padding:24px 12px 20px; gap:12px; border-radius:18px}
  .appx__logo{width:62px; height:62px; border-radius:20px}
  .appx__logo svg{width:35px; height:35px}
  .appx__n{font-size:1.1rem}
  .appx__cta{font-size:.8rem; padding:10px 15px; min-height:44px}
}
@media(max-width:360px){
  .apps--tarjetas{grid-template-columns:1fr}
}

/* ============================================================
   TELÉFONO · legibilidad y tamaño para el dedo
   La mayoría de la gente entra desde el móvil: aquí mandan
   los textos que se leen sin forzar la vista y los botones
   que se tocan sin fallar.
   ============================================================ */
@media (max-width: 900px) {

  /* --- ningún texto por debajo de lo legible --- */
  .eyebrow, .oferta__tag, .ofertas__nota, .promo__code, .tag, .card__meta,
  .legal, .legal__pol, .visor__ayuda, .chip, .paso__n, .app__t span,
  .info__k, .dato__k, small{
    font-size:.8rem !important;      /* ≈12.8 px */
    letter-spacing:.06em;
  }
  .eyebrow{letter-spacing:.14em}
  body{font-size:16px}
  p, li{font-size:1rem; line-height:1.65}
  .shell p, .shell li{font-size:.98rem}

  /* --- todo lo que se toca, cómodo de tocar --- */
  .btn, .app, .rail__btn, .arrow, .tab, .drawer a, .nav a,
  .world__sw button, .lang a, .social{
    min-height:46px;
  }
  .btn{padding:13px 20px; font-size:.94rem}
  .btn--ghost{padding:12px 19px}
  .brand{min-height:46px; padding:4px 0}
  .legal__pol a{display:inline-block; padding:7px 2px; min-height:36px}
  .lang a, .lang button{padding:10px 9px; min-height:44px; display:inline-flex; align-items:center}
  /* los enlaces del pie y de contacto, tocables */
  footer a, .dato a, .info a, .visitanos a{display:inline-flex; align-items:center; min-height:44px}
  .drawer a, .menu-lista a{min-height:48px; display:flex; align-items:center}
  .hamb{width:48px; height:48px}
  .arrow{width:44px; height:44px}
  /* cualquier botón o enlace suelto que se quedara corto */
  /* Área táctil cómoda en el móvil. Se dejan fuera las casillas del
     calendario y las horas: viven dentro de una rejilla de 7 columnas y,
     si se les impone 44 px de alto, «aspect-ratio» las hace también de
     44 px de ancho — más anchas que su columna — y se montan unas sobre
     otras. Ellas se ajustan solas al ancho que les toca. */
  .shell button:not(.cw__x):not(.arrow):not(.day):not(.slot), .shell a.btn, footer a{min-height:44px}

  /* --- el chat, con márgenes de dedo --- */
  .cw__x{width:40px; height:40px}
  .cw__msg{font-size:.92rem}
  .cw__datos p{font-size:.8rem}
  .cw__quien small{font-size:.79rem}
  .cw__prod span{font-size:.82rem}
  .ticker__track span, .ticker__i{font-size:.82rem}
  .ticker{padding-block:11px}
  .rail__cta, .ver-todo{min-height:44px; display:inline-flex; align-items:center}
  .cw__adj{width:42px; height:42px}
  .cw__form button[type=submit]{width:44px; height:44px}
  .cw__par input, .cw__form input{padding:12px 15px}
  .cw__wa{padding:15px; min-height:50px}

  /* --- aviso de cookies: barra baja y compacta --- */
  .ck{left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom,0px));
      padding:14px 16px; border-radius:16px}
  .ck__txt b{font-size:.9rem}
  .ck__txt span{font-size:.79rem; line-height:1.5}
  .ck__bot{flex-direction:row; margin-top:12px; gap:8px}
  .ck__bot .btn{padding:11px 10px; font-size:.82rem; min-height:44px}
  /* con el aviso abierto, la burbuja del chat sube para no taparse */
  body:has(.ck--on) .cw-fab{bottom:calc(150px + env(safe-area-inset-bottom,0px))}

  /* --- tarjetas del catálogo: dos por pantalla se leen mal --- */
  .card__body{padding:15px 16px 17px}
  .card__t{font-size:1rem; line-height:1.3}
  .card__d{font-size:.86rem; line-height:1.55}
  .price{font-size:1.15rem}

  /* --- las ofertas, una a una y con aire --- */
  .oferta{padding:18px 18px 20px}
  .oferta__n{font-size:2rem}

  /* --- reserva de cita: pasos más cómodos --- */
  .paso{padding:18px 16px}
  .slot{min-height:46px; font-size:.92rem}
  .cal td button{min-height:42px; font-size:.95rem}
  .opt{min-height:52px; padding:14px 16px}
  input, select, textarea{font-size:16px !important; padding:13px 15px}

  /* --- el visor de producto ocupa la pantalla --- */
  .visor__texto h3{font-size:1.35rem}
  .visor__texto p{font-size:.95rem}
  .visor__pie .btn{min-height:50px; font-size:1rem}
  .visor__f{width:42px; height:42px}
}

/* --- teléfonos estrechos --- */
@media (max-width: 380px) {
  .wrap{padding-left:14px; padding-right:14px}
  .shell{padding:22px 16px}
  h1, .hero__t{font-size:1.85rem; line-height:1.15}
  h2{font-size:1.4rem}
  .btn{padding:12px 16px; font-size:.9rem}
  .brand span{font-size:.98rem}
  .ck__bot{flex-direction:column-reverse}
}

/* --- que nada se salga nunca a lo ancho --- */
html, body{max-width:100%; overflow-x:hidden}
img, video, iframe, table{max-width:100%}
h1, h2, h3, p, li, a{overflow-wrap:anywhere}

/* --- respeta a quien prefiere menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---- iconos y logotipos: nítidos, sin difuminar al escalar ----
   El logotipo es vectorial (SVG), así que ya sale limpio a cualquier tamaño.
   Estas reglas son para las copias en PNG cuando el navegador las reduce. */
img.favicon, .icon-pixelated{
  image-rendering:-webkit-optimize-contrast;   /* Safari y Chrome antiguos */
  image-rendering:crisp-edges;                 /* navegadores antiguos */
  image-rendering:pixelated;                   /* estándar moderno */
}
/* El logotipo de la cabecera se sirve en SVG: nunca pierde definición */
.marca__logo, .pie__logo{ image-rendering:auto }