/* Iusag.css - paleta, tipografía y microinteracciones */

/* Variables */
:root{
  --color-fondo-base: #0b0b0c;
  --color-panel: #111213;
  --color-card: #151617;
  --color-texto-principal: #ffffff;
  --color-texto-secundario: #9aa0a6;
  --color-cta: #188f93;
  --color-cta-hover: #0f6b6d;
  --borde-suave: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.03);
  --focus-ring: rgba(24,143,147,0.14);
}

/* Base */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--color-fondo-base) 0%, #0f1314 100%);
  color:var(--color-texto-principal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Glass utility */
.glass{
  background:var(--glass);
  border:1px solid var(--borde-suave);
  backdrop-filter: blur(8px);
}

/* NAV */
nav{z-index:50}
.nav-link{ color:var(--color-texto-secundario); transition: color .18s ease, transform .18s ease;}
.nav-link:hover{ color:var(--color-cta); transform:translateY(-2px); }

/* HERO */
.hero-overlay{ background-color: rgba(0,0,0,0.65); }
.hero-title{ font-weight:800; line-height:0.98; letter-spacing:-0.01em; color:var(--color-texto-principal); }
.hero-sub{ color:var(--color-texto-secundario); }
.hero-cta{ display:inline-block; padding:.75rem 2rem; border-radius:.75rem; background: linear-gradient(180deg,var(--color-cta),var(--color-cta-hover)); color:#fff; font-weight:700; text-decoration:none; transition: transform .22s ease, box-shadow .22s ease; box-shadow: 0 8px 30px rgba(24,143,147,0.08); }
.hero-cta:hover{ transform:translateY(-6px); box-shadow:0 20px 50px rgba(24,143,147,0.16); }

/* Buttons */
.btn-accent{
  background: linear-gradient(180deg,var(--color-cta),var(--color-cta-hover));
  color:#fff;
  font-weight:700;
  border-radius:999px;
  transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s, filter .22s;
  box-shadow: 0 6px 24px rgba(24,143,147,0.09);
  border: 1px solid rgba(255,255,255,0.03);
}
.btn-accent:hover{ transform: translateY(-6px) scale(1.02); box-shadow:0 18px 40px rgba(24,143,147,0.16); filter:saturate(1.05);}
.btn-secondary{ border:1px solid var(--borde-suave); color:var(--color-texto-principal); background:transparent; padding:.5rem .9rem; border-radius:10px; transition: transform .18s ease, background-color .18s ease;}
.btn-secondary:hover{ transform: translateY(-4px); background-color: rgba(255,255,255,0.03); }

/* Service cards */
.service-card{ background-color: var(--color-card); padding:1.2rem; border-radius:12px; transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s, border-color .28s; border:1px solid rgba(255,255,255,0.02);}
.service-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.6); border-color: rgba(24,143,147,0.18); }
.service-icon-wrap{ width:56px; height:56px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(24,143,147,0.12), rgba(24,143,147,0.06)); border:1px solid rgba(255,255,255,0.02); transition: transform .22s ease, box-shadow .22s;}
.service-card:hover .service-icon-wrap{ transform: translateY(-4px) rotate(-4deg); box-shadow: 0 10px 20px rgba(0,0,0,0.45);}

/* Tabs */
.tabs{ display:flex; gap:.6rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.tab{ background:transparent; color:var(--color-texto-secundario); border-radius:8px; transition:all .18s ease; padding:.45rem .9rem; border:1px solid rgba(255,255,255,0.02); cursor:pointer;}
.tab:hover{ color:var(--color-cta); transform:translateY(-3px);}
.tab.active{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color:var(--color-texto-principal); box-shadow:0 6px 18px rgba(0,0,0,0.45);}

/* Tab content */
.tab-content{ display:none; opacity:0; transform:translateY(12px); transition: all .45s ease; }
.tab-content.active{ display:block; opacity:1; transform:translateY(0); }

/* Forms & modal */
input, textarea{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--color-texto-principal); border-radius:8px; padding:.6rem .75rem; transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;}
input:focus, textarea:focus{ outline:none; border-color:var(--color-cta); box-shadow:0 6px 20px var(--focus-ring); transform: translateY(-2px);}

#scheduleModal{ backdrop-filter: blur(3px); display: flex; align-items:center; justify-content:center; }
#scheduleModal.hidden{ display:none; }

/* Animations */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
.fade-in-up{ animation: fadeInUp .7s ease both; }

/* Responsive */
@media (max-width:768px){
  .hero-title{ font-size:28px; }
  .service-icon-wrap{ width:48px; height:48px;}
  .service-card{ padding:1rem; }
}

/* Footer small */
footer{ padding:2rem 0; color:var(--color-texto-secundario);}

/* Evitar desbordamiento horizontal en móvil por las luces de fondo */
body, html {
  overflow-x: hidden;
  width: 100%;
}