/* ============================================================
   PERFIL ORÍGENES MORQUECHO · diseño propio de heladería
   Paleta del manual: #005187 · #4d82bc · #84b6f4 · #c4dafa · #fcffff
   ============================================================ */
:root{
  --azul:#005187; --azul-hondo:#003c66; --medio:#4d82bc; --cielo:#84b6f4; --hielo:#c4dafa; --nieve:#fcffff;
  --fondo:#eef5fd; --tinta:#0c2c47; --suave:#4f6b85;
  --verde:#1c9d5b; --rojo:#c2473d; --oro:#f7b500;
  --titulo:'Fredoka',system-ui,sans-serif; --texto:'Montserrat',system-ui,sans-serif;
  --sombra:0 10px 30px -12px rgba(0,60,102,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--fondo);color:var(--tinta);font-family:var(--texto);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%} ul{list-style:none} svg{display:block}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.app{max-width:480px;margin:0 auto;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
:focus-visible{outline:3px solid var(--cielo);outline-offset:3px}

/* entrada escalonada */
.sube{animation:sube .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes sube{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ================= cabecera que se derrite ================= */
.cabecera{position:relative;background:radial-gradient(120% 90% at 50% 0%,#0a6aa8 0%,var(--azul) 55%,var(--azul-hondo) 100%);
  color:#fff;text-align:center;padding:calc(18px + env(safe-area-inset-top)) 12px 16px;margin-bottom:70px}
.derrite{position:absolute;left:0;right:0;top:calc(100% - 1px);width:100%;height:64px;fill:var(--azul-hondo)}
.gota{position:absolute;top:100%;width:9px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--azul-hondo);
  opacity:0;animation:gota 5.5s ease-in infinite}
.gota.g1{left:78.5%;margin-top:50px;animation-delay:1.2s}
.gota.g2{left:18.200%;margin-top:55px;animation-delay:3.4s}
.gota.g3{left:51.500%;margin-top:42px;animation-delay:4.6s}
@keyframes gota{0%{opacity:0;transform:translateY(-6px) scale(.4)}12%{opacity:1;transform:translateY(0) scale(1)}
  40%{opacity:1;transform:translateY(22px) scale(1)}55%,100%{opacity:0;transform:translateY(34px) scale(.5)}}

.chispas{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.chispas i,.salta{position:absolute;width:16px;height:6px;border-radius:6px;transform:rotate(var(--r,0deg))}
.chispas i{animation:flota 6s ease-in-out infinite;animation-delay:var(--d,0s);opacity:.85}
.c0{background:var(--cielo)} .c1{background:var(--hielo)} .c2{background:#fff} .c3{background:var(--medio)}
@keyframes flota{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(calc(var(--r) + 28deg))}}

.medalla{position:relative;display:block;width:min(236px,64vw);aspect-ratio:1;margin:0 auto;border-radius:50%}
.medalla img{position:absolute;inset:17.500%;width:65%;height:65%;border-radius:50%;
  box-shadow:0 0 0 6px rgba(255,255,255,.14),0 18px 36px -10px rgba(0,20,45,.6);animation:mece 5s ease-in-out infinite}
@keyframes mece{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.medalla.brinca img{animation:brinca .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes brinca{0%{transform:scale(1)}35%{transform:scale(.93)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.aro{position:absolute;inset:0;width:100%;height:100%;animation:gira 46s linear infinite}
.aro text{font:600 11.500px var(--texto);letter-spacing:.2em;fill:var(--hielo)}
@keyframes gira{to{transform:rotate(360deg)}}
.salta{left:50%;top:50%;margin:-3px 0 0 -8px;animation:salta 1.100s cubic-bezier(.15,.7,.3,1) both;animation-delay:var(--d,0s);pointer-events:none}
@keyframes salta{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}15%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1)}}

.giros,.zona{position:relative;z-index:1}
.giros{display:flex;justify-content:center;gap:6px;margin-top:4px}
.giros li{display:flex;align-items:center;gap:5px;padding:6px 10px 6px 8px;border-radius:99px;background:rgba(255,255,255,.12);white-space:nowrap;
  border:1px solid rgba(255,255,255,.22);font:600 11.500px var(--texto)}
.giros svg{width:15px;height:15px;color:var(--hielo)}
.zona{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:12px;font-size:12.500px;font-weight:500;color:var(--hielo);letter-spacing:.04em}
.zona svg{width:14px;height:14px}

/* ================= títulos de sección ================= */
section{padding:0 16px;margin-top:34px}
section h2{font:700 25px/1.1 var(--titulo);color:var(--azul);letter-spacing:-.01em}
section h2 small{display:block;font:600 11px var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--medio);margin-bottom:6px}

/* ================= sucursales ================= */
.sucursales{margin-top:0}
.bolas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.bola{position:relative;display:flex;align-items:center;gap:9px;min-height:62px;padding:9px 12px 9px 9px;border-radius:20px;text-align:left;
  background:var(--nieve);border:2px solid transparent;box-shadow:0 4px 14px -8px rgba(0,60,102,.4);transition:transform .2s,background .25s,color .25s,border-color .25s}
.bola:active{transform:scale(.96)}
.bola .helado{flex:none;width:38px;height:38px;transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.bola .helado svg{width:100%;height:100%}
.b0 .helado{color:var(--azul)} .b1 .helado{color:var(--cielo)} .b2 .helado{color:var(--medio)} .b3 .helado{color:#9cc4f6}
.bola .txt{min-width:0}
.bola b{display:block;font:600 16px/1.15 var(--titulo)}
.bola small{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11.500px;font-weight:600;color:var(--suave)}
.bola small i,.estado i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.bola small.si{color:var(--verde)} .bola small.no{color:var(--rojo)}
.bola.activa{background:var(--azul);color:#fff;border-color:var(--cielo);box-shadow:0 12px 22px -12px rgba(0,60,102,.8)}
.bola.activa .helado{color:#fff;transform:rotate(-12deg) scale(1.12)}
.bola.activa small.si{color:#8ff0bb} .bola.activa small.no{color:#ffc2bb}

.tarjeta{margin-top:14px;border-radius:26px;background:var(--nieve);box-shadow:var(--sombra);overflow:hidden}
.tarjeta.cambia{animation:cambia .45s cubic-bezier(.2,.8,.2,1)}
@keyframes cambia{from{opacity:.2;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.portada{position:relative}
.fotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/3;background:var(--hielo)}
.fotos::-webkit-scrollbar{display:none}
.fotos img{flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.fotos.sin{flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16/10;color:var(--hielo);
  background:radial-gradient(circle at 20% 20%,rgba(132,182,244,.35) 0 9%,transparent 10%),radial-gradient(circle at 82% 70%,rgba(132,182,244,.3) 0 13%,transparent 14%),
  radial-gradient(circle at 70% 12%,rgba(196,218,250,.22) 0 6%,transparent 7%),linear-gradient(140deg,#0a6aa8,var(--azul-hondo))}
.fotos.sin img{width:auto;height:56%;flex:none;object-fit:contain}
.fotos.sin span{font:600 10.500px var(--texto);letter-spacing:.22em;text-transform:uppercase}
.puntos{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.puntos i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:.25s}
.puntos i.on{width:20px;border-radius:7px;background:#fff}
.estado{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border-radius:99px;
  background:rgba(255,255,255,.94);font-size:12px;font-weight:500;color:var(--tinta);box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.estado.si i{color:var(--verde);box-shadow:0 0 0 0 rgba(28,157,91,.6);animation:late 1.800s ease-out infinite} .estado.no i{color:var(--rojo)}
.estado.si b{color:var(--verde)} .estado.no b{color:var(--rojo)}
@keyframes late{to{box-shadow:0 0 0 8px rgba(28,157,91,0)}}

.cuerpo{padding:18px 16px 18px}
.cuerpo h3{font:700 28px/1.05 var(--titulo);color:var(--azul)}
.cuerpo h3 small{display:block;font:600 11px var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--medio);margin-bottom:3px}
.donde{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:13px;font-weight:500;color:var(--suave)}
.donde svg{width:14px;height:14px;color:var(--medio)}
.horario{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--fondo)}
.horario li{display:flex;align-items:baseline;gap:8px;font-size:13.500px}
.horario li + li{margin-top:6px}
.horario i{flex:1;border-bottom:2px dotted var(--hielo);transform:translateY(-3px)}
.horario b{font-weight:600;white-space:nowrap}
.horario .descanso{color:var(--suave)} .horario .descanso b{color:var(--rojo);font-weight:600}

.wa{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;border-radius:18px;background:var(--azul);color:#fff;
  box-shadow:0 12px 20px -12px rgba(0,60,102,.9);transition:transform .2s}
.wa:active{transform:scale(.97)}
.wa > svg:first-child{flex:none;width:30px;height:30px}
.wa span{flex:1;min-width:0} .wa b{display:block;font:600 16px/1.2 var(--titulo)} .wa small{font-size:12.500px;color:var(--hielo);letter-spacing:.04em}
.wa > svg:last-child{flex:none;width:18px;height:18px;color:var(--cielo)}
.redondos{display:flex;justify-content:space-around;gap:6px;margin-top:16px}
.red{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;font-size:11.500px;font-weight:600;color:var(--suave)}
.red span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--hielo);color:var(--azul);transition:transform .25s cubic-bezier(.3,1.7,.5,1),background .2s}
.red svg{width:24px;height:24px}
.red:active span{transform:scale(.88);background:var(--cielo)}
.red b{font-weight:600}

/* ================= reseñas ================= */
.resenas{margin:34px 16px 0;padding:22px 16px 16px;border-radius:26px;color:#fff;
  background:radial-gradient(circle at 92% 6%,rgba(132,182,244,.35) 0 16%,transparent 17%),radial-gradient(circle at 4% 96%,rgba(132,182,244,.2) 0 20%,transparent 21%),linear-gradient(150deg,#0a6aa8,var(--azul-hondo));
  box-shadow:var(--sombra)}
.resenas .tit{display:flex;align-items:center;gap:10px}
.resenas .tit svg{flex:none;width:38px;height:38px;padding:7px;border-radius:50%;background:#fff}
.resenas h2{color:#fff;font-size:23px}
.resenas p{margin-top:8px;font-size:13.500px;color:var(--hielo)}
.filas{display:grid;gap:9px;margin-top:16px}
.fila{display:flex;align-items:center;gap:8px;padding:12px 10px 12px 14px;border-radius:16px;background:var(--nieve);color:var(--tinta);transition:transform .2s}
.fila:active{transform:scale(.97)}
.fila .nom{flex:1;min-width:0}
.fila small{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--medio)}
.fila b{font:600 17px/1.15 var(--titulo);color:var(--azul)}
.fila em{display:none;margin-left:7px;padding:2px 8px;border-radius:99px;background:var(--azul);color:#fff;font:600 9px var(--texto);font-style:normal;letter-spacing:.08em;white-space:nowrap}
.fila.aqui{box-shadow:0 0 0 3px var(--cielo)} .fila.aqui em{display:inline-block}
.estrellas{display:flex;gap:1px;flex:none}
.estrellas svg{width:17px;height:17px;fill:#d7e3f2;transition:fill .3s,transform .4s cubic-bezier(.3,1.8,.5,1)}
.visto .estrellas svg{fill:var(--oro);transform:scale(1)}
.resenas:not(.visto) .estrellas svg{transform:scale(.6)}
.estrellas svg:nth-child(2){transition-delay:.08s}.estrellas svg:nth-child(3){transition-delay:.16s}.estrellas svg:nth-child(4){transition-delay:.24s}.estrellas svg:nth-child(5){transition-delay:.32s}
.fila:nth-child(2) .estrellas svg{transition-delay:.2s}.fila:nth-child(2) .estrellas svg:nth-child(n+2){transition-delay:.3s}.fila:nth-child(2) .estrellas svg:nth-child(n+4){transition-delay:.45s}
.fila:nth-child(3) .estrellas svg{transition-delay:.4s}.fila:nth-child(3) .estrellas svg:nth-child(n+2){transition-delay:.5s}.fila:nth-child(3) .estrellas svg:nth-child(n+4){transition-delay:.65s}
.fila:nth-child(4) .estrellas svg{transition-delay:.6s}.fila:nth-child(4) .estrellas svg:nth-child(n+2){transition-delay:.7s}.fila:nth-child(4) .estrellas svg:nth-child(n+4){transition-delay:.85s}
.fila .flecha{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--azul);color:#fff}
.fila .flecha svg{width:14px;height:14px}

/* ================= antojos ================= */
.antojos{padding:0}
.antojos h2{padding:0 16px}
.carrete{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 16px 22px;scroll-padding:0 16px}
.carrete::-webkit-scrollbar{display:none}
.antojo{position:relative;flex:none;width:62%;max-width:250px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;scroll-snap-align:start;
  background:var(--hielo);box-shadow:0 14px 22px -14px rgba(0,60,102,.7);transition:transform .25s}
.antojo:nth-child(odd){transform:rotate(-1.200deg)} .antojo:nth-child(even){transform:rotate(1.200deg) translateY(6px)}
.antojo:active{transform:scale(.97)}
.antojo img{width:100%;height:100%;object-fit:cover}
.antojo b{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:7px 12px;border-radius:99px;background:rgba(252,255,255,.95);
  color:var(--azul);font:600 13.500px/1.15 var(--titulo);text-align:left}

/* ================= historia ================= */
.historia{display:flex;align-items:center;gap:16px;margin:14px 16px 0;padding:20px 18px;border-radius:26px;background:var(--hielo);color:var(--azul-hondo)}
.historia img{flex:none;width:74px;height:auto;filter:brightness(0) saturate(100%) invert(19%) sepia(61%) saturate(2400%) hue-rotate(186deg) brightness(92%)}
.historia h2{font-size:19px;color:var(--azul)}
.historia p{margin-top:6px;font-size:12.500px;line-height:1.5}

/* ================= pie ================= */
.chicos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 16px 0}
.chicos button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:10px;border-radius:16px;
  background:var(--nieve);border:1.500px solid var(--hielo);font-size:12.500px;font-weight:600;color:var(--azul);transition:transform .2s}
.chicos button:active{transform:scale(.96)} .chicos svg{width:18px;height:18px}
.tappix{display:block;margin-top:24px;text-align:center;font-size:11.500px;color:var(--suave);letter-spacing:.04em}
.tappix b{color:var(--azul)}

/* lo que falta (solo se ve en la compu) */
.falta{outline:2px dashed var(--rojo);outline-offset:2px;opacity:.75}
.falta .nom b::after{content:' (falta ID)';font:600 10px var(--texto);color:var(--rojo)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);padding:11px 18px;border-radius:99px;
  background:var(--tinta);color:#fff;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:.3s;z-index:30;white-space:nowrap}
.toast.ver{opacity:1;transform:translate(-50%,0)}
.lupa{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;
  background:rgba(0,32,58,.93);opacity:0;transition:opacity .25s;cursor:zoom-out}
.lupa.ver{opacity:1}
.lupa img{max-width:100%;max-height:82vh;border-radius:20px;transform:scale(.94);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lupa.ver img{transform:none}
.lupa span{color:var(--hielo);font-size:12.500px;font-weight:500}

/* sin animaciones (?quieto o si el celular las tiene apagadas) */
.quieto *,.quieto *::before,.quieto *::after{animation:none!important;transition:none!important}
.quieto .gota{display:none}
@media (max-width:359px){ .bola b{font-size:14.500px} .bola .helado{width:32px;height:32px} .estrellas svg{width:15px;height:15px} }