/* SACYS Waves (global) -------------------------------------------------
   Objetivo: todas las secciones con wave superior e inferior, responsive,
   con animación CSS (suave) y sin tapar contenido.

   Técnica: pseudo-elementos con background-color + mask-image (SVG).
   Así podemos cambiar color por sección con --wave-color.
*/

:root {
  --page-bg: #ddd;

  /* Waves: más pronunciadas + responsivas (ocupan y se desplazan por todo el ancho) */
  --wave-height: clamp(120px, 12vw, 240px);
  /* ancho “tile” del SVG: al menos 1800px o 180vw para cubrir pantallas grandes */
  --wave-width: max(1800px, 180vw);
  --wave-speed-top: 18s;
  --wave-speed-bottom: 13s;
}

/* Asegura que el contenido siempre quede encima */
.section {
  position: relative;
  overflow: hidden;
  /* espacio para que la ola no tape el contenido */
  padding-top: calc(var(--wave-height) * 0.55);
  padding-bottom: calc(var(--wave-height) * 0.55);
}

/* color por defecto del wave: el fondo del body */
.section {
  --wave-color: var(--page-bg);
}

/* Para secciones oscuras, el wave debe ser oscuro para verse integrado */
.dark-background.section,
.section.dark-background {
  --wave-color: #060606;
}

/* Waves (deshabilitado por ahora)
   Jonatan: no se estaban percibiendo y agregaban complejidad.
   Si luego quieres reactivarlas, reponemos este bloque.
*/
.section::before,
.section::after {
  content: none;
}

.section::before {
  top: 0;
  /* que se vea completa y “entre” desde arriba */
  transform: translateY(-62%) rotate(180deg);
}

.section::after {
  bottom: 0;
  transform: translateY(62%);
}

/* Contenedor por encima */
.section > .container {
  position: relative;
  z-index: 2;
}

/* Animación suave (movible con CSS) */
@keyframes sacys-wave-move {
  0%   { -webkit-mask-position: 0 0; mask-position: 0 0; }
  100% { -webkit-mask-position: var(--wave-width) 0; mask-position: var(--wave-width) 0; }
}

@keyframes sacys-wave-move-reverse {
  0%   { -webkit-mask-position: var(--wave-width) 0; mask-position: var(--wave-width) 0; }
  100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* Top y bottom con velocidades distintas (se siente más vivo) */
.section::before {
  animation: sacys-wave-move-reverse var(--wave-speed-top) linear infinite;
}

.section::after {
  animation: sacys-wave-move var(--wave-speed-bottom) linear infinite;
}

/* Respeto a accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .section::before,
  .section::after {
    animation: none;
  }
}

/* Ajustes finos para Hero: evitar que el header fijo lo tape (sobre todo en pantallas grandes)
   Nota: usamos !important porque el template define padding en .hero con shorthand.
*/
.hero.section {
  /* offset = header (topbar+branding) + aire visual */
  padding-top: calc(var(--wave-height) * 0.25 + 132px) !important;
}

@media (min-width: 1200px) {
  .hero.section {
    padding-top: calc(var(--wave-height) * 0.25 + 210px) !important;
  }
}

@media (min-width: 1600px) {
  .hero.section {
    padding-top: calc(var(--wave-height) * 0.25 + 240px) !important;
  }
}

/* La imagen del hero: un poco más “presentación” en desktop */
.hero .hero-visual {
  max-height: 520px;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 70px rgba(2, 6, 23, .45));
}

/* Compatibilidad: si alguna sección ya tenía clases wave-top/wave-bottom antiguas,
   no se rompe; quedan absorbidas por el sistema global. */
.wave-top, .wave-bottom {
  padding-top: inherit;
  padding-bottom: inherit;
}

/* SACYS “modern pass” -------------------------------------------------
   Objetivo: menos “bloques cuadrados”, más profundidad y movimiento sutil.
   También: header moderno (glass) con contraste real.
*/

/* Header moderno (glass) + colores alineados a marca */
.header.fixed-top {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(2, 6, 23, .08);
}

.header .topbar {
  background: rgba(231, 98, 18, .92) !important; /* naranja SACYS */
}

.header .branding {
  background: transparent !important;
}

/* Logo + nav en oscuro para que no “se pierda” en blanco */
.header .logo h1,
.header .navmenu a,
.header .navmenu a:focus {
  color: #0f172a !important;
}

.header .navmenu a:hover,
.header .navmenu .active,
.header .navmenu .active:focus {
  color: #E76212 !important;
}

/* En mobile, fondo del drawer */
.navmenu ul {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}

/* Fondo más moderno por defecto */
body.index-page {
  background: radial-gradient(1200px 600px at 15% 10%, rgba(66, 153, 225, .16), transparent 55%),
              radial-gradient(900px 520px at 85% 25%, rgba(126, 58, 242, .12), transparent 60%),
              linear-gradient(180deg, #f7fafc 0%, #eef2f7 100%);
}

/* Secciones: un poco más aire + transición visual */
.section {
  scroll-margin-top: 90px;
}

/* “Glow” sutil por sección (no interfiere con el wave porque va debajo del contenido) */
.section::marker { content: ''; }
.section .section-title {
  max-width: 920px;
}

.section:not(.dark-background)::before,
.section:not(.dark-background)::after {
  filter: drop-shadow(0 18px 40px rgba(2, 6, 23, .12));
}

/* Tarjetas / bloques: más modernos (glass + hover) */
.services .service-item,
.pricing .pricing-item,
.testimonials .testimonial-item,
.stats .stats-item {
  border-radius: 22px;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
}

.testimonials .testimonial-item {
  border: 1px solid rgba(2, 6, 23, .08);
  box-shadow: 0 18px 60px -40px rgba(2, 6, 23, .45);
}

.pricing .pricing-item {
  border: 1px solid rgba(2, 6, 23, .08);
  box-shadow: 0 18px 70px -52px rgba(2, 6, 23, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}

.pricing .pricing-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 90px -60px rgba(2, 6, 23, .65);
}

/* Hero: más “premium” con profundidad + contraste de texto (evitar blanco sobre fondo claro) */
.hero.section {
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(56, 189, 248, .25), transparent 55%),
    radial-gradient(900px 420px at 85% 30%, rgba(99, 102, 241, .20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.10) 55%);
}

/* Si el Hero viene con .accent-background del template (texto blanco), lo forzamos a modo “light hero” */
.hero.section.accent-background {
  --default-color: #0f172a;   /* slate-900 */
  --heading-color: #0f172a;
  --contrast-color: #0f172a;
}

.hero.section h2,
.hero.section p,
.hero.section .btn-watch-video span {
  color: var(--default-color) !important;
}

.hero.section h2 {
  letter-spacing: -0.02em;
}

.hero.section p {
  opacity: .92;
}

/* Mantener el “accent” (SACYS) en naranja */
.hero.section .accent {
  color: #E76212 !important;
}

/* Botones más suaves */
.btn-get-started,
.buy-btn,
.cta-btn {
  border-radius: 999px !important;
}