:root{
  --bg:#0f0f0f;
  --panel:#242424;
  --muted:#bfbfbf;
  --accent:#00ff6a;
  --accent-dark:#00cc55;
  --card:#1a1a1a;
  --radius:16px;
  --maxwide:1200px;
  --gutter:3.5rem;
  --glass: rgba(255,255,255,0.03);
}
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #1a1a1a;
    color: #f8f8f8;
    overflow-x: hidden;
    padding-top: 90px;
}
.panel {
    margin: 40px auto;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#0b0b0b 0%, #100f0f 60%);
  color:#f6f6f6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.header {
  position:fixed; inset:0 0 auto 0; z-index:1100;
  height:78px; display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw; gap:20px;
  background: linear-gradient(180deg, rgba(12,12,12,0.9), rgba(18,18,18,0.65));
  border-bottom:3px solid rgba(0,255,106,0.06);
  backdrop-filter: blur(6px);
}
.brand { display:flex; gap:14px; align-items:center; }
.logo { width:56px; height:56px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,255,106,0.12), rgba(0,255,106,0.04));
  display:flex; align-items:center; justify-content:center; font-weight:800;
  color:var(--accent); font-size:20px; box-shadow:0 6px 18px rgba(0,0,0,0.6);
}
.header h1{font-size:1.25rem; color:var(--accent); margin:0; letter-spacing:0.6px}
.header nav{display:flex; gap:14px; align-items:center}
.header nav a{
  color:var(--muted); text-decoration:none; font-weight:600; padding:8px 12px;
  border-radius:10px; transition:all .18s ease;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1400;
}
.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.lightbox:target {
  display: flex;
}
.lightbox .cerrar {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.reseñas-vertical {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reseñas-vertical .slide {
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));
  border: 1px solid rgba(0,255,106,0.04);
  text-align: center;
}
.reseñas-vertical .slide p {
  font-style: italic;
  color: #e9e9e9;
  margin-bottom: 10px;
}
.reseñas-vertical .slide cite {
  color: var(--accent);
  font-weight: 700;
}
.video-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.video-container video {
  width: 90%;
  max-width: 800px;
  border-radius: 12px;
  border: 3px solid #00ff6a;
  box-shadow: 0 0 15px rgba(0, 255, 106, 0.3);
}
.header nav a:hover{color:#fff; background: rgba(255,255,255,0.02); box-shadow:0 4px 18px rgba(0,0,0,0.6)}
.hero { min-height: calc(100vh - 78px); display:grid; grid-template-columns: 1fr 520px; gap:30px; align-items:center; padding:120px 6vw 80px 6vw; }
.hero .left{ max-width:780px; }
.kicker{ display:inline-block; background:var(--glass); padding:8px 12px; border-radius:999px;
  color:var(--muted); font-weight:600; margin-bottom:18px; font-size:0.95rem; }
h2.hero-title{ color: #f7f7f7; font-size: clamp(2rem, 4.2vw, 3rem); margin:0 0 14px 0; line-height:1.02; text-shadow: 0 6px 26px rgba(0,0,0,0.6); }
p.lead{color:#dcdcdc; font-size:1.05rem; margin-bottom:22px; max-width:58ch}
.cta-row{display:flex; gap:14px; align-items:center}
.btn{ background:var(--accent); color:#08120a; padding:12px 18px; border-radius:12px; font-weight:700; border:none; cursor:pointer; box-shadow: 0 8px 30px rgba(0,255,106,0.06); transition: transform .14s ease, background .14s ease; }
.btn:hover{transform:translateY(-3px); background:var(--accent-dark)}
.secondary{background:transparent; border:2px solid rgba(255,255,255,0.04); color:var(--muted)}
.card-hero { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; padding:18px; box-shadow:0 8px 30px rgba(0,0,0,0.6); height:100%; display:flex; flex-direction:column; justify-content:center; gap:10px; align-items:center; }
.card-hero img{width:100%; height:auto; border-radius:12px; object-fit:cover;}
.section-wide{ padding:60px 6vw; display:block; }
.panel{ background:var(--panel); border-radius:18px; padding:26px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); max-width:var(--maxwide); margin:0 auto; }
.columns{ display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start; }
.about p{ color:#d9d9d9; line-height:1.6 }
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.gallery-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:3px solid rgba(0,255,106,0.06); cursor:pointer; transition:transform .24s ease }
.gallery-grid img:hover{transform:scale(1.03)}
.reseñas-wrap{ padding:40px 6vw; }
.reseñas-wrap h2 { margin-bottom: 20px; color: var(--accent);}
.slide-css { flex:0 0 80%; background: var(--card); border-radius:16px; padding:25px; scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.slide-css p { font-style:italic; text-align:center; margin-bottom:12px; color:#e9e9e9; }
.slide-css cite { font-weight:700; color: var(--accent); }
.contact-panel{display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start}
.contact-panel form{display:flex; flex-direction:column; gap:12px}
.input, textarea{background:var(--card); border:1px solid rgba(255,255,255,0.03); padding:12px; border-radius:10px; color:#eee; resize:none}
textarea{min-height:140px}
footer{padding:36px 6vw; background:transparent; border-top:1px solid rgba(255,255,255,0.02); text-align:center; color:var(--muted)}
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:1400; }
.lightbox img{ max-width:92%; max-height:86%; border-radius:12px }
@media (max-width:980px){ .hero{grid-template-columns:1fr; padding:120px 5vw 60px 5vw} .columns{grid-template-columns:1fr} .gallery-grid{grid-template-columns: repeat(2,1fr)} .contact-panel{grid-template-columns:1fr} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr} .header{padding:0 4vw} }