/* ---------- Más fondo animado ---------- */
body{overflow-x:hidden}
.bg::before{content:"";position:absolute;width:70vw;height:70vw;right:-25vw;top:-20vw;background:radial-gradient(circle,rgba(224,27,45,.28),transparent 62%);animation:pulse 9s ease-in-out infinite alternate}
.bg::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:scan 11s linear infinite}
@keyframes pulse{to{transform:scale(1.3);opacity:.55}}
@keyframes scan{from{transform:translateY(-5vh)}to{transform:translateY(105vh)}}

/* ---------- Hero con palabra de contorno ---------- */
.hero{position:relative}
.hero::before{content:"LOOPZ";position:absolute;left:-1rem;top:50%;translate:0 -50%;font:italic 500 clamp(9rem,28vw,24rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(224,27,45,.4);z-index:-1;pointer-events:none;animation:slide2 24s ease-in-out infinite alternate}
@keyframes slide2{to{transform:translateX(6vw)}}
.spot{position:relative}
.spot::after{content:"";position:absolute;right:1.5rem;top:1.25rem;width:1.6rem;height:1.6rem;border:2px solid currentColor;animation:spin 10s linear infinite}
@keyframes spin{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}
.cta.sm{font-size:1rem;padding:.6rem 1.8rem}

/* ---------- Cinta que se desplaza ---------- */
.ticker{overflow:hidden;background:var(--red);color:#fff;transform:rotate(-1.4deg);margin:-2rem -2rem 0;box-shadow:0 .8rem 0 rgba(0,0,0,.6)}
.ticker div{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker span{font:italic 800 clamp(1.4rem,3vw,2.2rem) var(--tag);text-transform:uppercase;letter-spacing:.04em;padding:.55rem 0 .55rem 3rem;white-space:nowrap}
.ticker span::after{content:"◆";margin-left:3rem;color:#000}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Aparición al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(2rem) skewY(1.5deg);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.pj li:nth-child(2),.news li:nth-child(2),.team>li:nth-child(2){transition-delay:.1s}
.pj li:nth-child(3),.news li:nth-child(3),.team>li:nth-child(3){transition-delay:.2s}
h2.rv::after{clip-path:inset(0 100% 0 0)}
h2.rv.in::after{clip-path:inset(0);transition:clip-path .8s .2s}

/* ---------- Noticias ---------- */
.news{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.25rem}
.news a{display:block;height:100%;padding:1.75rem;background:var(--panel);border-top:4px solid var(--red);text-decoration:none;transition:transform .25s,background .25s}
.news a:hover{transform:translateY(-.4rem) rotate(-.6deg);background:var(--coffee)}
.news time{font:italic 700 .95rem var(--tag);text-transform:uppercase;letter-spacing:.05em;color:var(--red-l)}
.news h3{font:italic 500 1.7rem/1.1 var(--display);margin:.4rem 0 .6rem}
.news p{margin:0;color:var(--muted)}

/* ---------- Avatares y comentarios ---------- */
.av{display:inline-grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;object-fit:cover;background:var(--red);color:#fff;font:italic 700 1.1rem var(--tag);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.av.sm{width:1.8rem;height:1.8rem;font-size:.95rem}
.av.big{width:5.5rem;height:5.5rem;font-size:2.4rem}
#auth{display:inline-flex;align-items:center;gap:.55rem}
#auth .av{background:#fff;color:#000}
.clist li.cm{display:flex;gap:.9rem}.clist .cb{flex:1;min-width:0}

/* ---------- Diálogos: cabecera roja inclinada y tipografía propia ---------- */
dialog[open]{animation:dlgin .4s cubic-bezier(.2,.8,.2,1)}
@keyframes dlgin{from{opacity:0;transform:translateY(1.5rem) skewX(-4deg)}}
#dlg,#prof,#pm{padding:0;width:min(28rem,92vw)}
.dh{background:var(--red);padding:1.6rem 1.75rem 2.2rem;clip-path:polygon(0 0,100% 0,100% 80%,0 100%)}
.dh h3{font:italic 500 clamp(2.2rem,8vw,3rem)/1 var(--display);margin:0;color:#fff}
.db{padding:1.25rem 1.75rem 1.75rem}
.tabs{display:flex;gap:.5rem;margin-top:1rem}
.tabs button{background:rgba(0,0,0,.4);color:#fff}
.tabs button[aria-pressed="true"]{background:#fff;color:#000}
dialog label,.card label{font:italic 700 .95rem var(--tag);text-transform:uppercase;letter-spacing:.07em;color:var(--latte);margin-bottom:.1rem}
dialog input,dialog select,dialog textarea,.card input,.card select{background:transparent;border:0;border-bottom:2px solid var(--edge);padding:.55rem 0;font:500 1.1rem var(--sans);color:#fff;transition:border-color .2s}
dialog input:focus,dialog select:focus,dialog textarea:focus,.card input:focus{outline:0;border-bottom-color:var(--red)}
dialog input[type=checkbox]{width:auto;border:0}
dialog textarea{border:2px solid var(--edge);padding:.6rem}
#p-file{display:none}
.pav{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.25rem}
.upl{margin:0;cursor:pointer;background:var(--line);color:var(--text);padding:.5rem 1.2rem;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);transition:background .2s,color .2s}
.upl:hover{background:var(--text);color:#000}
#prof h4{font:italic 500 1.5rem var(--display);margin:1.75rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.pml{list-style:none;margin:0 0 1.5rem;padding:0}
.pml li{display:flex;gap:.5rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line)}
.pml strong{flex:1;font:italic 500 1.2rem var(--display)}
.pml button{padding:.2rem .8rem;font-size:.85rem}

@media (max-width:760px){.ticker{margin-inline:-1rem}}