html {
    scroll-behavior: smooth;
    height: 100%;
}
:root {
    --primary: #234DD4;
    --secondary: #00c194;
    --light: #F9F9F9;
}
body {
    font-family: 'Sansation', sans-serif;
    height: 100%;
}
p, h3, .h5 {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

/* HEADER */
header {
    .menu {
        i {
            width: 36px;
            height: 36px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        span {
            font-size: 38px;
            font-weight: bold;
        }
        .links a {
            padding: 10px 20px;
            border-radius: 0.375rem;
        }
        .links .active {
            background-color: var(--primary);
            padding: 10px 20px;
            border-radius: 10px;
        }
        .links a:hover {
            background-color: var(--primary);
        }
    }
    background: url('https://www.agentadvice.com/wp-content/uploads/2020/12/shutterstock_1247473441-scaled.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 0;
    color: white; /* opcional para texto blanco encima de fondo */
    padding-top: 40px;
    padding-bottom: 80px;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #2e2e2e;
        opacity: 0.8;
        z-index: -1; /* importante: debajo del contenido */
    }
    .container {
        position: relative;
        z-index: 1;
    }
    a {
        color: white;
        text-decoration: none;
        margin-left: 1rem;
    }
    .left-ribbon {
        width: 60px;
        border: solid 2px var(--secondary);
    }
    .right-ribbon {
        width: 60px;
        border: solid 2px var(--secondary);
        float: right;
    }
    .tipo-viviendas {
        background: #343744;
        padding: 38px;
        i {
            width: 34px;
            height: 34px;
            background: var(--secondary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
    }
    .redes i {
        color: white;
    }
    .redes a:hover i {
        color: var(--secondary);
    }
    .whats-banner-header{
        background: var(--primary);
        color: white;
        &:hover {
            background: var(--secondary)!important;
        }
    }
}

/* TITULOS SECCION */
.titulos-seccion {
    .titulo {
        i {
            color: var(--primary);
        }
    }
    .contador  {
        i {
            color: var(--primary);
            font-size: 14px;
        }
        span {
            font-size: 14px;
        }
    }
}

/* tarjetas featured */
/* Overlay oscuro inicialmente oculto */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
/* Mostrar overlay cuando el mouse entra a toda la tarjeta */
.property-card:hover .image-overlay {
    opacity: 1;
}

.property-card .camara {
    opacity: 0;
}
.property-card:hover .camara {
    opacity: 1;
}
.property-card:hover .direccion a {
    color: var(--primary);
}
.property-card:hover .iconos i {
    color: var(--secondary);
}
.property-card:hover .precio {
    color: var(--secondary);
}
.property-card:hover .ver-mas i {
    color: var(--secondary);
}

/* Sombra base más fuerte */
.custom-shadow {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Elevar tarjeta al hacer hover */
.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.image-top {
    z-index: 10;
    .camara {
        font-size: 13px;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 5px
    }
}
.property-details {
    a {
        color: #2e2e2e;
    }
    .precio {
        font-size: 12px;
    }
    .precio .h5 {
        font-size: 15px;
    }
}
/* 
    VENTAS
*/
#ventas {
    background: #F7F7F7;
    padding: 50px 0;
}

/* BANNERS INFO */
#banner {
    padding: 60px 0;
}
.info {
    position: relative;
    min-height: 250px;
    padding: 2rem;
    overflow: hidden;
    border-radius: 10px;
}
.info img {
    width: 70px;
    filter: brightness(0) invert(1);
}

.info::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(35, 77, 212, .5);
    z-index: 1;
}

.info::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://img10.naventcdn.com/avisos/18/01/44/83/17/60/360x266/1491471225.jpg?isFirstImage=true');
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.5s ease;
    transform: scale(1);
}

.info:hover::after {
    transform: scale(1.1);
}

.info > * {
    position: relative;
    z-index: 2;
}
.img-fondo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

/* Fondo y zoom via ::after */
.img-fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://moskito.mx/es/wp-content/uploads/sites/2/2023/12/casas-en-venta-en-tulum-akbal-atardecer-en-la-piscina.jpg');
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: 0;
    transform: scale(1);
}

/* Overlay via ::before */
.img-fondo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(35, 77, 212, .5);
    z-index: 1;
}

/* Zoom al hacer hover */
.img-fondo:hover::after {
    transform: scale(1.1);
}



/* why us */
#why-us {
    background: #F7F7F7;
    padding: 80px 0;
    position: relative;

    .container {
        z-index: 100;
        position: relative;
    }

    &::before {
        content: "";
        background: url(https://www.radiustheme.com/demo/wordpress/themes/homlisti/wp-content/uploads/2021/09/video-bg-2.svg);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: contain;

        position: absolute;
        bottom: 0;
        right: 0;

        width: 36%;
        height: 100%;
        opacity: 0.2;
        pointer-events: none;
    }

    .ficha {
        padding: 30px 20px;
        transition: all 0.3s ease;
        border-top: solid 4px var(--secondary);
    }

    .ficha:hover {
        background-color: var(--secondary) !important;
        color: white !important;
    }

    .ficha:hover img {
        filter: brightness(0) invert(1);
    }
}

/* banner agente */
.banner-agente {
    /* background: #EAF7F5; */
    .whats-banner {
        background: var(--secondary);
        color: white;
    }
}

/* contacto */
.contact-details {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.contact-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.contact-details i {
  color: #007cba;
  font-size: 1.2rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.contact-details a {
  color: #007cba;
  text-decoration: none;
}

.contact-details a:hover {
  text-decoration: underline;
}

  .contact-section {
    padding: 60px 0;
    background-color: #EAF7F5;
  }

  .contact-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    gap: 2rem;
  }

  .contact-info {
    flex: 1 1 40%;
  }

  .contact-form {
    flex: 1 1 55%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
	background: white;
    padding: 50px;
	select {
		background: white;
		color: gray;
	}
  }

  .form-row {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .form-row.half {
    width: calc(50% - 0.5rem);
  }

  .form-row.full {
    width: 100%;
  }

  .form-row input,
  .form-row select,
  .form-row textarea {
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .form-row label {
    margin-bottom: 0.5rem;
    font-weight: bold;
  }

  button[type="submit"] {
    padding: 1rem 2rem;
    background-color: var(--secondary);
    color: white;
    border: none;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
  }
  

  button[type="submit"]:hover {
    background-color: #005b94;
  }

  @media (max-width: 768px) {
    .form-row.half {
      width: 100%;
    }

    .contact-container {
      flex-direction: column;
    }
  }

footer {
    .logo {
        i {
            width: 30px;
            height: 30px;
            background: var(--primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        span {
            font-size: 22px;
            font-weight: bold;
        }
    }
    .descripcion {
        color: #ccc;
        margin-top: 13px;
    }
}






/* PROPIEDADES */
.contenido-propiedad {
    background: #f7f7f7;
}
.head-propiedad {
    h5 {
        color: var(--secondary);
    }
}
.iconos-top {
    i {
        color: var(--secondary);
    }
}



/* proximidades */
.proximidades {
    position: relative;
    height: 265px;
    &::before {
        content: "";
        background: url(https://www.radiustheme.com/demo/wordpress/themes/homlisti/wp-content/uploads/2021/09/video-bg-2.svg);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: contain;
        position: absolute;
        bottom: -33px;
        right: 0;
        width: 36%;
        height: 100%;
        opacity: 0.2;
        pointer-events: none;
    }
}


/* sidebar */

header {
    background-color: #234DD4;
    color: white;
  }

  nav.menu a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
  }

  nav.menu a.active {
    font-weight: bold;
  }
  a {
    text-decoration: none;
  }
  /* Sidebar */
  .sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #234DD4;
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 60px;
    z-index: 999;
  }

  .sidebar a, .sidebar span {
    display: block;
    color: white;
    padding: 15px 25px;
    text-decoration: none;
  }

  .sidebar .close-btn {
    position: absolute;
    top: -20px;
    right: 15px;
    font-size: 60px !important;
    cursor: pointer;
    color: white;
  }

  /* Responsivo */
  @media (max-width: 767.98px) {
    .links {
      display: none !important; /* Oculta links en móvil */
    }
    .menu-toggle {
      display: inline-block !important;
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
    }
  }

  @media (min-width: 768px) {
    .menu-toggle {
      display: none !important; /* Oculta botón hamburguesa en escritorio */
    }
    .links {
      display: flex !important; /* Muestra links en escritorio */
    }
  }






  /* tarjetas presentacion */
  /* Fondo gradiente */
.digital-card {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(to top, #234DD4, #4E6FEF);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

/* Imagen perfil */
.profile-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 4px solid white;
  border-radius: 10px;
  margin-bottom: 15px;
}

/* Nombre y subtítulo */
.profile-name {
  color: white;
  margin: 0;
}

.profile-subtitle {
  color: #ccc;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

/* Botones personalizados */
.btn-whatsapp,
.btn-web {
  background-color: #1E3EBB; /* Un poco más oscuro que #234DD4 */
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 15px;
  margin-top: 15px;
  transition: background 0.3s;
}

.btn-whatsapp:hover,
.btn-web:hover {
  background-color: #162E88;
  color: white;
}

/* Botones de contacto (llamar y email) */
.contact-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.btn-gray {
  background-color: #ddd;
  color: black;
  padding: 8px 15px;
  border-radius: 6px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.3s;
}

.btn-gray:hover {
  background-color: #bbb;
}

/* Redes sociales */
.social-icons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.social-icons a {
  color: white;
  font-size: 1.4rem;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: var(--secondary);
}

/* Divider */
.divider {
  width: 100px;
  height: 2px;
  background-color: white;
  margin: 20px auto;
}