/* fondo */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;  
  background: linear-gradient(135deg, #ffffff, #ffffff);
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Gotham', sans-serif;
}



/* =========================
   NOTIFICACIÓN MANTENIMIENTO
========================= */
.maintenance-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 360px;
  background: #ffffff;
  border-left: 6px solid #52BEC0;
  border-radius: 14px;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
  animation: slideIn 0.5s ease;
}

.maintenance-content {
  padding: 18px 20px;
}

.maintenance-content strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  color: #000;
}

.maintenance-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 14px;
}

.maintenance-close {
  background: #52BEC0;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
}

/* ANIMACIÓN */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .maintenance-notification {
    left: 20px;
    right: 20px;
    max-width: none;
  }
}
















/* ===== RESET CRÍTICO ===== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* ===== HEADER BASE ===== */
.header {
  width: 100%;
  padding: 0px 20px;
  background: linear-gradient(45deg, #000000, #000000d4, #000000af, #0000008b, #00000091);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  color: rgb(255, 255, 255);
  height: 60px;
}

/* LOGO */
.logo img {
  width: 100px;
  height: 100px;
}

/* MENÚ DESKTOP */
nav ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

nav ul li a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 17px;
  padding: 8px 12px;
  border-radius: 6px;
}

/* HOVER */
nav ul li a:hover {
  background: rgba(255, 255, 255, 0);
}

/* OCULTOS POR DEFECTO */
.menu-btn,
.close-btn {
  display: none;
}

/* ================== MÓVIL ================== */
@media (max-width: 900px) {

  .header {
    justify-content: center;
  }

  /* HAMBURGUESA IZQUIERDA */
  .menu-btn {
    display: block;
    position: absolute;
    left: 15px;
    font-size: 30px;
    color: white;
    cursor: pointer;
  }

  /* LOGO CENTRADO */
  .logo img {
    width: 120px;
  }

  /* MENÚ OCULTO ARRIBA */
nav ul {
  position: fixed;
  inset: 0;
  height: 100dvh; /* IMPORTANTE */
  background: linear-gradient(45deg, #000000, #1f1e1e, #616161, #616161d0, #616161b8);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: transform 0.4s ease;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 999;
}


nav ul.show {
  transform: translateY(0);
  pointer-events: auto;
}


  /* BOTÓN CERRAR */
  .close-btn {
    display: block;
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 34px;
    color: white;
    cursor: pointer;
  }

  nav ul li a {
    font-size: 22px;
  }
}

/* ================== TELÉFONOS PEQUEÑOS ================== */
@media (max-width: 360px) {

  .menu-btn {
    font-size: 26px;
  }

  .logo img {
    width: 80px;
  }

  nav ul li a {
    font-size: 20px;
  }
}











/* VIDEO */
.video-container {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

/* VIDEOS */
.video-container video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  z-index: 1;
}

/* POR DEFECTO */
.video-mobile {
  display: none;
}

/* CONTENIDO */
.overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;                 /* 🔥 centra vertical */
  padding: 0 8%;
  display: flex;
  align-items: center;          /* 🔥 centro vertical */
  justify-content: flex-end;    /* 🔥 pegado a la derecha */
  color: white;
}

/* TEXTO */
.overlay-right {
  max-width: 500px;
  text-align: center;           /* 🔥 texto y botón centrados */
}

/* BOTÓN */
.btn-primary {
  padding: 14px 38px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #52bec0c3, #00ffffb2);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all 0.4s ease;
}

.btn-primary:hover {
  letter-spacing: 3px;
  transform: translateY(-4px);
}

/* =====================
   MOBILE
===================== */
@media (max-width: 768px) {

  .video-container {
    height: auto;
    padding: 80px 0;
  }

  .video-desktop {
    display: none;
  }

  .video-mobile {
    display: block;
  }

  .overlay {
    justify-content: center;
    text-align: center;
  }

  .overlay-right {
    max-width: 100%;
    text-align: center;
  }
}







/* ===============================
   SECCIÓN
================================ */
.catalog-section {
  width: 100%;

  display: flex;
  justify-content: center;
}



/* ===============================
   WRAPPER
================================ */
.catalog-wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
  transition: all 0.45s ease;
}

/* ===============================
   GRID IZQUIERDA
================================ */
.catalog-grid {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}


.catalog-item {
  width: 100%;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.catalog-item:hover {
  transform: scale(1.06);
}

.catalog-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
}

.catalog-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.catalog-modal-content {
  position: relative;
  max-width: 520px;
  width: 90%;
  animation: pushIn 0.45s ease;
}

.catalog-modal-content img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.45);
}

/* BOTÓN CERRAR */
.modal-close {
  margin: 24px auto 0;
  display: block;
  padding: 12px 32px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #52bec0c3, #00ffffb2);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* ===============================
   ESTADO ACTIVO
================================ */
.catalog-wrapper.active .catalog-grid {
  transform: translateX(-60px);
}

.catalog-wrapper.active .catalog-preview {
  opacity: 1;
  transform: translateX(0);
}
/* ===============================
   titulo
================================ */

.catalog-title-section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.catalog-title {
  font-size: clamp(18px, 5vw, 39px);
  font-weight: 900;
  text-align: center;
  color: #52bec0c3;
  letter-spacing: 1px;
}



/* ===============================
   RESPONSIVE
================================ */
@keyframes pushIn {
  from {
    transform: translateY(40px) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}









/* Introduccion */
.info-section {
  width: 100%;
  min-height: 300px; /* ← permite crecer con el texto animado */
  margin: 40px auto;
  display: flex;
  align-items: center;
  gap: 30px;
  background: linear-gradient(135deg, #EBEBEE, #EBEBEE);
  padding: 25px;
  backdrop-filter: blur(8px);
}

/* IMG */
.info-image {
  flex-shrink: 0;
}

.info-image img {
  width: 280px;
  height: auto;
  border-radius: 10px;
  display: block;
}


.info-text h2 {
  margin: 0 0 10px;
  color: #0000009e;
}

.info-text p {
  font-size: 18px;
  line-height: 1.5;
  color: #222;
}
.info-text {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ✅ reparte contenido */
}


@media (max-width: 768px) {
  .info-btn {
    justify-content: center; /* opcional: centrar en mobile */
  }
}


/* Tablets medianas */
@media (max-width: 1024px) {
  .info-section {
    gap: 20px;
    padding: 20px;
  }

  .info-image img {
    width: 240px;
  }

  .info-text p {
    font-size: 17px;
  }
}

/* Celulares y tablets */
@media (max-width: 768px) {
  .info-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .info-image,
  .info-text {
    width: 100%;
  }

  .info-image img {
    width: 70%;
    max-width: 260px;
    margin: 0 auto;
  }

  .info-text p {
    font-size: 16px;
  }
}

/* Celulares pequeños */
@media (max-width: 480px) {
  .info-image img {
    width: 90%;
  }

  .info-text p {
    font-size: 15px;
  }
}
.word {
  white-space: pre-line;
}












/* =========================
   CARRUSEL
========================= */
.carrusel-section {
  padding: 0;
  width: 100%;
  text-align: center;
}

.titulo-carrusel {
  color: #000;
  font-size: 35px;
  margin-bottom: 10px;
}

.carrusel-contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin: auto;
}

.carrusel {
  display: flex;
  width: 95%;
  overflow: hidden;
  scroll-behavior: smooth;
}

/* =========================
   TARJETAS
========================= */
.card-item {
  min-width: 240px;
  height: 460px;
  margin: 15px;
  padding: 12px;
  background: #EBEBEE;
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
  transition: 0.35s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.card-item:hover {
  transform: translateY(-8px) scale(1.05);
}

/* Imagen */
.card-img {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 10px;
}

/* Título */
.card-title {
  font-size: 20px;
  margin-bottom: 6px;
  font-weight: 800;
  color: #070707c6;
}

/* Descripción */
.card-desc {
  font-size: 14px;
  margin-bottom: 10px;
  color: #000;
  opacity: 0.85;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Etiquetas */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  max-height: 40px;
  overflow: hidden;
}

.tags span {
  background: rgba(255,255,255,0.6);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: bold;
  color: #000;
}

/* Precio */
.card-price {
  font-size: 20px;
  margin-bottom: 10px;
  color: #010e0fc3;
  font-weight: 900;
}

/* Botón */
.btn-ver {
  margin-top: auto;
  background: #52bec0c0;
  border: none;
  padding: 10px 22px;
  font-weight: 800;
  border-radius: 50px;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  transition: 0.3s;
}

.btn-ver:hover {
  background: #fff;
  color: #52BEC0;
  transform: scale(1.05);
}

/* =========================
   FLECHAS
========================= */
.flecha {
  position: absolute;
  background: none;
  border: none;
  color: #000000;
  font-size: 40px;
  cursor: pointer;
  padding: 30px;
  transition: 0.2s ease;
}

.flecha:hover {
  transform: scale(1.3);
}

.flecha-izq {
  left: -25px;
}

.flecha-der {
  right: -25px;
}

/* =========================
   RESPONSIVE
========================= */

/* Laptops y tablets */
@media (max-width: 1024px) {
  .card-item {
    height: 430px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .titulo-carrusel {
    font-size: 28px;
  }

  .carrusel {
    width: 100%;
    padding: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .card-item {
    min-width: 75%;
    height: 480px;
    margin: 0 10px;
    scroll-snap-align: center;
    transform: none;
  }

  .card-item:hover {
    transform: none;
  }

  .card-img {
    height: 160px;
  }

  .card-desc {
    -webkit-line-clamp: 4;
  }

  .btn-ver {
    width: 100%;
    border-radius: 10px;
  }

  .flecha {
    font-size: 28px;
    padding: 10px;
    opacity: 0.6;
  }

  .flecha-izq {
    left: 0;
  }

  .flecha-der {
    right: 0;
  }
}

/* Celulares */
@media (max-width: 480px) {
  .titulo-carrusel {
    font-size: 24px;
  }

  .card-item {
    min-width: 85%;
    height: 490px;
  }

  .card-img {
    height: 150px;
  }
}
/* =========================
   ETIQUETA PREMIUM (RIBBON)
========================= */
.card-item {
  position: relative;
  overflow: hidden; /* evita que se corte */
}

/* CONTENEDOR DEL RIBBON */
.card-item .ribbon {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 90px;   /* ↓ más pequeño */
  height: 90px;  /* ↓ más pequeño */
  pointer-events: none;
  z-index: 5;
}

/* CINTA */
.card-item .ribbon::before {
  content: "Oportunidad Top";
  position: absolute;
  width: 140%;
  height: 20px; /* ↓ más delgada */
  background: linear-gradient(45deg, #ff4747, #ffb144, #ff5353);
  transform: rotate(-50deg) translate(-45px, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;  /* ↓ texto pequeño */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

/* ESQUINAS */
.card-item .ribbon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  bottom: 0;
  left: 0;
  background: #cc3f47;
  box-shadow: 80px -80px #cc3f47;
}
/* =========================
   FILTROS DE CARRUSEL
========================= */
.filtros-carrusel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 35px;
}

.filtro-btn {
  padding: 8px 18px;
  border-radius: 30px;
  border: 2px solid #52BEC0;
  background: transparent;
  color: #000;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.filtro-btn:hover {
  background: #52BEC0;
  color: #fff;
}

.filtro-btn.active {
  background: #52BEC0;
  color: #fff;
}

/* =========================
   FIX DEFINITIVO PARA IMÁGENES
========================= */

.card-item {
  display: flex;
  flex-direction: column;
  width: 240px;
  min-width: 240px;
  height: 520px;            /* 🔥 un poco más alto */
  background: #EBEBEE;
  border-radius: 14px;
  overflow: hidden;
}


/* CONTENEDOR DE IMAGEN */
.card-item .card-img {
  width: 100%;
  height: 160px;             /* alto fijo de imagen */
  overflow: hidden;
  flex-shrink: 0;
}

/* IMAGEN */
.card-item .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 🔥 CLAVE */
  display: block;
}




/* Mapa */
.encuentranos-section {
  padding: 60px 0;
  width: 100%;
  background: linear-gradient(135deg, #EBEBEE, #EBEBEE);
}

.encuentranos-container {
  width: 85%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

/* TEXTO */
.encuentranos-texto {
  text-align: left;
  color: rgb(0, 0, 0);
}

.encuentranos-titulo {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px;
  border-left: 6px solid #145151c4;
  padding-left: 12px;
}

.encuentranos-desc {
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.9;
  margin-bottom: 30px;
}

.encuentranos-info p {
  font-size: 17px;
  margin: 8px 0;
}

.encuentranos-info strong {
  color: #179090c6;
}

/* MAPA */
.mapa-container {
  width: 100%;
  height: 350px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}

.mapa {
  border: none;
  width: 100%;
  height: 100%;
}

/* RESPONSIVE */
@media(max-width: 850px){
  .encuentranos-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .encuentranos-texto {
    text-align: center;
  }

  .encuentranos-titulo {
    border: none;
    padding-left: 0;
  }
}












/* =========================
   SECCIÓN FORMULARIO + MAPA
========================= */
.estimacion-form-section {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 50px;
  padding: 80px 60px;
  align-items: start; /* 🔑 evita estiramientos raros */
  position: relative; /* 🔑 ancla el contenido */
}

/* =========================
   FORMULARIO
========================= */
.estimacion-right {
  max-width: 900px;
  margin: 0 auto;
  background: #f7f7f9;
  padding: 40px;
  border-radius: 20px;
}

/* =========================
   MAPA – CONTENEDOR REAL
========================= */
.asesoria-mapa {
  width: 100%;
  position: relative;
  z-index: 1; /* 🔑 el mapa siempre abajo */
}

/* Leaflet */
#map {
  width: 100%;
  height: 480px;
  border-radius: 18px;
  overflow: hidden;
  background: #eaeaea;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1; /* 🔑 */
}


/* =========================
   TEXTO DEL FORMULARIO
========================= */
.estimacion-left {
  margin: 30px 0 40px;
}

.estimacion-left h2 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 10px;
}

.estimacion-left p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* =========================
   PROGRESO
========================= */
.progress-header {
  margin-bottom: 25px;
}

.step-text {
  font-size: 14px;
  color: #444;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 50px;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: #52BEC0;
  border-radius: 50px;
  transition: width 0.3s ease;
}

/* =========================
   BOTONES DE PASOS
========================= */
.steps-buttons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 35px;
}

.step-btn {
  padding: 10px;
  font-size: 13px;
  border-radius: 30px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: default;
}

.step-btn.active {
  background: #52BEC0;
  color: #fff;
  border-color: #52BEC0;
  
}



/* =========================
   CONTENIDO DEL PASO
========================= */
.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.step-header h3 {
  font-size: 22px;
}

.required-text {
  font-size: 13px;
  color: #777;
}

/* =========================
   FORMULARIO INTERNO
========================= */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

/* =========================
   PASO 4 – AMENIDADES
========================= */
.step-content .form-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-content .form-group label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
}

.step-content .form-group label:hover {
  border-color: #52BEC0;
  background: #f5fcfc;
}

.step-content input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #52BEC0;
}

/* =========================
   NAVEGACIÓN
========================= */
.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

/* =========================
   FIX DEFINITIVO BOTÓN FINALIZAR
========================= */
.form-navigation .btn-next {
  appearance: none;
  -webkit-appearance: none;

  padding: 12px 30px !important;
  border-radius: 30px !important;
  font-size: 14px !important;
  line-height: 1 !important;

  width: auto !important;
  height: auto !important;

  background: #52BEC0 !important;
  color: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* botón atrás */
.btn-back {
  background: #ccc;
  color: #333;
}

/* botón siguiente / finalizar */
.btn-next {
  background: #52BEC0;
  color: #fff;
}

.btn-next:hover {
  background: #4bb5b7;
}

.btn-back:hover {
  background: #bdbdbd;
}

.btn-next:active,
.btn-back:active {
  transform: scale(0.98);
}

/* =========================
   BOTONES NAVEGACIÓN – FIX FINAL
========================= */
.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

/* base común para AMBOS botones */
.form-navigation button {
  appearance: none;
  -webkit-appearance: none;

  padding: 12px 30px;
  border-radius: 30px;
  border: none;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  width: auto;
  height: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;

  outline: none;
  box-shadow: none;
}

/* botón atrás */
.form-navigation .btn-back {
  background: #ccc;
  color: #333;
}

/* botón siguiente / finalizar */
.form-navigation .btn-next {
  background: #52BEC0;
  color: #fff;
}

/* hover */
.form-navigation .btn-back:hover {
  background: #bdbdbd;
}

.form-navigation .btn-next:hover {
  background: #4bb5b7;
}

/* active */
.form-navigation button:active {
  transform: scale(0.98);
}

/* quitar borde negro definitivo */
.form-navigation button:focus,
.form-navigation button:focus-visible {
  outline: none;
  box-shadow: none;
}
/* =========================
   HEADER ESTIMACIÓN
========================= */

.estimacion-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px auto;
  padding: 0 20px;
}

.estimacion-titulo {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 18px;
  color: #1e1e1e;
  line-height: 1.2;
}

.estimacion-descripcion {
  font-size: 17px;
  color: #555;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
}

/* =========================
   RESPONSIVE
========================= */

/* Tablets */
@media (max-width: 992px) {
  .estimacion-titulo {
    font-size: 34px;
  }

  .estimacion-descripcion {
    font-size: 16px;
  }
}

/* Móviles */
@media (max-width: 600px) {
  .estimacion-header {
    margin-bottom: 35px;
  }

  .estimacion-titulo {
    font-size: 26px;
  }

  .estimacion-descripcion {
    font-size: 15px;
    line-height: 1.6;
  }
}




/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .estimacion-form-section {
    grid-template-columns: 1fr;
  }

  #map {
    height: 360px;
    margin-top: 30px;
  }

  .steps-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .estimacion-left h2 {
    font-size: 28px;
  }
}
/* =========================
   RESPONSIVE MEJORADO PRO
========================= */

/* ====== 1200px ====== */
@media (max-width: 1200px) {
  .estimacion-form-section {
    gap: 40px;
    padding: 60px 40px;
  }

  .estimacion-right {
    padding: 35px;
  }
}

/* ====== 1024px (laptops pequeñas) ====== */
@media (max-width: 1024px) {
  .estimacion-form-section {
    grid-template-columns: 1fr;
  }

  .asesoria-mapa {
    order: 2;
  }

  .estimacion-right {
    order: 1;
  }

  #map {
    height: 420px;
    margin-top: 30px;
  }
}

/* ====== 900px ====== */
@media (max-width: 900px) {

  .estimacion-form-section {
    padding: 50px 30px;
  }

  .steps-buttons {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ====== 768px (tablet) ====== */
@media (max-width: 768px) {

  .estimacion-left h2 {
    font-size: 28px;
  }

  .estimacion-left p {
    font-size: 15px;
  }

  .estimacion-right {
    padding: 30px;
  }

  #map {
    height: 360px;
  }

  .step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .steps-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-navigation {
    flex-direction: column;
    gap: 15px;
  }

  .form-navigation button {
    width: 100%;
  }
}

/* ====== 600px ====== */
@media (max-width: 600px) {

  .estimacion-form-section {
    padding: 40px 20px;
  }

  .estimacion-right {
    padding: 25px;
    border-radius: 16px;
  }

  #map {
    height: 300px;
  }

  .steps-buttons {
    grid-template-columns: 1fr;
  }

  .step-btn {
    font-size: 12px;
    padding: 8px;
  }

  .progress-bar {
    height: 5px;
  }

  .step-header h3 {
    font-size: 18px;
  }
}

/* ====== 480px (móvil pequeño) ====== */
@media (max-width: 480px) {

  .estimacion-left h2 {
    font-size: 22px;
  }

  .estimacion-left p {
    font-size: 14px;
  }

  .estimacion-right {
    padding: 20px;
  }

  #map {
    height: 260px;
  }

  .form-navigation button {
    font-size: 13px;
    padding: 12px 20px;
  }

  .step-content .form-group label {
    padding: 8px 10px;
    font-size: 14px;
  }

  .step-content input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }
}










/* =========================
   OVERLAY
========================= */
.alt-estimacion-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.alt-estimacion-hidden {
  display: none;
}

/* =========================
   HOJA A4
========================= */
.alt-estimacion-hoja {
  position: relative;
  background: #fff;
  width: 595px;
  min-height: 842px;
  padding: 50px;
  box-sizing: border-box;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* =========================
   LOGO
========================= */
.alt-estimacion-logo {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 140px;
  z-index: 2;
}

/* =========================
   HEADER
========================= */
.alt-estimacion-header h1 {
  font-size: 22px;
  margin: 0 0 5px;
}

.alt-estimacion-header h2 {
  font-size: 14px;
  font-weight: normal;
  margin: 0 0 10px;
}

/* =========================
   PRECIO
========================= */
.alt-estimacion-precio {
  font-size: 28px;
  font-weight: bold;
  color: #52BEC0;
  margin: 15px 0 20px;
}

/* =========================
   DISCLAIMER
========================= */
.alt-estimacion-disclaimer {
  font-size: 12px;
  color: #666;
  margin-top: 25px;
}

/* =========================
   BOTONES
========================= */
.alt-estimacion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
}

/* =========================
   WATERMARK VISUAL
========================= */
.alt-estimacion-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 120px;
  font-weight: 800;
  letter-spacing: 8px;
  color: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}





/*sin marca de agua */
.alt-estimacion-btn-secundario {
  background: #444;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
}

#formSinMarca {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

#formSinMarca input {
  padding: 10px;
  font-size: 14px;
}








/* SECCIÓN ASESORIAS ------ lon que ofresemos*/
.ofrecemos-section {
  width: 90%;
  margin: 100px auto;
  text-align: center;
}

.ofrecemos-titulo {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 50px;
  color: #000000;
  text-shadow: 0px 2px 6px rgba(0,0,0,0.15);
}

.ofrecemos-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.ofrecemos-item {
  width: 230px;
  text-align: center;
  transition: 0.4s;
}

.ofrecemos-item:hover {
  transform: translateY(-10px);
}

.ofrecemos-icono {
  width: 150px;
  height: 150px;
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EBEBEE, #EBEBEE);
  box-shadow: 0px 4px 12px rgba(13, 194, 244, 0.3);
  transition: 0.4s ease;
}

.ofrecemos-item:hover .ofrecemos-icono {
  transform: scale(1.08);
  box-shadow: 0px 6px 16px 00FFFF;
}

.ofrecemos-icono img {
  width: 65px;
  height: 65px;
}

.ofrecemos-item h3 {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 700;
}

.ofrecemos-item p {
  margin-top: 6px;
  font-size: 16px;
  color: #333;
}

a, a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}


.asesorias-section {
  width: 90%;
  margin: 120px auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

.asesorias-contenido {
  width: 50%;
}

.asesorias-contenido h2 {
  font-size: 42px;
  font-weight: 900;
  color: #000000;
  margin-bottom: 18px;
  text-shadow: 0px 2px 6px rgba(0,0,0,0.15);
}

.asesorias-contenido p {
  font-size: 19px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 25px;
}

.btn-primary {
  padding: 14px 38px;
  border-radius: 50px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #52bec0c3, #52bec0c3);
  color: #fff;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;

  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all 0.4s ease;
}

.btn-primary:hover {
  letter-spacing: 3px;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(47,129,237,0.6);
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@media (max-width: 480px) {
  .btn-primary {
    padding: 12px 30px;
    font-size: 14px;
  }
}
.btn-primary.asesoria {
  font-size: 16px;
  padding: 16px 44px;
}


.asesorias-img {
  width: 50%;
}

.asesorias-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.28);
  object-fit: cover;
}


@media(max-width:950px){
  .asesorias-section{
    flex-direction: column-reverse;
    text-align: center;
  }

  .asesorias-contenido, .asesorias-img{
    width: 100%;
  }
}
.modal-asesoria {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-contenido {
  background: #fff;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  position: relative;
}

.cerrar {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  font-size: 22px;
}

.modal-contenido h2 {
  text-align: center;
  margin-bottom: 20px;
}

.fila {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.fila input,
.fila select {
  flex: 1;
}


input, textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

textarea {
  resize: none;
  height: 80px;
  margin-bottom: 15px;
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  background: #000000;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .fila {
    flex-direction: column;
  }
}
select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: white;
  font-size: 14px;
}












/* =========================
   SECCIÓN ÉXITOS
========================= */
.exito-section {
  width: 90%;
  margin: 120px auto;
  text-align: center;
}

.exito-titulo {
  font-size: 40px;
  font-weight: 800;
  color: #000;
  margin-bottom: 40px;
  text-shadow: 0px 2px 6px rgba(0,0,0,0.15);
}

/* =========================
   CARRUSEL
========================= */
.exito-carrusel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exito-carrusel {
  display: flex;
  gap: 40px;
  overflow: hidden;
  scroll-behavior: smooth;
  width: 100%;
  padding: 20px 0;
}

/* =========================
   TARJETAS
========================= */
.exito-card {
  min-width: 310px;
  background: linear-gradient(135deg, #EBEBEE, #EBEBEE);
  border-radius: 14px;
  padding-bottom: 25px;
  transition: 0.3s ease;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}


.exito-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 6px 18px rgba(0,0,0,0.28);
}

.exito-card img {
  width: 100%;
  height: 200px;
  border-radius: 14px 14px 0 0;
  object-fit: cover;
  cursor: pointer;
}



.exito-card h3 {
  font-size: 22px;
  margin: 18px 15px;
  color: #000;
  font-weight: 700;
  flex-grow: 1; /* iguala alturas aunque el texto varíe */
}

.exito-btn {
  margin: 0 auto;
  padding: 10px 30px;
  background-color: #52bec0b7;
  color: #ffffffbe;
  font-size: 17px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: 0.4s;
}

.exito-btn:hover {
  transform: translateY(-3px);
  background-color: #52BEC0;
}

/* =========================
   FLECHAS
========================= */
.exito-flecha {
  position: absolute;
  background: none;
  border: none;
  font-size: 50px;
  cursor: pointer;
  color: #000;
  padding: 10px 20px;
  transition: 0.2s;
  z-index: 5;
}

.exito-flecha:hover {
  transform: scale(1.3);
}

.exito-flecha.izq {
  left: -30px;
}

.exito-flecha.der {
  right: -30px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .exito-carrusel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .exito-card {
    scroll-snap-align: center;
    min-width: 85%;
  }

  .exito-flecha {
    display: none;
  }
}










/* ===== FOOTER ===== */
.footer {
  width: 100%;
  background: #000;
  color: #fff;
  padding: 25px 0 15px;
  font-family: 'Gotham', sans-serif;
}

/* CONTENEDOR */
.footer-contenido {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

/* COLUMNAS */
.footer-col {
  width: 260px;
  font-size: 14px;
}

/* ===== BRAND ===== */
.footer-brand img {
  width: 85px;
  margin-bottom: 10px;
  border-radius: 10%;
}

.footer-brand h3 {
  font-size: 18px;
  margin: 0;
}

.footer-brand .slogan {
  display: block;
  font-size: 13px;
  color: #00FFFF;
  margin-bottom: 8px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.4;
  color: #ccc;
}

/* TITULOS */
.footer-col h4 {
  font-size: 16px;
  margin-bottom: 10px;
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin: 6px 0;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #fff;
}

/* CONTACTO */
.footer-col p {
  margin: 6px 0;
  color: #ccc;
}

/* COPY */
.footer-copy {
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .footer-contenido {
    justify-content: center;
    text-align: center;
  }

  .footer-col {
    width: 100%;
  }

  .footer-brand img {
    margin: auto;
  }
}










/* =========================
 REDES SOCIALES
========================= */
.social-bar {
  position: fixed;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 999;
}

/* IZQUIERDA */
.social-left {
  left: 20px;
}

/* DERECHA */
.social-right {
  right: 20px;
}

/* ICONOS */
.social-icon {
  width: 25px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;   /* ✅ totalmente transparente */
  border-radius: 0;           /* opcional: elimina forma circular */
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: none;           /* ✅ elimina halo/blanco */
}


.social-icon img {
  width: 40px;
  height: 40px;
  transition: 0.3s;
}

/* HOVER */
.social-icon:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

.social-icon:hover img {
  transform: scale(1.15);
}

/* 🎵 TIKTOK – fondo blanco */
.social-icon.tiktok {
  background: transparent;
  box-shadow: none;
}
/* =========================
   GIF DESTACADO
========================= */

.social-gif {
  width: 75px;
  height: 75px;
  animation: pulseGlow 2s infinite ease-in-out;
}

.social-gif img {
  width: 75px;
  height: 75px;
}

/* Hover más agresivo */
.social-gif:hover {
  transform: scale(1.15);
}

/* Animación tipo "latido premium" */
@keyframes pulseGlow {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255,255,255,0.4));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.7));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255,255,255,0.4));
  }
}



/* =========================
   WHATSAPP FLOTANTE
========================= */
.floating_btn {
  position: fixed;
  bottom: 40px;
  right: 30px;
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* BOTÓN */
.contact_icon {
  background-color: #52BEC0;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  box-shadow: 0 0 0 0 #52BEC0;
  animation: pulsing 1.4s infinite;
  transition: transform 0.3s ease;
}

.contact_icon:hover {
  transform: scale(1.12);
}

/* TEXTO */
.text_icon {
  margin: 0;              /* 🔥 elimina margen por defecto */
  line-height: 1.1;       /* 🔥 acerca las líneas */
  color: #555555;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Gotham', sans-serif;
}

/* ANIMACIÓN PULSO */
@keyframes pulsing {
  0% {
    box-shadow: 0 0 0 0 #52BEC0;
  }
  70% {
    box-shadow: 0 0 0 22px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* =========================
   RESPONSIVE
========================= */

/* Tablets */
@media (max-width: 768px) {
  .floating_btn {
    bottom: 30px;
    right: 20px;
  }

  .contact_icon {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }
}

/* Celulares */
@media (max-width: 480px) {
  .floating_btn {
    bottom: 25px;
    right: 15px;
  }

  .contact_icon {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }

  .text_icon {
    font-size: 12px;
  }
}


/* =========================
   RESPONSIVE
========================= */

/* Tablets */
@media (max-width: 768px) {
  .social-bar {
    bottom: 30px;
    gap: 14px;
  }

  .social-left {
    left: 18px;
  }

  .social-right {
    right: 18px;
  }

  .social-icon {
    width: 40px;
    height: 40px;
  }

  .social-icon img {
    width: 46px;
    height: 46px;
  }
}

/* Celulares */
@media (max-width: 480px) {
  .social-bar {
    bottom: 25px;
    gap: 10px;
  }

  .social-left {
    left: 12px;
  }

  .social-right {
    right: 12px;
  }

  .social-icon {
    width: 48px;
    height: 48px;
  }

  .social-icon img {
    width: 44px;
    height: 44px;
  }
}

/* Celulares pequeños */
@media (max-width: 360px) {
  .social-icon {
    width: 34px;
    height: 44px;
  }

  .social-icon img {
    width: 42px;
    height: 42px;
  }
}