:root{
  --bg:#232433;
  --bg-elev:#2c2d3e;
  --primary:#4aa4bf;
  --accent:#b4362f;
  --text:#e6e8ee;
  --muted:#aab0c0;
  --ring: rgba(74,164,191,.45);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,"Noto Sans",sans-serif;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Navbar */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px);
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--bg-elev) 70%, #fff 0%);}
.nav .wrap{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
.brand img{width:44px; height:44px; border-radius:50%; background:#1e2633;}
.menu{display:flex; gap:22px}
.menu a{padding:10px 14px; border-radius:12px; color:var(--muted)}
.menu a:hover{background:var(--bg-elev); color:var(--text)}
.cta{background:linear-gradient(135deg,var(--primary),var(--accent)); padding:10px 16px; border-radius:14px; font-weight:600; box-shadow:var(--shadow)}

/* Hero */
.hero{max-width:1200px; margin:0 auto; padding:60px 20px 20px; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center}
.hero h1{font-size: clamp(30px, 4.5vw, 56px); line-height:1.02; margin:0 0 14px}
.hero p{color:var(--muted); font-size:clamp(14px, 1.4vw, 18px)}
.hero-card{background: radial-gradient(1200px 500px at 0% -10%, color-mix(in oklab, var(--primary) 25%, transparent), transparent 60%), var(--bg-elev);
  border:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%); padding:26px; border-radius:var(--radius); box-shadow:var(--shadow)}
.hero .logo{width:110px; height:110px; border-radius:50%; background:var(--bg); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-head{display:flex; gap:18px; align-items:center}
.brand-strong{font-size:18px}
.pill{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; background:color-mix(in oklab, var(--primary) 18%, #000 82%);
  border:1px solid var(--ring); border-radius:999px; color:#d9f2fb; font-weight:600; margin-bottom:12px}
.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.chip{display:inline-block; font-size:12px; letter-spacing:.2px; padding:6px 10px; border:1px dashed var(--ring); border-radius:999px; color:#d4eff8;
  background:color-mix(in oklab, var(--primary) 12%, #000 88%)}

/* Section wrapper */
section{max-width:1200px; margin:40px auto; padding:0 20px}
.section-title{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.section-title h2{margin:0; font-size: clamp(22px, 2.4vw, 32px)}
.dot{width:10px; height:10px; background:linear-gradient(135deg,var(--accent),var(--primary)); border-radius:999px; box-shadow:0 0 0 6px rgba(74,164,191,.08)}
.muted{color:var(--muted)}
.small{margin-top:-6px; margin-bottom:14px}

/* Servicios – Carrusel */
.carousel{position:relative; overflow:hidden; border-radius:var(--radius);}
.track{display:flex; gap:20px; scroll-behavior:smooth; overflow-x:auto; padding:14px; scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{min-width:290px; flex:0 0 290px; background:var(--bg-elev); border:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%); padding:18px; border-radius:16px; box-shadow:var(--shadow)}
.card h3{margin:10px 0 8px; font-size:18px}
.cover{border-radius:10px}
.arrow{position:absolute; top:50%; translate:0 -50%; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--ring); display:grid; place-items:center; background:color-mix(in oklab, var(--bg-elev) 80%, transparent); cursor:pointer}
.arrow:hover{background:color-mix(in oklab, var(--bg-elev) 60%, transparent)}
.arrow.left{left:10px}
.arrow.right{right:10px}

/* Galería de Imágenes */
.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px}
.gallery .gitem{position:relative; border-radius:14px; overflow:hidden; border:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%)}
.gitem::after{content:\"\"; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.35), transparent 40%)}

/* Videos */
.videos{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px}
.video-card{background:var(--bg-elev); border:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.video-thumb{aspect-ratio:16/9; width:100%; display:block}
.video-body{padding:14px}
.video-title{font-size:15px; margin:0 0 6px}
.video-meta{font-size:12px; color:var(--muted)}

/* Nosotros */
.about{display:grid; grid-template-columns: 1fr 1fr; gap:22px}
.about .box{background:var(--bg-elev); border:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%); border-radius:var(--radius); padding:20px}

/* Contacto */
.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:22px}
form{display:grid; gap:12px}
input, textarea{background:#202133; border:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%); color:var(--text); padding:12px 14px; border-radius:12px; font:inherit}
textarea{min-height:120px; resize:vertical}
button{border:0; padding:12px 16px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:white; font-weight:700; letter-spacing:.3px; cursor:pointer}
button:hover{filter:brightness(1.05)}
.list{list-style:none; padding-left:0; line-height:1.9}

/* Footer */
footer{margin-top:40px; padding:26px 20px; border-top:1px solid color-mix(in oklab, var(--bg-elev) 80%, #fff 0%); background:linear-gradient(0deg, transparent, rgba(255,255,255,0.02));}
.foot-wrap{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--muted)}

/* Responsive */
@media (max-width: 920px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero .logo{margin-inline:auto}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}

/* Appear animation */
.reveal{opacity:0; transform:translateY(16px); transition:all .6s ease}
.reveal.on{opacity:1; transform:none}

/* --- Footer & Social Buttons --- */
.foot-wrap{flex-wrap:wrap}
.socials{display:flex; gap:10px}
.sbtn{width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--ring); color:#e8f8ff; background:color-mix(in oklab, var(--bg-elev) 80%, transparent);
  transition:transform .15s ease, filter .15s ease, background .2s}
.sbtn:hover{transform:translateY(-2px); filter:brightness(1.08);
  background:linear-gradient(135deg, color-mix(in oklab, var(--primary) 35%, transparent), color-mix(in oklab, var(--accent) 25%, transparent))}

#servicios .carousel .track{display:flex; gap:20px; overflow-x:auto; scroll-behavior:auto}

.cover{border-radius:10px; width:100%; height:clamp(200px, 30vw, 340px); object-fit:cover; display:block}

#servicios .carousel .card{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
#servicios .carousel .card:hover{transform:translateY(-3px)}