/* ===== Variables ===== */
:root {
  --enh-primary: #1e56a0;
  --enh-accent: #66b972;
  --enh-ease: cubic-bezier(.22,.61,.36,1);
}

/* ===== Animaciones base ===== */
@keyframes enh-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes enh-pop {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes enh-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes enh-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(102,185,114,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(102,185,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(102,185,114,0); }
}
@keyframes enh-arrow-bounce {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(6px); }
}
@keyframes enh-slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
@keyframes enh-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ===== Reveal on scroll ===== */
.enh-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--enh-ease), transform .8s var(--enh-ease); will-change: opacity, transform; }
.enh-reveal.is-visible { opacity: 1; transform: translateY(0); }
.enh-reveal[data-delay="1"].is-visible { transition-delay: .08s; }
.enh-reveal[data-delay="2"].is-visible { transition-delay: .16s; }
.enh-reveal[data-delay="3"].is-visible { transition-delay: .24s; }
.enh-reveal[data-delay="4"].is-visible { transition-delay: .32s; }

/* ===== Hero / header ===== */
.header-pagina, .promo-principal { overflow: hidden; }
.swiper-slide-bg { animation: enh-slow-zoom 18s ease-in-out infinite alternate; }
.main_title { animation: enh-fade-up .9s var(--enh-ease) both; }
.main_title + p, .principal_mobile p { animation: enh-fade-up 1s var(--enh-ease) .15s both; }
.bcheader {
  animation: enh-pop .7s var(--enh-ease) both;
  transition: transform .3s var(--enh-ease), background-color .3s var(--enh-ease), border-color .3s var(--enh-ease);
}
.bcheader:hover {
  transform: translateY(-2px);
  background-color: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
}
.bcheader svg { transition: transform .4s var(--enh-ease); }
.bcheader:hover svg { transform: rotate(360deg); }

/* ===== Botones (verde WhatsApp / outline / success) ===== */
.btn-custom, .btn-whatsapp, .btn-success {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--enh-ease), box-shadow .35s var(--enh-ease), background-color .35s var(--enh-ease), letter-spacing .35s var(--enh-ease) !important;
  will-change: transform;
}
.btn-custom::before, .btn-whatsapp::before, .btn-success::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .7s var(--enh-ease);
  z-index: -1;
  pointer-events: none;
}
.btn-whatsapp:hover, .btn-success:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.35) !important;
  letter-spacing: .4px;
}
.btn-custom:hover::before, .btn-whatsapp:hover::before, .btn-success:hover::before {
  transform: translateX(110%);
}
.btn-custom:active, .btn-whatsapp:active, .btn-success:active {
  transform: translateY(-1px) scale(.99);
  transition-duration: .12s;
}
/* Pulso verde sutil en CTA WhatsApp */
.btn-header-inicio[style*="66b972"], .btn-success {
  animation: enh-pulse-ring 2.6s ease-out infinite;
}
.btn-header-inicio[style*="66b972"]:hover, .btn-success:hover { animation: none; }
.btn-beneficios:hover {
  background-color: rgba(255,255,255,.12) !important;
  border-color: #ffffff !important;
}
.btn-custom .fa-whatsapp, .btn-success .fa-whatsapp, .btn-custom .whatsapp-mobile {
  transition: transform .4s var(--enh-ease);
  display: inline-block;
}
.btn-custom:hover .fa-whatsapp, .btn-success:hover .fa-whatsapp, .btn-custom:hover .whatsapp-mobile {
  transform: rotate(-12deg) scale(1.18);
}

/* Ripple */
.enh-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.55);
  animation: enh-ripple-anim .7s var(--enh-ease) forwards;
  pointer-events: none;
  z-index: 0;
}

/* ===== Stats card ===== */
.stats-floating-card { transition: transform .5s var(--enh-ease), box-shadow .5s var(--enh-ease); }
.stats-floating-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -20px rgba(0,0,0,.25); }
.stats-item i { transition: transform .5s var(--enh-ease), color .35s var(--enh-ease); display: inline-block; }
.stats-item:hover i { transform: translateY(-4px) scale(1.15); color: var(--enh-primary); }
.stats-num {
  background: linear-gradient(90deg, #1e56a0 0%, #2b8fd6 50%, #1e56a0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: enh-shimmer 6s linear infinite;
}

/* ===== Cards ===== */
.card-servicio, .card-normativa, .card-sector, .card-cotizar, .card-proyecto-simple {
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--enh-ease), box-shadow .45s var(--enh-ease), border-color .45s var(--enh-ease) !important;
}
.card-servicio::after, .card-normativa::after, .card-sector::after,
.card-cotizar::after, .card-proyecto-simple::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--enh-primary), #2b8fd6, var(--enh-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--enh-ease);
  border-radius: 15px 15px 0 0;
}
.card-servicio:hover, .card-normativa:hover, .card-sector:hover,
.card-cotizar:hover, .card-proyecto-simple:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 45px -18px rgba(30,86,160,.22) !important;
  border-color: #cfdcec !important;
}
.card-servicio:hover::after, .card-normativa:hover::after, .card-sector:hover::after,
.card-cotizar:hover::after, .card-proyecto-simple:hover::after { transform: scaleX(1); }

/* Iconos dentro de cards */
.icon-box, .icon-box-blue, .icon-box-soft, .icon-circle-aux {
  transition: transform .5s var(--enh-ease), box-shadow .45s var(--enh-ease), background-color .45s var(--enh-ease), color .45s var(--enh-ease);
  will-change: transform;
}
.card-servicio:hover .icon-box,
.card-sector:hover .icon-box-soft,
.card-normativa:hover .icon-circle-aux {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 10px 24px -8px rgba(30,86,160,.35);
}
.item-ingenieria:hover .icon-box-blue {
  transform: scale(1.08) rotate(6deg);
  box-shadow: 0 14px 28px -8px rgba(30,86,160,.5);
}

/* Item ingeniería (proceso) */
.item-ingenieria {
  padding: 18px;
  border-radius: 14px;
  transition: background-color .4s var(--enh-ease), transform .4s var(--enh-ease);
}
.item-ingenieria:hover {
  background-color: rgba(30,86,160,.04);
  transform: translateX(6px);
}

/* ===== Links "Ver más" / link-descarga ===== */
.link-ver-mas, .link-descarga, .btn-ver-todos { position: relative; }
.link-ver-mas::after, .link-descarga::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width .35s var(--enh-ease);
}
.link-ver-mas:hover::after, .link-descarga:hover::after { width: 100%; }
.link-ver-mas:hover i, .link-descarga:hover i { animation: enh-arrow-bounce 1s var(--enh-ease) infinite; }
.btn-ver-todos { transition: transform .35s var(--enh-ease), color .35s var(--enh-ease); }
.btn-ver-todos:hover { transform: translateX(-4px); }
.btn-ver-todos:hover i { animation: enh-arrow-bounce 1s var(--enh-ease) infinite reverse; }

/* ===== Lista checks ===== */
.lista-checks li { transition: transform .35s var(--enh-ease), color .35s var(--enh-ease); cursor: default; }
.lista-checks li:hover { transform: translateX(6px); }
.lista-checks li i { transition: transform .35s var(--enh-ease); }
.lista-checks li:hover i { transform: scale(1.25) rotate(8deg); }

/* ===== Form inputs ===== */
#whatsappForm .form-control, #whatsappForm .form-select {
  transition: box-shadow .3s var(--enh-ease), background-color .3s var(--enh-ease), transform .3s var(--enh-ease);
}
#whatsappForm .form-control:focus, #whatsappForm .form-select:focus {
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(102,185,114,.25), 0 8px 20px -10px rgba(102,185,114,.45) !important;
  outline: none;
}
#whatsappForm .card { transition: transform .5s var(--enh-ease), box-shadow .5s var(--enh-ease); }
#whatsappForm .card:hover { transform: translateY(-3px); box-shadow: 0 28px 60px -25px rgba(40,167,69,.35) !important; }

/* ===== Accordion ===== */
.accordion-item {
  transition: transform .4s var(--enh-ease), box-shadow .4s var(--enh-ease);
  border-radius: 12px !important;
  overflow: hidden;
  margin-bottom: 10px;
}
.accordion-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.12);
}
.accordion-button {
  transition: background-color .35s var(--enh-ease), color .35s var(--enh-ease), padding-left .35s var(--enh-ease) !important;
}
.accordion-button:not(.collapsed) {
  background-color: rgba(30,86,160,.06) !important;
  color: var(--enh-primary) !important;
  padding-left: 1.5rem !important;
}
.accordion-button::after { transition: transform .4s var(--enh-ease) !important; }

/* ===== Accesibilidad: respetar prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   HERO — efectos temáticos (burbujas + ondas + brillo en título)
   ============================================================ */
.promo-principal::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 55%, transparent 100%);
  transform: skewX(-18deg);
  animation: enh-hero-sheen 9s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes enh-hero-sheen {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  60%  { left: 120%; opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
.enh-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.enh-bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,.12) 60%, transparent 70%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 8px rgba(255,255,255,.4);
  opacity: 0;
  animation: enh-bubble-rise linear infinite;
  will-change: transform, opacity;
}
@keyframes enh-bubble-rise {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(-50vh) translateX(20px) scale(1); opacity: .7; }
  100% { transform: translateY(-110vh) translateX(-10px) scale(.9); opacity: 0; }
}
.enh-waves {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.enh-waves svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
}
.enh-waves .wave-1 { animation: enh-wave-move 14s linear infinite; opacity: .35; }
.enh-waves .wave-2 { animation: enh-wave-move 22s linear infinite reverse; opacity: .25; bottom: 0px; }
.enh-waves .wave-3 { animation: enh-wave-move 30s linear infinite; opacity: .55; bottom: 0px; }
@keyframes enh-wave-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.main_title {
  position: relative;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #e3f0ff 50%, #ffffff 60%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: enh-fade-up .9s var(--enh-ease) both, enh-title-shine 7s ease-in-out 1.2s infinite;
}
@keyframes enh-title-shine {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}
@media (max-width: 768px) {
  .enh-waves { height: 50px; }
  .promo-principal::before { display: none; }
}

/* ===== Barra de progreso de scroll ===== */
#enh-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--enh-primary), var(--enh-accent));
  z-index: 9999;
  transition: width .1s linear;
  box-shadow: 0 0 10px rgba(102,185,114,.6);
}
.promo-principal { position: relative; overflow: hidden; }

/* ===== PARTÍCULAS ===== */
.enh-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.enh-bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 40%, transparent 70%);
  box-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 16px rgba(173,216,230,.35);
  opacity: 0;
  animation: enh-bubble-rise linear infinite;
  will-change: transform, opacity;
  filter: blur(.3px);
}
@keyframes enh-bubble-rise {
  0%   { transform: translateY(0) translateX(0) scale(.4); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(-50vh) translateX(20px) scale(1); opacity: .8; }
  100% { transform: translateY(-110vh) translateX(-10px) scale(.5); opacity: 0; }
}

/* ===== ONDAS ===== */
.enh-waves {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.enh-waves svg {
  position: absolute;
  bottom: 0;
  width: 200%;
  height: 100%;
}
.enh-waves .wave-1 { animation: enh-wave-move 14s linear infinite;            opacity: .35; }
.enh-waves .wave-2 { animation: enh-wave-move 22s linear infinite reverse;     opacity: .25; bottom: 0px; }
.enh-waves .wave-3 { animation: enh-wave-move 30s linear infinite;             opacity: .55; bottom: -2px; }
@keyframes enh-wave-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .enh-waves { height: 50px; }
}