/* =====================================================================
   PANDA PRODUCCIONES — Diseño y movimiento de la página de PUBLICIDAD
   ===================================================================== */

/* ---------- Portada ---------- */
.hero{isolation:isolate;}
.hero::after{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(249,184,28,.22),transparent 65%);filter:blur(10px);z-index:-1;animation:orb 9s ease-in-out infinite alternate;pointer-events:none;}
@keyframes orb{to{transform:translate(-120px,90px) scale(1.15);}}
.hero h1 .rot{display:grid!important;color:var(--gold);}
.hero h1 .rot i{grid-area:1/1;font-style:normal;opacity:0;transform:translateY(60%) rotateX(-70deg);transform-origin:50% 100%;transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1);}
.hero h1 .rot i.on{opacity:1;transform:none;}
.hero h1 .rot i.out{opacity:0;transform:translateY(-50%) rotateX(60deg);}
.collage img{will-change:transform;}

/* ---------- Marcas como etiquetas ---------- */
.brands2{padding:44px 0 38px;border-top:1px solid var(--line);background:linear-gradient(180deg,#0b0907,#060606);}
.brands2-label{text-align:center;font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.24em;color:var(--smoke-dim);text-transform:uppercase;margin-bottom:22px;}
.brand-tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.brand-tag{display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border:1px solid rgba(249,184,28,.28);border-radius:100px;background:linear-gradient(135deg,rgba(249,184,28,.10),rgba(249,184,28,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s,background .3s;opacity:0;transform:translateY(16px) scale(.96);}
.brand-tag.in{opacity:1;transform:none;transition-delay:var(--d,0s);}
.brand-tag:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 30px rgba(249,184,28,.18);}
.brand-tag b{font-weight:700;font-size:.98rem;color:var(--cream);white-space:nowrap;}
.brand-tag small{font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding:3px 8px;border-radius:100px;background:rgba(249,184,28,.12);white-space:nowrap;}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(249,184,28,.15);flex:0 0 auto;}
.brand-you{border-style:dashed;background:transparent;}
.brand-you a{display:flex;align-items:center;gap:10px;color:inherit;}
.brand-plus{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#060606;display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1;}
.brand-you small{background:transparent;color:var(--smoke);}

/* ---------- Banda en movimiento ---------- */
.kinetic{margin:0;}

/* ---------- Número gigante de fondo en cada categoría ---------- */
section.block[data-num]{position:relative;overflow:hidden;}
section.block[data-num]::before{content:attr(data-num);position:absolute;right:-1vw;top:10px;font-family:'Anton',sans-serif;font-size:clamp(9rem,22vw,20rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(249,184,28,.10);pointer-events:none;z-index:0;transform:translateY(var(--ny,0px));}
section.block[data-num] > .wrap{position:relative;z-index:1;}

/* ---------- Tarjetas de video ---------- */
.pcard{transform-style:preserve-3d;}
.pcard.vert{border-radius:20px;}
.pcard.vert::before{content:"";position:absolute;top:8px;left:50%;width:34%;height:5px;margin-left:-17%;border-radius:4px;background:rgba(0,0,0,.55);z-index:3;}
.pcard .pmeta{transform:translateZ(30px);}
.pcard:hover .pmeta b{color:var(--gold);}
.pcard .m-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:opacity .3s;z-index:2;}
.pcard:hover .m-glare{opacity:1;}

/* ---------- ¿Por qué elegirnos? ---------- */
.why{border-top:1px solid var(--line);}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.why-card{position:relative;overflow:hidden;padding:30px 24px 26px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#14100a,#080706 70%);transition:border-color .3s,transform .4s cubic-bezier(.16,1,.3,1);}
.why-card:hover{border-color:rgba(249,184,28,.5);}
.why-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .6s ease;}
.why-card:hover::after{transform:scaleX(1);}
.why-big{display:block;font-family:'Anton',sans-serif;font-size:3rem;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--gold);margin-bottom:18px;}
.why-card h3{font-size:1.05rem;margin-bottom:8px;}
.why-card p{color:var(--smoke);font-size:.9rem;line-height:1.6;}

/* ---------- Servicios ---------- */
.svc > div{position:relative;transition:background .3s,transform .4s cubic-bezier(.16,1,.3,1);}
.svc-ico{width:34px;height:34px;color:var(--gold);display:block;margin-bottom:16px;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.svc > div:hover .svc-ico{transform:translateY(-4px) scale(1.08);}
.svc .n{position:absolute;top:22px;right:22px;}

/* ---------- Proceso ---------- */
.steps div{transition:border-color .5s;}
.steps div.lit{border-top-color:var(--gold);}
.steps div:not(.lit){border-top-color:rgba(249,184,28,.18);}
.steps div::before{transition:color .5s,text-shadow .5s;}
.steps div:not(.lit)::before{color:rgba(249,184,28,.35);}
.steps div.lit::before{text-shadow:0 0 18px rgba(249,184,28,.45);}

/* ---------- Formulario y cierre ---------- */
.quote-form{box-shadow:0 30px 80px rgba(0,0,0,.45);}
.cta{position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(249,184,28,.12),transparent 30%);animation:spin 14s linear infinite;pointer-events:none;}
.cta > .wrap{position:relative;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Celular ---------- */
@media (max-width:1000px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){
  .why-grid{grid-template-columns:1fr;gap:12px;}
  .why-card{padding:22px 20px;}
  .why-big{font-size:2.4rem;margin-bottom:12px;}
  .brand-tag{padding:10px 14px 10px 12px;}
  .brand-tag b{font-size:.9rem;}
  section.block[data-num]::before{font-size:9rem;right:-12px;}
  .hero::after{width:380px;height:380px;right:-140px;top:-120px;}
}

@media (prefers-reduced-motion:reduce){
  .hero::after,.cta::before{animation:none!important;}
  .hero h1 .rot i{transition:none!important;}
  .brand-tag{opacity:1!important;transform:none!important;}
}

/* Ícono 3D de WhatsApp */
.wa-float{background:transparent!important;box-shadow:none!important;width:64px!important;height:64px!important;}
.wa-float .soc3d{width:64px;height:64px;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));transition:transform .35s cubic-bezier(.16,1,.3,1);}
.wa-float:hover .soc3d{transform:scale(1.08) rotate(-8deg);}
@media (max-width:640px){ .wa-float{width:56px!important;height:56px!important;} .wa-float .soc3d{width:56px;height:56px;} }