/* Paleta inspirada en el logotipo (fondo oscuro, acentos naranja/ámbar) */
:root{
  --bg: #0a0d10;
  --bg-soft:#11151b;
  --accent:#ff7a18;
  --accent-2:#ffa733;
  --text:#e8eef4;
  --muted:#9fb0c0;
  --card:#151a22;
  --glass: rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text); background:linear-gradient(180deg,#071018,#0b1219 30%,#0a0d10);
}
.container{width:min(1100px,92%); margin-inline:auto}

.hero{position:relative; min-height:68vh; display:grid; place-items:center; text-align:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.35) saturate(1.2)}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, transparent, rgba(0,0,0,.7))}
.hero .logo{width:120px; height:120px; object-fit:contain; filter:drop-shadow(0 8px 20px rgba(0,0,0,.7))}
.hero h1{font-size:clamp(2rem,5vw,3.5rem); margin:.5rem 0}
.subtitle{color:var(--muted); margin-bottom:1rem}
.btn{display:inline-block; padding:.8rem 1.2rem; border-radius:999px; text-decoration:none; font-weight:700; letter-spacing:.2px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#111}
.btn.whats{background:#25D366; color:#111; font-weight:800}

.topnav{display:flex; gap:1rem; justify-content:center; padding:1rem 0}
.topnav a{color:var(--muted); text-decoration:none; padding:.4rem .8rem; border-radius:.6rem}
.topnav a:hover{background:rgba(255,255,255,.06); color:var(--text)}

.section{padding:3rem 0}
.section h2{font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 1.2rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card img{width:100%; height:260px; object-fit:cover}
.card-body{padding:1rem}
.card-body h3{margin:.2rem 0 .3rem}
.card-body p{color:var(--muted); margin:0}

.video-wrapper{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.video-wrapper iframe{position:absolute; top:0; left:0; width:100%; height:100%}

.masonry{columns: 2 300px; column-gap:1rem}
.masonry img{width:100%; border-radius:14px; margin:0 0 1rem; break-inside:avoid; border:1px solid rgba(255,255,255,.06)}

.embeds{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem}
.embed{background:var(--card); border-radius:16px; padding:1rem; border:1px solid rgba(255,255,255,.06)}
.fb-frame iframe{width:100%; height:600px; border:0; border-radius:12px}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem}
label{display:block; font-weight:600; margin:.6rem 0}
input,textarea{width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#0f141b; color:var(--text)}
input:focus,textarea:focus{outline:2px solid var(--accent)}
.form-note{color:var(--muted); font-size:.9rem}

.footer{padding:2rem 0; background:#070b10; border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap}
.footer a{color:var(--accent-2); font-weight:700; text-decoration:none}

.float-whatsapp{position:fixed; right:16px; bottom:16px; width:60px; height:60px; display:grid; place-items:center; border-radius:50%; background:#25D366; box-shadow:0 12px 30px rgba(0,0,0,.45); z-index:20; border:3px solid #0b141b}
.float-whatsapp img{width:36px; height:36px; filter:invert(1)}

@media (prefers-reduced-motion: no-preference){
  .hero-content{animation:fadeUp .8s ease both .1s}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
}