/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');

/* =====================================================
   🎨 SLIDER CUARZO – Banner Hero (Versión Final)
   ===================================================== */

/* Fuente general */
.cuarzo-slider,
.cuarzo-slider .slide-title,
.cuarzo-slider .slide-subtitle {
  font-family: 'Montserrat', sans-serif !important;
}

/* 🔹 Cada slide (fondo full width) */
.cuarzo-slider .slide-item {
  position: relative;
  height: 500px;                 /* altura desktop */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  width: 100%;
  overflow: hidden;
}

/* 🔹 Contenedor interno centrado */
.slide-inner {
width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 80px;  /* ⬅️ más espacio lateral */
  display: flex;
  align-items: center;
}

/* 🔹 Contenido del slide */
.slide-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

/* Título principal */
.slide-title {
  font-size: 45px;
  font-weight: 800 !important;   /* ✅ ExtraBold */
  margin-top: 20px;
  line-height: 1.1;
	width:100%;
}

/* Primer slide */
.primero {
width:370px;
}

/* Segundo slide */
.segundo {
width:450px;
}

/* Tercer slide */
.tercero {
width:450px;
}
	 .etapas {
width:370px;
}
	 .etapas span {

	color:#54c439;
}


	 .contacto span {
	display:flex;

}

.contacto .ubicacion-icon {
  width: 50px;        /* ancho del ícono */
  height: auto;       /* mantiene proporción */
  margin-left: 6px;   /* espacio a la izquierda del texto */
  margin-top: -32px; /* ajusta la bajada para alinearlo mejor */

}

/* Subtítulo + logo alineados */
.slide-subtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700 !important;   /* ✅ Bold */
  margin: 0;
}

.respaldo-text {
  white-space: nowrap;
}

.respaldo-logo {
  max-height: 70px;
  width: auto;
}

/* =====================================================
   ⬅️➡️ Flechas – solo fondo en hover
   ===================================================== */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;     /* ✅ tamaño desktop */
  height: 50px;
  background: none; /* ❌ sin fondo por defecto */
  border: none;
  z-index: 30;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50%; /* círculo en hover */
  transition: background 0.3s ease;
}

.slick-prev:hover,
.slick-next:hover {
  background: rgba(0,0,0,0.5); /* ✅ círculo negro translúcido SOLO en hover */
}

.slick-prev:before,
.slick-next:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.slick-prev { left: 20px; }
.slick-prev:before { transform: rotate(-135deg); }

.slick-next { right: 20px; }
.slick-next:before { transform: rotate(45deg); }

/* =====================================================
   🔵 Puntos de navegación
   ===================================================== */
.slick-dots li button:before {
  font-size: 12px;
  color: #ccc;
  opacity: 1;
}

.slick-dots li.slick-active button:before {
  color: #fff;
}


/* Contenedor de los dots */
.cuarzo-slider .slick-dots {
  position: absolute;    /* lo fijamos dentro del slider */
  bottom: 20px;          /* distancia desde abajo */
  left: 50%;             /* centrado */
  transform: translateX(-50%); 
  z-index: 10;           /* asegurar que queden encima de las imágenes */
}

/* Cada dot */
.cuarzo-slider .slick-dots li button:before {
  font-size: 12px;       /* tamaño del punto */

  color: transparent;           /* color (puedes cambiarlo a morado o verde) */
  opacity: 0.8;
	border:1px solid #fff;
	border-radius:50%;
	width:12px;
	height:12px;


}

/* Dot activo */
.cuarzo-slider .slick-dots li.slick-active button:before {
  color: #fff;       
  opacity: 1;
		border:0px solid #fff;
	border-radius:50%;
	margin-top:-3px;
		width:12px;
	height:12px;

}

	.cuarzo-slider .slick-dots {
    display: none !important;
  }
  .cuarzo-slider .slick-arrow {
    display: block !important;
  }


/* =====================================================
   📱 Responsive
   ===================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .cuarzo-slider .slide-item {
    height: 50vh;
  }

  .slide-title {
    font-size: 48px;
    line-height: 1.15;
    font-weight: 800 !important;
  }

  .slide-subtitle {
    font-size: 16px;
    font-weight: 700 !important;
  }

  .slick-prev,
  .slick-next {
    width: 50px;   /* ✅ mismo tamaño en tablet */
    height: 50px;
  }
	.respaldo-logo {
    max-height: 70px;
  }
	
	
	.cuarzo-slider .slick-dots {
    display: none !important;
  }
  .cuarzo-slider .slick-arrow {
    display: block !important;
  }

	

	
}

/* Mobile */
@media (max-width: 768px) {
  .cuarzo-slider .slide-item {
    height: 350px;

  }
	
	
	  .cuarzo-slider .slide-item .slide-inner{
		  display:flex;
		  		justify-content:center;
		align-items:center;

  }

	.slide-content{
		width:100%;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		
	}
	
	
  .slide-title {
	  margin-top:50px;
    font-size:30px;
    line-height: 1.2;
    font-weight: 800 !important;
	  text-align:center;
	   font-size:28px;
	  
  }
	/* Primer slide */
 .primero {

	padding:0 0px;
	width:90%;
	

}

/* Segundo slide */
.segundo {

	padding:0 0px;
	width:90%;
}

/* Tercer slide */
.tercero {
	padding:0 0px;
	width:90%;
}

  .slide-subtitle {
    font-size: 14px;
    gap: 6px;
    font-weight: 800 !important;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	 

  }
	
	
	
	.contacto{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
	}
	 .contacto span {
	display:flex;

}

.contacto .ubicacion-icon {
  width: 40px;        /* ancho del ícono */
  height: auto;       /* mantiene proporción */
  margin-left: 6px;   /* espacio a la izquierda del texto */
  margin-top: -30px; /* ajusta la bajada para alinearlo mejor */

}


  .respaldo-logo {
    max-height: 50px;
  }

	.slide-inner {

  padding: 0 20px; 
}
	
	
  /* Flechas más grandes y abajo */
  .slick-prev,
  .slick-next {
    top: auto;
    bottom: 15px;
    transform: none;
    width: 60px;   /* ✅ más grandes en móvil */
    height: 60px;
  }

  .slick-prev { left: 30%; }
  .slick-next { right: 30%; }
	
	
	
	.cuarzo-slider .slick-dots {
    display: block !important;
  }
  .cuarzo-slider .slick-arrow {
    display: none !important;
  }
}
















/* =====================================================
   📌 Formulario Contact Form Flotante – Versión Final Ajustada
   ===================================================== */

/* Contenedor principal */
.form-cuarzo {
  background: #54c439; /* verde */
  border-radius: 40px;
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  padding: 0;
  overflow: hidden;
}

.form-cuarzo .form-body p{
margin:0;
	padding:20px 0;
}

.form-cuarzo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
	margin-bottom:0;
}


.form-cuarzo input[type="text"],
.form-cuarzo input[type="tel"],
.form-cuarzo input[type="email"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  padding: 6px 4px;
  font-size: 14px;

  border-radius: 0;       /* 👈 elimina curvatura */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* estándar */
}

/* Encabezado */
.form-header {
  padding: 15px 0px 10px; /* menos separación */
}

.form-cuarzo .form-title {
  font-size: 18px;
  font-weight: 700;
padding:0 20px;
  line-height: 1.3;
  color: #000; /* negro */
}

/* Línea separadora ocupa todo el ancho */
.form-cuarzo .form-divider {
  width: 100%;
  height: 3px;
  background: #fff;
  margin-top: 8px;
}

/* Cuerpo del formulario */
.form-body {
  padding: 15px 20px;
}

/* Labels */
.form-cuarzo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 0px 0 3px; /* menos espacio arriba y abajo */
  color: #fff;
}

/* Inputs */
.form-cuarzo input[type="text"],
.form-cuarzo input[type="tel"],
.form-cuarzo input[type="email"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  padding: 0px 4px; /* menos padding */
  font-size: 14px;
}

.form-cuarzo input::placeholder {
  color: #000; /* negro */
  font-size: 13px;
  opacity: 0.9;
}

/* Aceptación */
.form-cuarzo .acceptance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 30px 0px; /* menos margen */
  color: #fff;
  line-height: 1.3;
}

/* Checkbox circular */
.form-cuarzo .acceptance input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  position: relative;

}

.form-cuarzo .acceptance input[type="checkbox"]:checked {
  background: #4b007d;
  border-color: #4b007d;
	
}

.form-cuarzo .acceptance input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
	
}

.form-cuarzo .acceptance p{

	display:flex;
}

/* Enlace */
.form-cuarzo .acceptance a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;

}

/* Botón */
.form-cuarzo .submit-btn {
  background: #4b007d; /* morado */
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 50px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: block;
  margin: -20px auto  0;
  transition: background 0.3s ease;
}

.form-cuarzo .submit-btn:hover {
  background: #350058;
}

.form-cuarzo br {
  display: none;
}


/* =====================================================
   📌 FORMULARIO FLOTANTE – SOLO EN ESCRITORIO
   ===================================================== */

/* 🔹 Por defecto: fijo en escritorio */
.formulario {
width:100% !important;

}

/* 📲 En tablets y móviles → vuelve a posición normal */
@media (max-width: 1024px) {
  .formulario {
    position: static;   /* vuelve al flujo normal */
    width: 100%;        /* ocupa todo el ancho del contenedor */
    margin: 20px auto;  /* centrado */
    max-width: 400px;   /* limita el ancho */
  }
}



















/* =====================================================
   🎨 HEADER PRINCIPAL con altura definida
   ===================================================== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;         
  background: transparent;       /* transparente al inicio */
  transition: all 0.3s ease;
  z-index: 9999;
  display: flex;
  align-items: center;


}

/* 🔹 Contenedor interno */
.main-header .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  height: 100%;
}

/* Estado scrolled → más compacto */
.main-header.scrolled {
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.main-header.scrolled .header-inner {
  padding: 10px 40px;
}

/* =====================================================
   🖼️ Logo
   ===================================================== */
.logo .logo-default {
  display: block;
  height: 100px;
  transition: all 0.3s ease;
}
.logo .logo-scrolled {
  display: none;
  height: 35px;
  transition: all 0.3s ease;
}
/* Al hacer scroll → cambia logo */
.main-header.scrolled .logo .logo-default {
  display: none;
}
.main-header.scrolled .logo .logo-scrolled {
  display: block;
}

/* =====================================================
   📋 Menú de escritorio
   ===================================================== */
.nav-desktop ul {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop ul li a {
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;                   /* blanco al inicio */
  transition: color 0.3s ease;
}
.main-header.scrolled .nav-desktop ul li a {
  color: #4b007d;                /* morado en scroll */
}

/* =====================================================
   🟢 Botón CTA "Cotiza aquí"
   ===================================================== */
.cta {
  background: #54c439;
  color: #000 !important;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.cta:hover {
  background: #2e7d1f;
}

/* =====================================================
   📱 Texto "MENU" en móviles
   ===================================================== */
.menu-toggle {
  display: none; /* oculto en escritorio */
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;   /* borde alrededor */
  padding: 10px 10px;
  border-radius: 30px;
  transition: all 0.3s ease;
	z-index:99999;
}
.main-header.scrolled .menu-toggle {
  color: #4b007d;
  border-color: #4b007d;   /* cambia borde en scroll */
}

/* =====================================================
   📱 Menú Fullscreen (Móvil)
   ===================================================== */
.nav-menu-full {
  position: fixed;  /* se queda fijo en toda la pantalla */
  top: 0;
  left: -100%;      /* fuera de pantalla inicialmente */
  width: 100%;
  height: 100vh;
  background: #fff; /* fondo blanco */
  z-index: 99998;   /* justo debajo del botón MENU */
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.nav-menu-full.active {
  left: 0;
  z-index: 99998; /* asegúrate de que sigue por encima del slider */
}

/* ❌ Botón cerrar */
.nav-menu-full .close-menu {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #4b007d; /* morado */
  cursor: pointer;
  z-index: 10001;
}

/* Logo dentro del menú */
.nav-menu-full .menu-logo img {
height: 130px;         /*  mantiene la altura fija */
  max-height: 160px;     /*  no se pasa de este límite */
  margin: 10px auto 30px;   /*  centrado con buen espacio abajo */
  display: block; 
}

/* Links del menú */
.nav-menu-full ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  margin-top:40px;
}
.nav-menu-full ul li {
  position: relative;
  padding: 6px 0;       /* menos espacio */
}

.nav-menu-full ul li.preguntas {
  margin-bottom:30px;
}

.nav-menu-full ul li a {
  color: #4b007d;
  font-size: 20px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
/* Líneas divisorias */
.nav-menu-full ul li:not(:last-child):not(.no-divider) {
  border-bottom: 1px solid #b48ac7;
  margin-bottom: 6px;
}
/* Quitar línea en ítems especiales */
.nav-menu-full ul li.no-divider {
  border-bottom: none;
}

/* Botón Cotiza aquí dentro del menú */
.nav-menu-full .cta {
  margin: 15px auto;
  padding: 8px 18px;
  font-size: 16px;
	font-weight:800;
}

/* Contacto */
.menu-contacto {
  margin-top: 30px;
  text-align: center;
  color: #54c439;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
}

.menu-contacto p {
  margin: 2px 0;  /* antes tenían ~10-16px */
  line-height: 1.2; /* menos altura entre líneas */
	font-weight:800;
}

.menu-contacto .telefono a{
  font-size: 20px;
  font-weight: 700;
  margin-top: 0px;
	color:#46006a;
}

/* Redes sociales */
.menu-redes {
  margin-top: 15px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.menu-redes a img {
  width: 40px;
  height: 40px;
}

/* =====================================================
   🎨 Responsive
   ===================================================== */
/* 📱 Móviles (≤767px) */
@media (max-width: 767px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: block; }
	.logo .logo-default {
  display: block;
  height: 90px;
  transition: all 0.3s ease;
}
}

/* 📲 Tablets (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-header .header-inner { padding: 15px 30px; }
  .logo .logo-default { height: 50px; }
  .logo .logo-scrolled { height: 35px; }
  .nav-desktop ul { gap: 15px; }
}

/* =====================================================
   📲 Ajustes extra para móviles pequeños
   ===================================================== */
@media (max-height: 700px) {
  .nav-menu-full { padding-top: 20px; }
  .nav-menu-full .menu-logo img { max-width: 100px; margin-bottom: 10px; }
  .nav-menu-full ul li a { font-size: 14px; }
  .nav-menu-full ul li { padding: 4px 0; }
  .nav-menu-full .cta { margin: 10px auto; padding: 6px 16px; }
  .nav-menu-full .menu-redes { margin-top: 8px; gap: 10px; }
}










/* ================================
   🎨 Acordeón FAQ – Estilos base
   ================================ */



/* ❌ Quitar líneas divisorias en el acordeón FAQ */
.faq .e-n-accordion-item-title {
  border: none !important;   /* elimina la línea */
  box-shadow: none !important; /* elimina cualquier sombra */
}

/* Opcional: también quitar margen extra */
.faq .e-n-accordion-item {
  border: none !important;
}

/* Quitar borde del contenido del acordeón */
.faq .e-n-accordion-item .e-con {
  border: none !important;
  box-shadow: none !important; /* por si Elementor aplica sombra */
}














/* =====================================================
   📌 FORMULARIO 2 (Contact Form 7) – FULL WIDTH
   ===================================================== */

/* 🎯 CONTENEDOR PRINCIPAL */
.form-cuarzo2 {
  background: #fff;      
  border-radius: 40px;       /* bordes redondeados */
  width: 100%;               /* ocupa todo el ancho disponible */
  max-width: 100%;           /* elimina límite de ancho */
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  padding: 0;
  overflow: hidden;
}

/* 🎯 PÁRRAFOS DENTRO DEL FORMULARIO */
.form-cuarzo2 .form-body p {
  margin: 0;
  padding: 20px 0;
}

/* 🎯 LABELS */
.form-cuarzo2 label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0;
  color: #46006a;
}

/* =====================================================
   ✏️ INPUTS (Texto, Teléfono, Email)
   ===================================================== */
.form-cuarzo2 input[type="text"],
.form-cuarzo2 input[type="tel"],
.form-cuarzo2 input[type="email"] {
  width: 100%;               /* ancho completo */
  background: transparent;   /* sin fondo */
  border: none;
  border-bottom: 1px solid #46006a; /* línea inferior blanca */
  color: #46006a;               /* texto blanco */
  padding: 6px 4px;
  font-size: 14px;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Placeholder → texto dentro del input */
.form-cuarzo2 input::placeholder {
  color: #000;       /* negro */
  font-size: 13px;
  opacity: 0.9;
}

/* =====================================================
   🟢 ENCABEZADO DEL FORMULARIO
   ===================================================== */
.form-cuarzo2 .form-header {
  padding: 15px 0px 10px;
}

.form-cuarzo2 .form-title {
  font-size: 18px;
  font-weight: 700;
  padding: 0 20px;
  line-height: 1.3;
  color: #000;       /* texto negro */

}

/* Línea divisoria */
.form-cuarzo2 .form-divider {
  width: 100%;
  height: 3px;
  background: #46006a;
  margin-top: 8px;
}

/* =====================================================
   📌 CUERPO DEL FORMULARIO
   ===================================================== */
.form-cuarzo2 .form-body {
  padding: 15px 20px;
}

/* =====================================================
   ✅ CHECKBOX (Aceptación)
   ===================================================== */
.form-cuarzo2 .acceptance {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 30px 0px;
  color: #46006a;
  line-height: 1.3;
}

/* Checkbox circular */
.form-cuarzo2 .acceptance input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #46006a;
  border-radius: 50%;       /* forma circular */
  cursor: pointer;
  position: relative;
}

/* Estado checked */
.form-cuarzo2 .acceptance input[type="checkbox"]:checked {
  background: #54c439;      
  border-color: #46006a;
}

/* Punto blanco al marcar */
.form-cuarzo2 .acceptance input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #54c439;
}

/* Párrafos dentro del bloque aceptación */
.form-cuarzo2 .acceptance p {
  display: flex;
}

/* Enlaces (ej. política de privacidad) */
.form-cuarzo2 .acceptance a {
  color: #46006a;
  text-decoration: underline;
  font-weight: 500;
}

/* =====================================================
   🔘 BOTÓN DE ENVÍO
   ===================================================== */
.form-cuarzo2 .submit-btn {
  background: #4b007d;       /* morado */
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 50px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: block;
  margin: -20px auto 0;
  transition: background 0.3s ease;
  width: 100%;              /* 👉 botón ocupa ancho completo */
  max-width: 100%;
}

/* Hover en el botón */
.form-cuarzo2 .submit-btn:hover {
  background: #350058;
}

/* =====================================================
   🔹 Ajuste → ocultar saltos de línea <br>
   ===================================================== */
.form-cuarzo2 br {
  display: none;
}




/*boton de whastapp agrandar**/