/* Casa Eluney — estilos base (portado de Casas Bariloche.dc.html) */

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes revealPhoto{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.reveal-photo{animation:revealPhoto .7s cubic-bezier(.22,1,.36,1) both}
@media (min-width:640px){
  .reveal-photo:nth-child(6n+1){animation-delay:0s}
  .reveal-photo:nth-child(6n+2){animation-delay:.08s}
  .reveal-photo:nth-child(6n+3){animation-delay:.16s}
  .reveal-photo:nth-child(6n+4){animation-delay:.24s}
  .reveal-photo:nth-child(6n+5){animation-delay:.32s}
  .reveal-photo:nth-child(6n+6){animation-delay:.4s}
}

*{box-sizing:border-box}
body{margin:0;background:#f6f3ee}
a{color:oklch(48% 0.09 210);text-decoration:none}
a:hover{color:oklch(40% 0.10 210)}
[hidden]{display:none !important}

.page{
  font-family:'Work Sans',sans-serif;
  color:oklch(24% 0.01 75);
  background:
    radial-gradient(1200px 600px at 15% 0%,oklch(97% 0.02 210 / 0.55),transparent 60%),
    radial-gradient(1000px 600px at 90% 20%,oklch(96% 0.03 60 / 0.5),transparent 60%),
    oklch(97% 0.012 75);
  min-height:100vh;
  overflow-x:hidden;
}

/* imágenes que llenan su contenedor (equivalente a <image-slot>) */
.fill{width:100%;height:100%;object-fit:cover;display:block}

.hero-photo-desktop{display:none}
.hero-photo-mobile{display:block}
.nav-house-link{display:none}
.nav-below-header{margin-top:76px}
.nav-below-header-lg{padding-top:96px}
@media (min-width:769px){
  .hero-photo-desktop{display:block}
  .hero-photo-mobile{display:none}
  .nav-house-link{display:inline-block}
  .nav-below-header{margin-top:84px}
  .nav-below-header-lg{padding-top:104px}
}
@media (min-width:820px){
  .photo-masonry{column-count:3 !important;max-width:960px !important}
}

/* nav: casa activa */
.nav-house.active{background:oklch(93% 0.02 75 / 0.8)}
.nav-house.active[data-house="pequena"]{color:oklch(48% 0.10 210)}
.nav-house.active[data-house="gran"]{color:oklch(55% 0.13 45)}

/* estados hover (reemplazan style-hover del canvas) */
.h-nav:hover{background:oklch(92% 0.01 75 / 0.7)}
.h-wa:hover{background:oklch(18% 0.01 75);transform:translateY(-1px)}
.h-glass:hover{background:oklch(100% 0 0 / 0.28);transform:translateY(-2px)}
.h-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px oklch(30% 0.02 75 / 0.18)}
.h-tile:hover{transform:translateY(-4px);box-shadow:0 22px 46px oklch(30% 0.02 75 / 0.14)}
.h-lift:hover{transform:translateY(-2px)}
.h-lift3:hover{transform:translateY(-3px)}
.h-photo:hover{transform:scale(1.03) rotate(var(--tilt,0deg))}

/* mobile-first layout classes */
.hero-inner{padding:24px 20px}
.hero-cta{display:flex;gap:10px;flex-direction:column;align-items:stretch}
.hero-cta a{text-align:center}
.grid-cards{display:grid;grid-template-columns:1fr;gap:20px}
.grid-tiles{display:grid;grid-template-columns:1fr;gap:12px}
.grid-split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.grid-activities{display:grid;grid-template-columns:1fr;gap:18px}

@media (min-width:480px){
  .hero-cta{flex-direction:row;align-items:center;gap:12px}
  .hero-cta a{text-align:left}
  .grid-activities{grid-template-columns:1fr 1fr}
}
@media (min-width:640px){
  .hero-inner{padding:44px 34px}
  .grid-tiles{grid-template-columns:1fr 1fr;gap:16px}
  .grid-cards{gap:24px}
}
@media (min-width:769px){
  .grid-cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .grid-tiles{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .grid-split{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px}
}
@media (min-width:900px){
  .grid-activities{grid-template-columns:repeat(4,1fr)}
}

/* hamburger mobile */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:100px;color:oklch(45% 0.01 75);transition:background .2s ease;align-items:center;justify-content:center}
.nav-toggle:hover{background:oklch(92% 0.01 75 / 0.7)}

.nav-mobile{display:none;position:fixed;top:80px;left:16px;right:16px;z-index:49;background:oklch(99% 0.006 75 / 0.96);backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);border:1px solid oklch(100% 0 0 / 0.55);border-radius:24px;box-shadow:0 10px 34px oklch(30% 0.02 75 / 0.14);padding:10px;flex-direction:column;gap:4px}
.nav-mobile.open{display:flex}
.nav-mobile a{font-size:15px;font-weight:500;color:oklch(40% 0.01 75);padding:13px 16px;border-radius:14px;transition:background .2s ease;display:block}
.nav-mobile a:hover{background:oklch(92% 0.01 75 / 0.7);color:oklch(32% 0.01 75)}
.nav-mobile .wa-link{background:#47DD42;color:white !important;font-weight:600;text-align:center;margin-top:4px;border-radius:14px}
.nav-mobile .wa-link:hover{background:oklch(18% 0.01 75) !important;transform:none}

@media (min-width:769px){
  #main-nav{display:flex}
}
@media (max-width:768px){
  #main-nav{display:none !important}
  .nav-toggle{display:flex}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}