body{
  margin:0;
}

.hero-parallax{
  position:relative;
  width:100%;
  min-height:140vh;
  overflow:hidden;
  background:#05070d;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:url('bg-portada.png') center/cover no-repeat;
  transform:scale(1.1);
  will-change:transform;
  z-index: 1;
}

.hero-person{
  position:absolute;
  inset:0;
  background:url('ra.png') no-repeat;
  background-size:auto 64%;
  background-position:78% 54%;
  pointer-events:none;
  z-index: 2;
}

@media(max-width:768px){
  .hero-person{
    background-position:74% 100%;
    background-size:auto 64%;
  }
}

.hero-video{
  position: absolute;
  top: 0;
  left: 0;

  width: 60%;
  height: 400px;

  object-fit: cover;
  object-position: center top;

  z-index: 0;
  pointer-events: none;
}
@media(max-width:768px){
.hero-video{
     width: 100%;
      object-position: right top;
  }
}

/* ====== BLOQUE 2 / CASA SUPERPUESTA ====== */

.casa-parallax{
  position: relative;
  width: 100%;
  height: 100vw;

  /* clave: se monta sobre el hero */
  margin-top: -220px;

  z-index: 10; /* mayor que el hero */
  overflow: hidden;
}

.casa-bg{
  position:absolute;
  inset:0;

  background-image:url("bg-casa.jpg");
  background-size:cover;

  
  background-position: center top;
  background-repeat:no-repeat;

  transform: translate3d(0,0,0) scale(1.05);
  will-change: transform;
}

/* Mobile */
@media (max-width: 768px){
  .casa-parallax{
    height: clamp(380px, 65vh, 620px);
    margin-top: -160px;
  }
}

/* Separador ornamental al pie del hero */
.hero-separator{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 216px;         
  height: 200px;
  z-index: 6;            /* arriba de bg/persona */

  background-image: url("ornamento.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 100%; /* mantiene proporción */

  pointer-events: none;
}

.separador-wrapper{
  position: relative;
  z-index: 50; /* más alto que casa y video */
  margin-top: -40px; /* lo encimás hacia arriba */
  margin-bottom: -40px; /* invade el video */
  pointer-events: none;
}

/* imagen */
.separador-dos{
  display: block;
  width: 100%;
  height: auto;
}

/* Si querés que en mobile ocupe más ancho (estire) */
@media (max-width: 768px){
  .hero-separator{
    background-size: auto 50%;
    bottom: 160px;     
  }
  .hero-separator-dos{
  top: -30px;    
  }
}


/* Contenedor de capas */
.header-animation{
 position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 520px;

  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

/* Si querés que en mobile ocupe más ancho (estire) */
@media (max-width: 768px){
.header-animation{
     height: 420px;   
  }
}

/* Capa base */
.header-animation .anima-layer{
  position:absolute;
  inset:-80px 0 0 0; /* un poco más alto para que no “corte” al mover */
  width:100%;
  min-width:900px;
  min-height:500px;
  background-repeat:repeat-x;
  will-change: background-position;
  transform: translate3d(0,0,0);
}

/* Nube lejana */
.header-animation .clouds-1{
  background-image:url("clouds_2.png");
  background-position: 200px 30px;
  opacity: 0.45;
}

/* Nube cercana */
.header-animation .clouds-2{
  background-image:url("clouds_2.png");
  background-position: 200px 100px;
  opacity: 0.75;
}
/* ====== BLOQUE VIDEO ====== */

.video-section{
  position: relative;
  width: 100%;
  height: clamp(420px, 85vh, 900px);
  overflow: hidden;
  background: #000; /* fallback */
  z-index: 9;
}

/* Video como background */
.video-section .video-bg{
  position: absolute;
  top: 50%;
  left: 50%;

  min-width: 100%;
  min-height: 100%;

  width: auto;
  height: auto;

  transform: translate(-50%, -50%);
  object-fit: cover;

  pointer-events: none;
}
@media (max-width: 768px){
  .video-section{

  height: 80vh;

}
  .video-section .video-bg{
    left: 0;
    transform: translate(-5%, -50%);
  }
}

.hero-sticker{
  position: absolute;
 z-index: 3;

 
  left: 15vw;
  top: 30vh;

  /* Tamaño responsivo sin deformar */
  width: 30vw;
  height: auto;

  pointer-events: none;
  user-select: none;

  /* opcional: que se integre mejor */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

/* Por defecto: desktop */
.hero-sticker{
  display: block;
}

.hero-sticker-mobile{
  display: none;
}

/* Mobile */
@media (max-width: 768px){
  .hero-sticker{
    display: none;
  }

  .hero-sticker-mobile{
    display: block;
    position: absolute;
    z-index: 3;

    left: 50%;
    top: 50px;

    transform: translateX(-50%);
    width: min(70vw, 320px);
    height: auto;

    pointer-events: none;
    user-select: none;

    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  }
}




/* ====== LUCES ENTRE HERO Y CASA ====== */
.luces-parallax{
  position: relative;
  width: 100%;
  z-index: 9;             /* casa = 10, así casa queda por arriba si se montan */
  pointer-events: none;

/
    
}

.luces-img{
  display: block;
  width: 100%;
  height: auto;           /* ✅ alto automático real */
  will-change: transform;
  transform: translate3d(0,0,0);
}
/* Capa que contiene los 4 elementos */
.casa-items{
  position: absolute;
  inset: 0;
  z-index: 12;               /* arriba del fondo casa */
  pointer-events: none;      /* la capa no intercepta */
}

/* Cada item */
.casa-item{
  position: absolute;
  display: block;
  pointer-events: auto;      /* pero el item sí */
  transform-style: preserve-3d;
  perspective: 800px;
}

/* La imagen del item */
.casa-item img{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  will-change: transform;
  transition: transform 260ms ease, filter 260ms ease;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35));
}

/* Hover: giro leve hacia un costado */
.casa-item:hover img{
  transform: rotateY(-10deg) rotateX(3deg) translateZ(0);
  filter: drop-shadow(0 14px 20px rgba(0,0,0,0.45));
}



.item-1{
  left: 35%;
  top: 48%;
  width: 13%;
}

.item-2{
  left: 58%;
  top: 20%;
  width: 14%;
}

.item-3{
  left: 78%;
  top: 50%;
  width: 16%;
}

.item-4{
  left: 42%;
  top: 30%;
  width: 16%;
}
.item-5{
  left: 8%;
  top: 34%;
  width: 16%;
}
.item-6{
  left: 59%;
  top: 38%;
  width: 12%;
}
.item-7{
  left: 49%;
  top: 39%;
  width: 32%;
}


@media (max-width: 768px){
.item-1{
  left: 30%;
  top: 44%;
  width: 24%;
}

.item-2{
  left: 38%;
  top: 20%;
  width: 24%;
}

.item-3{
  left: 66%;
  top: 16%;
  width: 25%;
}
.item-4{
  left: 44%;
  top: 72%;
  width: 30%;
}
.item-5{
  left: -4%;
  top: 30%;
  width: 30%;
}
.item-6{
  left: 60%;
  top: 37%;
  width: 21%;
}
.item-7{
  left: 49%;
  top: 38%;
  width: 45%;
}
}

/* ===== Redes sociales sobre el video ===== */

.video-socials{
  position: absolute;
  left: 50%;
  bottom: 28px;

  transform: translateX(-50%);
  display: flex;
  gap: 22px;

  z-index: 10; /* arriba del video */
}

.video-socials a{
  display: inline-flex;
  width: 64px;
  height: 64px;
}

.video-socials img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Hover sutil */
.video-socials a:hover img{
  transform: translateY(-4px) scale(1.05);
  opacity: 0.9;
}

/* Mobile: un poco más chicos */
@media (max-width: 768px){
  .video-socials{
    bottom: 20px;
    gap: 18px;
  }

  .video-socials a{
    width: 48px;
    height: 48px;
  }
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  .video-socials img{
    transition: none;
  }
}

/* Overlay clickeable del video */
.video-link-overlay{
  position: absolute;
  inset: 0;
  z-index: 5;       /* arriba del video */
  cursor: pointer;
}

/* 👇 IMPORTANTE:
   los íconos quedan arriba del link */
.video-socials{
  z-index: 10;
}


/* ===== CUE (desktop por defecto) ===== */
.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: 34%;
  transform: translateX(-50%);
  z-index: 20;

  pointer-events: none;
  opacity: 0.9;

  transition: opacity 220ms ease, transform 220ms ease;
}

/* Mouse (desktop) */
.scroll-cue__wheel{
  position: relative;
  display: block;

  width: 28px;
  height: 44px;
  border: 2px solid rgba(255,255,255,0.75);
  border-radius: 18px;
}

.scroll-cue__wheel::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  transform: translateX(-50%);

  width:4px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.75);

  animation: scrollWheel 1.2s ease-in-out infinite;
}

@keyframes scrollWheel{
  0%   { transform: translateX(-50%) translateY(0);    opacity: 1; }
  60%  { transform: translateX(-50%) translateY(12px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ===== Touch cue (oculto en desktop) ===== */
.touch-cue{
  display: none;
  position: relative;
  width: 60px;
  height: 60px;
}

/* Finger */
.touch-cue__finger{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 18px;
  height: 26px;
  border-radius: 12px;
  background: rgba(255,255,255,0.85);

  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}

/* Arrow */
.touch-cue__arrow{
  position:absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);

  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid rgba(255,255,255,0.85);

  opacity: 0.9;
  animation: touchArrow 1.2s ease-in-out infinite;
}

/* animación swipe */
@keyframes touchArrow{
  0%   { transform: translateX(-50%) translateY(0);   opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: translateX(-50%) translateY(18px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);   opacity: 0; }
}

/* Mobile: ocultar mouse, mostrar touch */
@media (max-width: 768px){
  .scroll-cue__wheel{ display: none; }
  .touch-cue{ display: block; }
}

/* Ocultar cuando se scrollea */
.scroll-cue.is-hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .scroll-cue__wheel::after{ animation: none; }
  .touch-cue__arrow{ animation: none; }
}