/* =========================================================
   MARCA PELUGGO: logo del encabezado, imagotipo del pie de página
   y pantalla de carga. Colores oficiales en css/tokens.css
   (--iso-verde y --iso-naranja).
   ========================================================= */

/* Encabezado: isotipo + PELUGGO en sans-serif, sin eslogan */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--logo-c);flex:none}
.logo-iso{display:block;line-height:0}
.logo-iso .iso{display:block;height:40px;width:auto;aspect-ratio:716/442}
.logo-txt{font-family:var(--f-body);font-weight:800;font-size:24px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.logo:hover .logo-txt{opacity:.85}
@media (max-width:860px){
  .logo{gap:8px}
  .logo-iso .iso{height:32px}
  .logo-txt{font-size:20px;letter-spacing:.08em}
}

/* Pie de página: imagotipo completo sobre una tarjeta crema, en sus colores oficiales */
.imagotipo{display:inline-flex;flex-direction:column;align-items:center;gap:12px;background:#F7F3E8;border-radius:20px;padding:22px 26px 18px;text-decoration:none;color:var(--iso-verde);max-width:100%}
.imagotipo img{display:block;width:180px;max-width:100%;height:auto}
.imagotipo > span{display:flex;flex-direction:column;align-items:center;font-family:var(--f-body);font-size:15px;font-weight:600;text-align:center;line-height:1.35}

/* Pantalla de carga: el isotipo con un pulso de opacidad mientras carga la tienda o se procesa el pedido */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--bg);transition:opacity .25s ease, visibility 0s;
  animation:loader-salida .4s ease 6s forwards}
.loader img{width:150px;height:auto;animation:loader-pulso 1.4s ease-in-out infinite}
.loader span{font-family:var(--f-body);font-weight:700;font-size:15px;color:var(--muted)}
.loader.listo{opacity:0;visibility:hidden;animation:none;transition:opacity .35s ease, visibility 0s linear .35s}
.loader.velo{background:color-mix(in srgb,var(--bg) 88%,transparent)}
@keyframes loader-pulso{0%,100%{opacity:.35}50%{opacity:1}}
/* Respaldo: si algo falla al cargar, la pantalla se quita sola a los 6 segundos */
@keyframes loader-salida{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.loader img{animation:none;opacity:.85}}

/* Redes sociales: botones redondos con ícono (pie de página y menú lateral) */
.redes{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.red{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:var(--band-ink);border:1.5px solid color-mix(in srgb,var(--band-ink) 35%,transparent);transition:background .15s,color .15s}
.red:hover{background:var(--band-ink);color:var(--band)}
.red:focus-visible{outline:3px solid var(--pop);outline-offset:2px}
.sredes{display:grid;gap:4px;padding:2px 4px 0;font-size:12.5px;color:var(--muted)}
.sredes .redes{margin:4px 0 0;gap:8px}
.sredes .red{width:40px;height:40px;color:var(--brand);border-color:var(--line)}
.sredes .red:hover{background:var(--brand);color:var(--brand-ink)}