.asdwcvdvvxcvxcv{

  display: flex;
}
.asdqwdq{

    margin-top: 41px;
    margin-bottom: 65px;
    color: var(--verde-navbar);
}
.dfgqewqvew{

  color: var(--verde-navbar)
}
.asdljasbljas{

  padding-top: 65px;
  padding-bottom: 65px;
  background: var(--verde-navbar);
  padding-right: 50px;
}


.qwewqderterwtrt{

padding-bottom: 270px;

}
.d12qd2d21d{
color:#1E4743; font-weight:700; font-size:2rem;


}




.qweqweqw{

    margin-bottom: 70px;
    margin-top: 18px;
    color: var(--verde-navbar); 
}

.card-plusvalia {
    border-radius: 16px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 80px 0 80px 60px;
}

.text-inversion-patri{

 padding: 30PX 0PX;
}

/* === Lista Amenidades y Destacado === */
.lista-amenidades {
  list-style: none;
  background: none;
  padding-left: 0;
  margin-bottom: 0;
  
}
.lista-amenidades li {
  font-family: var(--font-secundaria);
  font-size: 1.15rem;
  color: #1E4743;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.lista-amenidades li i {
  color: #1E4743;
  font-size: 1.2em;
  flex-shrink: 0;
}
.lista-amenidades b {
  color: #1a332a;
  font-weight: 700;
}

.espacios-destacado {
  background: #1E4743;
  border-radius: 4px;
      padding: 3rem 1.5rem 3rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: flex-start;
  margin-top: 2.5rem;
  width: 100%;
  min-height: 90px;
}
.espacios-numero {
  font-family: Trige, Arial, sans-serif;
  font-size: 2.7rem;
  color: #e1ddcc;
  font-weight: 400;
  line-height: 1;
  margin-right: 0.7rem;
}
.espacios-texto {
  font-family: var(--font-secundaria);
  color: #e1ddcc;
    font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: left;
  text-transform: none;
}

.testimonial-box {
  background:#fff;
  box-shadow:0 4px 24px 0 rgba(32,68,59,0.08);
}

.primera-resena {
    align-items: start;
    
}

/* Dispositivos pequeños y medianos */

/* Fondo semitransparente para la columna de bienestar */
.bienestar-bg {
    background: #1E4743;
        border-radius: 7px 7px 7px 0px;
    padding: 10% 2%;
    box-shadow: 0 4px 24px 0 rgba(32, 68, 59, 0.08);
    max-width: 100%;color: var(--color-texto);
}

/* =================== Hero Amenidades =================== */

       
        /* Contenedor principal para el fondo oscuro */
        .hero-amenidades-section {
            background-color: var(--verde-navbar);
            background-image: url('../img/fotos/01.png'); /* Ruta corregida: sube un nivel desde css/ */
          background-color: var(--verde-navbar);
    background-image: url(../img/fotos/01.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
        }

        /* Estilo para el título principal */
        .titulo-principal {
            font-family: var(--font-secundaria);
            font-size: 2rem; /* Tamaño grande para desktop */
            font-weight: 700;
            color: var(--color-texto);
            margin-bottom: 1.5rem;
            /* Responsividad del tamaño de fuente */
            line-height: 1;
        }

        /* Estilo para el texto de la métrica */
        .metrica-numero {
            font-family: var(--font-secundaria);
            font-size: 2rem; /* Tamaño grande para la métrica */
            font-weight: 600;
            color: var(--color-texto);
            margin-top: 3rem;
            margin-bottom: 1.5rem;
    
        }

        /* Estilo para el texto del párrafo normal */
        .parrafo-texto {
            font-size: 1.125rem;
            color: var(--color-resaltado);
        }

        /* Contenedor de la imagen a la derecha */
        .imagen-contenedor {
            /* Ocultar en dispositivos pequeños para dar prioridad al contenido, o usar todo el ancho */
            display: none;
        }


/* =================== seccion bienestar =================== */
        .cont-espacios {
            padding-top: 3rem;
        }
        .cont-galeria {
     
          padding-bottom: 3rem;
        }
        .logo-espacios {
            max-width: 100%
        }

        .areas-ameni {
            padding-left: 4%;
            line-height: 45px;
        }

        .card-lista {
            border-radius: 16px;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
            
        }

        .lo-que {
            padding-top: 3rem;
            padding-bottom: 3rem;
           
        }

        .texto-lo-que h2{
            font-family: var(--font-secundaria);
            color: var(--color-fondo);
            font-size: 2.7rem;
            font-weight: 600;
         
            letter-spacing: 0.01em;
            text-align: left;
            margin-bottom: 1rem;
        }

        .texto-lo-que p{
            font-family: 'Open Sans', Arial, sans-serif;
            color: #222;
            font-size: 1.25rem;
            font-weight: 400;
            text-align: left;
            margin-bottom: 0;
        }

/* =================== seccion reseñas =================== */        
        .seccion-familia {
            padding-bottom: 3rem;
        }

        .img-familia {  
            max-height: 480px;
            object-fit: cover;
            width: 100%;
        }



  .qwwqdcqwcwq3er{

              padding-top: 3rem !important;
    padding-bottom: 3rem !important;
        }
        
        /* Mostrar la imagen en dispositivos medianos y grandes */
        @media (min-width: 993px) { /* Breakpoint 'lg' de Bootstrap */
            .imagen-contenedor {
                display: block;
            }

            .imagen-derecha {
                /* Asegura que la imagen ocupe todo el espacio vertical disponible en el col */
                height: 100%; 
                width: 100%;
                object-fit: cover;
                border-radius: 0.5rem; /* Bordes redondeados sutiles */
            }

            .texto-espacios {
                padding: 0 0 0 4%; /* Alineación a la izquierda en desktop */
            }

     
        }

     
        
        /* Asegura que la columna de texto tenga espacio en móvil */
        .texto-columna {
            padding: 2rem;
        }

        /* Para dispositivos pequeños, la imagen irá arriba o abajo del texto */
        @media (max-width: 991px) {
            .imagen-contenedor-mobile {
                margin-bottom: 2rem; /* Espacio antes del texto en móvil */
            }
          .qwwqdcqwcwq3er{

              padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
        }
            .seccion-familia {
    padding-bottom: 0rem;
}
.hero-amenidades-section {
    background-color: var(--verde-navbar);
    background-image: url(../img/fotos/01.png);
    background-color: var(--verde-navbar);
    background-image: url(../img/fotos/01.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-amenidades-section::before {
   content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
      background: linear-gradient(to bottom, rgb(0 0 0 / 74%), rgb(0 0 0 / 0%));
  z-index: 1;
  pointer-events: none;
}


.asdljasbljas {
    padding-top: 65px;
    padding-bottom: 65px;
    background: #1e474300;
    padding-right: 50px;
            z-index: 5;
        position: relative;
}
            .logo-espacios {
              display: none;
            }

            .titulo-principal {
              font-family: var(--font-secundaria);
              font-size: 2rem;
              font-weight: 700;
              color: var(--color-texto); 
              margin-bottom: 1.5rem;
              line-height: 1;
            }

            .texto-lo-que h2 {
              font-family: var(--font-secundaria);
              color: var(--color-fondo);
              font-size: 2rem;
              font-weight: 600;
        
              letter-spacing: 0.01em;
              text-align: left;
              margin-bottom: 1rem;
            }

            .bienestar-bg {
              padding: 1.2rem 1rem;
              border-radius: 0.7rem;
              color: var(--color-texto);
              
            }

            .espacios-destacado {
              padding: 1rem 1rem 0.9rem 1rem;
              min-height: 70px;
            }
            .espacios-numero {
             
            }
            .cont-galeria {
    padding-bottom: 0rem;
}
            .espacios-texto {
              font-size: 1rem;
            }
            .lista-amenidades {
              
              margin-top: 3rem;
            }

            .espacios-destacado {
              background: #1E4743;
              border-radius: 4px;
              padding: 1.2rem 1.5rem 1.1rem 1.5rem;
              display: flex;
              align-items: center;
              gap: 1.2rem;
              justify-content: center;
              margin-top: 2.5rem;
              width: 100%;
              min-height: 90px;
            }
         }

   
/* =================== Fuentes Personalizadas =================== */
@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik/GraphikRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik/GraphikMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik/GraphikSemibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik/GraphikBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open Sans/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open Sans/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/Open Sans/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Trige';
  src: url('../fonts/Trige/Trige-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* Clases utilitarias para usar las fuentes */
.font-graphik { font-family: 'Graphik', Arial, sans-serif !important; }
.font-opensans { font-family: 'Open Sans', Arial, sans-serif !important; }
.font-prompt { font-family: 'Prompt', Arial, sans-serif !important; }
.font-trige { font-family: 'Trige', Arial, sans-serif !important; }



h2 {
  font-family: 'Trige', Arial, sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.01em;
      line-height: inherit;
}

/* Puedes usar estas clases en cualquier elemento o cambiar el font-family en body, headings, etc. */
/*
  .contact-white-card: Tarjeta de contacto con fondo blanco, sin borde, padding y border-radius
  Replica el estilo de la referencia visual
*/
.contact-white-card {
  background: #fff;
  border: none;
  /* border-radius: 16px; */
  padding: 2.5rem 2rem 2rem 2rem;
  box-shadow: 0 2px 16px 0 rgba(40,60,60,0.06);
}


/* =================== Estilos personalizados para los controles del carrusel del hero =================== */
/*
  Al hacer hover sobre los botones de control del carrusel, se les da un fondo blanco, borde circular, sombra y un borde doble para simular la apariencia de la imagen adjunta.
*/
.hero .carousel-control-prev,
.hero .carousel-control-next {
  transition: box-shadow 0.2s, background 0.2s, border 0.2s;
}
.hero .carousel-control-prev:hover .carousel-control-prev-icon,
.hero .carousel-control-next:hover .carousel-control-next-icon {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(44,61,57,0.15);
  border: 4px solid #fff;
  outline: 2px solid #f4f0dd;
  outline-offset: -6px;
}
.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  transition: background 0.2s, box-shadow 0.2s;
}
/* =================== Fin estilos personalizados para los controles del carrusel =================== */
/* Archivo principal de estilos personalizados para Tierra Viva Bosque Residencial */

/* Ejemplo de estilos base, puedes agregar aquí los estilos migrados del <style> de index.html */


:root {
  --verde-navbar: #1E4743;
  --beige-texto: #ffffff;
  --verde-oscuro: #1a332a;
  --beige-fondo: #f7f6f2;
  
  /* Variables para la sección de amenidades */
  --color-fondo: #2A5958;
  --color-texto: #f4f0dd;
  --color-resaltado: #f4f0dd;
  --font-secundaria: 'Graphik', Arial, sans-serif;
  --color-text-light: #f4f0dd;
}

/* Fondo de textura para todo el sitio */
body {
  background: #f7f6f2 url('../img/fondocafe.jpg') repeat;
  background-size: contain;
  font-family: 'Montserrat', Arial, sans-serif;
}

/* =================== Estilos de la Navbar =================== */

/* Fondo principal de la barra de navegación (siempre visible, tanto abierta como cerrada) */
.navbar {
  background-color: var(--verde-navbar) !important;
  background-image: url('../img/textura/1.jpg'); /* Ruta corregida: sube un nivel desde css/ */
}

.navbar-toggler {
  border-color: #fff;
}

.navbar-toggler .navbar-toggler-icon {
  filter: brightness(0) invert(1);
  background-color: transparent;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}
.navbar{

    background-image: url('../img/lineasb.png'); /* Ruta corregida: sube un nivel desde css/ */

}

/* Color del texto de los enlaces del menú y de los <span> dentro del logo (siempre visible) */
.navbar-brand span,
.navbar-nav .nav-link {
  color: var(--beige-texto) !important;
}

/* Color de los enlaces del menú cuando:
   - El enlace está activo (página actual)
   - El enlace tiene el foco (por tabulación/teclado)
   - El mouse pasa por encima del enlace (hover)
*/
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: #f4f0dd !important;
}

/* = Efecto Hover de Línea para Enlaces = */
.line-hover {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--beige-texto) !important;
  padding: 8px 24px;
  font-weight: bold;
}

.line-hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #f4f0dd;
  transition: left 0.3s, width 0.3s;
  transform: translateX(-50%);
}

/* Mostrar la línea también cuando el enlace es activo */
.line-hover:hover::after,
.line-hover.active::after {
  width: 100%;
}
/* = Efecto Hover de Línea para Enlaces = */


/* Color base de los iconos de redes sociales dentro de la navbar (siempre visible) */
.social a {
  color: #f4f0dd !important;
}

/* Color de los iconos de redes sociales cuando el mouse pasa por encima (hover) */
.social a:hover,
.socialf a:hover {
  color: #f4f0dd !important;
}

/* =================== Estilos del botón hamburguesa =================== */
.navbar-toggler {
  border-color: #fff;
}

.navbar-toggler .navbar-toggler-icon {
  filter: brightness(0) invert(1);
  background-color: transparent;
}

/* Quitar el borde negro (outline) del botón hamburguesa al estar enfocado o activo */
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}
/* =================== Fin estilos de la Navbar =================== */



/* =================== Estilos del Hero/Header =================== */
.hero {
      height: 71vh;
  /* min-height: 700px; */
  position: relative;
  color: white;
  overflow: hidden;
  background-image: url('../img/fotos/carrusel1.png');
      background-size: cover;
    background-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
      background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 61%));
  z-index: 1;
  pointer-events: none;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item,
.hero .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
    display: flex;
    align-items: flex-end;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero .carousel-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
  z-index: 0;
}

.hero-content-logo {
width: 100%;
text-align: center;
margin-bottom: 20PX;
}



.hero-content-card2 {
  display: none;
}

.hero-content-card .hero-content-logo {
  width: 150px;
  margin-bottom: 1rem;
}

.hero-content-card {
margin-bottom: 50px;
    border-radius: 0.5rem;
    text-align: center;
    width: 100%;
}

.hero-content-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
   color: #f4f0dd;
}

.hero-content-card p {
  margin-bottom: 0;
  font-size: 1.9rem;
      color: #f4f0dd;
}
/* =================== Fin estilos del Hero/Header =================== */



/* =================== Estilos del Footer =================== */
.footer {
  background-color: var(--verde-navbar) !important;
}

/* =================== Fin estilos del Footer =================== */


/* =================== Estilos de las Secciones del Main =================== */

/* === Sección de Formulario y Estadísticas === */
/* 
  .form-section: Desplaza la sección hacia arriba para superponerla ligeramente sobre el hero
  Se usa translateY negativo y z-index alto para crear el efecto de elevación
*/
.form-con-img {
  transform: translateY(-245px);
  position: relative;
  z-index: 10;
  padding: 20px 0px;
}

/* 
  .form-card: Estilo para las tarjetas de formulario con sombra y fondo blanco
  Se usa para destacar los formularios de contacto e inversión
*/
.form-card {
  background-color: #fbfcfc;
  border-radius: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 2.5rem;
}

.form-card label{

  color: #000;}




/* 
  Estilos para inputs y selects del formulario
  Fondo gris claro y borde sutil para mejor legibilidad
*/
.form-control, .form-select {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

/* 
  Al hacer focus en los campos, se resalta con el color primario
  Se elimina el box-shadow predeterminado de Bootstrap
*/
.form-control:focus, .form-select:focus {
  box-shadow: none;
  border-color: var(--verde-navbar);
}

/* === Estadísticas === */
/* 
  .stats-item: Estilo para los ítems de estadísticas (18%, 247, 72hrs)
  Tipografía grande y elegante para destacar las cifras
*/
.stats-item h2 {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--verde-navbar);
}

.stats-item p {
  margin: 0;
  color: #666;
}

/* === Botones === */
/* 
  Estilos para botones primarios y outline
  Se usan en formularios y CTAs (llamadas a la acción)
*/
.btn-primary {
  background-color: var(--verde-navbar);
  border-color: var(--verde-navbar);
  padding: 0.75rem 1.5rem;
  font-weight: 500;

}

.btn-primary:hover {
  background-color: #1e2b28;
  border-color: #1e2b28;
}

.btn-primary:disabled {
  background-color: var(--verde-navbar);
  border-color: var(--verde-navbar);
  opacity: 0.8;
  cursor: not-allowed;
}

.btn-outline-primary {
  color: var(--verde-navbar);
  border-color: var(--verde-navbar);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: 0.25rem;
}

.btn-outline-primary:hover {
  background-color: var(--verde-navbar);
  color: white;
}

/* === Campos Obligatorios === */
.form-label span {
  font-weight: bold;
  font-size: 1.1em;
}

/* === Selector de Código de País === */
.country-code-select {
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background-color: #f8f9fa;
  font-weight: 500;
}

.country-code-select:focus {
  border-color: #ced4da;
  box-shadow: none;
}

.input-group input[type="tel"] {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group .form-control:focus {
  z-index: 3;
}

/* === Sección de Inversión === */
/* 
  .icon-box: Contenedor para iconos de características
  Los iconos tienen color primario para mantener consistencia visual
*/
.icon-box i {
  color: var(--verde-navbar);
  font-size:3.5rem;

}

/* 
  .plus-50-box: Caja destacada con borde izquierdo para el número +50
  Se usa para resaltar información importante
*/
.plus-50-box {
  border-left: 3px solid var(--verde-navbar);
}

.plus-50-box .display-4 {
  color: var(--verde-navbar);
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}

/* === Galería === */
/* 
  .gallery-img: Estilo para imágenes de galería
  object-fit: cover asegura que las imágenes mantengan su proporción
  border-radius suaviza las esquinas
*/
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

/* === Sección de Contacto === */
/*
  .gallery-img-equal: Fuerza altura igual para las imágenes de la fila inferior de la galería
  Ajusta la altura para que todas luzcan iguales y responsivas
*/
.gallery-img-equal {
  min-height: 260px;
  max-height: 320px;
  height: 100%;
  width: 100%;
  object-fit: cover;
  
  display: block;
}


/* 
  .contact-item: Estilo para los elementos de contacto (teléfono, email, dirección)
  Los iconos tienen tamaño y color consistentes
*/
.contact-item i {
  font-size: 1.5rem;
  color: var(--verde-navbar);
}

/* =================== Fin estilos de las Secciones del Main =================== */


.investment {
  margin-top: -230px;
}

.inversion-int {
  margin: 0px 0 30px 0;
}

.contact-white-card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--verde-navbar);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-white-card .icon-box i {
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
}







@media screen and (max-width: 768px) {
  /* Estilos específicos para pantallas pequeñas (móviles) */
  .social a {
    display: none !important;
  }
  /* ******* Hero responsivo******** */
.hero {
    height: 100%;
    /* min-height: 700px; */
    position: relative;
    color: white;
    overflow: hidden;
    background-image: url(../img/fotos/carrusel1.png);
    background-size: cover;
    background-position: center;

    padding-bottom: 60px;
}
  .hero-content-card {
    position: static;
    max-width: 100%;
    margin: 1.5rem auto 0 auto;
    padding: 1rem;
    background-color: rgba(255,255,255,0.85);
    color: #2C3D39;
    border-radius: 1rem;
    box-shadow: 0 2px 16px rgba(44,61,57,0.08);
    text-align: center;
  }
  
  .hero-content-card .hero-content-logo {
    width: 110px;
  }
  .hero-content-card {
    padding: 1rem;
  }
}
 .form-con-img2 {
  
    display: none;
  }
@media screen and (max-width: 992px) {
  .hero-content-logo, .hero-content-card {
    display: none;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 33%), rgb(0 0 0 / 0%));
    z-index: 1;
    pointer-events: none;
}
.acasfeea{
  margin-top: 70px;
}
  .hero-content-card2 {
display: block;
        text-align: center;

        padding: 50px 0px;
  }

  .qwewqderterwtrt{

padding-bottom: 0px;

}
.investment {
    margin-top: 0px;
}
  .form-con-img {
  
    display: none;
  }
 .form-con-img2 {
  
    display: block;
  }
  .asdqwdq{

      display: flex !important
;
    justify-content: center;
  }
.inversion-int {
    margin: 0px 0 30px 0;
    text-align: center;
}

  .card-plusvalia {
    border-radius: 16px;
    background: #ffffff41;
            padding: 20px 15px 5px 15px;
    
}

  .contact-white-card {
background: #ffffff00;
padding: 0px 15px 0px 15px;

  }

  .formulario-abajo {
        margin-top: 40px;
   
  }

  .formulario-abajo-contacto   {
        margin-top: 40px;
        
  }



  
}

@media screen and (min-width: 992px) {
  
  .contact-white-card {
    background: #fff;
    border: none;
    /* border-radius: 16px; */
    padding: 2.5rem 2rem 2rem 2rem;
    box-shadow: 0 2px 16px 0 rgba(40, 60, 60, 0.06);
    width: 31%;
  }

  .gallery-img-equal {
    min-height: 180px;
    max-height: 220px;
  }

  .formulario-abajo {
    margin-left: 10%;
    
  }
  
  
}


/* PAGINA DE CONTACTO ====================================== */


/* --- Sección Hero y Banner (Fondo y Textos Claros) --- */
        .hero-banner {
            background-size: cover;
            background-position: center;
            height: 50vh; /* Altura de ejemplo para el banner */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            /* Usar un color de fondo temporal y un texto para la imagen que falta */
            background-color: #333;
        }

        .hero-banner .logo-text {
            color: var(--color-text-light);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }

        /* Simulación de la imagen de fondo con la entrada/rocas (No se usa URL, solo color) */
        .hero-section {
            height: 60vh;
            background-color: #4CAF50; /* Color temporal para simular la imagen de entrada */
            background-image: url('https://placehold.co/1200x400/385f58/ffffff?text=Imagen+Principal+del+Desarrollo');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-content {
            padding: 20px;
            background: rgba(25, 70, 64, 0.6); /* Fondo semi-transparente para el texto */
            border-radius: 10px;
            text-align: center;
        }

        .hero-content h1 {
            font-size: 3rem;
            font-weight: 700;
            color: white; /* Simulación del texto sobre las rocas */
        }
        .hero-content p {
            font-size: 1.25rem;
            color: white;
            font-weight: 300;
        }

@media (max-width: 1300px) and (min-width: 992px) {
  /* Estilos específicos para pantallas medianas (tablets y laptops) */ 
 .hero {
  height: 40vh;
  
}

.hero-content-card p {
    margin-bottom: 0;
    font-size: 1.5rem;
    color: #f4f0dd;
}

.dfgqewqvew{

  font-size: 2rem;
  color: var(--verde-navbar);
}

    .contact-white-card {
        background: #fff;
        border: none;
        /* border-radius: 16px; */
        padding: 2.5rem 2rem 2rem 2rem;
        box-shadow: 0 2px 16px 0 rgba(40, 60, 60, 0.06);
                width: 50%;
    }
        .formulario-abajo {
        margin-left: 0;
    }
}