/* =========================================================
   AT WATER | style_servicios.css
   Parche premium responsive para página de servicios
   Lema: "Refréscate en armonía con el planeta"
   ========================================================= */

/* =========================
   TOKENS / IDENTIDAD
   ========================= */
:root{
  --atw-primary: #0d8aa6;
  --atw-primary-2: #14a8c7;
  --atw-primary-3: #083b52;
  --atw-primary-4: #062a3a;

  --atw-accent: #28c7d9;
  --atw-accent-2: #72e6ee;
  --atw-accent-soft: #e8f9fc;

  --atw-success: #1da96b;
  --atw-success-2: #32c98a;
  --atw-warning: #d89b1d;

  --atw-bg: #f4fbfd;
  --atw-bg-soft: #f8fcfd;
  --atw-surface: rgba(255,255,255,.92);
  --atw-surface-2: #eff8fa;
  --atw-surface-3: #e7f5f8;

  --atw-text: #0c1e2d;
  --atw-text-2: #17324a;
  --atw-muted: #5f7788;
  --atw-white: #ffffff;

  --atw-line: rgba(7,57,78,.10);
  --atw-line-strong: rgba(7,57,78,.18);

  --atw-shadow-xs: 0 4px 14px rgba(8, 59, 82, .06);
  --atw-shadow-sm: 0 10px 30px rgba(8, 59, 82, .08);
  --atw-shadow-md: 0 18px 50px rgba(8, 59, 82, .12);
  --atw-shadow-lg: 0 26px 80px rgba(8, 59, 82, .16);

  --atw-radius-sm: 12px;
  --atw-radius-md: 18px;
  --atw-radius-lg: 28px;
  --atw-radius-xl: 36px;

  --atw-container-gap: clamp(1rem, 2vw, 2rem);
  --atw-section-space: clamp(3.5rem, 7vw, 7rem);

  --atw-title-size: clamp(2rem, 4vw, 4.6rem);
  --atw-h2-size: clamp(1.65rem, 2.6vw, 3rem);
  --atw-h3-size: clamp(1.25rem, 2vw, 2rem);
  --atw-body-size: clamp(1rem, 1.05vw, 1.08rem);
  --atw-lead-size: clamp(1.05rem, 1.35vw, 1.28rem);

  --atw-ease: cubic-bezier(.22,.61,.36,1);
  --atw-fast: 220ms;
  --atw-normal: 420ms;
  --atw-slow: 900ms;
}

/* =========================
   BASE
   ========================= */
html{
  scroll-behavior: smooth;
}

body{
  color: var(--atw-text);
  background:
    radial-gradient(circle at top left, rgba(40,199,217,.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(13,138,166,.06), transparent 28%),
    var(--atw-bg);
  font-feature-settings: "ss01" 1, "cv01" 1;
  text-rendering: optimizeLegibility;
}

p,
li,
span,
small{
  color: var(--atw-text-2);
}

.justificarTextos,
.text-justify{
  text-wrap: pretty;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  transition:
    color var(--atw-fast) var(--atw-ease),
    opacity var(--atw-fast) var(--atw-ease),
    transform var(--atw-fast) var(--atw-ease);
}

a:hover{
  text-decoration: none;
}

/* =========================
   SECCIONES
   ========================= */
section{
  position: relative;
  overflow: hidden;
}

section:not(.p-0){
  padding-top: var(--atw-section-space);
  padding-bottom: var(--atw-section-space);
}

.container,
.container-fluid{
  position: relative;
  z-index: 2;
}

.row.section-title{
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.row.section-title h2,
.row.section-title h3,
.row.section-title .display-4,
.row.section-title .display-3{
  margin-bottom: 1rem;
}

.row.section-title .lead{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   TIPOGRAFÍA
   ========================= */
.display-3,
.display-4,
.display-5{
  letter-spacing: -.03em;
  line-height: .98;
  color: var(--atw-primary-4);
  font-weight: 800;
  text-wrap: balance;
}

.display-3{
  font-size: var(--atw-title-size);
}

.display-4{
  font-size: clamp(1.9rem, 3.6vw, 3.8rem);
}

.display-5{
  font-size: clamp(1.55rem, 2.7vw, 2.9rem);
}

.h1, h1{ font-size: clamp(1.75rem, 2.8vw, 3rem); }
.h2, h2{ font-size: var(--atw-h2-size); }
.h3, h3{ font-size: var(--atw-h3-size); }

h1, h2, h3, h4, h5, h6{
  color: var(--atw-primary-4);
  font-weight: 760;
  line-height: 1.08;
  text-wrap: balance;
}

.lead{
  font-size: var(--atw-lead-size);
  line-height: 1.65;
  color: var(--atw-text-2);
  font-weight: 450;
}

p{
  font-size: var(--atw-body-size);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* =========================
   MARCA AT WATER + LEMA
   ========================= */
#informacion::before{
  content: "AT WATER";
  position: absolute;
  top: 2rem;
  left: clamp(1rem, 3vw, 3rem);
  font-size: clamp(3.2rem, 9vw, 8rem);
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(13,138,166,.06);
  pointer-events: none;
  z-index: 0;
}

#informacion::after{
  content: "Refréscate en armonía con el planeta";
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  font-size: clamp(.82rem, 1.15vw, 1rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(8,59,82,.55);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(7,57,78,.08);
  padding: .7rem 1rem;
  border-radius: 999px;
  box-shadow: var(--atw-shadow-xs);
  z-index: 3;
}

/* =========================================================
   HERO FIX REAL - AT WATER
   Corrige superposición, corte visual y responsive
   ========================================================= */

#informacion.atw-hero-section{
  position: relative;
  overflow: clip;
  min-height: auto;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,251,253,.92)),
    radial-gradient(circle at 15% 15%, rgba(20,168,199,.10), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(40,199,217,.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(8,59,82,.06), transparent 34%);
  isolation: isolate;
  border-color: var(--atw-line) !important;
}

#informacion.atw-hero-section::before{
  content: "AT WATER";
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 3vw, 3rem);
  font-size: clamp(3.6rem, 11vw, 9rem);
  line-height: .82;
  font-weight: 900;
  letter-spacing: -.07em;
  color: rgba(13,138,166,.05);
  pointer-events: none;
  z-index: 0;
}

#informacion.atw-hero-section::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--atw-line);
  z-index: 2;
}

.atw-hero-shell{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  min-height: clamp(680px, 92vh, 860px);
}

.atw-hero-copy{
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(5.8rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3.2rem);
  z-index: 2;
}

.atw-hero-container{
  position: relative;
}

.atw-hero-copy .display-3{
  max-width: 10.5ch;
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: .95;
  letter-spacing: -.055em;
  color: var(--atw-primary-4);
  margin-bottom: 1.25rem !important;
  position: relative;
  z-index: 2;
}

.atw-hero-copy .lead{
  max-width: 31ch;
  font-size: clamp(1.05rem, 1.22vw, 1.34rem);
  line-height: 1.6;
  margin-bottom: 1rem !important;
}

.atw-hero-copy p:not(.lead){
  max-width: 38ch;
  font-size: clamp(1rem, 1.02vw, 1.1rem);
  line-height: 1.8;
}

.hero-copy-last{
  margin-bottom: 0;
}

.atw-hero-copy .badge{
  position: relative;
  z-index: 3;
}

.atw-hero-copy .btn{
  min-width: 220px;
}

.hero-mini-cards{
  margin-top: 2rem !important;
  position: relative;
  z-index: 2;
}

.hero-mini-cards .bg-light{
  min-height: 154px;
  padding: 1.15rem 1rem !important;
  background:
    linear-gradient(180deg, rgba(248,252,253,.96), rgba(239,248,250,.94)) !important;
  border: 1px solid rgba(7,57,78,.08) !important;
  box-shadow: 0 8px 24px rgba(8,59,82,.05);
}

.hero-mini-cards strong{
  display: block;
  font-size: 1.05rem;
  color: var(--atw-primary-4);
  line-height: 1.3;
  margin-bottom: .45rem;
}

.atw-hero-tagline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .35rem;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(7,57,78,.08);
  box-shadow: var(--atw-shadow-xs);
  backdrop-filter: blur(10px);
  color: rgba(8,59,82,.56);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .85rem;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

.atw-hero-media{
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: linear-gradient(180deg, rgba(8,59,82,.06), rgba(8,59,82,.02));
}

.atw-hero-divider{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: clamp(70px, 7vw, 108px);
  background: var(--atw-white);
  clip-path: polygon(0 0, 100% 0, 38% 100%, 0 100%);
  z-index: 3;
  pointer-events: none;
  opacity: .98;
}

.atw-hero-slider{
  position: relative;
  width: 100%;
  height: 100%;
}

.atw-hero-slider .flickity-viewport,
.atw-hero-slider .flickity-slider,
.atw-hero-slider .carousel-cell{
  height: 100% !important;
}

.atw-hero-slider .carousel-cell{
  width: 100%;
  position: relative;
  overflow: hidden;
}

.atw-hero-slider .carousel-cell::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,59,82,.08), rgba(8,59,82,.16));
  z-index: 1;
  pointer-events: none;
}

.atw-hero-slider .carousel-cell img{
  width: 100%;
  height: 100%;
  min-height: clamp(680px, 92vh, 860px);
  object-fit: cover;
  object-position: center center;
  border-radius: 0 !important;
  transition: transform 1.4s var(--atw-ease), filter .7s var(--atw-ease);
  filter: saturate(1.04) contrast(1.02);
}

.atw-hero-slider .carousel-cell:hover img{
  transform: scale(1.025);
}

#informacion .flickity-page-dots{
  bottom: 20px;
}

#informacion .flickity-page-dots .dot{
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: rgba(255,255,255,.95);
  opacity: .38;
}

#informacion .flickity-page-dots .dot.is-selected{
  opacity: 1;
  transform: scale(1.12);
}

/* evita que el section global corte raro contenido interno */
#informacion section,
#informacion .container,
#informacion .row,
#informacion .col-12,
#informacion .col-md-10,
#informacion .col-xl-9{
  overflow: visible;
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 1199.98px){
  .atw-hero-shell{
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    min-height: clamp(620px, 84vh, 760px);
  }

  .atw-hero-copy .display-3{
    font-size: clamp(2.7rem, 4.5vw, 4.3rem);
    max-width: 11ch;
  }

  .atw-hero-slider .carousel-cell img{
    min-height: clamp(620px, 84vh, 760px);
  }
}

/* =========================
   LG / MD
   ========================= */
@media (max-width: 991.98px){
  #informacion.atw-hero-section{
    overflow: hidden;
  }

  #informacion.atw-hero-section::before{
    top: 1rem;
    left: 1rem;
    font-size: clamp(2.8rem, 12vw, 5rem);
  }

  .atw-hero-shell{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .atw-hero-copy{
    order: 1;
    padding: 5.6rem 0 2rem;
  }

  .atw-hero-copy .display-3{
    max-width: none;
    font-size: clamp(2.35rem, 7vw, 3.8rem);
    line-height: .98;
  }

  .atw-hero-copy .lead,
  .atw-hero-copy p:not(.lead){
    max-width: none;
  }

  .atw-hero-media{
    order: 2;
    min-height: 420px;
  }

  .atw-hero-divider{
    display: none !important;
  }

  .atw-hero-slider .carousel-cell img{
    min-height: 420px;
    max-height: 520px;
  }

  .atw-hero-tagline{
    margin-top: .5rem;
    font-size: .75rem;
    letter-spacing: .14em;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 767.98px){
  .atw-hero-copy{
    padding: 5rem 0 1.5rem;
  }

  .atw-hero-copy .display-3{
    font-size: clamp(2.1rem, 9vw, 3rem);
    line-height: 1;
    margin-bottom: 1rem !important;
  }

  .atw-hero-copy .lead{
    font-size: 1rem;
    line-height: 1.65;
  }

  .atw-hero-copy p:not(.lead){
    font-size: .97rem;
    line-height: 1.72;
  }

  .atw-hero-copy .btn{
    width: 100%;
    min-width: 100%;
  }

  .hero-mini-cards{
    margin-top: 1.6rem !important;
  }

  .hero-mini-cards .bg-light{
    min-height: auto;
  }

  .atw-hero-tagline{
    width: 100%;
    text-align: center;
    justify-content: center;
    border-radius: 18px;
    letter-spacing: .1em;
    font-size: .72rem;
    padding: .8rem .9rem;
  }

  .atw-hero-media{
    min-height: 300px;
  }

  .atw-hero-slider .carousel-cell img{
    min-height: 300px;
    max-height: 360px;
  }
}

/* =========================
   XS
   ========================= */
@media (max-width: 479.98px){
  #informacion.atw-hero-section::before{
    font-size: 2.2rem;
    top: .8rem;
    left: .8rem;
  }

  .atw-hero-copy{
    padding-top: 4.5rem;
  }

  .atw-hero-copy .display-3{
    font-size: clamp(1.9rem, 10vw, 2.5rem);
  }

  .atw-hero-tagline{
    font-size: .66rem;
    padding: .72rem .82rem;
  }
}
/* =========================
   BADGES
   ========================= */
.badge{
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  box-shadow: var(--atw-shadow-xs);
}

.badge-primary{
  background: linear-gradient(135deg, var(--atw-primary), var(--atw-primary-2));
  color: #fff;
}

.badge-success{
  background: linear-gradient(135deg, var(--atw-success), var(--atw-success-2));
  color: #fff;
}

/* =========================
   BOTONES
   ========================= */
.btn,
.button{
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: .01em;
  padding: .92rem 1.45rem;
  line-height: 1.2;
  border-width: 1px;
  box-shadow: var(--atw-shadow-xs);
  transition:
    transform var(--atw-fast) var(--atw-ease),
    box-shadow var(--atw-fast) var(--atw-ease),
    background var(--atw-fast) var(--atw-ease),
    border-color var(--atw-fast) var(--atw-ease),
    color var(--atw-fast) var(--atw-ease);
}

.btn:hover,
.button:hover{
  transform: translateY(-2px);
  box-shadow: var(--atw-shadow-sm);
}

.btn:active,
.button:active{
  transform: translateY(0);
}

.btn-lg,
.button-xlarge{
  padding: 1rem 1.6rem;
  font-size: 1rem;
}

.btn-primary,
.button-blue{
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--atw-primary), var(--atw-primary-2)) !important;
}

.btn-primary:hover,
.button-blue:hover{
  background: linear-gradient(135deg, var(--atw-primary-3), var(--atw-primary)) !important;
}

.btn-outline-primary{
  color: var(--atw-primary-3) !important;
  border-color: rgba(13,138,166,.24) !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(10px);
}

.btn-outline-primary:hover{
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--atw-primary), var(--atw-primary-2)) !important;
}

.btn-success,
.button-green,
.btn-primary-3{
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--atw-success), var(--atw-success-2)) !important;
}

.btn-success:hover,
.button-green:hover,
.btn-primary-3:hover{
  background: linear-gradient(135deg, #168456, #22b878) !important;
}

.btn-light{
  color: var(--atw-primary-4) !important;
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(255,255,255,.65) !important;
}

.btn-outline-light{
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.46) !important;
}

/* =========================
   TARJETAS
   ========================= */
.card{
  border: 1px solid var(--atw-line);
  border-radius: var(--atw-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  backdrop-filter: blur(10px);
  box-shadow: var(--atw-shadow-xs);
  overflow: hidden;
  transition:
    transform var(--atw-normal) var(--atw-ease),
    box-shadow var(--atw-normal) var(--atw-ease),
    border-color var(--atw-normal) var(--atw-ease);
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--atw-shadow-md);
  border-color: rgba(13,138,166,.20);
}

.card-body{
  padding: clamp(1.1rem, 1.6vw, 1.8rem);
}

.card h5,
.card h6,
.card h4{
  margin-bottom: .65rem;
}

.hover-box-shadow{
  transition:
    transform var(--atw-normal) var(--atw-ease),
    box-shadow var(--atw-normal) var(--atw-ease),
    filter var(--atw-normal) var(--atw-ease);
}

.hover-box-shadow:hover{
  transform: translateY(-6px);
  box-shadow: var(--atw-shadow-md) !important;
  filter: saturate(1.04);
}

/* =========================
   PILARES / BLOQUES PEQUEÑOS
   ========================= */
.border.rounded,
.media.rounded,
.alert,
.bg-light.rounded{
  border-radius: var(--atw-radius-md) !important;
}

.media.rounded{
  border: 1px solid var(--atw-line);
  box-shadow: var(--atw-shadow-xs);
  transition:
    transform var(--atw-fast) var(--atw-ease),
    box-shadow var(--atw-fast) var(--atw-ease),
    border-color var(--atw-fast) var(--atw-ease);
}

.media.rounded:hover{
  transform: translateY(-3px);
  box-shadow: var(--atw-shadow-sm);
  border-color: rgba(13,138,166,.18);
}

/* =========================
   ALERTAS
   ========================= */
.alert{
  border: 1px solid var(--atw-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,252,253,.92)) !important;
  box-shadow: var(--atw-shadow-xs);
  color: var(--atw-text-2);
}

.alert-warning{
  background:
    linear-gradient(180deg, rgba(255,251,235,.96), rgba(255,245,210,.94)) !important;
  border-color: rgba(216,155,29,.24) !important;
}

.alert.bg-secondary{
  background:
    linear-gradient(135deg, rgba(8,59,82,.96), rgba(13,138,166,.92)) !important;
  color: #fff !important;
}

.alert.bg-secondary a{
  color: #fff !important;
  font-weight: 700;
}

/* =========================
   ACORDEONES
   ========================= */
[id*="faq-accordion"] .card{
  border-radius: var(--atw-radius-md);
}

[id*="faq-accordion"] .card > a{
  display: block;
  color: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,252,253,.92));
  transition:
    background var(--atw-fast) var(--atw-ease),
    transform var(--atw-fast) var(--atw-ease);
}

[id*="faq-accordion"] .card > a:hover{
  background:
    linear-gradient(180deg, rgba(232,249,252,.95), rgba(255,255,255,.96));
}

[id*="faq-accordion"] .card .collapse.show{
  animation: atwFadeUp .38s var(--atw-ease);
}

[id*="faq-accordion"] .fa-chevron-down{
  transition: transform var(--atw-fast) var(--atw-ease), color var(--atw-fast) var(--atw-ease);
}

[id*="faq-accordion"] a[aria-expanded="true"] .fa-chevron-down{
  transform: rotate(180deg);
  color: var(--atw-success);
}

/* =========================
   LISTAS / STEPS
   ========================= */
.list-unstyled li .rounded-circle{
  box-shadow: 0 10px 26px rgba(8,59,82,.14);
  transition:
    transform var(--atw-fast) var(--atw-ease),
    box-shadow var(--atw-fast) var(--atw-ease);
}

.list-unstyled li:hover .rounded-circle{
  transform: scale(1.04);
  box-shadow: 0 14px 34px rgba(8,59,82,.18);
}

/* =========================
   AVATARES
   ========================= */
.avatar-group li{
  margin: .45rem;
}

.avatar,
.avatar-xl{
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: var(--atw-shadow-sm);
  transition:
    transform var(--atw-fast) var(--atw-ease),
    box-shadow var(--atw-fast) var(--atw-ease),
    filter var(--atw-fast) var(--atw-ease);
}

.avatar:hover,
.avatar-xl:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--atw-shadow-md);
  filter: saturate(1.06);
}

/* =========================
   TABS
   ========================= */
.nav-pills{
  gap: .5rem;
}

.nav-pills .nav-link{
  border-radius: 999px;
  padding: .8rem 1.1rem;
  background: rgba(255,255,255,.78);
  color: var(--atw-primary-4);
  border: 1px solid rgba(13,138,166,.10);
  box-shadow: var(--atw-shadow-xs);
  font-weight: 700;
  transition:
    transform var(--atw-fast) var(--atw-ease),
    box-shadow var(--atw-fast) var(--atw-ease),
    background var(--atw-fast) var(--atw-ease),
    color var(--atw-fast) var(--atw-ease);
}

.nav-pills .nav-link:hover{
  transform: translateY(-2px);
  box-shadow: var(--atw-shadow-sm);
}

.nav-pills .nav-link.active{
  color: #fff !important;
  background: linear-gradient(135deg, var(--atw-primary), var(--atw-primary-2)) !important;
  border-color: transparent !important;
}

.tab-content > .tab-pane{
  animation: atwFadeUp .45s var(--atw-ease);
}

/* =========================
   IMÁGENES / BLOQUES VISUALES
   ========================= */
img.rounded,
.card-img-top,
.carousel-cell img{
  border-radius: var(--atw-radius-md);
}

.shadow,
.shadow-lg,
.shadow-sm{
  box-shadow: var(--atw-shadow-sm) !important;
}

.border-thick{
  border-width: 6px !important;
}

.position-absolute.rounded-circle{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.72);
}

/* =========================
   WIDGETS / STATS
   ========================= */
.display-4.text-dark,
.display-3.text-dark{
  color: var(--atw-primary-4) !important;
}

.text-success{
  color: var(--atw-success) !important;
}

.text-primary{
  color: var(--atw-primary) !important;
}

.bg-primary-3{
  background:
    linear-gradient(135deg, var(--atw-primary-4), var(--atw-primary-3)) !important;
}

.bg-light{
  background:
    linear-gradient(180deg, rgba(248,252,253,.98), rgba(239,248,250,.96)) !important;
}

.bg-white{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,254,255,.96)) !important;
}

/* =========================
   DIVIDERS / DECORACIÓN
   ========================= */
.divider{
  opacity: .7;
}

.blob{
  filter: blur(2px);
}

#startPage::before,
#ecosistema-digital::before,
#servicios-miembros::before,
#cartuchos::before{
  content: "";
  position: absolute;
  inset: auto auto 0 -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40,199,217,.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* =========================
   BLOCKQUOTE
   ========================= */
.blockquote{
  font-size: clamp(1.06rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  color: var(--atw-primary-3);
  font-weight: 600;
}

mark{
  background:
    linear-gradient(120deg, rgba(114,230,238,.18), rgba(40,199,217,.25));
  color: inherit;
  padding: .08em .28em;
  border-radius: .45rem;
}

/* =========================
   FLICKITY
   ========================= */
.flickity-viewport{
  border-radius: inherit;
}

.flickity-page-dots{
  bottom: 18px;
}

.flickity-page-dots .dot{
  width: 10px;
  height: 10px;
  opacity: .34;
  background: rgba(255,255,255,.92);
  transition: transform var(--atw-fast) var(--atw-ease), opacity var(--atw-fast) var(--atw-ease);
}

.flickity-page-dots .dot.is-selected{
  opacity: 1;
  transform: scale(1.18);
}

/* =========================
   MICROANIMACIONES
   ========================= */
[data-aos="fade-right"],
[data-aos="fade-left"],
[data-aos="fade-in"],
[data-aos="fade-up"]{
  transition-timing-function: var(--atw-ease) !important;
}

.iconoMenSaltando{
  display: inline-block;
  animation: atwFloat 2.1s ease-in-out infinite;
}

/* =========================
   FORM / SELECTS
   ========================= */
select,
.form-control,
.bootstrap-select .dropdown-toggle{
  min-height: 56px;
  border-radius: 16px !important;
  border: 1px solid var(--atw-line) !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.95) !important;
  color: var(--atw-text) !important;
}

.bootstrap-select .dropdown-toggle:focus,
.form-control:focus,
select:focus{
  border-color: rgba(20,168,199,.45) !important;
  box-shadow: 0 0 0 4px rgba(20,168,199,.10) !important;
}

/* =========================
   ESPACIADO ADAPTATIVO
   ========================= */
.py-5{
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
}

.pt-2{
  padding-top: clamp(1.5rem, 3vw, 2.2rem) !important;
}

.pb-5{
  padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
}

/* =========================
   RESPONSIVE XL / LG
   ========================= */
@media (max-width: 1199.98px){
  #informacion .carousel-cell img{
    min-height: 440px;
  }

  #informacion::before{
    font-size: clamp(3rem, 10vw, 6rem);
  }
}

@media (max-width: 991.98px){
  #informacion{
    min-height: auto;
  }

  #informacion::before{
    top: 1rem;
    left: 1rem;
    opacity: .9;
  }

  #informacion::after{
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    font-size: .72rem;
    letter-spacing: .11em;
  }

  #informacion .carousel-cell img{
    min-height: 340px;
    border-radius: 0;
  }

  .display-3,
  .display-4,
  .display-5,
  h1, h2, h3{
    text-wrap: pretty;
  }

  .position-absolute.rounded-circle,
  .position-absolute.p-0.col-4{
    display: none !important;
  }

  .nav-pills{
    gap: .7rem;
  }

  .nav-pills .nav-link{
    padding: .75rem 1rem;
    font-size: .95rem;
  }

  .row.section-title{
    margin-bottom: 2.2rem;
  }
}

/* =========================
   RESPONSIVE MD / SM
   ========================= */
@media (max-width: 767.98px){
  body{
    background:
      radial-gradient(circle at top left, rgba(40,199,217,.08), transparent 32%),
      var(--atw-bg);
  }

  section:not(.p-0){
    padding-top: clamp(2.6rem, 8vw, 3.4rem);
    padding-bottom: clamp(2.6rem, 8vw, 3.4rem);
  }

  .display-3{
    font-size: clamp(2rem, 8vw, 2.7rem);
    line-height: 1.02;
  }

  .display-4{
    font-size: clamp(1.7rem, 7vw, 2.35rem);
  }

  .display-5{
    font-size: clamp(1.45rem, 6.2vw, 2rem);
  }

  .lead{
    font-size: 1.02rem;
    line-height: 1.7;
  }

  p{
    font-size: .98rem;
    line-height: 1.75;
  }

  #informacion .btn,
  .btn,
  .button{
    width: 100%;
    min-width: 100%;
  }

  .btn + .btn,
  .button + .button{
    margin-top: .75rem;
  }

  .card-body{
    padding: 1rem;
  }

  .blockquote{
    font-size: 1rem;
  }

  .avatar,
  .avatar-xl{
    width: 64px;
    height: 64px;
    object-fit: cover;
  }

  .media.rounded{
    width: 100%;
    justify-content: flex-start;
  }

  #informacion .carousel-cell img{
    min-height: 260px;
  }
}

/* =========================
   RESPONSIVE XS
   ========================= */
@media (max-width: 479.98px){
  #informacion::before{
    font-size: 2.4rem;
    top: .8rem;
    left: .8rem;
  }

  #informacion::after{
    font-size: .65rem;
    padding: .55rem .8rem;
    letter-spacing: .08em;
  }

  .badge{
    white-space: normal;
    line-height: 1.4;
  }

  .btn-lg,
  .button-xlarge{
    font-size: .96rem;
    padding: .95rem 1.1rem;
  }

  .nav-pills .nav-link{
    width: 100%;
    text-align: center;
  }
}

/* =========================
   MOTION SAFE
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   KEYFRAMES
   ========================= */
@keyframes atwFadeUp{
  from{
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes atwFloat{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-4px);
  }
}