/*
Theme Name: Hello Elementor Child
Theme URI: https://gilhomes.com.mx
Description: Child theme de Hello Elementor
Author: Tu Nombre
Author URI: https://gilhomes.com.mx
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Aquí va tu CSS personalizado */
html {
  scroll-behavior: smooth;
}
body{
    background-color: #000 !important;
}

header#site-header {
    position: sticky;
    top: 0;
    z-index: 3;
    transition: box-shadow .2s ease, background-color .2s ease;
}
header#site-header.is-sticky{
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

body.admin-bar header#site-header{
  top: 32px;
}

@media (max-width: 782px){
  body.admin-bar header#site-header{
    top: 46px;
  }
}


.page-header{
    display: none;
}

.overlay-two-columns {
    padding: 0 5%;
}

.overlay-two-columns .e-child:first-child {
    transform: translateX(25%);
    z-index: 1;
}

@media (max-width: 900px){
    body .overlay-two-columns .e-child:first-child,
    body .overlay-two-columns .e-child:nth-child(2){
        transform: translateX(0%);
    }
}

.overlay-two-columns .e-child:nth-child(2) {
    transform: translateX(-20%);
}


@media (max-width: 900px){
    body .invertir-icons .elementor-element {
        flex-direction: column;
        gap: 0;
    }
}

body .invertir-icons {
    margin-bottom: 20px;
}


.step-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: #C9A24D; /* gris de la línea */
  margin: 40px 0;
}

.step-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  background: #000; /* fondo para "cortar" la línea */
  padding: 0 14px;

  font-size: 32px;
  font-weight: 600;
  color: #c9a24d; /* dorado */

  line-height: 1;
}

/* =========================
   CF7 - GilHomes (FORM ONLY)
   Quita el rosa + estilo negro/morado/dorado/blanco
   ========================= */

/* Espaciado limpio CF7 (evita separaciones raras por <p>) */
.gh-cf7 .wpcf7 form p{
  margin: 0 0 12px !important;
}

/* Card del form */
.gh-cf7 .wpcf7 form{
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(42,15,62,.65), transparent 55%),
    radial-gradient(900px 520px at 85% 20%, rgba(16,42,67,.55), transparent 55%),
    rgba(16,42,67,.10) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.55) !important;
  color: #fff !important;
}

.wpcf7 form label,
.wpcf7-response-output{
    color: white;
    width: 100% !important;
}


select.wpcf7-form-control.wpcf7-select,
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required{
    background: transparent !important;
    background-color: transparent !important;
    color: #fff; /* texto */
    border: 1px solid rgba(201,162,77,.45);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 8px 0px;
}
select.wpcf7-form-control.wpcf7-select option,
select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required option{
    background: black !important;
    background-color: black !important;
}

form.wpcf7-form input,
form.wpcf7-form .wpcf7-validates-as-required, 
form.wpcf7-form textarea,
textarea.wpcf7-form-control.wpcf7-textarea{
    background-color: transparent;
    border: 1px solid rgba(201,162,77,.45);
    margin: 8px 0px;
    color: white;
}


form.wpcf7-form a,form.wpcf7-form input[type="submit"]{
    color: rgba(201,162,77,.45);
}

input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background-color: black;
}


input.wpcf7-form-control.wpcf7-submit.has-spinne:hover{
    background-color: rgba(201,162,77,.45);
    color: white;
}

form.wpcf7-form a:hover{
    color: white;
}

input.wpcf7-form-control.wpcf7-file {
    border: none !important;
}

/* Quita el rosa en links dentro del form (Aviso de Privacidad) */
.gh-cf7 .wpcf7 a,
.gh-cf7 .wpcf7 a:visited{
  color: #C9A24D !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(201,162,77,.55) !important;
}
.gh-cf7 .wpcf7 a:hover{
  border-bottom-style: solid !important;
}

/* Inputs / select / textarea */
.gh-cf7 .wpcf7 input[type="text"],
.gh-cf7 .wpcf7 input[type="email"],
.gh-cf7 .wpcf7 input[type="tel"],
.gh-cf7 .wpcf7 select,
.gh-cf7 .wpcf7 textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(0,0,0,.60) !important;
  border: 1px solid rgba(201,162,77,.35) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  outline: none !important;
}

.gh-cf7 .wpcf7 ::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Autofill amarillo de Chrome */
.gh-cf7 .wpcf7 input:-webkit-autofill,
.gh-cf7 .wpcf7 textarea:-webkit-autofill{
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.60) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Focus dorado */
.gh-cf7 .wpcf7 input[type="text"]:focus,
.gh-cf7 .wpcf7 input[type="email"]:focus,
.gh-cf7 .wpcf7 input[type="tel"]:focus,
.gh-cf7 .wpcf7 select:focus,
.gh-cf7 .wpcf7 textarea:focus{
  border-color: rgba(201,162,77,.85) !important;
  box-shadow: 0 0 0 4px rgba(201,162,77,.18) !important;
}

/* Select arrow */
.gh-cf7 .wpcf7 select{
  appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(201,162,77,.95) 50%),
    linear-gradient(135deg, rgba(201,162,77,.95) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 44px !important;
}

/* File upload */
.gh-cf7 .wpcf7 input[type="file"]{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px dashed rgba(201,162,77,.45) !important;
  background: rgba(42,15,62,.18) !important;
  color: rgba(255,255,255,.90) !important;
}

.gh-cf7 .wpcf7 input[type="file"]::-webkit-file-upload-button{
  border: 1px solid rgba(201,162,77,.55) !important;
  background: rgba(201,162,77,.14) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}
.gh-cf7 .wpcf7 input[type="file"]::-webkit-file-upload-button:hover{
  border-color: rgba(201,162,77,.85) !important;
  background: rgba(201,162,77,.22) !important;
}

/* Checkbox */
.gh-cf7 .wpcf7 input[type="checkbox"],
.gh-cf7 .wpcf7 input[type="radio"]{
  accent-color: #C9A24D !important;
}

/* Acceptance box */
.gh-cf7 .wpcf7 .wpcf7-acceptance{
  display: block !important;
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(16,42,67,.14) !important;
  color: rgba(255,255,255,.90) !important;
}

/* Botón enviar (quita el rosa) */
.gh-cf7 .wpcf7 input[type="submit"],
.gh-cf7 .wpcf7 input.wpcf7-submit{
  width: 100% !important;
  margin-top: 16px !important;
  border: 1px solid rgba(201,162,77,.85) !important;
  background: linear-gradient(135deg, rgba(42,15,62,.60), rgba(16,42,67,.35)) !important;
  color: #fff !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.40) !important;
}

.gh-cf7 .wpcf7 input[type="submit"]:hover,
.gh-cf7 .wpcf7 input.wpcf7-submit:hover{
  border-color: rgba(201,162,77,1) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.55) !important;
  transform: translateY(-1px);
}

/* Mensajes CF7 */
.gh-cf7 .wpcf7 .wpcf7-response-output{
  margin: 14px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(42,15,62,.16) !important;
  color: rgba(255,255,255,.92) !important;
}

.gh-cf7 .wpcf7 span.wpcf7-not-valid-tip{
  margin-top: 6px !important;
  display:block !important;
  font-size: .92em !important;
  color: #ffb4b4 !important;
}


.gold-text{
    color: #C9A24D;
}

@media(max-width: 900px){
.text-center.mobile{
    text-align: center;
}
}
.xl2 {
    font-size: 1.18rem;
    font-weight: 600;
}