:root{
  --bg1:#fff4e8;
  --bg2:#f0f4ff;
  --txt:#14141a;
  --muted:#4b4b5a;
  --white:#fff;

  --pink:#ff2d55;
  --orange:#ff7a18;
  --yellow:#ffb703;
  --blue:#3a86ff;
  --purple:#8338ec;
  --mint:#06d6a0;

  --line: rgba(0,0,0,.08);
  --shadow: 0 18px 50px rgba(0,0,0,.14);
  --r:18px;
  --r2:26px;
  --max:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,45,85,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 20%, rgba(255,183,3,.18), transparent 55%),
    radial-gradient(900px 520px at 60% 90%, rgba(58,134,255,.18), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),92vw);margin:0 auto}

/* Topbar */
.topbar{
  background: rgba(255,255,255,.65);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.topbar__grid{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 0;
}
.topbar__left{
  display:flex;gap:10px;align-items:center;
  color:var(--muted);font-weight:900;
}
.sep{opacity:.6}

.miniBtn{
  padding:8px 12px;
  border-radius:999px;
  font-weight:1000;
  border:1px solid rgba(255,45,85,.20);
  background: linear-gradient(135deg, rgba(255,45,85,.12), rgba(58,134,255,.12));
}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background: rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav{
  height:76px;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
}
.brand__logo{height:80px;width:auto}
.brand__logo{
  transition: transform .25s ease, filter .25s ease;
}

.brand__logo:hover{
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}


.nav__links{
  display:flex;gap:14px;align-items:center;
  font-weight:1000;color:var(--muted);
}
.nav__links a{
  padding:10px 12px;border-radius:12px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.nav__links a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.85);
  color:var(--txt);
}

.pillBtn{
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--white), var(--white));
  color:#111;
  font-weight:1100;
  border:1px solid rgba(0,0,0,.08);
}

/* Hamburger */
.hamburger{
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  display:none;cursor:pointer;padding:10px;
}
.hamburger span{
  display:block;height:2px;width:100%;
  background:#222;margin:6px 0;border-radius:999px;
}

/* Drawer */
.drawer{position:fixed;inset:0;display:none;z-index:90}
.drawer.open{display:block}
.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.drawer__panel{
  position:absolute;right:10px;top:10px;
  width:min(420px, calc(100% - 20px));
  border-radius:22px;
  padding:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.drawer__logo{height:42px}
.closeBtn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.95);
  cursor:pointer;
}
.drawer__links{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.drawer__links a{
  padding:12px;border-radius:14px;
  background:rgba(255,255,255,.95);
  font-weight:1100;
}
.drawer__note{margin:14px 6px 4px;color:var(--muted);font-weight:900}

/* Hero */
.hero{padding:54px 0 10px}
.hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:center;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;

  background: linear-gradient(135deg, #ff2d55, #ff7a18, #ffb703, #3a86ff, #8338ec);
  background-size: 300% 300%;

  color: #fff;
  font-weight: 1200;
  letter-spacing: .3px;

  border: 2px solid rgba(255,255,255,.65);

  box-shadow:
    0 0 12px rgba(255,45,85,.65),
    0 0 28px rgba(255,183,3,.55),
    0 0 50px rgba(58,134,255,.45);

  position: relative;
  overflow: hidden;

  animation: tagGradient 6s ease infinite, tagPulse 2.6s ease-in-out infinite;
}

@keyframes tagGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@keyframes tagPulse{
  0%,100%{
    transform: scale(1);
    box-shadow:
      0 0 12px rgba(255,45,85,.65),
      0 0 28px rgba(255,183,3,.55),
      0 0 50px rgba(58,134,255,.45);
  }
  50%{
    transform: scale(1.05);
    box-shadow:
      0 0 18px rgba(255,45,85,.85),
      0 0 40px rgba(255,183,3,.75),
      0 0 70px rgba(58,134,255,.65);
  }

}
.hero__text h1{
  margin:14px 0 10px;
  font-size:clamp(34px,4vw,56px);
  line-height:1.04;
  letter-spacing:-.03em;
}
.grad{
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--blue), var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__text p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.65;
  font-weight:800;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  color:#111;
  font-weight:1100;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 30px rgba(255,45,85,.15);
  transition: transform .15s ease, filter .15s ease;
}
.cta:hover{transform:translateY(-1px);filter:brightness(1.02)}
.ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  font-weight:1100;
}

.hero__kpis{
  margin-top:18px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.kpi{
  padding:12px 14px;border-radius:16px;
  background: rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.kpi b{display:block;font-size:18px}
.kpi small{color:var(--muted);font-weight:900}

.hero__media .swiper{
  border-radius:28px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.08);
}
.imgSlide{
  height:420px;
  background-image: var(--img);
  background-size: cover;
  background-position:center;
  position:relative;
}
.imgOverlay{
  position:absolute;inset:0;
  background:
    linear-gradient(120deg, rgba(255,45,85,.25), rgba(0,0,0,.20));
}
.imgCaption{
  position:absolute;left:14px;bottom:14px;
  padding:10px 12px;border-radius:16px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
}
.imgCaption b{display:block}
.imgCaption span{color:var(--muted);font-weight:900}

/* Swiper pagination */
.heroSwiper .swiper-pagination-bullet{background:rgba(255,255,255,.6)}
.heroSwiper .swiper-pagination-bullet-active{background:rgba(255,255,255,.95)}

/* Sections */
.section{padding:86px 0}
.section__head{margin-bottom:22px}
.section__head h2{margin:0 0 8px;font-size:clamp(26px,3vw,36px)}
.section__head p{margin:0;color:var(--muted);font-weight:900}

/* Cards con efecto */
.cardGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.fxCard{
  border-radius:26px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  padding:18px;
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fxCard::before{
  content:"";
  position:absolute;inset:-2px;
  background: linear-gradient(135deg, rgba(255,45,85,.25), rgba(255,183,3,.22), rgba(58,134,255,.22));
  opacity:0;
  transition:opacity .18s ease;
}
.fxCard:hover{
  transform:translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.14);
}
.fxCard:hover::before{opacity:1}
.fxCard > *{position:relative}
.fxIcon{font-size:28px}
.fxCard h3{margin:10px 0 8px}
.fxCard p{margin:0;color:var(--muted);font-weight:800;line-height:1.6}
.fxCard a{display:inline-block;margin-top:12px;font-weight:1100}

/* Panel */
.panel{
  border-radius:26px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  padding:22px;
  box-shadow: var(--shadow);
}
.panel--soft{
  background:
    radial-gradient(700px 280px at 10% 10%, rgba(255,45,85,.12), transparent 55%),
    radial-gradient(700px 280px at 90% 30%, rgba(58,134,255,.10), transparent 55%),
    rgba(255,255,255,.92);
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.list{margin:14px 0 0;padding-left:18px;color:var(--muted);font-weight:900;line-height:1.9}

/* Misión / Visión */
.mvGrid{display:grid;gap:12px}
.mvCard{
  border-radius:20px;
  padding:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
}

/* Objetivos */
.objGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.obj{
  border-radius:18px;
  padding:12px 14px;
  background: rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);
  font-weight:1100;
}

/* Clientes */
.client{
  height:84px;
  border-radius:20px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  display:grid;place-items:center;
  font-weight:1100;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* Servicios */
.serviceGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.service{
  border-radius:26px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  padding:18px;
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  transition: transform .18s ease;
}
.service:hover{transform:translateY(-5px)}
.service h3{margin:0 0 8px}
.service p{margin:0;color:var(--muted);font-weight:800;line-height:1.6}

/* Catálogo */
.catalog{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:center;
}
.catalogBox{
  height:160px;
  border-radius:22px;
  border:1px dashed rgba(0,0,0,.18);
  display:grid;place-items:center;
  font-weight:1100;
  background: linear-gradient(135deg, rgba(255,45,85,.12), rgba(58,134,255,.12));
}

/* Contacto */
.contactGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
.ctaLink{display:inline-block;margin-top:8px}
label{display:block;font-weight:1100;margin:12px 0 0}
input,textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.95);
  outline:none;
  font-weight:800;
}
textarea{resize:vertical}
.hint{display:block;margin-top:10px;color:var(--muted);font-weight:900}
.w100{width:100%}

/* Help banner */
.helpBanner{
  border-radius:28px;
  padding:22px;
  background:
    radial-gradient(900px 320px at 10% 10%, rgba(255,45,85,.22), transparent 55%),
    radial-gradient(900px 320px at 90% 35%, rgba(131,56,236,.18), transparent 60%),
    rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.helpBanner h2{margin:0 0 8px}
.helpBanner p{margin:0;color:var(--muted);font-weight:900}

/* Footer */
.footer{
  padding:34px 0 14px;
  margin-top:24px;
  background: rgba(255,255,255,.70);
  border-top:1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:16px;
}
.footer__logo{height:44px;margin-bottom:10px}
.footer h4{margin:0 0 10px}
.footer a{display:block;margin:8px 0;color:var(--muted);font-weight:1100}
.footer a:hover{color:#111}
.footer__bottom{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-weight:1000;
}

/* To Top */
.toTop{
  position:fixed;right:14px;bottom:14px;
  width:44px;height:44px;border-radius:14px;
  background: rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.10);
  display:grid;place-items:center;
  box-shadow: var(--shadow);
  opacity:0;transform:translateY(12px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.toTop.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* Responsive */
@media (max-width: 980px){
  .nav__links{display:none}
  .hamburger{display:block}
  .hero__grid{grid-template-columns:1fr}
  .imgSlide{height:360px}
  .cardGrid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .objGrid{grid-template-columns:1fr}
  .serviceGrid{grid-template-columns:1fr}
  .catalog{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .helpBanner{flex-direction:column;align-items:flex-start}
}

/* Fallback: si AOS no carga, que no oculte nada */
[data-aos]{
  opacity: 1 !important;
  transform: none !important;
}

/* ===== CONTACTO con fondo animado (tipo hero) ===== */
#contacto.contactSection{
  position: relative;
  padding: 90px 0 !important;
  overflow: hidden;
  background: #fff7f2; /* base clarita */
}

/* capas de color */
#contacto.contactSection::before{
  content:"";
  position:absolute;
  inset:-220px -220px -220px -220px;
  background:
    radial-gradient(520px 420px at 18% 20%, rgba(255, 45, 85, .28), transparent 60%),
    radial-gradient(560px 460px at 86% 28%, rgba(58, 134, 255, .30), transparent 60%),
    radial-gradient(540px 440px at 78% 88%, rgba(255, 183, 3, .25), transparent 62%),
    radial-gradient(480px 380px at 20% 86%, rgba(131, 56, 236, .22), transparent 60%);
  filter: blur(14px);
  opacity: .95;
  animation: contactGlowMove 10s ease-in-out infinite;
  z-index: 0;
}

/* brillo tipo “vapor” */
#contacto.contactSection::after{
  content:"";
  position:absolute;
  inset:-200px;
  background: linear-gradient(120deg,
    rgba(255,45,85,.12),
    rgba(255,183,3,.10),
    rgba(58,134,255,.12),
    rgba(131,56,236,.10)
  );
  background-size: 220% 220%;
  mix-blend-mode: multiply;
  opacity:.55;
  animation: contactGradient 8s ease infinite;
  z-index: 0;
}

/* asegura que el contenido quede arriba */
#contacto.contactSection .container{
  position: relative;
  z-index: 1;
}

/* texto con contraste (como tu ejemplo) */
#contacto .contactHead h2{
  margin: 0 !important;
  font-size: 46px !important;
  font-weight: 1100 !important;
  letter-spacing: -0.02em !important;
  color: #0f1222 !important;
}

#contacto .contactHead p{
  margin: 10px 0 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: rgba(15, 18, 34, 0.75) !important;
}

@keyframes contactGlowMove{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px, 14px) scale(1.05); }
  100%{ transform: translate(0,0) scale(1); }
}

@keyframes contactGradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* responsive */
@media (max-width: 700px){
  #contacto .contactHead h2{ font-size: 34px !important; }
  #contacto .contactHead p{ font-size: 16px !important; }
}
/* ===== TÍTULO CONTACTO CON GLOW ===== */
.glowTitle{
  position: relative;
  display: inline-block;
  font-size: 25px;
  font-weight: 1100;
  letter-spacing: -0.03em;
  color: #0f1222;
  z-index: 1;
}

/* aura de color detrás del texto */
.glowTitle::before{
  content:"";
  position:absolute;
  left: -40px;
  right: -40px;
  top: 50%;
  height: 90px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #ffb703, #ff8800, #ff4d6d, #5390ff);
  background-size: 300% 300%;
  filter: blur(26px);
  opacity: .85;
  z-index: -1;
  animation: titleGlowMove 7s ease infinite;
  border-radius: 999px;
}

/* animación del glow */
@keyframes titleGlowMove{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* subtítulo debajo */
#contacto .contactHead p{
  margin-top: 12px;
  font-size: 18px;
  font-weight: 800;
  color: rgba(15, 18, 34, 0.75);
}

/* responsive */
@media (max-width: 700px){
  .glowTitle{
    font-size: 40px;
  }

  .glowTitle::before{
    height: 70px;
    left: -24px;
    right: -24px;
    filter: blur(22px);
  }
}
/* ===== CONTACTO COMO BOTÓN CHIP GLOW ===== */
.glowTitle{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1100;
  letter-spacing: -0.02em;
  color: #ffffff;
  background: linear-gradient(90deg, #ffb703, #ff8800, #ff4d6d, #5390ff);
  background-size: 200% 200%;
  border: 2px solid rgba(255,255,255,0.35);
  
  animation: glowGradient 6s ease infinite;
  z-index: 1;
}

/* ===== Catálogo visual ===== */
.catalogGallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.catalogPhoto{
  border-radius:24px;
  overflow:hidden;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}

.catalogPhoto:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.14);
}

.catalogPhoto img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.catalogPhoto__info{
  padding:16px;
}

.catalogPhoto__info h3{
  margin:0 0 8px;
  font-size:18px;
}

.catalogPhoto__info p{
  margin:0;
  color:var(--muted);
  font-weight:800;
  line-height:1.6;
}

@media (max-width: 980px){
  .catalogGallery{
    grid-template-columns:1fr;
  }

  .catalogPhoto img{
    height:220px;
  }
}

/* ===== Ajuste visual sección contacto ===== */
.contactWrap{
  align-items:start;
  gap:28px;
}

.contactWrap .panel{
  padding:26px;
}

.contactWrap .panel h3{
  margin:0 0 18px;
}

.contactWrap .panel p{
  margin:0 0 18px;
  line-height:1.7;
}

.contactWrap .ctaLink{
  margin-top:6px;
}

.contactWrap form{
  padding:26px;
}

.contactWrap label{
  display:block;
  margin:0 0 8px;
}

.contactWrap input,
.contactWrap textarea{
  width:100%;
  margin-bottom:18px;
}

.contactWrap textarea{
  min-height:140px;
}

.contactWrap button[type="submit"]{
  width:100%;
  margin-top:6px;
}

/* Dirección más cómoda de leer */
.contactWrap .panel p b{
  display:inline-block;
  min-width:92px;
}

/* Responsive */
@media (max-width: 980px){
  .contactWrap{
    grid-template-columns:1fr !important;
    gap:20px;
  }

  .contactWrap .panel,
  .contactWrap form{
    padding:20px;
  }
}