/* gusto: botones en píldora con brillo, campos en píldora, contacto flotante siempre a la vista */
.boton, .barra__pedido, .agregar, .tip__ir, .pildora, .wa-flotante, .chip, .cant, .rubro,
.barra__buscar input, .buscador input, .orden select, .campo input, .campo textarea { border-radius: 999px; }
.campo textarea { border-radius: 24px; }
.agregar, .tip__ir { padding-inline: 20px; }
.brilla { position: relative; overflow: hidden; isolation: isolate; }
.brilla::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-18deg); animation: brilla 2.6s linear infinite; }
@keyframes brilla { from { left: -60%; } to { left: 130%; } }
.wa-flotante.brilla { animation: late 2.8s ease-in-out infinite; }
@keyframes late { 0%, 100% { box-shadow: 0 8px 22px rgba(35, 35, 35, .25), 0 0 0 0 rgba(64, 120, 40, .32); } 50% { box-shadow: 0 8px 22px rgba(35, 35, 35, .25), 0 0 0 10px rgba(64, 120, 40, 0); } }
.wa-flotante { position: fixed; z-index: 24; right: clamp(12px, 2vw, 28px); bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 0 20px 0 16px; border-radius: 999px; background: var(--rojo-fuerte); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 26px rgba(35, 35, 35, .28); transition: bottom .35s var(--curva); }
@media (prefers-reduced-motion: reduce) { .brilla::after, .wa-flotante.brilla { animation: none; } }
/* campos, botones al color, tarjetas parejas */
.orden select, .guia-viv__campo select { appearance: none; -webkit-appearance: none; padding: 0 46px 0 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px; }
.agregar, .tip__ir, .boton--borde { border-color: var(--rojo-fuerte); color: var(--rojo-fuerte); }
.agregar:hover, .tip__ir:hover, .boton--borde:hover { background: var(--rojo-fuerte); color: #fff; }
.cant { background: var(--rojo-fuerte); border-color: var(--rojo-fuerte); }
.tarjeta__pie { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
.tarjeta__precio { min-height: 1.5em; }
.tarjeta__pie .agregar, .tarjeta__pie .vari__sin { width: 100%; text-align: center; }
.tarjeta__pie .cant { width: 100%; grid-template-columns: 44px 1fr 44px; }
.pie .boton--borde, .barra .boton--borde { color: inherit; }

/* cómo pedir: panel oscuro con tres pasos */
.como--banda { position: relative; overflow: hidden; margin: 0 clamp(12px, 3vw, 40px); border-radius: clamp(28px, 4vw, 48px); background: var(--rojo-fuerte); color: #fff;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 72px); isolation: isolate; }
.como--banda::before, .como--banda::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 0 70% 0 70%; background: rgba(255, 255, 255, .06); animation: gira 60s linear infinite; }
.como--banda::before { top: -200px; right: -120px; }
.como--banda::after { bottom: -240px; left: -160px; animation-direction: reverse; background: rgba(0, 0, 0, .1); }
@keyframes gira { to { transform: rotate(360deg); } }
.como__cab { max-width: 640px; margin: 0 0 clamp(28px, 4vw, 48px); }
.como--banda .rotulo { color: rgba(255, 255, 255, .78); }
.como--banda .titulo-sec { color: #fff; }
.como--banda .como__lista { margin: 0; counter-reset: paso; }
.como--banda .como__lista li { position: relative; padding: 28px 26px 30px; border-radius: 28px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2);
  transition: transform .35s var(--curva), background .35s var(--curva); }
.como--banda .como__lista li:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .15); }
.como__ico { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 20px; border-radius: 50%; background: #fff; color: var(--rojo-fuerte); }
.como__ico svg { width: 30px; height: 30px; }
.como__paso { display: block; margin-bottom: 6px; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.como--banda .como__lista h3 { color: #fff; font-size: 1.6rem; }
.como--banda .como__lista p { color: rgba(255, 255, 255, .88); }
.como__flecha { display: none; }
@media (min-width: 901px) {
  .como__flecha { display: grid; place-items: center; position: absolute; z-index: 2; top: 50%; right: calc(clamp(24px, 4vw, 56px) / -2 - 15px); width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: #fff; color: var(--rojo-fuerte); animation: empuja 1.6s ease-in-out infinite; }
  .como__flecha svg { width: 16px; height: 16px; }
  .como__lista li:last-child .como__flecha { display: none; }
}
@keyframes empuja { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@media (max-width: 900px) { .como--banda .como__lista { grid-template-columns: 1fr; } }

/* fondo con vida: manchas de color que derivan despacio detrás de todo */
.fondo-vivo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fondo-vivo i { position: absolute; width: 52vmax; height: 52vmax; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.fondo-vivo i:nth-child(1) { top: -18vmax; left: -14vmax; background: color-mix(in srgb, var(--rojo) 24%, transparent); animation: deriva1 38s ease-in-out infinite alternate; }
.fondo-vivo i:nth-child(2) { bottom: -22vmax; right: -16vmax; background: color-mix(in srgb, var(--acento2, #B04830) 20%, transparent); animation: deriva2 46s ease-in-out infinite alternate; }
.fondo-vivo i:nth-child(3) { top: 30vh; left: 38vw; width: 34vmax; height: 34vmax; background: color-mix(in srgb, var(--rojo) 14%, transparent); animation: deriva3 52s ease-in-out infinite alternate; }
@keyframes deriva1 { to { transform: translate(24vmax, 18vmax) scale(1.2); } }
@keyframes deriva2 { to { transform: translate(-26vmax, -14vmax) scale(1.15); } }
@keyframes deriva3 { to { transform: translate(-22vmax, 20vmax) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .fondo-vivo i, .como--banda::before, .como--banda::after, .como__flecha { animation: none; } }
.intro__logo { aspect-ratio: 512 / 192; width: min(64vw, 420px); }
.intro__logo img { object-fit: contain; }
:root { --acento2: #B04830; }