/* =========================
   VARIABLES
========================= */
:root{
  --fucsia:#ff00aa;
  --lima:#32ff00;
}

/* =========================
   HERO
========================= */
.taller-hero{
  text-align:center;
  padding:50px 20px 70px;
  max-width:900px;
  margin:auto;
}

.pretitle{
  color:#777;
  margin-bottom:10px;
  font-size:0.85rem;
  letter-spacing:1px;
}

.taller-hero h1{
  font-size:2.3rem;
  margin-bottom:30px;
}
/* =========================
   HERO TITLE LINK
========================= */

.hero-title-link a{
  color:#ff00aa; /* fucsia */
  text-decoration:none;
  transition:0.25s;
}

.hero-title-link a:hover{
  color:#000; /* negro */
}
/* VIDEO */
.video-wrapper{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:14px;
}

.video-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* =========================
   SECCIONES
========================= */
.taller-section{
  padding:70px 20px;
  max-width:900px;
  margin:auto;
}

.taller-section h2{
  text-align:center;
  margin-bottom:35px;
  font-size:1.6rem;
}

/* =========================
   ACCORDION (FIX REAL)
========================= */
.accordion-item{
  border-bottom:1px solid #eee;
  margin-bottom:12px;              /* 🔥 evita colisión */
  position:relative;
}

/* BOTÓN */
.accordion-item button{
  width:100%;
  text-align:left;
  background:var(--fucsia);
  color:#fff;
  border:none;
  padding:16px;
  font-size:1rem;
  cursor:pointer;
  position:relative;
  font-weight:500;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.1s ease;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.accordion-item button:active{
  transform: scale(0.98);
}

.accordion-item button:hover{
  opacity:0.9;
}

/* ICONO */
.accordion-item button::after{
  content:"+";
  position:absolute;
  right:15px;
  font-size:1.2rem;
  font-weight:bold;
  color:#fff;
  transition:0.25s;
}

/* ACTIVO */
.accordion-item.active > button{
  background:var(--lima);
  color:#000;
}

.accordion-item.active > button::after{
  content:"–";
  color:#000;
}

/* CONTENIDO */
.accordion-item .content{
  max-height:0;
  overflow:hidden;

  background:#fafafa;
  color:#000;                     /* 🔥 negro real */
  font-size:15px;
  line-height:1.6;

  padding:0 18px;

  transition:
    max-height 0.35s ease,
    padding 0.25s ease;
}

/* TEXTO */
.accordion-item .content p{
  margin:12px 0;
  word-break:break-word;          /* 🔥 evita cortes */
}

/* ACTIVO */
.accordion-item.active{
  z-index:2;                      /* 🔥 evita solapamientos */
}

.accordion-item.active .content{
  max-height:500px;
  padding:15px 18px;
}

/* =========================
   CTA
========================= */
.taller-cta{
  background:#000;
  color:#fff;
  text-align:center;
  padding:70px 20px;
}

.cta-sub{
  margin:10px 0 30px;
  color:#ccc;
}

/* FORM */
.taller-form{
  display:flex;
  flex-direction:column;
  gap:15px;
  max-width:400px;
  margin:auto;
}

.taller-form input{
  padding:12px;
  border:none;
  border-radius:6px;
}

.taller-form button{
  padding:12px;
  border:none;
  background:var(--fucsia);
  color:#fff;
  cursor:pointer;
  font-weight:bold;
  border-radius:6px;
  transition:0.25s;
}

.taller-form button:hover{
  background:var(--lima);
  color:#000;
}

/* BOTÓN EXTRA */
.btn-bik{
  display:inline-block;
  margin-top:25px;
  padding:14px 26px;
  background:var(--fucsia);
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  border-radius:8px;
  transition:0.25s;
}

.btn-bik:hover{
  background:var(--lima);
  color:#000;
}

/* =========================
   RESPONSIVE (FIX MÓVIL REAL)
========================= */
@media(max-width:768px){

  .taller-hero{
    padding-top:20px;
  }

  .taller-hero h1{
    font-size:1.9rem;
  }

  .taller-section{
    padding:50px 20px;
  }

  .accordion-item button{
    padding:18px;
    font-size:1.05rem;
  }

  /* 🔥 CLAVE: mejora de contenido */
  .accordion-item .content{
    font-size:16px;
    line-height:1.7;
    padding:0 14px;
  }

  .accordion-item.active .content{
    padding:14px;
    max-height:900px; /* 🔥 evita cortes en móvil */
  }

  .accordion-item .content p{
    margin:10px 0;
  }

}