/* =========================================
   ÁTICO — Propuesta 2 (Atmosférica/Sensorial)
   + imágenes y micro-interacciones
   Prefijo .atx-ambient
   ========================================= */
.atx-ambient{
  --atx-text: #f4f4f4;
  --atx-muted: #9b9b9b;
  --atx-border: rgba(255,255,255,.08);
  --atx-container: min(1200px, 92vw);
  --atx-ls: -0.02em;
  --atx-padY: 84px;

  --row-h: 108px;
  --row-rad: 16px;
  --light-duration: 900ms;
  --spot-size: 44%;            /* tamaño del spotlight */
  --tilt: 10deg;               /* máximo tilt */
  --zoom: 1.06;                /* zoom al hover */
  --soon-glow: 0 0 18px rgba(255,255,255,.25);

  color: var(--atx-text);
  background: radial-gradient(1200px 600px at 8% -10%, rgba(255,255,255,.05), transparent 55%),
              linear-gradient(#0a0a0a, #0b0b0b);
  padding: var(--atx-padY) 0;
  border-block: 1px solid var(--atx-border);
}
.atx-ambient .atx-wrap{ width: var(--atx-container); margin-inline:auto; }
.atx-ambient .atx-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;
}
.atx-ambient .atx-eyebrow{
  color: var(--atx-muted); text-transform:uppercase; letter-spacing:.14em; font-size:12px;
}
.atx-ambient .atx-title{
  margin:0; font-weight:700; letter-spacing:var(--atx-ls);
  font-size: clamp(28px, 4.5vw, 56px); line-height:1;
}

.atx-ambient .atx-rows{
  list-style:none; padding:0; margin:18px 0 0; display:grid; gap:14px;
}

.atx-ambient .atx-row{
  position:relative; overflow:hidden; height:var(--row-h);
  border-radius: var(--row-rad);
  transform-style: preserve-3d;
  background: #0b0b0b; /* base sin bordes visibles */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* Capa de imagen de fondo con zoom suave */
.atx-ambient .atx-bg{
  position:absolute; inset:0; background-size: cover; background-position: center;
  filter: brightness(.6) contrast(1.05) saturate(1.05);
  transform: translateZ(-20px) scale(1); transition: transform .55s ease, filter .4s ease;
  will-change: transform, filter;
}
.atx-ambient .atx-row.hovering .atx-bg{
  transform: translateZ(-20px) scale(var(--zoom));
  filter: brightness(.82) contrast(1.08) saturate(1.1);
}

/* Spotlight que sigue el cursor */
.atx-ambient .atx-glare{
  position:absolute; inset:-20%;
    --x: 50%; --y: 50%;
  background:
    radial-gradient( circle var(--spot-size) at var(--x) var(--y),
      rgba(255,255,255,.22), rgba(255,255,255,0) 60% );
  mix-blend-mode: screen; opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.atx-ambient .atx-row.hovering .atx-glare{ opacity:.8; }

/* Título: inicia susurrado */
.atx-ambient .atx-row-title{
  position:absolute; inset:0; display:flex; align-items:center; padding:0 28px;
  font-size: clamp(20px, 2.6vw, 36px); letter-spacing:var(--atx-ls); font-weight:700;
  color:var(--atx-text); opacity:.14; filter: blur(.6px);
  transition: opacity .25s ease, filter .25s ease;
  pointer-events:none;
  text-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Haz de luz de barrido */
.atx-ambient .atx-row::before{
  content:""; position:absolute; inset:-10% -20%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  transform: translateX(-65%); opacity:0; pointer-events:none;
}
.atx-ambient .atx-row.hovering::before{
  animation: atx-sweep var(--light-duration) ease-out forwards;
  opacity:1;
}

.atx-ambient .atx-row.hovering{
  transform: perspective(900px) rotateX(calc(var(--tY,0) * 1deg)) rotateY(calc(var(--tX,0) * 1deg));
}

/* Próximamente con glow sutil */
.atx-ambient .atx-soon{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--atx-muted); opacity:0; filter: blur(.2px);
  transition: opacity .35s ease, text-shadow .35s ease, color .35s ease;
  pointer-events:none;
}
.atx-ambient .atx-row.revealed .atx-row-title{
  opacity:1; filter: blur(0);
  text-shadow: 0 1px 8px rgba(255,255,255,.08);
}
.atx-ambient .atx-row.revealed .atx-soon{
  opacity:.9; color:#ededed; text-shadow: var(--soon-glow);
}

@keyframes atx-sweep{
  from { transform: translateX(-65%) rotate(0.001deg); }
  to   { transform: translateX(65%)  rotate(0.001deg); }
}

/* Responsive */
@media (max-width: 980px){
  .atx-ambient{
    --atx-padY: 64px; --row-h: 92px; --spot-size: 60%;
  }
  .atx-ambient .atx-row-title{ padding: 0 22px; }
}


/* Video de fondo ocupa todo el contenedor */
.atx-ambient .atx-bg video.atx-bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: brightness(.6) contrast(1.05) saturate(1.05);
}
.atx-ambient .atx-bg{ position:absolute; inset:0; }