.about-section {
  background: #fff
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center
}
.about-visual {
  position: relative;
  z-index: 1;
}
.about-image-placeholder {
   height: 560px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #173A59, #081927);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 45px;
  overflow: hidden;
  position: relative;
}
.about-image-placeholder:before {
   content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 105%;
  height: 66%;
  border-bottom: 2px solid rgba(201, 162, 39, 0.6);
  border-left: 2px solid rgba(201, 162, 39, 0.6);
  border-bottom-left-radius: 130px;
  z-index: 2;
  pointer-events: none;
}
.circle-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;       /* Ocupa todo el ancho del recuadro */
  height: 65%;       /* Baja hasta cubrir más de la mitad de la tarjeta */
  object-fit: cover; /* Evita que la foto se deforme */
  z-index: 1;        /* Se queda al fondo */
  filter: none;      /* Totalmente clara y limpia, sin filtros oscuros */
  
  /* Corte circular moderno solo en la esquina inferior izquierda 
     para un look estilizado que no tape las letras inferiores */
  border-bottom-left-radius: 120px; 
  
}

/* Asegura que los textos sigan viéndose por encima de la imagen */
.about-image-placeholder span,
.about-image-placeholder strong {
  position: relative;
  z-index: 3;
}
.about-badge strong,
.about-badge span {
  position: relative;
  z-index: 11;
  color: var(--color-primary) !important; /* Fuerza el color oscuro para contraste */
}
.about-image-placeholder span {
  color: var(--color-accent);
  letter-spacing: .2em;
  font-size: .7rem
}
.about-image-placeholder strong {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  line-height: 1.05;
  margin-top: 8px
}
.about-badge {
  position: absolute;
  right: -25px;
  bottom: 35px;
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  
  /* IMPORTANTE: z-index alto y position relative/absolute en el padre 
     para que el texto "Experiencias personalizadas" flote al frente */
  z-index: 10; 
}
.about-badge strong {
  font-size: 1.7rem
}
.about-badge span {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2
}
.about-copy p {
  color: var(--color-gray);
  margin: 18px 0
}
.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px
}
.about-points div {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  display: flex;
  gap: 12px
}
.about-points strong {
  color: var(--color-accent)
}
.about-points span {
  font-size: .85rem;
  font-weight: 700
}
@media(max-width:850px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 45px
  }
  .about-image-placeholder {
    height: 420px
  }
  .about-badge {
    right: 10px
  }
}
@media(max-width:600px) {
  .services-grid {
    grid-template-columns: 1fr
  }
  /* NUEVA REGLA MÓVIL: Encoge el círculo y la imagen en pantallas chicas */
  .about-image-placeholder:before,
  .circle-img {
    width: 280px;
    height: 280px;
    margin: -30px 0 0 40px;
  }
}
/* =========================================================
   SOLUCIÓN AL SOLAPAMIENTO DEL MODAL
========================================================= */

/* 1. Elevamos el modal por encima de cualquier otra sección de la página */
.modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    
    /* El valor !important rompe la "inspección de aislamiento" de CSS */
    z-index: 999999 !important; 
    
    justify-content: center;
    align-items: center;
}

/* 2. Establecemos un control base controlado para la sección Quiénes Somos */
.about-section {
    position: relative;
    z-index: 2; /* Suficiente para la jerarquía normal de la página */
}

/* 3. Evitamos que los contenedores hijos compitan con valores tridimensionales infinitos */
.about-visual {
    position: relative;
    z-index: 3; /* Mantiene su orden interno sobre el fondo blanco */
}