.yoRedondo {
    border-radius: 100%;
}
/* Estilos adaptados para el acordeón */
.accordion {
    width: 100%;
    margin: 30px 0; /* Aumentamos un poco el margen superior/inferior */
}

.accordion-item {
    margin-bottom: 15px; /* Un poco más de espacio entre items */
    border-bottom: none; /* Eliminamos el borde inferior gris claro que no encaja */
    background: rgba(255, 255, 255, 0.1); /* Fondo semi-transparente similar a .benefit */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil como .container */
    border-radius: 12px; /* Bordes redondeados consistentes con .benefit */
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Sombra similar a .benefit */
    transition: background 0.3s ease; /* Transición suave para hover */
}

.accordion-item:hover {
    background: rgba(255, 255, 255, 0.15); /* Ligeramente más claro al pasar el ratón */
}

.accordion-title {
    cursor: pointer;
    padding: 15px; /* Padding consistente con otros elementos */
    background-color: transparent; /* El fondo ahora está en .accordion-item */
    border: none;
    /* Quitamos el border-radius de aquí, ya está en .accordion-item */
    font-weight: bold;
    color: white; /* Texto blanco por defecto */
    font-size: 1.1em; /* Tamaño ligeramente mayor */
    text-align: left; /* Alineamos a la izquierda para el título y el icono */
    position: relative; /* Para posicionar el icono */
    width: 100%; /* Asegura que ocupa todo el ancho */
    box-sizing: border-box; /* Incluye padding en el ancho */
}

/* Icono indicador (+/-) */
.accordion-title::after {
    content: '+'; /* Icono por defecto (cerrado) */
    color: gold; /* Color dorado de acento */
    font-size: 1.5em;
    position: absolute;
    right: 15px; /* Posiciona a la derecha */
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-title::after {
    content: '−'; /* Icono cuando está abierto */
    transform: translateY(-50%) rotate(180deg); /* Opcional: pequeña rotación */
}

/* Título activo (opcional, si quieres resaltarlo más) */
.accordion-item.active .accordion-title {
    color: gold; /* Cambia el color del título a dorado cuando está activo */
}


.accordion-content {
    display: none; /* Mantenemos oculto por defecto */
    padding: 0 15px 15px 15px; /* Padding (sin padding superior para que no se separe del título) */
    background-color: transparent; /* Sin fondo propio, hereda del item */
    border: none; /* Sin borde propio */
    color: white; /* Asegura texto blanco */
    text-align: left; /* Alineamos contenido a la izquierda */
    line-height: 1.6; /* Espaciado de línea como .info */
    font-size: 18px; /* Tamaño de fuente consistente con .info */
}

/* Estilo para párrafos dentro del acordeón, si es necesario */
.accordion-content p {
    font-size: 18px; /* Hereda o define explícitamente */
    margin-bottom: 10px; /* Espacio entre párrafos */
}
.accordion-content p:last-child {
    margin-bottom: 0; /* Sin margen extra en el último párrafo */
}


.accordion-item.active .accordion-content {
    display: block; /* Mostramos el contenido cuando el item está activo */
}

.responsive-youtube-iframe {
    min-width: 500px;  /* Tu ancho mínimo deseado */
    max-width: 100%;   /* Se expandirá hasta el 100% del contenedor */
    width: 560px;       /* Intenta ocupar el 100% por defecto, limitado por max-width */
    /* Consideración sobre la altura: */
    /* height: 315px; */ /* Puedes mantener la altura fija si quieres... */
    /* O hacerla responsiva también (requiere un contenedor extra a veces) */
    height: auto; 
    aspect-ratio: 16 / 9; /* Mantiene la proporción 16:9 típica de video */ 
}

@media (max-width: 768px) { 
    .super {
        /* Hacemos la fuente del h1 aún más pequeña */
        font-size: 1.1rem; /* Ajusta este valor */
      }
    
      .lead {
        /* Volvemos al tamaño de fuente casi estándar o un poco más */
        font-size: 0.8rem; /* Tamaño de párrafo normal */
      }
  }
  
  /* Opcional: Para pantallas extra pequeñas (ej. móviles en vertical) */
  @media (max-width: 576px) {
    .super {
      /* Hacemos la fuente del h1 aún más pequeña */
      font-size: 1.1rem; /* Ajusta este valor */
    }
  
    .lead {
      /* Volvemos al tamaño de fuente casi estándar o un poco más */
      font-size: 0.8rem; /* Tamaño de párrafo normal */
    }
  }