.cont--visualizador{
   width: 100%;
   flex-wrap: wrap;
  margin: 50px 0;
  padding: 25px;
}

.notas--interes a{
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 20px 5px;
 
border-radius: 0 0 25px 25px;
overflow: hidden;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);


  img{
    width: 100%;
    aspect-ratio: 1/0.6;
    object-fit: cover;
    transition: 0.3s ease;
  }
}
.notas--interes a img:hover{
  filter: brightness(1.1);
}
.stretch{
  align-items: stretch;

  position: relative;
}
.stretch .informe{
  position: relative;
 
}
.cont--visualizador .informe{
  max-width: 700px;
  
 
  
}
.cont--visualizador .informe  img{
 width: 100%;
height: 100%;
 object-fit: cover;

}
.stretch .informe:after{
  content: "";
  width: 100%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: 0;
  /* z-index: 10; */
  background:  radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%,rgba(255, 255, 255, 1) 100% ) ;
}





.visualizador {
    max-width: 425px;
    width: 100%;
    aspect-ratio: 1/1.2;
    
    position: relative;
    padding: 10px 0;
    /* h2{
      font-weight: 400; 
      
    }
    h3{
      font-weight: 300;
      
    } */
    
 }
.scene {
    width: 100%;
    height: 100%;
    perspective: 800px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
 }
 .buttons {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
 }
.buttons button {
    width: 50px;
    height: 100%;
    border: unset;
    background: var(--gradient01);
    transition: filter 0.2s ease-in-out; 
    clip-path: polygon(20%0%,100%0%,80%50%,100%100%,20%100%,0%50%);
 }
.buttons button:active {
    filter: brightness(1.5); 
 }

 #right-button {
    transform: rotate(180deg);
 }
.box  {
    will-change: transform;
    width: 100%;
    height: 95%;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    position: relative;
    transform: translateZ(-400px) rotateY(0deg);
 }

  .box .card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    backface-visibility: hidden;
    overflow: hidden;
    padding: 15px;
    
    background: var(--cuadricula);
  
  
   
 }

/* ============================================ */
.animacion{
   width: 100%;
   height: 50px;
   
   position: relative;
   overflow: hidden;
}
.animacion .lolo{
  background-color: rgba(0, 128, 0, 0.435);
   width: 1920px;
   height: 50px;
   position: absolute;
   top: 0;
   right: 0;
    clip-path: path("M0 26 Q1850 26 1850 26 1850 30 1850 30 1870 30 1870 30 1870 50 1870 50 1880 50 1880 50 1880 30 1880 30 1900 30 1900 30 1900 20 1900 20 1880 20 1880 20 1880 0 1880 0 1870 0 1870 0 1870 20 1870 20 1850 20 1850 20 1850 24 1850 24 0 24 0 24 0 26 0 26");
    
}
.animacion .lolo:after{
  content: "";
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
background: linear-gradient(to left, transparent, white, transparent);
  animation: cruz 4s linear infinite;
}
@keyframes cruz{
  0%{transform: translate(0);}
  100%{transform: translate(1950px);}
}

/* =============================================== */


.card01 {
   transform: rotateY(0deg) translateZ(400px);
 }
 .card02 {
   transform: rotateY(60deg) translateZ(400px);
 }
 .card03 {
   transform: rotateY(120deg) translateZ(400px);
 }
 .card04 {
   transform: rotateY(180deg) translateZ(400px);
 }
 .card05 {
   transform: rotateY(240deg) translateZ(400px);
 }
 .card06 {
   transform: rotateY(300deg) translateZ(400px);
 }
 
 /* ============================================== */
 .cont--visualizador .buttons a{
  background: var(--gradient01);
  width: 200px;
  margin: 0 -5px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(5%0%,95%0%,100%50%,95%100%,5%100%,0%50%);
  letter-spacing: 2px;
  transition: 0.3s ease;
 }
 .cont--visualizador a:hover{
  font-weight: 600;
 }
 /* ==================================== */
 .itemizado{
width: 100%;
max-width: 450px;
display: flex;
gap: 20px;
padding: 30px;
 }
 .itemizado .flex--{
  transform: scale(1.5);
 }

 /* ======= */
 .ver--mas{
 letter-spacing: 2px;
 padding: 10px;
 border-radius: 10px;
 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
 transition: 0.3s ease;
 }
 .ver--mas:hover{
  background-color: azure;
 }
/* =estilos==servicios */
.services-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.services-section .card{
  padding-top: 20px;
}


/* Estilo para cada tarjeta */
.card{

  display: flex;
  flex-wrap: wrap; /* Asegura que se ajuste en pantallas más pequeñas */
  width: 100%;
  border: 1px solid #ddd;
  /* border-radius: 8px; */
  overflow: hidden;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

/* Mitad de la tarjeta con la imagen */
.card img ,
card-content img{
  width: 50%; /* Ocupa la mitad del ancho */
 aspect-ratio: 1/0.8;
  object-fit: cover; /* Asegura que la imagen se recorte bien */
}

/* Mitad de la tarjeta con el contenido */
.card-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  width: 50%; /* Ocupa la otra mitad */
  background-color: #fff;
}


/* Título y párrafo dentro del contenido */
.card-content h2 {
  margin: 0 0 10px;
  /* font-size: 20px; */
  color: #333;
}

.card-content p {
  margin: 0;
  /* font-size: 16px; */
  color: #555;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
  .card {
    flex-direction: column; /* Cambia a formato vertical */
  }

  .card img, .card-content {
    width: 100%; /* Ocupan todo el ancho */
  }
}