/* ============================================================
   MARKETING ALCARRIA — hoja de estilos
   Paleta: negro cálido profundo + dorado metálico + crema.
   Archetype: Editorial Dark Warm. Firma: vídeo de dron + movimiento.
   ============================================================ */

:root{
  --bg:        #0C0A08;   /* negro cálido, NUNCA #000 */
  --bg-2:      #12100C;
  --bg-3:      #1A1510;   /* tarjeta */
  --cream:     #F3ECDD;   /* texto sobre oscuro, nunca blanco puro */
  --cream-2:   #DCD1BC;
  --cream-3:   #8C8069;   /* metadatos */
  --gold:      #C9A25A;   /* dorado principal */
  --gold-2:    #E7C983;   /* dorado claro / brillo */
  --gold-deep: #9A7735;
  --line:      rgba(243,236,221,.12);
  --line-gold: rgba(201,162,90,.35);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  overflow-anchor:none;   /* evita saltos de scroll al cargar vídeos diferidos */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--gold); color:var(--bg) }

/* Grano sutil global */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía base ---------- */
.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em }
em{ font-style:italic }
.gold{ color:var(--gold) }
.gold-grad{
  background:linear-gradient(105deg,var(--gold-2),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Utilidades layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad) }
section{ position:relative }

/* ============================================================
   SPLASH
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:grid; place-items:center;
  animation:splashOut .8s var(--ease) 2.4s forwards;   /* red de seguridad CSS */
}
#splash .splash-inner{ text-align:center; overflow:hidden }
#splash .s-mark{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2rem,7vw,4.5rem); color:var(--cream);
  transform:translateY(120%); animation:splashUp .9s var(--ease) .15s forwards;
}
#splash .s-sub{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-top:1rem; opacity:0; animation:fadeIn .7s ease .7s forwards;
}
#splash .s-bar{
  width:0; height:1px; margin:1.4rem auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:barGrow 1.7s var(--ease) .6s forwards;
}
@keyframes splashUp{ to{ transform:translateY(0) } }
@keyframes barGrow{ to{ width:min(320px,60vw) } }
@keyframes fadeIn{ to{ opacity:1 } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none } }
body.loaded #splash{ animation:splashOut .7s var(--ease) forwards }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(12,10,8,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  padding-block:.8rem;
}
.brand{ display:flex; flex-direction:column; line-height:1; gap:.25rem }
.brand small{ font-family:var(--mono); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-3) }
.brand b{ font-family:var(--serif); font-weight:500; font-size:1.35rem; letter-spacing:.01em }
.brand b span{ font-style:italic; color:var(--gold) }
.nav-links{ display:flex; gap:2rem; align-items:center }
.nav-links a{ font-size:.82rem; letter-spacing:.04em; color:var(--cream-2); position:relative; padding:.2rem 0 }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--cream) }
.nav-links a:hover::after{ width:100% }
.nav-cta{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  padding:.55rem 1.1rem; border:1px solid var(--line-gold); border-radius:100px;
  color:var(--gold); transition:.35s var(--ease); white-space:nowrap;
}
.nav-cta:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold) }
.nav-burger{ display:none; background:none; border:0; cursor:pointer; padding:.4rem }
.nav-burger span{ display:block; width:24px; height:2px; background:var(--cream); margin:5px 0; transition:.3s }

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(2.5rem,6vh,5rem) }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-bg video, .hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.04) brightness(.82);
}
.hero-tint{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(12,10,8,.55) 0%, rgba(12,10,8,.2) 30%, rgba(12,10,8,.55) 62%, rgba(12,10,8,.96) 100%),
    radial-gradient(120% 90% at 15% 90%, rgba(12,10,8,.75), transparent 60%);
}
.hero-grain{ position:absolute; inset:0; z-index:2; pointer-events:none }
.hero .wrap{ position:relative; z-index:5; width:100%; display:grid; grid-template-columns:1.35fr .65fr; gap:2rem; align-items:end }
.hero-meta{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem }
.hero-meta .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(201,162,90,.6); animation:pulse 2.4s infinite }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(201,162,90,.55) } 70%{ box-shadow:0 0 0 12px rgba(201,162,90,0) } 100%{ box-shadow:0 0 0 0 rgba(201,162,90,0) } }
.hero-meta span:last-child{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-2) }
.hero-title{
  font-size:clamp(2.7rem,7.4vw,6.6rem); line-height:.98; letter-spacing:-.02em;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero-title .l{ display:block; overflow:hidden }
/* Visible por defecto. La entrada suave la da el sistema .reveal (robusto
   aunque la pestaña esté en segundo plano). */
.hero-title .l > span{ display:block }
.hero-sub{
  max-width:44ch; margin-top:1.8rem; font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--cream-2); line-height:1.55;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem }
.hero-scroll{
  position:absolute; left:var(--pad); bottom:1.4rem; z-index:5;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-3);
  display:flex; align-items:center; gap:.6rem;
}
.hero-scroll .line{ width:38px; height:1px; background:var(--gold); transform-origin:left; animation:scrollLine 2.2s var(--ease) infinite }
@keyframes scrollLine{ 0%,100%{ transform:scaleX(.3); opacity:.5 } 50%{ transform:scaleX(1); opacity:1 } }

/* Retrato flotante 3D */
.hero-portrait{
  justify-self:end; align-self:end;
  width:min(320px,30vw); aspect-ratio:3/4; position:relative;
  border-radius:8px; overflow:visible;
  transform-style:preserve-3d;
}
.hero-portrait .pf{
  position:relative; border-radius:8px; overflow:hidden;
  border:1px solid var(--line-gold);
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(201,162,90,.15);
  transform:translateZ(40px);
  animation:floaty 7s ease-in-out infinite;
}
.hero-portrait img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4 }
.hero-portrait .tag{
  position:absolute; bottom:.8rem; left:.8rem; z-index:3;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); background:rgba(12,10,8,.6); backdrop-filter:blur(6px);
  padding:.35rem .6rem; border-radius:4px; border:1px solid var(--line);
}
@keyframes floaty{ 0%,100%{ transform:translateZ(40px) translateY(0) } 50%{ transform:translateZ(40px) translateY(-14px) } }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:.01em;
  padding:.9rem 1.6rem; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:.4s var(--ease); position:relative; overflow:hidden;
}
.btn svg{ width:18px; height:18px; flex:none }
.btn-primary{ background:linear-gradient(105deg,var(--gold-2),var(--gold) 55%,var(--gold-deep)); color:#1a1206; box-shadow:0 10px 30px -8px rgba(201,162,90,.5) }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(201,162,90,.6) }
.btn-ghost{ border-color:var(--line-gold); color:var(--cream) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold) }

/* ============================================================
   SECCIÓN GENÉRICA
   ============================================================ */
.sec{ padding-block:clamp(4.5rem,11vh,9rem) }
.sec-head{ max-width:60ch }
.sec-head .kicker{ display:inline-block; margin-bottom:1.1rem }
.sec-title{ font-size:clamp(2rem,4.6vw,3.8rem); line-height:1.02 }
.sec-lead{ margin-top:1.4rem; font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--cream-2); max-width:52ch }

/* Manifiesto */
.manifesto{ background:var(--bg-2); border-block:1px solid var(--line) }
.manifesto .big{
  font-family:var(--serif); font-size:clamp(1.7rem,4.2vw,3.4rem); line-height:1.16; letter-spacing:-.01em;
  max-width:20ch;
}
.manifesto .big em{ color:var(--gold) }
.manifesto-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,6vw,5rem); align-items:center }
.manifesto-media{ aspect-ratio:1179/1769; border-radius:10px; overflow:hidden; border:1px solid var(--line-gold); box-shadow:0 30px 70px rgba(0,0,0,.5) }
.manifesto-media img{ width:100%; height:100%; object-fit:cover; display:block }
.manifesto-text .num{ font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; color:var(--gold); margin-bottom:1.4rem }
.manifesto p.body{ margin-top:1.6rem; color:var(--cream-2); max-width:46ch }

/* ---------- Servicios ---------- */
.serv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3rem; background:var(--line); border:1px solid var(--line) }
.serv{
  background:var(--bg); padding:clamp(1.6rem,2.4vw,2.4rem); min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
  transition:background .4s var(--ease);
}
.serv::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(120% 100% at 50% 120%, rgba(201,162,90,.14), transparent 70%);
}
.serv:hover{ background:var(--bg-3) }
.serv:hover::before{ opacity:1 }
.serv .s-num{ font-family:var(--mono); font-size:.72rem; color:var(--gold); letter-spacing:.15em }
.serv h3{ font-size:1.5rem; margin-top:1.3rem }
.serv p{ font-size:.92rem; color:var(--cream-3); margin-top:.7rem; line-height:1.5 }
.serv .s-star{ position:absolute; top:1.4rem; right:1.4rem; color:var(--gold); opacity:.5; transition:.4s var(--ease) }
.serv:hover .s-star{ opacity:1; transform:rotate(90deg) }

/* ---------- Diferenciador (vídeo dron) ---------- */
.diff{ min-height:92vh; display:flex; align-items:center; overflow:hidden }
.diff-bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
.diff-bg video, .diff-bg img{ width:100%; height:120%; object-fit:cover; filter:brightness(.5) saturate(1.05) contrast(1.05) }
.diff-tint{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(12,10,8,.94) 0%, rgba(12,10,8,.7) 45%, rgba(12,10,8,.35) 100%) }
.diff .wrap{ position:relative; z-index:4 }
.diff .kicker{ display:inline-block; margin-bottom:1.2rem }
.diff h2{ font-size:clamp(2.1rem,5.5vw,4.6rem); line-height:1.02; max-width:16ch }
.diff h2 em{ color:var(--gold) }
.diff p{ margin-top:1.6rem; max-width:40ch; color:var(--cream-2); font-size:1.1rem }
.diff-feats{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.4rem }
.diff-feats .f{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); display:flex; align-items:center; gap:.6rem }
.diff-feats .f .d{ width:5px; height:5px; background:var(--gold); border-radius:50% }

/* ---------- Marquee ---------- */
.marquee{ padding-block:1.6rem; border-block:1px solid var(--line); overflow:hidden; background:var(--bg-2); white-space:nowrap }
.marquee-track{ display:inline-flex; gap:3rem; will-change:transform; animation:scrollX 34s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3vw,2.3rem); color:var(--cream-2) }
.marquee .sep{ color:var(--gold); font-style:normal }
@keyframes scrollX{ to{ transform:translateX(-50%) } }

/* ---------- Trabajos (galería vídeos) ---------- */
.works-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:200px; gap:14px; margin-top:3rem }
.work{
  position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--line);
  background:var(--bg-3); cursor:pointer;
}
.work video, .work img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s var(--ease); filter:saturate(1.05) brightness(.9) }
.work:hover video, .work:hover img{ transform:scale(1.06); filter:saturate(1.15) brightness(1) }
.work .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.1rem 1.1rem .9rem;
  background:linear-gradient(0deg, rgba(12,10,8,.9), transparent);
  display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem;
}
.work .cap .t{ font-family:var(--serif); font-size:1.05rem; line-height:1.1 }
.work .cap .c{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.work .play{
  position:absolute; top:1rem; right:1rem; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(12,10,8,.5); backdrop-filter:blur(6px); border:1px solid var(--line-gold);
  display:grid; place-items:center; color:var(--gold); transition:.4s var(--ease);
}
.work:hover .play{ background:var(--gold); color:var(--bg) }
/* Composición mosaico */
.w-a{ grid-column:span 4; grid-row:span 2 }
.w-b{ grid-column:span 2; grid-row:span 2 }
.w-c{ grid-column:span 2; grid-row:span 1 }
.w-d{ grid-column:span 2; grid-row:span 1 }
.w-e{ grid-column:span 3; grid-row:span 1 }
.w-f{ grid-column:span 3; grid-row:span 1 }

/* ---------- Para quién ---------- */
.audience{ background:var(--bg-2); border-block:1px solid var(--line) }
.aud-list{ margin-top:2.4rem; border-top:1px solid var(--line) }
.aud-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 0; border-bottom:1px solid var(--line); cursor:default;
  transition:padding .4s var(--ease);
}
.aud-row:hover{ padding-inline:1rem }
.aud-row .n{ font-family:var(--mono); font-size:.72rem; color:var(--gold); width:3rem }
.aud-row .t{ font-family:var(--serif); font-size:clamp(1.3rem,3vw,2.1rem); flex:1; transition:color .3s }
.aud-row:hover .t{ color:var(--gold) }
.aud-row .x{ font-size:.85rem; color:var(--cream-3); max-width:34ch; text-align:right }

/* ---------- Sobre mí ---------- */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center }
.about-media{ position:relative }
.about-media .m1{ border-radius:10px; overflow:hidden; border:1px solid var(--line-gold); box-shadow:0 40px 90px rgba(0,0,0,.5) }
.about-media .m1 img{ width:100%; aspect-ratio:3/4; object-fit:cover }
.about-media .m2{
  position:absolute; right:-8%; bottom:-12%; width:52%; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.6);
}
.about-media .m2 img{ width:100%; aspect-ratio:9/13; object-fit:cover; display:block }
.about-media .badge{
  position:absolute; top:-1.1rem; left:-1.1rem; z-index:4;
  background:var(--gold); color:#1a1206; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.5rem .8rem; border-radius:4px; font-weight:600;
}
.about h2{ font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.05 }
.about h2 em{ color:var(--gold) }
.about .body{ margin-top:1.5rem; color:var(--cream-2); max-width:48ch }
.about .body p+p{ margin-top:1rem }
.about .sign{ margin-top:1.8rem; font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--gold) }

/* ---------- Método ---------- */
.method-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem }
.step{ padding-top:1.4rem; border-top:1px solid var(--line-gold); position:relative }
.step .n{ font-family:var(--mono); font-size:.75rem; color:var(--gold); letter-spacing:.15em }
.step h4{ font-family:var(--serif); font-size:1.4rem; margin-top:1rem; font-weight:400 }
.step p{ font-size:.9rem; color:var(--cream-3); margin-top:.7rem; line-height:1.5 }

/* ---------- CTA final ---------- */
.cta-final{ text-align:center; overflow:hidden; position:relative; background:var(--bg-2); border-top:1px solid var(--line) }
.cta-final::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(60% 70% at 50% 120%, rgba(201,162,90,.22), transparent 70%);
}
.cta-final .wrap{ position:relative; z-index:2 }
.cta-final h2{ font-size:clamp(2.2rem,6vw,5rem); line-height:1.02; max-width:18ch; margin-inline:auto }
.cta-final h2 em{ color:var(--gold) }
.cta-final p{ margin:1.4rem auto 0; max-width:46ch; color:var(--cream-2); font-size:1.1rem }
.cta-final .hero-actions{ justify-content:center }

/* ---------- Footer ---------- */
.footer{ padding-block:clamp(3rem,7vh,5rem) var(--pad); border-top:1px solid var(--line); background:var(--bg) }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; border-bottom:1px solid var(--line) }
.footer .brand b{ font-size:1.6rem }
.footer .f-tag{ margin-top:1rem; color:var(--cream-3); max-width:32ch; font-size:.92rem }
.footer h5{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem }
.footer .f-col a, .footer .f-col p{ display:block; color:var(--cream-2); font-size:.92rem; margin-bottom:.6rem; transition:color .3s; width:fit-content }
.footer .f-col a:hover{ color:var(--gold) }
.footer-leader{ padding:2rem 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap }
.footer-leader .lead-txt{ font-size:.78rem; color:var(--cream-3); max-width:46ch; line-height:1.5 }
.footer-leader .lead-logos{ display:flex; gap:1rem; flex-wrap:wrap }
.footer-leader .logo-ph{
  height:46px; min-width:90px; padding:0 1rem; border:1px dashed var(--line-gold); border-radius:6px;
  display:grid; place-items:center; font-family:var(--mono); font-size:.56rem; letter-spacing:.1em;
  color:var(--cream-3); text-align:center; text-transform:uppercase;
}
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.8rem; flex-wrap:wrap }
.footer-bottom p{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--cream-3) }
.footer-bottom .socials{ display:flex; gap:1.4rem }
.footer-bottom .socials a{ font-size:.78rem; color:var(--cream-2) }
.footer-bottom .socials a:hover{ color:var(--gold) }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:850;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep)); color:#12100c;
  box-shadow:0 14px 34px -8px rgba(201,162,90,.6); transition:.4s var(--ease);
  opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
}
.wa-float.show{ opacity:1; transform:none; pointer-events:auto }
.wa-float:hover{ transform:translateY(-3px) scale(1.05) }
.wa-float svg{ width:28px; height:28px }

/* ---------- Barra de progreso ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:950; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)) }

/* ---------- Cursor personalizado ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; will-change:transform }
.cursor .ring{ width:34px; height:34px; border:1px solid var(--cream); border-radius:50%; transform:translate(-50%,-50%); transition:width .3s,height .3s }
.cursor.big .ring{ width:64px; height:64px }
.cursor .dot{ position:fixed; top:0; left:0; width:5px; height:5px; background:var(--gold); border-radius:50%; transform:translate(-50%,-50%) }

/* ============================================================
   REVEAL (defensivo: si el JS falla, se ve igual)
   ============================================================ */
/* Contenido SIEMPRE visible por defecto. El estado oculto+animación solo se
   aplica cuando <html> tiene .anim, que el head añade únicamente si la página
   se está viendo (no en pestañas en segundo plano, no sin JS). Así el
   contenido nunca se queda invisible por una animación que no llega a correr. */
.reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease) }
html.anim .reveal{ opacity:0; transform:translateY(28px) }
html.anim .reveal.in{ opacity:1; transform:none }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .hero{ align-items:center; padding-top:6.5rem }
  .hero .wrap{ grid-template-columns:1fr }
  /* El retrato pasa arriba, más pequeño, alineado a la izquierda */
  .hero-portrait{ display:block; order:-1; justify-self:start; width:min(190px,42vw); margin-bottom:1.6rem }
  .serv-grid{ grid-template-columns:repeat(2,1fr) }
  .about{ grid-template-columns:1fr; gap:5rem }
  .about-media{ max-width:420px }
  .method-grid{ grid-template-columns:repeat(2,1fr) }
  .footer-top{ grid-template-columns:1fr 1fr }
  .manifesto-grid{ grid-template-columns:1fr }
  .works-grid{ grid-template-columns:repeat(4,1fr) }
  .w-a{ grid-column:span 4 } .w-b{ grid-column:span 2 } .w-e,.w-f{ grid-column:span 2 }
}
@media (max-width:680px){
  .nav-links{ display:none }
  .nav-burger{ display:block }
  .cursor{ display:none }
  .hero{ align-items:center; padding-top:5.5rem; padding-bottom:2.5rem }
  .hero-portrait{ width:min(150px,40vw); margin-bottom:1.2rem }
  .hero-title{ font-size:clamp(2.6rem,12vw,4rem) }
  .serv-grid{ grid-template-columns:1fr }
  .method-grid{ grid-template-columns:1fr }
  .footer-top{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; align-items:flex-start }
  .works-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px }
  .w-a,.w-b,.w-c,.w-d,.w-e,.w-f{ grid-column:span 2; grid-row:span 1 }
  .w-a{ grid-row:span 2 }
  .aud-row .x{ display:none }
  .about-media .m2{ width:46% }
}

/* Solo atenuamos efectos realmente intrusivos con reduced-motion.
   NO ocultamos contenido (Windows trae reduced-motion activado a menudo). */
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation-duration:80s }
  .hero-portrait .pf{ animation:none }
}