/* ============================================================
   AGAME · Sistema de movimiento — PROTOTIPO visual (solo home)
   Scroll reveals, contador animado, hover spotlight, hero canvas,
   sección editorial "conoce a tu abogado".
   ============================================================ */

/* ---------- Progreso de scroll (barra superior) ---------- */
#scrollProgress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg, rgba(217,210,193,.9), #f3ead0);
  z-index:10000;pointer-events:none;transition:width .1s linear;
}

/* ---------- Starfield de fondo, fijo, para TODA la página ---------- */
#bgCanvas{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:0;
  pointer-events:none;opacity:.55;
}
body{position:relative;}
/* Todo el contenido real por encima del canvas de fondo */
.hero,main > section,.asym-desktop-wrap,.site-footer,#cookieBanner,.mobile-cta-bar,#cb-toggle,#cb-panel{position:relative;z-index:1;}

/* ---------- Auroras: manchas de gradiente flotando muy despacio ---------- */
.aurora{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.16;}
.aurora.a1{width:420px;height:420px;background:radial-gradient(circle,#8a97b8,transparent 70%);top:-100px;left:-100px;animation:auroraDrift1 26s ease-in-out infinite;}
.aurora.a2{width:360px;height:360px;background:radial-gradient(circle,#d9c9a0,transparent 70%);bottom:-80px;right:-80px;animation:auroraDrift2 32s ease-in-out infinite;}
@keyframes auroraDrift1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,80px);}}
@keyframes auroraDrift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-70px,-50px);}}
@media(prefers-reduced-motion: reduce){.aurora{animation:none !important;}}

/* ---------- Hero: paralaje suave del monograma con el scroll ---------- */
.hero-logo{will-change:transform;}

/* ---------- Textura de grano sutil (toda la página) ---------- */
#grainOverlay{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header dinámico al hacer scroll ---------- */
.site-header{transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;}
.site-header.is-scrolled{
  background:rgba(11,21,32,.88) !important;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  border-bottom-color:rgba(217,210,193,.14) !important;
}

/* ---------- Hero: texto en degradado + ornamentos flotantes ---------- */
.hero-main{
  background:linear-gradient(100deg, var(--beige) 20%, #f3ead0 40%, var(--beige) 60%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
/* ---------- Hero: foto de fondo (Ken Burns) con capa oscura ---------- */
.hero.centered{position:relative;overflow:hidden;}
.hero-logo{transition:transform .1s ease-out;}

/* ---------- Monograma: revelado tipo "se dibuja" al cargar ---------- */
.hero-logo-wrap{position:relative;display:inline-block;}
.hero-logo-wrap .hero-logo{
  animation:logoReveal 1.7s cubic-bezier(.65,0,.35,1) both;
  animation-delay:.15s;
}
.hero-logo-wrap::after{
  content:"";position:absolute;left:2%;right:2%;height:3px;top:0;
  background:linear-gradient(90deg, transparent, rgba(217,210,193,.95), transparent);
  filter:blur(1px);
  box-shadow:0 0 16px 3px rgba(217,210,193,.55);
  animation:logoSweep 1.7s cubic-bezier(.65,0,.35,1) both;
  animation-delay:.15s;
  pointer-events:none;
}
@keyframes logoReveal{
  0%{clip-path:inset(0 0 100% 0);}
  100%{clip-path:inset(0 0 0% 0);}
}
@keyframes logoSweep{
  0%{top:0%; opacity:1;}
  92%{opacity:1;}
  100%{top:100%; opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .hero-logo-wrap .hero-logo{animation:none !important;clip-path:none !important;}
  .hero-logo-wrap::after{display:none !important;}
}
.hero-bg-photo{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1;overflow:hidden;}
.hero-bg-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  filter:grayscale(.2) brightness(.6) saturate(.9);
  animation:heroKenBurns 26s ease-in-out infinite alternate;
  transform-origin:center 30%;
}
.hero-bg-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(14,26,38,.55) 0%, rgba(14,26,38,.72) 45%, rgba(14,26,38,.95) 100%),
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(14,26,38,.15), rgba(14,26,38,.6) 100%);
}
@keyframes heroKenBurns{
  0%{transform:scale(1.03) translate(0,0);}
  100%{transform:scale(1.09) translate(-1%,-1.2%);}
}
/* Deja libre el hueco lateral donde asoman las columnas decorativas del sitio (body:before/after) */
@media (min-width:1000px) and (max-width:1199.98px){
  .hero-bg-photo{left:150px;right:150px;}
}
@media (min-width:1200px) and (max-width:1499.98px){
  .hero-bg-photo{left:210px;right:210px;}
}
@media (min-width:1500px){
  .hero-bg-photo{left:250px;right:250px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-photo img{animation:none !important;transform:scale(1.03);}
}

/* ---------- Filas asimétricas alternas (texto + imagen a sangre) ---------- */
.asym-desktop-wrap{display:block;margin:3rem 0;}
@media (max-width:768px){.asym-desktop-wrap{display:none !important;}}
/* Deja libre el hueco lateral donde asoman las columnas decorativas del sitio (mismo cálculo que .hero-bg-photo) */
@media (min-width:1000px) and (max-width:1199.98px){
  .asym-desktop-wrap{margin-left:150px;margin-right:150px;}
}
@media (min-width:1200px) and (max-width:1499.98px){
  .asym-desktop-wrap{margin-left:210px;margin-right:210px;}
}
@media (min-width:1500px){
  .asym-desktop-wrap{margin-left:250px;margin-right:250px;}
}

.asym-row{display:flex;align-items:stretch;height:380px;}
.asym-row .asym-text{flex:0 0 460px;max-width:460px;padding:0 4vw;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;}
.asym-row .asym-media{flex:1 1 auto;height:380px;overflow:hidden;position:relative;min-width:0;}
.asym-row .asym-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Respiro entre la imagen y el borde de la columna: antes llegaba a 0px, ahora deja margen y redondea esa esquina */
.asym-row:not(.reverse) .asym-media{margin-right:28px;border-radius:0 14px 14px 0;}
.asym-row.reverse .asym-media{margin-left:28px;border-radius:14px 0 0 14px;}
@media (max-width:1300px){
  .asym-row:not(.reverse) .asym-media{margin-right:16px;}
  .asym-row.reverse .asym-media{margin-left:16px;}
}
.asym-row.reverse{flex-direction:row-reverse;}
.asym-row .section-eyebrow{margin-bottom:.8rem;}
.asym-row h2{font-family:'EB Garamond',Georgia,serif;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;line-height:1.25;margin-bottom:.9rem;}
.asym-row p{font-size:.95rem;line-height:1.75;color:var(--beige-2);opacity:.92;max-width:42ch;}

@media (max-width:1100px){
  .asym-row .asym-text{flex-basis:320px;max-width:320px;padding:0 28px;}
}
.section-eyebrow{position:relative;}
.section-eyebrow::before{
  content:"";width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);
  display:inline-block;flex-shrink:0;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}

.reveal-stagger > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.10s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.18s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.34s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.42s}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero-main{animation:none !important;}
}

/* ---------- Tarjetas: acento superior en degradado + spotlight + icono ---------- */
.home-feature-cards .svc-card{
  --mx:50%; --my:50%;
  position:relative;overflow:hidden;
  border-color:rgba(217,210,193,.14) !important;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.home-feature-cards .svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(217,210,193,.7), transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.home-feature-cards .svc-card:hover::before{transform:scaleX(1);}
.home-feature-cards .svc-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.4);}
.home-feature-cards .svc-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx) var(--my), rgba(217,210,193,.12), transparent 70%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.home-feature-cards .svc-card:hover::after{opacity:1;}
.home-feature-cards .svc-card .card-num{
  font-family:'EB Garamond',Georgia,serif;font-size:1.6rem;color:rgba(217,210,193,.28);
  margin-bottom:.2rem;line-height:1;
}

.area-pill{transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease;}

/* ---------- Botones: barrido de brillo al pasar el ratón ---------- */
.btn{position:relative;overflow:hidden;}
.btn::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-20deg);transition:left .65s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.btn:hover::before{left:130%;}

/* ---------- Enlaces del menú: subrayado animado ---------- */
#menu > a{position:relative;}
#menu > a::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#menu > a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---------- CTA principal del hero: respiración de luz ---------- */
.hero-cta .btn-primary{animation:ctaGlow 2.8s ease-in-out infinite;}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 0 0 rgba(217,210,193,0);}
  50%{box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 24px 3px rgba(217,210,193,.28);}
}
@media (prefers-reduced-motion: reduce){.hero-cta .btn-primary{animation:none !important;}}

/* ---------- Cursor personalizado: resplandor que sigue el ratón ---------- */
#cursorGlow{
  position:fixed;top:0;left:0;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(217,210,193,.09), transparent 72%);
  pointer-events:none;z-index:40;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .5s ease;mix-blend-mode:screen;
}
#cursorGlow.is-active{opacity:1;}
@media(hover:none){#cursorGlow{display:none !important;}}

/* ---------- Revelado tipo cortina para imágenes ---------- */
.reveal-wipe{position:relative;overflow:hidden;}
.reveal-wipe img{transform:scale(1.14);transition:transform 1.15s cubic-bezier(.16,1,.3,1);display:block;}
.reveal-wipe::before{
  content:"";position:absolute;inset:0;background:#0e1a26;z-index:2;
  transform-origin:right;transform:scaleX(1);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.reveal-wipe.is-visible::before{transform:scaleX(0);}
.reveal-wipe.is-visible img{transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal-wipe::before{display:none;}
  .reveal-wipe img{transform:none !important;transition:none !important;}
}