/* ===== Sección Funcionalidades: mismo ancho que las demás secciones (máximo 1180 px, centrado) ===== */
  .lpf{
    padding:56px 24px;           /* 24 px a los lados, igual que banner, video y certificación */
    padding:0px 24px;           /* 24 px a los lados, igual que banner, video y certificación */
    background:#fff;
  }
  .lpf *,.lpf *::before,.lpf *::after{box-sizing:border-box}

  .lpf__wrap{
    max-width:1180px;            /* mismo ancho máximo que las otras secciones */
    margin:0 auto;               /* centrado */
  }

  .lpf__titulo{
    float:none; clear:both; padding:0;   /* protección contra "h1/h2" globales de Estilos.css */
    margin:0 0 32px;
    text-align:center;
    font-family:'Poppins', sans-serif; font-weight:600;
    font-size:clamp(26px, 2.6vw, 38px); line-height:1.2; letter-spacing:-.01em;
    color:#2E8B4F;
  }

  /* Anula el "width:100%" que Estilos.css le da al contenedor de esta banda,
     para que el acordeón respete el ancho de .lpf__wrap */
  .lpf .contenedor{width:100% !important; max-width:100%; margin:0 !important; display:block !important}

  .lpf_contenido{
      padding:30px;
      color:gray;
  }

  .lpf_icono{
      background-color:#F0FDE1; 
      background-color:#8FE0A8;
      background-color:#EDFAF1;
      padding:8px; 
      border-radius:6px; 
      color:green;
      color:#2E8B4F;
      margin-right:10px;
  }

  @media (max-width:560px){
    .lpf{padding:40px 16px}
  }




  /* ===== Funcionalidades: indicar que las barras se abren ===== */
.lpf__instruccion{
  float:none; padding:0; margin:-16px 0 28px;
  text-align:center; font-size:15px; color:#5B6472;
}

/* Barra cerrada */
.headerCssClass{
  position:relative;
  padding-right:150px !important;
  background:#F3F5F4 !important;            /* quita la imagen del "+" */
  border:1px solid #E3E7EB;
  border-radius:10px;
  color:#1C2230 !important;
  transition:background .2s ease, border-color .2s ease;
}
.headerCssClass:hover{
  background:#EAF3EC !important;
  border-color:#B9D3C1;
}
.headerCssClass::after{
  content:"Ver funciones";
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  padding-right:26px;
  font-size:14px; font-weight:600; color:#2E8B4F;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8B4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 18px;
}

/* Barra abierta */
.headerSelectedCss{
  position:relative;
  padding-right:150px !important;
  background:#EAF3EC !important;
  border:1px solid #B9D3C1;
  border-radius:10px 10px 0 0;
  color:#1F5C33 !important;
  margin-bottom:0 !important;
}
.headerSelectedCss::after{
  content:"Ocultar";
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  padding-right:26px;
  font-size:14px; font-weight:600; color:#1F5C33;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5C33' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E") no-repeat right center / 18px;
}

/* Contenido abierto: unido visualmente a su barra */
.contentCssClass{
  border:1px solid #B9D3C1 !important;
  border-top:0 !important;
  border-radius:0 0 10px 10px;
}

/* Celular: solo la flecha, sin texto */
@media (max-width:640px){
  .headerCssClass,.headerSelectedCss{padding-right:52px !important}
  .headerCssClass::after,.headerSelectedCss::after{content:""; width:18px; height:18px; padding:0}
}