.elementor-kit-6{--e-global-color-primary:#F6A30E;--e-global-color-secondary:#000000;--e-global-color-text:#7A7A7A;--e-global-color-accent:#EA8709;--e-global-color-8abf1b0:#FFFFFF;--e-global-typography-primary-font-family:"gilroy";--e-global-typography-primary-font-weight:800;--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;color:#1A1A1A;font-family:"Arial", Sans-serif;font-size:16px;font-weight:400;line-height:25px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 p{margin-block-end:0px;}.elementor-kit-6 a{color:var( --e-global-color-primary );font-family:"Arial", Sans-serif;font-weight:500;}.elementor-kit-6 h1{font-family:"gilroy", Sans-serif;font-size:52px;font-weight:800;line-height:50px;}.elementor-kit-6 h2{font-family:"gilroy", Sans-serif;font-size:36px;font-weight:600;line-height:40px;}.elementor-kit-6 h3{font-family:"gilroy", Sans-serif;font-size:22px;font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1220px;}.e-con{--container-max-width:1220px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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;--container-default-padding-top:0px;--container-default-padding-right:16px;--container-default-padding-bottom:0px;--container-default-padding-left:016px;}}
/* Start custom CSS *//* =========================================================
   CSS MAESTRO - LIGHT PREMIUM (TU MARCA)
========================================================= */

:root {
  --primary: #F6A30E;
  --accent: #EA8709;
  --black: #111111;
  --text: #7A7A7A;
  --white: #FFFFFF;

  --bg-soft: #FFF9F1;

  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 26px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-hover: 0 18px 40px rgba(0,0,0,0.12);

  --transition: all 0.3s ease;
}

/* =========================================================
   BASE
========================================================= */

body {
  background: #FFFFFF;
  color: var(--text);
}

h1, h2, h3 {
  color: var(--black);
}

/* =========================================================
   SECCIONES
========================================================= */

.section-pro {
  padding: 100px 0;
}

.section-light {
  background: var(--bg-soft);
}

/* Glow suave naranja */
.section-glow {
  position: relative;
  overflow: hidden;
}

.section-glow::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, rgba(246,163,14,0.18), transparent 70%);
  filter: blur(40px);
  animation: floatGlow 8s ease-in-out infinite alternate;
}

@keyframes floatGlow {
  0% { transform: translate(0,0); }
  100% { transform: translate(40px,40px); }
}

/* =========================================================
   TITULOS
========================================================= */

.title-pro h1,
.title-pro h2,
.title-pro h3 {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* GRADIENTE EN TITULOS (TUS COLORES) */
.gradient-title h1,
.gradient-title h2 {
  background: linear-gradient(90deg, #111111, #F6A30E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   TARJETAS (GLASS SUAVE)
========================================================= */

.glass-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* TARJETA DESTACADA CON BORDE */
.highlight-card {
  border: 1px solid rgba(246,163,14,0.4);
  box-shadow: 0 0 25px rgba(246,163,14,0.15);
}

/* =========================================================
   BORDE ANIMADO SUAVE (NO EXAGERADO)
========================================================= */

.animated-border {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.animated-border::before {
  content: "";
  position: absolute;
  inset: -200%;
  background: conic-gradient(
    transparent,
    rgba(246,163,14,0.6),
    transparent 30%
  );
  animation: rotateBorder 6s linear infinite;
}

.animated-border::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #ffffff;
  border-radius: inherit;
}

@keyframes rotateBorder {
  100% { transform: rotate(360deg); }
}

/* =========================================================
   BOTONES
========================================================= */

.btn-premium .elementor-button {
  background: linear-gradient(135deg, #F6A30E, #EA8709);
  color: #fff;
  border-radius: 14px;
  padding: 16px 28px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(246,163,14,0.25);
  transition: var(--transition);
}

.btn-premium .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(246,163,14,0.35);
}

/* BOTON SECUNDARIO */
.btn-outline .elementor-button {
  background: transparent;
  border: 1px solid rgba(246,163,14,0.4);
  color: var(--black);
}

.btn-outline .elementor-button:hover {
  background: rgba(246,163,14,0.08);
}

/* =========================================================
   IMAGENES
========================================================= */

.image-premium {
  overflow: hidden;
  border-radius: 24px;
}

.image-premium img {
  transition: transform 0.6s ease;
}

.image-premium:hover img {
  transform: scale(1.05);
}

/* =========================================================
   HOVER GENERAL
========================================================= */

.hover-lift {
  transition: var(--transition);
}

.hover-lift:hover {
  transform: translateY(-6px);
}

/* =========================================================
   TITULOS DOBLE COLOR - TU MARCA
========================================================= */

/* Gradiente principal (negro → naranja) */
.gradient-title h1,
.gradient-title h2,
.gradient-title h3 {
  background: linear-gradient(90deg, #111111 0%, #F6A30E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Variante más cálida (negro → naranja más intenso) */
.gradient-title-warm h1,
.gradient-title-warm h2,
.gradient-title-warm h3 {
  background: linear-gradient(90deg, #111111 0%, #EA8709 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Variante suave (gris → naranja) */
.gradient-title-soft h1,
.gradient-title-soft h2,
.gradient-title-soft h3 {
  background: linear-gradient(90deg, #7A7A7A 0%, #F6A30E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   EYEBROW PREMIUM GRADIENT + ICON
========================================================= */

.eyebrow-gradient {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 7px 16px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: #111;

  border-radius: 999px;

  background: linear-gradient(
    135deg,
    rgba(246,163,14,0.25),
    rgba(246,163,14,0.08)
  );

  border: 1px solid rgba(246,163,14,0.35);

  box-shadow:
    0 6px 18px rgba(246,163,14,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: all 0.3s ease;

  width: fit-content;
}

/* ICONO */
.eyebrow-gradient i {
  color: #F6A30E;
  font-size: 12px;
}

/* HOVER */
.eyebrow-gradient:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 24px rgba(246,163,14,0.25),
    inset 0 1px 0 rgba(255,255,255,0.8);
}


/* =========================================================
   HERO BACKGROUND FULL WIDTH (AMPLIO Y PRO)
========================================================= */

.hero-premium-bg {
  position: relative;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fff8ee 100%
  );
  overflow: hidden;
}

/* GLOW IZQUIERDA (MUCHO MÁS GRANDE) */
.hero-premium-bg::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  top: -300px;
  left: -300px;

  background: radial-gradient(
    circle,
    rgba(246,163,14,0.28),
    transparent 70%
  );

  filter: blur(90px);
  animation: glowMove1 12s ease-in-out infinite alternate;
}

/* GLOW DERECHA (TAMBIÉN GRANDE) */
.hero-premium-bg::after {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  bottom: -250px;
  right: -250px;

  background: radial-gradient(
    circle,
    rgba(246,163,14,0.22),
    transparent 70%
  );

  filter: blur(90px);
  animation: glowMove2 14s ease-in-out infinite alternate;
}

/* ANIMACIÓN MÁS LENTA = MÁS PREMIUM */
@keyframes glowMove1 {
  0% { transform: translate(0,0); }
  100% { transform: translate(80px, 80px); }
}

@keyframes glowMove2 {
  0% { transform: translate(0,0); }
  100% { transform: translate(-60px, -60px); }
}

/* =========================================================
   STATS PREMIUM (HERO)
========================================================= */

.stats-row {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* cada bloque */
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* número */
.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  line-height: 1;
}

/* gradiente opcional en número */
.stat-number.gradient {
  background: linear-gradient(90deg, #111111, #F6A30E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* texto */
.stat-label {
  font-size: 13px;
  color: #7A7A7A;
  letter-spacing: 0.05em;
}


/* =========================================================
   SERVICES SECTION PRO (CONTROL TOTAL DESDE 1 CLASE)
========================================================= */

.services-section-pro {
  padding: 100px 0;
}

/* HEADER */
.services-section-pro h2 {
  font-size: 40px;
  line-height: 1.2;
  color: #111;
  margin-bottom: 16px;
}

.services-section-pro > div > p {
  max-width: 680px;
  color: #7A7A7A;
  font-size: 16px;
  line-height: 1.6;
}

/* GRID */
.services-section-pro .elementor-container,
.services-section-pro .e-con-inner {
  gap: 24px;
}

/* CARDS */
.services-section-pro .elementor-column,
.services-section-pro .e-con {
  background: rgba(255,255,255,0.95);
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

/* HOVER */
.services-section-pro .elementor-column:hover,
.services-section-pro .e-con:hover {
  transform: translateY(-6px);
  border-color: rgba(246,163,14,0.2);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

/* ICONOS */
.services-section-pro .elementor-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(246,163,14,0.18),
    rgba(234,135,9,0.10)
  );
  margin-bottom: 18px;
}

.services-section-pro .elementor-icon i {
  color: #EA8709;
  font-size: 22px;
}

/* TITULOS CARDS */
.services-section-pro h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #111;
}

/* TEXTO */
.services-section-pro p {
  color: #7A7A7A;
  font-size: 15px;
  line-height: 1.65;
}

/* LINK */
.services-section-pro a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 14px;
  color: #111;
  text-decoration: none;
  transition: all 0.25s ease;
}

.services-section-pro a::after {
  content: "→";
  transition: transform 0.25s ease;
}

.services-section-pro a:hover {
  color: #EA8709;
}

.services-section-pro a:hover::after {
  transform: translateX(4px);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .services-section-pro {
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .services-section-pro {
    padding: 60px 0;
  }
}


.title-double-line .elementor-heading-title,
.title-double-line h1,
.title-double-line h2,
.title-double-line h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.title-double-line .elementor-heading-title::before,
.title-double-line h1::before,
.title-double-line h2::before,
.title-double-line h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  height: 2px;
  border-radius: 999px;
  background: #111111;
}

.title-double-line .elementor-heading-title::after,
.title-double-line h1::after,
.title-double-line h2::after,
.title-double-line h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F6A30E, #EA8709);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'gilroy';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://cfcleaningserviceinc.com/wp-content/uploads/Gilroy-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */