#heroHome, #hero, #footerMain, .bg-gradient-custom, .elementor-form:not([name="FormLeadPaso1"]) input, .elementor-form:not([name="FormLeadPaso1"]) textarea {
	background-image: linear-gradient(
    320deg,
    hsl(173deg 47% 93%) 0%,
    hsl(173deg 48% 93%) 6%,
    hsl(173deg 49% 93%) 12%,
    hsl(173deg 51% 93%) 18%,
    hsl(168deg 56% 94%) 25%,
    hsl(149deg 67% 95%) 32%,
    hsl(116deg 79% 97%) 40%,
    hsl(80deg 96% 96%) 49%,
    hsl(69deg 100% 96%) 58%,
    hsl(68deg 100% 96%) 69%,
    hsl(67deg 100% 96%) 82%,
    hsl(67deg 100% 96%) 100%
  );
}    
form#formDisenoWebHero.elementor-form select, .formDisenoWebHero form.elementor-form select {
	background-image: linear-gradient(
    320deg,
    hsl(173deg 47% 93%) 0%,
    hsl(173deg 48% 93%) 6%,
    hsl(173deg 49% 93%) 12%,
    hsl(173deg 51% 93%) 18%,
    hsl(168deg 56% 94%) 25%,
    hsl(149deg 67% 95%) 32%,
    hsl(116deg 79% 97%) 40%,
    hsl(80deg 96% 96%) 49%,
    hsl(69deg 100% 96%) 58%,
    hsl(68deg 100% 96%) 69%,
    hsl(67deg 100% 96%) 82%,
    hsl(67deg 100% 96%) 100%
  );
}




/* ===================================================
   HERO GLOBAL 2026
   Usado en: Home, disenadores web...
=================================================== */
@keyframes scrollUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes scrollDown {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

.scroll-up {
  animation: scrollUp 20s linear infinite;
}

.scroll-down {
  animation: scrollDown 22s linear infinite;
}

/* Optimización */
.scroll-up,
.scroll-down {
  will-change: transform;
}


.cards-viewport{
  height: 520px;          /* ajusta: 480–620 suele ir bien */
  overflow: hidden;
  position: relative;
}

.scroll-up, .scroll-down{
  will-change: transform;
  transform: translateZ(0);
}


/* Mantener animación en móvil, pero más suave */
@media (max-width: 1024px) {
  .cards-viewport{
    height: 480px;        /* ajusta: 320–420 */
  }

  .scroll-up { animation-duration: 26s; }
  .scroll-down { animation-duration: 28s; }

  .cards-viewport .elementor-widget-image img{
    height: 140px;        /* tarjetas más bajitas en móvil */
  }
}

/* Opcional: aún más compacto en móviles pequeños */
@media (max-width: 480px) {
  .cards-viewport{
    height: 320px;
  }

  .cards-viewport .elementor-widget-image img{
    height: 120px;
  }
}

/* Respeta accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .scroll-up,
  .scroll-down{
    animation: none !important;
    transform: none !important;
  }
}

/* subratllat text */
.underline .highlight, .underlineClose .highlight {
    position: relative;
    display: inline-block;
}

.underline .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -15px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(46, 95, 198, .35), rgba(88, 181, 224, .25));
    transform: skewX(-10deg);
    z-index: -1;
}

.underlineClose .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(46, 95, 198, .35), rgba(88, 181, 224, .25));
    transform: skewX(-10deg);
    z-index: -1;
}

.hero-agency-final {
	--bg1:#070a12;
	--bg2:#0b1221;
	--primary:#2e5fc6;
	--accent:#58b5e0;
	--hot:#ff3b6b;
	--text:#eef2ff;
	--muted:rgba(238,242,255,.78);
	--stroke:rgba(255,255,255,.14);

	font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--text);
	background:
	radial-gradient(900px 520px at 12% 15%, rgba(46,95,198,.35), transparent 60%),
	radial-gradient(900px 520px at 85% 20%, rgba(88,181,224,.30), transparent 60%),
	radial-gradient(700px 520px at 70% 90%, rgba(255,59,107,.18), transparent 60%),
	linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
	position:relative;
	overflow:hidden;
	padding: 96px 20px 76px;
}
    
/* grid sutil */
.hero-agency-final::after{
	content:"";
	position:absolute;
	inset:0;
	background:
	linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
	linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 35% 30%, rgba(0,0,0,.9), transparent 65%);
	pointer-events:none;
	opacity:.45;
}


/* ===================================================
   LOGOS EMPRESAS
   Usado en: Home, disenadores web...
=================================================== */
.kd-logos-final {
    background: rgb(245 248 251);
        padding: 20px 20px;
        border-radius: 22px;
        border: 1px solid rgba(2,6,23,.10);
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        background: linear-gradient(
        120deg,
        rgba(46,95,198,.12),
        rgba(88,181,224,.10),
        rgba(255,255,255,0)
      );
}

.kd-logos-final figure img {
	border-radius: 22px;
	border: 1px solid rgba(2,6,23,.10);
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.043);

	padding:10px 0px
}
.kd-logos-final figure img {
	filter: grayscale(1);
}
.kd-logos-final figure img:hover {
	filter: grayscale(0);
}


/* ===================================================
   LISTA ICONOS ROUND
   Usado en: Home, disenadores web...
=================================================== */
.listaIconosRound .elementor-icon-list-icon {
    padding:3px;
    border-radius:8px;
    border:1px solid #bcdfd7;
    background-color: aliceblue;
}
.listaIconosRound .elementor-icon-list-icon svg {
    margin-right:0px;
}

/* blue */
.listaIconosRound_blue .elementor-icon-list-icon {
    padding:3px;
    border-radius:8px;
    border:1px solid #707171;
    background-color: rgba(240, 248, 255, 0.033);
}
.listaIconosRound_blue .elementor-icon-list-icon svg {
    margin-right:0px;
}
/* red / bad */
.listaIconosRound_bad .elementor-icon-list-icon {
    padding:3px;
    border-radius:8px;
    border:1px solid #707171;
    background-color: rgba(240, 248, 255, 0.033);
}
.listaIconosRound_bad .elementor-icon-list-icon svg {
    margin-right:0px;
}
/* green / good */
.listaIconosRound_good .elementor-icon-list-icon {
    padding:3px;
    border-radius:8px;
    border:1px solid #707171;
    background-color: rgba(240, 248, 255, 0.033);
}
.listaIconosRound_good .elementor-icon-list-icon svg {
    margin-right:0px;
}
.listaIconosRound_good .elementor-icon-list-icon svg {
    margin-right:0px;
}

/* ===================================================
   TEXTO CORTADO CON LEER MAS
   Usado en: Home, disenadores web...
=================================================== */
/* Corta a 3 líneas SOLO el contenido del widget */
.texto-cortado .elementor-widget-container{
  display: -webkit-box;
  -webkit-line-clamp: 3; /* cambia a 2 si quieres */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Al expandir, mostramos todo */
.texto-cortado.expandido .elementor-widget-container{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Estilo del link */
.leer-mas{
  display:inline-block;
  margin-top:8px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
}

.clusterServicios2026 .elementor-icon-box-icon {
    padding:10px;
    border-radius:12px;
    border:1px solid #bcdfd7;
    background-color: aliceblue;
}

.cajaIconoRoundDark .elementor-icon-box-icon {
  padding:10px;
  border-radius:12px;
  border:1px solid #eef1f152;
  background-color: rgba(240, 248, 255, 0.048);
}




/* ===================================================
   GRAFICAS SCOREBOARD
   Usado en: Home, disenadores web...
=================================================== */
.kd-scoreboard {
	--bg0:#070a12;
	--bg1:#0b1224;
	--text:#eef2ff;
	--muted: rgba(238,242,255,.72);
	--stroke: rgba(238,242,255,.10);
	--primary:#2e5fc6;
	--accent:#58b5e0;
	--hot:#ff3b6b;
}
.kd-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent), var(--primary));
  background: linear-gradient(90deg, #58b5e0, #2e5fc6);
	box-shadow: 0 0 0 6px rgba(88, 181, 224, .18);
	display: inline-block;
	margin-right: 10px;
}

/* red / bad */
.kd-dot-bad {
  width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #A00505;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .06);
	display: inline-block;
	margin-right: 10px;
}
/* green / good */
.kd-dot-good {
  width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .06);
	display: inline-block;
	margin-right: 10px;
}




/* Progreso */
.kd-progress{
	position:relative;
	padding: 0 16px 18px;
}
.kd-bar{
	height: 10px;
	border-radius: 999px;
	background: rgba(0,0,0,.08);
	border: 1px solid rgba(0,0,0,.10);
	overflow:hidden;
}
.kd-fill{
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	box-shadow: 0 0 26px rgba(88,181,224,.18);
	transition: width 1.3s ease;
}

/* Mini-chart */
.kd-spark{
	position:relative;
	padding: 0 16px 16px;
}
.kd-spark svg{ width:100%; height: 54px; display:block; opacity:.95; }
.kd-spark .line{ fill:none; stroke: rgba(88,181,224,.95); stroke-width: 2.6; }
.kd-spark .glow{ filter: drop-shadow(0 0 10px rgba(88,181,224,.22)); }
.kd-spark .base { stroke: rgba(0,0,0,.16); stroke-width: 1.4; }



/* ===================================================
   Diseño web provincia Tarragona
=================================================== */
/* lista municipios grid */
.listaMunicipiosGrid ul li:nth-child(odd) span.elementor-icon-list-text {
    font-weight:900!important;
}
.listaMunicipiosGrid ul li:nth-child(odd):hover span.elementor-icon-list-text {
    color:var(--e-global-color-secondary);
}

/* precio web hero */
@media (max-width:1520px) and (min-width:1276px) {
	.precioWebHero {
		/*margin-top: 54px;*/
	}
	
	
}
@media (max-width:1520px) and (min-width:1025px) {
	
	.precioWebHero > div.elementor-widget-container {
			margin: 0px 0px 0px 20px!important;
	}
}


/* LANDINGS FORM SECTION */

/* ─── VARIABLES ─── */
:root {
  --teal: #52BAAC;
  --blue: #14688B;
  --dark: #0B1929;
  --darker: #070F1A;
  --card: #0F2035;
  --card2: #112340;
  --white: #F0F6FF;
  --gray: #8BA5BE;
  --border: rgba(82,186,172,0.15);
  --gold: #F5C842;
}
/* ─── FORM ─── */
.form-section { background: var(--dark); }
.form-wrap {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.35fr;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.form-left {
  background: linear-gradient(160deg, var(--blue) 0%, #0a3550 100%);
  padding: 2.8rem 2.2rem;
  display: flex; flex-direction: column; gap: 2.2rem;
}
.form-left h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.form-left p { font-size: .88rem; color: rgba(240,246,255,.68); line-height: 1.72; font-weight: 300; margin-top: .65rem; }
.form-contacts { list-style: none; display: flex; flex-direction: column; gap: .7rem; padding-top: 1.8rem; border-top: 1px solid rgba(82,186,172,.2); }
.form-contacts li { font-size: .82rem; color: rgba(240,246,255,.8); display: flex; align-items: center; gap: .55rem; }
.form-contacts li .ic { color: var(--teal); }
.form-right { background: #fff; padding: 2.6rem 2rem; }
.f-step { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8BA5BE; margin-bottom: 1.5rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
.f-group { display: flex; flex-direction: column; gap: .32rem; margin-bottom: .9rem; }
.f-label { font-size: .76rem; font-weight: 700; color: #1a2e42; font-family: 'Manrope', sans-serif; }
.f-label .req { color: var(--blue); }
.f-input {
  padding: .7rem .9rem; border: 1.5px solid #dde8f0; border-radius: 5px;
  font-family: 'Manrope', sans-serif; font-size: .87rem; color: #1a2e42;
  background: #f6fbff; transition: border-color .2s, box-shadow .2s; outline: none;
}
.f-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,104,139,.09); background: #fff; }
.f-input::placeholder { color: #afc4d4; }
.f-check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.1rem; }
.f-check input { margin-top: 3px; accent-color: var(--blue); flex-shrink: 0; }
.f-check label { font-size: .74rem; color: #7a9ab4; line-height: 1.52; font-family: 'Manrope', sans-serif; }
.f-check a { color: var(--blue); }
.f-submit {
  width: 100%; background: #FF6B35;
  color: #fff; border: none; padding: .93rem; border-radius: 5px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .93rem;
  cursor: pointer; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(20,104,139,.28); margin-bottom: .7rem;
}
.f-submit:hover { transform: translateY(-2px); box-shadow: 0 7px 26px rgba(255,107,53,.4); }
.f-security { text-align: center; font-size: .68rem; color: #8BA5BE; margin-bottom: .28rem; }
.f-micro { text-align: center; font-size: .65rem; color: #afc4d4; }


/* ─── SHARED SECTION STYLES ─── */
.s-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--teal); font-weight: 700; margin-bottom: .65rem; }
.s-title { font-size: clamp(1.6rem, 2.6vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .75rem; color: var(--white);}
.s-title em { font-style: normal; color: var(--teal); }
.s-sub { color: var(--gray); font-weight: 300; max-width: 540px; margin-bottom: 2.8rem; font-size: .96rem; line-height: 1.75; }
.s-sub strong { color: var(--white); font-weight: 700; }

/* ─── BUTTONS reused ─── */
.btn-outline {
  display: inline-block; padding: .62rem 1.35rem;
  border: 1px solid rgba(82,186,172,.3); border-radius: 4px;
  color: var(--teal); font-size: .9rem; font-weight: 700; text-decoration: none;
  transition: background .2s;
}
.btn-outline:hover { background: rgba(82,186,172,.08); }

/* ─── INCLUDES ─── */
.includes-section { background: var(--darker); display: flex; flex-direction: column; align-items: center; }
.includes-section .s-tag,
.includes-section .s-title,
.includes-section .s-sub { max-width: 820px; width: 100%; text-align: center; }
.includes-section .s-sub { margin-bottom: 2.5rem; }


.price-big .iva { font-size: .9rem; color: var(--gray); font-weight: 300; vertical-align: baseline; letter-spacing:normal!important; }
.price-big small {  font-size: 1.2rem;  letter-spacing: -.02em; }