/* Modern maintenance page styles */
:root{
  --bg:#0b0f1a;
  --card:rgba(15, 23, 36, 0.7);
  --accent:#FF1E1E;
  --whatsapp:#25D366;
  --muted:#9AA4B2;
  --glass: rgba(255,255,255,0.03);
  --max:1200px;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-body);background:var(--bg);color:#fff;overflow-x:hidden}
body{
  display:flex;align-items:center;justify-content:center;padding:32px;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 30, 30, 0.15) 0%, transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(30, 100, 255, 0.1) 0%, transparent 40%),
                    linear-gradient(120deg, rgba(0,0,0,0.6), rgba(6,10,15,0.8)), 
                    url('../img/fondo.jpg');
  background-size:cover;background-position:center;backdrop-filter:blur(4px);
}
.container{width:min(96%,var(--max));display:flex;gap:48px;align-items:center;justify-content:center;flex-wrap:wrap;perspective:1000px}
.card{
  flex:1;min-width:320px;max-width:600px;padding:48px;border-radius:24px;
  background:linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  box-shadow:0 24px 60px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);border:1px solid rgba(255,255,255,0.08);
  position:relative;overflow:hidden;
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.logo-wrap{margin-bottom:32px;display:flex;align-items:center;justify-content:flex-start}
.logo-wrap img{height:64px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));animation:float 6s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

.title{font-family:var(--font-heading);font-weight:700;font-size:clamp(32px, 5vw, 48px);line-height:1.1;color:#fff;margin:0 0 16px;letter-spacing:-0.02em}
.title span{color:var(--accent);display:block}

.lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 32px;font-weight:400;max-width:480px}

.cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;
  border-radius:12px;font-weight:600;text-decoration:none;transition:all 0.3s ease;
  font-family:var(--font-body);font-size:16px;
}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 4px 20px rgba(255,30,30,0.3);
  border:1px solid rgba(255,255,255,0.1);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,30,30,0.4);background:#ff3333}

.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:32px;border-top:1px solid rgba(255,255,255,0.06)}

/* Contact pills */
.contact-item{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);text-decoration:none;font-weight:500;font-size:14px;
  transition:all 0.2s ease;
}
.contact-item .icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.contact-item:hover{transform:translateY(-2px);background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.1)}

.contact-item.whatsapp{color:#fff;background:rgba(37, 211, 102, 0.1);border-color:rgba(37, 211, 102, 0.2)}
.contact-item.whatsapp:hover{background:var(--whatsapp);border-color:var(--whatsapp);box-shadow:0 4px 15px rgba(37, 211, 102, 0.3)}

.contact-item.primary{color:#fff;background:rgba(255, 30, 30, 0.1);border-color:rgba(255, 30, 30, 0.2)}
.contact-item.primary:hover{background:var(--accent);border-color:var(--accent);box-shadow:0 4px 15px rgba(255, 30, 30, 0.3)}

/* Right side / Visuals */
.visuals{flex:1;min-width:300px;max-width:500px;display:flex;flex-direction:column;gap:24px}
.visual-card{
  background:rgba(0,0,0,0.3);border-radius:20px;padding:24px;
  border:1px solid rgba(255,255,255,0.05);backdrop-filter:blur(4px);
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}
.images{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px}
.thumb{
  width:100%;aspect-ratio:16/10;border-radius:12px;background-size:cover;background-position:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);
  transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.thumb:hover{transform:scale(1.05) rotate(-2deg);z-index:2}
.thumb:nth-child(2):hover{transform:scale(1.05) rotate(2deg)}

/* animations */
.fade-in{opacity:0;transform:translateY(20px);animation:fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards}
.fade-in.delay-1{animation-delay:0.1s}
.fade-in.delay-2{animation-delay:0.2s}
@keyframes fadeInUp{to{opacity:1;transform:none}}

/* responsive */
@media (max-width:900px){
  body{padding:16px;align-items:flex-start;overflow-y:auto}
  .container{flex-direction:column;gap:32px;padding:20px 0}
  .card{padding:32px 24px;text-align:center;align-items:center;display:flex;flex-direction:column}
  .logo-wrap{justify-content:center;margin-bottom:24px}
  .cta{justify-content:center}
  .meta{justify-content:center}
  .visuals{width:100%}
}