/* ============================================================
   PERFIL LAS RELIQUIAS · diseño propio de papelería
   Hojas de papel pegadas en el muro de ladrillo del local.
   Letras naranjas y negras, como pidió el cliente.
   ============================================================ */
:root{
  --tinta:#1b1a18; --gris:#5f584e; --naranja:#f47b20; --naranja-osc:#b9480a;
  --hoja:#fffdf8; --crema:#f6efdf; --raya:#e6dcc6; --muro:#17120f;
  --verde:#128c4a; --azul:#8fd0ff;
  --f-t:'Alfa Slab One',Georgia,serif; --f-s:'Cinzel',Georgia,serif;
  --f:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.fijo{overflow:hidden}
body{
  font:400 16px/1.45 var(--f);color:var(--tinta);min-height:100dvh;background-color:var(--muro);
  background-image:
    radial-gradient(120% 60% at 50% 0,rgba(143,208,255,.10),transparent 60%),
    linear-gradient(rgba(23,18,15,.35),rgba(23,18,15,.72)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56'%3E%3Crect width='64' height='56' fill='%23130e0b'/%3E%3Crect x='1.500' y='1.500' width='61' height='25' rx='2' fill='%23532f1f'/%3E%3Crect x='-30.500' y='29.500' width='61' height='25' rx='2' fill='%23482a1c'/%3E%3Crect x='33.500' y='29.500' width='61' height='25' rx='2' fill='%235a3322'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,scroll;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
svg{width:1.4em;height:1.4em;flex:none}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.app{max-width:480px;margin:0 auto;padding:0 16px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:26px}

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

/* ---------- títulos ---------- */
h2{font:400 1.45rem/1.15 var(--f-t);letter-spacing:.01em}
h2 small{display:block;font:700 .72rem/1.2 var(--f-s);letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.servicios>h2,.contacto>h2,.fotos>h2{color:var(--hoja)}
.servicios>h2 small,.contacto>h2 small,.fotos>h2 small{color:var(--naranja)}

/* ---------- portada: la hoja sale de la impresora ---------- */
.cabecera{margin:0 -16px;padding:0 16px}
.impresora{position:relative;z-index:2;height:34px;margin:0 -16px;background:linear-gradient(#2c2927,#1b1918);border-radius:0 0 14px 14px;
  box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.08);padding-top:env(safe-area-inset-top);box-sizing:content-box}
.impresora span{position:absolute;left:22px;right:22px;bottom:5px;height:5px;border-radius:3px;background:#070606;box-shadow:inset 0 1px 2px #000}
.foco{position:absolute;right:26px;bottom:17px;width:7px;height:7px;border-radius:50%;background:#44e07f;box-shadow:0 0 8px #44e07f;animation:foco 1s steps(2) 3}
.foco.dos{right:40px;background:var(--naranja);box-shadow:0 0 8px var(--naranja);animation:none}
@keyframes foco{50%{opacity:.25}}
.salida{overflow:hidden;margin-top:-8px;padding:0 6px 22px}
.hoja{position:relative;background:var(--hoja);padding:34px 20px 22px;text-align:center;border-radius:0 0 4px 4px;
  box-shadow:0 12px 22px rgba(0,0,0,.5);animation:imprime 1.5s cubic-bezier(.3,.1,.3,1) both}
.hoja::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:10px;
  background:linear-gradient(135deg,var(--hoja) 50%,transparent 0) 0 0/14px 10px,linear-gradient(225deg,var(--hoja) 50%,transparent 0) 0 0/14px 10px}
@keyframes imprime{0%{transform:translateY(-102%)}18%{transform:translateY(-78%)}26%{transform:translateY(-78%)}48%{transform:translateY(-44%)}56%{transform:translateY(-44%)}82%{transform:translateY(-8%)}100%{transform:none}}
.logo{position:relative;display:block;width:min(100%,330px);margin:0 auto;transition:transform .15s}
.logo:active{transform:scale(.97)}
.logo img{width:100%;height:auto}
.estado{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:7px 14px;border-radius:99px;font-size:.92rem;background:var(--crema);border:1px solid var(--raya)}
.estado i{width:9px;height:9px;border-radius:50%;background:#c33}
.estado.si i{background:#1aa35a;box-shadow:0 0 0 4px rgba(26,163,90,.18);animation:late 2s infinite}
@keyframes late{50%{box-shadow:0 0 0 7px rgba(26,163,90,0)}}
.donde{display:flex;justify-content:center;gap:5px;margin-top:12px;font-size:.88rem;color:var(--gris);text-align:left}
.donde svg{width:1.1em;height:1.1em;margin-top:.15em;color:var(--naranja-osc)}

/* portada con imagen de fondo (la que eligió el cliente): la foto arriba y se funde a noche */
.hoja.con-fondo{--noche:#08131d;padding-top:44%;color:var(--hoja);background:var(--noche) var(--fondo) center top/100% auto no-repeat}
.hoja.con-fondo::before{content:'';position:absolute;left:0;right:0;top:0;padding-top:66.700%;background:linear-gradient(transparent 52%,var(--noche) 99%)}
.hoja.con-fondo::after{background:linear-gradient(135deg,var(--noche) 50%,transparent 0) 0 0/14px 10px,linear-gradient(225deg,var(--noche) 50%,transparent 0) 0 0/14px 10px}
.hoja.con-fondo>*:not(.oculto){position:relative}
.con-fondo .logo img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.75))}
.con-fondo .estado{background:rgba(255,253,248,.12);border-color:rgba(255,253,248,.3)}
.con-fondo .estado.no i{background:#ff6b5e}
.con-fondo .donde{color:#cfd9e3}
.con-fondo .donde svg{color:var(--naranja)}

/* chispas al tocar el logo */
.chispa{position:absolute;left:50%;top:38%;width:9px;height:9px;pointer-events:none;background:var(--naranja);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:chispa 1s ease-out var(--d) both}
.chispa.c1{background:#ffc36b;width:12px;height:12px}.chispa.c2{background:#3c8fd6;width:7px;height:7px}
@keyframes chispa{from{opacity:1;transform:none}to{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(180deg) scale(.3)}}

/* ---------- servicios ---------- */
.guia{color:#d9cfbf;font-size:.95rem;margin-top:6px}
.botones{display:grid;gap:10px;margin-top:16px}
.servicio{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 14px;text-align:left;background:var(--hoja);border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.4);transition:transform .15s}
.servicio:active{transform:scale(.98)}
.servicio .ico{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:var(--tinta);color:var(--naranja)}
.servicio .ico svg{width:27px;height:27px}
.servicio .txt{flex:1;min-width:0}
.servicio b{display:block;font:400 1.12rem/1.2 var(--f-t)}
.servicio small{display:block;font-size:.88rem;color:var(--gris);margin-top:2px}
.servicio>svg{width:18px;height:18px;color:var(--naranja-osc)}
.servicio.principal{background:var(--naranja);min-height:88px}
.servicio.principal b{font-size:1.4rem}
.servicio.principal small{color:#3a2412;font-weight:600}
.servicio.principal>svg{color:var(--tinta)}
.tambien{margin-top:14px;font-size:.9rem;color:#d9cfbf}
.tambien b{color:var(--hoja)}

/* ---------- contacto ---------- */
.lineas{display:grid;gap:10px;margin-top:14px}
.wa{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:10px;background:var(--verde);color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.wa>svg:first-child{width:30px;height:30px}
.wa span{flex:1}
.wa small{display:block;font-size:.78rem;opacity:.9;letter-spacing:.04em;text-transform:uppercase}
.wa b{font-size:1.15rem;letter-spacing:.02em}
.wa>svg:last-child{width:18px;height:18px}
.redondos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.red{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 12px;border-radius:10px;background:rgba(255,253,248,.1);border:1px solid rgba(255,253,248,.28);color:var(--hoja)}
.red span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--hoja);color:var(--tinta)}
.red.mapa span{color:var(--naranja-osc)}
.red b{font-size:.95rem}

/* ---------- hojas pegadas con cinta ---------- */
.nota{position:relative;background:var(--hoja);padding:26px 18px 18px;border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,.45)}
.nota::before{content:'';position:absolute;top:-11px;left:50%;width:92px;height:22px;margin-left:-46px;background:rgba(244,214,150,.82);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transform:rotate(-2deg)}
.nota.horas::before{transform:rotate(1.5deg)}
.nota h2 small{color:var(--naranja-osc)}
.pie{margin-top:12px;font-size:.88rem;color:var(--gris)}

.formas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:14px}
.formas li{padding:7px 14px;border-radius:99px;background:var(--crema);border:1px solid var(--raya);font-weight:700;font-size:.92rem}
.clabe{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border-radius:8px;background:var(--crema);border:1px dashed #c9bb9b}
.clabe div{flex:1;min-width:0}
.clabe small{display:block;font-size:.78rem;color:var(--gris)}
.clabe b{display:block;font-size:clamp(.8rem,3.9vw,1rem);font-variant-numeric:tabular-nums;white-space:nowrap}
.clabe em{display:block;font-style:normal;font-size:.85rem;color:var(--gris)}
.copiar{flex:none;min-width:84px;min-height:46px;padding:0 14px;border-radius:8px;background:var(--tinta);color:var(--hoja);font-weight:800}
.copiar.listo{background:var(--verde)}

/* ---------- reseñas ---------- */
.resena{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:16px;border-radius:10px;background:var(--hoja);box-shadow:0 10px 20px rgba(0,0,0,.45)}
.resena>svg{width:34px;height:34px}
.resena b{display:block;font:400 1.15rem/1.2 var(--f-t)}
.resena small{display:block;font-size:.9rem;color:var(--gris)}
.estrellas{grid-column:1/-1;display:flex;justify-content:center;gap:6px;padding-top:6px}
.estrellas svg{width:30px;height:30px;fill:#f5a623;animation:brilla 2.6s ease-in-out infinite}
.estrellas svg:nth-child(2){animation-delay:.15s}.estrellas svg:nth-child(3){animation-delay:.3s}.estrellas svg:nth-child(4){animation-delay:.45s}.estrellas svg:nth-child(5){animation-delay:.6s}
@keyframes brilla{0%,70%,100%{transform:none}80%{transform:scale(1.22) rotate(8deg)}}

/* ---------- horario ---------- */
.horario{list-style:none;margin-top:12px}
.horario li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid var(--raya)}
.horario li:last-child{border-bottom:0}
.horario i{flex:1;border-bottom:2px dotted #cfc3a8;transform:translateY(-4px)}
.horario b{font-variant-numeric:tabular-nums;white-space:nowrap}
.horario .descanso b{color:#a33;font-weight:700}
.horario .hoy span{font-weight:800}
.horario .hoy span::after{content:'hoy';margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--naranja);font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* ---------- fotos ---------- */
.tira{display:flex;gap:12px;margin:14px -16px 0;padding:6px 16px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tira::-webkit-scrollbar{display:none}
.foto{flex:none;width:62%;scroll-snap-align:center;background:var(--hoja);padding:8px 8px 0;border-radius:3px;box-shadow:0 8px 16px rgba(0,0,0,.45);transform:rotate(-1.5deg)}
.foto:nth-child(even){transform:rotate(1.5deg)}
.foto img{width:100%;aspect-ratio:3/4;object-fit:cover}
.foto b{display:block;padding:8px 0 10px;font:700 .8rem/1 var(--f-s);letter-spacing:.08em;text-transform:uppercase}
.lupa{position:fixed;inset:0;z-index:60;display:grid;place-content:center;gap:12px;padding:16px;background:rgba(10,8,7,.92);opacity:0;transition:opacity .25s}
.lupa.ver{opacity:1}
.lupa img{max-height:80dvh;border-radius:6px}
.lupa span{color:#fff;text-align:center;font-size:.9rem}

/* ---------- pie ---------- */
.chicos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chicos button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:10px;border:1px solid rgba(255,253,248,.28);color:var(--hoja);font-weight:700;font-size:.92rem}
.tappix{align-self:center;color:#b8ad9b;font-size:.82rem;padding:8px}
.tappix b{color:var(--hoja)}
.falta{outline:2px dashed #ff5c5c;outline-offset:2px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,20px);padding:11px 18px;border-radius:99px;background:var(--hoja);color:var(--tinta);
  font-weight:700;font-size:.92rem;box-shadow:0 8px 20px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* ---------- hoja de pedido ---------- */
.fondo{position:fixed;inset:0;z-index:40;background:rgba(10,8,7,.7);opacity:0;transition:opacity .3s}
.fondo.ver{opacity:1}
.pedido{position:fixed;left:50%;bottom:0;z-index:50;width:min(100%,480px);max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:0 18px calc(18px + env(safe-area-inset-bottom));background:var(--hoja);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.5);
  transform:translate(-50%,100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.pedido.ver{transform:translate(-50%,0)}
.pedido[hidden],.fondo[hidden]{display:none}
.tope{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;margin:0 -18px;padding:14px 18px 12px;background:var(--hoja);border-bottom:1px solid var(--raya)}
.tope .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--tinta);color:var(--naranja)}
.tope .ico svg{width:24px;height:24px}
.tope h2{flex:1;font-size:1.25rem}
.x{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border-radius:50%;background:var(--crema)}
.grupo{border:0;margin-top:16px;min-width:0}
.grupo legend,.rotulo,.campo>span{display:block;font:700 .74rem/1.2 var(--f-s);letter-spacing:.14em;text-transform:uppercase;color:var(--naranja-osc);margin-bottom:8px}
legend em,.campo em{font:400 .78rem var(--f);letter-spacing:0;text-transform:none;color:var(--gris)}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.ops label{position:relative;flex:1 1 auto}
.ops input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.ops span{display:grid;place-items:center;min-height:46px;padding:0 14px;border-radius:8px;border:2px solid var(--raya);background:#fff;font-weight:700;white-space:nowrap;transition:.15s}
.ops input:checked+span{background:var(--tinta);border-color:var(--tinta);color:var(--hoja)}
.ops input[type=checkbox]:checked+span{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.ops input:focus-visible+span{outline:3px solid var(--azul);outline-offset:2px}
.cuenta{display:flex;align-items:center;justify-content:space-between}
.cuenta .rotulo{margin:0}
.pasos{display:flex;align-items:center;border:2px solid var(--raya);border-radius:8px;background:#fff}
.pasos button{width:48px;height:44px;font-size:1.5rem;font-weight:700;line-height:1}
.pasos output{min-width:38px;text-align:center;font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums}
.campo{display:block;margin-top:16px}
.campo input{width:100%;min-height:48px;padding:0 12px;border-radius:8px;border:2px solid var(--raya);background:#fff;font:600 1rem var(--f);color:var(--tinta)}
.campo input::placeholder{color:#9a9080;font-weight:400}
.campo input:focus{outline:0;border-color:var(--tinta)}
.campo input.vacio{border-color:#d33;background:#fff3f1}
.ticket{margin-top:20px;padding:14px 14px 16px;background:var(--crema);border-left:4px solid var(--naranja);border-radius:2px 8px 8px 2px}
.ticket small{display:block;font:700 .7rem/1 var(--f-s);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.ticket p{white-space:pre-wrap;font-size:.95rem;overflow-wrap:anywhere}
.adjunta{display:flex;gap:8px;margin-top:12px;font-size:.9rem;color:var(--gris)}
.adjunta svg{width:1.3em;height:1.3em;color:var(--naranja-osc);margin-top:.1em}
.enviar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:16px;border-radius:12px;background:var(--verde);color:#fff;font-weight:800;font-size:1.08rem;
  box-shadow:0 6px 14px rgba(18,140,74,.35);transition:transform .15s}
.enviar:active{transform:scale(.98)}
.enviar svg{width:26px;height:26px}
/* elegir a cuál de los dos WhatsApp va el pedido */
.linea{margin-top:18px;padding:12px;border-radius:10px;background:var(--crema);border:2px solid var(--raya)}
.ops.lineas span{min-height:58px;line-height:1.2;font-variant-numeric:tabular-nums;font-size:1.02rem}
.ops.lineas small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.ops.lineas input:checked+span{background:var(--verde);border-color:var(--verde);color:#fff}
.linea.vacio{border-color:#d33;background:#fff3f1}
.linea.vacio legend{color:#d33}

/* ---------- sin animaciones (?quieto) ---------- */
.quieto *,.quieto *::before,.quieto *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}