/* ============================================================
   ARRITMANCHEGOS V · CARTEL OFICIAL (componente reutilizable)
   Se usa en: index.html (hero), inscripcion/index.php, inscripcion/perfil.php
   Requiere js/cartel.js (inclinación 3D + visor ampliado)
   ============================================================ */
.cartel{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;--w:360px;
  position:relative;width:100%;max-width:var(--w);margin:0 auto;perspective:1400px;isolation:isolate}
/* halo cálido que "late" detrás del cartel */
.cartel__halo{position:absolute;inset:6% -10% 0;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,122,150,.55),rgba(246,198,103,.28) 55%,transparent 75%);
  filter:blur(28px);animation:cartelBeat 2.4s ease-in-out infinite}
@keyframes cartelBeat{0%,100%{opacity:.75;transform:scale(1)}12%{opacity:1;transform:scale(1.05)}24%{opacity:.82;transform:scale(1)}36%{opacity:.98;transform:scale(1.035)}}

.cartel__float{animation:cartelFloat 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes cartelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.cartel__frame{display:block;position:relative;width:100%;padding:0;border:0;cursor:zoom-in;background:#e9c6b4;
  border-radius:16px;overflow:hidden;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
  box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(255,255,255,.22),
             0 22px 40px -12px rgba(10,31,56,.55),0 50px 90px -30px rgba(226,29,98,.45)}
.cartel.is-tilting .cartel__frame{transition:transform .08s linear,box-shadow .3s}
.cartel__frame img{display:block;width:100%;height:auto;aspect-ratio:1100/1555;object-fit:cover}
/* brillo que sigue al ratón */
.cartel__shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.85),rgba(255,255,255,0) 45%)}
.cartel:hover .cartel__shine,.cartel.is-tilting .cartel__shine{opacity:1}
/* barrido de luz de entrada */
.cartel__sweep{position:absolute;inset:-20% auto -20% -60%;width:45%;pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:cartelSweep 5.5s 1.2s ease-in-out infinite}
@keyframes cartelSweep{0%{left:-60%}22%,100%{left:130%}}
/* borde interior fino tipo lámina */
.cartel__frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.35);border-radius:10px;pointer-events:none}

/* sello giratorio "Inscripciones abiertas" */
.cartel__seal{position:absolute;z-index:3;top:-44px;right:-46px;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff4d83,#e21d62 55%,#a80f45);
  box-shadow:0 14px 30px rgba(226,29,98,.5),0 0 0 4px rgba(255,255,255,.9);
  transform:translateZ(60px);transition:transform .3s}
.cartel__seal:hover{transform:translateZ(60px) scale(1.07)}
.cartel__seal svg{position:absolute;inset:0;width:100%;height:100%;animation:cartelSpin 16s linear infinite}
.cartel__seal text{font-family:var(--font-head,'Sora',sans-serif);font-weight:700;font-size:10.6px;letter-spacing:2.1px;fill:#fff;text-transform:uppercase}
.cartel__seal i{font-style:normal;font-size:1.65rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));animation:cartelHeart 1.2s ease-in-out infinite}
@keyframes cartelSpin{to{transform:rotate(360deg)}}
@keyframes cartelHeart{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.14)}}

/* pie: etiqueta + acciones */
.cartel__cap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.cartel__tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-head,'Sora',sans-serif);font-weight:700;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft,#f6c667)}
.cartel__tag::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.cartel__tag::after{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.cartel__acts{display:flex;gap:8px;justify-content:center;width:100%}
.cartel__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;cursor:pointer;
  font-family:var(--font-head,'Sora',sans-serif);font-weight:600;font-size:.78rem;text-decoration:none;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);transition:background .2s,transform .2s}
.cartel__btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.cartel__btn svg{width:15px;height:15px}
/* variante sobre fondo claro */
.cartel--light .cartel__tag{color:#b7791f}
.cartel--light .cartel__btn{color:var(--navy-800,#0f2742);background:#fff;border-color:var(--line,#dfe7f1);box-shadow:0 4px 14px rgba(15,39,66,.08)}
.cartel--light .cartel__btn:hover{background:var(--mist,#f5f8fc)}

/* visor ampliado */
.cartel-lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,16,30,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cartel-lb.open{display:flex;animation:cartelFade .25s ease}
@keyframes cartelFade{from{opacity:0}to{opacity:1}}
.cartel-lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.cartel-lb img{max-height:calc(100vh - 120px);max-width:100%;width:auto;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:cartelZoom .35s cubic-bezier(.2,.8,.2,1)}
@keyframes cartelZoom{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.cartel-lb .x{position:absolute;top:16px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.cartel-lb .x:hover{background:rgba(255,255,255,.2)}

@media(max-width:760px){
  .cartel__seal{width:88px;height:88px;top:-30px;right:-30px}
  .cartel__seal text{font-size:8.6px;letter-spacing:1.6px}
  .cartel__seal i{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){
  .cartel__halo,.cartel__float,.cartel__sweep,.cartel__seal svg,.cartel__seal i{animation:none}
  .cartel__sweep{display:none}
}
@media print{.cartel__seal,.cartel__acts,.cartel__halo{display:none}}
/* sello: que no se salga por la derecha en pantallas medianas */
@media(max-width:1260px){.hero__cartel .cartel__seal,.ins-hero__cartel .cartel__seal{right:-16px}}