/* Efectos visuales (solo estética). Criterio Apple: nada se mueve solo; lo que se mueve
   responde a lo que tocás, con física suave (resortes sin rebote exagerado).
   Si el celular tiene "reducir movimiento", se apaga todo (al final del archivo). */
:root{--ios:cubic-bezier(.32,.72,0,1);--resorte:cubic-bezier(.34,1.3,.64,1)}

/* ---- tocar: el botón se hunde apenas y vuelve con resorte ---- */
.op,.chip,.seccion,.cat-card,.pedir,.barra button,.btn-g,.fondo,.club,.subir,.subir-comp,[data-estilo],[data-dib]{
  transition:transform .5s var(--resorte),background-color .25s var(--ios),border-color .25s var(--ios),box-shadow .35s var(--ios),color .25s;
  -webkit-tap-highlight-color:transparent}
.op:active,.chip:active,.seccion:active,.cat-card:active,.barra button:active,.btn-g:active,.fondo:active,.club:active,[data-estilo]:active,[data-dib]:active{
  transform:scale(.95);transition-duration:.1s}
.pedir:not(:disabled):active,.subir:active,.subir-comp:active{transform:scale(.98);transition-duration:.1s}

/* ---- lo elegido: un halo coral que se asienta (sin destellos) ---- */
.op.on,.club.on,[data-estilo].on,.cat-card.on{box-shadow:0 0 0 4px rgba(255,91,94,.14),0 10px 22px -14px rgba(226,71,76,.55)}

/* ---- precio: los números cambian como en el iPhone (suben y se enfocan) ---- */
.cambia{display:inline-block;animation:numero .45s var(--ios)}
@keyframes numero{from{opacity:0;transform:translateY(.45em);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

/* ---- vidrio como iOS: barra de abajo, cartelito y fondo de las ventanas ---- */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (max-width:860px){
    .barra{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);
      border-top:.5px solid rgba(74,33,72,.08);box-shadow:none}
  }
  .velo,.velo-g{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .toast{background:rgba(74,33,72,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}

/* ---- ventanas: suben como las hojas del iPhone ---- */
.velo.on>.ventana,.velo-g:not([hidden])>.ventana-g{animation:hoja .55s var(--ios)}
.velo.on,.velo-g:not([hidden]){animation:velo .3s var(--ios)}
@keyframes hoja{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
@keyframes velo{from{opacity:0}to{opacity:1}}
.toast{transition:transform .5s var(--ios),opacity .3s var(--ios)}

/* ---- al abrir la página: todo aparece enfocándose, una sola vez ---- */
.hero,.secciones{animation:enfoca .8s var(--ios) both}
.secciones{animation-delay:.06s}
@keyframes enfoca{from{opacity:0;filter:blur(10px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}

/* ---- foco visible con teclado ---- */
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* ---- "reducir movimiento": sin animaciones ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ---- aire en el encabezado (título, texto y cartelitos estaban pegados) ---- */
.secciones{margin-bottom:30px}
.hero{margin-top:0;margin-bottom:30px}
.hero h1{line-height:1.3;padding-top:.1em}
.hero p{margin-top:16px;line-height:1.5}
.hero .iconos{margin-top:22px}
@media (max-width:860px){ .secciones{margin-bottom:22px} .hero{margin-bottom:22px} .hero h1{line-height:2.05} .hero p{margin-top:12px} .hero .iconos{margin-top:16px} }