/* Arte peruano del sitio principal (copiado de sitio/index.html; el dibujo sale de
   sitio/arte.js): manta andina, banderas de El Salvador y el Perú con el Inti, alpaca, ají y
   botellita. Los colores del sitio se nombran aquí con las mismas variables. */
:root {
  --gold: #d6a54e; --gold2: #f0c878; --red: #b8322a; --magenta: #a93266; --green: #2f7a5a;
  --indigo: #26335e; --cream: #efe2c6; --muted: var(--lila); --f-display: var(--f-titulo); --spring: var(--rebote);
}

/* Andean manta: stripes + diamonds */
.manta{height:20px;width:100%;background:
  linear-gradient(180deg,var(--red) 0 3px,var(--gold) 3px 5px,transparent 5px 15px,var(--gold) 15px 17px,var(--red) 17px 20px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 5L5 0L10 5L5 10Z' fill='%23d6a54e'/%3E%3Cpath d='M10 5L15 0L20 5L15 10Z' fill='%23a93266'/%3E%3Cpath d='M3 5L5 3L7 5L5 7Z' fill='%2326335e'/%3E%3Cpath d='M13 5L15 3L17 5L15 7Z' fill='%23efe2c6'/%3E%3C/svg%3E") 0 5px/20px 10px repeat-x,
  var(--indigo)}
.manta.thin{height:8px;background:linear-gradient(180deg,var(--red) 0 2px,var(--gold) 2px 4px,var(--magenta) 4px 6px,var(--green) 6px 8px)}

/* ---------- Arte peruano: banderas hermanas, alpaca, ají y botellita ---------- */
/* Banderas de El Salvador y Perú con el Inti al centro (footer) */
.hermanos{--fw:118px;--fh:78px;position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:clamp(8px,4vw,34px);width:min(100%,560px);margin:8px auto 2px;padding-top:18px}
.hermanos::before{content:"";position:absolute;left:50%;top:58px;width:260px;height:200px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(214,165,78,.16),transparent);pointer-events:none}
.bandera{margin:0;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;row-gap:12px;justify-content:center;position:relative}
.bandera .asta{grid-row:1;width:4px;height:calc(var(--fh) + 34px);margin-top:-6px;border-radius:3px;background:linear-gradient(90deg,#7a5a26,#f0c878 45%,#8a6a33);position:relative;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.bandera .asta::before{content:"";position:absolute;top:-9px;left:50%;width:11px;height:11px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#fff3cf,#d6a54e 58%,#7a5a26)}
.bandera.sv .asta{grid-column:1}.bandera.sv .tela{grid-column:2}
.bandera.pe .asta{grid-column:2}.bandera.pe .tela{grid-column:1}
.bandera figcaption{grid-column:1/-1;grid-row:2;font-family:var(--f-display);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.tela{grid-row:1;display:flex;width:var(--fw);height:var(--fh);filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.tela i{flex:1 0 0;height:100%;margin-right:-.4px;background-size:var(--fw) 100%;background-position:calc(var(--i) * var(--fw) / -22) 0;animation:ondea 3.4s ease-in-out infinite;animation-delay:calc(var(--k) * -.13s)}
.tela.f-sv i{--k:var(--i);background-image:linear-gradient(180deg,#0f47af 0 33.4%,#fbfaf6 33.4% 66.6%,#0f47af 66.6%)}
.tela.f-pe i{--k:calc(21 - var(--i));background-image:linear-gradient(90deg,#d91023 0 33.4%,#fbfaf6 33.4% 66.6%,#d91023 66.6%)}
.tela i:first-child{border-radius:2px 0 0 2px}.tela i:last-child{border-radius:0 2px 2px 0;margin-right:0}
@keyframes ondea{0%,100%{transform:translateY(calc(var(--k) * -.15px));filter:brightness(1.07)}50%{transform:translateY(calc(var(--k) * .15px));filter:brightness(.8)}}
.inti{width:76px;height:76px;margin-top:2px;position:relative;z-index:1;filter:drop-shadow(0 0 18px rgba(240,200,120,.35))}
.inti svg{width:100%;height:100%;display:block;overflow:visible}
.inti .rayos{transform-origin:50% 50%;animation:intiGira 40s linear infinite}
@keyframes intiGira{to{transform:rotate(360deg)}}
.hermanos-t{grid-column:1/-1;margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.hermanos-t span{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hermanos-t b{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--gold2)}
@media (max-width:420px){.hermanos{--fw:92px;--fh:61px}.inti{width:60px;height:60px}.hermanos-t b{font-size:21px}}

/* Alpaca: parpadea, mueve orejas, borlas y colita */
svg.alp{display:block;overflow:visible}
.alp .head{transform-box:view-box;transform-origin:86px 56px;animation:alpHead 5s ease-in-out infinite}
.alp .ear{transform-box:fill-box;transform-origin:50% 100%;animation:alpEar 3.4s ease-in-out infinite}
.alp .ear-r{animation-delay:-1.3s}
.alp .eye{transform-box:fill-box;transform-origin:50% 50%;animation:alpBlink 4.4s infinite}
.alp .tassel{transform-box:fill-box;transform-origin:50% 0;animation:alpTassel 1.7s ease-in-out infinite}
.alp .tassel.t2{animation-delay:-.6s}
.alp .tail{transform-box:fill-box;transform-origin:90% 20%;animation:alpTail 1.3s ease-in-out infinite}
@keyframes alpHead{0%,100%{transform:rotate(0)}18%{transform:rotate(-7deg)}34%{transform:rotate(-7deg)}50%{transform:rotate(2deg)}66%{transform:rotate(5deg)}80%{transform:rotate(0)}}
@keyframes alpEar{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-16deg)}84%{transform:rotate(6deg)}92%{transform:rotate(-4deg)}}
@keyframes alpBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes alpTassel{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes alpTail{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(16deg)}}
.alp.hop{transform-origin:60% 100%;animation:alpHop 1s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes alpHop{0%,100%{transform:translateY(0) scale(1.04,.96)}12%{transform:translateY(0) scale(.97,1.03)}45%{transform:translateY(-16%) rotate(-3deg) scale(1)}78%{transform:translateY(0) scale(1.05,.95)}}

/* Ají amarillo que se balancea */
svg.aji{display:block;overflow:visible;transform-origin:50% 8%;animation:ajiSway 2.6s ease-in-out infinite}
@keyframes ajiSway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}

/* Botellita: baila, brilla y burbujea */
.beb{display:inline-block;width:var(--bw,34px);aspect-ratio:160/521;position:relative;flex:none}
.beb-b{position:absolute;inset:0;transform-origin:50% 100%;animation:bebBaila 2.8s ease-in-out infinite}
.beb-b img{width:100%;height:100%;display:block}
.beb-fx{position:absolute;inset:0;-webkit-mask:url(img/peru/gaseosa.webp) center/100% 100% no-repeat;mask:url(img/peru/gaseosa.webp) center/100% 100% no-repeat;overflow:hidden;pointer-events:none}
.beb-sh{position:absolute;inset:-10% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);animation:bebBrillo 3.6s ease-in-out infinite}
.beb-fx b{position:absolute;bottom:8%;left:calc(30% + var(--x,0%));width:7%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.35);opacity:0;animation:bebBurbuja 2.6s ease-in infinite}
.beb-fx b:nth-of-type(1){--x:4%;animation-delay:0s}.beb-fx b:nth-of-type(2){--x:26%;animation-delay:-.5s;width:5%}.beb-fx b:nth-of-type(3){--x:14%;animation-delay:-1.1s}
.beb-fx b:nth-of-type(4){--x:34%;animation-delay:-1.6s;width:5%}.beb-fx b:nth-of-type(5){--x:8%;animation-delay:-2s;width:4%}.beb-fx b:nth-of-type(6){--x:20%;animation-delay:-2.3s;width:6%}
@keyframes bebBaila{0%,100%{transform:rotate(-4deg) translateY(0)}25%{transform:rotate(3deg) translateY(-5%) scale(1.02,.99)}50%{transform:rotate(5deg) translateY(0) scale(1.03,.97)}75%{transform:rotate(-2deg) translateY(-4%)}}
@keyframes bebBrillo{0%,55%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
@keyframes bebBurbuja{0%{transform:translateY(0);opacity:0}15%{opacity:.95}80%{opacity:.8}100%{transform:translateY(-900%);opacity:0}}
.beb.hop .beb-b{animation:bebSalta 1s cubic-bezier(.3,.7,.4,1) infinite;animation-delay:-.5s}
@keyframes bebSalta{0%,100%{transform:translateY(0) scale(1.05,.95)}45%{transform:translateY(-14%) rotate(6deg)}78%{transform:translateY(0) scale(1.06,.94)}}

@media (prefers-reduced-motion: reduce) {
  .tela i, .inti .rayos, .alp .head, .alp .ear, .alp .eye, .alp .tassel, .alp .tail, .alp.hop, svg.aji, .beb-b, .beb.hop .beb-b, .beb-sh, .beb-fx b { animation: none; }
}