body {
        max-width: 100%;
        font-family: "Arial,Helvetica,san-serif";
         font-size:18px;
        background-color: #ffffff;
        overflow-x: hidden;  /* Evitar desbordamiento horizontal */
          display: flex;
        flex-direction: column;
        min-height: 100vh;
  }
    
  .container{
      width:100%;
      max-width:1200px;
      margin:0 auto;
  }
    
  .contenido {
          flex: 1;
          padding: 20px;
  }
    
  .footer1 {
      color: white;
      text-align: center;
      padding: 10px;
  }
        
  h1,h2,h3,h4,h5,h6{
        font-family: Arial,Helvetica,san-serif;
        font-size:18px;	
  }	

  .menufijo{ 
     width:100%;
     height:180px;
     position:fixed;
     background:white;
     z-index:50;
  }
    
    .menufijo a{
      color:black;
      text-decoration:none;
    }
    
    .menufijo a:hover{
      color:red;
    }
    
    .fondo{
    background:url('../images/carruselprincipal/fondop.png');
    background-size:100%;
    width:100%;
    border:0px solid red;
    }
    
    .imgsola{
     position:absolute;
     float:right;
     margin-top:-350px;
     right:18%;
     text-align:center;
     z-index:10;
    }
    
    .imgsola img{
     border:10px solid white;
     border-radius:5px;
     width:460px;
    }
    
    @media(max-width:1800px){
      .imgsola{
     margin-top:-350px;
      }
    }
    
    @media(max-width:800px){
      .imgsola{
      position:relative;
      float:none;
      margin:0 auto;
      right:0;
      }
    }
    
    .menudisplay2{
      display:none;
    }
    
    table {
            width: 100%;
            border-collapse: collapse;
            font-family:Arial,Helvetica,sans-serif;
            font-size:18px;
        }
            
  .table1 {
       width: 100%;
       border-collapse: collapse;
   }
    
   @media (max-width: 995px) {
               .table1 td {
                    padding: 4px;
                    display: block;
                    width: auto;
                    box-sizing: border-box;
                }
                .menudisplay{
                 display:none;
                }
                .menudisplay2{
                 display:block;
                }
    }
            
    .fade-in-image {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s ease, transform 1.5s ease;
    }
    
    .fade-in-image.visible {
      opacity: 1;
      transform: translateY(0);
    }
            
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .carousel-container {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 5% 5% 5% 15%;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
    }
    
    @media(max-width:800px){
      .carousel-container{
        margin: 150px auto 5px auto;
      }
    }
    
    .carousel {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 70%; /* Esto mantiene el aspect ratio 2:1 */
    }
    
    .carousel-slide {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 1s ease-in-out;
      pointer-events: none; /* ? evita clics mientras no est� activo */
      z-index: 0;
    }
    
    .carousel-slide.active {
      opacity: 1;
      pointer-events: auto; /* ? permite clics cuando est� activo */
      z-index: 1;
    }
    
    .carousel-slide:not(.active) a {
        pointer-events: none !important;
    }
    
    .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Esto asegura que la imagen cubra todo el espacio sin distorsionarse */
        display: block;
    }
    
    .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        z-index: 2;
    }
    
    /* Hacer los botones m�s peque�os en pantallas peque�as */
    @media (max-width: 768px) {
        .carousel-button {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }
    }
    
    @media (max-width: 480px) {
        .carousel-button {
            width: 25px;
            height: 25px;
            font-size: 12px;
        }
    }
    
    .carousel-button:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    .prev {
        left: 10px;
    }
    
    .next {
        right: 10px;
    }
    
    .dots-container {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 2;
    }
    
    .dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    /* Hacer los puntos m�s peque�os en pantallas peque�as */
    @media (max-width: 480px) {
        .dots-container {
            gap: 6px;
        }
        
        .dot {
            width: 8px;
            height: 8px;
        }
    }
    
    .dot.active {
        background-color: white;
    }
    
    .fade {
        display: block;
    }
    
    .slide-link {
      display: block;
      width: 100%;
      height: 100%;
    }
    
    .carousel-slide a,
    .carousel-slide a img {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: auto;
    }
    
    .fade-in-image {
      opacity: 0;
      width:200px;
      border-radius:50%;
      transform: translateY(30px);
      transition: opacity 1s ease, transform 1.5s ease;
    }
    
    .fade-in-image.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .scroll-text {
      opacity: 0;
      transform: translateX(-50px); /* Empieza 50px a la izquierda */
      transition: opacity 1s ease, transform 1s ease;
    }
    
    .scroll-text.visible {
      opacity: 1;
      transform: translateX(0); /* Se mueve a su posici�n original */
    }
    
    .responsive2-text {
      font-size: clamp(9px, 1.3vw, 18px);
    }


    .fade-in-image2 {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s ease, transform 1.5s ease;
      border-radius:5px;
    }
    
    .fade-in-image2.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .flotantes{
     position:absolute;
     font-size:20px;
     background:white;
     width:200px;
     border-radius:5px;
     margin-top:-40px;
     z-index:5;
     margin-left:110px;
    }
    
    .biografia {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.5s ease;
    }
    
    .biografia.visible {
      max-height: 100%; /* Ajusta seg�n lo que necesite tu contenido */
      opacity: 1;
      margin-bottom: 15px; /* Si quieres separar */
    }
    
    .btretorno{
       background:#AB569D;
      padding:15px;
      width:150px;
      border:none;
      color:white;
      margin:15px 0;
      border-radius:7px;
    }
    
    .btretorno:hover{
       transition:0.5s;
       background:black;
       cursor:pointer;
    }
    
    .selectionm:hover{
      color:red;
    zoom:105%;
    text-decoration:underline}


    .profile-pic {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      padding: 4px;
      background: conic-gradient(
        from 0deg,
        #d12a5c,
        #8a2be2,
        #d12a5c,
        #8a2be2
      );
      cursor:pointer;
    }
    
    .profile-pic2 {
      position:relative;
      width:100%;
      max-width: 250px;
      min-height: 50px;
      border-radius: 50px;
      padding: 2px; /* Espacio para el borde */
      background: conic-gradient(
        from 0deg,
        #d12a5c,
        #8a2be2,
        #d12a5c,
        #8a2be2
      ); 
      cursor:pointer;  
      color:black;
      align-items:center;
      margin-top:-50px;
    }
    
    .profile-pic img {
      width:100%;
      height:100%;
      border-radius: 50%;
      display: block;
    }
    
    .lineardegradado{
    width:100%;
    height:3px;
    border:none;
    background: linear-gradient(to right, #d12a5c, #8a2be2, #d12a5c, #8a2be2);
    margin: auto 0;
    }
    
    .cambiar{
     display:block;
    }
    .cambiar2{
     display:none;
    }
    
    @media(max-width:995px){
    .cambiar{
     display:none;
    }
    .cambiar2{
     display:block;
    }
    }