/* Contenedor general de las persianas */
.persiana-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Cada uno de los bloques/módulos */
.persiana-item {
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.persiana-item:hover {
  border-color: #4a0505;
  box-shadow: 0 6px 18px rgba(74, 5, 5, 0.1);
  transform: translateY(-1px);
}

/* Encabezado del segmento donde se hace click */
.persiana-header {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  background-color: #4a0505; 
  color: #b56464;
  user-select: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.persiana-item.active .persiana-header {
  background-color: #700b0b; 
  border-bottom: 2px solid #f1c40f; 
}

.persiana-header .icon {
  font-size: 1.5rem;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.persiana-item.active .persiana-header .icon {
  transform: scale(1.15);
}

.persiana-header h2 {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.persiana-item:hover .persiana-header h2 {
  color: #ffcc00; 
}

.persiana-item.active .persiana-header h2 {
  color: #f1c40f; 
}

/* ==========================================================================
   MECANISMO DE DESPLIEGUE REACTIVO
   ========================================================================== */
.persiana-content {
  max-height: 0;
  overflow: hidden; /* Vital para que el motor JS anime desde 0 hasta el scrollHeight */
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

/* Espaciado y tipografía interna */
.inner-content {
  padding: 30px 24px;
  color: #ffffff;
  line-height: 1.7;
  font-family: 'Segoe UI', sans-serif;
}

.inner-content h1 {
  font-size: 1.6rem;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: 700;
  border-bottom: 1px solid rgba(74, 5, 5, 0.1);
  padding-bottom: 8px;
}

/* Control responsivo para videos */
.video-responsive {
  position: relative;
  width: 100%;
  max-width: 560px; 
  margin: 15px auto;
  aspect-ratio: 16 / 9; 
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}