/* --- ESTILOS GENERALES DEL ACORDEÓN --- */
  /* Puedes ajustar estas variables para que coincidan con los colores de tu marca */
  :root {
    --color-primario: #008f39; /* El verde de tu subtítulo */
    --color-borde: #e5e7eb;
    --color-texto-titulo: #111827;
    --color-texto-subtitulo: #6b7280;
    --color-texto-contenido: #374151;
    --fuente-principal: 'Inter', sans-serif; /* Usamos una fuente moderna y legible */
  }

  /* Contenedor principal del acordeón */
  .custom-accordion-wrapper {
    font-family: var(--fuente-principal);
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px; /* Bordes redondeados para un look moderno */
  }

  .accordion-item {
    border-bottom: 1px solid var(--color-borde);
  }
  .accordion-item:last-of-type {
    border-bottom: none;
  }

  /* --- ESTILOS DEL BOTÓN (TÍTULO) --- */
  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
  }
  
  .accordion-header:hover {
    background-color: #f9fafb;
  }

  .header-text-content .title {
    /*font-size: var(--h2); /* 18px */
    font-weight: 600;
    color: var(--black);
    margin: 0;
  }
  
  .header-text-content .subtitle {
    font-size: vart(--text-m); /* 14px */
    font-weight: 700;
    color: var(--accent);
    margin: 4px 0 0 0;
    transition: color 0.4s ease-in-out;
  }

  /* Cuando el acordeón está activo, el subtítulo cambia de color */
  .accordion-header.active .subtitle {
    color: var(--primary);
  }

  /* --- ESTILOS DEL ICONO --- */
  .accordion-icon {
    width: 24px;
    height: 24px;
    min-width: 24px; /* Evita que se encoja */
    margin-left: 16px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Transición suave para la rotación */
    color: #9ca3af;
  }

  /* Rota el icono cuando el acordeón está activo */
  .accordion-header.active .accordion-icon {
    transform: rotate(90deg); /* Gira la flecha hacia abajo */
    color: var(--color-primario);
  }


  /* --- ESTILOS DEL CONTENIDO (LA PARTE QUE SE ANIMA) --- */
  .accordion-content {
    max-height: 0; /* Inicia cerrado por defecto */
    overflow: hidden;
    background-color: #ffffff;
    /* La transición suave que buscamos para la altura */
    transition: max-height 0.4s ease-in-out;
  }
  
  .accordion-content .content-inner {
    padding: 0px 20px 24px 20px;
    margin: 0;
    color: var(--color-texto-contenido);
    line-height: 1.6;
    font-size: var(--text-m); /* 16px */
  }