.elementor-kit-7{--e-global-color-primary:#1BC7C5;--e-global-color-secondary:#FF6B6B;--e-global-color-text:#FFE38C;--e-global-color-accent:#0E2737;--e-global-color-f6c3843:#EEF3F7;--e-global-color-6bae907:#2BB673;--e-global-color-b0a669d:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-accent );}.elementor-kit-7 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-7 h1{color:#0E2737;font-family:"Poppins", Sans-serif;font-size:60px;font-weight:800;letter-spacing:0.5px;}.elementor-kit-7 h2{color:var( --e-global-color-accent );font-family:"Poppins", Sans-serif;font-size:40px;}.elementor-kit-7 h3{color:var( --e-global-color-accent );}.elementor-kit-7 h4{color:var( --e-global-color-accent );}.elementor-kit-7 h5{color:var( --e-global-color-accent );}.elementor-kit-7 h6{color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ====== SMARTWATER · HERO (SCOPED) ====== */
:root{
  --sw-blue:#9dbbe5; --sw-red:#fa1f02; --sw-gold:#efce8c; --sw-ink:#0f172a; --sw-text:#334155; --sw-smoke:#f6f9fc;
      :#FF6B6B;
}

/* Wrapper */
#sw-hero{
  --wrap: 90%;
  --gap: 28px;
  --radius: 18px;
  --headerH: 72px;
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg,#f7fbff 0%,#ffffff 65%);
}

/* Contenido centrado y grid */
#sw-hero .sw-inner{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 3.5vw, 28px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gap);
  align-items: center;
}

/* Columna texto */
#sw-hero .col-txt .eyebrow{
  font: 600 13px/1.2 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--sw-blue);
  margin-bottom: 12px;
}
#sw-hero .col-txt h1{
  color: var(--sw-ink);
  font: 800 clamp(28px,4.2vw,48px)/1.12 ui-sans-serif,system-ui,Inter,Roboto,Arial;
  margin: 0 0 12px 0;
}
#sw-hero .col-txt p.lead{
  color: var(--sw-text);
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.6;
  margin: 0 0 22px 0;
}

/* Botones */
#sw-hero .actions{
  display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 14px;
}
#sw-hero .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 999px; border:1px solid transparent;
  font-weight: 600; text-decoration:none; transition:.2s ease;
}
#sw-hero .btn-primary{ background: var(--sw-red); color:#fff; }
#sw-hero .btn-primary:hover{ filter: brightness(.96); }
#sw-hero .btn-ghost{ background:#fff; border-color:#e5e7eb; color:var(--sw-ink); }
#sw-hero .btn-ghost:hover{ background:#fafafa; }

/* Chips */
#sw-hero .chips{
  display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px;
}
#sw-hero .chip{
  font-weight:600; font-size:14px; line-height:1;
  padding: 10px 14px; border-radius:999px; background:#fff;
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
  border:1px solid #eef2f7;
}

/* Columna media (imagen o vídeo) */
#sw-hero .media{
  position:relative; border-radius: var(--radius); overflow:hidden;
  background:#dfeaf7;
  box-shadow: 0 24px 50px rgba(15,23,42,.12);
}
#sw-hero .media img,
#sw-hero .media video{
  display:block; width:100%; height:auto;
}

/* Espaciado superior */
#sw-hero{ padding-top: clamp(20px, 1.8vw, 28px); }
html:has(header.elementor-sticky--effects) #sw-hero{
  padding-top: calc(clamp(20px,1.8vw,28px) + var(--headerH));
}

/* Responsivo */
@media (max-width: 1024px){
  #sw-hero .sw-inner{ grid-template-columns: 1fr; }
  #sw-hero .media{ order: -1; }
}
@media (max-width: 640px){
  #sw-hero .actions .btn{ width:100%; }
}
/* ====== SMARTWATER · HOW IT WORKS (CÓMO FUNCIONA) ====== */
#como-funciona{
  --ink:#0E2737; --coral:#FF6B6B; --teal:#1BC7C5; --humo:#E8EDF3;
  --max:1200px; --gap:22px; --radius:16px;
  color:var(--ink); padding:72px 16px; background:#fff;
}
#como-funciona .wrap{ max-width:var(--max); margin:0 auto; }

/* Head */
#como-funciona .head{ text-align:center; margin-bottom:36px; }
#como-funciona h2{
  font-family:Poppins,system-ui,sans-serif; font-weight:700;
  font-size:clamp(28px, 4vw, 40px); line-height:1.1;
  margin:0 0 10px; color:var(--ink);
}
#como-funciona .sub{
  max-width:760px; margin:0 auto;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(15px, 1.8vw, 18px);
  line-height:1.6; opacity:.9;
}

/* Grid */
#como-funciona .grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:900px){
  #como-funciona .grid{ grid-template-columns:1fr; }
}

/* Card */
#como-funciona .card{
  border:1px solid var(--humo); border-radius:var(--radius);
  padding:22px; background:#fff;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#como-funciona .card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  border-color:var(--teal);
}

#como-funciona .icon{
  width:54px; height:54px; display:inline-grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(27,199,197,.12), rgba(27,199,197,.04));
  margin-bottom:14px;
}

#como-funciona h3{
  font-family:Poppins,system-ui,sans-serif; font-weight:700;
  font-size:20px; line-height:1.2; margin:0 0 8px; color:var(--ink);
}
#como-funciona p{
  font-family:Inter,system-ui,sans-serif;
  font-size:16px; line-height:1.6; margin:0;
}

/* Micro-animación suave */
@keyframes sw-fadeUp{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:translateY(0)}
}
#como-funciona .head,
#como-funciona .card{
  opacity:0; animation:sw-fadeUp .8s ease forwards;
}
#como-funciona .head{ animation-delay:.05s; }
#como-funciona .card:nth-child(1){ animation-delay:.10s; }
#como-funciona .card:nth-child(2){ animation-delay:.20s; }
#como-funciona .card:nth-child(3){ animation-delay:.30s; }

@media (prefers-reduced-motion: reduce){
  #como-funciona .head,
  #como-funciona .card{ animation:none; opacity:1; }
}
/* ====== SMARTWATER · BENEFITS ====== */
#beneficios{
  --ink:#0E2737; --coral:#FF6B6B; --teal:#1BC7C5; --humo:#E8EDF3;
  --max:1200px; --gap:22px; --radius:16px;
  background:#fff; color:var(--ink);
  padding:72px 16px;
}
#beneficios .wrap{ max-width:var(--max); margin:0 auto; }
#beneficios .head{ text-align:center; margin-bottom:36px; }
#beneficios h2{
  font-family:Poppins,system-ui,sans-serif; font-weight:700;
  font-size:clamp(28px,4vw,40px); line-height:1.1; margin:0 0 10px;
}
#beneficios .sub{
  max-width:760px; margin:0 auto;
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.6; opacity:.9;
}

#beneficios .grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1024px){
  #beneficios .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  #beneficios .grid{ grid-template-columns:1fr; }
}

#beneficios .card{
  border:1px solid var(--humo); border-radius:var(--radius);
  padding:24px; background:#fff;
  transition:.3s ease;
  transition-property:transform,box-shadow,border-color;
}
#beneficios .card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  border-color:var(--teal);
}

#beneficios .icon{
  width:54px; height:54px; display:inline-grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(27,199,197,.12), rgba(27,199,197,.04));
  margin-bottom:12px;
}
#beneficios h3{
  font:700 20px/1.2 Poppins,system-ui,sans-serif;
  margin:0 0 6px;
}
#beneficios p{
  font:16px/1.6 Inter,system-ui,sans-serif;
  margin:0;
}

/* micro-animación */
@keyframes b-fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
#beneficios .head,
#beneficios .card{
  opacity:0; animation:b-fadeUp .8s ease forwards;
}
#beneficios .head{ animation-delay:.05s }
#beneficios .card:nth-child(1){ animation-delay:.10s }
#beneficios .card:nth-child(2){ animation-delay:.18s }
#beneficios .card:nth-child(3){ animation-delay:.26s }
#beneficios .card:nth-child(4){ animation-delay:.34s }

@media (prefers-reduced-motion:reduce){
  #beneficios .head,
  #beneficios .card{ animation:none; opacity:1 }
}
/* ====== SMARTWATER · STRIP (FRANJA) ====== */
#sw-franja{
  --teal:#1BC7C5; --coral:#FF6B6B; --ink:#0E2737;
  --grad: linear-gradient(90deg, rgba(27,199,197,.10), rgba(255,107,107,.10));
  background:
    radial-gradient(1200px 200px at 50% 0%, rgba(27,199,197,.18), transparent 60%),
    var(--grad);
  padding:36px 0; position:relative; overflow:hidden;
}

/* patrón de gotitas muy suave */
#sw-franja::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle 2px at 20px 20px, rgba(27,199,197,.12) 99%, transparent 100%),
    radial-gradient(circle 2px at 60px 60px, rgba(27,199,197,.07) 99%, transparent 100%);
  background-size: 80px 80px, 80px 80px;
  opacity:.5; pointer-events:none;
  animation: sw-drift 14s linear infinite;
}
@keyframes sw-drift{ to{ transform: translateY(40px) } }

#sw-franja .wrap{
  max-width:1200px; margin:0 auto; padding:0 16px;
}
#sw-franja .row{
  display:grid; gap:22px;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
}
@media (max-width:900px){
  #sw-franja .row{
/* ====== SMARTWATER · WAVE BAND ====== */
#sw-wave{
  position:relative; background:#f7fcfc;
}
#sw-wave .wave{
  display:block; line-height:0; transform: translateY(1px);
}
#sw-wave .wave svg{
  display:block; width:100%; height:auto;
}

#sw-wave .band{
  max-width:1200px; margin:-8px auto 0;
  padding:44px 16px 60px;
  display:grid; gap:24px;
  grid-template-columns: 1fr 1fr;
  align-items:center;
}
@media (max-width:900px){
  #sw-wave .band{ grid-template-columns:1fr; }
}

#sw-wave h3{
  font:700 clamp(22px,3vw,28px)/1.1 Poppins,system-ui,sans-serif;
  color:#0E2737; margin:0 0 10px;
}
#sw-wave p{
  font:16px/1.6 Inter,system-ui,sans-serif;
  color:#103244; margin:0;
}

#sw-wave .shot{
  border-radius:18px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
#sw-wave .shot img{
  display:block; width:100%;
  transform:scale(1.03);
  transition:transform .8s ease;
}
#sw-wave .shot:hover img{
  transform:scale(1.06);
}


/* Cuando Elementor aplica el sticky (.elementor-sticky--effects) */
.sw-header.elementor-sticky--effects {
  background: linear-gradient(
    135deg,
    rgba(248, 250, 252, 0.96),
    rgba(148, 163, 184, 0.96)
  ) !important;  /* blanco + gris azulado metalizado */
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.8) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22) !important;
}

/* Ajuste si tienes la barra de admin arriba */
body.admin-bar .sw-header.elementor-sticky--effects {
  top: 32px;
}

/* Textos del menú dentro del header */
.sw-header .elementor-nav-menu a,
.sw-header .elementskit-nav-menu a,
.sw-header .elementor-item {
  color: #0f172a;
  font-weight: 500;
}

/* Hover + activo en rojo SmartWater */
.sw-header .elementor-nav-menu a:hover,
.sw-header .elementskit-nav-menu a:hover,
.sw-header .elementor-item.elementor-item-active {
  color: #FF6B6B;
}


/* === BOTÓN WHATSAPP EN EL MENÚ === */

/* WordPress pone la clase en el <li>, no en el <a> */
.sw-header li.sw-cta > a {
  padding: 10px 20px;
  border-radius: 999px;
  background: #25D366 !important;         /* verde WhatsApp */
  color: #ffffff !important;
  font-weight: 600;
  border: none;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sw-header li.sw-cta > a:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
}


/* Iconito opcional con emoji, si quieres ponerlo en el texto del menú */
.sw-header .elementor-nav-menu a.sw-cta::before,
.sw-header .elementskit-nav-menu a.sw-cta::before{
  content: "";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

/* Hover */
.sw-header .elementor-nav-menu a.sw-cta:hover,
.sw-header .elementskit-nav-menu a.sw-cta:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}
                               /* blanco + gris azulado metálico */
  backdrop-filter: blur(16px);       /* efecto cristal */
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(148,163,184,0.55);
  box-shadow: 0 16px 40px rgba(15,23,42,0.14);
}

/* Ajuste por si tienes la barra de admin de WordPress visible */
body.admin-bar .sw-header.elementor-sticky--effects{
  top: 32px;
}

/* Menú dentro de la cabecera */
.sw-header .elementor-nav-menu a,
.sw-header .elementor-item{
  color: #0f172a;
  font-weight: 500;
}

/* Hover y activo en color SmartWater */
.sw-header .elementor-nav-menu a:hover,
.sw-header .elementor-nav-menu .elementor-item.elementor-item-active{
  color: #fa1f02; /* rojo SmartWater */
}

/* Botón de menú (hamburguesa) en mobile */
.sw-header .elementor-menu-toggle{
  background: rgba(255,255,255,0.8);
  border-radius: 999px;
}
.sw-header .elementor-menu-toggle i{
  color: #0f172a;
}


/* Botón CTA WhatsApp si le pusimos la clase sw-cta en el menú */
.sw-header a.sw-cta {
  padding: 10px 20px;
  border-radius: 999px;
  background: #25D366;
  color: #ffffff !important;
  font-weight: 600;
  border: none;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sw-header a.sw-cta:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
}
/* ====== WATEEER · HEADER CRISTAL ====== */
/* Asegúrate de que el contenedor del header tiene la clase "sw-header" en Avanzado → CSS Classes */

.sw-header{
  position: sticky;
  top: 0;
  z-index: 9999;

  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.92),
    rgba(217, 232, 255, 0.90)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(157, 187, 229, 0.7);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);

  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Si tienes la barra de admin arriba */
body.admin-bar .sw-header{
  top: 32px;
}

/* Links del menú dentro del header (Nav Menu de Elementor) */
.sw-header .elementor-nav-menu a,
.sw-header .elementor-item{
  color:#0f172a;
  font-weight:500;
}

/* Hover + item activo en rojo Wateeer */
.sw-header .elementor-nav-menu a:hover,
.sw-header .elementor-nav-menu .elementor-item.elementor-item-active{
  color:#fa1f02;
}

/* Botón WhatsApp (menú item con clase "wtr-cta") */
.sw-header a.wtr-cta{
  padding:10px 20px;
  border-radius:999px;
  background:#25D366;
  color:#ffffff !important;
  font-weight:600;
  border:none;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.sw-header a.wtr-cta:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}/* End custom CSS */