/* =========================================================
   INNOVACOMMS — Sistema de diseño
   Paleta: azul pastel + blanco + acento coral (conversión)
   Tipografía: Poppins (headlines) / Inter (body)
========================================================= */

:root{
  /* Color */
  --blue-deep:      #123A5C;   /* confianza / credibilidad */
  --blue-mid:       #2E6FA7;   /* enlaces / iconografía */
  --blue-pastel:    #BFE0F5;   /* primario pastel */
  --blue-pastel-2:  #DCEEFA;   /* pastel más claro */
  --bg-soft:        #F4FAFD;   /* fondo general */
  --white:          #FFFFFF;
  --accent:         #FF7A55;   /* CTA / ventas */
  --accent-dark:    #E85F39;
  --text-dark:      #14263B;
  --text-muted:     #4C6379;
  --border-soft:    #D9EAF4;
  --shadow-soft:    0 12px 30px rgba(18,58,92,.10);

  /* Tipografía */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 16px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg-soft);
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
svg{max-width:100%; height:auto;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding:0 24px;
}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--blue-deep); line-height:1.2;}
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-mid);
  background:var(--blue-pastel-2);
  padding:6px 14px;
  border-radius:100px;
  margin-bottom:14px;
}

/* Foco visible accesible */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* =========================== BOTONES =========================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.95rem;
  padding:14px 28px;
  border-radius:100px;
  border:none;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background: var(--accent);
  color:var(--white);
  box-shadow: 0 10px 24px rgba(255,122,85,.35);
}
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  color:var(--blue-deep);
  border:2px solid var(--blue-deep);
}
.btn-outline:hover{ background:var(--blue-deep); color:var(--white); }
.btn-light{
  background:var(--white);
  color:var(--blue-deep);
}
.btn-light:hover{ background:var(--blue-pastel); }

/* =========================== HEADER =========================== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  padding-bottom:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  justify-self:start;
}
.brand-logo{width:44px; height:44px; flex-shrink:0;}
.brand-name{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.35rem;
  color:var(--blue-deep);
  letter-spacing:-.01em;
}
.brand-name span{color:var(--accent);}

.main-nav{
  flex:1;
  display:flex;
  justify-content:center;
}
.main-nav ul{
  display:flex;
  gap:8px;
}
.main-nav a{
  font-family:var(--font-head);
  font-weight:500;
  font-size:.95rem;
  color:var(--text-dark);
  padding:10px 18px;
  border-radius:100px;
  transition: background .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a.active{
  background:var(--blue-pastel-2);
  color:var(--blue-deep);
}
.header-cta{display:flex; align-items:center; gap:14px;}
.header-cta .btn{padding:11px 22px; font-size:.88rem;}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--border-soft);
  background:var(--white);
  border-radius:12px;
  cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--blue-deep); position:relative; transition:.2s;
}
.nav-toggle span::before{position:absolute; top:-7px;}
.nav-toggle span::after{position:absolute; top:7px;}

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:70px 16px auto 16px;
    background:var(--white);
    border-radius:20px;
    box-shadow:var(--shadow-soft);
    padding:14px;
    display:none;
    flex-direction:column;
    z-index:250;
  }
  .main-nav.open{display:flex;}
  .main-nav ul{flex-direction:column; width:100%;}
  .main-nav a{display:block; text-align:center;}
  .header-cta .btn-outline{display:none;}
  .nav-toggle{display:flex; flex-shrink:0;}
}

@media (max-width: 520px){
  .container{padding:0 16px;}
  .site-header .container{gap:8px; padding-top:10px; padding-bottom:10px;}
  .brand{gap:8px; min-width:0;}
  .brand-logo{width:36px; height:36px;}
  .brand-name{font-size:1.05rem; white-space:nowrap;}
  .header-cta{display:none;}
  .nav-toggle{width:38px; height:38px;}
}

/* =========================== HERO / CARRUSEL =========================== */
.hero-slider{
  position:relative;
  height:min(78vh, 640px);
  min-height:420px;
  overflow:hidden;
}
.slide{
  position:absolute; inset:0;
  opacity:0;
  visibility:hidden;
  transition: opacity 1s ease;
  display:flex;
  align-items:center;
}
.slide.is-active{opacity:1; visibility:visible;}
.slide-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  transition: transform 7s ease;
}
.slide.is-active .slide-bg{transform:scale(1);}
.slide-overlay{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(18,58,92,.88) 0%, rgba(18,58,92,.55) 45%, rgba(18,58,92,.15) 80%);
}
.slide-content{
  position:relative; z-index:2;
  color:var(--white);
  max-width:620px;
  padding:0 60px;
  animation: rise 1s ease both;
}
.slide.is-active .slide-content{animation: rise .9s ease both;}
@keyframes rise{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}
.slide-content .eyebrow{background:rgba(255,255,255,.15); color:var(--white);}
.slide-content h1{color:var(--white); font-size:clamp(1.9rem, 4vw, 3rem); margin-bottom:16px;}
.slide-content p{font-size:1.05rem; color:rgba(255,255,255,.9); margin-bottom:28px; max-width:520px;}

.slider-controls{
  position:absolute; z-index:3; bottom:26px; left:0; right:0;
  display:flex; justify-content:center; gap:10px;
}
.slider-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.5);
  border:none; cursor:pointer;
  transition:.2s;
}
.slider-dot.is-active{ background:var(--accent); width:28px; border-radius:100px; }
.slider-arrow{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.2rem;
  backdrop-filter: blur(6px);
  transition:.2s;
}
.slider-arrow:hover{background:rgba(255,255,255,.32);}
.slider-arrow.prev{left:20px;}
.slider-arrow.next{right:20px;}
@media (max-width: 640px){
  .slide-content{padding:0 28px;}
  .slider-arrow{display:none;}
}

/* =========================== SECCIONES GENERALES =========================== */
section{padding:88px 0;}
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:14px;}
.section-head p{color:var(--text-muted);}

/* Tarjetas de navegación rápida (Misión/Visión/Servicios/Contacto/Ubicación) */
.quick-links{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(210px,100%), 1fr));
  gap:22px;
}
.quick-card{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:32px 26px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}
.quick-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--blue-pastel-2), transparent 60%);
  opacity:0; transition:.25s;
}
.quick-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(18,58,92,.14);}
.quick-card:hover::before{opacity:1;}
.quick-icon{
  width:64px; height:64px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-pastel); border-radius:18px;
  position:relative; z-index:1;
}
.quick-icon svg{width:30px; height:30px; stroke:var(--blue-deep);}
.quick-card h3{font-size:1.15rem; margin-bottom:8px; position:relative; z-index:1;}
.quick-card p{color:var(--text-muted); font-size:.92rem; margin-bottom:18px; position:relative; z-index:1;}
.quick-card .link-arrow{
  font-family:var(--font-head); font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px; font-size:.9rem; position:relative; z-index:1;
}

/* Bloque Sobre nosotros (index) */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:center;
}
.about-art{
  background:linear-gradient(160deg, var(--blue-pastel), var(--blue-pastel-2));
  border-radius:24px;
  padding:36px;
  position:relative;
}
.about-list{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.about-list li{display:flex; gap:12px; align-items:flex-start; color:var(--text-muted);}
.check-dot{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--blue-pastel); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
@media (max-width: 860px){
  .about-grid{grid-template-columns:1fr;}
}

/* CTA banda de ventas */
.cta-band{
  background: linear-gradient(120deg, var(--blue-deep), #1A4E78);
  color:var(--white);
  border-radius:28px;
  padding:56px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(191,224,245,.25), transparent 70%);
  top:-100px; right:-60px;
}
.cta-band h2{color:var(--white); margin-bottom:12px;}
.cta-band p{color:rgba(255,255,255,.85); margin-bottom:28px; max-width:520px; margin-left:auto; margin-right:auto;}

/* =========================== FOOTER =========================== */
.site-footer{
  background:var(--blue-deep);
  color:rgba(255,255,255,.82);
  padding-top:64px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand .brand-name{color:var(--white);}
.footer-col h4{color:var(--white); font-size:.95rem; margin-bottom:16px; letter-spacing:.04em;}
.footer-col ul li{margin-bottom:10px;}
.footer-col a{color:rgba(255,255,255,.72); font-size:.92rem; transition:.2s;}
.footer-col a:hover{color:var(--blue-pastel);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; font-size:.85rem; color:rgba(255,255,255,.6); flex-wrap:wrap; gap:10px;
}
@media (max-width: 860px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; text-align:center;}
}

/* =========================== WHATSAPP FLOTANTE =========================== */
.whatsapp-float{
  position:fixed;
  bottom:26px; right:26px;
  z-index:500;
  width:60px; height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(37,211,102,.45);
  animation: pulse 2.4s infinite;
}
.whatsapp-float svg{width:30px; height:30px; fill:var(--white);}
.whatsapp-float:hover{transform:scale(1.06);}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* =========================== PÁGINAS INTERNAS =========================== */
.page-hero{
  background: linear-gradient(150deg, var(--blue-pastel-2), var(--bg-soft));
  padding:70px 0 50px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero .container{position:relative; z-index:1;}
.breadcrumb{
  font-size:.85rem; color:var(--blue-mid); margin-bottom:14px; font-weight:600;
}
.page-hero h1{font-size:clamp(1.8rem, 4vw, 2.6rem);}

.content-block{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:center;
  padding:70px 0;
}
.content-block .content-img{
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.content-block p{color:var(--text-muted); margin-bottom:16px;}
.content-block.reverse .content-img{order:2;}
@media (max-width:860px){
  .content-block, .content-block.reverse{grid-template-columns:1fr;}
  .content-block.reverse .content-img{order:0;}
}

/* Catálogo de servicios */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
  gap:28px;
}
.service-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  transition: transform .25s ease;
}
.service-card:hover{transform:translateY(-6px);}
.service-img{height:180px; background:var(--blue-pastel);}
.service-body{padding:24px;}
.service-body h3{font-size:1.15rem; margin-bottom:8px;}
.service-body p{color:var(--text-muted); font-size:.92rem; margin-bottom:16px;}
.service-tag{
  display:inline-block; font-size:.75rem; font-weight:700; color:var(--blue-mid);
  background:var(--blue-pastel-2); padding:4px 12px; border-radius:100px; margin-bottom:12px;
}

/* Contactos - redes sociales */
.social-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%),1fr));
  gap:26px;
}
.social-card{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:34px 26px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  transition: transform .2s ease;
}
.social-card:hover{transform:translateY(-6px);}
.social-icon{
  width:64px; height:64px; margin:0 auto 18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.social-icon svg{width:30px; height:30px;}
.social-card h3{font-size:1.1rem; margin-bottom:6px;}
.social-card p{color:var(--text-muted); font-size:.88rem; margin-bottom:20px;}
.tiktok .social-icon{background:#111;}
.tiktok .social-icon svg{fill:#fff;}
.facebook .social-icon{background:#1877F2;}
.facebook .social-icon svg{fill:#fff;}
.instagram .social-icon{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);}
.instagram .social-icon svg{fill:#fff;}
.youtube .social-icon{background:#FF0000;}
.youtube .social-icon svg{fill:#fff;}

.contact-info-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr));
  gap:22px;
  margin-top:50px;
}
.info-card{
  background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:26px; display:flex; gap:16px; align-items:flex-start; box-shadow:var(--shadow-soft);
}
.info-card svg{width:26px; height:26px; stroke:var(--blue-deep); flex-shrink:0;}
.info-card h4{font-size:.95rem; margin-bottom:4px;}
.info-card p{color:var(--text-muted); font-size:.88rem;}

/* Ubicación */
.map-wrap{
  border-radius:24px; overflow:hidden; box-shadow:var(--shadow-soft);
  border:1px solid var(--border-soft);
}
.map-wrap iframe{width:100%; height:440px; border:0; display:block;}
.location-text{max-width:720px; margin:36px auto 0; text-align:center; color:var(--text-muted);}
.schedule-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:18px; margin-top:40px;
}
.schedule-card{
  background:var(--white); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:22px; text-align:center; box-shadow:var(--shadow-soft);
}
.schedule-card b{display:block; color:var(--blue-deep); font-family:var(--font-head); margin-bottom:6px;}

/* Utilidades */
.text-center{text-align:center;}
.mt-40{margin-top:40px;}