:root{
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --header-h: 72px;
  --text:#374151;
  --muted:#6b7280;
  --bg:#f8fafc;
  --slate-900:#0f172a;
  --slate-800:#1e293b;
  --slate-700:#334155;
  --blue-900:#1e3a8a;
  --blue-800:#1e40af;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --violet-500:#8b5cf6;
  --cyan-400:#00d4ff;
  --grad-primary: linear-gradient(45deg, var(--cyan-400), var(--blue-500), var(--violet-500));
  --grad-theme-blue: linear-gradient(45deg, #e6f3ff, #cce7ff, #b3daff);
  --grad-slate: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 50%, var(--slate-700) 100%);
  --r-lg: 20px;
  --r-xl: 25px;
  --r-pill: 9999px;
  --shadow-glow-blue: 0 8px 20px rgba(179,218,255,.5), 0 0 15px rgba(204,231,255,.3);
  --anim-shine: shine 3s ease-in-out infinite;
  --anim-pulse: pulse 4s ease-in-out infinite;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font-sans);
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  font-size:16px;
}
a{ color:inherit; text-decoration:none; }
.theme-blue{
  background: var(--grad-theme-blue);
  background-size:200% 200%;
  animation: var(--anim-shine);
  box-shadow: var(--shadow-glow-blue);
  border: 1px solid rgba(230,243,255,.4);
}
.btn{
  display:inline-block;
  position:relative;
  padding:.875rem 1.75rem;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:1rem;
  transition:.3s ease;
  overflow:hidden;
  cursor:pointer;
  border:none;
}
.btn--primary,
.btn--nav{
  color:#fff;
  background: var(--grad-primary);
  box-shadow: 0 8px 25px rgba(0,212,255,.4);
}
.btn--ghost{
  color:var(--blue-800);
  border:1px solid rgba(0,212,255,.4);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
}
.btn--phone{
  color:#fff;
  background: linear-gradient(45deg, #ff8c00, #ff7700, #e55100);
  box-shadow: 0 8px 25px rgba(255,140,0,.4);
}
.btn--phone:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(255,140,0,.6);
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  left:-100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition:left .5s;
}
.btn:hover::before{ left:100%; }
.btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0,212,255,.6);
}
.card{
  position:relative;
  border-radius:var(--r-lg);
  border: 1px solid rgba(0,212,255,.2);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 15px 35px rgba(0,0,0,.1);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
  overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow: 0 25px 50px rgba(0,212,255,.2); border-color: rgba(0,212,255,.4); }
.service-card{ padding:2rem; text-align:center; border-radius:var(--r-xl); }
.service-card .service-icon{
  width:80px; height:80px; margin:0 auto 1.5rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff;
  background: var(--grad-primary);
  box-shadow: 0 10px 25px rgba(0,212,255,.3);
  transition:.3s;
}
.service-card:hover .service-icon{ transform:scale(1.1) rotate(5deg); box-shadow:0 15px 35px rgba(0,212,255,.5); }
.service-card h3{ color:var(--blue-800); margin-bottom:1rem; font-size:1.2rem; font-weight:600; letter-spacing:-.025em; }
.service-card p{ 
  color:var(--muted); 
  margin-bottom:1.2rem; 
  line-height:1.55; 
  font-size:.95rem; 
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.service-card.expanded p{
  opacity: 1;
  max-height: 200px;
  margin-bottom: 1.2rem;
}
.service-card{
  cursor: pointer;
  transition: all 0.3s ease;
}
.bg-image{
  color:#fff;
  background-image: var(--bg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.bg-image h3, .bg-image p{ color:#fff !important; text-shadow:2px 2px 4px rgba(0,0,0,.7); }
.bg-image .btn{ background: rgba(255,255,255,.9); color:var(--blue-800); border:1px solid rgba(255,255,255,.8); }
.bg-image::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(59,130,246,.1));
  opacity:0; transition:opacity .3s ease;
}
.bg-image:hover::before{ opacity:1; }
.header{ position:sticky; top:0; z-index:1000; min-height:var(--header-h); }
.navbar{ padding:.5rem 0; border-bottom: 1px solid rgba(230,243,255,.4); }
.header-content{
  width:100%; display:flex; justify-content:space-between; align-items:center; padding:0 2rem;
}
.logo{
  font-family:var(--font-serif); letter-spacing:1px; text-transform:uppercase;
  font-size:1.2rem; font-weight:700;
  background: linear-gradient(45deg, var(--blue-800), var(--blue-500), var(--blue-900));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 8px rgba(30,64,175,.4);
  transition:.3s ease;
}
.logo:hover{ transform:scale(1.03); text-shadow:0 0 15px rgba(30,64,175,.6); }
.nav-menu{ display:flex; align-items:center; gap:2rem; }
.nav-menu a{
  color:var(--blue-800); margin:0 1rem; font-weight:500;
  transition:.3s ease; text-shadow:0 0 5px rgba(30,64,175,.3);
}
.nav-menu a:hover{ color:#1e3a8a; text-shadow:0 0 15px rgba(30,64,175,.8); transform:scale(1.05); }
.mobile-menu-btn{
  display:none;
  background: var(--grad-primary);
  border:none; color:#fff; font-size:1.5rem; cursor:pointer;
  width:50px; height:50px; border-radius:50%;
  box-shadow: 0 8px 25px rgba(0,212,255,.4);
  transition:.3s ease;
  align-items:center; justify-content:center;
}
.mobile-menu-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0,212,255,.6);
}
.hero{
  position:relative;
  min-height: calc(100dvh - var(--header-h));
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; margin-top:0; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(15,23,42,.7) 0%, rgba(30,41,59,.7) 25%, rgba(51,65,85,.7) 50%, rgba(30,64,175,.7) 100%),
    url('/static/1.avif') center/cover no-repeat;
}
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(0,212,255,.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59,130,246,.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139,92,246,.2) 0%, transparent 50%);
  animation: var(--anim-pulse);
}
.hero-content{
  position:relative; z-index:1; max-width: 900px; padding: 1.5rem 1rem;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly;
  min-height: calc(100dvh - var(--header-h));
  width:100%;
}
.hero-content > *{ margin:0; flex-shrink:0; }
.hero-logo{ display:flex; justify-content:center; }
.logo-image{
  max-width: 260px; height:auto; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
  transition: transform 0.3s ease;
}
.logo-image:hover{ transform: scale(1.05); }
.hero-tagline{
  font-size:2.2rem; max-width:650px; margin-inline:auto; text-align:center;
  font-family:var(--font-sans); letter-spacing:-.025em; font-weight:700;
  background: linear-gradient(45deg, #ffd700, #ffed4e, #fbbf24, #f59e0b, #d97706);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1.6; 
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4);
}
.hero-buttons{
  display:flex; gap:1.2rem; justify-content:center; align-items:center; flex-wrap:wrap;
}
.hero-info{ display:flex; justify-content:center; }
.hero-hours{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem;
  background: rgba(255,255,255,.12); backdrop-filter: blur(15px);
  border-radius:var(--r-lg); border: 1px solid rgba(255,255,255,.25);
  color:#fff; text-align:left; max-width:380px; margin:0 auto;
}
.hero-hours i{ font-size:1.5rem; color:var(--cyan-400); filter: drop-shadow(0 0 10px rgba(0,212,255,.5)); }
.hero-hours strong{ color:var(--cyan-400); font-size:1rem; }
.hero-hours span{ font-size:0.9rem; opacity:.9; }
.section{ padding:4rem 0; }
.section-title{ text-align:center; margin-bottom:3rem; }
.section-title h2{
  font-size:2rem; color:var(--blue-800); margin-bottom:1rem; font-weight:600; letter-spacing:-.025em;
}
.section-title p{ font-size:1rem; color:var(--muted); max-width:600px; margin:0 auto; }
.services{
  background: var(--grad-theme-blue);
  background-size:200% 200%;
  animation: var(--anim-shine);
  box-shadow: var(--shadow-glow-blue);
  border-top: 1px solid rgba(230,243,255,.4);
  border-bottom: 1px solid rgba(230,243,255,.4);
}
.services-content{ width:100%; padding:0 2rem; }
.services-grid{
  display:grid; gap:2rem; margin-top:2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width:1400px; margin-left:auto; margin-right:auto;
}
.programming{
  background: var(--grad-slate); color:#fff; text-align:center; position:relative; overflow:hidden;
  padding:4rem 0;
}
.programming::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 70%, rgba(0,212,255,.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(139,92,246,.2) 0%, transparent 50%);
  animation: pulse 6s ease-in-out infinite;
}
.programming-content{ position:relative; z-index:1; padding:0 2rem; }
.programming h2{
  font-size:2.2rem; margin-bottom:1rem; font-weight:700; letter-spacing:-.025em;
  background: var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.programming p{ font-size:1.1rem; margin-bottom:2rem; opacity:.9; max-width:700px; margin-inline:auto; }
.footer{
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 50%, var(--slate-700) 100%);
  color:#fff; padding:4rem 0 1rem; border-top: 1px solid rgba(0,212,255,.2);
}
.footer-main{
  max-width:1200px; margin:0 auto; padding:0 2rem; display:grid; gap:3rem;
  grid-template-columns: 1fr 1fr; align-items:start;
}
.footer-brand h3{
  color:var(--cyan-400); font-size:1.8rem; margin-bottom:1rem; font-weight:700;
  text-shadow:0 0 15px rgba(0,212,255,.4);
}
.footer-brand p{
  color:#d1d5db; font-size:1rem; line-height:1.6; margin-bottom:2rem; max-width:400px;
}
.footer-social{
  display:flex; gap:1rem; align-items:center;
}
.social-text{
  color:#d1d5db; font-size:0.9rem; font-weight:500;
}
.social-link{
  color:var(--cyan-400); font-size:1.5rem; transition:.3s; background: rgba(0,212,255,.1);
  padding:.8rem; border-radius:12px; text-shadow:0 0 5px rgba(0,212,255,.3);
  display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; text-decoration:none;
}
.social-link:hover{ 
  color:#fff; transform:scale(1.1); background: rgba(0,212,255,.2); 
  text-shadow:0 0 15px rgba(0,212,255,.8); 
}
.footer-info{
  display:grid; grid-template-columns: 1fr 1fr; gap:2rem;
}
.footer-contact h4, .footer-hours h4{
  color:var(--cyan-400); margin-bottom:1.5rem; font-size:1.2rem; font-weight:600;
  text-shadow:0 0 10px rgba(0,212,255,.3);
}
.contact-item{
  display:flex; align-items:center; gap:0.8rem; margin-bottom:1rem; color:#d1d5db;
}
.contact-item i{
  color:var(--cyan-400); min-width:1.2rem; font-size:1rem;
}
.contact-item a{
  color:#d1d5db; text-decoration:none; transition:.3s;
}
.contact-item a:hover{
  color:var(--cyan-400); text-shadow:0 0 5px rgba(0,212,255,.5);
}
.hours-item{
  display:flex; justify-content:space-between; align-items:center; 
  margin-bottom:0.8rem; padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.hours-item .day{
  color:#d1d5db; font-weight:500;
}
.hours-item .time{
  color:var(--cyan-400); font-weight:600; text-shadow:0 0 5px rgba(0,212,255,.3);
}
.footer-bottom{ 
  border-top:1px solid #374151; padding-top:2rem; margin-top:3rem; 
  text-align:center; color:#9ca3af; max-width:1200px; margin-left:auto; margin-right:auto;
}
.whatsapp-float{
  position:fixed; width:60px; height:60px; bottom:30px; right:30px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color:#fff; border-radius:50%; text-align:center; font-size:28px;
  box-shadow: 0 8px 25px rgba(37,211,102,.4);
  z-index:1000; transition:.3s; display:flex; align-items:center; justify-content:center;
  text-decoration:none; animation: pulse-whatsapp 2s infinite;
}
.whatsapp-float:hover{
  transform:scale(1.1); box-shadow:0 12px 35px rgba(37,211,102,.6);
  background: linear-gradient(135deg, #128c7e, #25d366);
}
@media (min-width: 769px){
  .hero-content{
    padding: 2rem;
    min-height: calc(100dvh - var(--header-h));
  }
  .logo-image{
    max-width: 280px;
  }
  .hero-tagline{
    font-size: 1.8rem;
    max-width: 700px;
  }
  .hero-buttons{
    gap: 1.5rem;
  }
}
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:1.5rem; }
}
@media (max-width: 900px){
  .services-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; }
  .logo-image{ max-width: 220px; }
}
@media (max-width: 768px){
  :root{ --header-h: 56px; }
  .nav-menu{ display:none; }
  .mobile-menu-btn{ display:flex; }
  .header-content{ justify-content:space-between; padding:0 1rem; }
  .services-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; }
  .service-card{ padding:1.5rem; }
  .whatsapp-float{ width:55px; height:55px; bottom:20px; right:20px; font-size:24px; }
  .section{ padding:3rem 0; }
  .hero-content{ 
    padding:1rem;
    min-height: calc(100dvh - var(--header-h));
  }
  .hero-buttons{ gap:1rem; }
  .logo-image{ max-width: 220px; }
  .hero-tagline{ font-size:1.4rem; }
  .footer-main{
    grid-template-columns: 1fr;
    gap:2rem; padding:0 1.5rem;
  }
  .footer-info{
    grid-template-columns: 1fr;
    gap:1.5rem;
  }
  .footer-brand h3{
    font-size:1.5rem;
  }
  .footer-brand p{
    font-size:0.9rem;
  }
}
@media (max-width: 480px){
  .hero-content{ 
    padding:1rem;
    min-height: calc(100dvh - var(--header-h));
  }
  .logo-image{ max-width: 200px; }
  .hero-tagline{ font-size:1.2rem; line-height:1.5; max-width: 100%; }
  .hero-buttons{ gap:0.8rem; flex-direction:column; width: 100%; }
  .header-content{ padding:0 1rem; }
  .services-content{ padding:0 1rem; }
  .programming-content{ padding:0 1rem; }
  .services-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .hero-hours{
    max-width:300px; padding:0.8rem 1.2rem; gap:0.8rem;
  }
  .footer{ padding:2.5rem 0 1rem; }
  .footer-content{
    padding:0 1rem; grid-template-columns:1fr; gap:2.5rem; max-width:none;
  }
  .footer-section{ text-align:center; }
  .footer-section h4{ font-size:1.1rem; margin-bottom:1rem; color:var(--cyan-400); text-shadow:0 0 10px rgba(0,212,255,.4); }
  .footer-section p, .footer-section a{ font-size:0.9rem; margin-bottom:0.6rem; line-height:1.5; }
  .footer-section p{ justify-content:center; align-items:center; gap:0.7rem; }
  .footer-section p i{ color:var(--cyan-400); min-width:1.3rem; font-size:1rem; }
  .footer-section a:hover{ color:var(--cyan-400); text-shadow:0 0 8px rgba(0,212,255,.6); transform:translateY(-1px); }
  .social-icons{ justify-content:center; margin-top:1rem; gap:1.2rem; }
  .social-icons a{ width:3rem; height:3rem; font-size:1.4rem; border-radius:15px; }
  .footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; font-size:0.85rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@keyframes shine{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.8; }
}
@keyframes pulse-whatsapp{
  0%{ box-shadow: 0 8px 25px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.7); }
  70%{ box-shadow: 0 8px 25px rgba(37,211,102,.4), 0 0 0 10px rgba(37,211,102,0); }
  100%{ box-shadow: 0 8px 25px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes shiny-gold{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
.services, .programming, .footer {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px;
}